Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

UX Design

Learn more
1 min read

Understanding the gestalt principles of perception for UX

As humans, we have a unique talent. Our brains are designed to identify patterns and fill in blanks. That’s why we see shapes in clouds, faces in the tea leaves at the bottom of our mugs and patterns in rock formations.

This ability to create a whole that’s more than the sum of its parts isn’t an unknown phenomenon. In fact, it’s one of the underlying ideas of what’s known as the gestalt principles of visual perception.

As UX designers, user researchers and web designers, an understanding of these principles can help you to better understand how your users perceive and interpret your products and services – and build better human experiences.

What are the Gestalt Principles?

All the way back in the 1920s, a group of German psychologists (Wolfgang Köhler, Max Wertheimer and Kurt Koffka) wanted to better understand how humans perceive the world around them. They were interested in learning more about how the human brain makes sense of chaos.

These “gestalt psychologists” found that humans tend to group different elements together, identify patterns and find order in disorder. Interestingly, the psychologists found that humans don’t do this randomly – there are a number of principles that our brains use.

At the time, the growing field of design began to use the gestalt psychology principles in order to create designs that are more than the sum of their parts. The hidden arrow between the E and the X in the FedEx logo is just one example of this.

The Fed Ex logo, purple "Fed" and orange "Ex".
The FedEx logo uses the negative space between the E and the X to create an arrow.

Understanding the Gestalt Principles

What happens when someone first sees the logo of your organization? How do they experience seeing the design for the first time? Gestalt psychology has a powerful role to play in how we perceive objects. If you want to create products and services that resonate with the people you intend to serve, understanding the gestalt principles is a good place to start – and it’s not that difficult.

With a solid understanding of these principles, you’ll be able to better direct people to what you want them to see, know which elements to use and when, and build better human experiences. 

Here are the gestalt pricinples that we’ll be covering:

  • Similarity
  • Figure/Ground
  • Proximity
  • Closure
  • Common region
  • Symmetry and order
  • Continuity
  • Common fate

Similarity

Principle: The gestalt principle of similarity states that when things appear to share some visual characteristics, they are assumed to be related in some way and we group them. These things don’t need to be identical, they just need to share a visible trait such as shape, size or color.

Look down from a high-rise building at a parking lot and you’ll immediately start grouping cars that are the same color. This is the principle of similarity and it’s a useful tool for UX designers.

The use of blue in this image creates the perception of rows, even though the shapes are arranged in columns. Source: Nielsen Norman Group

How to use this principle: You can use color in your products and services to indicate items with common functionality, for example in CTA buttons or links. On the other hand, you can use shape to indicate grouping.

Figure/Ground

Principle: Our brains instinctively distinguish between objects in the foreground and objects in the background. 

Usually, we will interpret the larger area of an image as the background and the smaller part of the image as the foreground. Whenever someone first opens your mobile app or lands on your website, the figure/ground gestalt principle shows them what they should be focusing on.

An image that can be seen as either a vase, or two faces.
This image by Danish psychologist Edgar Rubin presents two ways to interpret the shapes, either a vase or two faces. Source: Toptal

How to use this principle: Use figure/ground to guide users to what you want them to see. This is particularly useful when you have something active that you need them to take action on, for example, a sign-up form or a search bar. In the case of the sign-up form, having the rest of the screen fade into the background can show users that the form is currently what they should be focusing on.

Proximity

Principle: Things close together appear to be more related than things that are further apart.

The gestalt principle of proximity is one of the most powerful tools at your disposal, and can easily override other factors like color and shape. Mechanisms of perception (like proximity) compete with one another, and it’s important to understand which mechanisms you can use to accomplish your goals.

In the second image above, despite color, we understand that there are differences between the objects. Source: Andy Rutledge

How to use this principle: You can use the gestalt law of proximity to get your users to identify the organization or structure that you want them to see without using borders. A good example of this would be grouping items on an online shopping website.

Closure

Principle: When we look at a complex arrangement of individual elements, we first try and identify a single, recognizable pattern.

The law of closure allows us to look at an image with missing parts, fill in the gaps and recognize the complete image so we can understand the pattern. This law is commonly used in logo design, where our brains fill in the gaps to understand the complete image.

Even though the World Wildlife Fund logo features a lot of white space, our brain can still complete the image of the panda.

