Nokia Asha UX clinic November 2013 Jan Krebber @krebbixux Senior User Experience Consultant
May 06, 2015
Nokia Asha UX clinic November 2013 Jan Krebber @krebbixux
Senior User Experience Consultant
Overview
2 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
• Jumping Man (Anselmus Kurniawan)
• Sky Sudoku (Govind Kumar)
• UX offering
• Take home messages
Jumping Man
Structure
4 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Truncated name makes the app look unprofessional before it is even started.
5 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Use a square launcher icon.
6 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Canvas orientation is wrong.
7 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Correct canvas orientation
Button sizes are too small. Minimum touch area is 7mm x 7mm.
8 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
7mm x 7mm, 1mm margin 37px x 37 px, 5px margin
9mm x 9mm, 1mm margin 47px x 47px, 5px margin
Add touch down feedback for all touch elements.
9 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Mockup
Use the hardware back key instead of pause/back/exit buttons on screen.
10 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Keep response times short.
11 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
The ads are placed well, but do not show ads in the game canvas while playing.
12 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Set the game sound to off when opening the game.
13 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Do not link to broken webpages.
14 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Finger hides the coming gaps.
15 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
The game idea is good.
16 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
17 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Improve the feedback.
18 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Sky Sudoku
Structure
20 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Splash screen is usually with little information and of no use.
21 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Do not use abbreviations. People will not understand your app.
22 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Do not use brackets for commands. Text becomes hard to read.
23 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Bold typeface is not good enough as an indicator.
24 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Describe all features and all possible values in the Help section.
25 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Dialogs should not be cryptic but crystal clear.
26 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Do not use LCDUI Dialog for Help or About. Use the TextBox instead.
27 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Do not set a highlight or an indicator to any field which people cannot effect.
28 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
LCDUI’s multiple ChoiceGroup does not work as switch metaphor in Nokia Asha.
29 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
It is too easy to (re-)place a number by accident.
30 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Check state requires an “uncheck” state, since you toggle a state not a view.
31 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Quicksavekeys do not work as there are no hardware keys. Save in background.
32 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
HW Back key must exit the game from the topmost hierarchy level. Always.
33 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Remove settings to reduce complexity.
34 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Remove hierarchy levels to reduce complexity.
35 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Free the canvas from options menu and gain screen real estate for main controls.
36 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Proposals for redesign
Simplify the game canvas.
38 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Reduce the options.
39 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Direct people from your game to your web page.
40 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Sell small batches of games with a low price.
41 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Proposed structure.
42 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Proposed interaction.
43 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Make sure the pocket knife fits into the pocket.
44 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Each setting is a decision you were too much of a coward to take.
45 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
UX offering
There are LCDUI and LWUIT UI style guides.
47 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
There are UI stencils for Inkscape in addition to Adobe Illustrator.
48 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Asha UI component demo application is a Java midlet suite for LCDUI.
49 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Literature and links
50 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 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
• Jumping Man: http://store.ovi.com/content/260091
• Sky Sudoku: [email protected]
Take home messages
52 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Improve the feedback.
53 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Make sure the pocket knife fits into the pocket.
54 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Each setting is a decision you were too much of a coward to take.
55 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Thanks to Sanna Hiukka and Stratos Kalogirou.