Nokia Asha UX clinic November 2013
Jan Krebber @krebbixux
Senior User Experience Consultant
Overview
• Jumping Man (Anselmus
Kurniawan)
• Sky Sudoku (Govind Kumar)
• UX offering
• Take home messages

2

© Nokia 201...
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...
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.

Correct canvas orientation
7

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-1...
Button sizes are too small. Minimum touch
area is 7mm x 7mm.

7mm x 7mm, 1mm margin
37px x 37 px, 5px margin
8

© Nokia 20...
Add touch down feedback for all touch
elements.

Mockup
9

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11...
Use the hardware back key instead of
pause/back/exit buttons on screen.

10

© Nokia 2013 Nokia Asha UX clinic November 20...
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 Nove...
Set the game sound to off when opening
the game.

13

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan ...
Do not link to broken webpages.

14

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixu...
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 ...
Do not use abbreviations. People will not
understand your app.

22

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2...
Do not use brackets for commands. Text
becomes hard to read.

23

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 201...
Bold typeface is not good enough as an
indicator.

24

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan...
Describe all features and all possible values
in the Help section.

25

© Nokia 2013 Nokia Asha UX clinic November 2013.pp...
Dialogs should not be cryptic but crystal
clear.

26

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan ...
Do not use LCDUI Dialog for Help or About.
Use the TextBox instead.

27

© Nokia 2013 Nokia Asha UX clinic November 2013.p...
Do not set a highlight or an indicator to any
field which people cannot effect.

28

© Nokia 2013 Nokia Asha UX clinic Nov...
LCDUI’s multiple ChoiceGroup does not
work as switch metaphor in Nokia Asha.

29

© Nokia 2013 Nokia Asha UX clinic Novemb...
It is too easy to (re-)place a number by
accident.

30

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Ja...
Check state requires an “uncheck” state,
since you toggle a state not a view.

31

© Nokia 2013 Nokia Asha UX clinic Novem...
Quicksavekeys do not work as there are no
hardware keys. Save in background.

32

© Nokia 2013 Nokia Asha UX clinic Novemb...
HW Back key must exit the game from the
topmost hierarchy level. Always.

33

© Nokia 2013 Nokia Asha UX clinic November 2...
Remove settings to reduce complexity.

34

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @kr...
Remove hierarchy levels to reduce
complexity.

35

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Kre...
Free the canvas from options menu and
gain screen real estate for main controls.

36

© Nokia 2013 Nokia Asha UX clinic No...
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 Kr...
Sell small batches of games
with a low price.

41

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Kre...
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 ...
Each setting is a decision you were too
much of a coward to take.

45

© Nokia 2013 Nokia Asha UX clinic November 2013.ppt...
UX offering
There are LCDUI and LWUIT UI style guides.

47

© Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebbe...
There are UI stencils for Inkscape in
addition to Adobe Illustrator.

48

© Nokia 2013 Nokia Asha UX clinic November 2013....
Asha UI component demo application is a
Java midlet suite for LCDUI.

49

© Nokia 2013 Nokia Asha UX clinic November 2013....
Literature and links
• UX Library for Nokia Asha:
• http://www.developer.nokia.com/Resources/Library/Asha_UI/#!index.html
...
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 ...
Each setting is a decision you were too
much of a coward to take.

55

© Nokia 2013 Nokia Asha UX clinic November 2013.ppt...
Special thanks to Anselmus and
Govind 
mail.ansel@gmail.com
91govindkumar@gmail.com
Thanks to Sanna Hiukka and
Stratos Kalogirou.
Thanks .

Jan Krebber
ext-jan.krebber@nokia.com
@krebbixux
Upcoming SlideShare
Loading in …5
×

Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

2,138 views

Published on

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Jumping Man, a jump-and-run game, and a Sudoku game. Jan shares the app reviews and provides details on how the UX of these applications might be improved, as well as providing general guidance that will help with the design of any app.

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/
* 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/

Published in: Technology, Business
  • Be the first to comment

Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

  1. 1. Nokia Asha UX clinic November 2013 Jan Krebber @krebbixux Senior User Experience Consultant
  2. 2. Overview • Jumping Man (Anselmus Kurniawan) • Sky Sudoku (Govind Kumar) • UX offering • Take home messages 2 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  3. 3. Jumping Man
  4. 4. Structure 4 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  5. 5. 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
  6. 6. Use a square launcher icon. 6 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  7. 7. Canvas orientation is wrong. Correct canvas orientation 7 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  8. 8. Button sizes are too small. Minimum touch area is 7mm x 7mm. 7mm x 7mm, 1mm margin 37px x 37 px, 5px margin 8 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux 9mm x 9mm, 1mm margin 47px x 47px, 5px margin
  9. 9. Add touch down feedback for all touch elements. Mockup 9 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  10. 10. 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
  11. 11. Keep response times short. 11 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  12. 12. 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
  13. 13. 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
  14. 14. Do not link to broken webpages. 14 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  15. 15. Finger hides the coming gaps. 15 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  16. 16. The game idea is good. 16 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  17. 17. 17 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  18. 18. Improve the feedback. 18 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  19. 19. Sky Sudoku
  20. 20. Structure 20 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Dialogs should not be cryptic but crystal clear. 26 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Remove settings to reduce complexity. 34 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  35. 35. Remove hierarchy levels to reduce complexity. 35 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  36. 36. 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
  37. 37. Proposals for redesign
  38. 38. Simplify the game canvas. 38 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  39. 39. Reduce the options. 39 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  40. 40. 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
  41. 41. 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
  42. 42. Proposed structure. 42 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  43. 43. Proposed interaction. 43 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  44. 44. 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
  45. 45. 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
  46. 46. UX offering
  47. 47. There are LCDUI and LWUIT UI style guides. 47 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  48. 48. 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
  49. 49. 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
  50. 50. Literature and links • 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_libr ary/#!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: 91govindkumar@gmail.com 50 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  51. 51. Take home messages
  52. 52. 52 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  53. 53. Improve the feedback. 53 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux
  54. 54. 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
  55. 55. 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
  56. 56. Special thanks to Anselmus and Govind  mail.ansel@gmail.com 91govindkumar@gmail.com
  57. 57. Thanks to Sanna Hiukka and Stratos Kalogirou.
  58. 58. Thanks . Jan Krebber ext-jan.krebber@nokia.com @krebbixux

×