Prototype and Walkthrough

Research and References:

Use of research to support decision making (appropriate use of
citations and references) 利用研究支持决策(适当使用引文和参考文献)

Critical Discussion and Application:关键讨论和应用

To include
 storyboarding
 each screen purpose and strategy behind its design
 peer to peer evaluation (parallel design), participatory
design and their impact on the
design点对点评估平行设计参与式设计及其对设计的影响

? what

? how

? why

Interaction Design

Interaction Design is achieving goals within constraints .(Alan Dix, 2004) Interaction design
also is a process in which designers focus on creating engaging web interfaces with logical and
thought out behaviors and actions. Successful interactive design uses technology and principles
of good communication to create desired user experiences.

Figure Interaction design process

Prototyping
Prototyping is an activity that allows designers, entrepreneurs, and engineers to rapidly create
designs and evaluate how useful or successful those designs are. Essentially, prototyping is
rapidly creating a “rough draft” of a design idea that can be used to gather feedback. By testing
out different ideas with prototypes that to improve designs. The critical part of prototyping is
not the artifact itself, but the feedback receive, as this is what will inform next iteration (or
version) of the design.

Important of Prototype

Prototyping Techniques
Prototyping can be divided into low-fidelity prototyping, medium-fidelity prototyping and high-
fidelity prototyping. In some literature, it is only simply classified as low-fidelity prototyping
(also called Lo-Fi) and high-fidelity prototyping (also called Hi-Fi), where low-fidelity
prototyping is mainly about paper-based mock-up, and high-fidelity is mainly about
computer-based simulation. The determining factor in prototype fidelity is the degree to
which the prototype accurately represents the appearance and interaction of the product, not
the degree to which the code and other attributes invisible to the user are accurate. On this
web page, we will consider a fully-functioned prototype as a high-fidelity prototype. Other
prototypes will be divided into low-fidelity and medium-fidelity prototypes. We will focus on
the low-fidelity and medium-fidelity prototyping techniques. Medium-fidelity and high-fidelity
prototyping are discussed together on some attributes indicated as medium(high)-fidelity
prototyping.

Low-fidelity prototypes are quickly constructed to depict concepts, design alternatives, and
screen layouts, rather than to model the user interaction with a system. Low-fidelity
prototypes provide limited or no functionality. They are intended to demonstrate the general
look and the feel of the interface, but not the detail how the application operates. They are
created to communicate and exchange ideas with the users, but not to serve as a basis for
coding and testing. A facilitator who knows the application thoroughly is generally needed to
demonstrate the prototype to the users.

In contrast, high-fidelity prototypes are fully interactive, simulating much of the functionality
in the final product. Users can operate on the prototype, or even perform some real tasks
with it. High-fidelity prototypes are not as quick and easy to create as low-fidelity prototypes,
but they faithfully represent the interface to be implemented in the product. Medium-fidelity
prototypes partially simulate the system interaction and functionality.

Figure 1 shows the transition of techniques from low-fidelity prototyping to high-fidelity

prototyping. However, the fidelity degree of each technique may vary in diffirent practice. All
of the techniques except the fully-functioned high-fidelity prototyping will be discussed on
this web page.
Figure :Comparison of Low-fidelity and Medium-fidelity Prototyping

Low-fidelity prototyping

Sketches
Sketching techniques, a kind of visual brainstorming, can be useful for exploring all kinds of
design ideas. After producing initial sketches the best ideas can be further developed by
constructing cardboard representations of the design, which can be evaluated with users. This
can then be followed by developing scenarios, software or video prototypes.

Storyboarding

Storyboard is a graphical depiction of the outward appearance of the intended system without
accompanying system functionality. Storyboard provides snapshots of the interface at
particular points in the interaction so that the users can determine quickly if the design is
heading in the right direction. (Greenberg, 1998)

Storyboards can be used as a means of describing the user’s day-to-day activities as well as
the potential designs and the impact they will have.

