Download - 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


CHECK FOR STYLE


Place UI controls where expected – even in custom layouts.

4


UI controls must behave as expected – also in custom layouts.

5


Indicate all touch down events and trigger on touch release.

6


Do not use double tap to open a menu. Use a long-press.

7


Reserve the header for the most important action.

8

Canvas with header bar

Full screen canvas with custom header


Keep the status bar visible to provide important information.

9


Do not hide the chrome permanently.

10


Back also means 'Cancel'.

11


No actions in category bar.

12


Place secondary view commands in Options list.

13


Long press options list is never the only way to access a command.

14


Summary: Use UI chrome according to the UI style guide.

15


CHECK FOR ROBUST DESIGN


Make text easy to read.

17


Use high contrast for UI components.

18


Obey the minimum touch area.

19


Use correct png sizes for your icons.

20

Canvas, drawing area

Total icon area


Images are good – if they are small at first.

21


CHECK FOR FRIENDLY AND FAST DESIGN


Indicate progress.

23


Indicate if your application is causing costs.

24


Be positive in error situations.

25


Avoid confirmation notes where possible.

26


Tell the price before the purchase begins.

27

What’s available? What’s the cost? Buy.


Design efficient start screens.

28


Minimise the need to type and use popup choicegroups or pickers.

29


Prevent errors by disabling actions.

30


Allow user-set precision for location-enabled apps.

31


UX OFFERING FOR SERIES 40


There is a UI style guide – and more.

33


There is a UI style guide – and more.

34


There is a LWUIT UX Overview.

35


There is a LWUIT UX Overview.

36


The Nokia’s Series 40 stencils support Inkscape.

37


The Nokia’s Series 40 stencils support Inkscape.

38


Series 40 UI component demo projects showcase UI and code.

39

LCDUI Web apps


Series 40 UI component demo projects showcase UI and code.

40


We offer reviews for the UI clinics.

41


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

http://www.developer.nokia.com/Community/Wiki/Series_40_UX_checklist_webinar_-_companion_article



http://www.developer.nokia.com/Resources/Library/Full_Touch/



http://www.developer.nokia.com/Resources/Library/LWUIT/

http://www.developer.nokia.com/Resources/Library/LWUIT/

https://projects.developer.nokia.com/s40uivisualisation



https://projects.developer.nokia.com/webappsuivisualisation

https://projects.developer.nokia.com/webappsuivisualisation


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)

http://snook.ca/technical/colour_contrast/colour.html

http://snook.ca/technical/colour_contrast/colour.html


TAKE HOME MESSAGES


Use UI chrome according to the UI style guide.

45


Ensure a robust design.

46


Make your app friendly and fast.

47


EXERCISES


Exercise: A custom view acts as a launchpad screen. Which chrome elements do you add?

49


Exercise: How do you open the item menu and what do you place in there?

50


Exercise: How many touchable items can you fit into a full screen layout?

51


Exercise: Which icon sizes are used in Series 40 full touch?

52


Exercise: Is the contrast good enough for AAA compliant text?- Foreground: 33FFAA- Background: AAFF33

53


THANKS TO: SANNA HIUKKAANNE KIVIMAAANTTI KAREINENILARI LÄHTEENMÄKIAAPO HERRALA


THANKS

[email protected]

#krebbixux

Download - UX checklist for Series 40 full touch apps

Top Related