Websites are user interfaces, where our visitors can find information or carry out tasks. Many sites make this more difficult than it has to be, by changing the way elements like search boxes work to match the design, or being inconsistent. This can lead to a bad user experience for all kinds of users – especially those with poor sight or cognitive differences like Neurodivergence.
Here are five ways websites can make mistakes with their user interfaces.
Confusing Search Boxes
There has been a trend of changing the way search boxes and other input fields look – including early versions of Google’s Material Design framework. Input fields should be a box, clearly visible against the background. Not a single line, or an invisible box.
Brave Browser’s search bar is invisible against the background colour
Search boxes also pop up on many sites, meaning the user has to click somewhere different once they open.
Page Flow
In the UK we read left to right, top to bottom so will be expecting the page to flow in the same way. If a submit button or feedback messages are in unexpected places this makes the website harder to use and more confusing.
“Design should align with human psychology to make products intuitive and user-friendly.”
Don Norman, the “Father of User Experience”1
Cryptic Forms
When setting up accounts or sending a contact form, clear instructions are needed to ensure the user enters the right info. Sending users an error message about wrong data when the form doesn’t give instructions is infuriating and lazy. If the error is in technical speak that makes it even worse!
Annoying Popups
Given that many UK companies are breaking the GDPR rules by setting marketing cookies without prior consent, having a massive cookie popup is redundant & annoying. Requesting to allow notifications or pestering for newsletter subscriptions or social follows within seconds of landing on a website is offensive and gets in the way of what the user is trying to read.
Inconsistent Elements
Websites are built out of HTML code, styled with CSS code. We set styles for body text, headings, buttons etc and these apply to the whole website. With the rise of WordPress and page builders like DIVI/Elementor/Gutenberg, it’s easy to make a dog’s dinner of a site by setting individual styles for each button, heading or other element. This leads to a messy, confusing page that takes longer for users to understand.
Summary
We’ve looked at five ways websites can confuse and disorient users through poor design choices. Given that most small business websites aim to fulfil a need of their users (unlike the sites that only exist to show ads and trick us into clicking things), it makes sense to stick to conventions and make the user experience as smooth as possible.