Probably the simplest notion of a prototype is the storyboard, which is a graphical depiction of
the outward appearance of the intended system, without any accompanying system
functionality. Storyboards do not require much in terms of computing power to construct; in
fact, they can be mocked up without the aid of any computing resource. The origins of
storyboards are in the film industry, where a series of panels roughly depicts snapshots from
an intended film sequence in order to get the idea across about the eventual scene. Similarly,
for interactive system design, the storyboards provide snapshots of the interface at particular
points in the interaction. Evaluating customer or user impressions of the storyboards can
deter- mine relatively quickly if the design is heading in the right direction.

Modern graphical drawing packages now make it possible to create storyboards with the aid
of a computer instead of by hand. Though the graphic design achievable on screen may not
be as sophisticated as that possible by a professional graphic designer, it is more realistic
because the final system will have to be displayed on a screen. Also, it is possible to provide
crude but effective animation by automated sequencing through a series of snapshots.
Animation illustrates the dynamic aspects of the intended user–system interaction, which may
not be possible with traditional paper-based storyboards. If not animated, storyboards usually
include annotations and scripts indicating how the interaction will occur.

PICTIVE
PICTIVE stands for Plastic Interface for Collaborative Technology Initiatives through Video
Exploration. The initial experiments of PICTIVE were conducted by Muller and his group in
their projects. It is an experimental participatory design technique that is intended to enhance
user participation in the design process

High-fidelity prototyping 
is highly-functional and interactive prototyping which is quite
close to the final product, with lots of functionality and details
included. This is often used in the later usability evaluation to
discover the potential issues that may exist in the workflow,
interactivity and so on.

Medium-fidelity prototyping

Computer-based simulation
Medium-fidelity prototypes simulate or animate some but not all features of
the intended system. There are three approaches to limit prototype
functionality [6].

Vertical prototyping

Vertical prototyping cuts down on the number of features, so that the result
is a narrow system that includes in-depth functionality, buy only for a few
selected features.
Vertical prototypes allow users to perform and test some real tasks.

Horizontal prototyping
Horizontal prototyping reduces the level of functionality so that the result is
a surface layer that includes the entire user interface to a full-featured
system without underlying functionality.
Horizontal prototypes allow users to feel the entire interface, even though
they can not perform any real tasks.
The main advantages of horizontal prototypes are that they can be
implemented fast with the use of prototyping and screen design tools, and
they can be used to assess the interface as a whole.
Scenario
Scenario reduces both the number of features and the level of functionality.
It can simulate the user interface as long as the user follows a previously
planned path, i.e., a user can use a specific set of computer facilities to
achieve a specific outcome under specified circumstances.

Scenarios can be easy and cheap to build, and to be used during early
evaluation of a user interface design to get user feedback without the
expense of constructing a running prototype. It can also be used for user
testing if they are developed with slightly more detail than a pure narrative.

Participatory design

Background

Participatory design projects in Korea became more popular since the mid1990s, when the
Korean public administrations changed its systems from the previously strong centralization to
the new local self-governance. In most of the public projects that mandated the public
participation, however, the kinds of participation tended to be at the minimum level, such as
holding the required public announcements and public hearings.

Introduction

Participatory design is a philosophy that encompasses the whole design cycle. It is design in
the workplace, where the user is involved not only as an experimental subject or as someone
to be consulted when necessary but as a member of the design team. Users are therefore
active collaborators in the design process, rather than passive participants whose involvement
is entirely governed by the designer. The argument is that users are experts in the work
context and a design can only be effective within that context if these experts are allowed to
contribute actively to the design process. In addition, introduction of a new system is liable to
change the work context and organizational processes, and will only be accepted if these
changes are acceptable to the user. Participatory design therefore aims to refine system
requirements iteratively through a design process in which the user is actively involved.

Participatory design has three specific characteristics. It aims to improve the work environment
and task by the introduction of the design. This makes design and evaluation context or work
oriented rather than system oriented. Secondly, it is characterized by collaboration: the user
is included in the design team and can contribute to every stage of the design. Finally, the
approach is iterative: the design is subject to evaluation and revision at each stage.
The participatory design process utilizes a range of methods to help convey information
between the user and designer. They include

Brainstorming This involves all participants in the design pooling ideas. This is informal and
relatively unstructured although the process tends to involve ‘on- the-fly’ structuring of the
ideas as they materialize.