How to use this principle: You can use closure to create delight (as in the example above), but it’s important to recognize that closure can also be used to mislead and to harm. As Andy Rutledge explains, even when closure works, it could be telling you a lie. It’s your job as a UXer to be aware of this.

Common region

Principle: When objects are located within the same closed region, we perceive them as being grouped together.

Common region is closely related to proximity and is an excellent tool for separating groups of objects, even if they’re close in proximity, size, color or shape.

Source: Smashing Magazine

How to use this principle: Use visible borders or barriers in your designs to create a sense of separation between different groups of objects.  

Symmetry and order

Principle: Our brains tend to group together objects that are symmetrical with each other.

In German, the law of symmetry and order is known as prägnanz, which translates to “good figure”.

The olympics logo, consisting of 5 overlapping circles with different colours.
We interpret this version of the Olympic logo as a group of overlapping circles as opposed to a collection of curved lines due to the law of symmetry and order.

How to use this principle: Your designs should be balanced and complete, or you risk having users spend time trying to perceive a larger overall picture.

Focal point

Principle: What stands out visually will capture a user’s attention first.

Focal points are areas of interest or difference within a composition. You can create a focal point by giving it more weight than other elements.

The red circle and the red squares are focal points, as they stand out from the majority of the other elements here. Source: Smashing Magazine

How to use this principle: Consider the focal point principle when you need to draw a user’s attention to an element on your page. For example, a call to action button or a sign-up button.

Continuity

Principle: Elements arranged on a line or curve are perceived as more related than elements not on the same line or curve.

Once our eye begins to follow something, it will continue in that direction until it encounters another element. A good example of the continuity principle is a line with an arrow at the end. It indicates that we should follow the line to see where the arrow is pointing.

The red dots on the curved line appear to be more related to the black dots on the curved line than to the red dots on the straight line. This is because our eye follows the line or curve instead of the color.

The continuity principle isn’t all about physical attributes such as lines and arrows. Continuity can also come from the logical groupings of items, for example in a field. When collecting information about a user’s location, for example, all geographical information should be arranged together.

How to use this principle: Consider the continuity principle both in terms of physical attributes and logical attributes – especially when designing forms.

Common fate

Principle: We perceive elements moving in the same direction as more related than elements that are moving in different directions or stationary.

We use the principle of common fate every day of our lives. In fact, we as humans are wired to recognize contrasting movement over any other visual cue, whether it’s color, size, contrast or tone. Consider driving down the highway. The cars moving in the same direction as you are background noise, but when a car enters your lane from a side street you tend to immediately notice and respond.

This group of planes is viewed as a single unit when moving in the same direction. The group shares a common fate. Source: UX Planet

How to use this principle: This principle is key in motion design, with functional animation using common fate to guide our eye.

Wrap-up

Building a solid understanding of the gestalt principles can help you to build better human experiences. Whether you're working on a new website or the sign-up flow in a mobile app, knowing how (and when) you should deploy these principles can mean the difference between a design that's user-friendly and one that's misleading.

Learn more
1 min read

How to use card sorting to work out how your users think

Few methods surpass card sorting when you need to figure out how your users understand and categorize information.

Whether you’re working on a new website, mobile app, intranet or even a physical store, this user research method is a powerful way of getting into the minds of the people you’re trying to serve.

For those of you unfamiliar with this method or just needing a recap, a card sort involves participants sorting cards containing different items into groups. It’s as simple as that. You can use the results to then determine how to group and label the information on your app or website in a way that makes sense to the people using it.

When to use card sorting

Imagine for a moment that you’re the owner of a small fitness apparel store called FitSmart, and you’ve just ordered in a shipment of new fitness trackers. You need to add these new products to your website, but you’re not exactly sure how they fit in alongside the shoes, clothing, equipment and supplements that you also offer.

This is where card sorting comes into play.

With this user research method, you can quickly determine where people might expect to find a fitness tracker category on your website. The card sort will present the test participants with a list of cards containing the names of items found on your website, and ask users to sort the cards into groups that make sense to them.

Remember: You are not your user, and while it is possible to take an educated guess as to where to position these products, using a card sort will take out the guesswork.

One of the other benefits of card sorting is that you can routinely come back to the method whenever you need to update your website.

How to run your first card sort

