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
no profile picture user

  • Login to see the comments

Show More

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

×