Victor Profile picture
19 Apr, 21 tweets, 15 min read
20 UX Laws & How to apply them (illustrated) 👇
The rule of the first impression

It takes a fraction of a second to make a good/bad first impression.

Things that users see when they start interacting with your product will shape their opinion.

That's why I'm starting this thread with this rule & attaching a nice video
Picture Superiority Effect

Pictures and images are more likely to be remembered than words.

Use visual storytelling in your products.

By pairing text with images, you increase the chance that users will remember the information.
Fitt's law

The time to acquire a target is a function of the distance to and size of the target.

- Make your targets large enough
- Have enough space between them

Further reading from @uxplanet
uxplanet.org/fitts-law-in-2…
3 Main time limits

🔸0.1 second: users feeling that they are directly manipulating objects in the UI.

🔸1 second: users feeling that they are freely navigating the command space

🔸10 seconds: users keeping their attention on the task.

nngroup.com/articles/respo… from @nngroup
Hick's Law.

The time it takes to make a decision increases with the number and complexity of choices.

A very nice article I found from @smashingmag: smashingmagazine.com/2012/02/redefi….

Takeaway: the fewer options you give users, the faster they make the decision.
Von Restorff Effect

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Takeaway: make important information or key actions visually distinctive.

Check out blog.prototypr.io/the-designers-… from @Prototypr
Weber’s Law of Just Noticeable Differences

Users don’t like dramatic changes, subtle changes work better.

The screenshots below are an example of such dramatic changes.

Even if the new design is better, users will probably dislike it because it changed completely at once.
IKEA Effect

People tend to place a high value on products they partially have created.

The IKEA effect will create a stronger bond between the user and the product.

Read more in the article from @uxcollective uxdesign.cc/design-princip…
Peak-End Rule

People judge an experience largely based on how they felt at its peak and at its end.

Pay close attention to the most intense points and the final moments (the “end”) of the user journey

nngroup.com/articles/peak-…
Law of Proximity

My favorite one.

Objects that are near each other seem to be grouped together.

Simple takeaway: place related objects close to each other to create a connection between them.

Further reading:
interaction-design.org/literature/art… from @interacting
Miller's law

The average person can only keep 7 +- 2 items in their short memory.

BUT.

Remember that short-term memory capacity will vary per individual, don’t use the magical number to justify unnecessary design limitations.

Always use common sense!
Goal Gradient Effect

People are motivated by how much is left to reach their target, not how far they’ve gone.

An example of this is @linkedin "profile strength".

Takeaway: You can enhance user motivation by visually representing progress. By using progress bars, steps etc.
The Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

This effect is often used in gamification.

By adding progress trackers in a UI, you remind users about unfinished tasks and motivate them to complete the tasks.
Law of Similarity

Elements that have similar visual appearances seem to be more related.

It’s possible to create similarities using size, color, and shape.

In other words, the UI elements that look similar are related to each other.
Law of Common region

Elements tend to be perceived in groups if they are sharing an area with a clearly defined boundary.

Takeaway:

By adding borders/background around a group of elements, you separate it from surrounding elements.
Jakob’s Law

Users spend most of their time on other sites.

This means that users prefer your site to work the same way as all the other sites they already know.

Familiarity gives users confidence and encourages them to interact with the interface.

medium.cobeisfresh.com/jakobs-law-e36…
Serial Position Effect

A user best remembers the first and last items in a series.

Consider this effect when delivering information to your users or displaying navigation options.

Here is a good article about it from @cacoocom cacoo.com/blog/3-ways-im…
Law of Continuity

Objects connected by straight or curving lines are seen in a way that follows the smoothest path.

I liked the example of @Shopify article shopify.com/partners/blog/… from @101babich

Take a look at the attached picture of how it's used.
Law of Closure

Our brains tend to fill in gaps in information.

This trick is widely used in graphic design, for such things as loaders/logos etc.