Running a card sort is quite straightforward – and much simpler when using an online, unmoderated tool. Yes, you can run a card sort in person using paper cards, but you’ll then also have to coordinate with participants to have them meet you in a physical location, actually host each card sort and carry out all of the analysis manually.

Using an online tool like OptimalSort eliminates all of the admin and instead allows you to get on with the task of actually analyzing your results and making effective decisions. If you’d like to try card sorting, you can give OptimalSort a go for free and then follow this guide to set up your first test. We’d love to hear how you get on!

Pair card sorting with tree testing

When you’re working in the realm of information architecture – whether that’s reorganizing the way your website is laid out or trying to arrange categories in a mobile shopping app – card sorting isn’t the be-all and end-all.

Card sorting can show you which things should go together, but you also need to be able to work out how people make their way through a website structure. This is where a method called tree testing comes into play.

Also known as reverse card sorting, you can use a tree test to evaluate the findability of different items. In a tree test, you task participants with completing a certain action (like finding fitness trackers) and observe them as they navigate through a text-only version of your website structure. By recording every step that they take, including any wrong turns and how long it takes them to complete the task, you can make more informed changes to the specific placement of different pages and elements.

It’s best to use card sorting and tree testing together.

  • If you’re building a new website, start with a card sort to group items together, and then use a tree test to put your structure through its paces.
  • If you’re trying to fix or update an existing website, start with a tree test to assess the current structure, then move to a card sort to make changes based on the results of the tree test.

Wrap up

Card sorting is one of the most effective ways of building products and services that are intuitive for the people using them. If you’re interested in learning more about this research method, check out the hub page for card sorting on the Optimal Workshop Blog.

Learn more
1 min read

How to sell human-centered design

Picture this scenario: You're in your local coffee shop and hear a new song. You want to listen to it when you get back to the office. How do you obtain it? If you’re one of the 232 million Spotify users, you’ll simply open the app, search for the song and add it to your playlist. Within seconds, you’ll have the song ready to play whenever and wherever you want.

This new norm of music streaming wasn’t always the status quo. In the early days of the internet, the process of finding music was easy but nowhere nearly as easy as it is now. You’d often still be able to find any song you wanted, but you would need to purchase it individually or as part of an album, download it to your computer and then sync it across to a portable music player like the iPod.

Spotify is a prime example of successful human-centered design. The music service directly addresses the primary pain points with accessing music and building music collections by allowing users to pay a monthly fee and immediately gain access to a significant catalog of the world’s music.

It’s also far from the only example. Take HelloFresh, for example. Founded by Dominik Richter, Thomas Griesel and Jessica Nilsson in 2011, this company delivers a box of ingredients and recipes to your door each week, meaning there’s no need for grocery shopping or thinking about what to cook. It’s a service that addresses a fairly common problem: People struggle to find the time to go out and buy groceries and also create tasty, healthy meals, so the founders addressed both issues.

Both HelloFresh and Spotify are solutions to real user problems. They weren’t born as a result of people sitting in a black box and trying to come up with new products or services. This is the core of human-centered design – identifying something that people have trouble with and then building an appropriate answer.

The origins of human-centered design

But, someone is likely to ask, what’s even the point of human-centered design? Shouldn’t all products and services be designed for the people using them? Well, yes.

Interestingly, while terms like human-centered design and design thinking have become much more popular in recent years, they’re not entirely new methods of design. Designers have been doing this same work for decades, just under a different name: design. Just take one look at some of the products put together by famed industrial designer Dieter Rams (who famously influenced ex-Apple design lead Jony Ive). You can’t look at the product below and say it was designed without the end user in mind.

A radio by industrial designer Dieter Rams.
A radio by industrial designer Dieter Rams.

Why did human-centered design even gain traction as a term? David Howell (a UX designer from Australia) explains that designers often follow Parkinson’s Law, where “work expands so as to fill the time available for its completion”. He notes that designers could always do more (more user research, more ideation, more testing, etc), and that by wrapping everything under a single umbrella (like human-centered design) designers can “speak to their counterparts in business as a process and elevate their standing, getting the coveted seat at the table”.

Human-centered design, for all intents and purposes, is really just a way for designers to package up the important principles intrinsic to good design and sell them to those who may not be sympathetic to exactly why they’re important. At a broader level, the same thinking can be applied to UX as a whole. Good user experience should naturally fall under design, but occasionally a different way of looking at something is necessary to drive the necessary progress.


