nokia asha ui clinic: october 2013 — kids choice and photogram
DESCRIPTION
Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Kids Choice, by Mochamad Yasin, an easy-to-play game for children ages 1-6 and Photogram, by Gener Gabasa of Octacore, an application for applying filters to photos and images. 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/TRANSCRIPT
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