Transcript
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


Recommended