SlideShare uma empresa Scribd logo
1 de 47
Baixar para ler offline
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
UIvisualizationexamples
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
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
proposal
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
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 © 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
recommended
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 
ext-jan.krebber@nokia.com
#krebbixux

Mais conteúdo relacionado

Mais de Microsoft Mobile Developer

Nokia Asha webinar: Developing health-care applications for Nokia Asha phones
Nokia Asha webinar: Developing health-care applications for Nokia Asha phonesNokia Asha webinar: Developing health-care applications for Nokia Asha phones
Nokia Asha webinar: Developing health-care applications for Nokia Asha phones
Microsoft Mobile Developer
 
Nokia Asha webinar: Add VoIP services to your Nokia Asha apps
Nokia Asha webinar: Add VoIP services to your Nokia Asha appsNokia Asha webinar: Add VoIP services to your Nokia Asha apps
Nokia Asha webinar: Add VoIP services to your Nokia Asha apps
Microsoft Mobile Developer
 

Mais de Microsoft Mobile Developer (20)

Location based services for Nokia X and Nokia Asha using Geo2tag
Location based services for Nokia X and Nokia Asha using Geo2tagLocation based services for Nokia X and Nokia Asha using Geo2tag
Location based services for Nokia X and Nokia Asha using Geo2tag
 
HERE Maps for the Nokia X platform
HERE Maps for the Nokia X platformHERE Maps for the Nokia X platform
HERE Maps for the Nokia X platform
 
Nokia In-App Payment - UX considerations
Nokia In-App Payment - UX considerationsNokia In-App Payment - UX considerations
Nokia In-App Payment - UX considerations
 
Introduction to Nokia Asha SDK 1.2 (beta)
Introduction to Nokia Asha SDK 1.2 (beta)Introduction to Nokia Asha SDK 1.2 (beta)
Introduction to Nokia Asha SDK 1.2 (beta)
 
UX considerations when porting to Nokia X
UX considerations when porting to Nokia XUX considerations when porting to Nokia X
UX considerations when porting to Nokia X
 
Kids' games and educational app design
Kids' games and educational app designKids' games and educational app design
Kids' games and educational app design
 
Nokia X: opportunities for developers
Nokia X: opportunities for developersNokia X: opportunities for developers
Nokia X: opportunities for developers
 
Lumia App Labs: Nokia Imaging SDK 1.1
Lumia App Labs: Nokia Imaging SDK 1.1Lumia App Labs: Nokia Imaging SDK 1.1
Lumia App Labs: Nokia Imaging SDK 1.1
 
Intro to Nokia X software platform and tools
Intro to Nokia X software platform and toolsIntro to Nokia X software platform and tools
Intro to Nokia X software platform and tools
 
Lumia App Labs: Lessons learned from 50 windows phone 8 design consultations
Lumia App Labs: Lessons learned from 50 windows phone 8 design consultationsLumia App Labs: Lessons learned from 50 windows phone 8 design consultations
Lumia App Labs: Lessons learned from 50 windows phone 8 design consultations
 
Windows Phone 8 speech: parliamo con la nostra app
Windows Phone 8 speech: parliamo con la nostra appWindows Phone 8 speech: parliamo con la nostra app
Windows Phone 8 speech: parliamo con la nostra app
 
La pubblicazione di un'applicazione sullo store
La pubblicazione di un'applicazione sullo storeLa pubblicazione di un'applicazione sullo store
La pubblicazione di un'applicazione sullo store
 
Il pattern mvvm come strutturare al meglio il vostro progetto
Il pattern mvvm come strutturare al meglio il vostro progettoIl pattern mvvm come strutturare al meglio il vostro progetto
Il pattern mvvm come strutturare al meglio il vostro progetto
 
Lens app trasformare il telefono in una fotocamera
Lens app trasformare il telefono in una fotocameraLens app trasformare il telefono in una fotocamera
Lens app trasformare il telefono in una fotocamera
 
NFC, Bluetooth e comunicazione tra app
NFC, Bluetooth e comunicazione tra appNFC, Bluetooth e comunicazione tra app
NFC, Bluetooth e comunicazione tra app
 
Nokia Asha webinar: Developing health-care applications for Nokia Asha phones
Nokia Asha webinar: Developing health-care applications for Nokia Asha phonesNokia Asha webinar: Developing health-care applications for Nokia Asha phones
Nokia Asha webinar: Developing health-care applications for Nokia Asha phones
 
Connettersi al Cloud Azure Mobile Services
Connettersi al Cloud Azure Mobile ServicesConnettersi al Cloud Azure Mobile Services
Connettersi al Cloud Azure Mobile Services
 
Nokia Asha webinar: Add VoIP services to your Nokia Asha apps
Nokia Asha webinar: Add VoIP services to your Nokia Asha appsNokia Asha webinar: Add VoIP services to your Nokia Asha apps
Nokia Asha webinar: Add VoIP services to your Nokia Asha apps
 
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
 
Nokia Asha webinar: Developing location-based services for Nokia Asha phones ...
Nokia Asha webinar: Developing location-based services for Nokia Asha phones ...Nokia Asha webinar: Developing location-based services for Nokia Asha phones ...
Nokia Asha webinar: Developing location-based services for Nokia Asha phones ...
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

UI Clinic - Series 40 full touch, April 2013

  • 1. 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