Interaction Design and

Prototyping
Designing Interaction and
Micro-Interaction through prototype
Interaction Design
Disalin dari
https://www.interaction-design.org/literature/article/what-is-interaction-design

A simple and useful understanding of interaction design

Interaction design can be understood in simple (but not simplified) terms: it is the
design of the interaction between users and products. Most often when people talk
about interaction design, the products tend to be software products like apps or
websites. The goal of interaction design is to create products that enable the user to
achieve their objective(s) in the best way possible.

If this definition sounds broad, that’s because the field is rather broad: the interaction
between a user and a product often involves elements like aesthetics, motion, sound,
space, and many more. And of course, each of these elements can involve even more
specialized fields, like sound design for the crafting of sounds used in user
interactions.

As you might already realize, there’s a huge overlap between interaction design and
UX design. After all, UX design is about shaping the experience of using a product, and
most part of that experience involves some interaction between the user and the
product. But UX design is more than interaction design: it also involves user research
(finding out who the users are in the first place), creating user personas (why, and
under what conditions, would they use the product), performing user testing and
usability testing, etc.
Important questions interaction designers ask
How do interaction designers work with the 5 dimensions above to create meaningful
interactions? To get an understanding of that, we can look at some important
questions interaction designers ask when designing for users, as provided by
Usability.gov(2):

● What can a user do with their mouse, finger, or stylus to directly interact with
the interface? This helps us define the possible user interactions with the
product.

● What about the appearance (color, shape, size, etc.) gives the user a clue about
how it may function? This helps us give users clues about what behaviors are
possible.

● Do error messages provide a way for the user to correct the problem or explain
why the error occurred? This lets us anticipate and mitigate errors.

● What feedback does a user get once an action is performed? This allows us to
ensure that the system provides feedback in a reasonable time after user
actions.

● Are the interface elements a reasonable size to interact with? Questions like
this help us think strategically about each element used in the product.

● Are familiar or standard formats used? Standard elements and formats are
used to simplify and enhance the learnability of a product.

So what do interaction designers do?

Well, it depends.
For instance, if the company is large enough and has huge resources, it might have
separate jobs for UX designers and interaction designers. In a large design team, there
might be a UX researcher, an information architect, an interaction designer, and a
visual designer, for instance. But for smaller companies and teams, most of the UX
design job might be done by 1-2 people, who might or might not have the title of
“Interaction Designer”. In any case, here are some of the tasks interaction designers
handle in their daily work:

Design strategy

This is concerned with what the goal(s) of a user are, and in turn what interactions are
necessary to achieve these goals. Depending on the company, interaction designers
might have to conduct user research to find out what the goals of the users are
before creating a strategy that translates that into interactions.

Wireframes and prototypes

This again depends on the job description of the company, but most interaction
designers are tasked to create wireframes that lay out the interactions in the product.
Sometimes, interaction designers might also create interactive prototypes and/or
high-fidelity prototypes that look exactly like the actual app or website.
Micro Interactions
Disalin dari https://www.nngroup.com/articles/microinteractions/

What Are Microinteractions?

Many of our everyday interactions with computer systems fall under the large
umbrella of microinteractions. Microinteractions provide feedback to the user, often
through conveying system status or helping users prevent errors. Additionally,
microinteractions can be used as a vehicle for branding.

Definition: Microinteractions are trigger-feedback pairs in which (1) the trigger can be
a user action or an alteration in the system’s state; (2) the feedback is a narrowly
targeted response to the trigger and is communicated through small, highly
contextual (usually visual) changes in the user interface.

User-initiated triggers can consist of a GUI command or can be gestural or

voice-based, whereas a system-initiated trigger involves meeting a set of
predetermined conditions. When a microinteraction is triggered by a GUI command, a
visual feedback element will be usually placed in close proximity to that trigger.
Digital element Is it a microinteraction? Reason

Scrollbar Yes User triggered; visual

feedback to user
changing location within
a page

Digital alarm Yes System triggered;

auditory (and visual)
feedback to time
condition being met

Button It depends If there is no feedback

when a user clicks the
button, there is no
microinteraction

Pull-to-refresh Yes User triggered; visual

animation feedback to a user action

GIFs No Not triggered by the

system or a user
 Swipe animation Yes User triggered; visual
feedback that a user has
swiped an element

Email notification Yes System triggered;

provides user with
feedback that a new
message has arrived

Video player No Feature, not a

microinteraction; volume
control within the video
player would be a
microinteraction

Why Are Microinteractions Important?

One of the greatest joys of using technology comes through user empowerment and
engagement. An enjoyable experience means more than just usability — it needs to
be engaging, and that’s where microinteractions can play a macro role, by positively
contributing to the look-and-feel of a product or service.

Microinteractions can improve a product’s user experience by:

 ● Encouraging engagement

● Displaying system status

● Providing error prevention

● Communicating brand

Standard microinteractions such as scrollbars are less likely to be poorly designed

compared to their modern counterparts like pull-to-refresh elements. It is these new
microinteractions that require more effort and thought to create a meaningful,
well-designed experience.

Let’s walk through a quick case study of a microinteraction done well.

To keep track of day-to-day tasks, I use the task-management tool Asana. There are a
few aspects of the tool that I especially enjoy, like the tags and the visual design. But
by far, my favorite aspect of Asana is the sporadic flying unicorn that soars across my
browser when I complete a task. This interaction is an example of a microinteraction.

When a user marks a task as complete, a small dialog box appears in the bottom left
corner of the page. This dialog provides system feedback that the task has been
marked completed and an error-prevention option to undo this action in case it was a
mistake. About a split second after this box appears, a unicorn flies across the bottom
left quadrant of the browser in celebration of a job well done. In this case, there are
two microinteractions: the utilitarian dialog box and the gamification-inspired unicorn
animation
If you’ve ever used a task-management tool, you probably know that there are a lot of
options to choose from — Asana, Jira, Trello, or Wrike, to name a few. These products
have a lot in common. They share features like the ability to assign tasks to team
members, create boards, or integrate with other products. However, the differences
between these products become quite clear when analyzing the microinteractions
embedded throughout the experience. In Trello, moving a task to the Done column
generates no extra fanfare. And, for many people, that perfectly meets expectations.
Me, I crave the positive reinforcement of completing a task and hoping that I see the
unicorn.
However, microinteractions do more than just make users feel good. Microinteractions
convey system status, support error prevention, and communicate brand. These use
cases add significant value, thereby making microinteractions a key way to
differentiate your product from competitors. Microinteractions provide feedback to
keep users informed and engaged, and without them, your customer experience will
suffer.

Other Examples

In the LinkedIn app, when users pull-to-refresh their newsfeed, a progress indicator
communicates that the system is working on the request.
iOS uses a microinteraction (shaking of the app icons) when a user presses-and-holds
an app to communicate that the system is waiting for additional input.
Google Home lights up upon hearing the trigger Hey Google, in order to communicate
that the device is on standby and waiting for a command from the user.

eBay uses microinteractions in its registration form to communicate whether a

password meets field requirements.
Prototyping
Disalin dari https://www.interaction-design.org/literature/topics/prototyping

What is Prototyping?
Prototyping is an experimental process where design teams implement ideas into
tangible forms from paper to digital. Teams build prototypes of varying degrees of
fidelity to capture design concepts and test on users. With prototypes, you can refine
and validate your designs so your brand can release the right products.

“They slow us down to speed us up. By taking the time to prototype our ideas,
we avoid costly mistakes such as becoming too complex too early and sticking
with a weak idea for too long.”
— Tim Brown, CEO & President of IDEO

Remarkable Reasons for Prototyping

Prototyping is the fourth phase of both design thinking and design sprints. It’s an
essential part of user experience (UX) design that usually comes after ideation, where
you/your team have created and selected ideas that can solve users’ needs. In
prototyping, you craft a simple experimental model of your proposed product so you
can check how well it matches what users want through the feedback they give. You
should consider prototyping from early on—using paper prototyping, if
appropriate—so the feedback you gather from users can help guide development.

The advantages of prototyping are that you:

1. Have a solid foundation from which to ideate towards improvements—giving

all stakeholders a clear picture of the potential benefits, risks and costs
associated with where a prototype might lead.
2. Can adapt changes early—thereby avoiding commitment to a single,
falsely-ideal version, getting stuck on local maxima of UX and later incurring
heavy costs due to oversights.

3. Show the prototype to your users so they can give you their feedback to help
pinpoint which elements/variants work best and whether an overhaul is
required.

4. Have a tool to experiment with associated parts of the users’ needs and
problems—therefore, you can get insights into less-obvious areas of the users’
world (e.g., you notice them using it for additional purposes or spot unforeseen
accessibility issues such as challenges to mobile use).

5. Provide a sense of ownership to all concerned stakeholders—therefore

fostering emotional investment in the product’s ultimate success.

6. Improve time-to-market by minimizing the number of errors to correct before

product release.
Low-Fidelity vs. High-Fidelity Prototyping
Fidelity refers to the level of detail and functionality you include in your prototype.
Usually, this will depend on your product’s development stage. You can construct one
that gives a wide view of the entire system or subsystem (called a horizontal
prototype – e.g., an entire website) or one that gives a detailed view of just one feature
(a vertical prototype – e.g., a checkout process). The level of fidelity you choose should
be appropriate for presenting to users in user testing so they can give focused
feedback. Consider the differences:

Low-fidelity

Example: Paper prototypes

Pros: Fast and cheap; disposable; easy to make changes and test new iterations; allow
a quick overall view of the product; anyone can produce them; encourage design
thinking since prototypes are visibly not finalized.

Cons: Lack of realism, so users might have a hard time giving feedback; hard to apply
results from crude early versions; may be too basic to reflect the user experience of
the finished product; can oversimplify complex issues; lack of interactivity deprives
users of direct control; users must imagine how they would use the product.

High-fidelity

Example: Digital prototypes created on software such as Sketch or Adobe XD

Pros: Engaging—all stakeholders have the vision realized in their hands and can judge
how well it matches users’ needs and solves their problems; testing will yield more
accurate, more applicable results; versions closest to the final product enable you to
predict how users will take to it in the marketplace.

Cons: Longer/costlier to create; users are more likely to comment on superficial

details than on content; after hours of work, you, the designer, are likely to dislike the
idea of making changes, which can take considerable time; users may mistake the
prototype for the finished product and form biases.

High-fidelity Prototyping Tools

● Adobe XD
● Figma
● Webflow
● Sketch
● Marvel
● InVision