ui clinic - series 40 full touch, march 2013
DESCRIPTION
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 [email protected] 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/webinarsTRANSCRIPT
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
UX CLINIC FOR SERIES 40 MARCH 2013
Overview
2 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
- Random Table - What we found - What we propose to add
- Compass Research concept
3 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
RANDOM TABLE WHAT WE FOUND
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
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
Back should move back in hierarchy.
6 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
1 2 3 4
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
Keep the hierarchy flat where possible.
8 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
1 2 3
A dialogue is interrupting the flow.
9 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
Current solution Proposal
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
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
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
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
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
If there is only one text (input) field, set focus on it automatically.
15 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
1 2 3 4
16 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
RANDOM TABLE WHAT WE PROPOSE TO ADD
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
Consider gamification of the task.
18 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
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 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
COMPASS RESEARCH CONCEPT
Compass Research app is a powerful geo solution for limited screen size.
21 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
A
x Axis B
C y Axis
Traverse
A
x Axis B
y Axis
Inverse
There are some main use cases. Those work with selected input values.
22 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
A
x Axis B
y Axis
x Axis B
C y Axis
A
x Axis B
C y Axis
B
C y Axis
Coordinates (A) Coordinates (B) Angle (xBA) Distance (AB)
Coordinates (B) Angle (yBC) Distance (BC) Coordinates (C)
Coordinates (B) Angle (xBref) Angle (refBC) Distance (BC) Coordinates (C)
Coordinates (A) Coordinates (B) Angle (ABC) Distance (BC) Coordinates (C)
ref
known find
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
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
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
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 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
TAKE HOME MESSAGES
Simplify.
28 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
Be consistent.
29 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
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 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
UX OFFERING FOR SERIES 40
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
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
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
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
Series 40 UI design
36 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
• 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
Further reading and links
37 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
• 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)
38 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
THANKS TO: RON HARDY, COMPASS RESEARCH, INC. GIRISH PADIA SANNA HIUKKA ANNE KIVIMAA
39 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
THANKS
#krebbixux