SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Downloaden Sie, um offline zu lesen
GREAT UI FOR A BUDGET
       PHONE?


1
There are over 1.5 billion Series 40 devices
                  sold…




2
… All of which
      support Java

    An opportunity too
        big to miss



3
Better UX
   Better reviews
   Better usage numbers
   Better return on investment.




4
Design Process




5
In the start of the design process… Questions


                                                 How do I make money?
  How to port my application?
                     How to apply Design Guidelines?
                                                 Which color theme to use?
 What features should I include
                 What is the icon style?
                                     Are there any technical limitations in the platform?

            How to integrate to the platform features?
Design (should) drives the development


• User journeys                 • Interaction               • Final design
  /storyboards                    architecture                specifications
• Functionality                 • Visual design             • Iteration and QA with
• Requirements                    direction                   software



 Concept design                 Detailed design             Implementation




    More info: http://www.developer.nokia.com/Design/Design_process/

7
Choose the right design approach


     Custom                       Hybrid                         Platform
     approach                     approach                       approach
    • Full screen applications   • Follows UI design            • Follows UI design
                                   guidelines                     guidelines
    • Uses mostly custom
      components                 • Uses platform UI             • Uses only platform
                                   components wherever            components
    • Only some limitations        possible
      from the platform                                         • Branding applied in the
                                 • Custom interface for           limits of platform UI
    • Usually used by games        features that are not          design guidelines
                                   possible with the platform
                                   UI components




8
Selection of design approach influences
the selection of UI development
framework

    Custom                     Hybrid                     Platform
    approach                   approach                   approach
    •JAVA custom canvas       • LWUIT with some custom   • LWUIT components
                                components
    •All screen drawn pixel                              • LCDUI components
     by pixel                 • LCDUI with some custom
                                components (more
                                limited customization
                                than LWUIT)




9
Targeting for multiple Series 40 UI
devices?
 • Java applications can handle multiple
   resolutions and aspect ratios fairly well

 • From UX point of view it is still
   recommended to do some optimisations
   for each different UX framework
     − Different UX frameworks behave
       differently
        − Non touch UI provides focus on the
          active item, touch and type and full touch
          don’t
        − Category bar in Full Touch
     − Wider display gives more space to
       content
     − Physical size of the screens may vary
        − PPI differences among phones


10
UX Guidelines
     - A map that helps you to create a style for your application -




11
Scope of UI Guidelines
• The UX Guidelines are built to help
  designers through the design process

• Guidelines include
     −   Overview to the UX framework
     −   UI Pattern descriptions
     −   UI component descriptions
     −   Language and tone of voice guidelines
     −   UX Checklist
     −   Etc.

• Nokia is providing/will provide
  guidelines for each UI framework
  supported under the Series 40
  platform
     −   Series 40 Full Touch
     −   Touch & Type
     −   Non Touch
     −   Web applications
                                                 Series 40 full touch design guidelines
                                                 Series 40 Touch and Type UI Style Guide
                                                 Series 40 non-touch design guidelines
                                                 Series 40 Web App UX Guidelines
12
Essentials – the overview on each UI
• Essential section always tell
  the key functionality of the UX
  framework

     − Layout properties
     − How to open/close
       applications
     − Event handling
     − HW Key behavior
     − Gestures

• These are crucial information
  for designers when starting
  their own application design
  process

13
Patterns – a glue that binds the UX as one

• UI Patterns explain the generic
  behavioral patterns of the
  applications in a certain UX
  framework
     − Navigation models
     − Content management
     − Dialogs, menus and notification
       behavior
     − Error handling
     − Showing/filtering content
     − Etc.

• UX patterns create the consistency
  between applications
• Application designers shouldn’t
  break the available patterns –
  however, creating new patterns is
  allowed (with custom
  implementation)

14
Components – the bits which create the
patterns
• With readymade Java UI components
  the application can be made closer to
  the native UX easier than with creating
  all the components custom

• LCDUI is the official Java UI framework
  in use, also LWUIT theme available for
  Full Touch UI Framework

• When creating custom components,
  make sure the application is styled
  consistenly (no mixing of different
  styles within applications)

• Component stencils available in order
  to make the design of view mockups
  easier



15
Interaction design
     - How to apply a proper interaction architecture to an application -




