The good, the bad and the ugly: evaluating website interfaces with your class

Humans and computers can only interact with each other through some kind of interface. Designing those interfaces to be easily understood and used by humans is key to building useful technology.

Websites are an approachable way for your students to try building their own user interfaces, but it’s also important for them to learn what makes an interface good, bad or just plain ugly.

Unlike the handful of software applications you have on your school computers, the internet offers us thousands of examples of good and terrible user interfaces, many of which your students will already be familiar with. Conveniently, the Australian Digital Technologies curriculum asks students to learn to critically evaluate user interfaces, looking at functionality, usability, accessibility and aesthetics, so we’ll use those as our criteria.

In this post, we’ll go through what makes a web interface good or bad in terms of functionality and usability and suggest some fun classroom or homework activities which will get your students critically evaluating the websites they use every day. Don’t worry, in future posts we’ll tackle accessibility and aesthetics as well.

Functionality is by far the easiest of the four criteria to notice when it’s not completely there. You can tell when a website doesn’t do something that you need it to do. This could mean that there’s information that you need but is not present (a restaurant website without an address), or perhaps there’s no way for you accomplish something (change your password when you forget it). A website with good functionality is one that is capable of serving its intended purpose.

Since functionality is easy to see, we’re going to look more closely at usability. Even if the website technically lets you accomplish everything it’s supposed to, it’s not a good user interface if it’s difficult to use.

In order to point out examples of poor usability, I had to pick out specific websites to critique, so I apologise to the specific organisations I’m singling out here! Don’t feel bad, there are lots of other examples of poor usability on the internet and we at Grok have make some of these mistakes ourselves.

Let’s start with navigation. When you come to a website it should be easy to find the information or feature that you’re looking for. If something is clickable like a button or a link it should be clear that it’s clickable and clear what will happen if you click it. Let’s look at The Clove Club, a London restaurant:

It’s very pretty, but how do you find out if the menu has food that you can eat? You see those faint grey triangles? They’re actually buttons. Which one will take you to the lunch menu? You have to move the mouse over them to find out. This is called ‘mystery meat navigation’ and is a common usability mistake on the web.

When you mouse-over each triangle it takes about a second for the slowly fading-in label to appear. When you click the triangle, it takes six seconds to slowly fade out and fade in the new page. There are three layers of these slow animations to find the lunch menu you’re looking for. This may have been a deliberate style choice; the design is visually appealing but it makes it slow to find the information you need.

Speed is very important to the usability of a site and the time taken for a website to load is a big part of that. Research shows that slow loading times increase user frustration and make your users more likely to leave. If you have a spare minute, see how long it takes the University of Advancing Technology home page to load.

It’s a flashy site, but was that a good use of your time? It takes more than 40 seconds to load and once it’s loaded the animations make the interface slower and harder to use. Limiting the use of high-resolution images, complex animations or sound and video files will make your website load faster and lead to happier users.

Fortunately, the UAT website doesn’t try to load this complex site for mobile users so the mobile experience is better. Often it’s the other way around, websites which have good usability on a desktop computer might not have such good usability on a mobile device. Let’s compare the Queensland Rail website to the Sydney Trains website on mobile. Which one looks easier to use?

Queensland Rail have a specially built version of their site, designed to work with small screen devices such as tablets or smart phones. Trying to find timetable information on the Sydney Trains website is much harder on a mobile device because it simply wasn’t designed with phones in mind. The layout is much too wide and you have to zoom in and scroll around to find the information you need.

Classroom activity

To get your students thinking about all these aspects of usability, either as a classroom group activity or as homework, ask your students to go on a poor-usability scavenger hunt. Find one example on the internet of websites which make each of these mistakes:

  1. A website which is very slow to load or use.
  2. A website which contains a lot of information but it’s hard to find the information you want. E.g. an online store where you can’t find the item you want to buy.
  3. A website where clickable elements are not clear or you can’t see where it will take you until you mouse-over (mystery meat navigation).
  4. A website which is ok on the desktop, but hard to use on a small screen. (If you don’t have a device to test on, you can usually see the same effect by dragging the window on your desktop to the size of a phone or tablet).

To get your class building their own very usable websites and developing practical user interface design skills, check out Grok Learning’s Web.Comp our HTML/CSS competition. No experience is required or expected, and your students will be building amazing websites in no time! See student designs from previous years.

Now that we’ve looked at what makes good and bad functionality and usability. Next time we’ll be going in-depth into accessibility and how to make your sites usable and approachable for everyone, including people with disabilities.