The User and Your Website – A Crash Course in UX Web Design

Have a website? That’s a great place to start. But a better question to ask is, is your website working for you? Many, in both the design and business worlds, design based on their own style and preferences. But at the end of the day, it’s the user who actually interacts with the website. In order to create a website that meets your users’ needs and helps you achieve your business goals, understanding UX and how to apply it is essential. With over a billion websites on the internet, a great user experience is a powerful way to set you apart from the rest.

People go online for a variety of reasons – social media, research, watching cat videos, etc. So what does “good” design look like? When breaking down the overall goal of UX we come to one conclusion; our job is to make the users productive. Each site has its purpose and the goal of UX is to help the user engage with the site in a natural way that helps them achieve or participate in the site’s purpose. In this post, we will walk through the basic, yet important, aspects of UX and how you can begin to apply them today.

The User

Knowing who our audience is, is the first step to creating a user-focused experience. Doing the research upfront can seem very time-consuming, but the benefits you will see on the other side are well worth the time and effort.

1. Subjective vs Objective: During your research you will explore a number of different aspects of your users. Some of these will be hard facts and others will be assumptions. You are going to want a mixture of both. Too many bases all of their research on assumptions. While you can get lucky, more often than not you are going to miss some key elements. Put in the extra effort and get to know real-life users and ask them questions about themselves. Connecting real people to the process will give you the insight you never could have come up with on your own!
2. Motivation: Understanding what intrinsic and extrinsic motivators impact your users can unlock some powerful data. Motivation leads to action, and a lack of motivation leads, well, to inaction. By understanding how our users are motivated, we can help connect them with the site’s overall purpose and encourage them to take action.
3. Building Personas: A buyer persona is a semi-fictional representation of your ideal customer based on market research and real data about your existing customers. (Hubspot) Using a buyer persona template is a great way to collect your data and help you to organize the process. Having a detailed buyer persona will help you focus your time, guide your site development, and help align all other aspects of your marketing and design.
4. Devices: Why put devices here? Good question. Knowing what your average user’s primary device is will help you focus on what matters most. In today’s world, that will most likely be mobile. So, designing for mobile is not just about being the most popular but the most user-centric. From there, you can back your way out to the tablet and full-resolution versions. Using a responsive design will help the process go much smoother.

Information Architecture

Information architecture refers to how you lay out the content on your site. To better understand this, we need to use a sitemap. Having a navigation that is easy for the user to understand and use is essential to a good user experience. We live in a world obsessed with trends and copying what the “big guys” do without ever really asking, “Does this make sense for me?” One example of this is the hamburger menu. While some find it trendy, it confuses most users causing them to bounce rather than spend the extra time trying to figure out where to go.

Flat vs Deep:  One question you need to ask yourself is whether you want flat navigation or deep navigation. FYI: both are a really bad idea. Flat navigation includes more sections in the top menu. This requires fewer clicks to reach the bottom. Deep navigation has fewer top-level choices but expands once you click or hover over an item. Again the goal of information structure is to give your user a clear path to find what they are looking for. For more information on architecture and categories you should consider, check out this great post.

Breaking Down Visual Design

The visual elements of your site have a huge impact. Why? The brain processes images 60,000 times faster than it does text. And it’s more accustomed to processing images‚ ninety percent of the information sent to the brain is visual, and 93% of all human communication is visual. So the way your site looks has a big impact on how your user perceives you and your brand. Here are some commons aspects to consider when exploring the visual design of your site.

1. Weight: Some items just draw more attention than others. These items are referred to as “heavy.” Using heavy elements, you can draw a user’s attention to a specific area of the design. A few ways to add or subtract weight to a design are contrast, depth, and color. Contrast: Contrast refers to the difference between light elements and dark elements. Depth:  Depth shows how close or far an object is relative to the user. Color:  While color plays a number of roles, one thing it can definitely impact is the weight of the site.
2. Colors: Colors play a huge role in design. Whether you are using full color or black and white, the color scheme you choose will set different moods. Just look at the chart below. Each of the colors in the wheel causes a different emotion.
   
3. Repetition: Repetition is a powerful design tool. Knowing when and when not to use it is the trick. Remember Windows 95, when you could set your own background that would repeat across the screen a thousand times? Yeah, that’s a bad use of repetition. When used correctly, repetition can help create a flow that both directs users and adds familiarity across the site.
   
   
   Breaking a pattern is a great way to attract the user to an important element. Make sure you only use pattern-breaking where it makes sense. If used in the wrong way, you can actually distract your users from your core objectives.
4. Alignment: Like color, alignment speaks. Having things close together suggests that they are related. Buttons with similar functions can be aligned. Different levels of content can be aligned. Information can be in a grid of rows and columns like a spreadsheet to create complex meaning.

Functional Design

The functional layout of your website is where everything we’ve talked about above comes together. When laying out the functional design of your website, make sure that you keep your users in mind! So many times, designers get carried away when piecing elements together and forget all the prep work they did.

1. Above the Fold (Scroll): Today’s users have shorter attention spans than goldfish. This means you need to provide your user with what they are looking for quickly. “Above the fold” refers to the content that is visible without having to scroll down the page. This is where you want to make your bold statement about why you exist and what you can do.
2. Images: As we stated above, humans are visual creatures. This means you need to use images that clearly depict who you are and what you do. There are now a number of great sites where you can get high-res images for free, so having bad pictures is no longer good enough.
   
   Here are a few we use:
   gratisography.com/
   https://unsplash.com
   https://www.pexels.com/
   https://pixabay.com/
   
3. Conversion Elements: Having conversion elements on your site is a must if you want to generate business. But forms and CTA’s (calls-to-action) should fit in your design seamlessly. When creating forms, use the same font and color scheme as your site. For CTAs, use contrast, color, and alignment to draw attention. The goal is to assist the user, not distract.

While we only scratched the surface of UX and how to apply it to your website design, using these tips will get you headed in the right direction. Everything stated above is guidelines, not rules. The “U” in UX is for the user and every user is different. This is why tracking how your users are engaging with your site can help you to adapt your site to better fit their needs. We use a tool called Hotjar which gives us real user data on how our users are engaging with us. Try Hotjar for free here. 

At the end of the day, all site owners have to come to grips with one simple truth – your website is not for you. It’s for your users. By understanding who they are and what speaks to them, you can create a website that delivers your message in a more impactful way. If you have more UX tips, please share them with the community in the comments sections. By working together, we all can get better!