Yubichiza new map experience on smartphone / tablet interface
Taro Kawai
Yahoo Japan Corporation
1
agenda
•self introduction
•product overview about “yubichiz”
•better interface for finger
•better way to behave as WebAppli...
Taro Kawai
tarkawai@yahoo-corp.jp
http://twitter.com/inuro
http://facebook.com/inuro
CMO office
Yahoo Japan Corporation
self...
(some of)my bikes
4
what’s yubichiz?
•map application
•based on HTML5
•specifically designed for iPad
5
yubi-chiz meens:
yubi = finger
chiz = map
6
you can do:
•basic map-app operation
•tap text labels on a map, and get more details
•measure metrics by tracing a map
•al...
demo
19
http://latlonglab.yahoo.co.jp/map
8
text labels on a map
9
tiled text label data
10
tap & get details
•tap & get details
–full name
–telephone number(you can call it)
–summary
–url
•any text on map
–not onl...
finger ≠ cursor
≠
12
finger ≠ cursor
very small button
13
very small button
finger ≠ cursor
14
very small button
finger ≠ cursor
15
very small button
finger ≠ cursor
16
finger ≠ cursor
very small button
17
finger ≠ cursor
very small button
18
finger ≠ cursor
very small button
x
19
finger ≠ cursor
a finger never make
mistakes,
but the result is truly
not reliable.
20
which label user wanted?
•detect the nearest Text Label
–in case the point is out of boundary
–in case the point is in mul...
out of boundary
•choose the Label by distance from the
edge of boundary box to the point
•default threshold value: 16px
Ba...
in multiple boundaries
Starbucks coffee
Bank of
America
Starbucks coffee
Bank of
America
•choose the Label by distance from ...
full-screen mode
<meta name=”apple-mobile-web-app-capable” content=”yes”>
24
full-screen-safari forgets
everything about your
application easily
25
using localStorage
•save application status
–last viewing position & zoom level
–search result
–view mode(map, list, grid)...
namespaces of keys
27
to behave more like app:
•save status for App Switching
•prepare App-icon and Startup-image
– <link rel=”apple-touch-icon”...
sketch & measure
•measuring is major activity on map
•very easy and direct
16
wrap up
•Yubichiz is a WebApplication
for fingers
•Don’t remember a finger is
not a cursor
•WebApplication must work
harder
...
any questions:
tarkawai@yahoo-corp.jp
http://twitter.com/inuro
http://facebook.com/inuro
Thank you!
31
Upcoming SlideShare
Loading in …5
×

Yubichiz - a new map experience on smartphone / tablet interface

518 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
518
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Yubichiz - a new map experience on smartphone / tablet interface

  1. 1. Yubichiza new map experience on smartphone / tablet interface Taro Kawai Yahoo Japan Corporation 1
  2. 2. agenda •self introduction •product overview about “yubichiz” •better interface for finger •better way to behave as WebApplication 2
  3. 3. Taro Kawai tarkawai@yahoo-corp.jp http://twitter.com/inuro http://facebook.com/inuro CMO office Yahoo Japan Corporation self introduction 3
  4. 4. (some of)my bikes 4
  5. 5. what’s yubichiz? •map application •based on HTML5 •specifically designed for iPad 5
  6. 6. yubi-chiz meens: yubi = finger chiz = map 6
  7. 7. you can do: •basic map-app operation •tap text labels on a map, and get more details •measure metrics by tracing a map •also do a local search along drawn line 7
  8. 8. demo 19 http://latlonglab.yahoo.co.jp/map 8
  9. 9. text labels on a map 9
  10. 10. tiled text label data 10
  11. 11. tap & get details •tap & get details –full name –telephone number(you can call it) –summary –url •any text on map –not only POI(not as Google Maps) –river, mountain, road, ... 11
  12. 12. finger ≠ cursor ≠ 12
  13. 13. finger ≠ cursor very small button 13
  14. 14. very small button finger ≠ cursor 14
  15. 15. very small button finger ≠ cursor 15
  16. 16. very small button finger ≠ cursor 16
  17. 17. finger ≠ cursor very small button 17
  18. 18. finger ≠ cursor very small button 18
  19. 19. finger ≠ cursor very small button x 19
  20. 20. finger ≠ cursor a finger never make mistakes, but the result is truly not reliable. 20
  21. 21. which label user wanted? •detect the nearest Text Label –in case the point is out of boundary –in case the point is in multiple boundaries 21
  22. 22. out of boundary •choose the Label by distance from the edge of boundary box to the point •default threshold value: 16px Bank of America Starbucks Coffee Bank of America Starbucks Coffee 22
  23. 23. in multiple boundaries Starbucks coffee Bank of America Starbucks coffee Bank of America •choose the Label by distance from the center of boundaly box to the point 23
  24. 24. full-screen mode <meta name=”apple-mobile-web-app-capable” content=”yes”> 24
  25. 25. full-screen-safari forgets everything about your application easily 25
  26. 26. using localStorage •save application status –last viewing position & zoom level –search result –view mode(map, list, grid) –history of map-moved •enable go back and go forward 26
  27. 27. namespaces of keys 27
  28. 28. to behave more like app: •save status for App Switching •prepare App-icon and Startup-image – <link rel=”apple-touch-icon” href=”images/home_white.png” /> – <link rel=”apple-touch-startup-image” href=”images/default-portrait.png”> •shorten startup sequence 28
  29. 29. sketch & measure •measuring is major activity on map •very easy and direct 16
  30. 30. wrap up •Yubichiz is a WebApplication for fingers •Don’t remember a finger is not a cursor •WebApplication must work harder 30
  31. 31. any questions: tarkawai@yahoo-corp.jp http://twitter.com/inuro http://facebook.com/inuro Thank you! 31

×