Create great UIs for budget phones

Download Create great UIs for budget phones

Post on 29-Jun-2015




0 download

Embed Size (px)


Contrary to popular belief, it is indeed possible to create great-looking UIs for apps that target very low-priced phones. This presentation shows you how to apply solid UX guidelines and application-design principles that work great even on very low-cost hardware. Juhani Haaparanta, principal interaction designer with Nokia in Tampere, Finland, explains how to design the right type of interaction architecture, apply the appropriate UI style, and add a twist of visual excellence to applications for budget phones. The resulting apps will deliver better user experience and thus better reviews, usage numbers, and return on investment.


<ul><li> 1. GREAT UI FOR A BUDGET PHONE?1</li></ul> <p> 2. There are over 1.5 billion Series 40 devicessold2 3. All of whichsupport JavaAn opportunity toobig to miss3 4. Better UX Better reviews Better usage numbers Better return on investment.4 5. Design Process5 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/storyboardsarchitecturespecifications Functionality Visual design Iteration and QA with Requirementsdirection software Concept design Detailed design ImplementationMore info: 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 customcomponents Uses platform UI Uses only platform components wherevercomponents Only some limitationspossiblefrom the platform Branding applied in the Custom interface for limits of platform UI Usually used by gamesfeatures that are notdesign guidelines possible with the platform UI components8 9. Selection of design approach influencesthe selection of UI developmentframeworkCustom Hybrid Platformapproach approach approachJAVA custom canvas LWUIT with some custom LWUIT componentscomponentsAll screen drawn pixel LCDUI components by pixel LCDUI with some customcomponents (morelimited customizationthan LWUIT)9 10. Targeting for multiple Series 40 UIdevices? 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 theactive item, touch and type and full touchdont Category bar in Full Touch Wider display gives more space to content Physical size of the screens may vary PPI differences among phones10 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 helpdesigners 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 provideguidelines for each UI frameworksupported under the Series 40platform Series 40 Full Touch Touch &amp; 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 Guidelines12 13. Essentials the overview on each UI Essential section always tellthe key functionality of the UXframework Layout properties How to open/close applications Event handling HW Key behavior Gestures These are crucial informationfor designers when startingtheir own application designprocess13 14. Patterns a glue that binds the UX as one UI Patterns explain the genericbehavioral patterns of theapplications in a certain UXframework Navigation models Content management Dialogs, menus and notification behavior Error handling Showing/filtering content Etc. UX patterns create the consistencybetween applications Application designers shouldntbreak the available patterns however, creating new patterns isallowed (with customimplementation)14 15. Components the bits which create thepatterns With readymade Java UI componentsthe application can be made closer tothe native UX easier than with creatingall the components custom LCDUI is the official Java UI frameworkin use, also LWUIT theme available forFull Touch UI Framework When creating custom components,make sure the application is styledconsistenly (no mixing of differentstyles within applications) Component stencils available in orderto make the design of view mockupseasier15 16. Interaction design - How to apply a proper interaction architecture to an application -16 17. Select the right navigation modelNote: Tab bar navigation models only supported in Series 40 Full Touch UI Framework17 18. Paint the overall picture of the application18 19. Explain the overall picture with key usecase flows/videos/prototypes/19 20. And key screen visualizations20 21. For most developers, a proper IA, coupleof key use cases and some key screenvisualizations are enough to get startedwith the development work and dive in tothe details.21 22. Your application has apersonality, let it show - With small tweaks to the visual design, your application may stand out from thecompetitors -22 23. Using a highlight color When choosing your applications highlight colour, consider aligning it with the primary colour of your brand to promote your brands presence and strengthen your applications 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 23Note: 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. 24Note: Customization requires custom implementation for Series 40, example image from N9 25. Use layouts creatively25 26. Pay attention todetails. Everypixel 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 wayto improve the UX is to raise bugs toothers and resolve your own bugs. Lots ofthose.28 29. Recap:&gt; Design Process&gt; Design Approach&gt; UI Frameworks and application style&gt; Interaction Architecture&gt; Visual tweaks&gt; Raise Bugs29 30. THANK YOU. KIITOS.Juhani.haaparanta@nokia.com30</p>