Methods
Combination of several methods have shown effectiveness when added in the design
process. An use of hybridity led to powerful methods for increasing communication
effectiveness, team coherence, innovation and quality of outcome. Methods are:
workshops, stories, end-user photography, dramas, creation of shared languages,
descriptive artifacts (low-tech prototypes), and working prototypes. It’s important to
note that results of sessions used in participatory design are a valuable source of
information not a end-decision.

Co-designing with your users

Users can be involved at various stages of your product creation. Whether to test your product
or to co-design it, users thoughts and interventions should be carefully planned for specific
stages in order to be effective. Users involvement in co-designing can be a powerful tool to
drive long-term engagement but it should not be applied to every aspect of your application.

Co-designing with your team

Whatever their field of expertise, having lots of feedback is really important when you’re working
on a project. It will give you better understanding of the project, new ideas and get critics on
your work. You can start by having informal chat or if you want detailed session, run workshops.
Workshops may serve as another alternative to the two “standard” sites that most of us think
about. In PD, workshops are usually held to help diverse parties (“interested parties” or
“stakeholders”) communicate and commit to shared goals, strategies, and outcomes (e.g.,
analyses, designs, and evaluations, as well as workplace-change objectives). Workshops are
often held at sites that are in a sense neutral – they are not part of the software professionals’
workplace, and they are not part of the workers’ workplace.
The process of participatory design

Parallel Design
With the parallel design technique, some designers create an initial design from the
same set of requirements. Each designer works independently and, when work
finished, shares each designer concepts with the group. Next, the design team
considers each solution, and each designer uses the best ideas to further improve
their own solution.

Benefits of Parallel Design

 Allows a range of ideas to be generated quickly and cost effectively.

 Parallel nature of the approach allows several approaches to be explored at the same
time, thus compressing the concept development schedule.
 The concepts generated can often be combined so that the final solution benefits from
all ideas proposed.
 Only minimal resources and materials are required to convey product feel.
 The technique can be utilised by those with little or no human factors expertise.

The process of Parallel Design

At the most basic level, the parallel design process breaks down into these
steps:
1.Design independently.
2.Present all designs.
 3.Evaluate the designs.
4.Repeat this process, building on what you’ve learned during the last
design, presentation, and evaluation cycle.

Typically, the design group goes through a minimum of four such design, presentation, and
evaluation cycles; at which point, independent designs should begin to converge on a common
solution.
why parallel prototyping is better than iterative
prototyping:

Better Usability in a Shorter Timeframe

In a case study done the Nielsen Norman Group, a team of
designers worked in parallel by designing prototypes
independently of one another and then combining the best of
each design. In addition to speeding up their process, this
method measured out to a 70% improvement in usability from
the first to the second design (as compared with just 18% when
using traditional iterative design).

Diversifying to Find the Global Optima

Sometimes it is quantity over quality.

When brainstorming design ideas, it’s best to come up with as

many ideas as possible (of course, you’ll need to narrow it down,
and you can’t test every idea, but…). The more numerous and
varied your design ideas are, the more likely you are to come up
with a better solution. One problem with iterative prototyping is
that it pushes designers towards a better version of just one
design, rather than considering a wider range of possibilities.
Parallel prototyping, on the other hand, encourages designers to
explore the spectrum of possible designs, and helps designers
discover the global optima, rather than just the local optima.

By encouraging a wider spectrum of possible designs, parallel prototyping increases your

chances of reaching the global optima.

Additionally, HCI researchers have seen that parallel design

leads to more diverse designs.

Parallel prototyping helps designers reach better solutions by

encouraging a more diverse set of design prototypes.

Evaluation
Evaluation is an integral part of the design process. Its aim is to test the functionality and
usability of the design and to identify and rectify any problems. It can also try to determine the
user’s attitude and response to the system.

Conclusion

Obviously, the low fidelity prototyping can help discover the

issues of design and get them resolved at the early stage, with
much less time and efforts invested in it. An interesting and
proven phenomenon is the low-fi prototyping has become a
preferred choice for both new-born start-ups and giant brands.
The benefits of using lo-fi prototyping include: