Scribd
Upload
82 views29 pages

UXW 02.micro

The document discusses microcopy, which are short snippets of text used throughout digital products and interfaces to provide instructions and context to users. It outlines the importance of microcopy and what makes effective microcopy. Some key points made include that microcopy should be clear, concise, useful, inject the right brand voice and tone, and use empathy to be easy to understand. Examples are given of common types of microcopy like error messages, success messages, and confirmation messages. The document concludes that while microcopies are small, their power to instruct and inform users is immense.

Uploaded by

Devano
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
82 views29 pages

UXW 02.micro

The document discusses microcopy, which are short snippets of text used throughout digital products and interfaces to provide instructions and context to users. It outlines the importance of microcopy and what makes effective microcopy. Some key points made include that microcopy should be clear, concise, useful, inject the right brand voice and tone, and use empathy to be easy to understand. Examples are given of common types of microcopy like error messages, success messages, and confirmation messages. The document concludes that while microcopies are small, their power to instruct and inform users is immense.

Uploaded by

Devano
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Dibimbing.

id

Understanding
microcopy.
Tonight’s
agenda
● Recap
● The importance of microcopy
● What makes a good microcopy?
● Let’s observe & exercise!
● Microcopy in UI components
● Tips & tricks
Understand
the 3 key
principles
What are they?
Understand
the 3 key
principles
TL;DR
/mi-cro-co-peeh/
The short sentences tell a user what to do, address
user concerns, provide context to a situation, and
help tell the greater story about your brand,
product, and the way you do business.
Prehistoric microcopy
Where to find microcopy?

Error Tagline
Message Button

Success
Message
Screen and many
E-mail
Heading more…

Form Field
Navigation
Hint
Can you find
microcopy
on this page?
Can you find
microcopy
on this page?
What makes a good microcopy?

Keep it personal for the users


(friendly, engaging, and be more
conversational)

Evoke users’ emotion


(talk like a human)
What makes an effective microcopy?

● Clear, concise, and useful

● Inject the right voice and tone of the brand

● It should feels like a part of the design

● Use empathy to write an easy to understand

microcopy
Important information
(warning, updates, etc.)

Error message
Most
common
types of the Success message
microcopy
messages…
Confirmation message

Loading & progress


Error message

Function:
An error message should be
displayed advising the exact
cause of the error and remedial
action required. These messages
help users recognise, diagnose,
and recover from errors.
Title | Informing the problem
Illustration
Inform the error that just
To catch user’s attention and
happened. To set an
ease their worries a bit.
expectation for the users.

Subtitle | Guidance
Explanation on possible steps
that user can follow as a Button | Call to Action
solutions, that followed with
the CTA buttons. Actions for users to choose
and find solution - either to try
again or go to settings.
Success message

Function:
When a user completes an action,
a success message is sometimes
displayed which confirms that the
action/task has been completed
successfully. The design of
success states can improve both
usability (rational) and interaction
delightful (emotional impact) of
your design.
Title | Let’s celebrate
Illustration/animation
Every small steps is a
Give a catchy and fun
celebration. Find a catchy
illustration, since it’s a
catchphrase that’s exciting, yet
celebratory action.
on brand.

Subtitle | Details Button | Call to Action


A brief explanation To set the Actions for users to explore
user expectation on the from the success case.
success case. Collaborate with designers/
product owner to make sure
the flow.
Confirmation message

Function:
These messages require users to confirm an
action they are trying to perform. Some of the
messages that you would display such as:
● A risk action: The action the user is going
to perform has significant consequences
that can't be undone or easily undone. Ex:
user deletion.
● An unintended consequence: The action
the user is taking has notable side effects
that may leave them feeling disoriented.
Ex: an app switch that results in a complete
change of context, including user
permissions.
Title | Ask for confirmation
A brief question about the
possible action that user must
take to continue their activity.

Button | Call to Action


Highlight the action that would
Subtitle | Consequences benefited our users. In this
Emphasize the consequences/ case, saving its content. Must
loss if users didn’t take the answering the title.
appropriate actions.

Button | Cancellation
An optional CTA, to add some
time for users to continue their
activity without saving or
deleting the content updates.
Push notifications Placeholder

Error message Empty state

UI
Success message Onboarding
Components

Confirmation message Tooltip

Toaster Progress state


And there’s button…
“They might be small,
but their power is

Immense.”
- Niaw de Leon
TL;DR

Instruct the user with clear information on what is


to be expected. Be empathic when crafting a
microcopy that would give a positive/uplifting
feeling to the situation, even when the situation is
negative.
Any questions?
For today anyway…

You might also like