Contenu connexe Similaire à Nokia Asha UX webinar: Design tips for Nokia Asha game developers (20) Plus de Microsoft Mobile Developer (15) Nokia Asha UX webinar: Design tips for Nokia Asha game developers1. Design tips for Nokia Asha game developers
Jan Krebber @krebbixux
Senior User Experience Consultant
2. Overview
Mobile mindset
App navigation and settings
Layout
Gestures
UX offering
Take home messages
•
•
•
•
•
•
2
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
4. The mobile context differs from the living
room context.
4
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
5. People are bored, local and they can do only
small tasks.
5
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
6. The bus comes always – at the wrong time.
6
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
7. App navigation and Settings
7
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
8. Start, pause, continue, and exit a mobile
game fast – with one tap or gesture.
8
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
9. Pause and continue are must-have
features.
9
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
10. Keep your splash screen brief.
10
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
11. Keep your splash screen brief.
11
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
13. Hardware Back key must be used for Pause,
Back, and Cancel.
13
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
14. Always ensure a way back to the game.
14
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
15. Avoid scrolling or swiping or excess use of
buttons to access any feature.
15
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
16. Offer sound setting as early as possible.
16
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
17. Make high score entry creation easy.
18
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
18. Temporary online high score lists make
(nearly) everybody feel good.
20
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
19. People want to play with your game –
not with your menu.
21
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
21. Make it BIG.
23
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
22. Split screens up into two screens when
necessary.
24
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
23. Be consistent with icon metaphors – text
might work better in some cases.
26
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
24. There is no focus in Nokia Asha touch
phones.
27
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
25. Hide all non-touch related content in touch
phones.
28
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
26. A button is a button, and vice versa.
32
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
27. Make navigation and special function
buttons visible.
33
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
28. In portrait mode, one finger easily hides 1/3
of the relevant area.
34
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
29. 35
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
31. Consider a swipe safety margin of 25 pixels.
38
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
32. Games in landscape orientation must rotate
the canvas as well.
39
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
33. Resistive screens might have trouble with
multi-point gestures.
40
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
34. Finger’s centroid is not where initially
expected.
41
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
35. Add solutions for too small touch areas.
#1 Offset.
42
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
36. Add solutions for too small touch areas.
#2 Cross Hairs.
43
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
37. Add solutions for too small touch areas.
#3 Fish eye.
44
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
38. Test it – on the phone, not only on the
workstation.
45
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
40. There are LCDUI and LWUIT UI style guides.
47
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
41. These game tips are online now.
48
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
42. There are UI stencils for Inkscape in
addition to Adobe Illustrator.
49
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
43. Asha UI component demo application is a
Java midlet suite for LCDUI.
50
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
44. Literature and links
• UX Library for Nokia Asha:
http://www.developer.nokia.com/Resources/Library/Asha_UI/
#!index.html
• Nokia Asha Web app UX guidelines:
http://www.developer.nokia.com/Resources/Library/Nokia_As
ha_web_apps_library/#!design-library.html
• Nokia Asha UI component demos:
https://projects.developer.nokia.com/asha_ui_component_de
mos
51
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
46. People want to play with your game –
not with your menu.
53
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
47. 54
© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-18-09 Jan Krebber @krebbixux
48. Test it – on the phone, not only on the
workstation.
55
© Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux