SlideShare una empresa de Scribd logo
1 de 33
Descargar para leer sin conexión
Introduction to the new Nokia Asha UI
Jan Krebber
Senior User Experience Consultant
Overview
2 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
• UI design changes
• From Series 40 non-touch to Nokia Asha UI
• UX offering
• Take home messages
UI design changes
4 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
The visualization changed,
but the APIs remain compatible.
The screen is optimized for mobility,
convenience and effectiveness.
5 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Consider thumb usage.
Make touch areas large enough.
6 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Back-stepping is done via a dedicated
hardware Back/Exit key.
7 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
The Swipe is reserved.
8 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Use 25 px margin for
gestures to be Swipe-
safe.
9 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Push notification lets people listen to your
service if there is something new.
10 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Your service
Nokia server
Category bar can have tabs or actions.
Do not mix them.
11 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Indicating selected items has been
simplified.
12 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
The popup list has been simplified as well.
Replace it with a list if necessary.
13 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Square Fastlane icon is cut for you into
Home’s icon.
14 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Make sure custom components work with
the light background.
15 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Textual guidelines are simplified.
16 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
From Series 40 non-touch to
Nokia Asha UI
Remove focus when porting from Series 40
non-touch.
18 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
No focus in a list (1).
Highlight only in a picker (2).
19 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Example: List no focus – Picker highlight.
20 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Split non-touch Options menu into Options
menu and Long-press menu.
21 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Long-press menu items must be repeated
in later views.
22 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
UX offering
There are LCDUI and LWUIT UI style guides.
24 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
There are UI stencils for Inkscape in
addition to Adobe Illustrator.
25 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Asha UI component demo application is a
Java midlet suite for LCDUI.
26 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Literature and links
27 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
• UX Library for Nokia Asha:
• http://www.developer.nokia.com/Resources/Library/Asha_UI/
#!index.html
• Nokia Asha Web app UX guidelines:
• http://www.developer.nokia.com/Resources/Library/Nokia_As
ha_web_apps_library/#!design-library.html
• Nokia Asha UI component demos:
• https://projects.developer.nokia.com/asha_ui_component_de
mos
Take home messages
29 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
The visualization changed,
but the APIs remain compatible.
Back-stepping is done via a dedicated
hardware Back/Exit key.
30 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Category bar can have tabs or actions.
Do not mix them.
31 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Thanks to Sanna Hiukka and
Stratos Kalogirou.
Thanks .
Jan Krebber
ext-jan.krebber@nokia.com
@krebbixux

Más contenido relacionado

Más 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
 

Más de Microsoft Mobile Developer (20)

DIY Nokia Asha app usability studies
DIY Nokia Asha app usability studiesDIY Nokia Asha app usability studies
DIY Nokia Asha app usability studies
 
Lessons learned from Nokia X UI reviews
Lessons learned from Nokia X UI reviewsLessons learned from Nokia X UI reviews
Lessons learned from Nokia X UI reviews
 
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
 

Último

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
 

Último (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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...
 
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
 
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
 
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...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Introduction to the new Nokia Asha UI

  • 1. Introduction to the new Nokia Asha UI Jan Krebber Senior User Experience Consultant
  • 2. Overview 2 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux • UI design changes • From Series 40 non-touch to Nokia Asha UI • UX offering • Take home messages
  • 4. 4 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux The visualization changed, but the APIs remain compatible.
  • 5. The screen is optimized for mobility, convenience and effectiveness. 5 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 6. Consider thumb usage. Make touch areas large enough. 6 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 7. Back-stepping is done via a dedicated hardware Back/Exit key. 7 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 8. The Swipe is reserved. 8 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 9. Use 25 px margin for gestures to be Swipe- safe. 9 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 10. Push notification lets people listen to your service if there is something new. 10 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux Your service Nokia server
  • 11. Category bar can have tabs or actions. Do not mix them. 11 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 12. Indicating selected items has been simplified. 12 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 13. The popup list has been simplified as well. Replace it with a list if necessary. 13 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 14. Square Fastlane icon is cut for you into Home’s icon. 14 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 15. Make sure custom components work with the light background. 15 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 16. Textual guidelines are simplified. 16 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 17. From Series 40 non-touch to Nokia Asha UI
  • 18. Remove focus when porting from Series 40 non-touch. 18 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 19. No focus in a list (1). Highlight only in a picker (2). 19 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 20. Example: List no focus – Picker highlight. 20 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 21. Split non-touch Options menu into Options menu and Long-press menu. 21 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 22. Long-press menu items must be repeated in later views. 22 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 24. There are LCDUI and LWUIT UI style guides. 24 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 25. There are UI stencils for Inkscape in addition to Adobe Illustrator. 25 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 26. Asha UI component demo application is a Java midlet suite for LCDUI. 26 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 27. Literature and links 27 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux • UX Library for Nokia Asha: • http://www.developer.nokia.com/Resources/Library/Asha_UI/ #!index.html • Nokia Asha Web app UX guidelines: • http://www.developer.nokia.com/Resources/Library/Nokia_As ha_web_apps_library/#!design-library.html • Nokia Asha UI component demos: • https://projects.developer.nokia.com/asha_ui_component_de mos
  • 29. 29 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux The visualization changed, but the APIs remain compatible.
  • 30. Back-stepping is done via a dedicated hardware Back/Exit key. 30 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 31. Category bar can have tabs or actions. Do not mix them. 31 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
  • 32. Thanks to Sanna Hiukka and Stratos Kalogirou.