Slides from the Interaction Design and Usability day at the UX Meets Code track in Barcelona, Spain 4-6 December 2009

1. Interaction Design

2. Contents
• Interaction design
• Designing for Maemo
• How to do design
• Tips
• Usability evaluations
• What, why, how
2

3. 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...
3

4. Interaction design in Maemo
• Check the technology constraints on Maemo
device
• 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
time?
4

5. 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
5

6. Design the structure
• Document it as a navigation map of the
application’s views
Note: Ideally this
is already a part
of the
application’s UI
concept.
Task flow should utilize
the views/services of
other applications,
when available.
Design it accordingly.
Navigation map of an imaginary Contacts application.
6

7. 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
more?
• Is there any functions that needs to
work in the view?
• Will there be some events that take
place in the view?
7

8. Touch interaction
• Specify the touch interaction
• Area
• Direction
• Gestures
• Maemo touch interaction
• Short press (“tap”)
• Long press
• Flick
• Pan
8

9. Less is more especially on
mobile UIs.
• Prioritisation of view items (data, features) is
crucial
• What is the core idea of your application?
• How often the user’s use the feature?
• The screen in Maemo device is still quite
small
• 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
area
• Favor direct interaction
9

10. 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
automatically?
• Reduce the amount of other notes too
• Don’t forget to tell the user what’s happening
10

11. Graphic designer role
• Normally, the user interaction sketch pictures
are drawn in wireframe level, not with the final
graphics
• Graphic designers should evaluate the
wireframes
• 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
11

12. Design reviews
• 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
details.
• After each iteration involve real users.
• Remember to check you haven’t forgotten the
initial vision from concepting or benchmarking.
Design Evaluate
12

13. Design sketches
• 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
understood
• High fidelity wireframes
• Includes images, colors, fonts well thought
The line between high fidelity wireframe
and functional prototype is a thin one.
13

14. 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.
14

15. Most important tip of all
• Remember that the Maemo device is a
phone.
• 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?
15

16. Some Mobile UI Guidelines
Guidelines Links
Forum Nokia http://www.forum.nokia.com/
(Maemo) Tools_Docs_and_Code/Documentation/
Maemo.xhtml
dotMobi Mobile Web http://mobiforge.com/designing/blog/
Developers Guide web-developers-guide-released
16

17. 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
patterns’
• 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…
17

18. Usability Evaluation

19. Usability evaluations
• 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.
19

20. 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
MAKE
• Betalabs
• Participatory design
• Mood boards
• Moving with magic thing diary
• Probes
20

21. 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
21

22. 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
original heuristics.
• 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
forum.nokia.com/ux.
22

23. 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
951-22-8469-3
• 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)
• http://research.nokia.com/files/UXelements-v2.pdf
• 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
0-471-01877-5
• 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
23

24. 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
24

25. forum.nokia.com/ux
• 25