PAMANTASAN NG CABUYAO

COLLEGE OF COMPUTING AND ENGINEERING

COURSE CODE: CCS105

COURSE DESCRIPTION: HUMAN-COMPUTER INTERACTION 1

COURSE INTENDED 1. Understand the HCI principles based on theories in cognitive science and
LEARNING OUTCOMES: ergonomics with regard to its characteristics for using both software and
hardware products
2. Evaluate existing user interface designs based on the cognitive aspects of
target users.
3. Design a user interface prototype appropriate for the target market/client
that employs the Interaction Design Process

LEARNING MATERIAL Week 14-15

FOR WEEK NUMBER:
I. TITLE: Design Prototyping & Construction and Tools for Interaction Design

II. OBJECTIVES: The main goals of this lesson are to accomplish the following:
▪ Describe prototyping and the different types of prototyping activities.
▪ Explain the use of scenarios and prototypes in design.
▪ Introduce both physical computing kits and software development
kits and their role in construction.
▪ Describe some of the key trends in practice related to interaction
design.
▪ Enable you to discuss the place of UX design in agile development
projects.
▪ Explain how tools can support interaction design activities.

III. INTRODUCTION: Design, prototyping, and construction fall within the Develop phase of the
double diamond of design in which solutions or concepts are created,
prototyped, tested, and iterated

IV. CONTENTS:

Lesson Coverage:

1.Design, Prototyping and Construction

2. Tools in Interaction Design

Design, Prototyping and Construction

▪ Design

The final product emerges iteratively through repeated design-evaluation-redesign cycles involving users,
and prototypes facilitate this process.

There are two aspects to design:

• the conceptual part, focuses on the idea of a product which involves developing a conceptual
model that captures what the product will do and how it will behave
• the concrete aspect, which focuses on the details of the design that is concerned with the details of
the design, such as the menu involves developing a conceptual model that captures what the
product will do and how it will behave

The two are intertwined, and concrete design issues will require some consideration in order to prototype
ideas, and prototyping ideas will lead to an evolution of the concept.

▪ Prototyping

LECTURE NOTES COMPILATION Page 1 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Prototyping provides a concrete manifestation of an idea—whether it is a new product or a modification

of an existing one—which allows designers to communicate their ideas and users to try them out.

A prototype is one manifestation of a design that allows stakeholders to interact with it and to explore its
suitability.

Prototypes take many forms, for example, a scale model of a building or a bridge, or a piece of software
that crashes every few minutes.

A prototype can also be a paper-based outline of a display, a collection of wires and ready-made
components, a digital picture, a video simulation, a complex piece of software and hardware, or a three-
dimensional mockup of a workstation. It can be anything from a paper-based storyboard 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 (a line of palmtop computers introduced in 1992)
was being developed, Jeff Hawkin (founder of the company) carved up a piece of wood about the size and
shape of the device he had imagined.

Source: https://www.computerhistory.org/revolution/mobile-computing/18/321/1648. © Mark Richards

Advances in 3D printer technologies, coupled with reduced prices, have increased their use in
design. It is now common practice to take a 3D model from a software package and print a prototype. Soft
toys, chocolate, dresses, and whole houses may be “printed” in this way

Examples of 3D printing (a) model jet engine, (b) Spider Dress 2.0 by Anouk Wipprecht: embedded with sensors, the arms of the ‘spider’ will extend to
defend the wearer if her breath becomes heavier, and (c) a teddy bear “printed” from a wireframe design
Source: (a) https://www.thingiverse.com/thing:392115. Licensed under CC-BY-3.0, (b) http://www.arch2o.com, and (c) Used courtesy of Scott Hudson

• Why Prototype?

➢ Prototypes are useful when discussing or evaluating ideas with stakeholders:

▪ they are a communication device among team members

LECTURE NOTES COMPILATION Page 2 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

▪ effective way for designers to explore design ideas.

