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

994 views

Published on

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/

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
994
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Nokia Asha UI clinic October 2013 Jan Krebber @krebbixux Senior User Experience Consultant
  2. 2. Overview • • • • 2 Photogram (Gener Gabasa) Kid’s Choice (Yasin) UX offering Take home messages © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  3. 3. Photogram
  4. 4. Structure. 4 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  5. 5. 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
  6. 6. Place the icon or glyph inside the focal zone. Reference example 6 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. Adding a filter grid makes the app more powerful and simpler to use. Current structure 19 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  20. 20. We especially liked #1: The missing splash screen. 20 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  21. 21. 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
  22. 22. 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
  23. 23. Make it powerful but keep it simple. 23 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  24. 24. Kids Choice
  25. 25. Structure. Optional rooms 25 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  26. 26. 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
  27. 27. 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
  28. 28. Some fonts are too small and with too little contrast. http://snook.ca 28 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  29. 29. Simplify the structure and merge lists. 29 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  30. 30. Simplify the structure and merge lists. 30 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  31. 31. Simplify the structure and merge lists. 31 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  32. 32. 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
  33. 33. 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
  34. 34. Some items might be to small to grab. 34 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  35. 35. 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
  36. 36. 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
  37. 37. Drop target area is a good size. 37 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  38. 38. What we propose to add to Kids Choice.
  39. 39. 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
  40. 40. 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
  41. 41. Simplify the structure. 41 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  42. 42. UX offering
  43. 43. There are LCDUI and LWUIT UI style guides. 43 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  44. 44. 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
  45. 45. 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
  46. 46. 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_libr ary/#!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 46 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  47. 47. Take home messages
  48. 48. Make it powerful but keep it simple. 48 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  49. 49. Simplify the structure. 49 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  50. 50. Special thanks to Gener and Yasin  genergabasa@yahoo.com yasin10@mhs.if.its.ac.id
  51. 51. Thanks to Sanna Hiukka and Stratos Kalogirou.
  52. 52. Thanks . Jan Krebber ext-jan.krebber@nokia.com @krebbixux

×