UI design of Maemo 5 apps

Annu-Maaria NivalaProject Manager, User Experience

Digia Plc.

Maemo Summit 2009

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

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

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?

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

Less is more

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

View and subview

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

Easy interaction

It is a phone after all!

× Do not block the phone features» Phone calls, text messages etc. should work

Design for finger-only

× User must never have to change between the stylus and finger when using the application

eCoach

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’

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

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

No animation for the sake of animation

× A fancy animation may be nice at first

» But it may get annoying after a while…

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

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

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