The activity of building prototypes encourages reflection in design, as described by Donald Schön (1983),
and it is recognized by designers from many disciplines as an important aspect of design.
➢ Prototypes answer questions and support designers in choosing between alternatives.
➢ The purpose of a prototype will influence the kind of prototype that is appropriate to build.

Figure 12.3 shows a paper-based prototype of a handheld device to help an autistic child communicate.

A paper-based prototype of a handheld device to support an autistic child

Source: Used courtesy of Sigil Khwaja

Dan Saffer (2010) distinguishes between a product prototype and a service prototype where the latter
involves role-playing and people as an integral part of the prototype as well as the product itself. Service
prototypes are sometimes captured as video scenarios and used in a similar way to the scenarios.

To see more about the development of the Wynd Halo and Wynd Home Purifier, see this website:
https://www.kickstarter.com/projects/882633450/wynd-halo-home-purifierkeep-your-homes-air-
health?ref=discovery

▪ Low-Fidelity Prototyping
A low-fidelity prototype does not look very much like the final product, nor does it provide the same
functionality.
For example, it may use very different materials, such as paper and cardboard rather than
electronic screens and metal, it may perform only a limited set of functions, or it may only represent the
functions and not perform any of them. The lump of wood used to prototype the PalmPilot described
earlier is a low-fidelity prototype.

Low-fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce. This also
means that they are simple, cheap, and quick to modify so that they support the exploration of alternative
designs and ideas. This is particularly important in the early stages of development, during conceptual
design for example, because prototypes that are used for exploring ideas should be flexible and encourage
exploration and modification.
Low-fidelity prototypes are not meant to be kept and integrated into the final product. Low-fidelity
prototyping has other uses, for example in education.

Seobkin Kang et al. (2018) use low-fidelity prototyping to help children represent creative ideas when
designing and experimenting with complex systems. Their system, called Rainbow, is composed of a
collection of low-fidelity materials such as paper, scissors, and markers that can be used to create

LECTURE NOTES COMPILATION Page 3 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

prototypes, a top-down camera that can recognize the prototype, and a monitor to display augmented
reality visualizations.

• Storyboarding

Storyboarding is one example of low-fidelity prototyping that is often used in conjunction with scenarios.

A storyboard consists of a series of sketches showing how a user might progress through a task using the
product under development. It can be a series of screen sketches or a series of scenes showing how a user
can perform a task using an interactive device. When used in conjunction with a scenario, the storyboard
provides more detail and offers stakeholders a chance to role-play with a prototype, interacting with it by
stepping through the scenario.

The example storyboard shown in the figure below depicts a person (Christina) using a new mobile device
for exploring historical sites. This example shows the context of use for this device and how it might
support Christina in her quest for information about the pottery trade at The Acropolis in Ancient Greece.

An example storyboard for a mobile device to explore ancient sites such as The Acropolis

• Sketching

Low-fidelity prototyping often relies on hand-drawn sketches. Many people find it difficult to engage in
sketching because they are inhibited by the quality of their drawing.

As Saul Greenberg et al. (2012) put it, however, “Sketching is not about drawing. Rather, it is about design”
(p. 7). You can get over any inhibition by devising your own symbols and icons and practicing them—
referred to by Saul Greenberg et al. as a sketching vocabulary (p. 85). They don’t have to be anything more
than simple boxes, stick figures, and stars.

Elements that might be required in a storyboard sketch, for example, include digital devices, people,
emotions, tables, books, and so forth, and actions such as give, find, transfer, and write. If you are
sketching an interface design, then you might need to draw various icons, dialog boxes, and so on. Some
simple examples are shown figure below.
The next activity requires other sketching symbols, but they can still be drawn quite simply. Mark
Baskinger (2008) provides further tips for those new to sketching

LECTURE NOTES COMPILATION Page 4 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Some simple sketches for low-fidelity prototyping

• Prototyping with Index Cards

