39
Jan Krebber Senior User Experience Consultant OCTO3 1 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber UX CLINIC FOR SERIES 40 MARCH 2013

UI Clinic - Series 40 full touch, March 2013

Embed Size (px)

DESCRIPTION

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Random Table and a Compass Research app concept. Jan shares the app reviews and provides details on how the UX of these applications might be improved, as well as providing general guidance that will help with the design of any app. Submit your app to a future UI Clinic by sending details to [email protected] Find out more about developing for Series 40 at: http://www.developer.nokia.com/Series40 and more about design for full-touch Series 40 apps here: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!index.html Check out the current webinar schedule here: http://www.developer.nokia.com/webinars

Citation preview

Page 1: UI Clinic - Series 40 full touch, March 2013

Jan Krebber

Senior User Experience Consultant

OCTO3

1 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

UX CLINIC FOR SERIES 40 MARCH 2013

Page 2: UI Clinic - Series 40 full touch, March 2013

Overview

2 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

- Random Table - What we found - What we propose to add

- Compass Research concept

Page 3: UI Clinic - Series 40 full touch, March 2013

3 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

RANDOM TABLE WHAT WE FOUND

Page 4: UI Clinic - Series 40 full touch, March 2013

Random Table is a good example of how to create a great app with LCDUI.

4 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 5: UI Clinic - Series 40 full touch, March 2013

Back/Exit on main view is disabled, but Exit is duplicated as a list item.

5 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 6: UI Clinic - Series 40 full touch, March 2013

Back should move back in hierarchy.

6 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

1 2 3 4

Page 7: UI Clinic - Series 40 full touch, March 2013

Help and About are usually found from Options menu – preferably in all views.

7 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 8: UI Clinic - Series 40 full touch, March 2013

Keep the hierarchy flat where possible.

8 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

1 2 3

Page 9: UI Clinic - Series 40 full touch, March 2013

A dialogue is interrupting the flow.

9 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Current solution Proposal

Page 10: UI Clinic - Series 40 full touch, March 2013

People must have enough time to read a dialogue.

10 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 11: UI Clinic - Series 40 full touch, March 2013

A shorter application name will avoid truncation.

11 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 12: UI Clinic - Series 40 full touch, March 2013

Consider the red end key closing the application immediately.

12 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 13: UI Clinic - Series 40 full touch, March 2013

Name views consistently and use short view names.

13 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 14: UI Clinic - Series 40 full touch, March 2013

Avoid typos and inconsistent language with copy edit and a style guide.

14 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 15: UI Clinic - Series 40 full touch, March 2013

If there is only one text (input) field, set focus on it automatically.

15 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

1 2 3 4

Page 16: UI Clinic - Series 40 full touch, March 2013

16 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

RANDOM TABLE WHAT WE PROPOSE TO ADD

Page 17: UI Clinic - Series 40 full touch, March 2013

Statistics give a better idea of the performance than just a table of results.

17 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 18: UI Clinic - Series 40 full touch, March 2013

Consider gamification of the task.

18 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 19: UI Clinic - Series 40 full touch, March 2013

Additional modes for special training purposes.

19 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 20: UI Clinic - Series 40 full touch, March 2013

20 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

COMPASS RESEARCH CONCEPT

Page 21: UI Clinic - Series 40 full touch, March 2013

Compass Research app is a powerful geo solution for limited screen size.

21 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

A

x Axis B

C y Axis

Traverse

A

x Axis B

y Axis

Inverse

Page 22: UI Clinic - Series 40 full touch, March 2013

There are some main use cases. Those work with selected input values.

22 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

A

x Axis B

y Axis

x Axis B

C y Axis

A

x Axis B

C y Axis

B

C y Axis

Coordinates (A) Coordinates (B) Angle (xBA) Distance (AB)

Coordinates (B) Angle (yBC) Distance (BC) Coordinates (C)

Coordinates (B) Angle (xBref) Angle (refBC) Distance (BC) Coordinates (C)

Coordinates (A) Coordinates (B) Angle (ABC) Distance (BC) Coordinates (C)

ref

known find

Page 23: UI Clinic - Series 40 full touch, March 2013

Sometimes requires review of all values and related outputs (results).

23 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 24: UI Clinic - Series 40 full touch, March 2013

Use descriptive text and icons for a launchpad view.

24 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 25: UI Clinic - Series 40 full touch, March 2013

Correction might be needed. Try to keep it simple, e.g. with a button.

25 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 26: UI Clinic - Series 40 full touch, March 2013

The design is based on splitting use cases and a launchpad view.

26 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 27: UI Clinic - Series 40 full touch, March 2013

27 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

TAKE HOME MESSAGES

Page 28: UI Clinic - Series 40 full touch, March 2013

Simplify.

28 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 29: UI Clinic - Series 40 full touch, March 2013

Be consistent.

29 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 30: UI Clinic - Series 40 full touch, March 2013

Base the layout on use cases.

30 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 31: UI Clinic - Series 40 full touch, March 2013

31 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

UX OFFERING FOR SERIES 40

Page 32: UI Clinic - Series 40 full touch, March 2013

There are LCDUI and LWUIT style guides – and more.

32 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 33: UI Clinic - Series 40 full touch, March 2013

The Nokia’s Series 40 stencils support Inkscape.

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

Page 34: UI Clinic - Series 40 full touch, March 2013

Series 40 UI component demo projects showcase UI and code.

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

Page 35: UI Clinic - Series 40 full touch, March 2013

We offer reviews for the UI clinics.

35 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

Page 36: UI Clinic - Series 40 full touch, March 2013

Series 40 UI design

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

• 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 37: UI Clinic - Series 40 full touch, March 2013

Further reading and links

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

• Random Math Table project https://projects.developer.nokia.com/RandomMathTable

• Random Math tabel in the store http://store.nokia.com/content/347006

• Mobile Design Pattern Gallery. Theresa Neil (2012).

• Designing Mobile Interfaces. Steven Hoober and Eric Berkman (2011).

• nngroup.com (Jacob Nielsen’s blog)

• http://snook.ca/technical/colour_contrast/colour.html (contrast checker)

Page 38: UI Clinic - Series 40 full touch, March 2013

38 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

THANKS TO: RON HARDY, COMPASS RESEARCH, INC. GIRISH PADIA SANNA HIUKKA ANNE KIVIMAA

Page 39: UI Clinic - Series 40 full touch, March 2013

39 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

THANKS

[email protected]

#krebbixux