Mais conteúdo relacionado Mais de Microsoft Mobile Developer (20) UI Clinic - Series 40 full touch, April 20131. Jan Krebber
Senior User Experience Consultant
OCTO3
1 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
UI CLINIC FOR SERIES 40
APRIL 2013
2. Overview
2 © 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 Krebber
KNOW YOUR PHONE
WHAT 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 but
it gets problems with small screens.
7 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Proposal, entire
content 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 if
there 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, with
consistent 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 action
should 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 large
enough.
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 the
launcher 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 primary
use case.
15 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Current 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 Krebber
Proposed structure
Current structure
17. 17 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
PACKAGE TRACKER
WHAT 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 case
and 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 Krebber
UIvisualizationexamples
21. Give users the feeling that they are in
control.
21 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
proposal
proposal
22. Be careful with fast moving UI elements. It
might 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 also
with 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 become
truncated 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 name
truncation 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 should
evoke a confirmation query.
26 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
proposal
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 Krebber
proposal
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 Krebber
proposal
proposal
29. 29 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
UI CONSIDERATIONS FOR ADS
30. Ads could be repeated at key breaks inside
long 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 always
appear 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 not
interfere 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 actual
content.
33 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
recommended
34. Full screen ads should be used at
breakpoints, 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 Krebber
TAKE 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 in
control.
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 at
breakpoints, 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 Krebber
UX 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 support
Inkscape.
41 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
42. Series 40 UI component demo projects
showcase 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 design
44 © 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 links
45 © 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 Krebber
THANKS TO:
MUSTAFA MANSOUR HASSANIEN
SHAI IFRACH, FUTURESOFT
SANNA HIUKKA
47. 47 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
THANKS
ext-jan.krebber@nokia.com
#krebbixux