Weitere ähnliche Inhalte Mehr von Microsoft Mobile Developer (20) Kürzlich hochgeladen (20) UI Clinic - Series 40 full touch, March 20131. 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
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