Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Random Table and a Compass Research app concept. 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. Submit your app to a future UI Clinic by sending details to webinar.experts@nokia.com Find out more about developing for Series 40 at: http://www.developer.nokia.com/Series40 and more about design for full-touch Series 40 apps here: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!index.html Check out the current webinar schedule here: http://www.developer.nokia.com/webinars

1. UX CLINIC FOR SERIES 40
MARCH 2013
Jan Krebber
Senior User Experience Consultant
OCTO3
1 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

2. Overview
- Random Table
- What we found
- What we propose to add
- Compass Research concept
2 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

3. RANDOM TABLE
WHAT WE FOUND
3 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

4. Random Table is a good example of how to
create a great app with LCDUI.
4 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

5. Back/Exit on main view is disabled, but Exit
is duplicated as a list item.
5 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

6. Back should move back in hierarchy.
1 2 3 4
6 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

7. Help and About are usually found from
Options menu – preferably in all views.
7 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

8. Keep the hierarchy flat where possible.
1 2 3
8 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

9. A dialogue is interrupting the flow.
Current solution Proposal
9 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

10. People must have enough time to read a
dialogue.
10 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

11. A shorter application name will avoid
truncation.
11 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

12. Consider the red end key closing the
application immediately.
12 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

13. Name views consistently and use short view
names.
13 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

14. Avoid typos and inconsistent language with
copy edit and a style guide.
14 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

15. If there is only one text (input) field, set
focus on it automatically.
1 2 3 4
15 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

16. RANDOM TABLE
WHAT WE PROPOSE TO ADD
16 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

17. Statistics give a
better idea of the
performance than
just a table of
results.
17 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

18. Consider gamification of the task.
18 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

19. Additional modes for special training
purposes.
19 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

20. COMPASS RESEARCH
CONCEPT
20 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

21. Compass Research app is a powerful geo
solution for limited screen size.
Traverse Inverse
C y Axis y Axis
A A
x Axis x Axis
B B
21 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

22. There are some main use cases.
Those work with selected input values.
y Axis y Axis y Axis y Axis known
C C C
find
A ref A
x Axis x Axis x Axis
B B B B
Coordinates (A) Coordinates (B) Coordinates (B) Coordinates (A)
Coordinates (B) Angle (yBC) Angle (xBref) Coordinates (B)
Angle (xBA) Distance (BC) Angle (refBC) Angle (ABC)
Distance (AB) Coordinates (C) Distance (BC) Distance (BC)
Coordinates (C) Coordinates (C)
22 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

23. Sometimes requires review of all values and
related outputs (results).
23 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

24. Use descriptive text and
icons for a launchpad view.
24 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

25. Correction might be
needed. Try to keep it
simple, e.g. with a button.
25 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

26. The design is based on splitting use cases
and a launchpad view.
26 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

27. TAKE HOME MESSAGES
27 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

28. Simplify.
28 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

29. Be consistent.
29 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

30. Base the layout on use cases.
30 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

31. UX OFFERING FOR SERIES 40
31 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

32. There are LCDUI and LWUIT style guides –
and more.
32 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

33. The Nokia’s Series 40 stencils support
Inkscape.
33 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

34. Series 40 UI component demo projects
showcase UI and code.
34 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

35. We offer reviews for the UI clinics.
35 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

36. Series 40 UI design
• UX Library for Series 40 full touch:
http://www.developer.nokia.com/Resources/Library/Full_Touch/
• LWUIT UX Overview:
http://www.developer.nokia.com/Resources/Library/LWUIT/#!ux-
overview.html
• UI Component Demos project:
https://projects.developer.nokia.com/s40uivisualisation
• Web Apps UI visualisation project:
https://projects.developer.nokia.com/webappsuivisualisation
36 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

37. Further reading and links
• Random Math Table project
https://projects.developer.nokia.com/RandomMathTable
• Random Math tabel in the store
http://store.nokia.com/content/347006
• Mobile Design Pattern Gallery. Theresa Neil (2012).
• Designing Mobile Interfaces. Steven Hoober and Eric Berkman
(2011).
• nngroup.com (Jacob Nielsen’s blog)
• http://snook.ca/technical/colour_contrast/colour.html
(contrast checker)
37 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

38. THANKS TO:
RON HARDY, COMPASS RESEARCH, INC.
GIRISH PADIA
SANNA HIUKKA
ANNE KIVIMAA
38 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

39. THANKS 
ext-jan.krebber@nokia.com
#krebbixux
39 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber