Here’s why you should start using “Hover” wisely right now!

I have been meaning to write about a series of posts about Sensible Web Design for a while. Being a weekend, I decided to take up this task and complete the first one.

Web sites with animations, hover effects, and several other design elements are in trend. There are some websites which look great and work great. Then there are websites which fall short of serving the purpose (more about this later).

So, the question is, are we using everything just because we see it around? Are these elements adding anything to the usability? Are these things killing the user experience?

After building several fancy modules for the PowerPack, I felt like a culprit. A culprit because I committed a crime of killing the “usability”. We feel sorry for doing this. People buy what looks nice, people build what sells. But, as they say, “not everything that glitters is gold.”

What we are doing now is, saving you, your websites and ourselves from committing this crime again. 

Transparency is something that I have learned from the WordPress community and I am being brutally honest about not only our product but the general web design trend.

What’s the purpose of a website?

This is the first question that worried me. People build websites for their business and online presence. It’s a medium of new business for many, it’s a hobby for others. A website can provide information and generate leads. But, what if it didn’t do that just because of simple UI/UX mistakes? That would be a huge loss for many of us.

Why am I complaining about “Hover”?

No, I am not an anti-hover activist. Hover has been meant to perform actions, provide guidelines and have been useful in many ways. I have used it personally in many creative ways for several years. But, the time is not the same, the trend isn’t, the  industry has changed as well.

I am complaining about the use of “Hover” without thinking of the usability. A majority of web traffic that your website receives comes from mobile devices where users can only “Tap” or “Click”.

We need to build websites for a “Touch-enabled” world and not only for desktop users. 

• Can a user navigate the drop down menu if you are using the top level menu text as a link to another page?
• Can a user click the thumbnail image to see the title text when it’s linked to the details page?
• How will a user know if he/she needs to tap an image / icon to see details about it? Moving cursor on a web page is normal behavior and can reveal the content accidentally as well. But, no one taps an icon / image randomly.

This is how a website fails to deliver usability. These are some of the common questions and experiences. There are more which can be discussed in full length. I would love to hear that from you in the comments section.

What’s the solution?

The solution is simple, we need to think before we employ these fancy design elements in our designs. The general takeaway from what I have shared above is as follows:

Use hover for clickable elements – links, buttons etc. 

Yes, that’s the real purpose of a “Hover” effect. Make it easier for users to differentiate between a text and link, a fancy round corner text box and a call-to-action button. This is where a change of color, size, border, background, animation etc. can add to the usability apart from the fanciness.

Use alternative design pattern

If there’s something that fits and works well for the desktop version, then think of an alternative mobile version. A lot of responsive websites follow an app-style approach for the mobile version. Let’s take the example of Facebook, it works well on both the mobile and desktop. Both the versions have a similar look and feel but a different approach for usability.

Do not use hover to reveal important information without proper indication

A lot of times we see hover effects where content flies in with an overlay on images. This works well on desktop devices but it’s still a UX failure as users have no idea if they need to perform a hover action for more information. Similarly, these effects are of no use on mobile devices especially when the images have a link to another page for more details.

Apart from this, we need a proper indication on mobile devices such as a “+/-” toggle icon or an Up / Down arrow icon.

Do not use hover for primary triggers / actions

If you are using hover for revealing drop-down menus, it’s a fail for mobile devices. You need to setup a better mobile navigation system or you shouldn’t be adding a link to the top level navigation item.

So, that’s all from my first article from the “Sensible Web Design” series. I would love to hear about your suggestions and views.