55
Jan Krebber Senior User Experience Consultant OCTO3 1 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber UX CHECKLIST FOR SERIES 40 FULL TOUCH APPS

UX checklist for Series 40 full touch apps

Embed Size (px)

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.html

Citation preview

Page 1: 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

Page 2: 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

Page 3: UX checklist for Series 40 full touch apps

3 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

CHECK FOR STYLE

Page 4: 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

Place UI controls where expected – even in custom layouts.

4

Page 5: 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

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

5

Page 6: 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

Indicate all touch down events and trigger on touch release.

6

Page 7: 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

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

7

Page 8: 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

Reserve the header for the most important action.

8

Canvas with header bar

Full screen canvas with custom header

Page 9: 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

Keep the status bar visible to provide important information.

9

Page 10: 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

Do not hide the chrome permanently.

10

Page 11: 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

Back also means 'Cancel'.

11

Page 12: 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

No actions in category bar.

12

Page 13: 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

Place secondary view commands in Options list.

13

Page 14: 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

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

14

Page 15: 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

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

15

Page 16: UX checklist for Series 40 full touch apps

16 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

CHECK FOR ROBUST DESIGN

Page 17: 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

Make text easy to read.

17

Page 18: 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

Use high contrast for UI components.

18

Page 19: 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

Obey the minimum touch area.

19

Page 20: 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

Use correct png sizes for your icons.

20

Canvas, drawing area

Total icon area

Page 21: 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

Images are good – if they are small at first.

21

Page 22: UX checklist for Series 40 full touch apps

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

Page 23: 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

Indicate progress.

23

Page 24: 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

Indicate if your application is causing costs.

24

Page 25: 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

Be positive in error situations.

25

Page 26: 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

Avoid confirmation notes where possible.

26

Page 27: 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

Tell the price before the purchase begins.

27

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

Page 28: 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

Design efficient start screens.

28

Page 29: 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

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

29

Page 30: 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

Prevent errors by disabling actions.

30

Page 31: 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

Allow user-set precision for location-enabled apps.

31

Page 32: UX checklist for Series 40 full touch apps

32 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

UX OFFERING FOR SERIES 40

Page 33: 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

There is a UI style guide – and more.

33

Page 34: 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

There is a UI style guide – and more.

34

Page 35: 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

There is a LWUIT UX Overview.

35

Page 36: 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

There is a LWUIT UX Overview.

36

Page 37: 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

The Nokia’s Series 40 stencils support Inkscape.

37

Page 38: 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

The Nokia’s Series 40 stencils support Inkscape.

38

Page 39: 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

Series 40 UI component demo projects showcase UI and code.

39

LCDUI Web apps

Page 40: 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

Series 40 UI component demo projects showcase UI and code.

40

Page 41: 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

We offer reviews for the UI clinics.

41

Page 42: 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

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

Page 43: 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

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)

Page 44: UX checklist for Series 40 full touch apps

44 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

TAKE HOME MESSAGES

Page 45: 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

Use UI chrome according to the UI style guide.

45

Page 46: 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

Ensure a robust design.

46

Page 47: 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

Make your app friendly and fast.

47

Page 48: UX checklist for Series 40 full touch apps

48 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

EXERCISES

Page 49: 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

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

49

Page 50: 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

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

50

Page 51: 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

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

51

Page 52: 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

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

52

Page 53: 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

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

53

Page 54: UX checklist for Series 40 full touch apps

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

Page 55: UX checklist for Series 40 full touch apps

55 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber

THANKS

[email protected]

#krebbixux