Nokia Asha UI clinic October 2013 Jan Krebber @krebbixux Senior User Experience Consultant
May 06, 2015
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
Thanks to Sanna Hiukka and Stratos Kalogirou.
Thanks .
Jan Krebber [email protected] @krebbixux