Using index cards (small pieces of cardboard about 3 × 5 inches) is a successful and simple way to
prototype an interaction, and it is used for developing a range of interactive products including websites
and smartphone apps.
Each card represents one element of the interaction, perhaps a screen or just an icon, menu, or dialog
exchange. In user evaluations, the user can step through the cards, pretending to perform the task while
interacting with the cards.

• Wizard of Oz

Another low-fidelity prototyping method called Wizard of Oz assumes that you have a software-based
prototype. With this technique, the user interacts with the software as though interacting with the
product. In fact, however, a human operator simulates the software’s response to the user. The method
takes its name from the classic story of the little girl who has swept away in a storm and finds herself in
the Land of Oz (Baum and Denslow, 1900).

The Wizard of Oz is a small shy man who operates a large artificial image of himself from behind a screen
where no one can see him. The Wizard of Oz style of prototyping has been used successfully for various
applications, including analyzing gestural behavior (Henschke et al., 2015) and when studying dialogues
between children and virtual agents (Fialho and Coheur, 2015). The Wizard of Oz technique is often used
in human-robot interaction studies. One such example is Marionette, a Wizard of Oz system for
performing studies on the road with autonomous vehicles (Wang et al., 2017).

Prototyping AI systems also draws on this style of prototyping, where the designer sketches the AI for
themselves, and as the design matures, implementations of the AI can take its place (van Allen, 2018)

• High-Fidelity Prototyping

A high-fidelity prototype looks more like the final product and usually provides more functionality than a
low-fidelity prototype. For example, a prototype of a software system developed in Python or other
executable language is higher fidelity than a paper-based mock-up; a molded piece of plastic with a
dummy keyboard would be a higher-fidelity prototype of the PalmPilot than the lump of wood.

There is a continuum between low- and high-fidelity, and prototypes used “in the wild,” for example, will
have enough fidelity to be able to answer their design questions and to learn about interaction or
technological constraints or contextual factors. High-fidelity prototypes can be developed by modifying
and integrating existing components—both hardware and software—which are widely available through
various developer kits and open-source software.

▪ Conceptual Design

Conceptual design is concerned with developing a conceptual model. The idea of a conceptual model can
be difficult to grasp because these models take many different forms and there isn’t a definitive detailed
characterization of one. Instead, conceptual design is best understood by exploring and experiencing
different approaches to it, and the purpose of this section is to provide some concrete suggestions about
how to go about doing this. A conceptual model is an outline of what people can do with a product and
which concepts are needed for the user to understand how to interact with it.

Read about how to create mood boards for UX projects here: https://uxplanet.org/creating-better-
moodboards-for-ux-projects381d4d6daf70

Invision offers a tool to help with this. See the following web page: https://www.invisionapp.com/inside-
design/boards-share-design-inspirationassets/

LECTURE NOTES COMPILATION Page 5 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

▪ Developing an Initial Conceptual Model

The core components of the conceptual model are metaphor and analogies, the concepts to which users are exposed,
the relationship between those concepts, and the mappings between the concepts and user experience being
supported.

Some of these will derive from the product’s requirements, such as the concepts involved in a task and
their relationships, such as through scenarios and use cases. Others such as suitable metaphors and
analogies will be informed by immersion in the data and attempting to understand the users’
perspectives.

This section introduces approaches that help to produce an initial conceptual model. In particular, it
considers the following:

• How to choose interface metaphors that will help users understand the product?
• Which interaction type(s) would best support the users’ activities?
• Do different interface types suggest alternative design insights or options?
All of these approaches provide different ways of thinking about the product and help generate potential
conceptual models.

• Interface Metaphors
Interface metaphors combine familiar knowledge with new knowledge in a way that will help users
understand the product. Choosing suitable metaphors and combining new and familiar concepts requires
a balance between utility and relevance, and it is based on an understanding of the users and their
context.

When suitable metaphors have been generated, they need to be evaluated. Erickson (1990) suggests five
questions to ask:

