Date post: | 13-May-2015 |
Category: |
Technology |
Upload: | microsoft-mobile-developer |
View: | 904 times |
Download: | 1 times |
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