Top Banner
Nokia Asha UX clinic September 2013 Jan Krebber @krebbixux Senior User Experience Consultant
48

Nokia Asha UI Clinic September 2013

May 13, 2015

Download

Technology

Do you want to increase the user ratings and reputation of one of your Series 40 apps and, in turn, increase your downloads or sales? This webinar will present helpful design tips based on real Series 40 applications. UX expert Jan Krebber of OCT03 will identify issues with the design of user interfaces and other real-world aspects of the user experience. Then he’ll propose specific ways to resolve them. To submit the UI of a Series 40 app for evaluation and use in future UI clinics, please send the app to [email protected]. If your submission is selected, the evaluation will be free of charge, and Jan will discuss the results with you privately before we examine them in the webinar. (Professional reviews such as this typically cost around 1,000 euros.) This is a great opportunity to get ideas for improving your application. We have limited resources available for these free reviews, so we’ll accept requests on a first-come, first-served basis.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Nokia Asha UI Clinic September 2013

Nokia Asha UX clinic September 2013 Jan Krebber @krebbixux

Senior User Experience Consultant

Page 2: Nokia Asha UI Clinic September 2013

Overview

2 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

• QuickStocks

• Space Survivor 2

• General questions

• UX offering

• Take home messages

Page 3: Nokia Asha UI Clinic September 2013

QuickStocks

Page 4: Nokia Asha UI Clinic September 2013

Structure.

4 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 5: Nokia Asha UI Clinic September 2013

Truncated name makes the app look unprofessional before it is even started.

5 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 6: Nokia Asha UI Clinic September 2013

Use a square launcher icon for WebApps.

6 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 7: Nokia Asha UI Clinic September 2013

Do not rely on red and green color coding.

7 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 8: Nokia Asha UI Clinic September 2013

Ensure a good contrast also for non-selected items.

8 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

www.snook.ca

Page 9: Nokia Asha UI Clinic September 2013

Clean sweep 1: Move version number to the bottom, Search into top bar.

9 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 10: Nokia Asha UI Clinic September 2013

Clean sweep 2: Move buttons to a different list.

10 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 11: Nokia Asha UI Clinic September 2013

First and last item should not have “move up” and “move down”.

11 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 12: Nokia Asha UI Clinic September 2013

Clean sweep 3: Access history setting by tapping the graphics.

12 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 13: Nokia Asha UI Clinic September 2013

Instead of pop-up lists, use lists in a new view to avoid scrolling.

13 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 14: Nokia Asha UI Clinic September 2013

Give Search its own view and add a “back path”.

14 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 15: Nokia Asha UI Clinic September 2013

Reminder: Map the hardware Back key to in-view Back commands in WebApps.

15 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 16: Nokia Asha UI Clinic September 2013

Ads are well placed.

16 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 17: Nokia Asha UI Clinic September 2013

Even not a standard – expand/collapse works very well.

17 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 18: Nokia Asha UI Clinic September 2013

Proposed structure.

18 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Current structure

Page 19: Nokia Asha UI Clinic September 2013

Move power functions to a secondary level.

19 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 20: Nokia Asha UI Clinic September 2013

Space Survivor 2

Page 21: Nokia Asha UI Clinic September 2013

Structure.

21 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 22: Nokia Asha UI Clinic September 2013

Be careful with abbreviations. Not everybody knows “BGM”.

22 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 23: Nokia Asha UI Clinic September 2013

Do not start the app with game sound on.

23 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 24: Nokia Asha UI Clinic September 2013

Some items are too small for touch.

24 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 25: Nokia Asha UI Clinic September 2013

It’s hard to read text against a moving background.

25 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 26: Nokia Asha UI Clinic September 2013

Do not use all caps. It is hard to read and you are shouting.

26 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 27: Nokia Asha UI Clinic September 2013

HW back key should be the only way to pause a game and to go back.

27 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 28: Nokia Asha UI Clinic September 2013

The Exit query could be removed.

28 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 29: Nokia Asha UI Clinic September 2013

Buying and taking advantage of new ships and weapons is not clear to people.

29 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 30: Nokia Asha UI Clinic September 2013

Ship navigation is difficult and sluggish.

30 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 31: Nokia Asha UI Clinic September 2013

To make it more zippy do not paint after each input, but aggregate input.

31 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

- http://stackoverflow.com/questions/11204577/how-to-implement-idle-task-in-java-swing

- http://developer.nokia.com/Resources/Library/Java/#!code-examples/mobile-sensors-cottage360/cottage360java.html

Page 32: Nokia Asha UI Clinic September 2013

The game is easily closed by accident.

32 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 33: Nokia Asha UI Clinic September 2013

Make game control simple and robust.

33 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 34: Nokia Asha UI Clinic September 2013

Help people to understand your game or app.

34 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 35: Nokia Asha UI Clinic September 2013

General questions

Page 36: Nokia Asha UI Clinic September 2013

How many values should I set in a picker? One due to limited screen real estate.

36 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 37: Nokia Asha UI Clinic September 2013

UX offering

Page 38: Nokia Asha UI Clinic September 2013

There are LCDUI and LWUIT UI style guides.

38 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 39: Nokia Asha UI Clinic September 2013

There are UI stencils for Inkscape in addition to Adobe Illustrator.

39 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 40: Nokia Asha UI Clinic September 2013

Asha UI component demo application is a Java midlet suite for LCDUI.

40 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 41: Nokia Asha UI Clinic September 2013

Literature and links

41 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

• UX Library for Nokia Asha:

• http://www.developer.nokia.com/Resources/Library/Asha_UI/#!index.html

• Nokia Asha Web app UX guidelines:

• http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/#!design-library.html

• Nokia Asha UI component demos:

• https://projects.developer.nokia.com/asha_ui_component_demos

• QuickStocks: http://store.ovi.com/content/345857

• Space Survivor 2: http://store.ovi.com/content/356732

• Touch input 1: http://stackoverflow.com/questions/11204577/how-to-implement-idle-task-in-java-swing

• Touch input 2: http://developer.nokia.com/Resources/Library/Java/#!code-examples/mobile-sensors-cottage360/cottage360java.html

Page 42: Nokia Asha UI Clinic September 2013

Take home messages

Page 43: Nokia Asha UI Clinic September 2013

Move power functions to a secondary level.

43 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 44: Nokia Asha UI Clinic September 2013

Make game control simple and robust.

44 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 45: Nokia Asha UI Clinic September 2013

Help people to understand your game or app.

45 © Nokia 2013 Nokia Asha UX clinic September 2013.pptx 2013-18-09 Jan Krebber @krebbixux

Page 47: Nokia Asha UI Clinic September 2013

Thanks to Sanna Hiukka Stratos Kalogirou and Attila Csipa.

Page 48: Nokia Asha UI Clinic September 2013

Thanks .

Jan Krebber

[email protected]

@krebbixux