How to Design a Website with Your Users in Mind

When people need a new website, they almost always start with the design—how it’s going to look. And while visual design is always important, you need to consider the underlying structure. This is often referred to as the “information architecture.” And once you’ve built a website, you need to make sure it meets the needs of the people who use it.

In this article, we’ll examine all of the pre-planning that goes into building a website as well as some best practices for usability and accessibility so it will get a thumb’s up from your customers.

The Basics

Before you start designing your website, you need to take some time to consider the following questions:

1. Who is your primary audience?

1. What are the top 1-2 things that you want that audience to do when they find your website?

Now, there can be many answers to these questions. Your goal is to drill down and come up with the most specific answer for each that you can.

Who’s Your Audience?

Identifying your primary audience can be challenging. After all, you want everyone to visit your website, right?

Although we’d love to have the whole world as our potential customers or clients, we know that’s not realistic.

Think back to when you created your business. You should have identified your ideal customer when you wrote up your business plan. If you run a bookstore, for example, you already know if you’re catering to college students or lovers of old books, bargain seekers or mystery readers. A graphic designer should know if they’re looking to attract clients primarily looking for logos, website design, or animation.

Next, imagine your ideal customer, and give her a name. This is called a persona, and it allows you to put yourself in her shoes. Let’s say her name is Daisy.  What’s her age? How much education does she have, and what’s her degree of comfort with technology? How will she use your site? Is she more likely to go to your website to learn more about you and your services, or to purchase products online? Does a chatbot make sense—or will it drive her away?

Identify the Primary Goal of Your Website

With few exceptions, every website should include information about you and/or the business (e.g. your history, credentials, or philosophy), and how to find the business and/or contact you.

Beyond that, what you include is going to depend largely on the main purpose or goal of your website.

Once you know your ideal customer, you need to determine the main thing they should do on your website. Thinking back to Daisy, do you want her to be able to find your restaurant’s location and phone number, and maybe a map? Or maybe you run a chiropractor’s office and she needs to be able to schedule an appointment. Other goals might be to purchase a product or sign up to your mailing list.

And we get it—a website contains lots of information and options. The point here is to figure out the #1 thing you want your customers to do. Everything else you include on your site, including a blog or other information, should support that primary goal.

Once you know that purpose, that’s when you can start focusing on your homepage. Don’t waste your customers’ valuable time by making them search for that one thing. Let them do it as soon as they click on your URL.

Before You Design, Wireframe

Once you know the audience and purpose of your website, you can start figuring out how it all goes together. Rather than jump right into a website builder or WordPress, it’s worth taking a few minutes to do a wireframe of your site. This is a sketch (on paper or using simple online tools) that considers the basic layout without any colors, logos, or other design elements, all while keeping your goals and ideal customer (Daisy!) in mind.

Creating a wireframe can be as simple as getting out a piece of paper, drawing a box, and then filling it in with where you want your logo to go, how you want your navigation menu bar to work, and how the rest of your content should fit together. If you prefer a digital solution, you can try one of these online tools:

• Canva (free)

• InvisionApp (free)

• Balsamiq (has a free 30-day trial)

• Adobe XD (offers a free starter plan perfect for one website)

• OmniGraffle (has a 14-day free trial)

As you build out your wireframes, keep in mind the design for your homepage (or landing page) might be different from your blog or ‘About Me’ page, so you may need to have a few wireframes in hand.

The good news is that once you have your wireframes, it’s a lot easier to communicate your needs with a web designer. On the flip side, if you’re going to do it yourself, having those wireframes in hand will make it much easier to choose a theme for your site because you’ll already know your “must haves.”

Ensure Your Site Is Easy to Use

Have you ever been to a website and had to dig around to find the basic information you needed, like how to get in touch regarding a question or complaint? Or you try to get to a page with the information you need but you can’t click on a drop-down menu?

When you’re building your site, here are some best practices to keep in mind.

• Don’t overload your top navigation menu. Unless your site is a shopping site, try to keep your menu to 5-7 items, and avoid drop-downs. If you can’t narrow it down, try a card sort, where you list every possible option or category and then sort them into “buckets” until you come up with menus that work. A free tool that works well for this is Stickies.io.

• Be straightforward when labeling your menu items. People have clear expectations when they see “Contact”, “About”, etc. Using creative alternatives can add character but will also be more confusing to your customers.

• Use your footer wisely. This is the best place to put things like your terms of service, copyright notice, email sign-up, privacy notice, and other routine information. You can also put your contact details there.