16
Select the right navigation model




Note: Tab bar navigation models only supported in Series 40 Full Touch UI Framework

17
Paint the overall picture of the application




18
Explain the overall picture with key use
case flows/videos/prototypes/…




19
… And key screen visualizations




20
For most developers, a proper IA, couple
of key use cases and some key screen
visualizations are enough to get started
with the development work and dive in to
the details.



21
”Your application has a
          personality, let it show”
 - With small tweaks to the visual design, your application may stand out from the
                                    competitors -




22
Using a highlight color
   • When choosing your application's highlight
     colour, consider aligning it with the primary
     colour of your brand to promote your brand's
     presence and strengthen your application's
     identity

   • Your custom highlight colour can be applied
     across a set of components to indicate activity,
     progress, and key positive actions in your
     application

   • It is important to apply your highlight colour
     consistently throughout your application, being
     careful not to mix different colours




 23
Note: Customization requires custom implementation for Series 40, example image from N9
Create custom components when
 appropriate and they have a meaning
   • Custom components
     can be really effective
     when applying a
     personality and
     branding to your
     application

   • However, do not design
     custom components
     just for the sake of
     them. If there is a
     native component
     available for the use
     case consider
     customization
     carefully.
 24
Note: Customization requires custom implementation for Series 40, example image from N9
Use layouts creatively




25
Pay attention to
details. Every
pixel counts.




26
”No detail is too small”
     - The basis for every great quality UI is an obsessive attention to the smallest
                                     design details -




27
During the implementation, the only way
to improve the UX is to raise bugs to
others and resolve your own bugs. Lots of
those.



28
Recap:

> Design Process
> Design Approach
> UI Frameworks and application style
> Interaction Architecture
> Visual tweaks
> Raise Bugs


29
THANK YOU. KIITOS.


      Juhani.haaparanta@nokia.com


30

Weitere ähnliche Inhalte

Was ist angesagt?

Nexcore mobile platform 4.0
Nexcore mobile platform 4.0Nexcore mobile platform 4.0
Nexcore mobile platform 4.0SK CC
 
Industrial Training in Mobile Application
Industrial Training in Mobile ApplicationIndustrial Training in Mobile Application
Industrial Training in Mobile ApplicationArcadian Learning
 
Mobile JS Frameworks
Mobile JS FrameworksMobile JS Frameworks
Mobile JS FrameworksIbrahim Ersoy
 
Planning your Dream Mobile App
Planning your Dream Mobile AppPlanning your Dream Mobile App
Planning your Dream Mobile AppSean Katz
 
J query mobile tech talk
J query mobile tech talkJ query mobile tech talk
J query mobile tech talkwoliverj
 
Mobile web application production for business
Mobile web application production for businessMobile web application production for business
Mobile web application production for businessHani Gamal
 

Was ist angesagt? (7)

Nexcore mobile platform 4.0
Nexcore mobile platform 4.0Nexcore mobile platform 4.0
Nexcore mobile platform 4.0
 
Unit 2
Unit 2Unit 2
Unit 2
 
Industrial Training in Mobile Application
Industrial Training in Mobile ApplicationIndustrial Training in Mobile Application
Industrial Training in Mobile Application
 
Mobile JS Frameworks
Mobile JS FrameworksMobile JS Frameworks
Mobile JS Frameworks
 
Planning your Dream Mobile App
Planning your Dream Mobile AppPlanning your Dream Mobile App
Planning your Dream Mobile App
 
J query mobile tech talk
J query mobile tech talkJ query mobile tech talk
J query mobile tech talk
 
Mobile web application production for business
Mobile web application production for businessMobile web application production for business
Mobile web application production for business
 

Andere mochten auch

China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]WandouLabs
 
L’iPad à l’école : usages, avantages et défis
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défisnawras.univers
 
Baromètre mobile marketing association france 3ème trimestre 2013
Baromètre mobile marketing association france  3ème trimestre 2013Baromètre mobile marketing association france  3ème trimestre 2013
Baromètre mobile marketing association france 3ème trimestre 2013Thierry Pires
 
Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile! Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile! TheFamily
 
3eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 20113eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 2011servicesmobiles.fr
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Daniel Wood
 
Baromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMG
Baromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMGBaromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMG
Baromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMGRomain Fonnier
 
