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
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
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 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
KNOW YOUR PHONE WHAT WE FOUND
Know your phone UX map.
4 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
We especially like the contextual search.
5 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Remove focus for touch phone.
6 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
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
Use full content area for scrolling.
8 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
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
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
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
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
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
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
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
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 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
PACKAGE TRACKER WHAT WE FOUND
Package Tracker UX map.
18 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
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
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
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
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
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
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
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
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
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
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
29 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
UI CONSIDERATIONS FOR ADS
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
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
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
?
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
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 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
TAKE HOME MESSAGES
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
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
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 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
UX OFFERING FOR SERIES 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
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
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
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
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
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 © 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 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
THANKS
[email protected] #krebbixux