O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Yubichiz - a new map experience on smartphone / tablet interface

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo
  • Seja o primeiro a comentar

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

×