Lesson08

Interaction Design in Practice

http://fpt.edu.vn 12/01/24 2
1. Design Patterns
Design patterns capture design experience, but they have a
different structure and a different philosophy from other
forms of guidance or specific methods. One of the intentions
of the patterns community is to create a vocabulary based
on the names of the patterns, which designers can use to
communicate with one another and with users. Another is to
produce literature in the field that documents experience in
a compelling form. The idea of patterns was first proposed
by the architect Christopher Alexander, who described
patterns in architecture (Alexander, 1979). His hope was to
capture the “quality without a name” that is recognizable in
something when you know it is good.
http://fpt.edu.vn 12/01/24 3
But what is a design pattern? One simple definition is that it
is a solution to a problem in a context; that is, a pattern
describes a problem, a solution, and where this solution has
been found to work. Users of the pattern can therefore not
only see the problem and solution but can also understand
the circumstances under which the idea has worked before
and access a rationale for why it worked. A key
characteristic of design patterns is that they are generative;
that is, they can be instantiated or implemented in many
different ways. The application of patterns to interaction
design has grown steadily since the late 1990s (for instance,
Borchers, 2001; Tidwell, 2006; Crumlish and Malone, 2009)
and have continued to be actively developed
http://fpt.edu.vn 12/01/24 4
Patterns on their own are interesting, but they are not as
powerful as a pattern language. A pattern language is a network
of patterns that reference one another and work together to
create a complete structure. Pattern languages are not common
in interaction design, but there are several pattern collections,
that is, sets of patterns that are independent of each other.
Patterns are attractive to designers because they are tried and
tested solutions to common problems. It is common (although
not obligatory) for pattern collections to be associated with
software components that can be used with little modification,
and as they are common solutions, many users are already
familiar with them, which is a great advantage for a new app or
product on the market. See Box 13.3 for an example pattern:
Swiss Army Knife Navigation
http://fpt.edu.vn 12/01/24 5
Pattern collections, libraries, and galleries relevant to
interaction design are commonly used in practice (for
instance, Nudelman, 2013) and are often accompanied by
code snippets available through open source repositories
such as GitHub (https://github.com/) or through platform
websites such as
https://developer.apple.com/library/iOS/documentation/
userexperience/conceptual/mobilehig/ for iOS on an iPhone.

http://fpt.edu.vn 12/01/24 6
Patterns are a “work in progress,” because they continue to
evolve as more people use them, experience increases, and
users’ preferences change. Patterns can continue to evolve
for some time, but they can also be deprecated, that is,
become outdated and no longer considered good interaction
design. Reusing ideas that have proved to be successful in
the past is a good strategy in general, particularly as a
starting point, but it should not be used blindly. In custom
applications, the design team may also create their own
libraries. As with many areas of design, there is
disagreement about which patterns are current and which
are outdated.

http://fpt.edu.vn 12/01/24 7
Design patterns are a distillation of previous common
practice, but one of the problems with common practice is
that it is not necessarily good practice. Design approaches
that represent poor practice are referred to as anti-patterns.
The quality of interaction design and user experience in
general has improved immensely since the first edition of
this book in 2002, so why are anti-patterns still a problem?
Basically, the technology is changing and design solutions
that work on one platform don’t necessarily work on another.
A common source of anti-patterns for mobile devices is
where websites or other software have been migrated from
a large screen, such as a laptop, to a smartphone. One
example of this is the untappable phone number that
displays on a smartphone pop-up
http://fpt.edu.vn 12/01/24 8
Another kind of pattern that was introduced in Chapter 1
(see Figure 1.10) is the dark pattern. Dark patterns are not
necessarily poor design, but they have been designed
carefully to trick people, championing stakeholder value over
user value, for instance. Some apparent dark patterns are
just mistakes, in which case they will be corrected relatively
quickly once identified. However, when a UX designer’s
knowledge of human behavior is deliberately used to
implement deceptive functionality that is not in the user’s
best interests, that is a dark pattern. Colin Gray et al. (2018)
collated and analyzed a set of 118 dark pattern examples
identified by practitioners and identified five strategies:
nagging, obstruction, sneaking, interface interference, and
forced action.
http://fpt.edu.vn 12/01/24 9
2. Open Source Resources
Open source software refers to source code for components,
frameworks, or whole systems that is available for reuse or
modification free of charge. Open source development is a
community-driven endeavor in which individuals produce,
maintain, and enhance code, which is then given back to the
community through an open source repository for further
development and use. The community of open source
committers (that is, those who write and maintain this
software) are mostly software developers who give their time
for free. The components are available for (re)use under
software licenses that allow anyone to use and modify the
software for their own requirements without the standard
http://fpt.edu.vn 12/01/24 10
copyright restrictions.
Many large pieces of software underlying our global digital
infrastructure are powered by open source projects. For
example, the operating system Linux, the development
environment Eclipse, and the NetBeans development tools
are all examples of open source software. Perhaps more
interesting for interaction designers is that there is a
growing proportion of open source software available for
designing good user experiences. The design pattern
implementation libraries introduced in section 13.3 are but
one example of how open source software is affecting user
experience design.

http://fpt.edu.vn 12/01/24 11
Another example is the Bootstrap framework for front-
end web development, released as open source in
August 2011 and actively updated on a regular basis;
see Figure 13.7 for an example of its use. This
framework contains reusable code snippets, a screen
layout grid that supports multiple screen sizes, and
pattern libraries that include predefined sets of
navigational patterns, typefaces, buttons, tabs, and so
on. The framework and documentation are available
through the GitHub open source repository
(https://github.com/twbs/bootstrap#community).
http://fpt.edu.vn 12/01/24 12
Open source resources require a suitable repository, that is,
somewhere for the source code to be stored and made
accessible to others. More than this, the repository needs to
serve a huge number of users (GitHub was reported to have
31 million users in 2018) who will want to build, review,
modify, and extend software products. Managing this level of
activity also requires version control, such as a mechanism
that retains and can reinstate previous versions of the
software. For example, GitHub is based on the version control
system called Git. Communities form around these
repositories, and submitting code to a repository requires an
account. For example, each developer on GitHub can set up a
profile that will keep track of their activity for others to see
and comment upon.
http://fpt.edu.vn 12/01/24 13
http://fpt.edu.vn 12/01/24 14
Most repositories support both public and private spaces.
Submitting code to a public space means that anyone in the
community can see and download the code, but in a private
space the source will be “closed.” One of the advantages of
putting code on an open source repository is that many eyes
can see, use, and modify your work—spotting security
vulnerabilities or inefficient coding practices as well as
contributing to, extending, or improving its functionality.
Other popular open source repositories are BitBucket, Team
Foundation Server, and GitLab.

http://fpt.edu.vn 12/01/24 15
3. Tools for Interaction Design
Many types of digital tools are used in practice by UX
designers, and the tooling landscape changes all the time
(Putnam et al., 2018). These tools support creative thinking,
design sketching, simulation, video capture, automatic
consistency checking, brainstorming, library search, and mind
mapping. In fact, any aspect of the design process will have at
least one associated support tool. For example, Microsoft Visio
and OmniGraffle support the creation of a wide range of
drawings and screen layouts, while FreeMind is an open
source, mind-mapping tool. In and of themselves, these tools
provide significant support for UX design, but they can also
work together to speed up the process of creating prototypes
http://fpt.edu.vn 12/01/24 16
of various levels of fidelity.
Elsewhere in this book, we have emphasized the value of low-
fidelity prototyping and its use in getting user feedback. As
with any prototype, however, paper-based prototypes have
their limitations, and they do not support user-driven
interaction (see, for example, Lim et al., 2006). In recognition
of this, developing interactive, low-fidelity prototypes has
been investigated through research for many years (see Lin
et al., 2000, or Segura et al., 2012). In recent years, tools to
support the creation of interactive prototypes from static
graphical elements have become available commercially. For
example, overflow.io supports the production of playable user
flow diagrams.

http://fpt.edu.vn 12/01/24 17
Commercial packages that support the quick and easy
development of interactive wireframes, or mock-ups, are
widely used in practice for demonstration and evaluation.
Some commonly used tools are Balsamiq®
(https://balsamiq.com/), Axure RP (https://www.axure .com/),
and Sketch (https://sketchapp.com/). Activity 13.4 invites you
to try one or more of the tools available to create a simple
prototype.
Having created an interactive wireframe using one of these
tools, it is then possible to generate a higher-fidelity prototype
by implementing the next prototype using a ready-made
pattern library or framework, like those introduced in
section 13.3 and section 13.4, to provide a coherent look and
http://fpt.edu.vn 12/01/24 18
feel.
This means going from a low-fidelity mockup to a working,
styled prototype in one step. Other open source resources can
also be used to provide a wider choice of interface elements
or design components with which to create the product.
Paper-based prototypes are also not very good if technical
performance issues such as component interfaces need to be
prototyped—software-based prototypes are better. For
example, Gosper et al. (2011) describes how, at SAP,
employees often use a drawing or graphics package to mock
up key use cases and their interfaces, interactions, and task
flows and then output that to PowerPoint.

http://fpt.edu.vn 12/01/24 19
This creates a set of slides that can be viewed to give an
overall sense of a user session. However, when they
developed a business intelligence tool with key performance
and “backend” implications, this form of prototyping was not
sufficient for them to assess their product goals. Instead, the
UX designer worked with a developer who prototyped some of
the elements in Java

http://fpt.edu.vn 12/01/24 20