![Page 1: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/1.jpg)
Nokia Asha UX clinic November 2013 Jan Krebber @krebbixux
Senior User Experience Consultant
![Page 2: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/2.jpg)
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
![Page 3: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/3.jpg)
Jumping Man
![Page 4: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/4.jpg)
Structure
4 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 5: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/5.jpg)
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
![Page 6: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/6.jpg)
Use a square launcher icon.
6 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 7: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/7.jpg)
Canvas orientation is wrong.
7 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
Correct canvas orientation
![Page 8: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/8.jpg)
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
![Page 9: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/9.jpg)
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
![Page 10: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/10.jpg)
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
![Page 11: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/11.jpg)
Keep response times short.
11 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 12: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/12.jpg)
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
![Page 13: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/13.jpg)
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
![Page 14: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/14.jpg)
Do not link to broken webpages.
14 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 15: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/15.jpg)
Finger hides the coming gaps.
15 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 16: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/16.jpg)
The game idea is good.
16 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 17: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/17.jpg)
17 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 18: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/18.jpg)
Improve the feedback.
18 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 19: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/19.jpg)
Sky Sudoku
![Page 20: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/20.jpg)
Structure
20 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 21: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/21.jpg)
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
![Page 22: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/22.jpg)
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
![Page 23: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/23.jpg)
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
![Page 24: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/24.jpg)
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
![Page 25: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/25.jpg)
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
![Page 26: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/26.jpg)
Dialogs should not be cryptic but crystal clear.
26 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 27: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/27.jpg)
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
![Page 28: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/28.jpg)
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
![Page 29: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/29.jpg)
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
![Page 30: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/30.jpg)
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
![Page 31: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/31.jpg)
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
![Page 32: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/32.jpg)
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
![Page 33: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/33.jpg)
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
![Page 34: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/34.jpg)
Remove settings to reduce complexity.
34 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 35: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/35.jpg)
Remove hierarchy levels to reduce complexity.
35 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 36: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/36.jpg)
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
![Page 37: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/37.jpg)
Proposals for redesign
![Page 38: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/38.jpg)
Simplify the game canvas.
38 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 39: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/39.jpg)
Reduce the options.
39 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 40: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/40.jpg)
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
![Page 41: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/41.jpg)
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
![Page 42: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/42.jpg)
Proposed structure.
42 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 43: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/43.jpg)
Proposed interaction.
43 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 44: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/44.jpg)
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
![Page 45: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/45.jpg)
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
![Page 46: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/46.jpg)
UX offering
![Page 47: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/47.jpg)
There are LCDUI and LWUIT UI style guides.
47 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 48: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/48.jpg)
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
![Page 49: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/49.jpg)
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
![Page 50: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/50.jpg)
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]
![Page 51: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/51.jpg)
Take home messages
![Page 52: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/52.jpg)
52 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 53: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/53.jpg)
Improve the feedback.
53 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
![Page 54: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/54.jpg)
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
![Page 55: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/55.jpg)
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
![Page 57: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku](https://reader033.vdocuments.mx/reader033/viewer/2022052410/55492032b4c90547498b86a3/html5/thumbnails/57.jpg)
Thanks to Sanna Hiukka and Stratos Kalogirou.