ux meets code interaction usability

25
Interaction Design

Upload: arabella-david

Post on 02-Nov-2014

2.081 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Ux Meets Code Interaction Usability

Interaction Design

Page 2: Ux Meets Code Interaction Usability

Contents

• Interaction design

•  Designing for Maemo

•  How to do design

•  Tips

• Usability evaluations

•  What, why, how

2

Page 3: Ux Meets Code Interaction Usability

Design the Interaction

3

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

Page 4: Ux Meets Code Interaction Usability

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

Page 5: Ux Meets Code Interaction Usability

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

Page 6: Ux Meets Code Interaction Usability

Design the structure

•  Document it as a navigation map of the application’s views

6

Navigation map of an imaginary Contacts application.

Task flow should utilize the views/services of other applications, when available. Design it accordingly.

Note: Ideally this is already a part of the application’s UI concept.

Page 7: Ux Meets Code Interaction Usability

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

Page 8: Ux Meets Code Interaction Usability

Touch interaction

• Specify the touch interaction • Area • Direction • Gestures

• Maemo touch interaction •  Short press (“tap”) •  Long press •  Flick •  Pan

8

Page 9: Ux Meets Code Interaction Usability

Less is more

•  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

especially on mobile UIs.

9

Page 10: Ux Meets Code Interaction Usability

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

Page 11: Ux Meets Code Interaction Usability

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

11

Interaction Design + Graphical Design = Final UI

Page 12: Ux Meets Code Interaction Usability

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.

12

Design Evaluate

Page 13: Ux Meets Code Interaction Usability

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

13

The line between high fidelity wireframe and functional prototype is a thin one.

Page 14: Ux Meets Code Interaction Usability

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

Page 15: Ux Meets Code Interaction Usability

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

Page 16: Ux Meets Code Interaction Usability

Some Mobile UI Guidelines

16

Guidelines Links

Forum Nokia (Maemo)

http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Maemo.xhtml

dotMobi Mobile Web Developers Guide

http://mobiforge.com/designing/blog/web-developers-guide-released

Page 17: Ux Meets Code Interaction Usability

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

Page 18: Ux Meets Code Interaction Usability

Usability Evaluation

Page 19: Ux Meets Code Interaction Usability

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

Page 20: Ux Meets Code Interaction Usability

MAKE •  Participatory design •  Mood boards •  Moving with magic thing diary •  Probes

DO (USE) •  Usability testing •  Observation •  Shadowing •  Participatory observation •  Contextual inquiry •  Field testing •  Betalabs

SAY •  Interviews •  Focus groups •  Surveys •  Contextual interviews •  Artifact interviews

UX Evaluation Method examples

20

Page 21: Ux Meets Code Interaction Usability

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

Page 22: Ux Meets Code Interaction Usability

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

Page 23: Ux Meets Code Interaction Usability

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

Page 24: Ux Meets Code Interaction Usability

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

Page 25: Ux Meets Code Interaction Usability

forum.nokia.com/ux

• 25