So human-centered design can really just be thought of as a vehicle to sell the importance of a user-first approach to organizations – that’s useful, but how exactly are you supposed to start? How do you sell something that’s both easily understandable but at the same time quite nebulous? Well, you sell it in the same way you’d sell user research.

How to sell human-centered design

Focus on the product

In the simplest terms, a product designed and built based on user input is going to perform better than one that was assembled based on internal organizational thinking.

When utilized in the right way, taking a human-centered approach to product design leads to products that resonate much more effectively with people. We looked at Spotify at the beginning of this article for a company that’s continuously adopted this practice, but there are countless others. AirBnB, Uber, Pinterest and more all jump to mind. Google and LinkedIn, meanwhile, serve as good examples of the ‘old guard’ that are starting to invest more in the user experience.

Understand the cost-benefit

In 2013, Microsoft was set to unveil the latest version of its Xbox video game console. Up until that point, the company had found significant success in the videogame market. Past versions of the Xbox console had largely performed very well both critically and commercially. With the newest version, however, the company quickly ran into problems.

The new ‘Xbox One’ was announced with several features that attracted scorn from both the target market and the gaming press. The console would, for example, tie both physical and digital purchases to users’ accounts, meaning they wouldn’t be able to sell them on (a popular practice). The console would also need to remain connected to the internet to check these game licenses, likely leading to significant problems for those without reliable internet access. Lastly, Microsoft also stated that users would have to keep an included camera system plugged in at all times otherwise the console wouldn’t function. This led to privacy advocates arguing that the camera system’s data could be used for things like targeted advertising and user surveillance.

Needless to say, after seeing the response from the press and the console’s target market, Microsoft backtracked and eventually released the Xbox One without the always-on requirement, game licensing system or camera connection requirement.

Think of the costs Microsoft likely incurred having to roll back every one of these decisions so late into the product’s development. If you’re able to identify an issue in the research or prototype phase, it’s going to be significantly cheaper to fix here as opposed to 3 years into development with a release on the horizon.

Wrap-up

As the Spotify founders discovered back in back in 2008, taking a human-centered approach to product design can lead to revolutionary products and experiences. It’s not surprising. After all, how can you be expected to build something that people want to use without understanding said people?

Learn more
1 min read

What makes for a great web navigation experience?

Take a look at the navigation menu at the top of our blog. Mouse over the ‘Explore by topic’ menu and browse through the different elements.

If you’re new to the world of website architecture and UX, developing something like this may seem quite trivial – surely it’s just a matter of picking 'popular' areas of your website and dropping them in, right?

Not exactly.

Optimal Workshop's blog navigation dropdown
The ‘Explore by topic’ dropdown on our blog.

When it comes to website design, navigation should sit at the top of the priority list. After all, it’s what sits between your user and their goal. It’s the critical link that’s usually the deciding factor in whether or not they’ll continue to use your website.

In this article, we’re going to cover off some of the key things that make for a good website navigation experience. But first, it’s important to dispel some confusion.

According to Wikipedia, “web navigation refers to the process of navigating a network of information resources [like content]”. This is key. Website navigation isn’t the design of a website, it’s the bones of a website – the core structure that sits beneath the design. It can be helpful to think of it like a freeway system linking drivers (users) to destinations (content). Without a navigation, or, as is more often the case, with a poor navigation, the experience of using a website falls over. And in real terms, this is going to impact whatever it is that your organization does.

How navigation affects the user experience

There’s no shortage of elements that play into the user experience of a website. Everything from font, color, imagery, headlines, call to actions, page load time and form design have a bearing on the end user experience. But navigation is really the most important consideration of all. If people can’t find what they’re looking for within the structure of your website, they’ll likely leave and look for that same content elsewhere.

If you run an ecommerce website selling cosmetics, a frustrating navigation experience could mean your customers simply get fed up and try one of your competitors instead.

What makes for a great navigation experience?

When looking at what separates merely functional website navigation experiences from great ones, there are a number of key considerations:

Keep your navigation bar as simple as it needs to be

Website navigation bars have a habit of either including far too many links or not enough – it’s important to strike the right balance. You may find it helpful to consider the following 2 factors when designing your own navigation:

  • What you want your users to do on your website
  • What your users want to do on your website.

The difference in a user’s goals and your own is important. While your users may want to find information about your company history, you’ll have your own goals of getting users to product pages or perhaps signing up for accounts.

