chapter 5: design - hiof.no · pdf filechapter 5: design. copyright © 2008 pearson...

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

The Resonant InterfaceHCI Foundations for Interaction Design

First Edition

by Steven Heim

Chapter 5:Design

1-2Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

Important chapter

• Explains how to experiment with designs based ondata that you have got

• Suggests various prototyping strategies, which areassociated (loosely) with evaluation techniques that (atthis stage) does not necessarily involve users– You are the experts, you can start initial assessement, which

is also planning the next “deeper” testing– Keep it “implementation independent”

• In my view, in interaction design do testing! Thismeans trying to prototype as well.– How much effort is needed to get a working program?


Chapter 5 Design

• Technology Myopia• Conceptual Design• Physical Design• Evaluation

• Interface Design Standards


Technology Myopia (=short sightedness)

• Interaction designs must be sensitive to:– Human-human communication– Implicit Knowledge– Non-technical aspects of work

Integrate technology and human activities carefully


Conceptual Design

• Conceptual design involves– Structuring the information space– Creating of alternative solutions– Determining which design concept to pursue


Conceptual Design

• The tools involved in conceptual design:– Brainstorming– Card sort– Semantic networks– Personas– Scenarios– Flowcharts– Cognitive walkthroughs– Use cases


Conceptual Design - Brainstorming

• Team activity– Stream-of-consciousness– Semantic networks– Storyboarding

• Brainstorming sessions generate a lot ofmaterial that must be filtered and organized


Conceptual Design – Card Sort

Card Sorting can be used to discover user-centered groupings

• Card sorting can be used to organize the informationcollected in the discovery phase

• Used to define groupings for menus, controls and Webpage content

• Used to generate labels for menus, buttons andnavigation links



• Result of a card sort



• Advantages of card sorting sessions:– They are quick and easy to perform.– They can be done before any preliminary designs

have been made.– They will let you know how people organize

information.– They will expose underlying structures.



• Disadvantages of card sorting sessions:– They only involve the elements that you have

written on the cards.– They suggest solutions that imply structures.– They become difficult to navigate with more

categories.


Conceptual Design – Semantic Network

• A semantic network is a web of concepts thatare linked through association.



• Advantages of semantic networks:– They allow an easy way to explore the problem

space.– They provide a way to create clusters of related

elements.– They provide a graphical view of the problem

space.– They resonate with the ways in which people

process information.



• Disadvantages of semantic networks:– They require knowledge of the problem space.– They can lead beyond the problem space.– There is no formal semantics for defining symbol

meaning.


Conceptual Design – Personas

• Personas are archetypes of actual users, definedby the user’s goals and attributes.

“Personas are derived from patterns observedduring interviews with and observations ofusers and potential user (and sometimescustomers) of a product”

(Cooper & Reimann, 2003, 67)



• A persona is created by identifying the primarystakeholder and creating an identity based onthe stakeholder profiles and other collectionactivities such as interviews and surveys.

• A persona is a detailed description completewith as many personally identifying attributesas necessary to make it come to life.



Personas should be a strict reflection of the informationderived from the collection activities.

• If you cannot point to a direct one-to-one relation withan observed user behavior, then that particular personacharacteristic is either unnecessary or, more important,erroneous and will lead to incorrect design decisions.



• Advantages of personas:– They are quick and easy to create.– They provide a consistent model for all team members.– They are easy to use with other design methods.– They make the user real in the mind of the designer.

• Disadvantages of personas:– They can be difficult to create if the target audience is

international.– Having too many personas will make the work difficult.– There is a risk of incorporating unsupported designer

assumptions.


Conceptual Design – Scenarios, Flowcharts, andCognitive Walkthroughs

• Scenarios– A description of a typical task– It describes

• The basic goal• The conditions that exist at the beginning of the task• The activities in which the persona will engage• The outcomes of those activities

Scenarios afford a rich picture of the user’s tasks



• Flowcharts can be:– Simple network diagrams that identify the pages of

a Web site and the navigational links between them– Sophisticated diagrams that capture conditional

junctures and computational processes



• Cognitive walkthrough - the evaluator followsthe various scenarios using the flowcharts or thelow-fidelity prototypes

• The evaluator takes the part of the primarystakeholder and tries to accomplish thatstakeholder’s various tasks


Physical Design

• The physical design involves:– What it will look like– What components it will require– How the screens will be laid out

