HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping...

46
HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1 HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1 COURSE CS-364 (OPTIONAL) HUMAN – COMPUTER INTERACTION UNIVERSITY OF CRETE FACULTY OF SCIENCES AND ENGINEERING COMPUTER SCIENCE DEPARTMENT

Transcript of HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping...

Page 1: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1

COURSE CS-364 (OPTIONAL)

HUMAN – COMPUTER INTERACTION

UNIVERSITY OF CRETE

FACULTY OF SCIENCES AND ENGINEERING

COMPUTER SCIENCE DEPARTMENT

Page 2: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

What is a prototype?

a concrete representation of part or all of an interactive system

it is primarily a design activity, although ▪ we use software engineering

▪ we use scientific methods to study the effectiveness of particular designs

Prototypes both inform the design process and help designers select the best solution

Slide 2CS-364: Human – Computer Interaction

Page 3: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

A prototype can be anything from a paper-based storyboard through to a complex piece of software, and from a cardboard mockup to a molded or pressed piece of metal For example, when the idea for the

PalmPilot was being developed, Jeff Hawkins (founder of the company) carved up a piece of wood about the size and shape of the device he had imagined▪ He used to carry this piece of wood

around with him and pretend to enter information into it, just to see what it would be like to own such a device

▪ This is an example of a very simple (some might even say bizarre) prototype, but it served its purpose of simulating scenarios of use

Slide 3CS-364: Human – Computer Interaction

Page 4: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Advances in 3D printer technologies, coupled with reducing prices, have increased their use in design

It is now possible to take a 3D model from a software package and print a prototype

Even soft toys and chocolate may be ‘printed’ in this way

Slide 4CS-364: Human – Computer Interaction

Page 5: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

“Users can't tell you what they want, but when they see something and get to use it, they soon know what they don't want”

Prototypes: are useful when discussing or evaluating ideas with stakeholders

are a communication device among team members

are an effective way for designers to explore design ideas

encourage reflection in design

Nobody gets it right at the first time

Conventional approaches tend to force a commitment to large amounts of design detail without any means for visualising the product until it is too late to make significant changes

Slide 5CS-364: Human – Computer Interaction

Page 6: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Automobile makers, architects and sculptors make models

Circuit designers user ‘bread boards’

Aircraft designers test “mock-ups”

Artists experiment with working sketches

Alfred Hitchcock used a technique for developing and refining the plots of his movies Hitchcock would tell the stories at

cocktail parties and observe reactions of his listeners. He would experiment with various sequences and mechanisms for revealing the story line. Refinement of the story was based on listener reactions as an evaluation criterion

Slide 6CS-364: Human – Computer Interaction

Page 7: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Users can be involved in testing design ideas by using prototypes

Developing prototypes is an integral part of iterative user-centred design because it enables designers to try out their ideas with users and to gather feedback

Slide 7CS-364: Human – Computer Interaction

Page 8: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Traditionally, involving users in system development has been fraught with problems because:

users often lack the ability to imagine the ramifications of design decisions

users are often unable to comment on technical design documents

providing a complete, consistent and readable representation of user interaction was virtually impossible

Slide 8CS-364: Human – Computer Interaction

Page 9: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Prototyping has grown out of the realisation that:

Requirements frequently do not become apparent until a system is in use

Specifications cannot be completed until during the construction process

Users and developers must learn from each other

Computer specialists are being increasingly assigned to work in user departments

Slide 9CS-364: Human – Computer Interaction

Page 10: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Prototyping resolves uncertainty about how well a design suits users’ needs

It helps designers to make decisions by eliciting information from users on:

the necessary functionality of the system

operation sequences

user support needs

required representations

Look ‘n’ Feel of the interface

Slide 10CS-364: Human – Computer Interaction

Page 11: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Representation describes the form of the prototype

e.g., sets of paper sketches (offline prototypes) or computer simulations (online prototypes)

Precision describes the level of detail at which the prototype is to be evaluated

e.g., informal and rough or highly polished

Interactivity describes the extent to which the user can actually interact with the prototype

