Nokia Asha UI Clinic: October 2013 — Kids Choice and Photogram
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,030 views

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, ...

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/

Statistics

Views

Total Views
1,030
Views on SlideShare
1,028
Embed Views
2

Actions

Likes
0
Downloads
14
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Nokia Asha UI clinic October 2013 Jan Krebber @krebbixux Senior User Experience Consultant
  • 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. Photogram
  • 4. Structure. 4 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Make it powerful but keep it simple. 23 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 24. Kids Choice
  • 25. Structure. Optional rooms 25 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 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. 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. 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. Simplify the structure and merge lists. 29 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 30. Simplify the structure and merge lists. 30 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 31. Simplify the structure and merge lists. 31 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 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. 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. 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. 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. 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. Drop target area is a good size. 37 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 38. What we propose to add to Kids Choice.
  • 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. 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. Simplify the structure. 41 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 42. UX offering
  • 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. 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. 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. 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. Take home messages
  • 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. Simplify the structure. 49 © Nokia 2013 Nokia Asha UI clinic October 2013.pptx 2013-15-10 Jan Krebber @krebbixux
  • 50. Special thanks to Gener and Yasin  genergabasa@yahoo.com yasin10@mhs.if.its.ac.id
  • 51. Thanks to Sanna Hiukka and Stratos Kalogirou.
  • 52. Thanks . Jan Krebber ext-jan.krebber@nokia.com @krebbixux