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

ext-jan.krebber@nokia.com

#krebbixux