Mobile forms - 10 DOs and DONTs
Mobile forms - 10 DOs and DONTsMobile forms - 10 DOs and DONTs
Mobile forms - 10 DOs and DONTsTomer Rosenthal
 
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVMobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVPascal Dasseux
 
Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Aidan Wu
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesBenjamin Faure
 
Day in the life of a mobile commerce user
Day in the life of a mobile commerce userDay in the life of a mobile commerce user
Day in the life of a mobile commerce userOn Device Research
 
Etat des lieux du mobile en France et en Europe
Etat des lieux du mobile en France et en EuropeEtat des lieux du mobile en France et en Europe
Etat des lieux du mobile en France et en EuropeMediamaispasque
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingSIXTY
 
Digital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto ExperienceDigital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto ExperienceBrian Regienczuk
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android appsRichard Byrne
 

Andere mochten auch (20)

China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]
 
L’iPad à l’école : usages, avantages et défis
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défis
 
Baromètre mobile marketing association france 3ème trimestre 2013
Baromètre mobile marketing association france  3ème trimestre 2013Baromètre mobile marketing association france  3ème trimestre 2013
Baromètre mobile marketing association france 3ème trimestre 2013
 
Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile! Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile!
 
3eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 20113eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 2011
 
Chiffres du mobile en france
Chiffres du mobile en franceChiffres du mobile en france
Chiffres du mobile en france
 
Keynotes Le Mobile 2013
Keynotes Le Mobile 2013Keynotes Le Mobile 2013
Keynotes Le Mobile 2013
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012
 
Baromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMG
Baromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMGBaromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMG
Baromobile 2012 : le baromètre de l'internet mobile - SFR régie - OMG
 
60 apps in 60 mins
60 apps in 60 mins60 apps in 60 mins
60 apps in 60 mins
 
Mobile forms - 10 DOs and DONTs
Mobile forms - 10 DOs and DONTsMobile forms - 10 DOs and DONTs
Mobile forms - 10 DOs and DONTs
 
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVMobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
 
Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Getting Web Multi-Touch Working
Getting Web Multi-Touch Working
 
Metro + Metro Like
Metro + Metro LikeMetro + Metro Like
Metro + Metro Like
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 Secondes
 
Day in the life of a mobile commerce user
Day in the life of a mobile commerce userDay in the life of a mobile commerce user
Day in the life of a mobile commerce user
 
Etat des lieux du mobile en France et en Europe
Etat des lieux du mobile en France et en EuropeEtat des lieux du mobile en France et en Europe
Etat des lieux du mobile en France et en Europe
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
 
Digital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto ExperienceDigital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto Experience
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android apps
 

Ähnlich wie Create great UIs for budget phones

Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityArabella David
 
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentKevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentAxway Appcelerator
 
Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2ICS
 
Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignBART RADKA
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Developmentbinuvt
 
Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsLow Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsJohnMcGuigan10
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleICS
 
Qt Developer Days 2009 Keynote - Portable UIs
Qt Developer Days 2009 Keynote - Portable UIsQt Developer Days 2009 Keynote - Portable UIs
Qt Developer Days 2009 Keynote - Portable UIsaccount inactive
 
AEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UIAEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UIGilles Knobloch
 
Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopmentPrabhat gangwar
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyZainul Zain
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationsaritasingh19866
 
Designing for mobile user experience
Designing for mobile user experienceDesigning for mobile user experience
Designing for mobile user experienceSameer Chavan
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2GeneXus
 
Building Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyBuilding Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyThomas Immich
 
Titanium appcelerator kickstart
Titanium appcelerator kickstartTitanium appcelerator kickstart
Titanium appcelerator kickstartAlessio Ricco
 

Ähnlich wie Create great UIs for budget phones (20)

Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction Usability
 
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentKevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
 
Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2
 
Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred Design
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Development
 
Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsLow Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design Platforms
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
 
Your Brain on Responsive Design
Your Brain on Responsive DesignYour Brain on Responsive Design
Your Brain on Responsive Design
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
Qt Developer Days 2009 Keynote - Portable UIs
Qt Developer Days 2009 Keynote - Portable UIsQt Developer Days 2009 Keynote - Portable UIs
Qt Developer Days 2009 Keynote - Portable UIs
 