Optimal Workshop's blog navigation menu
Your navigation should serve your users’ goals.

User-friendly language

We’re not going to get into the specifics of structuring a brand tone and style here, but we’ll just note the following: Clear is kind. Unclear is unkind. This is an important rule to keep in mind when designing the labels/UX copy for your navigation items. You want people to immediately understand what they’re reading or about to click on – there should never be any confusion. When your confusing labels send users on a mission to find something that should be easily discoverable, there’s a good chance they won’t return to your website.

So what does this look like? Here are a couple of examples:

  • When writing the label for a page with your company contact information, opt for ‘Contact us’ instead of ‘Leave us a message’.
  • If you need a label for a page that has information about your staff, consider something like ‘About our team’ instead of ‘Who we are’.

Stick to web conventions

  • The reason why conventions exist is because they’re based on ideas that work.
  • Design conventions work so well that you can look at a website in a completely different language and still partially navigate your way around.
  • The only time you should ever break from conventions is if you have a better way of doing something, for example, if you have a website for a specific marketing or sales campaign, it might be more appropriate to do something non-conventional with the menu.

Web conventions exist for a reason – they’re based on ideas that work and are understood by the majority of web users. In many cases, these conventions work so well that most people will be able to navigate websites in entirely different languages simply because the functions are located in places that make sense.

Don’t forget the footer

When we redeveloped the Optimal Workshop blog at the beginning of 2019, we ran a series of usability tests on our website to work out how our users navigated their way through different types of content. The results were pretty interesting. When we asked people to find a link to our blog, many didn’t go for the ‘Learn’ menu in our navigation bar but instead went straight down to the footer at the bottom of the page.

Often overlooked, the footer forms a key function in your website’s navigation experience, for a few key reasons:

  • They encourage further exploration: The end of a webpage doesn’t have to be the end of a user’s experience with your website. A footer can help to prevent users from bouncing out by encouraging further exploration and interaction.
  • They help your mobile users: Navigating the web on mobile device understandably involves more scrolling than a desktop. With this in mind, the footer becomes even more important as an anchor for mobile users: even when they get lost on a long page, they’ll know that easy navigation options await in the footer.

Tips for crafting a user-focused navigation

Building a navigation system that’s intuitive and understandable by the majority of your users isn't easy – but it’s not impossible. The first step on the path to creating such a navigation begins with an understanding of how your users think. Or, more specifically, how your users think the information on your website should be arranged.

One of the methods that we use to figure this out is called card sorting. With card sorting, you can work out how people understand and categorize information. In a typical card sort, you task participants with sorting cards containing different items into groups. You can then use the results to figure out how to group and label the information on your website in a way that makes the most sense to the people using.

The other technique that proves invaluable during the website design process is called tree testing. It’s best-suited to help you assess the findability of topics on a website. You run a tree test on a text-based frame of your website – there are no navigation aids or design elements to give any hints. By removing everything but the labels and how they’re, you can work out how effective your navigation is at getting people to the content they’re looking for. If you find that test participants consistently struggle to locate specific items, you’ll know there are issues with your structure.


These are 2 methods that can help you with website navigation design, but they make great starting points. You can use card sorting to get an idea of how people think information should be grouped, turn this into a rough structure of your website, test it, and then iterate. If you’d like to give card sorting and tree testing a try, give our UX platform a go.

Learn more
1 min read

Anatomy of a website: website footers

A definition of a website footer

The footer of a website sits at the very bottom of every single web page and contains links to various types of content on your website. It’s an often overlooked component of a website, but it plays several important roles in your information architecture (IA) — it’s not just some extra thing that gets plonked at the bottom of every page.

Getting your website footer right matters!

The footer communicates to your website visitors that they’ve reached the bottom of the page and it’s also a great place to position important content links that don’t belong anywhere else — within reason. A website footer is not a dumping ground for random content links that you couldn’t find a home for, however there are some content types that are conventionally accessed via the footer e.g., privacy policies and copyright information just to name a few.

Lastly, from a usability and navigation perspective, website footers can serve as a bit of a safety net for lost website visitors. Users might be scrolling and scrolling trying to find something and the footer might be what catches them and guides them back to safety before they give up on your website and go elsewhere. Footers are a functional and important part of your overall IA, but also have their own architecture too.

