UX checklist for Series 40 full touch apps
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
2.048 -
download
2
description
Transcript of UX checklist for Series 40 full touch apps
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