User Experience refers to the experience people have when they visit your website or use your app. Think about a website or app that you use frequently. Is it easy to find what you are looking for? Do you sometimes complain or get frustrated when browsing the website? Have you at one point left the platform because of this? Or did you end up leaving with satisfaction, having found exactly what you needed?
All of this refers to the user experience. Web developers and designers have as their main goal to make the website as easy and pleasant as possible for users. You can apply this to a lot of different aspects of your website, ranging from the products you offer to the delivery services you have in place. What we’re going to focus on in this guide, is the user experience that is created by the web design.
UXD (User Experience Design) is the process of increasing the usability, receptiveness and enjoyment the user feels when interacting with the website or product.
Why is user experience design important?
People want to have a pleasant experience when they’re visiting a website or app. This means that they are more likely to stay on your page and go through the whole conversion funnel. When they experience things that they don’t appreciate, they might leave without having completed their goal.
Your user experience is important for your conversion rates, it’s important for your SEO (Google loves good UX) – but most of all, it’s important for your actual users. Having a user-centric design will ensure your website visitors have the best experience possible on your site, making them come back for more.
To create this positive experience, your design should be intuitive and it should meet the users’ needs. The information should be clear and simple, and the users shouldn’t be distracted by non-useful items. There are a few principles of UX design that we want to talk about, so you have a better understanding of the concept of UXD.
Now look at the home page of Amazon, where everything is organised well
Guidance
You want your customers to know exactly where they are in their journey. Your design should offer them guidance, so users know where they are on your website and what the next steps should be. Offering guidance to your users can be done through familiar patterns, that they already know how to use.
Buttons, for example, take them to other pages, arrows take them backwards or forwards and your logo makes them return to your homepage. By implementing these principles on your website your users will find it easier to navigate and they won’t waste any of their precious time on your website.
Personal
Your users don’t like interacting with machines. By offering them a personal experience you will gain their trust and you’ll be able to build a deeper connection with them. It also offers you the opportunity to show your brand’s personality.
Examples of offering a personal user experience include implementing features like chatbots, where you can offer live assistance on your website, or customer reviews, where they get another human input. But even simplifying certain processes on your website can lower the robot-aspect and add a more personal experience.
Easy
And that brings us to the third aspect of user experience. UX should always be straightforward, offering your users an enjoyable experience. This means you should avoid clutter at all times, removing every unnecessary aspect on your website.
And when we say that you have to remove the fluff on your website, we’re also talking about your content. Having unnecessary content on your page might distract your customers or confuse them, making them want to leave.
“Get rid of half the words on each page, then get rid of half of what’s left.” — Steve Krug
A good way to keep your website as easy and simple as possible is by creating consistency. Ensure your menu is always in the same place, your buttons look the same and your branding is consistent.
What is the difference between UX and UI?
We know what UX stands for (User Experience). But chances are high you’ve also seen the term UI passing by somewhere. Although closely related, those two are not the same thing. UI refers to the user interface and includes the more visible part of your website.
Since the user interface plays an important role in the overall user experience of your website, we will focus on some important components of the user interface in this chapter. Understanding what’s important for the user interface will give us a better understanding of user experience design and how this will take form in the user interface.
The structure vs. the looks
Simply put, UX refers to the structure of an app or website, while UI has everything to do with a website’s look. The name speaks for itself: UI refers to everything that a user interacts with – be it as buttons, keyboards or icons.
Say you have a website where you can find information about certain touristy places in Australia. The way the website works, looks and feels all contribute to a good user interface. It’s easy to select your desired destination and the information pulls up quickly. The fact that your overall user experience isn’t good, might be due to the fact that the website only includes the major destination, which means you can’t find any information about the place you wanted to visit.
Your UI and UX should work together, and we should optimise both to you guarantee a good website experience for your visitors. We’ll have a look at some aspects of UI now that are a good example of how your user interface contributes to a better experience.
Principles of UI
Breadcrumbs
Breadcrumbs are a way of offering users visual guidance on the website in order to increase its usability. Navigational breadcrumbs show users exactly where they are in the hierarchy of the site and make it easy to go back to a different category or part of the website. It’s often used in ecommerce websites to show what category the user is viewing at the moment. Breadcrumbs don’t require expert design skills but often just consist out of words and arrows.
Input controls
Input controls are mostly found on the website’s forms and refer to every feature where users have to reply to a question. This can be a text field, a dropdown list, toggles, buttons or a file input box.
To keep input controls on your website easy-to-use, you have to make them as simple and clear as possible. Ask only for the information you really need and don’t scare your customers away with dozens of questions to fill out.
Informational components
Informational components are elements on your website that offer users more information on an action or a page they’re viewing. Examples are loading bars, notifications or messages – to clarify if an action is completed or if other actions are required.
You’ll see that the concept of UI and UX are very closely related, and it’s almost impossible to talk about UX without focusing on the user interface. We’ll talk more about user interface later on, but we’re first going to focus on some other aspects of UX.
Important aspects of UX
User Research
When you focus on the experience for your users, it speaks for itself that you have to start by figuring out who those users are. By conducting extensive user research, we can define our customer group and get an idea of their needs and pain points. With this in place, we can make strategic design decisions, without any guesswork involved.
User Personas
To get an idea of who your customers are, it’s recommended to build buyer personas. Personas are highly stereotyped characters that represent a certain group in your target audience. In these personas you can include their need or problem they want to solve, and what they would expect from your company.
User Journeys
Once you have a user persona in place, it’s time to look at the journey they go through when they interact with your product. By mapping out every step, it helps you identify the different ways users can reach their goal.
The journey will often consist of a number of web pages and decision points that carry them from one point to another. Understanding how your users interact with these different steps will give you a good idea of what aspects of your website should be in place to complete the journey.
Usability
Another important aspect of UX is the usability of a product. This means we have to measure and understand the extent to which users can achieve their goals easily with your website. And by optimising these processes we can guarantee better effectiveness, efficiency and satisfaction.
We know it might sound a bit vague, but let’s look at this image of poor usability design.
Although this watering can might look pretty and is usable when it comes to holding the handle, it’s usability is very poor when it comes to watering plants.
Usability varies depending on the intent of the user because this watering can would function well if the user had the intention of watering the can itself (are you still with us?). Same goes for usability on a website, where the user’s intent and its environment determine the level of usability.
Visual Design
Even though usability is one of the most important aspects of UX, your visual design might even play a bigger role in this. Research has shown that post-use perceptions of both aesthetics and usability are highly influenced by a system’s aesthetics. We know people are attracted to things they find aesthetically pleasing, so this will obviously impact the way they perceive a website’s usability as well.
Visual design is a mix of graphic design and user experience design and focuses mostly on static images. It includes items such as illustrations, photography, typography, spacings and colours used to enhance the user experience.
We found another example for you to illustrate the importance of web design. This website has a very poorly chosen colour scheme, which doesn’t only make it hard to read some of the text, but also just isn’t aesthetically pleasing.
When we look at the design of this ecommerce store at the other hand, we notice soft colours with a high enough contrast and lots of white space.
Source: Natto
Especially for ecommerce websites, minimalistic web design is highly important. By simplifying your design, the focus will be on your products – and there’s less chance of your customers getting distracted by too much additional information. Other visual items such as high-quality pictures and organised category pages will not only be pleasant for users but will also increase your conversion rate.
Information Architecture
When you start to build something, you usually begin by contacting an architect who develops the structure of your house. Similar to buildings, information online also has a structure in place – beginning with a solid foundation from which you can start building. By structuring and labelling content on your website, information can be found easier.
Information Architecture (IA) is the beginning of your UX. You can consider it as some kind of blueprint, which web designers will use to build sitemaps, wireframes and navigational menus. It’s all about organising the information in a clear and logic way and UX designers can use a different system to structure everything.
Source: Adobe
Information architecture can be challenging when it comes to platforms with a lot of data, such as an ecommerce store. Nevertheless, you should think about a solid structure to categorize your products and to ensure customers find what they’re looking for. That’s why we dedicated a whole article on ecommerce structures, that you can find here.
Interaction Design
Interaction design is a discipline of user experience that focuses on the interactions users have with a website or app. Here too, is the goal of interaction design to make it possible for the users to achieve their goal in the best way. Interaction design overlaps a lot with the visual design, but also refers to buttons, error messages or even the physical objects (like a mouse or finger) that users use to interact with certain elements.
The process of UX design
Now we’ve talked about UX and some of the different aspects of UX. Like you probably noticed, a lot of these terms stay quite vague and often overlap with each other. Hiring a web design agency is the best solution if you need assistance with the whole user experience, going from user research to developing wireframes.
Let’s have a closer look at the UX process, so you can understand the different steps you have to take in order to create a great user experience for your website.
Research your market
Just like the development of a marketing strategy or branding strategy, your user experience should start with researching your target market and industry. Understanding your own industry and what the common practices are, will give you a head start when designing your own UX.
Looking at your competitors will help you discover different ways to enhance your own strategy. Compare at the visual design, interaction design and usability of the websites of your biggest competitors and create a competitor analyses sheet with their biggest strengths and weaknesses.
But research doesn’t only refer to other websites in your industry – you should also look at your own product. Usability testing will help you to evaluate how successful your own website is. To discover what’s working for users and what needs improvement, it’s best to test your product on actual users. There are different tools to check your website’s usability – like Hotjar or Crazy Egg – that will give you a good understanding of how people interact with your site and what they click on.
Understanding your users
When we have an understanding of our industry, we should take the actual users under a loop. We can define User Experience as making the whole experience as pleasant as possible for users. So we need to know who these users are.
We already mentioned user research in a previous chapter, but what we would like to add here, is that we shouldn’t just study the users, who they are and where they come from, but also their specific goals. Usability depends on the intent of the user, so we should simplify the process of reaching their objectives.
An ecommerce website, for example, is mostly visited because people want to buy something. This means we should optimise the structure of the website so people can quickly find the right products. The visual design too should be clear so people can easily discover the buttons to add items to their shopping cart. And lastly, we should improve the interaction design so the check-out process won’t confuse customers.
If we, however, say that the intent of the user is to find information (which is also often the case with ecommerce websites) we have to optimise different aspects. Examples include adding clear and organised product details and high-quality pictures that allow you to zoom in. Going over all these types of users and their different intentions will help you shape an idea of what is necessary for the user experience.
Start organizing
Then it’s time to gather the first ideas. With the user journey in mind, you can start with designing user flowcharts, to analyse the different steps users go through in the process.
Source: UXdesign[/caption]
This is also the phase where you think about your information architecture, and thus the different structures you can use to organise your website. You should define categories and subcategories and ensure all the information can be organised in a clear way.
These steps will be the important groundwork for your website. It will help you create hierarchy needed for internal links and navigational menus.
Once we’ve organised everything and have a clear overview of all the categories you can start making some first sketches. Visualising this will help you see your website or app getting more concrete.
Design wireframes
Wireframes are a visual representation of how the information is organised on key screens. The provide the skeleton framework and show how you arrange interface elements.
Wireframes don’t focus on what something will look like, but rather on its functionality. You don’t have to include any details but focus instead on the organisation of information, the hierarchy of content and how users will interact with every step.
Get creative
Now that we have our blueprint, it’s time to get creative. Enter the design work: it’s time to make decisions regarding colours palettes, images, fonts, icons and animations. Before you start, we recommend creating a mood board first.
Moodboards
Moodboards are a great way to give you some visual inspiration. You can collect colour palettes you like, icon designs you find fitting or even just images or fonts you think would work well. You can look at your competitors or even just look at other non-related brands you find visually attractive and place everything together. Collecting your ideas in a mood board will give you a better general overview. And this will definitely spark some ideas when you reach the designing phase.
Pinterest is a great tool for creating mood boards
Offer the solution
Your design process will be trial and error. There are so many different ways to visualise your original wireframe. We recommend playing around with colours, fonts, button sizes and images as much as possible before reaching the final design.
Of course, you have to be sure everything works the way it should. Once you have your prototype ready, it will be subject of many user tests. During which you can focus on both the aesthetic features and usability. Look at how your testers interact with your website to figure out if they understand the way you intended it to work. Designing a website or app comes with a lot of testing and adjustments until you have the final work-ready.