e.g., watch only or fully interactive

Evolution describes the expected life cycle of the prototype

e.g., throw away or iterative

Slide 11CS-364: Human – Computer Interaction

Page 12: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

We distinguish between two forms of representation: offline and online

Offline prototypes (also called paper prototypes)

They include paper sketches, illustrated storyboards, cardboard mock-ups and videos

They are created quickly, usually in the early stages of design

They are usually thrown away when they have served their purpose

Slide 12CS-364: Human – Computer Interaction

Page 13: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Online prototypes (also called software prototypes) They include computer animations, interactive video

presentations, programs written with scripting languages, and applications developed with interface builders

The cost of producing online prototypes is usually higher and may require skilled programmers to implement advanced interaction techniques

Software prototypes are usually more effective in the later stages of design, when the basic design strategy has been decided

Slide 13CS-364: Human – Computer Interaction

Page 14: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Offline prototypes:Mock-up of a handheld display with carrying handle

Slide 14CS-364: Human – Computer Interaction

Page 15: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Slide 15CS-364: Human – Computer Interaction

Page 16: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Precision refers to the relevance of details with respect to the purpose of the prototype

For example, when sketching a dialogue box, the designer specifies its size, the positions of each field and the titles of each label. Not all these details are relevant to the goal of the prototype, however. It may be necessary to show where the labels are, but too early to choose the text

In literature the terms low fidelity and high fidelity are used

Slide 16CS-364: Human – Computer Interaction

Page 17: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

High fidelity prototyping

prototyping through a medium, such as video, which resembles as closely as possible the final interface

the product appears very polished and aesthetically pleasing

Low fidelity prototyping

Involves the use of materials that are further away from the final version and that tend to be cheaper and faster to develop

Slide 17CS-364: Human – Computer Interaction

Page 18: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Low-fidelity prototype

High-fidelity prototypeRevised high-fidelity

Prototype

Slide 18CS-364: Human – Computer Interaction

Page 19: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

A critical role for an interactive system prototype is to illustrate how the user will interact with the system

This may seem more natural with online prototypes, however in fact it is often easier to explore different interaction strategies with offline prototypes

Interactivity and precision are orthogonal dimensions

One can create an imprecise prototype that is highly interactive, ▪ E.g., a series of paper screen images in which one person acts as the

user and the other plays the system

Or one may create a precise but non-interactive prototype▪ E.g., a detailed animation that shows feedback from a specific action

by a user

Slide 19CS-364: Human – Computer Interaction

Page 20: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Chauffeured prototyping Involves the user watching while another person, usually a member of the

development team, ‘drives’ the system

It is a way to test whether the interface meets the user’s needs without the user actually having to carry out low level actions with the system

This may appear to contradict the intentions behind involving the user, but it can be useful for confirming, for example, the sequence of actions needed to perform a task

Wizard of Oz prototyping Involves a third party, but the user is unaware of it

The user interacts with the screen, but instead of a piece of software responding to the user’s requests, a developer is sitting at another screen answering the queries and responding to the real user

This type of prototyping is likely to be conducted early in development to gain an understanding of the user’s expectations

Slide 20CS-364: Human – Computer Interaction

Page 21: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Prototypes can support different levels of interaction

Fixed prototypes, such as video clips or precomputed animations, are noninteractive. They are often used to illustrate or test scenarios

Fixed-path prototypes support limited interaction. They are effective with scenarios and can also be used for horizontal and task-based prototypes

Open prototypes support large sets of interactions. Such prototypes work like the real system, with some limitations. They usually cover only part of the system and have limited error-handling or reduced performance relative to that of the final system

Slide 21CS-364: Human – Computer Interaction

Page 22: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Prototypes have different life spans

Rapid prototypes are created for a specific purpose and then thrown away

Iterative prototypes evolve, either to work out some details (increasing precision) or to explore various alternatives

Evolutionary prototypes are a special case of iterative prototypes in which the prototype evolves into part of the final system

