Website Usability & The User Experience (UX)

Audio Interview “Usability Basics”

In this interview Ed & Phil talk about photographs, forms and thank you pages. Simple tweaks that can give your user a more engaging experience.

Usability & Photographs

headphones and usability
Not Phil, but there’s an older gent like this guy in all men.
What’s the point in clicking on a photo thumbnail if the photo that pops up is only 10% bigger – or worse – it’s the same photo! That’s exactly what happened when Phil visited a site in search of bluetooth headphones. He left the site because of poor design and awful usability. This was his user experience (UX). And one less sale for the company. he ended up buying the same set of Senheisser heaphones from another company because their pop-up photo was larger and he could see the detail. He was even prepared to pay $30 more.

Ecommerce Websites

Ecommerce sites look like big and busy sites, sometimes boasting over 1,000 products. But more often than not they are run by smaller sole traders.

Hype Promotions is a website I helped build. The site is a product branding site which has over 1,000 products. Sometimes the client uploads the only image he can get from the supplier to his Ecommerce store. If the image is 300px wide and WordPress has set a thumbnail size to 250px width, the pop-up (Javascript lightbox) image is only slightly larger and can look awkward when it opens.

This is more about image size and resolution which is part of the user experience (you can read more about image size and resolution on our post File Size. How Much Space Do I Need?).

It’s not really the shop owner’s fault. Have a heart. If the owner of a flower shop has 500 product combinations, you’ll probably find that each product page shows difernt angles in 3 or 4 images. She has to upload thousands of images to her site. Mistakes will be made. It’s a lot of unpaid work so we can’t blame her.

lightbox for photographing small products
Website owners with lots of products might take photos with a light box like this
If you have time, you’ll probably find a bunch of nicely optimised (and sized) images up there that the web developer originally uploaded when the site was built. Not all of us are designers. Few of us are usability experts like Jakob Neilsen.

Only half of us know the differnce between a 1mb image and a 1Kb one. If that.

Most Ecommerce shops I’ve put up there are run by one person. Sometimes a Son or Daughter will help out. In other cases, if it’s a shop full of custom products, the shop owner takes the photos, too.

It’s a lot of work.

Product Information Photos

In the case of custom made suits. There is 3D scan technology where you take an image of yourself and it creates a 3D version of yourself for a tailor.

Virtual Walk-Throughs

Virtual walk-throughs are a way to expand the user experience.

I did a website for the Burke & Wills Hotel (Queensland) and they used 360 degree tech to give users a bit of a feel abou the room they will stay in. In some cases, the 360 degree view covers the full width of the screen which affects usability. If the whole screen is now a 360 viewport, it’s not easy to navigate away from the embedded viewer.

Finger Swiping and Usability

Only a few sites (the ones built by woke web developers) use sliders which either don’t look good on tablets or don’t work at all. In fact, the more animation a website uses, th less likely it is to work very well on phones and tablets. In the nineties and noughties, everyone was using Flash to build beautifually animated websites. But the load on the little processors (namely iPads at the time) was too much. Flash was effectively outlawed in 2010, but I can see an incoming tsunami of issues ralted to animation coming down the line. You can now animate with CSS. But again, tablet processors running stripped down browsers are doing the math behind those animations. We may well see those same usability (UX) issues arise again.

Jakob Neilsen on Usability Testing with small teams (1 of 3)
More Jakob Neilsen: Usability Testing Part 2 | Usability Testing Part 3

The way I get around this problem is to not show sliders or complex animations on mobile devices. The less animation you have, the quicker a site wil lload. Speedy site loading times are great for Search Engine Optimisation (SEO). Faster sites (particularly faster mobile websites) give the user a better experience simply by loading quicker. One of the biggest jobs I have when doing SEO for a site is making it “go faster”.

Even your web host affects site usability in terms of speed. Small CSS Frameworks (listen to our podcast about file size) are ultimately the fastest way to the top.

Form Usability

There is a whole podcast on froms here, but in short, many website forms don’t work.

  • There is no send feedback
  • The form sends okay but the sent message is invisible
  • The form has too many fields
  • A field is coded for American numbers or ZIP codes
  • The server is too slow to respond

Usability & Thank You Pages

A Thank You page is the best place to send someone after a successful form fill. But you needn’t finish the transaction after every conversion. Think about what a user might like to see after they have made a transaction (or filled in a lead generation form).

On the thank you page you might post a selection of articles to read. You can certainly show users other ways to stay in touch with Facebook, LinkedIn or Instagram links. But thinking about the purchase of a product and how that product is used oin a community is a good way forward.

You should think about usability and UX (the User Experience) throughout your website and at every moment where a decision needs to be made by the user.

Usability as a Science

Usability has become a science

Born out of the web and the user’s experience on it, usability is being introdcued to all areas of design and product manufacturing.

Further Reading

Jakob Neilsen’s great Introduction to Usability.