Your SlideShare is downloading. ×
UI Clinic - Series 40 full touch, April 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

UI Clinic - Series 40 full touch, April 2013

876
views

Published on

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Know your phone by Mustafa Mansour Hassanien and Package Tracker by Shai Ifrach of Futuresoft Jan shares the app …

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Know your phone by Mustafa Mansour Hassanien and Package Tracker by Shai Ifrach of Futuresoft 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. In addition, Jan takes a quick look into where to place ads in an app based on a request from last month’s UI clinic.

Join the sessions:

* 23 April - 8 a.m. London; 12:30 p.m. New Delhi; 3 p.m. Singapore: http://forumnokia.adobeconnect.com/ui-clinic-ssn5/event/event_info.html
* 24 April - 8 a.m. San Francisco; 10 a.m. Mexico City; 4 p.m. London: http://forumnokia.adobeconnect.com/ui-clinic-ssn6/event/event_info.html

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
876
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jan KrebberSenior User Experience ConsultantOCTO31 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUI CLINIC FOR SERIES 40APRIL 2013
  • 2. Overview2 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber- Know your phone- Package tracker- UI considerations for ads
  • 3. 3 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberKNOW YOUR PHONEWHAT WE FOUND
  • 4. Know your phone UX map.4 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 5. We especially like the contextual search.5 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 6. Remove focus for touch phone.6 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 7. Split screen may work on large screens butit gets problems with small screens.7 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberProposal, entirecontent scrolls
  • 8. Use full content area for scrolling.8 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 9. Do not get stuck with the splash screen ifthere is nothing to do with it.9 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 10. Place navigation keys consistently, withconsistent icons and where expected.10 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 11. Ensure Back navigation from each page,since Series 40 style is hierarchy based.11 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 12. Buttons which cannot perform any actionshould be hidden.12 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 13. Make touch areas, icons and fonts largeenough.13 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 14. Use the Nokia surround shape for thelauncher icon.14 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 15. Optimize the app concept for the primaryuse case.15 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberCurrent structure
  • 16. Build the app around the main use case,note vice versa.16 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberProposed structureCurrent structure
  • 17. 17 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberPACKAGE TRACKERWHAT WE FOUND
  • 18. Package Tracker UX map.18 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 19. We especially like the first time use caseand the clear structure of the app.19 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 20. Use best keypad layout for character input,e.g. DHL requires only decimals.20 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUIvisualizationexamples
  • 21. Give users the feeling that they are incontrol.21 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposalproposal
  • 22. Be careful with fast moving UI elements. Itmight cause harm to people.22 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 23. In LWUIT optimize for payload. Test alsowith less powerful phones.23 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 24. Enable landscape if your text might becometruncated in portrait (only).24 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 25. Use a short name to avoid app nametruncation in the application menu.25 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 26. Pressing Back from a form or setting shouldevoke a confirmation query.26 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposal
  • 27. Use component titles to simplify the layout.27 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposal
  • 28. Allow clean sweep of self populated lists.28 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposalproposal
  • 29. 29 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUI CONSIDERATIONS FOR ADS
  • 30. Ads could be repeated at key breaks insidelong content, e.g. custom lists.30 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 31. Ads being part of the chrome should alwaysappear at the same position.31 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 32. The ad should always be selectable and notinterfere with any chrome.32 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber?
  • 33. Differentiate the ad from the actualcontent.33 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberrecommended
  • 34. Full screen ads should be used atbreakpoints, not within tasks.34 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 35. 35 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTAKE HOME MESSAGES
  • 36. Build the app around the main use case,note vice versa.36 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 37. Give users the feeling that they are incontrol.37 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 38. Full screen ads should be used atbreakpoints, not within tasks.38 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 39. 39 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUX OFFERING FOR SERIES 40
  • 40. There are LCDUI and LWUIT style guides –and more.40 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 41. The Nokia’s Series 40 stencils supportInkscape.41 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 42. Series 40 UI component demo projectsshowcase UI and code.42 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 43. We offer reviews for the UI clinics.43 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  • 44. Series 40 UI design44 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber• UX Library for Series 40 full touch:http://www.developer.nokia.com/Resources/Library/Full_Touch/• LWUIT UX Overview:http://www.developer.nokia.com/Resources/Library/LWUIT/#!ux-overview.html• Iconography:http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation/launcher-icon-templates.html• UI Component Demos project:https://projects.developer.nokia.com/s40uivisualisation• Web Apps UI visualisation project:https://projects.developer.nokia.com/webappsuivisualisation
  • 45. Further reading and links45 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber• Know your phone in store:http://store.ovi.com/content/330978?clickSource=search&pos=1• Package tracker in the store:http://store.ovi.com/content/352191?clickSource=search&pos=1• UX blogs in Nokia developer Code Blog:http://www.developer.nokia.com/Blogs/Code/• Mobile Design Pattern Gallery. Theresa Neil (2012).• Designing Mobile Interfaces. Steven Hoober and Eric Berkman(2011).• http://www.nngroup.com/articles/ (Jacob Nielsen’s blog)
  • 46. 46 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTHANKS TO:MUSTAFA MANSOUR HASSANIENSHAI IFRACH, FUTURESOFTSANNA HIUKKA
  • 47. 47 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTHANKS ext-jan.krebber@nokia.com#krebbixux