• Less is more. You don’t need to stuff your home page with every detail about your business. Use as few words as possible and think about your overall message. Your goal is to convince someone to click on your “buy/subscribe/schedule” button right away. If you have a compelling story or product, tease it on the home page (videos are great, by the way) and provide links in the menu to learn more.

• Limit calls to action. CTAs are your “buy my product”  or “sign up to my mailing list” links or buttons. The most effective strategy is to include only one CTA per page or blog post. If you have multiple CTAs on a single page or blog post, you force your site visitors to decide between them, and they are less likely to click on any of them.

• Don’t forget mobile design. Every day millions of people visit the web via their phone or tablet. Think about ways you can collapse a complex website into just the essentials, and find a website theme that automatically includes responsive design. So don’t make mobile an afterthought—it needs to be front and center throughout your design process.

Provide a Good Experience for All Users

Experts estimate that at least 20% of the visitors to your site may have some sort of physical limitation. If your primary audience includes the elderly or people with health concerns, that figure will increase dramatically. That means some of your visitors may use adaptive technology such as screen readers, voice commands, special keyboards, mouth sticks, or text-only browsers. Others may not be able to see images or use a mouse.

Although there are both software and hardware that make the Internet more user-friendly, going online when you’re blind or have mobility impairments can still feel like you’re navigating a minefield. So taking a little time to ensure your website is accessible to them will increase the number of people who can use your information.

Here are some quick fixes you can include in your design that will make your website far more accessible:

• Make your navigation easy to find (and use). That includes menus, footers, sidebars, search boxes, and any other techniques you use to help your site visitors find your content. Avoid unnecessary dropdown menus as they can be difficult to click on. 
  

• Users should be able to tab through navigation options. Allowing your navigation menu to work with the tab key can make your site a lot more accessible to people who can’t use a mouse to click on menu options.
  

• Use a proper hierarchical structure. That means the header or title of your page should be styled as H1, major subheaders as H2, and so forth. Don’t use HTML header styles to change the size of your text—that’s what your custom styles (CSS) are for.

• Displayed text should have significant background contrast. It’s not helpful when you have gray text on a black button.
  

• Don’t rely solely on color for functionality or meaning. If you change the color of your links, but don’t underline them or otherwise distinguish them, people who are colorblind may not be able to find them.
  

• Don’t use images without text for buttons or navigation. If someone can’t see the image, they won’t be able to use your website.

• Make linked text meaningful. Hyperlinking text like, “read our article about African elephants” will be much easier for someone on a screen reader to follow than a link that simply says “read more.”

• Include transcriptions of audio or video content. Not only will that help people who have limited vision or hearing, but it will also vastly improve your SEO.

Although this might seem like a lot of work, making your website accessible means it will become easier for everyone to use. If you’d like to learn more about how to make your website fully compliant, the W3C Web Accessibility Initiative (WAI) offers detailed information on accessibility standards.

Mobile Makes All the Difference

When you’re designing a new website, you can’t ignore the mobile experience. According to data site Statista, in 2018 over 50% of all web pages were viewed on a mobile device.

There are a few ways you can approach optimizing your website for mobile:

• Use a responsible theme for your website that translates well to mobile platforms.
• Provide a different theme specifically for mobile devices. These designs usually simplify the main elements of the website and offer different navigation and functionality than a desktop site.
• Build a mobile app if your site offers ecommerce or other advanced functionality.
• Consider a plugin for WordPress sites which offers mobile functionality such as WP Touch or Jetpack. (Caveat: some themes work better with mobile plugins than others).
• Optimize for local SEO. A lot of mobile traffic comes from people searching away from their desk. When they’re looking for a place to eat or trying to find your store, make sure you show up on Google and your information is easy for someone to use on the go.

Whichever direction you go, make a commitment to taking mobile design seriously, and you’ll be rewarded with increased traffic and conversions.

The Tip of the Iceberg

We hope this article has given you some new ways of approaching your next website, but it’s really just the beginning. If you’d like to learn more about information architecture, usability, or accessibility, we invite you to consider some of the following resources:

• CSS Tricks –  Started by Chris Coyier, this website is about far more than CSS. He talks about design, coding, WordPress, and more. Check out his Guides to learn HTML and CSS, JQuery, web typography, and other topics.

• Smashing Magazine has great articles on website design and best practices as well as additional resources for designers.

• A Beginner’s Guide to Information Architecture for UX Designers (from Adobe).

• The Most Common Web Accessibility Issues to Avoid

If you have additional tips to share with our readers or additional online resources that have helped you build great websites, we’d love to hear from you in the comments.