Read on to learn about the types of content links that might be found in a footer, see some real life examples and discuss some approaches that you might take when testing your footer to ensure that your website is supporting your visitors from top to bottom.

What belongs in a website footer

Deciding which content links belong in your footer depends entirely on your website. The type of footer, its intent and content depends on its audience of your customers, potential customers and more — ie your website visitors. Every website is different, but here’s a list of links to content types that might typically be found in a footer.

  • Legal content that may include: Copyright information, disclaimer, privacy policy, terms or use or terms of service — always seek appropriate advice on legal content and where to place it!
  • Your site map
  • Contact details including social media links and live chat or chat bot access
  • Customer service content that may include: shipping and delivery details, order tracking, returns, size guides, pricing if you’re a service and product recall information.
  • Website accessibility details and ways to provide feedback 
  • ‘About Us’ type content that may include: company history, team or leadership team details, the careers page and more 
  • Key navigational links that also appear in the main navigation menu that is presented to website visitors when they first land on the page (e.g. at the top or the side)

Website footer examples

Let’s take a look at three diverse real life examples of website footers.

IKEA US

IKEA’s US website has an interesting double barrelled footer that is also large and complex — a ‘fat footer’ as it’s often called — and its structure changes as you travel deeper into the IA. The below image taken from the IKEA US home page shows two clear blocks of text separated by a blue horizontal line. Above the line we have the heading of ‘All Departments’ with four columns showing product categories and below the line there are seven clear groups of content links covering a broad range of topics including customer service information, links that appear in the top navigation menu and careers. At the very bottom of the footer there are social media links and the copyright information for the website.

An image of IKEA US home page footer on their website, from 2019.
IKEA US home page footer (accessed May 2019)

As expected, IKEA’s overall website IA is quite large — and as a website visitor clicks deeper into the IA, the footer starts to change. On the product category landing pages, the footer is mostly the same but with a new addition of some handy breadcrumbs to aid navigation (see below image).

An image of IKEA US product page footer on their website, from 2019.
IKEA US website footer as it appears on the product category landing page for Textiles & Rugs (accessed May 2019).

When a website visitor travels all the way down to the individual product page level, the footer changes again. In the below image found on the product page for a bath mat, while the blue line and everything below it is still there, the ‘All Departments’ section of the footer has been removed and replaced with non-clickable text on the left hand side that reads as ‘More Bath mats’ and a link on the right hand side that says ‘Go to Bath mats’. Clicking on that link takes the website visitor back to the page above.

IKEA US website footer as it appears on the product page for a bath mat, from 2019.
IKEA US website footer as it appears on the product page for a bath mat (accessed May 2019).

Overall, evolving the footer content as the website visitor progresses deeper into the IA is an interesting approach - as the main page content becomes more focussed as does the footer while still maintaining multiple supportive safety net features.

M.A.C Cosmetics US

The footer for the US website of this well known cosmetics brand has a four part footer. At first it appears to just have three parts as shown in the image below: a wide section with seven content link categories covering a broad range of content types as the main part with a narrow black strip on either end of it making up the second and third parts. The strip above has loyalty program and live chat links and the strip below contains mostly links to legal content.

MAC Cosmetics US website footer with three parts as it appears on the home page upon first glance, from 2019.
MAC Cosmetics US website footer with three parts as it appears on the home page upon first glance (accessed May 2019).

When a website visitor hovers over the ‘Join our loyalty program’ call to action (CTA) in that top narrow strip, the hidden fourth part of the footer which is slightly translucent pulls up like a drawer and sits directly above the strip capping off the top of the main section (as shown in the below image). This section contains more information about the loyalty program and contains further CTAs to join or sign in. It disappears when the cursor is moved away from the hover CTA or it can be collapsed manually via the arrow in the top right hand corner of this fourth part. It’s an interesting and unexpected interaction to have with a footer, but it adds to the overall consistent and cohesive experience of this website because it feels like the footer is an active participant in that experience.

MAC Cosmetics US website footer as it appears on the home page with all four parts visible, from 2019.

MAC Cosmetics US website footer as it appears on the home page with all four parts visible (accessed May 2019).

Domino’s Pizza US