A combined approach is advocated, beginning with rapid prototypes and then using iterative or evolutionary prototypes according to the needs of the project

Slide 22CS-364: Human – Computer Interaction

Page 23: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Each type of prototype has advantages and disadvantages

Low fidelity versus high fidelity prototypes should be seen as an either / or choice

Probably both will have to be implemented

Many designers work their way through the continuum, starting with rough sketches, moving to more finished paper prototypes or to computer-drawn screen images, and then to higher fidelity prototypes

Slide 23CS-364: Human – Computer Interaction

Page 24: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Cost little to produce

Are fast and easy to create and to change and they lend themselves to easy creation of alternatives

Require only tools everyone knows how to use

Work well to show “proof of concept” and to explore metaphors

Allow everyone on the team to participate in creating the prototype

May encourage more suggestions because they seem more changeable

Slide 24CS-364: Human – Computer Interaction

Page 25: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

They usually only show some of the final functionality

What is sketched may not be feasible in the final technology

Eventually they will be thrown away

They require a human facilitator to mimic what the computer will do

The paper versions may lack “face validity” to users, that is, they may not be taken seriously enough

Slide 25CS-364: Human – Computer Interaction

Page 26: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

They are usually created with specialized tools like BalsamiqMockups or Justinmind but also Powerpoint or a visual programming language GUI toolkit

They require knowledge of the computer tool, but many more people who take on design roles, are familiar with slide-making tools like Powerpoint than are familiar with programming tools like Visual Basic and Smalltalk

Intermediate-fidelity prototypes have the advantage that users can manipulate them online

But, they are not as fast or cheap to create as paper prototypes, and sometimes it might be required to sketch out first, before moving to the computer

Slide 26CS-364: Human – Computer Interaction

Page 27: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Users can work with them directly

They often cover more tasks or functions than low-fidelity prototypes

They look and feel more like the final product

If done in a tool that feeds directly into code, they show what is feasible in the final product

They can be used by marketing and sales as demonstrations of the product

Slide 27CS-364: Human – Computer Interaction

Page 28: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

They are more expensive to build

They are more time-consuming to build

They require knowledge of the prototyping tool

They may raise unrealistic customer expectations of how soon they can have the product

Slide 28CS-364: Human – Computer Interaction

Page 29: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Their purpose is to develop an entire layer of the design at the same time

They are useful to get an overall picture of the system from the user’s perspective and address issues such as consistency, coverage and redundancy

They can be build without creating any of the underlying functionality

They can begin with rapid prototypes and progress through to working code

Slide 29CS-364: Human – Computer Interaction

Page 30: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Their purpose is to ensure that the designer can implement the full, working system from the UI layer down to the underlying system layer

They are often built to assess the feasibility of a feature described in a horizontal, task-oriented, or scenario-based prototype

They are generally high-precision, software prototypes

They are usually thrown away, because they are generally created early in the project and focus on only one design question

Slide 30CS-364: Human – Computer Interaction

Page 31: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

They are organized as a series of tasks

both designers and users can test each task independently

They include only the functions necessary to implement the specified set of tasks

They combine the breadth of horizontal prototypes with the depth of vertical prototypes

Depending on the goal of the prototype, both offline and online representations can be used

Slide 31CS-364: Human – Computer Interaction

Page 32: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

They are similar to task-oriented ones However they do not stress individual, independent tasks

but rather follow a more realistic scenario of how the system would be used in a real-world setting

Scenarios are stories that describe a sequence of events and how the user reacts

A good scenario includes both common and unusual situations and should explore patterns of activity over time

Slide 32CS-364: Human – Computer Interaction

Page 33: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Contain complete functionality, although with lower performance

Slide 33CS-364: Human – Computer Interaction

Page 34: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

User Interface features

Fu

nctio

na

lity

Verticalprototype Full system

Horizontal prototypeScenario

Slide 34CS-364: Human – Computer Interaction

Page 35: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Tools characteristics:

graphical construction of the interface

static or dynamic representation

interactive capability

discard or evolve

code generation

portability

Slide 35CS-364: Human – Computer Interaction

