Transcript of "Ux Meets Code Interaction Usability"
• Interaction design
• Designing for Maemo
• How to do design
• Usability evaluations
• What, why, how
Design the Interaction
Interaction is about the flow (and wow) related to
1. User’s perception of what is on the User interface
• Hardware and software UI
• Content and UI controls
2. User’s inputs to the system (or application)
• HW / SW, stylus, touch screen, navi-key, keyboard,...
3. User’s perception of what the system is doing
• System logic, background processes, ...
4. User’s perception of the system outputs
• System feedback: progress bars, notifications,...
• And so we get back to step 1...
Interaction design in Maemo
• Check the technology constraints on Maemo
• Screen size
• Screen orientation
• Touch or keyboard based input, or both
• Are you developing a mobile application or a
mobile web site?
• Will the application be for business or passing
Use platform style & components
• Check the available components and how to use
them in Maemo
• Hildon 2.2 UI Style Guide
• Hildon 2.2 Widget UI Specification
• Fremantle Master Layout Guide
• Maemo 5 Desktop Widget UI Guidelines
• Develop your own UI-components only when
there’s no alternative
Design the structure
• Document it as a navigation map of the
Note: Ideally this
is already a part
Task flow should utilize
the views/services of
Design it accordingly.
Navigation map of an imaginary Contacts application.
Detail each individual view
• Do design separately for each view
• Don’t forget the consistency
• What is the set of information that
fulfills the user’s needs and nothing
• Is there any functions that needs to
work in the view?
• Will there be some events that take
place in the view?
• Specify the touch interaction
• Maemo touch interaction
• Short press (“tap”)
• Long press
Less is more especially on
• Prioritisation of view items (data, features) is
• What is the core idea of your application?
• How often the user’s use the feature?
• The screen in Maemo device is still quite
• A crowded view is usually hard to understand
• outline the main purpose of the view
• Understand what is the “playground” of the
application, and respect the common/global
• Favor direct interaction
Keep it simple
• Minimize need for settings
• Don’t still remove them
• Reduce the need for confirmations
• Don’t forget the undo
• Can the information be saved
• Reduce the amount of other notes too
• Don’t forget to tell the user what’s happening
Graphic designer role
• Normally, the user interaction sketch pictures
are drawn in wireframe level, not with the final
• Graphic designers should evaluate the
• Especially the layout (=object sizes and margins)
• It is important to have the interaction designer
and graphic designer work closely together
Interaction Design + Graphical Design = Final UI
• End users should be involved at every stage
of the development
• Use paper prototypes before starting to
implement the application or service.
• Work iteratively
• Start from big picture and continue to smaller
• After each iteration involve real users.
• Remember to check you haven’t forgotten the
initial vision from concepting or benchmarking.
• Hand drawn sketches
• Quick reviews
• Encourage experimentation and honest critique
• Annotated wireframes
• Describe the functional elements
• Elements are explained
• Annotations enables the wireframe to be
• High fidelity wireframes
• Includes images, colors, fonts well thought
The line between high fidelity wireframe
and functional prototype is a thin one.
Balance between details and big picture
• The flow is the most important aspect of interaction design.
• Main use cases needs to be fluently executable – how many steps are there?
• Small details have huge impact on user experience.
• Terms, localization, colors, aesthetic…
• Most of the users try to use the
devices “the right way”
• Only small amount of people will try to
intentionally misuse the application
• Don’t waste time for corner cases.
• Agree the level of detail done in the interaction design phase.
Most important tip of all
• Remember that the Maemo device is a
• What happens to your application when
someone calls to the phone call?
• Is the still user able to check messages when
they’re using your app?
• Is the user easily able to switch to phone
functionalities from your application?
Some Mobile UI Guidelines
Forum Nokia http://www.forum.nokia.com/
dotMobi Mobile Web http://mobiforge.com/designing/blog/
Developers Guide web-developers-guide-released
Sources for UI Design patterns
• General UI design patterns can simply be called "best practices". They are the
pure version of user interface design patterns, and apply to a wide variety of
applications and across platforms.
• Example sources of general UI design patterns include
• http://wiki.forum.nokia.com/index.php/Category:Mobile_Design_Patterns ‘Design
• http://www.usability.gov/pdfs/guidelines.html ‘Research Based Guidelines’
• http://www.welie.com ‘Patterns in Interaction Design’
• http://designinginterfaces.com/ ‘Patterns by Jenifer Tidwell’
• http://ui-patterns.com ‘Patterns by Anders Toxboe’
• http://patterntap.com ‘Pattern Tap’
• http://quince.infragistics.com/ ‘UX Patterns Explorer’
• Note: web-links are subject to change at any given minute…
• The evaluations can be done in any phase of the product.
• The evaluations always base on the target user groups and their needs.
• Evaluations give second opinions about the product.
• Testing normally concentrates on finding software bugs.
• Those have huge impact on usability as well.
• The usability can also be tested or evaluated to get better products.
UX Evaluation Method examples
SAY DO (USE)
• Interviews • Usability testing
• Focus groups • Observation
• Surveys • Shadowing
• Contextual interviews • Participatory observation
• Artifact interviews • Contextual inquiry
• Field testing
• Participatory design
• Mood boards
• Moving with magic thing diary
UX Evaluation: Make a mix
• An expert evaluation and a usability test can
be used as complementary methods
• An expert evaluation require less time and
preparation than a usability test
• Expert evaluations are recommended before
usability tests in order to support designing
the test tasks
• A satisfaction questionnaire can be
combined with a usability test
What do you need for usability study?
• Usually usability studies are done by professionals.
• Developers can still use for example heuristics evaluations
• The heuristics can also be used as design guidelines.
• Now a days there’s also mobile heuristics which can be used instead of Nielsen’s
• Forum Nokia also offers a User Experience Evaluation Model for you to use
when checking your application against heuristics.
• If you want experts to do it, then purchase an evaluation for your app at
For more information
• Design of Everyday Things, Donald Norman (1990) ISBN 0-262-64037-6
• Emotional Design, Donald Norman, (2004) ISBN 0-465-05136-7
• Usability Engineering, Jakob Nielsen (1994) ISBN 0-125-18406-9
• Web Browsing on Mobile Phones - Characteristics of User Experience. Virpi Roto, Doctoral
dissertation, TKK Dissertations 49, Helsinki University of Technology, Finland (2006) ISBN
• User Experience Elements and Brand Promise Virpi Roto, V, Rautava, M.:. International
Engagability & Design Conference (Idec4), in conjunction with NordiCHI’08 conference. October 19,
2008, Lund, Sweden (2008)
• User Experience from Product Creation Perspective. Virpi Roto, Towards a UX Manifesto
workshop, in conjunction with HCI 2007, Lancaster, UK. (2007)
• Usability Inspection Methods, chapter Heuristic evaluation, Jakob Nielsen (1994b) ISBN
• Usability testing of mobile services and applications – benefits and drawbacks of lab and
field study. Kaikkonen, A, Kekäläinen, A., Cancar, M., Kallio, T., Kankainen, A. (2008).. In Lumsden, J.,
(Ed.) Handbook of Research on User Interface Design and Evaluation for Mobile Technology.
Information Science Reference, 897-909
Creative Commons - disclaimer
UX Driven Development For Mobile SW Developers
by Forum Nokia
is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0
United States License