ui clinic - series 40 full touch, april 2013
DESCRIPTION
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.htmlTRANSCRIPT
![Page 1: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/1.jpg)
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
![Page 2: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/2.jpg)
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
![Page 3: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/3.jpg)
3 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
KNOW YOUR PHONE WHAT WE FOUND
![Page 4: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/4.jpg)
Know your phone UX map.
4 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
![Page 5: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/5.jpg)
We especially like the contextual search.
5 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
![Page 6: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/6.jpg)
Remove focus for touch phone.
6 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
![Page 7: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/7.jpg)
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
![Page 8: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/8.jpg)
Use full content area for scrolling.
8 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
![Page 9: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/9.jpg)
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
![Page 10: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/10.jpg)
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
![Page 11: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/11.jpg)
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
![Page 12: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/12.jpg)
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
![Page 13: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/13.jpg)
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
![Page 14: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/14.jpg)
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
![Page 15: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/15.jpg)
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
![Page 16: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/16.jpg)
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
![Page 17: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/17.jpg)
17 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
PACKAGE TRACKER WHAT WE FOUND
![Page 18: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/18.jpg)
Package Tracker UX map.
18 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
![Page 19: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/19.jpg)
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
![Page 20: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/20.jpg)
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
UI v
isua
lizat
ion
exam
ples
![Page 21: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/21.jpg)
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
prop
osal
prop
osal
![Page 22: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/22.jpg)
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
![Page 23: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/23.jpg)
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
![Page 24: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/24.jpg)
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
![Page 25: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/25.jpg)
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
![Page 26: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/26.jpg)
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
prop
osal
![Page 27: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/27.jpg)
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
prop
osal
![Page 28: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/28.jpg)
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
prop
osal
prop
osal
![Page 29: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/29.jpg)
29 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
UI CONSIDERATIONS FOR ADS
![Page 30: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/30.jpg)
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
![Page 31: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/31.jpg)
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
![Page 32: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/32.jpg)
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
?
![Page 33: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/33.jpg)
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
reco
mm
ende
d
![Page 34: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/34.jpg)
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
![Page 35: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/35.jpg)
35 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
TAKE HOME MESSAGES
![Page 36: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/36.jpg)
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
![Page 37: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/37.jpg)
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
![Page 38: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/38.jpg)
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
![Page 39: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/39.jpg)
39 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
UX OFFERING FOR SERIES 40
![Page 40: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/40.jpg)
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
![Page 41: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/41.jpg)
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
![Page 42: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/42.jpg)
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
![Page 43: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/43.jpg)
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
![Page 44: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/44.jpg)
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
![Page 45: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/45.jpg)
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)
![Page 46: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/46.jpg)
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
![Page 47: UI Clinic - Series 40 full touch, April 2013](https://reader034.vdocument.in/reader034/viewer/2022052619/55532ac8b4c905a7778b54bc/html5/thumbnails/47.jpg)
47 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
THANKS
[email protected] #krebbixux