• How much structure does the metaphor provide? A good metaphor will provide structure—preferably
familiar structure.
• How much of the metaphor is relevant to the problem? One of the difficulties of using metaphors is that
users may think they understand more than they do and start applying inappropriate elements of the
metaphor to the product, leading to confusion or false expectations.
• Is the interface metaphor easy to represent? A good metaphor will be associated with particular
physical, visual, and audio elements, as well as words.
• Will your audience understand the metaphor?
• How extensible is the metaphor? Does it have extra aspects that may be useful later?

• Interaction Types
Five different types of interaction: instructing, conversing, manipulating, exploring, and responding.
Which type of interaction is best suited to the current design depends on the application domain and the
kind of product being developed.
For example, a computer game is most likely to suit a manipulating style, while a software application for
drawing or drafting has aspects of instructing and conversing.

• Interface Types
Considering different interfaces at this stage may seem premature, but it has both a design and a practical
purpose. When thinking about the conceptual model for a product, it is important not to be unduly
influenced by a predetermined interface type. Different interface types prompt and support different
perspectives on potential user experiences and possible behaviors, hence prompting alternative design
ideas.

“Interfaces,” and the different perspectives they bring to the group travel organizer.
• Shareable Interface The travel organizer has to be shareable, as it is intended to be used by a group of
people and it should be exciting and fun. The design issues for shareable interfaces, will need to be
considered for this system. For example, how best (whether) to use the individuals’ own devices such as
smartphones in conjunction with a shared interface. Allowing group members to interact at a distance
suggests the need for multiple devices, so a combination of form factors is required.

LECTURE NOTES COMPILATION Page 6 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

• Tangible Interface Tangible interfaces are a kind of sensor-based interaction, where blocks or other
physical objects are moved around. Thinking about a travel organizer in this way conjures up an
interesting image of people collaborating, maybe with the physical objects representing themselves while
traveling, but there are practical problems of having this kind of interface, as the objects may be lost or
damaged.

• Virtual Reality The travel organizer seems to be an ideal product for making use of a virtual reality
interface, as it would allow individuals to experience the destination and maybe some of the activities
available. Virtual reality would not be needed for the whole product, just for the elements where users
want to experience the destination.

▪ Concrete Design

Conceptual design and concrete design are closely related. The difference between them is rather a matter
of changing emphasis: during design, conceptual issues will sometimes be highlighted, and at other times,
concrete detail will be stressed.
Producing a prototype inevitably means making some concrete decisions, albeit tentatively, and since
interaction design is iterative, some detailed issues will come up during conceptual design, and vice versa.

Concrete design also deals with issues related to user characteristics and context. Two aspects that have
drawn particular attention for concrete design are discussed in this section: accessibility and
inclusiveness; and designing for different cultures.
Accessibility and inclusiveness. Accessibility refers to the extent to which a product is accessible to as
many people as possible, while inclusiveness means being fair, open, and equal to everyone.
The aim of inclusive design is to empower users in their everyday and working lives (Rogers and Marsden,
2013).

▪ Generating Prototypes

This section illustrates how prototypes may be used in design, and it demonstrates how prototypes may
be generated from the output of the requirements activity—producing a storyboard from a scenario and
an index card-based prototype from a use case.
Both of these are low-fidelity prototypes.

▪ Generating Storyboards

A storyboard represents a sequence of actions or events that the user and the product go through to
achieve a goal. A scenario is one story about how a product may be used to achieve that goal.
A storyboard can be generated from a scenario by breaking the scenario into a series of steps that focus on
interaction and creating one scene in the storyboard for each step.

The purpose for doing this is twofold:

▪ first to produce a storyboard that can be used to get feedback from users and colleagues
▪ second to prompt the design team to consider the scenario and the product’s use in more detail.

• Generating Card-Based Prototypes

Card-based prototypes are commonly used to capture and explore elements of an interaction, such as
dialog exchanges between the user and the product. The value of this kind of prototype lies in the fact that
the interaction elements can be manipulated and moved around in order to simulate interaction with a
user or to explore the user’s end-to-end experience.

