nokia asha ux webinar: design tips for nokia asha game developers
DESCRIPTION
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/TRANSCRIPT
Design tips for Nokia Asha game developers Jan Krebber @krebbixux Senior User Experience Consultant
Overview
2 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
• Mobile mindset • App navigation and settings • Layout • Gestures • UX offering • Take home messages
Mobile mindset
3 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
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
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
App navigation and Settings
7 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
Pause and continue are must-have features.
9 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
Keep your splash screen brief.
10 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
Keep your splash screen brief.
11 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
structure suits most of the games.
12 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
Drill-dow
n
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
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
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
Offer sound setting as early as possible.
16 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
Make high score entry creation easy.
18 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
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
Layout
22 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
Make it BIG.
23 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
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
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
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
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
Make navigation and special function buttons visible.
33 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
35 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
Gestures
36 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
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
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
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
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
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
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
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
UX offering
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
These game tips are online now.
48 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
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
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
Literature and links
51 © Nokia 2013 Design tips for Nokia Asha game developers.pptx 2013-22-10 Jan Krebber @krebbixux
• 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_Asha_web_apps_library/#!design-library.html
• Nokia Asha UI component demos: https://projects.developer.nokia.com/asha_ui_component_demos
Take home messages
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
54 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-18-09 Jan Krebber @krebbixux
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
Thanks to Sanna Hiukka, Maaike Beenen, and Stratos Kalogirou.
