1. Yubichiza new map experience on smartphone / tablet interface
Taro Kawai
Yahoo Japan Corporation
1

2. agenda
•self introduction
•product overview about “yubichiz”
•better interface for finger
•better way to behave as WebApplication
2

3. Taro Kawai
tarkawai@yahoo-corp.jp
http://twitter.com/inuro
http://facebook.com/inuro
CMO office
Yahoo Japan Corporation
self introduction
3

4. (some of)my bikes
4

5. what’s yubichiz?
•map application
•based on HTML5
•specifically designed for iPad
5

6. yubi-chiz meens:
yubi = finger
chiz = map
6

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. demo
19
http://latlonglab.yahoo.co.jp/map
8

9. text labels on a map
9

10. tiled text label data
10

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. finger ≠ cursor
≠
12

13. finger ≠ cursor
very small button
13

14. very small button
finger ≠ cursor
14

15. very small button
finger ≠ cursor
15

16. very small button
finger ≠ cursor
16

17. finger ≠ cursor
very small button
17

18. finger ≠ cursor
very small button
18

19. finger ≠ cursor
very small button
x
19

20. finger ≠ cursor
a finger never make
mistakes,
but the result is truly
not reliable.
20

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. 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. 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. full-screen mode
<meta name=”apple-mobile-web-app-capable” content=”yes”>
24

25. full-screen-safari forgets
everything about your
application easily
25

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. namespaces of keys
27

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. sketch & measure
•measuring is major activity on map
•very easy and direct
16

30. wrap up
•Yubichiz is a WebApplication
for fingers
•Don’t remember a finger is
not a cursor
•WebApplication must work
harder
30

31. any questions:
tarkawai@yahoo-corp.jp
http://twitter.com/inuro
http://facebook.com/inuro
Thank you!
31