I've been making web sites since 1996. The web has changed a lot since then and my position on what makes for a good design has changed a lot over the years. Several things have influenced these shifts: the advancement of technology, the shifts of user habits, and lastly (and least of all) the design fads of the day.
In my recent post Ok fine… TailwindCSS rocks!, I explained why I ditched my long running allegiance to semantic css in favor of Tailwind style utility classes. In this post, I'm going into some web design concepts that have been the de-facto standard for a long time and why they should be scrapped.
Carousels
The web is full of carousels. There are numerous javascript libraries out there to implement them and even a few css only experiments. The fact of the matter is the user doesn't care past the first or second slide. Unless you have really engaging content the user has already started scrolling down the page or clicked away before the it's even changed to the second slide. This is doubly true for users on mobile who are primed to just thumb scroll instantly.
There is only a couple reasons any site might want to consider a carousel:
- A gallery of images
- A product description with feature highlights
And even then in most cases you'd be better off just showing the content directly on the page and allow the user to scroll down like they already were planning to. I mean why take the chance that the content on every slide past the first one will be ignored?
Most sites implement carousels with branding marketing fluff that users gloss over. Since users are likely only going to see the first slide then it's a waste of time to implement more than one. Just focus your message with one big hero section.
Hover Dropdown Menus
Hover drop down menus are everywhere. Ever since hover became a thing, it became the standard for how a site structured navigation. There are numerous javascript libraries to that make it easy and even css only solutions.
They have always had issues however:
- If you accidentally hover away from the menu it disappears. There are "hover intent" javascript functions that sorta solve this issue but it always felt like a kludge.
- If your primary nav items are both pages and hover triggers then it can cause UI confusion for users as they may completely miss the fact that they are buttons.
- The last issue is made worse on mobile where there is no hover so click becomes a hover and the user has to click once to expand the subnav and another time to go to that primary page. Since well over 50% of users are on mobile this matters a lot.
- Hover also becomes an accessibility issue for keyboard users where focus replaces hover.
All of this gets 10x worse when a site has nested hover menus. Nested menus in general need to go away but I've always felt that.
I'm not the only one to see this issue. Adam Silver wrote about this in his article 4 reasons why hover menus are problematic way back in 2015. And UX Movement wrote about this way way back in 2011: Why Hover Menus Do Users More Harm Than Good.
Every site navigation I develop now either uses a flat navigation that goes directly to a page or uses click button menu. The button doesn't go anywhere and it uses the actual <button> html element since you get a lot of accessibility for free using it. It's sole purpose is to open a menu that contains a list of links. There are a lot of good examples out there for this technique. This W3C ARIA Navigation Menu Button Example is a good example in pure vanilla js. If you are using React check out this article A Guide to Accessible Interactive Components using React Libraries or the accessible components from Headless UI, Adobe Spectrum, Reakit, CharkaUI, or Reach UI.
Fancy Hover Animations
Ok I don't actually think hover animations need to be scrapped completely. Hover animations are fun. Everyone loves them and they can add to usability — for desktop users. However as over 50% of users are on mobile, that means all that work you put into that fancy hover has gone unnoticed and unloved.
Also hover states can lead to the dreaded sticky hover on mobile devices since mobile devices register a click as a hover. There are ways around this but it's something to look out for.
In my current web design work I use hover animations sparingly and I don't waste too much time on them knowing that most of my users will never see them. If animation is useful for a design, it's better to focus my effort on animations on active state, loading animations, or scroll position animations.
So that's my thoughts for now. What web UI concepts do you think are no longer a good practice and a waste of your precious development time? Are there any new UI design trends you view as bad ideas?
Top comments (5)
1996, when blinking gifs were the norm, in fact, they were requested on the university's page I was building back then. Neon lions, anyone? 😂
You spurred a thought about the mobile hover issues: at some point we may reclaim hover functionality on mobile devices with eye gaze technology. I'm always so fascinated at how far we've come, and it's fun to imagine the ways we will be using the web in the next ten years.
Interesting thought on eye gaze tech. Totally possible though definitely a potential UI nightmare too. I could see a situation where every web ad becomes more obnoxious popping out when you happen to glance at it.
Interesting article. Some examples with screenshots/GIFs could have really helped better understanding.
So true!
The W3C example link not working.
Thanks! Fixed the link