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,738 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
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,738
On SlideShare
0
From Embeds
0
Number of Embeds
1,954
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

×