design tips for series 40 game developers
DESCRIPTION
UX expert Jan Krebber from Digia provides game-design tips based on averting design flaws and design deal-breakers that were identified in reviews of real games from several vendors. You’ll learn easy-to-follow rules for creating experiences that will make people keep playing your games — instead of just trying them out. The presentation also features examples of basic game-menu design and includes exercises. Sample solutions for the exercises will be published in a Nokia Developer Wiki article.TRANSCRIPT
![Page 1: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/1.jpg)
1
Design tips for Series 40 game developers
© Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 2: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/2.jpg)
Overview
2 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
Overview • Series 40 full touch specific characteristics • Navigation and settings • In-game interaction • Take home messages • Exercises
![Page 3: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/3.jpg)
Series 40 full touch specific characteristics
3 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 4: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/4.jpg)
This is an entry level phone.
4 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 5: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/5.jpg)
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
![Page 6: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/6.jpg)
Navigation and settings
6 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 7: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/7.jpg)
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
![Page 8: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/8.jpg)
Allow people to skip the intro.
8 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 9: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/9.jpg)
Avoid scrolling and swiping to access any feature.
9 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 10: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/10.jpg)
10 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 11: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/11.jpg)
Example: Make it big.
11 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 12: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/12.jpg)
Split screens up into 2 screens when necessary.
12 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
E7 Symbian Belle
Series 40 full touch
![Page 13: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/13.jpg)
Do not rely on icons only.
13 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 14: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/14.jpg)
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
![Page 15: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/15.jpg)
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
![Page 16: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/16.jpg)
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
![Page 17: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/17.jpg)
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
![Page 18: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/18.jpg)
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
![Page 19: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/19.jpg)
Always ensure a way back to the game.
19 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 20: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/20.jpg)
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
![Page 21: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/21.jpg)
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
![Page 22: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/22.jpg)
Take care of your business drivers.
22 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 23: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/23.jpg)
In-game interaction
23 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 24: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/24.jpg)
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
![Page 25: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/25.jpg)
Make navigation and special function buttons visible.
25 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 26: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/26.jpg)
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
![Page 27: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/27.jpg)
Resistive screens might have trouble with multipoint gestures.
27 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 28: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/28.jpg)
Do drag and drop with an offset, since you do not see the target otherwise.
28 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
screen screen
people’s view
screen
people’s view
![Page 29: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/29.jpg)
Dialogs must put everything else to the background.
29 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 30: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/30.jpg)
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
![Page 31: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/31.jpg)
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
![Page 32: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/32.jpg)
Take home messages
32 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 33: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/33.jpg)
33 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 34: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/34.jpg)
People want to play – but not with your menus.
34 © Nokia 2012 UX Basics.pptx v. 0.1 YYYY-MM-DD Jan Krebber
![Page 35: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/35.jpg)
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
![Page 36: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/36.jpg)
More on the topic:
36 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
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
![Page 37: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/37.jpg)
Exercises
37 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 38: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/38.jpg)
Exercise: What is the minimum size of a standard touch area and its margin?
38 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
- The answer should relate to size in cm and amount of pixels in Series 40 full touch devices.
![Page 39: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/39.jpg)
Exercise: How would you catch up for a too small touch area?
39 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
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?
![Page 40: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/40.jpg)
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
![Page 41: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/41.jpg)
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
![Page 42: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/42.jpg)
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
![Page 43: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/43.jpg)
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
![Page 44: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/44.jpg)
Exercise: How does your game handle the backlight timeout?
44 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
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
![Page 45: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/45.jpg)
Thanks to: - Anne Kivimaa - Sanna Hiukka
45 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber
![Page 46: Design tips for Series 40 game developers](https://reader033.vdocuments.us/reader033/viewer/2022060109/55532ad5b4c905a7778b54c6/html5/thumbnails/46.jpg)
Thanks [email protected]
46 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber