There are a plenty of usability concepts you should have in mind when planning and designing your site’s interface. One of them is knowing which types of elements would stand out on a page, and utilize them to attract users’ attention.

Why would you want to do that? you might want to inform them about an error message, promote your site’s features, help them find the next step or whatever they need to notice by that time.

In this article, I will give you a small idea on how to utilize them efficiently. Note that any of those elements, if used excessively on page, will lose their privilege and cease to attract users’ attention:

Warm colored elements:

I wrote about warm colors in a previous article and mentioned how they emphasize elements on a web page, and make them stand out. Warm colors are usually applied on buttons or any element that take little space, because applying them on big elements would make them overpower the rest of the contents on the page.

Images and icons

Images and icons act as visual cues on web pages.

While images might not be the first thing people notice, they do get eye fixations (depending on the size) according to this eye-tracking study :

Although we learned that most of our test participants did not look at images first, we also observed that images received a significant number of eye fixations. We also learned that the bigger the image, the more time people took to look at it.

So, try your best to always use images that describe the nature of the contents they’re associated with. This is pretty obvious, but so many people still surprisingly associate unrelated images to their contents.

How is this image related to the story?

Icons tend to be used by users to figure out what is what without having to read, but you need to make sure you’re using familiar icons to avoid confusion.

The icons give you a quick idea of the site’s features at first glance

Irregular e elements

Irregular elements also attract user attention, which is why the popular Backpack application use it to tell users what to do next on an empty page:

The arrow stands out since it’s out of place

Headers and text links

Users tend to notice and read headers text links when they’re scanning text contents on a web page (since they tend to have a unique style), which is why you need to make sure that both the headers and text links on your page are meaningful when they’re read out of context.

Lists

Lists are also one of the things that users tend to notice and fixate their eyes on while scanning contents. So, if you’re going to write about more than 2 items (or steps) in a paragraph, put them in a list instead. This way you make it easier for people to notice and absorb the information you’re presenting whether it’s promotional, educational or just for fun.

Which one seems easier to read?

This was a quick overview of a few types of elements that stand out on web pages. I’ll detail each one of them (in a non-boring way) in upcoming posts. So make sure you subscribe to the blog (in case you haven’t) to stay updated.