10 Tones for UX Design

Utkarsha — Thu, 17 Dec 2020 15:59:35 +0000

We adopt a variety of tones in our day-to-day speech. This intonation of our speech determines what message we desire to convey.

Let's start with, "What is a tone?" Tone, in a written composition, is the attitude of a writer towards a subject or an audience. The tone is generally conveyed through the choice of words or the viewpoint of a writer on a particular subject. The tone can be formal, informal, serious, comic, sarcastic, sad, or cheerful, or it may be any other existing attitude.

Using tone in UX with purpose:

We use different tones for different purposes. Throughout a design, purpose changes, and hence, the tone should too.

1. Playful Tone:

It is great to lighten the mood of users. Playfulness determines the difference between "Error 404. The requested URL was not found on this server." or "Oopsie! Seems like the contents ran away".

The amount of playful tone should depend on the type of project and the target users because it might not work for everyone and may get offensive at times.

2. Enthusiastic Tone:

Using a cheerful and motivating tone can help when users are facing any obstacles. "Just there, you got this!" can be used instead of saying "This is your report."

This dimension is sadly often overused, because why wouldn’t we want to be enthusiastic while addressing our users? We need to keep in mind that sometimes addressing the matter of fact directly is more important.

3. Confident Tone:

During any sensitive scenarios, this will help to put users at ease. "Just reach out for help!" or "We are here to help you".

4. Warm Tone:

A warm, clear tone can help users find what they need and relieve stressful situations. Friendly content keeps people coming back and might even give them a sense of personal and approachable space.

5. Flattering Tone:

Sometimes, giving a small compliment to the user will help them perceive the product and increase engagement with the product.

"Hey, you are doing good !"

6. Respectful Tone:

It shows care and compassion for the audience. Taking an example of an input name field that is left empty by the user.

Which error message should be displayed?

"You forgot to enter your name" or "Please enter your name."

Obviously, the latter is more respectful.

7. Honest Tone:

Being honest in the tone helps to humanize the experience and creating a relationship with the user.

8. Succinct Tone:

Also known as matter-of-fact tone. It must deliver a compact and precise description without any unnecessary information wherever possible.

Sometimes, LESS IS MORE.

9. Friendly Tone:

A blend of welcoming, honest, and respectful tones work well together.

10. Formal Tone:

This one can be a combination of serious, respectful, and matter-of-fact tones. It can be simply described as a healthy workplace type of conversational tone. An error message in this tone will be “We apologize, but we are experiencing a problem.” Here, we are not trying to make users laugh, or using any strong emotion in the message. It is a fairly traditional, straightforward message.

There are infinite words to describe the product’s specific voice, and the key here is to focus on how you want your audience to feel when using the product.

Using a unique tone of voice consistently in every little part of the product, from onboarding to the help section helps the product to grow gradually.

I hope this will be helpful for all the designers out there. If you like it, do react to this post. Cheers! :)

UtkarshaFollow

A software developer, who is keen to learn new things and enhance her skills. Interested in user experience and product design.

Crazy Optical Illusion

Utkarsha — Sun, 18 Oct 2020 20:42:05 +0000

From childhood, we're fascinated with illusions, as they deceive our reality. Who doesn't love a great optical illusion? But it is important for designers to understand optical illusions, as we deal with them very often — often without knowing it. Here are some of those illusions that we encounter all the time unknowingly.

1. Simultaneous Contrast Illusion: Inner center rectangles strongly influence each other, and people perceive their brightness differently, while actually, they're twins! Simultaneous contrast is a visual phenomenon of how our visual perception distorts when comparing two identical colors in different backgrounds.

2. Ebbinghaus Illusion: The Ebbinghaus illusion or Titchener circles is an optical illusion of relative size perception. In this illusion, two circles of identical size are placed near to each other, and one is surrounded by large circles while the other is surrounded by small circles. As a result of this collocation of circles, the central circle surrounded by large circles appears smaller than the central circle surrounded by small circles.

3. Ponzo Illusion: For the human brain, the top box sits further away — the converging lines resemble railroad tracks — and that's why it seems larger than the nearby box. No wonder, both rectangles are the same.

Consider adjusting both the perspective and background to emphasize an element and draw a user's attention to it.

4. Hermann Grid Illusion: At first glance, this may seem like an ordinary grid, but not for your visual system. Focusing very closely at any white spot in the center, the dots and lines in the nearby intersections start shifting and change from white to grey, becoming less contrasty. Ludimar Herman reported this illusion in 1870 and explained it not as a defect, but as the evolutionary ability of our brain. Observing the world around us, we pay extra attention to sharp edges, that can either be helpful or dangerous.

5. Müller-Lyer Illusion: This is the classic version of the Müller-Lyer illusion that tricks our brain and distorts the perception. No secret that the segment with inward-pointing chevrons seems larger, while indeed, both segments are equal. Franz Müller-Lyer, the German psychiatrist, presented this illusion in the 1880s, and since then, the debates on this phenomenon have seen no end.

One theory suggests that this illusion varies by culture, as some groups see no difference at all. Designers should always be aware of their target demographic!

6. Triangle-Bisection Illusion: The triangle-bisection illusion reveals controversies around the actual center of an equilateral triangle. When you place a central dot halfway up the triangle's height and set such a triangle in the box with angled or straight sides, the Play button looks slightly off and out of place. Some theories explain this illusion in differences between the center of gravity and the center of the area.

To find the right balance, designers should find the triangle centroid — the point of gravity. It's somewhere around 1/3 of a distance from each side to the opposite triangle top.

I hope this will turn out helpful for all the designers and developers out there. If you like it, do react to this post.Cheers!

UtkarshaFollow

A software developer, who is keen to learn new things and enhance her skills. Interested in user experience and product design.

DEV Community: Utkarsha

10 Tones for UX Design

1. Playful Tone:

2. Enthusiastic Tone:

3. Confident Tone:

4. Warm Tone:

5. Flattering Tone:

6. Respectful Tone:

7. Honest Tone:

8. Succinct Tone:

9. Friendly Tone:

10. Formal Tone:

UtkarshaFollow

Crazy Optical Illusion

UtkarshaFollow