ICS3211 Week6
ICS3211 Week6ICS3211 Week6
ICS3211 Week6
 
AEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UIAEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UI
 
Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopment
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile application
 
Designing for mobile user experience
Designing for mobile user experienceDesigning for mobile user experience
Designing for mobile user experience
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
 
Building Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyBuilding Sexy User Interfaces in Servoy
Building Sexy User Interfaces in Servoy
 
Titanium appcelerator kickstart
Titanium appcelerator kickstartTitanium appcelerator kickstart
Titanium appcelerator kickstart
 

Mehr von Microsoft Mobile Developer

Intro to Nokia X software platform 2.0 and tools
Intro to Nokia X software platform 2.0 and toolsIntro to Nokia X software platform 2.0 and tools
Intro to Nokia X software platform 2.0 and toolsMicrosoft Mobile Developer
 
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 Geo2tagMicrosoft Mobile Developer
 
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 consultationsMicrosoft Mobile Developer
 
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 appMicrosoft Mobile Developer
 
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 storeMicrosoft Mobile Developer
 
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 progettoMicrosoft Mobile Developer
 

Mehr von Microsoft Mobile Developer (20)

Intro to Nokia X software platform 2.0 and tools
Intro to Nokia X software platform 2.0 and toolsIntro to Nokia X software platform 2.0 and tools
Intro to Nokia X software platform 2.0 and tools
 
Lumia App Labs: Lumia SensorCore SDK beta
Lumia App Labs: Lumia SensorCore SDK betaLumia App Labs: Lumia SensorCore SDK beta
Lumia App Labs: Lumia SensorCore SDK beta
 
Nokia Asha from idea to app - Imaging
Nokia Asha from idea to app - ImagingNokia Asha from idea to app - Imaging
Nokia Asha from idea to app - Imaging
 
Healthcare apps for Nokia X and Nokia Asha
Healthcare apps for Nokia X and Nokia AshaHealthcare apps for Nokia X and Nokia Asha
Healthcare apps for Nokia X and Nokia Asha
 
Push notifications on Nokia X
Push notifications on Nokia XPush notifications on Nokia X
Push notifications on Nokia X
 
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
 

Kürzlich hochgeladen

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 

Kürzlich hochgeladen (20)

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 

