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 Slide 1
Create great UIs for budget phones Slide 2
Create great UIs for budget phones Slide 3

YouTube videos are no longer supported on SlideShare

View original on YouTube

Loading in …3
×
1 of 31

Create great UIs for budget phones

1

Share

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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 miss 3
  4. 4. Better UX  Better reviews  Better usage numbers  Better return on investment. 4
  5. 5. Design Process 5
  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 components 8
  9. 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. 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. 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 Guidelines 12
  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 process 13
  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 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. 16. Interaction design - How to apply a proper interaction architecture to an application - 16
  17. 17. Select the right navigation model Note: Tab bar navigation models only supported in Series 40 Full Touch UI Framework 17
  18. 18. Paint the overall picture of the application 18
  19. 19. Explain the overall picture with key use case flows/videos/prototypes/… 19
  20. 20. … And key screen visualizations 20
  21. 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. 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 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. 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
  25. 25. Use layouts creatively 25
  26. 26. Pay attention to details. Every pixel 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 way to improve the UX is to raise bugs to others and resolve your own bugs. Lots of those. 28
  29. 29. Recap: > Design Process > Design Approach > UI Frameworks and application style > Interaction Architecture > Visual tweaks > Raise Bugs 29
  30. 30. THANK YOU. KIITOS. Juhani.haaparanta@nokia.com 30

Editor's Notes

  • 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.
  • ×