UX stands for ‘user experience’. Of course, you already knew that, but one of the basic tenets of UX is that you never make assumptions about your visitors’ knowledge or ability. Here are five more UX ideas that aren’t so obvious…
1. Useful, friendly feedback increases conversions
Remember that a firm’s website is their online front-of-house. Nothing puts a customer off spending money like a surly receptionist or taciturn sales assistant, so make your website helpful and well-mannered, whenever people interact with it.
When it comes to forms, default error messages like ‘Invalid input’ or ‘Value required’ are an unpleasant reminder to the user that they are dealing with a computer, not a person. Instead, be affable and descriptive: ‘Please enter your phone number so we can contact you if there’s a problem’, ‘That email address doesn’t like quite right, please try again’, etc.
(Note the use of the magic word; manners cost nothing, except in the case of ‘please’ where it costs 6 bytes of memory.)
When a form submits, tell the user what just happened and what will happen next: ‘Thank you for placing your enquiry, we’ll be in touch soon!’ If your form collects a name, add it to the success message to show that you are paying attention.
2. People use the web in weird ways
Every single interaction in your user journey should take into account different levels of user ability, as well as curious habits people may have slipped into.
For instance, consider the implications of a double click on your buttons and links. It only requires a single tap to trigger an action on a web page, but most operating systems need a double click to open applications and files. Make sure you aren’t, for instance, opening a lightbox and immediately closing it if the user clicks or taps the thumbnail twice because that’s how they are used to opening images on their computer.
Some users – particularly those with reading difficulties – may highlight text or hover the mouse nearby as they read text, so make sure you aren’t spoiling this experience with CSS effects. And of course, bear in mind the requirements of partially sighted and colour-blind people.
3. Responsive design isn’t just about mobiles
Many developers define their responsive breakpoints on a device-specific basis, but remember that there might be a perfectly good reason for a desktop user to view the site at a width of 480px. You should never assume that a certain breakpoint serves only mobile or tablets.
If your site becomes unusable with a mouse and keyboard or otherwise limits functionality at a certain size, you might prevent conventional window-based PC activities, such as comparing two pages side by side or copying text into a Word processor.
Your site should work consistently across all devices at any available screen/window size. This includes taking height into consideration – if you are using a full page splash with important messages, use a ‘min-height’ property to stop those messages getting squashed if the user turns their browser into a letterbox. And if your site has a sticky navigation or mega menu, test these at various window heights to make sure they don’t compromise the experience.
4. Mind the gaps
Label elements should always be clickable (and ideally have a suitable hover state to indicate such) to move focus to the corresponding input, but make sure you haven’t left a space between label and input that a click could be lost in – use padding instead of margins to create spacing in these cases and avoid whitespace.
Also, consider the impact of gaps in your navigation elements. When the user moves the mouse horizontally along a menu bar, there should not be a break between hover effects from one link to the next.
If you are using boxes or cards to show snippets of further content, consider how much of that element is clickable. Why make your user click a small ‘Read more’ link when the whole box could be a link? This should be especially considered if your card has a hover effect implying the user can interact with it.
5. Loading animations are still cool
While we want to serve information to users as quickly as possible, occasionally a layout will look so broken prior to all the assets loading that it actually becomes confusing. For instance, a user might see the link they need flash on the screen before a slow-loading hero image pushes it out of view a moment later.
If it’s important that a user waits for something to happen, such as during form submission or when loading AJAX content, they should be told to wait using a loading animation. If only part of the page is slow to load or update, conceal that element alone and use a jQuery ‘load’ event to reveal it the split-second it is ready.
Of course, if your loading animation stays on screen for so long as to become irritating, then you’ve got an entirely different UX problem you should address.