Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Create great UIs for budget phones

1,522 views

Published on

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.

Published in: Technology

Create great UIs for budget phones

  1. 1. GREAT UI FOR A BUDGET PHONE?1
  2. 2. There are over 1.5 billion Series 40 devices sold…2
  3. 3. … All of which support Java An opportunity too big to miss3
  4. 4. Better UX  Better reviews  Better usage numbers  Better return on investment.4
  5. 5. Design Process5
  6. 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. 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. 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 components8
  9. 9. Selection of design approach influencesthe selection of UI developmentframework 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. 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 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 phones10
  11. 11. UX Guidelines - A map that helps you to create a style for your application -11
  12. 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 Guidelines12
  13. 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 process13
  14. 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. 15. Components – the bits which create thepatterns• 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 easier15
  16. 16. Interaction design - How to apply a proper interaction architecture to an application -16
  17. 17. Select the right navigation modelNote: Tab bar navigation models only supported in Series 40 Full Touch UI Framework17
  18. 18. Paint the overall picture of the application18
  19. 19. Explain the overall picture with key usecase flows/videos/prototypes/…19
  20. 20. … And key screen visualizations20
  21. 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. 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. 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. 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. 25. Use layouts creatively25
  26. 26. Pay attention todetails. Everypixel counts.26
  27. 27. ”No detail is too small” - The basis for every great quality UI is an obsessive attention to the smallest design details -27
  28. 28. During the implementation, the only wayto improve the UX is to raise bugs toothers and resolve your own bugs. Lots ofthose.28
  29. 29. Recap:> Design Process> Design Approach> UI Frameworks and application style> Interaction Architecture> Visual tweaks> Raise Bugs29
  30. 30. THANK YOU. KIITOS. Juhani.haaparanta@nokia.com30

×