Check out amazing examples of using the closure principle in negative space logos:

en.99designs.de/blog/creative-…
The Aesthetic-Usability Effect

Users have a positive emotional response to your visual design, and that makes them more tolerant of minor usability issues.

Designing an interface that’s attractive as well as functional is worth the resources.

Apple uses this effect for 100% 😍

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Victor

Victor Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @vponamariov

16 Apr
9 Tricks to control user attention 😈👇
1. Motion

It is a proven method of getting user attention for a short period of time.

An awesome example I like very much is how @JoshWComeau used this fellow guy gently jumping in when you read his blog article.

He got thousands (!) of subscribers just because of this trick
2. Size

One of the basic ideas for moving user attention to the thing you want is simply increasing its size.

The bigger the object is, the more attention it gets.
Read 10 tweets
15 Apr
There are 4 basic design principles you need to know

👇
1. Contrast

By using contrast you can control users' focus. Ways of making an element stand out:

1. Color
2. Shape
3. Size
4. Proximity / Distance

Remember: No contrast / Too much contrast is bad!
2. Alignment

When your elements are aligned, nothing looks out of place.

It doesn't mean that an element cannot be out of order if you want to focus the user on it, but most elements should be usually aligned.

A typical way to achieve that is using grids or columns.
Read 5 tweets
13 Apr
How to make this with CSS only 👇
1 / 8

First, you need an SVG that has TWO parts:

- Line
- Arrow

For drawing such curves you can use any vector editor. I used @sketch.

Tutorial on how to do this: sketch.com/docs/vector-ed…

Arrow is a simple triangle.
2 / 8

Next, after you exported SVG, you can go to jakearchibald.github.io/svgomg/ in order to remove clutter from the SVG.

Btw, this is a nice hint: you can significantly reduce the size of SVG by using this awesome tool from @jaffathecake
Read 9 tweets
12 Apr
How to design almost any UI element.

A curated list of 58 articles 👇
Buttons.

7 Basic Rules for Button Design by @101babich
uxplanet.org/7-basic-rules-…

Button Design
uxdesign.cc/button-design-…

Cheatsheet for buttons by @TessGadd
uxdesign.cc/ui-cheat-sheet…
Text fields.

UI cheat sheet: text fields (Awesome article! 🤩)
uxdesign.cc/ui-cheat-sheet…

Text fields & Forms design — UI components series
uxdesign.cc/text-fields-fo…

The Anatomy of Input Field
uxplanet.org/the-anatomy-of…
Read 22 tweets
8 Mar
Consistency matters, they say...🤔

Starting from today, I'll post one UI tip per day for the next 50 days!

Follow this thread 👇

💡Tip #01 - Set the fixed width of your buttons if they have a loading state

Otherwise, they'll shrink when loading, and it looks terrible. Image
💡Tip #02 - Don't hide tips if it's unnecessary

Developers tend to hide tips under icons/tooltips/popups.

In this case, your users will be forced to hover every icon to read the tip.

It'd be better to show tips right away, if possible. 😊 Image
💡Tip #03 - Show progress bars for complex forms

They help users to identify which step they are on AND how many steps are left (!)

The latter will increase conversion of completing the form because of the "Goal Gradient Effect".

Further reading:

Image
Read 7 tweets
4 Mar
I sold Pingr.

One of the hardest tweets for me.

Lessons below 👇
Some stats

🔸Time spent: ~14 months
🔸Hours spent: ~1000
🔸Number of users: ~560
🔸Number of paying users: ~20
🔸Number of lifetime deals sold: ~20
🔸Total traffic: ~23K
🔸Revenue: negative
🔸Price: I cannot disclose the price, but it covered my development time fully
1 / Listen to others but make your own decisions. After I posted on Reddit, I decided to change my pricing model, but it turned out to be a mistake. I listened to others.

When a user asked me for something, I immediately started doing it.

Make your own decisions.
Read 14 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!