This may be done as part of the evaluation or in conversations within the design team. If the storyboard
focuses on the screens, this can be translated almost directly into a card-based prototype and used in this
way.

Another way to produce a card-based prototype is to generate one from a use case output from the
requirements activity.

LECTURE NOTES COMPILATION Page 7 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Cards 1–3 of a card-based prototype for the travel organizer

By stepping through the use case, a card-based prototype can be developed that covers the required
behavior, and different designs can be considered. For example, in figure above, (Cards 1–3 of a card-
based prototype for the travel organizer) shows six dialog elements on six separate cards. The set on the
left has been written in friendlier language, while the set on the right is more official. These cover steps 1,
2, 3, 4, and 5.

(a) An experience map using a wheel representation and

(b) (b) an example timeline design map illustrating how to capture different issues
Source: (a) LEGO (b) Adlin and Pruitt (2010), p. 134. Used courtesy of Morgan Kaufmann

Construction

As prototyping and building alternatives progresses, development will focus more on putting together
components and developing the final product. This may take the form of a physical product, such as a set
of alarms, sensors, and lights, a piece of software, or both.

LECTURE NOTES COMPILATION Page 8 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Whatever the final form, it is unlikely that anything will need to be developed from scratch, as there are
many useful (in some cases essential) resources to support development.

• Physical Computing

Physical computing is concerned with how to build and code prototypes and devices using electronics.
Specifically, it is the activity of “creating physical artifacts and giving them behaviors through a
combination of building with physical materials, computer programming, and circuit building” (Gubbels
and Froehlich, 2014).

Source: Used courtesy of Dr Nicolai Marquardt

A number of physical computing toolkits have been developed for educational and prototyping purposes.
One of the earliest is Arduino (see Banzi, 2009). The goal was to enable artists and designers to learn how
to make and code physical prototypes using electronics in a couple of days, having attended a workshop.
The toolkit is composed of two parts: the Arduino board (see figure above), which is the piece of hardware
that is used to build objects, and the Arduino integrated development environment (IDE), which is a piece
of software that makes it easy to program and upload a sketch (Arduino’s name for a unit of code) to the
board.

• SDKs: Software Development Kits

A software development kit (SDK) is a package of programming tools and components that supports the
development of applications for a specific platform, for example, for iOS on iPhone and iPad and for
Android on mobile phone and tablet apps. Typically, an SDK includes an integrated development
environment, documentation, drivers, and sample programming code to illustrate how to use the SDK
components.

An SDK will include a set of application programming interfaces (APIs) that allows control of the
components without the developer needing to know the intricacies of how they work.

See the following websites to learn about two different types of SDKs and their use:
• Building voice-based services with Amazon’s Alexa Skills Kit: https://developer.amazon.com/alexa-
skills-kit.
• Constructing augmented reality experiences with Apple’s ARKit: https://developer.apple.com/arkit/

Practice in Interaction Design

Harry Brignull, remarked, the field of interaction design changes rapidly. He says, “A good interaction
designer has skills that work like expanding foam.” In other words, the practice of interaction design is
quite messy, and keeping up with new techniques and developments is a constant goal.

Many different names may be given to a practitioner conducting interaction design activities, including
interface designer, information architect, experience designer, usability engineer, and user experience
designer
User experience designer and user experience design because these are most commonly found in industry
to describe someone who performs the range of interaction design tasks such as interface design, user
evaluations, information architecture design, visual design, persona development, and prototyping.

LECTURE NOTES COMPILATION Page 9 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Four main areas of support that impact the job of UX designers are described in this chapter.
• Working with software and product development teams operating an agile model of development has
led to technique and process adaptation, resulting in agileUX approaches.
• Reusing existing designs and concepts is valuable and time-saving. Interaction design and UX design
patterns provide the blueprint for successful designs, utilizing previous work and saving time by avoiding
“reinventing the wheel.”
Reusable components—from screen widgets and source code libraries to full systems, and from motors
and sensors to complete robots—can be modified and integrated to generate prototypes or full products.
Design patterns embody an interaction idea, but reusable components provide implemented chunks of
code or widgets.
• There is a wide range of tools and development environments available to support designers in
developing visual designs, wireframes, interface sketches, interactive prototypes, and more.

