Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
774 -
download
4
description
Transcript of Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram
![Page 1: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/1.jpg)
Nokia Asha UI clinic October 2013 Jan Krebber @krebbixux Senior User Experience Consultant
![Page 2: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/2.jpg)
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
![Page 3: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/3.jpg)
Photogram
![Page 4: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/4.jpg)
Structure.
4 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 5: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/5.jpg)
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
![Page 6: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/6.jpg)
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
![Page 7: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/7.jpg)
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
![Page 8: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/8.jpg)
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
![Page 9: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/9.jpg)
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
![Page 10: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/10.jpg)
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
![Page 11: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/11.jpg)
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
![Page 12: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/12.jpg)
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
![Page 13: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/13.jpg)
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
![Page 14: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/14.jpg)
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
![Page 15: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/15.jpg)
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
![Page 16: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/16.jpg)
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
![Page 17: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/17.jpg)
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
![Page 18: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/18.jpg)
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
![Page 19: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/19.jpg)
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
![Page 20: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/20.jpg)
We especially liked #1: The missing splash screen.
20 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 21: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/21.jpg)
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
![Page 22: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/22.jpg)
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
![Page 23: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/23.jpg)
Make it powerful but keep it simple.
23 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 24: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/24.jpg)
Kids Choice
![Page 25: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/25.jpg)
Structure.
25 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
Optional rooms
![Page 26: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/26.jpg)
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
![Page 27: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/27.jpg)
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
![Page 28: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/28.jpg)
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
![Page 29: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/29.jpg)
Simplify the structure and merge lists.
29 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 30: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/30.jpg)
Simplify the structure and merge lists.
30 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 31: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/31.jpg)
Simplify the structure and merge lists.
31 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 32: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/32.jpg)
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
![Page 33: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/33.jpg)
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
![Page 34: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/34.jpg)
Some items might be to small to grab.
34 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 35: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/35.jpg)
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
![Page 36: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/36.jpg)
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
![Page 37: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/37.jpg)
Drop target area is a good size.
37 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 38: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/38.jpg)
What we propose to add to Kids Choice.
![Page 39: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/39.jpg)
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
![Page 40: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/40.jpg)
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
![Page 41: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/41.jpg)
Simplify the structure.
41 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 42: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/42.jpg)
UX offering
![Page 43: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/43.jpg)
There are LCDUI and LWUIT UI style guides.
43 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 44: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/44.jpg)
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
![Page 45: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/45.jpg)
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
![Page 46: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/46.jpg)
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
![Page 47: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/47.jpg)
Take home messages
![Page 48: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/48.jpg)
Make it powerful but keep it simple.
48 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 49: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/49.jpg)
Simplify the structure.
49 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
![Page 51: Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram](https://reader033.fdocuments.net/reader033/viewer/2022042700/5549218cb4c9059f4c8b84a4/html5/thumbnails/51.jpg)
Thanks to Sanna Hiukka and Stratos Kalogirou.