Date post: | 13-May-2015 |
Category: |
Technology |
Upload: | microsoft-mobile-developer |
View: | 2,206 times |
Download: | 2 times |
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.