AgileUX

• Integrates techniques from interaction design and agile methods

• AgileUX requires balancing research and reflection for good UX with rapid iterations incorporating
user feedback
• In Agile iterations, requirements are elaborated and re-prioritized, rather than specified up-front
• All techniques in UX are still relevant, but when to use and how much needs careful planning
• Focus on product, not design, as deliverable
• Cross-functional teams
• Three practical areas: user research, aligning work practices, and documentation

User Research
Seeks to characterize users, tasks, and context through data gathering and analysis
Detailed user research cannot be fitted within a limited timebox
o Some user research can be performed in iteration 0 (zero), before implementation starts
o Ongoing program of user research over a longer period of time

Lean UX

• Create and deploy products quickly to get real user feedback for future developments
• Tight iterations of build-measure-learn
• Minimum viable product tests assumptions

Source: Gothelf, J. with J. Seiden (2016) Lean UX, 2nd edition, O’Reilly.

Aligning Work Practices

• Designing a complete product upfront causes problems because of re-prioritization

• Some upfront work is needed (technical and UX)
• Use a parallel tracks approach:

LECTURE NOTES COMPILATION Page 10 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

▪ Create product vision before development starts

▪ Do design work one iteration ahead of development
▪ Some teams work two iterations ahead

Parallel tracks approach to AgileUX

Source: Sy, D. (2007) Adapting usability investigations for development, Journal of Usability Studies 2(3),
May, 112–130. User Experience Professionals Association.

• Advantages of parallel tracks approach:

▪ No design time wasted on features not implemented
▪ Usability testing and contextual inquiry could be done on the same customer visit, saving
time
▪ Timely feedback on the designs was received from developers and customers
▪ Agile flexibility supports schedule changes if a problem is found
• Parallel tracks is commonly used

Documentation

• Common communication approach for UX designers

• Agile encourages minimal documentation so more time can be spent on design and discussion
• Only use documentation where needed. Ask:
▪ Can the amount of time spent on documentation be reduced?
▪ Who uses documentation?
▪ What is the minimum needed by customers?
▪ How efficient is the sign-off process?
▪ Is there duplication anywhere?
▪ How polished does documentation need to be?

• Documentation: How polished? (low fidelity)

LECTURE NOTES COMPILATION Page 11 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Source: Ratcliffe, L. and McNeill, M. (2012) Agile Experience Design. New Riders.

• Documentation: how polished? (high fidelity)

Source: Ratcliffe, L. and McNeill, M. (2012) Agile Experience Design. New Riders.

Design Patterns

• Capture design experience:

▪ A solution to a problem in a context
▪ Can be instantiated in many ways: generative
• Patterns may be individual, in languages, in catalogues, galleries, or libraries
• Patterns often are associated with software components, for example, GitHub or platform websites

Swiss Army Knife Navigation: An Example Design Pattern for Mobile Devices (Nudelman (2013). Used
courtesy of John Wiley & Sons, Inc.)

Example of Swiss Army Knife Navigation pattern, instantiated as off-canvas navigation

Source: Used courtesy of Aidan Zealley

Two example carousel navigation styles

LECTURE NOTES COMPILATION Page 12 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

(a) shows pictures of a house for sale. Note the arrows to the left and right of the row of photos at the bottom.
(b) shows a weather application for a mobile phone that can be swiped left and right for other locations. Note the line of dashes in the bottom
middle of the screen that indicate there are other screens. Source: Helen Sharp

• Bad Design Patterns

• Capture design experience — but that doesn’t necessarily mean good design:
▪ Anti-patterns: Don’t do it this way!

▪ Dark patterns: deliberate tricks

• Open-Source Resources

