Ми стоїмо на порозі нової ери - HTML5, якого так бояться Adobe та Microsoft. Один код, що працює під всіма платформами. Один набір зображень під всі роздільні здатності екранів. Мобільний Web. Мрія розробника! Проте чи завжди доречне використання HTML5? Коли, як і чому? Як зберегти юзабіліті програми на високому рівні? Цей огляд допоможе зробити вибір технології. Порівняння підходів та спроба побудувати універсальний патерн побудови інтерфейсу програми - мета цієї презентації.

1. Mobile UX
Dmytro Svarytsevych, SoftServe

2. How we use mobiles?

3. •Messaging
•Audio
•Imaging, Media Sharing
•Microblogging, Social Media
•Location-Based
•Enterprise
•Search, QR Codes
•Phone,VoIP
•Games

5. HOW?
• distractions
• small screens
• one thumb input
• little battery

6. WHERE?
• at home
• misc. situations during day
• waiting in line
• at work

7. UX

8. MOBILE BEHAVIORS
•What mobile is good at
•Content first, navigation - second
•Adjust app organization accordingly
•Don’t dumb site down for mobile

9. TOUCH TARGETS

10. COMFORT ZONE

11. EXCESSIVE NAVIGATION

12. QUICK ACCESS

13. CONTEXT ACTIONS

14. FIXED POSITIONING

15. REDUCE SIZE
•Eliminate redirects
•Use CSS sprites
•Single files
•Minify code
•Load contents lazily
•Use cache
•Use CSS3 possibilities

16. LEAN ON CSS3
•border-radius
•rgba-color
•text-shadow
•box-shadow
•gradients
•multiple backgrounds

17. CLARITY AND FOCUS
•Minimize navigation required
•Focus on task

18. OPTIMIZING SCREEN
Text
http://www.useit.com/alertbox/mobile-redesign.html

19. OPTIMIZING SCREEN
Text
http://www.useit.com/alertbox/mobile-redesign.html

20. Web Apps UX

21. WHO CARES ABOUT UX?

22. TITLE BAR

23. TAB BAR

24. TITLE & TAB BAR

25. DASHBOARD

26. TAB BAR VS. DASHBOARD

27. Mobile Web vs. Native

28. Native App vs. Web App
Hardware features Only GPS
Compiled Code, High Performance Interpreted Code
High Security Low Security
Normal Storage Limited Storage
Complex Gestures Only basic
UI pack for every screen One UI pack
No sharing possible Can share URL
Lower battery use GPRS, Wi Fi or 3G grabs battery

29. Native Apps - for doing
•Photo editing
•Video overlays
•Augmented reality
•Interactive games

30. Web Apps - for reference
•To-do's
•Schedule
•Mail
•News
•Galleries

31. Useful Links
• http://mobile-patterns.com
• http://pttrns.com
• http://androidpatterns.com
• http://lovelyui.com

32. Books