Our UX specialist, Jan Krebber of OCT03, shares design tips for creating Nokia Asha games. These tips are based on averting flaws and deal-breakers that have been found during UX reviews of real games submitted to Nokia Store. Jan will illustrate similarities among games from many developers and will provide easy-to-follow rules for creating game experiences that’ll make people want to keep playing your games instead of just trying them out. Find out more about: * developing for Nokia Asha: http://www.developer.nokia.com/Develop/asha * UX guidelines for Java apps: http://www.developer.nokia.com/Resources/Library/Asha_UI/ * Design tips for game developers: http://developer.nokia.com/Resources/Library/Asha_UI/#!design-tips-for-game-developers.html * UX guidelines for web apps: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/ * component demos: https://projects.developer.nokia.com/asha_ui_component_demos Check out the current webinar schedule here: http://www.developer.nokia.com/webinars and https://developer.nokia.com/Develop/asha/learning/

1. 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

3. Mobile mindset
3
© 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

12. Drill-down
structure
suits most
of the
games.
12
© 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

20. Layout
22
© 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

30. Gestures
36
© 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

39. UX offering

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

45. Take home messages

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

49. Thanks to Sanna Hiukka,
Maaike Beenen, and Stratos Kalogirou.

50. Thanks .
Jan Krebber
ext-jan.krebber@nokia.com
@krebbixux