Nokia Asha UI clinic October 2013 Jan Krebber @krebbixux Senior User Experience Consultant

Overview

2 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

• Photogram (Gener Gabasa) • Kid’s Choice (Yasin) • UX offering • Take home messages

Photogram

Structure.

4 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

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

5 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Place the icon or glyph inside the focal zone.

6 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Reference example

Do not use abbreviations in help text. People might find them impolite or silly.

7 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Help and About are not Dialogs. Use TextBox or From instead.

8 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Use initial caps for view headers, menu items and buttons.

9 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

App is to easily closed by accident with a swipe.

10 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

The primary function “Save” is hidden in the menu.

11 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

4 filters might be to few. More filters require a new app structure.

12 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

If Facebook is the only “share” option, rename the button to “Facebook”.

13 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Use a category bar with actions instead of a single button only.

14 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

After saving the image the screen turns black. Continue with a view instead.

15 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Add more information about the filter effects. Improve “Help”.

16 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Reorganize the category bar and use a different icon metaphor for “capture”.

17 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

To allow full screen inspection of the image, the UI could hide after time out.

18 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Adding a filter grid makes the app more powerful and simpler to use.

19 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Current structure

We especially liked #1: The missing splash screen.

20 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

We especially liked #2: No screen real estate wasted to show the own name.

21 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

We especially liked #3: The placement of the ad.

22 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Make it powerful but keep it simple.

23 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Kids Choice

Structure.

25 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Optional rooms

Remove a splash screen which is without any interactive or commercial benefit.

26 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

How do kids start the game by themselves if they cannot read?

27 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Some fonts are too small and with too little contrast.

28 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

http://snook.ca

Simplify the structure and merge lists.

29 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Simplify the structure and merge lists.

30 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Simplify the structure and merge lists.

31 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

To easy to close the game by accident. Use a 25 px margin at the borders.

32 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Feedback for the drop area would support players.

33 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux Mockup

Some items might be to small to grab.

34 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Make the hardware back key work on the first list view.

35 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

In Nokia phones, use “Language” rather than “Word” for selecting a language.

36 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Drop target area is a good size.

37 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

What we propose to add to Kids Choice.

Add spoken words reading the “Quest” item as option.

39 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Add a link to your web page for more games (if there exist) and for rating.

40 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Simplify the structure.

41 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

UX offering

There are LCDUI and LWUIT UI style guides.

43 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

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

44 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

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

45 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Literature and links

46 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 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

• Photogram: http://store.ovi.com/content/355064 • Kid’s Choice: http://store.ovi.com/content/379767 • Contrast checker: http://snook.ca/technical/colour_contrast/colour.html

Take home messages

Make it powerful but keep it simple.

48 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Simplify the structure.

49 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux

Special thanks to Gener and Yasin

yasin10@mhs.if.its.ac.id

genergabasa@yahoo.com

Thanks to Sanna Hiukka and Stratos Kalogirou.

Thanks .

Jan Krebber ext-jan.krebber@nokia.com @krebbixux