UI and UX are two terms that are often used interchangeably and confused for one another, but what do they actually mean? And is there a crossover between them?

‍

These two terms have only grown in use in recent years, thanks largely to the exploding technology sector. This is great news. For organizations, effectively harnessing UX and UI enables them to build products and services that people will actually want to use – and continue using. For users, they’ll have access to products designed for them. 

‍

What is UX? 🤳🎯

‍

User experience (UX as it’s commonly called) refers to the experience that a person has with a product or service. 

‍

We can determine whether a user experience is good or bad based on how easy (or difficult) it is for users to interact with the various elements of a product or service. Is the sign-up flow easy to use? Does the CTA button on the homepage encourage users to click? UX design exists to answer questions like these – and here’s how.

‍

At the core of UX design is user research, which you can use to understand customer pain points and actually build products designed for the people using them. Typically, user research involves the use of a number of different research methods designed to answer specific questions. Card sorting, for example, can show you how people think the information on your website should be arranged.

‍

Designer and information architect Peter Morville came up with the user experience honeycomb, which demonstrates the various components of UX design.

‍

‍

Don Norman of Nielsen Norman Group defines UX as “[encompassing] all aspects of the end-users interaction with the company, its services, and its products”.

‍

If this seems broad, that’s because it is. UX actually extends beyond just the digital products of an organization and can be used for areas like retail, customer service and more. In fact, there’s actually a growing movement to replace UX with customer experience (CX), as a way of encompassing all of these disparate elements.

‍

What is UI? 🪄📲

‍

User interface (UI), in the most stripped-back definition, is the interface by which a user and a computer system communicate with one another. This includes the touchscreen on your smartphone, the screen on your laptop, your mouse and keyboard and countless other mechanisms.

‍

With this in mind, user interface design is focused on the elements that users will see on these interfaces, such as buttons, text and images. UI design is all about layout, look and feel. The objective of UI design is to visually guide users through an interface so they can complete their task. In a nutshell, you don’t want a user to think too hard about what they’re doing.

‍

‍

‍

UI has its origins in the 1980s, when Xerox developed the very first graphical user interface (GUI). Instead of needing to interact with a computer through a programming language, people could now use icons, menus and buttons. The rest, as they say, is history. Apple came along with the Macintosh computer in 1984 (bringing with it the first point and click mouse), and now we’re all carrying smartphones with touch screens that even a baby can operate.

‍

Like UX, UI has grown significantly – going far beyond what you’ll see on a computer screen. Those involved in the field of UI design today will work as much on the interfaces of computer programs and apps as they will on the user interfaces of cars, wearable devices and technologies in the home. If current trends continue, UI design is likely to become an even bigger field in the years ahead.

‍

What’s the difference between UX and UI? 👀

‍

UX and UI are both essential components of a product or service. You can’t have one without the other, and, as we’ve explored, neglecting one could have serious consequences for your product’s success.

‍

The difference between UX and UI is that UX is focused on the experience of using something and UI is focused on the look and feel of the interface. 

‍

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success”. - Rahul Varshney, co-creator of Foster.fm

‍

The difference between UX and UI is that UX is focused on the experience of using something and UI is focused on the look and feel of the interface. 

‍

Or, if you’d prefer a statement from venerable Nielsen Norman Group: “It’s important to distinguish the total user experience from the UI, even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios”.

‍

With this in mind, let’s now take a look at the people behind UX and UI. What do the roles look like in these fields? And, more importantly, what do they involve?

‍

UX and UI jobs guide 📱🧑🏻💻

‍

• Visual designer: This role works with other design roles in the organization (brand, marketing, etc) to ensure designs match brand guidelines. Visual designers also work with UX designers to verify that designs meet accessibility and usability requirements.
• UX strategist: At the core, a UX strategist should act as a champion of good UX. That is to say, work to ensure the principles of usability and human-centered design are well understood and utilized. They should also assume some of the responsibility of product-market fit, and work with product managers and the ‘business’ side of the organization to mesh business requirements with user requirements.
• UX designer: The most common UX profession, UX designers should have a strong understanding of the principles of UX design as well as some research ability. Essentially a jack of all trades, the UX designer will float between all stages of the UX lifecycle, helping out with usability tests, putting together prototypes and working with other areas of the organization.
• Service designer: The service designer looks at the entire end-to-end process and works with other designers, pulling them when required to liaise on visual designs and UI work. In a smaller organization, the responsibilities of this role will typically be absorbed by other roles, but eventually, there comes a time for the service designer. 

‍

Wrap up 🎬

‍

UX and UI as terms are only going to continue to grow, especially as technology and technology companies continue to proliferate across the globe. If you want to make sure that the user experience and user interfaces of your product or service are fit for the people using them, there’s no better place to start than with user research using powerful tools.

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.

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.

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.

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.

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.

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.

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”.

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.

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 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.

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.

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.

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.

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?

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.

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.

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.

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.

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).

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.

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.

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.

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’.

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!