ux checklist for series 40 full touch apps
DESCRIPTION
This webinar will provide pointers you can use to do a UX check of your Series 40 full-touch app, even if you have no formal experience in UX design. UX expert Jan Krebber of Digia will review a checklist of the worst UX mistakes that he and colleagues found in real-world testing of apps. He‘ll not only point out common mistakes, but he’ll also provide specific solutions to those problems. As usual for Nokia Developer UX webinars, this presentation will feature exercises that will receive follow-up treatment in a Nokia Developer Wiki article. Join the sessions: 26 Feb, 8 a.m. London; 1:30 p.m. New Delhi; 4 p.m. Singapore: http://forumnokia.adobeconnect.com/ux-checklist-ssn1/event/event_info.html 27 Feb, 8 a.m. San Francisco; 10 a.m. Mexico City; 4 p.m. London: http://forumnokia.adobeconnect.com/ux-checklist-ssn2/event/event_info.htmlTRANSCRIPT
1 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Jan Krebber
Senior User Experience Consultant
OCTO3
UX CHECKLIST FOR SERIES 40 FULL TOUCH APPS
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Overview
2
- Check for style- Check for robust design- Check for fast and friendly
design- UX offering- Take home messages- Exercises
3 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
CHECK FOR STYLE
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Place UI controls where expected – even in custom layouts.
4
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
UI controls must behave as expected – also in custom layouts.
5
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Indicate all touch down events and trigger on touch release.
6
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Do not use double tap to open a menu. Use a long-press.
7
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Reserve the header for the most important action.
8
Canvas with header bar
Full screen canvas with custom header
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Keep the status bar visible to provide important information.
9
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Do not hide the chrome permanently.
10
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Back also means 'Cancel'.
11
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
No actions in category bar.
12
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Place secondary view commands in Options list.
13
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Long press options list is never the only way to access a command.
14
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Summary: Use UI chrome according to the UI style guide.
15
16 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
CHECK FOR ROBUST DESIGN
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Make text easy to read.
17
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Use high contrast for UI components.
18
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Obey the minimum touch area.
19
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Use correct png sizes for your icons.
20
Canvas, drawing area
Total icon area
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Images are good – if they are small at first.
21
22 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
CHECK FOR FRIENDLY AND FAST DESIGN
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Indicate progress.
23
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Indicate if your application is causing costs.
24
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Be positive in error situations.
25
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Avoid confirmation notes where possible.
26
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Tell the price before the purchase begins.
27
What’s available? What’s the cost? Buy.
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Design efficient start screens.
28
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Minimise the need to type and use popup choicegroups or pickers.
29
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Prevent errors by disabling actions.
30
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Allow user-set precision for location-enabled apps.
31
32 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
UX OFFERING FOR SERIES 40
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
There is a UI style guide – and more.
33
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
There is a UI style guide – and more.
34
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
There is a LWUIT UX Overview.
35
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
There is a LWUIT UX Overview.
36
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
The Nokia’s Series 40 stencils support Inkscape.
37
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
The Nokia’s Series 40 stencils support Inkscape.
38
© 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.
39
LCDUI Web apps
© 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.
40
© 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.
41
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Series 40 UI design
42
• Wiki companion article for this webinar: http://www.developer.nokia.com/Community/Wiki/Series_40_UX_checklist_webinar_-_companion_article
• 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
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Further readings and links
43
•Mobile Design Pattern Gallery. Theresa Neil (2012).
• Designing Mobile Interfaces. Steven Hoober and Eric Berkman (2011).• useit.com (Jacob Nielsen’s blog)• http://snook.ca/technical/colour_contrast/colour.html (contrast checker)
44 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
TAKE HOME MESSAGES
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Use UI chrome according to the UI style guide.
45
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Ensure a robust design.
46
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Make your app friendly and fast.
47
48 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
EXERCISES
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Exercise: A custom view acts as a launchpad screen. Which chrome elements do you add?
49
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Exercise: How do you open the item menu and what do you place in there?
50
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Exercise: How many touchable items can you fit into a full screen layout?
51
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Exercise: Which icon sizes are used in Series 40 full touch?
52
© Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Exercise: Is the contrast good enough for AAA compliant text?- Foreground: 33FFAA- Background: AAFF33
53
54 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
THANKS TO: SANNA HIUKKAANNE KIVIMAAANTTI KAREINENILARI LÄHTEENMÄKIAAPO HERRALA
55 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
THANKS
#krebbixux