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

Last updated October 16, 2016 · Puneet

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?

ui-ux-design

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”.

ipad-user

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?

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.

Posted in ,

A few more interesting posts →

9 Comments

  1. Viko on July 30, 2016 at 5:22 pm

    great Article Puneet!

  2. Dean Cleave-Smith on July 31, 2016 at 8:47 pm

    Hi Puneet, a great article and thank-you for your honest assessment of your work with WPBA. I agree completely, currently on average 48% of users to my sites are from touch devices and this number continues to increase. I look forward to reading your series of design articles. Thanks Dean

    • Puneet on August 1, 2016 at 7:54 pm

      Hi Dean,
      Thank you for stopping by and sharing your thoughts.

  3. Nancy Hildebrandt on July 31, 2016 at 9:24 pm

    I love your article Puneet. As for animation effects like hover, I sometimes feel bilious when I move my mouse over a web page and things keep jumping out at me without my intention or control. I navigate away from many sites because I can’t get them to calm down. I can’t help but think that two minutes spent with a customer trying to navigate a page would make a designer grasp when there’s too much happening.

    The other excellent point is to ensure that the mobile version is equally usable and employ other methods when required. I admit that I still design on desktop and check mobile as a second step, and that is a failing. At the very least, they deserve equal consideration from design inception.

    • Puneet on August 1, 2016 at 7:45 pm

      Hi Nancy,

      Good to see you here 🙂
      I agree with all that you mention. It’s quite irritating sometimes to see all these fancy effects. I even hate the smooth scroll effect that a lot of sites use. It forces me to scroll the entire section when all I want to do is bring the content to the viewport so that I can read it easily.

      Mobile is becoming important every day and it’s equally important to think and design for mobile devices.

  4. David Waumsley on August 1, 2016 at 3:09 am

    Fantastic Puneet. This is exactly why I like you so much. I now like Nancy too just for using the word “bilious” above.

    Thanks to you and your team (and others out there) we have more effects that we can shake a stick at. This is brilliant, but indeed the hard thing is how to use them responsibly.

    This basic problem of course is still there without CSS animations and fancy JS. So few web owners are naturally inclined to view their site from the psychological perspective of the user. A century of traditional advert based marketing as told them to do anything to grap attention and push out their messages as much as possible.

    I won’t be blaming you for all the annoying flipboxes in the world. 🙂

    • Puneet on August 1, 2016 at 7:49 pm

      I recall Uncle Ben’s saying, “With Great Power Comes Great Responsibility”

  5. Sallie Goetsch on October 15, 2016 at 8:18 am

    This is a thoughtful article that makes a very good point. I personally like to use hover for buttons as extra feedback to show that they can be/are being clicked, which I think improves UX, but you definitely want to avoid hover-dependent actions on mobile.

    But I don’t know why you put “think” in quotes. You don’t need to quasi-think or meta-think or ironically-reverse-meaning-think. You just need to think.

    • Puneet on October 16, 2016 at 11:51 am

      Hi Sallie,
      Thanks for sharing your thoughts and correcting me about the usage of quotes.
      I should have made it bold / italic to show my emphasis over this. Kindly pardon my mistake, English is my second language.
      Once again, thank you for correcting me.

Leave a Comment





PowerPack Beaver Addons

Start creating beautiful websites with 65+ modules and 350+ templates for Beaver Builder.

Join 12000+ Subscribers.

Get the latest Beaver Builder Tips and Updates in your Inbox. 

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.