human computer interactionhy364/files/lectures/prototyping.pdf · high fidelity prototyping...
Post on 06-Jul-2020
7 Views
Preview:
TRANSCRIPT
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
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
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
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
“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
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
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
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
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
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
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
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
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
Offline prototypes:Mock-up of a handheld display with carrying handle
Slide 14CS-364: Human – Computer Interaction
Slide 15CS-364: Human – Computer Interaction
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
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
Low-fidelity prototype
High-fidelity prototypeRevised high-fidelity
Prototype
Slide 18CS-364: Human – Computer Interaction
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Contain complete functionality, although with lower performance
Slide 33CS-364: Human – Computer Interaction
User Interface features
Fu
nctio
na
lity
Verticalprototype Full system
Horizontal prototypeScenario
Slide 34CS-364: Human – Computer Interaction
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
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
Slide 37CS-364: Human – Computer Interaction
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
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
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
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
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
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
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
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
Slide 46CS-364: Human – Computer Interaction
top related