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.
3. Positioning
The closer the object is more attention it gets.
This works in real life too: if you see an approaching object that becomes closer and closer, you'll pay attention to him.
...especially if it's a tiger 😳
4. Contrast
If someone wants to stand out in the crowd, he or she can wear something colorful, that is easy to notice.
If objects have the same size, placed symmetrically, have the same form, but one object has a different color - it will get the user's focus.
5. Order / Anchor points
This is controversial a bit, but I found that these 5 points are so-called "anchor points". At least in the Russian web.
So the idea is it's good to place the main object on one of these points. This way the object can easier get more attention.
6. Air
If the object you want to focus the user's attention to doesn't have enough air around it, it'd be hard to notice it (even if it has contrast or even if it's bigger)
Make sure the object has enough air => it'd be easier to focus on it.
7. Emphasizing
I found an interesting example of text-emphasizing.
If you make the text bolder/bigger, it will get more attention.
However, the effect might be negative: if you emphasize the price it may seem more pricey than it is.
8. Progress
If you want not to just grab the user's attention but also KEEP IT for some time, you can show the user the progress of his/her actions.
There is the related "goal gradient effect" that increases user motivation.
Use progress bars/steps etc to keep users engaged.
9. Pointing
This is the most AWESOME trick! ✨
Place a photo of a person that looks at or points at something, and it's very likely user eyes will follow the pointer.
Here are four demonstrative examples.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
🔷 the text on images is easy to read
🔷 it doesn't cover any important objects behind it (e.g. faces or products)
🔷 text contrast is good everywhere, not only on images
2/5. Navigation.
Don't hide navigation under hamburger icons on desktop devices.
I needed to make a pill component that should have had a 1px border.
But when on hover it should be doubled.
It wasn't that easy, and here is why.
If you simply make a 2px border on hover it will increase the height and width of the pill.
Since you don't know in advance what the width is, and probably the pill might be multiline, I don't think using fixed height/width is a good solution.
Instead, what I did is - I used shadows.
The first border is 1px shadow, and the second border (in the hover state) is 2px shadow.