Page 36: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Easy to develop and modify screens

Support the type of interface you are developing

Support a variety of I/O devices

Easy to link screens and modify links

Allow calling external procedures and programs

Allow importing of text, graphics and other media

Easy to learn and use

Good support from vendor

Slide 36CS-364: Human – Computer Interaction

Page 37: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Slide 37CS-364: Human – Computer Interaction

Page 38: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Rapid iteration can be great

During design sessions or design reviews, changing as new ideas come up and as the team walks through the design you are building is certainly appropriate

However, once a design has reached a certain level of stability, be wary of churning

Don’t jump to conclusions and change the design for every user who comes to evaluate the system

Slide 38CS-364: Human – Computer Interaction

Page 39: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Iterate thoughtfully

Keep a log of changes and the rationale for the changes

Wait to see three or more users work with the prototype before you change it

Make sure that changes maintain the interface’s coherence and consistency

Consider how changes that you make in one place affect other screens and tasks

Slide 39CS-364: Human – Computer Interaction

Page 40: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Enables the visualisation of the system requirements

Enables inputs from users early in the development process

Enables an interactive development cycle

Facilitates the early testing

Provides a means for testing product-specific questions that cannot be answered by generic research and guidelines

Provides a tangible means of evaluating a given User Interface concept

Slide 40CS-364: Human – Computer Interaction

Page 41: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Provides a common reference point for all members of the design team, users and marketing

Allows the solicitation of meaningful feedback from users

Improves the quality and completeness of a product’s functional specification

Increases the probability that the product will perform as expected

Substantially reduces the total development cost for a product

Slide 41CS-364: Human – Computer Interaction

Page 42: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Limitations and constraints that apply to the real product can be ignored within the prototyping process

A prototype can be oversold, creating unrealistic expectations for actual product performance

The prototyping process may be difficult to manage and control

The “local maxima” phenomenon Assume you are lost and you want to reach high ground. The starting point as

well as the direction towards which you will move are important factors. For example, you start moving towards right, you find a hill which you climb and you believe that you have reached the highest point, while you have just found a local maxima. On your left there is a huge mountain which you did not find (wrong starting point & wrong direction)

Need a good starting point▪ If the starting point is not a good one the iterations will not yield a good design

Need to understand what is wrong

In order for prototyping to work there must be a thorough understanding of the problem, the context of use and the users

Slide 42CS-364: Human – Computer Interaction

Page 43: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Depending on your situation, your primary concerns may be any of the following:

the flow of screens for major tasks

the overall metaphor and how it will be carried out

the screen layout of the basic tasks screen

screen layouts for all the screens

alternative metaphors or other alternative design ideas

Slide 43CS-364: Human – Computer Interaction

Page 44: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

The general wisdom in the field is to start with the most critical and frequent task

You cannot do everything at once, and if you allow yourself to think of every variation and minor task from the beginning, you may be unable to move ahead

Of course, since minor tasks and variations on the tasks, as well as the peripheral tasks that connect your application to other parts of a workflow, must be part of the product, they should eventually be part of the prototype

Slide 44CS-364: Human – Computer Interaction

Page 45: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

A prototype is a concrete representation of part or all of an interactive system

Prototypes both inform the design process and help designers select the bestsolution

Developing prototypes is an integral part of iterative user-centred design because itenables designers to try out their ideas with users and to gather feedback

Why prototype

Prototyping saves money

Prototyping is concrete

Prototyping fosters alternatives and iterations

Prototyping allows users to be actively involved at the design phase

Problems of prototyping

Limitations and constraints of the real product can be ignored within the prototypingprocess

A prototype can be oversold, creating unrealistic expectations for actual productperformance

The prototyping process may be difficult to manage and control

Slide 45CS-364: Human – Computer Interaction

Page 46: HUMAN COMPUTER INTERACTIONhy364/files/lectures/Prototyping.pdf · High fidelity prototyping prototyping through a medium, such as video, which resembles as closely as possible the

Slide 46CS-364: Human – Computer Interaction