Download - UI Clinic - Series 40 full touch, April 2013
![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