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.
Designing UI for Maemo 5
          Mox Soini
Design Process
Goal
 What ideas are kept,
What ideas are dropped
Cannot extrapolate, it’s like
hand-drawn curve
Changes happen at
varying speed
Final result is often
Unexpected
Maemo 5
Easily understandable

                             with Soul
       Simple                    – not too neutral




     ...
Reduced set of UI elements

•   The key in defining finger usability

•   The key in attaining UI consistency

•   Accelerat...
Compared to past
•   The UNIX philosophy – “do one thing and do it well".

•   Finger usage – Larger size of UI elements

...
UI Flow
Navigation Structure – Line
Accounts   Folders   Messages   Viewer




                                         Email
Navigation Structure – Summary
Music




           Video


Summary

          Internet
           Radio


                     Media Player
Navigation Structure – T-Bone
Month




Week     Event




Agenda



             Calendar
UI priorities


                                                 Main views
        Viewing content               Navigati...
Viewing content




      Manipulating content




Power use / shortcuts for content
There’s NO app for that



                          It’s a plugin!
VOIP services

                                     IM services
Sharing services
                      Plugins
   Media fil...
Contact list
            Profile
   Alarms                           Bluetooth

3G / Wlan
networking       Integration     ...
Keep in mind

•   Simplicity

•   Focus on key use cases

•   Fluent and seamless

•   Not cramming all in the same place
...
Thanks!
                            Designing UI for Maemo 5 – Mox Soini



Hildon 2.2 UI Style Guide   Hildon 2.2 Widget ...
Upcoming SlideShare
Loading in …5
×

Soini - Designing Ui For Maemo 5

5,941 views

Published on

Maemo Summit 2009 Presentation

"Designing UI for the Maemo 5"
by Mox Soini

Abstract:
How to make the applications work together as an integrated whole?

This talk will discuss the UI Design of the Maemo 5 product as an "application portfolio". Design patterns as well as application specific designs are presented, and the reasoning for the design decisions.

Design of the pre-installed applications in the Maemo 5 product is discussed, highlighting the UI flows, common user experience solutions and power user features. Throughout the application walk-through, the structure and "look and feel" of the applications is categorized, resulting in a conceptual design tool for 3rd party application designers and developers.

Published in: Design
  • Login to see the comments

Soini - Designing Ui For Maemo 5

  1. 1. Designing UI for Maemo 5 Mox Soini
  2. 2. Design Process
  3. 3. Goal What ideas are kept, What ideas are dropped
  4. 4. Cannot extrapolate, it’s like hand-drawn curve
  5. 5. Changes happen at varying speed
  6. 6. Final result is often Unexpected
  7. 7. Maemo 5
  8. 8. Easily understandable with Soul Simple – not too neutral Positive surprises Clean Delights
  9. 9. Reduced set of UI elements • The key in defining finger usability • The key in attaining UI consistency • Accelerate the design and development time (reduced complexity) • Avoiding customization where possible
  10. 10. Compared to past • The UNIX philosophy – “do one thing and do it well". • Finger usage – Larger size of UI elements • Removal of focus • Avoid dimming • Only few menu items UP ED h N it EA w at! • No tabs in dialogs ’S CL ow ss f IT – N % le 50
  11. 11. UI Flow
  12. 12. Navigation Structure – Line
  13. 13. Accounts Folders Messages Viewer Email
  14. 14. Navigation Structure – Summary
  15. 15. Music Video Summary Internet Radio Media Player
  16. 16. Navigation Structure – T-Bone
  17. 17. Month Week Event Agenda Calendar
  18. 18. UI priorities Main views Viewing content Navigation via content View menus Manipulating content Edit dialogs Edit Mode Views Power use / shortcuts for content Multiple selection Context Sensitive Menus
  19. 19. Viewing content Manipulating content Power use / shortcuts for content
  20. 20. There’s NO app for that It’s a plugin!
  21. 21. VOIP services IM services Sharing services Plugins Media filters Media formats OpenMax
  22. 22. Contact list Profile Alarms Bluetooth 3G / Wlan networking Integration Metadata Location Music / Video File Choosers playing Camera
  23. 23. Keep in mind • Simplicity • Focus on key use cases • Fluent and seamless • Not cramming all in the same place • Each view has it’s own purpose
  24. 24. Thanks! Designing UI for Maemo 5 – Mox Soini Hildon 2.2 UI Style Guide Hildon 2.2 Widget UI Specification Fremantle Master Layout Guide http://bit.ly/13P9Ou http://bit.ly/3o8ttP http://bit.ly/MhCb4

×