This webinar takes a deep dive into the Nokia Asha UI with UX expert Jan Krebber of OCT03 as the second part of an intensive Nokia Asha boot camp. This webinar will be particularly useful for professionals at small software companies that don’t have dedicated UI staff. At the same time, it may give seasoned UI designers new insights, too, since it will tackle design problems from a developer’s point of view. While not essential, it’s suggested that you review the Deep dive into Nokia Asha UI design: Fundamentals webinar before reviewing this session: http://www.slideshare.net/nokia-developer/deep-dive-into-nokia-asha-ui-design-fundamentals Join the live session on 29 May - 7 a.m. London; 9 a.m. Helsinki; 11:30 a.m. New Delhi; 2 p.m. Singapore: http://forumnokia.adobeconnect.com/asha-deep-dive-app-design/event/event_info.html 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 webinar schedule here: http://www.developer.nokia.com/webinars

1. Improve your Nokia Asha UI
application design
Jan Krebber
Senior User Experience Consultant
OCTO3

2. Overview
2 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
• People debugging your design with usability tests
• About usability tests
• Test preparation• People debugging your design with usability tests
• Test session
• Test outcome
• Take home messages
• Live debugging
• Take home messages
• Live debugging

3. The imageThe image
Exercise: Debug your design. But why?
3 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

4. The imageThe image
Start with usability and it will save you
time – easily a 100 times.
4 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastname
Effort to change a
usabillity problem
Project time

5. The imageThe image
5 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastname
With good UX, your architecture is
more stable and your code is cleaner .

6. You debugging your design with the
UX checklist

7. You debugging your design

8. The imageThe image
Back stepping is done via the hardware
key - and only via the hardware key.
8 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

9. The imageThe image
Place basic view elements where
expected.
9 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

10. The imageThe image
No focus - use direct touch paradigm
only.
10 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

11. The imageThe image
Indicate touch down event and trigger
on touch release.
11 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

12. The imageThe image
View related actions go to Options.
Item related actions go to item menu.
12 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

13. The imageThe image
Do not use double tap to open a menu.
Use a long-press gesture.
13 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

14. The imageThe image
Do not combine tabs and actions in
category bar.
14 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

15. The imageThe image
Exercise:
What is wrong with the view?
15 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

16. The imageThe image
Exercise:
What is wrong with the view?
16 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

17. You debugging your design

18. The imageThe image
Make touch areas large enough and
obey the minimum touch area.
18 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

19. The imageThe image
Use correct icon sizes and optimise
your icon for Nokia Asha.
19 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

20. The imageThe image
Be aware of the
Swipe; use flick
carefully.
20 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

21. The imageThe image
Do not use radio button and check box
icons in selection lists.
21 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

22. The imageThe image
Make text large enough for reading – even without magnifying
glass.
22 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

23. The imageThe image
23 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Make text large enough for reading –
even without magnifying glass.

24. The imageThe image
Use high contrast for UI components.
24 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

25. The imageThe image
Use high contrast for UI components.
25 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

26. The imageThe image
Use high contrast for UI components.
26 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
http://snook.ca/technical/colour_contrast/colour.html

27. The imageThe image
Make text easy to understand.
27 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

28. The imageThe image
Use consistent labels, expressions and
commands.
28 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

29. The imageThe image
Clean the Options menu if your
application does not require text input.
29 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

30. The imageThe image
Exercise:
Are these colors WCAG 2 compliant?
#00FF00 and #FF00FF?
30 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
http://snook.ca/technical/colour_contrast/colour.html

31. The imageThe image
Exercise:
Are these colors WCAG 2 compliant?
#00FF00 and #FF00FF?
31 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
http://snook.ca/technical/colour_contrast/colour.html

32. You debugging your design

33. The imageThe image
Minimize typing and use popup
ChoiceGroups and pickers if possible.
33 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

34. The imageThe image
Use a short application name to avoid
its truncation by the phone.
34 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

35. The imageThe image
Indicate progress.
35 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

36. The imageThe image
Indicate if the application is causing
costs.
36 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

37. The imageThe image
Be positive in error situations.
37 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

38. The imageThe image
Avoid confirmation dialogs where
possible.
38 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

39. The imageThe image
Allow user-set precision for location
enabled apps.
39 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

40. The imageThe image
Exercise:
Would you change any component?
40 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

41. The imageThe image
Exercise:
Would you change any component?
41 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

42. You debugging your design

43. The imageThe image
Can’t see the woods for the trees.
43 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

44. The imageThe image
Draw a UX map to see the woods.
44 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

45. The imageThe image
Step back, look at the UX map and
simplify the structure.
45 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Proposed structure
Current structure

46. The imageThe image
Check if you can merge views.
46 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Proposed structureCurrent structure

47. The imageThe image
Exercise: Take out your credit card.
47 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

48. The imageThe image
Exercise: Take out your credit card.
And pen and paper.
48 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

49. The imageThe image
Exercise: And create a paper prototype
of your app’s splash screen.
49 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

50. People debugging your design with
usability tests

51. Before we start

52. The imageThe image
Even your mom will give you more
insights than nobody.
52 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

53. The imageThe image
Be ready to dump the most precious
thing you have – your code.
53 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

54. The imageThe image
Learn to step back and observe.
54 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

55. The imageThe image
Everything else is simple – it is!
55 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

56. People debugging your design

57. The imageThe image
Usability is an analysis how to reach a
goal.
57 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

58. The imageThe image
Old-school usability studies are usually
not suitable for small software houses.
58 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

59. The imageThe image
You want to improve – not prove.
59 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

60. The imageThe image
2-3 participants are enough if you test
multiple times.
60 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

61. The imageThe image
As a test facilitator you must have a
neutral attitude and be eager to learn.
61 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

62. People debugging your design

63. The imageThe image
Write down all the tasks and create
stories from them.
63 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

64. The imageThe image
Invite from the target audience if you
can – but do not get stuck with it.
64 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

65. The imageThe image
Do not use previous participants in the
same project again.
65 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

66. The imageThe image
Run a pilot study.
66 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

67. People debugging your design

68. The imageThe image
Test for 1 hour.
68 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
10 min: Welcome, introduction, sign agreement and warm-up
30 min: Tasks
10 min: Open issues, wrapping up and good-bye
10 min: Take additional notes and prepare the next session

69. The imageThe image
The participant talks – not you.
69 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

70. The imageThe image
Ask for open issues after the tasks are
done.
70 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

71. The imageThe image
Reward your participants.
71 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

72. People debugging your design

73. The imageThe image
The biggest issue is the most urgent.
73 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

74. The imageThe image
74 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

75. The imageThe image
Test your tweak – a very simple hallway
test might do the trick here.
75 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

76. The imageThe image
Exercise: Watch the video. What went
wrong? How do you fix it?
76 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

77. The imageThe image
77 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

78. The imageThe image
78 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

79. Take home messages

80. The imageThe image
Inspect your app with the UX checklist.
80 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

81. The imageThe image
81 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Test early. Test often.
Fail fast. Fail cheap.

82. The imageThe image
2-3 participants are enough if you test
multiple times.
82 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber

83. The imageThe image
Literature and links
83 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
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

84. Thanks.
ext-jan.krebber@nokia.com
#krebbixux