• We use the following tools during this phase:– Low-fidelity prototypes– Evaluations– Wireframes– Functional prototypes


Physical Design - Low-fidelity prototypes

• Nielsen distinguishes between two types ofprototypes– Horizontal– Vertical



• The three main criteria for low-fidelity prototypes:– Easy and inexpensive to make.– Flexible enough to be constantly changed and rearranged.– Complete enough to yield useful feedback about specific

design questions.



People are more comfortable criticizing paper prototypes

• You will have to make some decisions before you begin:– What feedback do you need at this point in the design process?– How much of the design should you prototype?– Should you cover all of the areas but without great detail (breadth vs.

depth)?– Should you cover one area in great detail?

• These questions will help you to define the scope of theprototype and focus on what you want to accomplish



• Advantages of paper prototypes:– They can be used early and often.– They are inexpensive and easy to create.– They make design ideas visual.– No special knowledge is required; all team members can

create them.

• Disadvantage of paper prototypes:– They are not interactive.– They cannot be used to calculate response timings.– They do not deal with interface issues such as color or font

size.


Evaluation

Begin evaluations early in the design process.

• Evaluation is an integral part of the development process andcan take the form of an informal walkthrough or a morestructured heuristic evaluation.

• Formal usability testing can begin once a prototype has beendeveloped.

• Discuss some of the benefits of starting the evaluation processearly in the design phase


Evaluation – Heuristic Evaluation

• Heuristic evaluations are performed by usabilityexperts using a predetermined set of criteria designedto measure the usability of a proposed design.

• The evaluator follows a scenario through the designand tests each step against the heuristic criteria.

• The evaluator makes recommendations to the designteam either through a written document or during ateam meeting.


Evaluation – Nielsen’s Heuristics

• In collaboration with Rolf Molich, JakobNielsen developed a set of 10 heuristics forinterface design.


Heristics (one of many sets)

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom


Heuristics

1. Consistency and standards

2. Error prevention

3. Recognition rather than recall


Heuristics

1.Flexibility and efficiency of use

2. Aesthetic and minimalist design

3. Help users recognize, diagnose, and recoverfrom errors


Heuristics

1.Help and documentation• Even though it is better if the system can be used

without documentation, it may be necessary toprovide help and documentation. Any suchinformation should be easy to search, focused onthe user's task, list concrete steps to be carried out,and not be too large.


More work on heuristics later

• This set based on an analysis of 249 usabilityproblems (more about this next week!).

http://www.useit.com/papers/heuristic/heuristic_list.html

Assignment: Take any familiar function from yourfavourite text editor and show how it complies, or not,with each of the heuristics


Physical Design Cont. - Wireframes

• Wireframes define:– Basic page layout– Screen components

• Wireframes are developed from flowcharts and paperprototypes

• They are basically more evolved paper prototypes thatinclude detailed information about the interfaceelements


Physical Design Cont. - Wireframes

Wireframes help to create template layouts that can be used toimpose a consistent structure throughout the interface


Physical Design Cont. – Wireframes

• Web Formats– Web sites from different domains use layouts

particular to that domain

Use page layouts that are common to the domain

Use flexible design for Web pages


Evaluation – Functional Prototypes

• Functional prototypes are interactive prototypes thatrepresent various degrees of functionality– They can either be horizontal or vertical

• Functioning prototypes can be created using RADenvironments, such as:– Microsoft– Visual Studio– Adobe

• Flash• Dreamweaver• Director


Interface Design Standards

• These tools promote standards-based designsthat have a consistent look and feel– Graphical libraries– User interface toolkits– Visual interface builders– Web development tools

• Working in a standardized environmentincreases efficiency and promotes learning(Cooper & Reimann, 2003)



• Shneiderman and Plaisant (2005, 185) identified the followingbenefits from the use of high-level software tools

• User Interface Independence– They separate interface design from internals.– They enable multiple user interface strategies.– They enable multiple-platform support.– The establish the role of the user interface architect.– They enforce standards.

• Methodology and Notation– They facilitate the development of design procedures.– They help in finding ways to talk about design.– They create project management.



• Rapid Prototyping– The make it possible to try out ideas very early.– They make it possible to test, revise, test, revise, . . . .– They engage end users—managers and customers.

• Software Support– They increase productivity.– They offer constraint and consistency checks.– They facilitate team approaches.– They ease maintenance.

chapter 5: design - hiof.no · pdf filechapter 5: design. copyright © 2008 pearson...

Documents