Create great UIs for budget phones

1,354 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
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,354
On SlideShare
0
From Embeds
0
Number of Embeds
103
Actions
Shares
0
Downloads
58
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • UI FrameworksFull TouchTouch & TypeNon TouchOver 200 different models  results fragmentation???ResolutionsQVGA (240*320)QVGA landscape (320 * 240)WQVGA (240*400)Common development
  • UI FrameworksFull TouchTouch & TypeNon TouchOver 200 different models  results fragmentation???ResolutionsQVGA (240*320)QVGA landscape (320 * 240)WQVGA (240*400)Common development
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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

    ×