Domino’s Pizza’s US website has a reasonably flat footer in terms of architecture but it occupies as much space as a more complex or deeper footer. As shown in the image below, its content links are presented horizontally over three rows on the left hand side of the footer and these links are visually separated by forward slashes. It also displays social media links and some advertising content on the right hand side. The most interesting feature of this footer is the large paragraph of text titled ‘Legal Stuff’ below the links. Delightfully it uses direct, clear and plain language and even includes a note about delivery charges not including tips and to ‘Please reward your driver for awesomeness’.

Domino’s Pizza US website footer as it appears on the home page, from 2019.

Domino’s Pizza US website footer as it appears on the home page (accessed May 2019).

How to test a website footer

Like every other part of your website, the only way you’re going to know if your footer is supporting your website visitors is if you test it with them. When testing a website’s IA overall, the footer is often excluded. This might be because we want to focus on other areas first or maybe it’s because testing everything at once has the potential to be overwhelming for our research participants.

Testing a footer is fairly easy thing to do and there’s no right or wrong approach — it really does depend on where you are up to in your project, the resources you have available to you and the size and complexity of the footer itself!

If you’re designing a footer for a new website there’s a few ways you might approach ensuring your footer is best supporting your website visitors. If you’re planning to include a large and complex footer, it’s a good idea to start by running an open card sort just on those footer links with OptimalSort. An open card sort will help you understand how your website visitors expect those content links in your footer to be grouped and what they think those groups should be called.

If you’re redesigning an existing website, you might first run a tree test in Treejack on the existing footer to benchmark test it and to pinpoint the exact issues. You might tree test just the footer in the study or you might test the whole website including the footer. Treejack is really flexible and you can tree test just a small section of an IA or you can do the whole thing in one go to find out where people are getting lost in the structure. Your approach will depend on your project and what you already know so far. If you suspect there may be issues with the website’s footer — for example, if no one is visiting it and/or you’ve been receiving customer service requests from visitors to help them find content that only lives in the footer —  it would be a good idea to consider isolating it for testing. This will help you avoid any competition between the footer and the rest of your IA as well as any potential confusion that may arise from duplicated tree branches (i.e. when your footer contains duplicate labels).

If you’re short on time and there aren’t any known issues with the footer prior to a redesign, you might tree test the entire IA in your benchmark study, iterate your design and then along with everything else, include testing activities for your footer in your moderated usability testing plan. You might include a usability testing scenario or question that requires your participants to complete a task that involves finding content that can only be found in the footer (e.g., shipping information if it’s an ecommerce website). Also keep a close eye on how your participants are moving around the page in general and see if/when the footer comes into play — is it helping people when they’re lost and scrolling? Or is it going unnoticed? If so, why and so on. Talk to your research participants like you would about any other aspect of your website to find out what’s going on there. When resources are tight, use your best judgement and choose the research approach that’s best for your situation — we’ve all had moments where we’ve had to be pragmatic and do our best with what we have.

When you’re at a stage in your design process where you have a visual design or concept for your footer, you could also run a first-click test on it using Chalkmark. First-click tests are quick and easy and will help you determine how your website visitors are faring once they reach your footer and if they can identify the correct content link to complete their task. Chalkmark studies can be run remotely or in person and just like the rest of the tools in the Optimal Workshop suite, are super quick to run and great for reaching website visitors all over the world simply by sharing a link to the study.

For further reading on testing website footers, be sure to check out the case study review we ran on the footer of Sephora’s US website!

Learn more
1 min read

The ultimate reading list for new user researchers

Having a library of user research books is invaluable. Whether you’re an old hand in the field of UX research or just dipping your toes in the water, being able to reference detailed information on methods, techniques and tools will make your life much easier.

There’s really no shortage of user research/UX reading lists online, so we wanted to do something a little different. We’ve broken our list up into sections to make finding the right book for a particular topic as easy as possible.

General user research guides

These books cover everything you need to know about a number of UX/user research topics. They’re great to have on your desk to refer back to – we certainly have them on the bookshelf here at Optimal Workshop.

Observing the User Experience: A Practitioner's Guide to User Research

Mike Kuniavsky

Observing the User Experience: A Practitioner’s Guide to User Research

This book covers 13 UX research techniques in a reference format. There’s a lot of detail, making it a useful resource for people new to the field and those who just need more clarification around a certain topic. There’s also a lot of practical information that you’ll find applicable in the real world. For example, information about how to work around research budgets and tight time constraints.

Just Enough Research

Erika Hall

