Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram

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.


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


Place the icon or glyph inside the focal zone.


Reference example

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


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


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


App is to easily closed by accident with a swipe.


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


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


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


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


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


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


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


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


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


Current structure

We especially liked #1: The missing splash screen.


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


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


Make it powerful but keep it simple.


Kids Choice

Structure.


Optional rooms

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


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


Some fonts are too small and with too little contrast.


http://snook.ca

Simplify the structure and merge lists.






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


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.


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


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


Drop target area is a good size.


What we propose to add to Kids Choice.

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


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


Simplify the structure.


UX offering

There are LCDUI and LWUIT UI style guides.


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


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


Literature and links


• 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

http://www.developer.nokia.com/Resources/Library/Asha_UI/

http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/

http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/

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

http://store.ovi.com/content/355064

http://store.ovi.com/content/379767

http://snook.ca/technical/colour_contrast/colour.html

Take home messages

Make it powerful but keep it simple.


Simplify the structure.


Special thanks to Gener and Yasin

[email protected]

[email protected]

Thanks to Sanna Hiukka and Stratos Kalogirou.

Thanks .

Jan Krebber [email protected] @krebbixux

Technology

Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram