Download - Ui Design Of Maemo 5 Apps Digia
![Page 1: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/1.jpg)
UI design of Maemo 5 apps
Annu-Maaria NivalaProject Manager, User Experience
Digia Plc.
Maemo Summit 2009
![Page 2: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/2.jpg)
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
![Page 3: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/3.jpg)
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
![Page 4: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/4.jpg)
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?
![Page 5: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/5.jpg)
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
![Page 6: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/6.jpg)
Less is more
![Page 7: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/7.jpg)
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
![Page 8: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/8.jpg)
View and subview
![Page 9: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/9.jpg)
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
![Page 10: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/10.jpg)
Easy interaction
![Page 11: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/11.jpg)
It is a phone after all!
× Do not block the phone features» Phone calls, text messages etc. should work
![Page 12: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/12.jpg)
Design for finger-only
× User must never have to change between the stylus and finger when using the application
eCoach
![Page 13: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/13.jpg)
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’
![Page 14: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/14.jpg)
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
![Page 15: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/15.jpg)
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
![Page 16: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/16.jpg)
No animation for the sake of animation
× A fancy animation may be nice at first
» But it may get annoying after a while…
![Page 17: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/17.jpg)
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
![Page 18: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/18.jpg)
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
![Page 19: Ui Design Of Maemo 5 Apps Digia](https://reader036.vdocuments.mx/reader036/viewer/2022081400/55514597b4c905c6268b4d2f/html5/thumbnails/19.jpg)
Thank [email protected]