• Components, frameworks, systems available free of charge

• Community-driven
• Available for interaction design:
▪ Design pattern libraries
▪ Bootstrap framework

Source: Didier Garcia/Larson Associates

Tools for Interaction Design

• Tools support all aspects of the design process:

▪ Creativity, sketching, simulation, brainstorming, library search, mind mapping, and video
capture
• Tools integrate together to speed up prototyping
• Tooling landscape changes all the time
• Interactive wireframes or mockups can be produced using, for example:
▪ Moqup©
▪ Balsamiq©
▪ Axure©

LECTURE NOTES COMPILATION Page 13 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

• Higher-fidelity prototypes can be produced by linking interactive wireframes to design pattern

library with software components

Key Points
• AgileUX refers to approaches that integrate UX design activities with an agile approach to product
development.
• A move to agileUX requires a change in mind-set because of repeated reprioritization of requirements
and short timeboxed implementation, which seeks to avoid wasted effort.
• AgileUX requires a rethinking of UX design activities: when to perform them, how much detail to
undertake and when, and how to feed back results into implementation cycles.
• Design patterns present a solution to a problem in a context, and there are many UX design pattern
libraries available.
• Dark patterns are designed to trick users into making choices that have unexpected consequences, for
instance, by automatically signing them up for marketing newsletters.
• Open source resources, such as those on GitHub, make the development of standard applications and
libraries with consistent interfaces easier and quicker.
• A variety of digital tools to support interaction design in practice are available.

V. REFERENCES: [1] McFadden, Mark, Introduction to Human Computer Interaction. 2020

[2] User Interface design guidelines – 10 rules of thumb: interaction
design.org, Retrieved April 5, 2021
[3] Rogers, Y., et.al. (2019). Interaction Design: Beyond Human-Computer
Interaction. 5th Edition. John Wiley & Sons. Retrieved
November 4, 2019 from http://www.id-
book.com/fiftheditionchanges.php

V. REFERENCES: [1] Rogers, Y., et.al (2019). Interaction Design: Beyond Human –Computer
Interaction, 5th Edition, John Wiley & Sons. Retrieved Nov.4 2019 from
https://terpconnect.umd.edu/~kshilton/pdf/ShiltonFTHCI.pdf
https://www.researchgate.net/publication/228803642_Ethics_in_HCI

VI. ASSESSMENT TASK:

Assessment task is posted as scheduled in our MS Team.

DISCLAIMER

Every reasonable effort is made to ensure the accuracy of the information used in the creation of
this reference material, without prejudice to the existing copyrights of the authors. As an off-shoot of the
innumerable difficulties encountered during these trying times, the authors endeavored to ensure proper
attribution of the esteemed original works, by way of footnotes or bibliography, to their best abilities and
based on available resources, despite the limited access and mobility due to quarantine restrictions
imposed by the duly constituted authorities.

We make no warranties, guarantees or representations concerning the accuracy or suitability of

the information contained in this material or any references and links provided here. Links to other
materials in our CPOD and CAM was made in good faith, for non-commercial teaching purposes only to the
extent justified for the purpose, and consistent with fair use under Sec. 185 of Republic Act No. 8293,
otherwise known as the Intellectual Property Code of the Philippines.

COPYRIGHT NOTICE

Materials contained in the learning packets have been copied and conveyed to you by or on behalf
of Pamantasan ng Cabuyao pursuant to Section IV - The Copyright Act (RA) 8293 of the Intellectual
Property Code of the Philippines.

LECTURE NOTES COMPILATION Page 14 of 15

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

You are not allowed by the Pamantasan ng Cabuyao to reproduce or convey these materials. The
content may contain works which are protected by copyright under RA 8293. You may be liable to
copyright infringement for any copying and/ or distribution of the content and the copyright owners have
the right to take legal action against such infringement.

Do not remove this notice.

LECTURE NOTES COMPILATION Page 15 of 15

2nd Semester A.Y. 2021-2022