It’s a case of déjà vu. A decade ago the rise in popularity of Flash steered many web designers down the wrong path. It wasn’t the fault of the technology, but of the people using the technology. Just because you can do something doesn’t mean you should. I’m all for innovation, but innovation should not be regressive.
Make no bones about it, HTML5 design is a massive, musty elephant in the room, and it is about to charge. In its path lies a flailing, unarmed Jakob Nielsen, backed up with legions of user experience professionals, who are gently sobbing. GoDaddy CEO Bob Parsons, the noted elephant slayer, is nowhere to be seen.
So, below are some examples of user experience badness. The irony is that I spotted many of these examples in posts like this one, dedicated to ‘fresh HTML5 design inspiration’. For the purposes of clarity I am not pointing the finger of blame at HTML5 itself, but the ‘HTML5 design’ themes seen on lots of sites which suffer from the issues outlined below.
I would assume that there isn’t a single person in the world who likes to see a slow-moving loading screen. The eight second rule is dead: it’s more like two seconds these days. Ask yourself if the web experience you’re providing is worth the wait (I’ll bet that it isn’t).
Many HTML5 sites are based around scrolling. They allow users to jump down the page to reveal new sections, rather than navigating to a bunch of new pages. This works, more often than not, but there is a fundamental problem when the main navigation goes missing.
Users shouldn’t be forced to learn how to navigate websites: it should be intuitive. In this case, a message says “this site has been designed for the iPad”. All very swipetastic, but most people do not use iPads to visit websites, and desktop users should not be forced into using arrow keys to navigate.
Smartphones don’t have arrow keys. These things should be done in addition to standard navigation, but not instead of. The navigation seen at the top of this site’s homepage vanishes once you enter the portfolio pages, which live in isolation from one another. Not ideal.
Images used for text
Question: ‘What begins with G and ends in oogle?’
This is barely visible on my low rent second monitor.
One thing I quite like about HTML5 and CSS3 is that it allows for (theoretically) lightweight animations to be added to web pages. But animations are a distraction and should be used with caution.
I’m not sure what these falling feathers add to the user experience, much less what they’re supposed to convey.
Mystery meat icons
Using icons for key navigation only makes sense if they are obvious. In this case, what does the tie represent? Hover over it and you’ll be told that the tie will take you to the portfolio. The problem is that the hover state does not exist when browsing via smartphone. Don’t make users think.
The first link in the navigation returns a 404 of sorts. I’m sure this is a temporary error, and it’s easy to fix, but still…
Bossy browser behaviour
This navigation reveals and then minimises itself within five seconds (I think that the main navigation is important enough to be always be visible on the page). Most links scroll to different areas of the page, but click on ‘Fresh’ and the page will open up in a new tab.
People have different preferences but it is usually considered best practice to open links in the same page, allowing the user full control over their browser.
Note the massive chunky fonts set against tiny body / navigational text. In addition, small, skinny light-coloured text does not work when set against a dark background.
I’ve never used this site before, so immediately asking me to create a free account is absolutely pointless, and more so when the pop-up does not automatically disappear when I ignore it.
Unlike Ciroc, I’m firmly of the view that videos should not be set to play automatically.
A smorgasbord of irritation
This experience consists of autosound and a ridiculous opening sequence that would test the patience of a saint, replete with tiny, barely visible ‘skip’ buttons. Thereafter we see a woeful use of page estate, tons of awkward animation, and using the mouse is a mistake as you end up scrolling all over the place. Brace yourself…
Boring content delays
Nobody likes to wait. I’m not sure that the triangles work as a frame for images, but of greater concern is the speed at which these images are loaded. It took more than a minute for all 12 images to be displayed. Some Dead Kennedys songs are shorter than that.
Don’t use technology for the sake of it. Innovation means taking risks, exploring new avenues, and making the most of opportunities. It does not mean doing things just because you can. There needs to be a focus on what matters, and what matters is not the technology, but the people who use the technology. That means designers, developers, and – ultimately – users.
Remember the UX parameters. Remember the user. Rules are there to be broken but trying to ‘educate’ a visitor about how to use your fancy new website is a total waste of time. It is fine to allow desktop users to horizontally scroll across pages via arrow keys, but it is not so fine to force them to do so, disabling the mouse in the process. Moreover, if you actually think people are happy to wait for your pages to load then you’re seriously deluded.
User experience goals are important, but business goals are too important to ignore. It’s a slippery slope. If the designer doesn’t really understand or care about the user experience then it doesn’t bode well for your business goals.
Designers need to leave their egos at home. This isn’t about them. Great design is hidden, and a great designer will avoid leaving an indelible footprint on a client’s website, much less a shitty footprint. Many HTML5 websites seem to be all about showing off the skills of the designer. This might be acceptable if you are working on your own website, though it could be misguided. It is unforgivable if you’ve done something horrendous to a client’s website.
I’m hoping that these Flash-era design trends do not make a comeback, lest that elephant trample on a billion user experiences in the years ahead. Please, if you’re in a position to do so, make it stop!