Presentation slides from the Maemo Summit 2009 by Annu-Maaria Nivala, Project Manager, User Experience, Digia.

1. UI design of Maemo 5 apps
Annu-Maaria Nivala
Project Manager, User Experience
Digia Plc.
Maemo Summit 2009

2. Digia in brief
× Delivers information and
communication technology
solutions worldwide
» HQ in Helsinki
» Offices in Finland, China, Estonia, Sweden and Russia
» Employees: 1400 professionals
× Focused market segments:
» Finance and Insurance
» ICT Services
» Manufacturing
» Mobile Industry
» Private Services
» Public Services
» Trade

3. Digia’s UE competence in Maemo
× User Experience (UE) team within Digia
» Since 2001
» 40 interaction designers, graphic designers, prototyping engineers,
usability specialists
× Several UE projects within Maemo 5
» Concept design, UI specification, graphic design, usability testing,
Flash prototyping
» Co-operation with Nokia’s Maemo Stars
» part of the support was Digia’s UE support

4. It’s all about users
× Who are they?
× What is their knowledge and their background when
using the application?
× What are their tasks, what do they want to do with the
application?
× In which type of situation will they use the application?

5. Less is more
× Do not try to answer to all of the mobile user needs
» What is the core idea of your application?
» Ask yourself: do the users really need this feature?
OM Weather

6. Less is more

7. Keep it simple
× Minimize the need for settings
× Allow users to step back with their actions
» Do not ask ”Do you really want to quit?”
× Save the information automatically
» Do not ask ”Do you really want to save the changes?”
× No split views, no panes, no tabs
» Use simple hierarchy: view and subview

8. View and subview

9. Easy interaction is valuable
× Reduce
» Number of information messages
» Information banners
» Unnecessary error notifications
× Support direct interaction
» Pointing your finger to a place where you want to go takes you there
quickly and directly
» Avoid ”double taps” or ”long taps’ in basic navigation
» you may use them as shortcuts to the advanced users

10. Easy interaction

11. It is a phone after all!
× Do not block the phone features
» Phone calls, text messages etc. should work

12. Design for finger-only
× User must never have to change between the stylus
and finger when using the application
eCoach

13. Navigation is a key issue
× Support quick navigation
» No ’Cancel’, ’OK’, ’Close’, ’Back’ buttons
» use tapping outside dialog
» use Back arrow in right upper corner
» Design clear hierarchy
» ‘tree navigation’

14. Let me personalize if I want to!
× Support two types of users
» Basic users
» ”Make things easy for me”
» ”Do not make me to do any settings!”
» Advanced users
» “Give me shortcuts”
» ”Let me decide what do I want to see”
» ”Provide me with the choices incase I’d like to do settings or
personalise applications”
» e.g. a customisable desktop

15. Please, tell me what’s going on
× User must know all the time
» What is the application doing?
» When it’ll end doing the thing it is doing?
× Use progress indicators to show that a process is ongoing
» E.g. when the device is busy with downloading, rendering, etc.
» Avoid progress banners
» especially if it makes a poor guess about the time left

16. No animation for the sake of animation
× A fancy animation may be nice at first
» But it may get annoying after a while…

17. Involve users
× Do not design for the other application developers
» To design a successful application, think about the “ordinary users”, not
the geeks
× Show your design to users
» Ask people to use the early versions of your design
» Learn from what do they say and experience
» Redesign and iterate
× Users are the ones who’ll decide if your application is to
become a success or not

18. How to go further
× Involve Maemo community
» An open-source platform enables the Maemo community to freely
modify and continually develop software as part of a shared goal
» This brings added value to all Maemo users
× More information
» forum.nokia.com: UI style guide, Master layout guide and
Widget UI specification
» wiki.maemo.org: Human Interface Guidelines and Graphical UI Tutorial
» http://wiki.maemo.org/Documentation/Maemo_5_Developer_Guide

19. Thank you!
annu-maaria.nivala@digia.com