Create great UIs for budget phones

  • 1. GREAT UI FOR A BUDGET PHONE? 1
  • 2. There are over 1.5 billion Series 40 devices sold… 2
  • 3. … All of which support Java An opportunity too big to miss 3
  • 4. Better UX  Better reviews  Better usage numbers  Better return on investment. 4
  • 6. In the start of the design process… Questions How do I make money? How to port my application? How to apply Design Guidelines? Which color theme to use? What features should I include What is the icon style? Are there any technical limitations in the platform? How to integrate to the platform features?
  • 7. Design (should) drives the development • User journeys • Interaction • Final design /storyboards architecture specifications • Functionality • Visual design • Iteration and QA with • Requirements direction software Concept design Detailed design Implementation More info: http://www.developer.nokia.com/Design/Design_process/ 7
  • 8. Choose the right design approach Custom Hybrid Platform approach approach approach • Full screen applications • Follows UI design • Follows UI design guidelines guidelines • Uses mostly custom components • Uses platform UI • Uses only platform components wherever components • Only some limitations possible from the platform • Branding applied in the • Custom interface for limits of platform UI • Usually used by games features that are not design guidelines possible with the platform UI components 8
  • 9. Selection of design approach influences the selection of UI development framework Custom Hybrid Platform approach approach approach •JAVA custom canvas • LWUIT with some custom • LWUIT components components •All screen drawn pixel • LCDUI components by pixel • LCDUI with some custom components (more limited customization than LWUIT) 9
  • 10. Targeting for multiple Series 40 UI devices? • Java applications can handle multiple resolutions and aspect ratios fairly well • From UX point of view it is still recommended to do some optimisations for each different UX framework − Different UX frameworks behave differently − Non touch UI provides focus on the active item, touch and type and full touch don’t − Category bar in Full Touch − Wider display gives more space to content − Physical size of the screens may vary − PPI differences among phones 10
  • 11. UX Guidelines - A map that helps you to create a style for your application - 11
  • 12. Scope of UI Guidelines • The UX Guidelines are built to help designers through the design process • Guidelines include − Overview to the UX framework − UI Pattern descriptions − UI component descriptions − Language and tone of voice guidelines − UX Checklist − Etc. • Nokia is providing/will provide guidelines for each UI framework supported under the Series 40 platform − Series 40 Full Touch − Touch & Type − Non Touch − Web applications Series 40 full touch design guidelines Series 40 Touch and Type UI Style Guide Series 40 non-touch design guidelines Series 40 Web App UX Guidelines 12
  • 13. Essentials – the overview on each UI • Essential section always tell the key functionality of the UX framework − Layout properties − How to open/close applications − Event handling − HW Key behavior − Gestures • These are crucial information for designers when starting their own application design process 13
  • 14. Patterns – a glue that binds the UX as one • UI Patterns explain the generic behavioral patterns of the applications in a certain UX framework − Navigation models − Content management − Dialogs, menus and notification behavior − Error handling − Showing/filtering content − Etc. • UX patterns create the consistency between applications • Application designers shouldn’t break the available patterns – however, creating new patterns is allowed (with custom implementation) 14
  • 15. Components – the bits which create the patterns • With readymade Java UI components the application can be made closer to the native UX easier than with creating all the components custom • LCDUI is the official Java UI framework in use, also LWUIT theme available for Full Touch UI Framework • When creating custom components, make sure the application is styled consistenly (no mixing of different styles within applications) • Component stencils available in order to make the design of view mockups easier 15
  • 16. Interaction design - How to apply a proper interaction architecture to an application - 16
  • 17. Select the right navigation model Note: Tab bar navigation models only supported in Series 40 Full Touch UI Framework 17
  • 18. Paint the overall picture of the application 18
  • 19. Explain the overall picture with key use case flows/videos/prototypes/… 19
  • 20. … And key screen visualizations 20
  • 21. For most developers, a proper IA, couple of key use cases and some key screen visualizations are enough to get started with the development work and dive in to the details. 21
  • 22. ”Your application has a personality, let it show” - With small tweaks to the visual design, your application may stand out from the competitors - 22
  • 23. Using a highlight color • When choosing your application's highlight colour, consider aligning it with the primary colour of your brand to promote your brand's presence and strengthen your application's identity • Your custom highlight colour can be applied across a set of components to indicate activity, progress, and key positive actions in your application • It is important to apply your highlight colour consistently throughout your application, being careful not to mix different colours 23 Note: Customization requires custom implementation for Series 40, example image from N9
  • 24. Create custom components when appropriate and they have a meaning • Custom components can be really effective when applying a personality and branding to your application • However, do not design custom components just for the sake of them. If there is a native component available for the use case consider customization carefully. 24 Note: Customization requires custom implementation for Series 40, example image from N9
  • 26. Pay attention to details. Every pixel counts. 26
  • 27. ”No detail is too small” - The basis for every great quality UI is an obsessive attention to the smallest design details - 27
  • 28. During the implementation, the only way to improve the UX is to raise bugs to others and resolve your own bugs. Lots of those. 28
  • 29. Recap: > Design Process > Design Approach > UI Frameworks and application style > Interaction Architecture > Visual tweaks > Raise Bugs 29
  • 30. THANK YOU. KIITOS. Juhani.haaparanta@nokia.com 30

Hinweis der Redaktion

  1. The items described in this presentation are the most important UX issues to consider when designing an application for Series 40 full touch. Many of the 'checks' are solved automatically when using ready-made views like 'lists', but they remain an issue for custom views.More information found from here:Style guide https://www.developer.nokia.com/Resources/Library/Full_Touch/#!index.htmlStyle guide webinar http://www.developer.nokia.com/Community/Wiki/Webinar_Series_40_UI_Design
  2. UI FrameworksFull TouchTouch & TypeNon TouchOver 200 different models  results fragmentation???ResolutionsQVGA (240*320)QVGA landscape (320 * 240)WQVGA (240*400)Common development
  3. UI FrameworksFull TouchTouch & TypeNon TouchOver 200 different models  results fragmentation???ResolutionsQVGA (240*320)QVGA landscape (320 * 240)WQVGA (240*400)Common development
  4. Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
  5. Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
  6. Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
  7. Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
  8. Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.