Website User Experience (UX) Design | Tricks Scooter

When thinking about the website user experience (UX), there are three aspects to keep in mind:

  1. There should be a clear path for the user to follow
  2. A website should have ‘responsive design’
  3. A website’s design should be accessible

A website should have all three in order to provide a good user experience. So, let’s take this one by one.

1. Clear Path

The path that customers take when they reach your website is called the user flow. The path you design for users must be clear and intentional.

The user flow begins with your website’s layout and navigation. These need to be clear, consistent, and complete. You want to have a good idea of the different steps you want your customer to take. Consider where in the website you think your customers will enter, and which next steps you want them to take.

Aside from the layout and navigation, the website copy (written text), can also help keep customers moving in the right direction. You want each step the user takes to bring them closer to your objective or, said another way, the action you want them to take. This is often called the conversion path.

The conversion path often ends with a ‘Thank You’ page. The thank-you pages are important. They reassure your user of their action and they are a good opportunity to move the user along in the flow. For example, they might encourage users to check their email, promote your company and share on social media, or go to another section on your website.

Example: User Flow for Betabrand

Websites can have many paths in and out of the site and therefore, many users flow. Let’s look at one user flow for Betabrand.

Step 1

USER FLOW DIAGRAMS

A user could start on the Betabrand homepage, and click on the ‘Yoga Pant’ product picture he/she finds there.

Step 2

Example of User Flow

The user lands on a page where she can select which type of yoga pants she would like

Step 3

A page follows where color and size selections can be made and the user can click to buy the pants.

Step 4

Example of User Flow

The user then sees the cart page, indicating something has been added to the shopping cart and from here the user can go to check out.

Step 5

Example of User Flow

The user can then proceed to check out.

Step 6

The user is sent an email to confirm the order, closing the loop on the action the user took.

User Flow Diagrams

As you can see, this path is clear and short. There are only 5 steps to checkout, which aligns with Betabrand’s objective, and there are no distractions that could take the user off that path.

It’s helpful when building or evaluating a website to draw out how the user flow of your website should work. Here is an example diagram of three different user flows:

Alternatively you can use a more technical diagram like this:

USER TECHNICAL FLOW DIAGRAMS

This type of diagram may more effectively communicate the user flow you want to your website designer and developer. These technical diagrams often utilize commonly known symbols for different steps that distinguish the start or the end of the flow, the direction, the process or page, and the decision.

USER FLOW DIAGRAMS | Tricks Scooters

In any case, you will want your user flow to be organized around your objective and have defined start and endpoints. Having a user flow diagram related to your main objectives will help you to measure how successful you were at reaching those objectives, and it will come in handy when you set up tools like Google Analytics to evaluate success (we will see more about that later).

If you’re just getting started or need to redesign your current website, it is a good idea to first develop a ‘wireframe’ for your website. Wireframes are sketches of how you want the navigation on your website to flow.

They are a very rough way of laying out your website and the different actions a user can take on each page. You can start with the main user flows you have in mind, and then think through the full structure of your website (or app). There are tools that can help you with this, e.g. Balsamiq and Proto.io.

2. Responsive Design

RESPONSIVE DESIGN | Tricks Scooters

You want your website to be responsive. This means that your website is designed to be viewed and used with multiple devices, like a desktop, tablet, or mobile phone, and will automatically respond to the dimensions of that device, providing a tailored experience.

You will want to talk to your website developer about designing your site in such a way that it responds to different screen sizes. Off-the-shelf website building tools like Squarespace, Wix, Weebly, etc. have many responsive designs for customers to choose from. Example of responsive design

3. Accessible

You want your website to be accessible. This means you’ve designed your site so that people with disabilities can interact with it.

For example, making sure to underline links in addition to changing their color so that color blind people can distinguish that there is a link or even coding a page so that users can navigate it by means of a keyboard alone.

Finally, studies have found that 55% of visitors spend fewer than 15 seconds on a page. That means you don’t have a lot of time to make a good impression. So make sure that the path you create for your users is clear, contains excellent content, and gets them to your goals quickly.

LEAVE A REPLY

Please enter your comment!
Please enter your name here