More Related Content More from Microsoft Mobile Developer (20) Design tips for Series 40 game developers1. Design tips for Series 40
game developers
1 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
2. Overview
Overview
• Series 40 full touch specific characteristics
• Navigation and settings
• In-game interaction
• Take home messages
• Exercises
2 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
3. Series 40 full touch specific
characteristics
3 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
4. This is an entry level phone.
4 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
5. The compact phone is equipped with a
3’’ screen and acceleration sensors.
5 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
7. People want to start, pause and exit a
mobile game fast – with one tap.
7 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
8. Allow people to skip the intro.
8 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
9. Avoid scrolling and swiping to access
any feature.
9 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
10. 10 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
11. Example: Make it big.
11 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
12. Split screens up into 2 screens when
necessary.
Series 40 full touch
E7 Symbian Belle
12 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
13. Do not rely on icons only.
13 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
14. Be consistent with icon metaphors –
text might solve the problem.
14 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
15. There is no focus in Series 40 touch
phones.
15 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
16. Hide all non-touch related views and
check your help text about non-touch.
16 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
17. Combine sound settings at the start
with other settings or calls-to-action.
17 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
18. Settings should be persistent and
mute sound if the phone is silent.
18 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
19. Always ensure a way back to the game.
19 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
20. Use a virtual keyboard with QWERTY
layout, not with ABCDEF nor a tumbler.
20 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
21. Drill down structure suits for most of
the games.
21 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
22. Take care of your business drivers.
22 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
24. A button is a button and a button is a
button.
24 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
25. Make navigation and special function
buttons visible.
25 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
26. In portrait, one finger easily hides 1/3
of the relevant screen area.
26 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
27. Resistive screens might have trouble
with multipoint gestures.
27 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
28. Do drag and drop with an offset, since
you do not see the target otherwise.
screen screen screen
people’s people’s
view view
28 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
29. Dialogs must put everything else to
the background.
29 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
30. If levels take longer than seconds, find
a way to continue where terminated.
30 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
31. Test it – on the device not only on the
workstation.
31 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
32. Take home messages
32 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
33. 33 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
34. People want to play – but not with your
menus.
34 © Nokia 2012 UX Basics.pptx v. 0.1 YYYY-MM-DD Jan Krebber
35. Adapt the interaction to the limited
screen real estate.
35 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
36. More on the topic:
Game design:
http://www.developer.nokia.com/Resources/Library/Design_and_UX/#!designing-different-
applications/game-design.html
UX Library: http://www.developer.nokia.com/Resources/Library/Full_Touch/
UX Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-
checklist.html
Icon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-
creation.html
UI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-
components.html
UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation
UX Basics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/
Wiki article to this webinar:
http://www.developer.nokia.com/Community/Wiki/Series_40_UI_game_design_tips_webinar
_%E2%80%93_companion_article
36 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
37. Exercises
37 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
38. Exercise: What is the minimum size of a
standard touch area and its margin?
- The answer should relate to size in cm and amount
of pixels in Series 40 full touch devices.
38 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
39. Exercise: How would you catch up for a
too small touch area?
E.g. Your touch area is only 4 mm x 4 mm, with only
0,3 mm margin, what would you do to support
people playing with your game?
39 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
40. Exercise: What does your application
do if people press the red end key?
40 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
41. Exercise: The phone is muted, but the
user set ”sound on” during the last
game session.
How does your game behave now that
it is opened?
41 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
42. Exercise: How would you change the
following UI component?
42 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
43. Exercise: Where would you place your
in-app purchase access?
43 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
44. Exercise: How does your game handle
the backlight timeout?
You find more information from here:
http://www.developer.nokia.com/Resources/Library
/Design_and_UX/#!designing-different-
applications/game-design/game-user-experience-
guidelines.html
44 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
45. Thanks to:
- Anne Kivimaa
- Sanna Hiukka
45 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber