Using intuition to improve user experience

Using intuition to improve user experience

Webster's New World Dictionary defines "intuition" as:

"the direct knowing or learning of something without the conscious use of reasoning; immediate understanding"

Essentially, an intuitive person can look at something and understand its meaning without being told the meaning.

The principles of marketing design, in general, revolve around psychology – around intuition.

The intuitiveness of icons

Utilizing psychological workings when designing logos and other marketing goods helps designers to draw in an audience.

Creating designs based on intuition essentially means anticipating and routing a given person's thought pattern.

It even affects user experience with your brand.

For example, utilizing certain colors puts consumers in a particular state of mind.

The color green gives off a peaceful vibe while the color red gives off an exciting vibe.

The importance of playing on intuition in designs comes from basic human motor functions.

Ninety percent of the information that our brains processes is visual information.

Plus, there's the processing speed to take into account.

The human brain processes images 60,000 times faster than it does text.

In fact, recent studies conclude that how humans interact with their environment affects how they make many decisions.

So the importance of developing effective visuals cannot be overstated.

Bicycle sign

How intuition applies to iconology

It comes as no surprise that we use visual cues to function in our day-to-day lives.

For example, we know intuitively what the red, yellow, and green lights at a stoplight mean.

We know what the red cross on ambulances, hospitals, and pharmacies means.

We know what to do when we see a picture of a hand or a walking person at a crosswalk.

We also know what yellow tape around construction sites and crime scenes mean without even reading it.

Our world is filled with visual cues whose meanings we don't need to be told because we know them already.

Web, app, and program designers use the same principles based on intuition when developing their products.

Intuition in Web, App, and program iconology

Anyone who has ever used a computer before will be familiar with icons.

Icons are essentially small images that act as visual cues for desired executions.

Icons are divided into three categories: universal, conflicting, and unique.

Universal Icons

Universal icons

Universal icons are icons that have the same meaning across every available platform.

Common universal icons include a house for "home," a magnifying glass for "zoom," a trashcan for "delete," and a printer for "print."

Due to the fact that they are universal, they are the easiest icons to identify.

It also makes them the rarest type of icon.

Conflicting Icons

Conflicting icons

Conflicting icons are where the trouble begins.

They are icons available across different platforms but have a different meaning across those platforms.

Let's take the icon of two arrows swirling together in a circle for example.

On some web browsers, this means "refresh."

However, on some websites such as Tumblr and Twitter, the same icon means to "reblog" or "share."

The conflict doesn't end there, either.

There could also be several icons that have the same meaning across different platforms.

For example, the heart icon means that the user likes the presented content, like on Twitter and Tumblr.

But other sites could use the star icon for the same function, like DeviantArt.

Still, other sites use a different icon to allow the user to show he or she likes the content.

On Facebook, users use a thumbs-up icon to show they like the content.

Conflicting meanings creates confusion, which results in poorer user experience.

Unique Icons

Unique icons

Unique icons are hit-or-miss so far as effectiveness goes.

They're very hard to design as they need to represent a unique function without rehashing a common design.

For example, the icon for going to the Play Store on the Samsung Galaxy S5 is a white briefcase with a multi-colored triangle in the middle.

The Play Store is used to download program and gaming apps.

But what do briefcases and triangles have to do with downloading either?

A better question still: what does image have to do with downloading apps that isn't already used elsewhere?

Another example is the S5's icon for making memos.  It's a sheet of notebook paper.

Notebook paper is an appropriate enough image.

But how many writing-affiliated icons out there use a sheet of paper?  Or a pencil?  Or a letter of some kind?

Unique icons are difficult to create, and they can be difficult to navigate as well.

More so than conflicting icons, they're at high risk for inciting poorer user experience.

Computer user

Design choices for excellent user experience

Icons are meant to help users navigate, plain and simple.

Whatever kind of icon you develop needs to follow a few basic design principles to ensure excellent user experience:

Find just the right size

Small icons work best.  They load faster and are visually more appealing.

However, don't make icons so small that users can't use them effectively.

Google and Apple recommend icons of a size just under 50x50 pixels for desktop usage.

For touchscreens, it's recommended that icons be around 7mm to 10mm wide.

That size accommodates the average person's finger size.

Including labels is fine

This rule of thumb is great for instances in which you have conflicting icons.

Some designers snub it, arguing that a label defeats the purpose of an icon.

However, including a one-word label beside or on the icon can actually enhance user experience.

A single word is small and doesn't take up space, and it explains what the icon it labels does.

Less confusion equals better user experience. 

Forget tooltips

Tooltips are text that appears when the user hovers over an icon.

They might sound like a great alternative to labels, but they're actually not.

They can sometimes not pop up properly, depending on how fast the user is changing icons.

Plus, they translate poorly onto touchscreens.


For more information on best icon design practices, please feel free to reach out to us!  We're always happy to help!

Got an additional rule of thumb for ensuring excellent user experience when designing icons?  Be sure to comment below!


Vector icons a la carte from only $.99

Samples

Shop from thousands of high quality vector icons, providing a consistent look for your project. No subscriptions. Great prices. And free icon sets too.

Shop For Vector Icons


If you like this, please share!


Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

What Car Symbols Really Mean...
What Car Symbols Really Mean...

Continue Reading →

Why attractive design works better
Why attractive design works better

It's no secret that people are drawn to attractive things. Keep reading to learn more about why attractive design is so important.

Continue Reading →

Here's what you need to know about brand psychology
Here's what you need to know about brand psychology

Branding is important to any business. So it's important to understand what attracts people. Read on to learn what you should know about brand psychology.

Continue Reading →