58
Nokia Asha UX clinic November 2013 Jan Krebber @krebbixux Senior User Experience Consultant

Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Embed Size (px)

DESCRIPTION

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Jumping Man, a jump-and-run game, and a Sudoku game. 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. Find out more about: * developing for Nokia Asha: http://www.developer.nokia.com/Develop/asha * UX guidelines for Java apps: http://www.developer.nokia.com/Resources/Library/Asha_UI/ * UX guidelines for web apps: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/ * component demos: https://projects.developer.nokia.com/asha_ui_component_demos Check out the current webinar schedule here: http://www.developer.nokia.com/webinars and https://developer.nokia.com/Develop/asha/learning/

Citation preview

Page 1: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Nokia Asha UX clinic November 2013 Jan Krebber @krebbixux

Senior User Experience Consultant

Page 2: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Overview

2 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

• Jumping Man (Anselmus Kurniawan)

• Sky Sudoku (Govind Kumar)

• UX offering

• Take home messages

Page 3: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Jumping Man

Page 4: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Structure

4 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 5: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

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

5 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 6: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Use a square launcher icon.

6 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 7: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Canvas orientation is wrong.

7 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Correct canvas orientation

Page 8: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Button sizes are too small. Minimum touch area is 7mm x 7mm.

8 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

7mm x 7mm, 1mm margin 37px x 37 px, 5px margin

9mm x 9mm, 1mm margin 47px x 47px, 5px margin

Page 9: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Add touch down feedback for all touch elements.

9 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Mockup

Page 10: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Use the hardware back key instead of pause/back/exit buttons on screen.

10 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 11: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Keep response times short.

11 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 12: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

The ads are placed well, but do not show ads in the game canvas while playing.

12 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 13: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Set the game sound to off when opening the game.

13 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 14: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Do not link to broken webpages.

14 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 15: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Finger hides the coming gaps.

15 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 16: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

The game idea is good.

16 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 17: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

17 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 18: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Improve the feedback.

18 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 19: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Sky Sudoku

Page 20: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Structure

20 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 21: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Splash screen is usually with little information and of no use.

21 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 22: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Do not use abbreviations. People will not understand your app.

22 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 23: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Do not use brackets for commands. Text becomes hard to read.

23 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 24: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Bold typeface is not good enough as an indicator.

24 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 25: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Describe all features and all possible values in the Help section.

25 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 26: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Dialogs should not be cryptic but crystal clear.

26 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 27: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Do not use LCDUI Dialog for Help or About. Use the TextBox instead.

27 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 28: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Do not set a highlight or an indicator to any field which people cannot effect.

28 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 29: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

LCDUI’s multiple ChoiceGroup does not work as switch metaphor in Nokia Asha.

29 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 30: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

It is too easy to (re-)place a number by accident.

30 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 31: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Check state requires an “uncheck” state, since you toggle a state not a view.

31 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 32: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Quicksavekeys do not work as there are no hardware keys. Save in background.

32 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 33: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

HW Back key must exit the game from the topmost hierarchy level. Always.

33 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 34: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Remove settings to reduce complexity.

34 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 35: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Remove hierarchy levels to reduce complexity.

35 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 36: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Free the canvas from options menu and gain screen real estate for main controls.

36 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 37: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Proposals for redesign

Page 38: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Simplify the game canvas.

38 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 39: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Reduce the options.

39 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 40: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Direct people from your game to your web page.

40 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 41: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Sell small batches of games with a low price.

41 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 42: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Proposed structure.

42 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 43: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Proposed interaction.

43 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 44: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Make sure the pocket knife fits into the pocket.

44 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 45: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Each setting is a decision you were too much of a coward to take.

45 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 46: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

UX offering

Page 47: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

There are LCDUI and LWUIT UI style guides.

47 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 48: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

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

48 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 49: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

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

49 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 50: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Literature and links

50 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 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

• Jumping Man: http://store.ovi.com/content/260091

• Sky Sudoku: [email protected]

Page 51: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Take home messages

Page 52: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

52 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 53: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Improve the feedback.

53 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 54: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Make sure the pocket knife fits into the pocket.

54 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 55: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Each setting is a decision you were too much of a coward to take.

55 © Nokia 2013 Nokia Asha UX clinic November 2013.pptx 2013-12-11 Jan Krebber @krebbixux

Page 56: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Special thanks to Anselmus and Govind

[email protected]

[email protected]

Page 57: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Thanks to Sanna Hiukka and Stratos Kalogirou.

Page 58: Nokia Asha UI Clinic: November 2013 — Jumping Man and Sky Sudoku

Thanks .

Jan Krebber

[email protected]

@krebbixux