Just Enough Research

In Just Enough Research, author Erika Hall explains that user research is something everyone can and should do. She covers several research methods, as well as things like how to identify your biases and make use of your findings. Designers are also likely to find this one quite useful, as she clearly covers the relationship between research and design.

Research Methods in Human-Computer Interaction

Harry Hochheiser, Jonathan Lazar, Jinjuan Heidi Feng

Research Methods in Human-Computer Interaction

Like Observing the User Experience, this is a dense guide – but it’s another essential one. Here, experts on human-computer interaction and usability explain different qualitative and quantitative research methods in an easily understandable format. There are also plenty of real examples to help frame your thinking around the usefulness of different research methods.

Information architecture

If you’re new to information architecture (IA), understanding why it’s such an important concept is a great place to start. There’s plenty of information online, but there are also several well-regarded books that make great starting points.

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites

Peter Morville, Louis Rosenfeld

Information Architecture for the World Wide Web: Designing Large-Scale Web Site

You’ll probably hear this book referred to as “the polar bear book”, just because the cover features a polar bear. But beyond featuring a nice illustration of a bear, this book clearly covers the process of creating large websites that are both easy to navigate and appealing to use. It’s a useful book for designers, information architects and user researchers.

How to Make Sense of Any Mess

Abby Covert

How to Make Sense of Any Mess

This is a great introduction to information architecture and serves as a nice counter to the polar bear book, being much shorter and more easily digestible. Author Abby Covert explains complex concepts in a way anyone can understand and also includes a set of lessons and exercises with each chapter.

User interviews

For those new to the task, the prospect of interviewing users is always daunting. That makes having a useful guide that much more of a necessity!

Interviewing Users: How to Uncover Compelling Insights

Steve Portigal

Interviewing Users: How to Uncover Compelling Insights

While interviewing users may seem like something that doesn’t require a guide, an understanding of different interview techniques can go a long way. This book is essentially a practical guide to the art of interviewing users. Author Steve Portigal covers how to build rapport with your participants and the art of immersing yourself in how other people see the world – both key skills for interviewers!

Usability testing

Web usability is basically the ease of use of a website. It’s a broad topic, but there are a number of useful books that explain why it’s important and outline some of the key principles.

Don't Make Me Think: A Common Sense Approach to Web Usability

Steve Krug

Don't Make Me Think: A Common Sense Approach to Web Usability

Don’t Make Me Think is the first introduction to the world of UX and usability for many people, and for good reason – it’s a concise introduction to the topics and is easy to digest. Steve Krug explains some of the key principles of intuitive navigation and information architecture clearly and without overly technical language. In the latest edition, he’s updated the book to include mobile usability considerations.

As a testament to just how popular this book is, it was released in 2000 and has since had 2 editions and sold 400,000 copies.

Design

The design–research relationship is an important one, even if it’s often misunderstood. Thankfully, authors like Don Norman and Vijay Kumar are here to explain everything.

The Design of Everyday Things

Don Norman

The Design of Everyday Things

This book, by cognitive scientist and usability engineer Don Norman, explains how design is the communication between an object and its user, and how to improve this communication as a way of improving the user experience. If nothing else, this book will force you to take another look at the design of everyday objects and assess whether or not they’re truly user-friendly.

101 Design Methods: A Structured Approach for Driving Innovation in Your Organization

Vijay Kumar

101 Design Methods: A Structured Approach for Driving Innovation in Your Organization

A guidebook for innovation in the context of product development, this book approaches the subject in a slightly different way to many other books on the same subject. The focus here is that the practice of creating new products is actually a science – not an art. Vijay Kumar outlines practical methods and useful tools that researchers and designers can use to drive innovation, making this book useful for anyone involved in product development.

See our list on Goodreads

We've put together a list of all of the above books on Goodreads, which you can access here.

Further reading

For experienced practitioners and newcomers alike, user research can often seem like a minefield to navigate. It can be tricky to figure out which method to use when, whether you bring a stakeholder into your usability test (you should) and how much you should pay participants. Take a look at some of the other articles on our blog if you’d like to learn more.

No results found.

Please try different keywords.

Subscribe to OW blog for an instantly better inbox

Thanks for subscribing!
Oops! Something went wrong while submitting the form.

Seeing is believing

Explore our tools and see how Optimal makes gathering insights simple, powerful, and impactful.