7 min Read

User Experience Design Principles for Websites

7 min Read

User Experience Design Principles for Websites

Mike Sayenko

What is the main purpose of a website?

There are websites for everything, from hobbies and personal journals to discussions and stores—but at the end of the day, the main reason for most websites’ existence is to drum up business leads or generate money. It can be direct, like selling products through ecommerce, or indirect, like keeping attention long enough to make ad revenue, or making someone interested enough to fill in a lead form.

If that’s the goal, then what makes for a good user experience (UX)?

A good user experience design is one that prioritizes how users get from their starting point to the point of conversion and revenue generation. That means it needs to make that user journey easy. Frictionless. Obvious. And it has to work for the kinds of people who visit that site. The right-brained audience needs an emotional connection with the content, a pleasing aesthetic, clear visual cues to lead them where you want them to go. The left-brained audience needs clear, logical layouts, and data-driven resources that provide value, and make them want to stay and click.

If this is so clear, where do some web design agencies go wrong?

Many web designers are too focused on the “design” part of their title. They’re obsessed with the latest trends and pushing their portfolio from a visual perspective only. You show them some sites you like and want to model off of, and they get to work on mockups. These designers see so many websites with standard features in navigation and organization that they want to be more artful and subtle—so subtle that the majority of users have no idea how to use the site and bounce. This is what we call “backwards web design.”

Instead of starting with the visuals, a good web design agency should start with the strategy first, then content, and lastly web design services which conforms to the previous two steps. You have to consider the user’s needs, challenges, motivations and behaviors, not just make a snazzy design that might win awards. It’s a waste of time, energy, and money to go the other way, and you’ll be shopping for your next web design agency after a few months of watching traffic and revenue slope downward.

The 22 UX web design principles and best practices in this article will help you not only build a more effective website, but also delight, connect, and build a memorable experience that stands out from the pack.

User Experience Web Design Principles:

  1. Website Content
  2. User Journey & Navigation
  3. Layout & Web Design

Website Content

Map Content to the User Journey

1. Know Your Audience

You can’t capture an audience’s heart if you don’t know what they think, feel, need, and want. Before you worry about making compelling content, learn about your current users and the users you hope to have. Create target personas that reflect the different types of customers you could serve, and a user flow chart that helps you understand what they’ll see first, next, and last. Only then can you map content out that will appeal to their needs and perspectives.

Key Takeaways

  • Create personas for each target user of your site

  • Create a user flow chart to determine where they’ll navigate

  • After you have a flow chart, only then can good content be made

website persona development

2. Pass The Trunk Test

Each page’s content should have a clear hierarchy. The users should be able to answer these questions on any site they visit: what site is this (is your logo visible?), what page am I on (is there a clear H1 headline), what am I in the site scheme (is there a breadcrumb available), and what are my options (make clickable elements obvious). Good UX in content means the user is never feeling lost for long.

Key Takeaways

  • Use clear headlines

  • Make sure breadcrumbs are clear

  • Present options for forward progress in the user journey

3. Make Your Content Scannable

People’s attention spans are shorter than ever. The average site user spends 1-2 minutes on a given website, which isn’t a lot of time to get their attention. Reduce the cognitive load of your design with short, concise, value-driven messaging, and split into easy to scan headlines. Ideally, a user could progress through your funnel without really having to read small body copy.

“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”
~ Steve Jobs

4. The Homepage is an Elevator Pitch

The user should know within 3-5 seconds what your company does. The most important info should stand out from the rest in that time, and someone who’s never heard of you should be able to recall what that information is. The homepage is about building a brand narrative with storytelling, and answering users’ main questions. Who are you? What do you do? How do you do it? Do you do a good job? Why should I go with you? And what should I do next? The goal is to build trust and credibility, without leaving the user stranded.

Key Takeaways

  • The user should know what you do in 3-5 seconds

  • Answer who you are, how you do what you do, and why to choose you

  • Don’t leave it up to users to assume important info

5. Scrolling is Easier than Clicking

While it’s true that your most essential content should live above-the-fold, the stuff below isn’t doomed to invisibility. Thanks to years of mobile web use and social media feeds, the average user has been trained to scroll down on a new site almost automatically. Not only is it expected, it’s typically faster and less mentally taxing than choosing a nav item and clicking on it, so placing information in section blocks to tell more of the story as users scroll is a great way to parse out information.

For example, if you’re a service-based business, you could group related resources, projects and case studies, and testimonials all on one page to be discovered as users scroll. Keep priority in mind, since you will lose more and more eyes the lower down the page a piece of content lives.

Key Takeaways

  • Users are trained to scroll down on websites now

  • Group related content together on one page to tell useful stories

  • Prioritize the most important info at the top of the page

6. Answer Users Questions

Anticipate the kinds of questions users will have on your page, and answer them throughout the content in a logical way. The main things people want to know about your offering are “does it solve our problem(s)?”, and “what are the benefits?” From there, more specific questions can be considered, like specifications about your product or service. Don’t leave them in suspense, answer the questions when they’d be most likely to be curious about the answer.

Key Takeaways

  • Answer who your offering is for

  • Discuss benefits before getting into features

  • Address questions as soon as a user might ask them

7. Optimize Text Container Width

Remember, the main goal is to get users to read the first few sentences. If you can hook them there, then they’re more likely to read more content, possibly all the way to the end. And to that end, your content areas shouldn’t be too wide, otherwise users on standard and extra large screens will find it difficult to track the words and bounce. Shoot for 480 to 700px width max.

“Typographical researchers, Bruijn et al., found that people prefer shorter line lengths when reading content online because it appears more organized and easier to understand.”
– source: Social Triggers

  • Tell users what to do next, in plain terms and imperative verbs

  • Don’t be subtle

  • Make visual cues, like buttons, big, bold, and obvious

user experience design content width

8. Body Text Should Be No Less Than 16px

Anything less and you will lose some users due to eye strain, especially if your target audience is mid 30’s and above.

Fun facts – “At age 40, only half the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%. 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens”
source Smashing Magazine

“[16 pixels] is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display… It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.”
– As usability expert Oliver Reichenstein says in “The 100% Easy-2-Read Standard

Layout & Web Design

16. Color Matters

Color is more than whatever Pantone says is in vogue. It’s more than just an expression of brand, important as that is. As far as user experience design is concerned, it’s a way to cue visitors of a site as to what elements belong together, and what is meant to stand out. It can even help denote what is meant to be interactive. For example, while outlines are helpful for separating sections of a site, even better would be full-width color blocks that alternate, section by section.

Color can help separate the most important text to read, like headlines and calls-to-action (CTAs). Trends and expectations come and go, but a good rule of thumb is to stick to no more than 3 core colors for the bulk of the design, not counting elements like photos or videos which would typically be more complex. Then, for the most important interactions like buttons, use a color that isn’t used anywhere else on your site. That way, users will always notice it, and always know that it’s clickable.

Key Takeaways

  • Group sections together with color blocks
  • Stick to 3 or fewer core brand colors

  • Make Call to Actions (CTAs) and clickable elements a different, bold color that stands out on the page

17. Use White Space to Avoid Visual Clutter

In design, “white space” or “negative space” refers to the space that surrounds elements. It doesn’t always have to literally be white, but simply washed out, plain, uniform, and not the focal point, allowing elements to stand out on top of it. How much white space and how you use it will impact the feel of your site, and the ability of users to navigate it. If it’s too cluttered with little negative space between different elements, it might feel like too much to take in—this is common in ecommerce and news publications, which have a lot of products, offers, and ads. If the site has a lot of negative space with few, or even just one focal element, it could feel empty, or it could feel tranquil. This is common in luxury brands, whose products’ value speaks for themselves, such as Apple or fashion brands. 

A clear and obvious balance isn’t always best. If everything is evenly spaced, then nothing has emphasis and visitors might not take actions you want them to take. Just remember that white space is an element in and of itself, not the absense of them.

Key Takeaways

  • Give content blocks breathing room—a minimum of 50px padding for top and  bottom

  • Adjusting the kerning and the leading can make a drastic difference in how easy it is to read your content

  • Use white space for legibility, to bring focus and attention, and lastly for design tone and branding

18. Prioritize Above the Fold Content

With all the different screen sizes available, above the fold isn’t a set height, but more of a principle. You have 1-2 focused areas to work with. Users wiill naturally notice items near the top of the page first, because that’s where they start. Good copy elements to include up top are a headline that draws interest and a short statement that clearly defines what’s on this page. Good visual elements are videos and images capture attention. Provide a button, if needed, in the top section to allow users to progress even if they don’t view the rest of the page. As far as UX goes, include suggestions in copy, background colors, or even explicit iconography like arrows that encourage users to scroll towards the remaining content.

Key Takeaways

  • Above-the-fold accounts for about 1-2 focused areas

  • Provide necessary buttons up here to guide the user, rather than only at the bottom of the page

  • Use visual and copy cues to encourage scrolling, if lower content is important

19. Standardize Buttons & Links

Everyone knows what a button looks like, so don’t get too creative or you risk confusionng the user. The button should look like a button, the color should stand out from those used consistently throughout the website. Buttons should have hover states to indicate an action. Remember to use common website patterns and user interfaces, don’t make them learn something new. Don’t confuse, for example by making bullet points look like a button withby having a circle around an arrow.

Links work in the same fashion—a link should look like a link. Users should never have to figure out where it leads, so make sure the anchor text is descriptive and complete. Color choice is important too, don’t use the same color for links and non linked text, as this will confuse the user. Stick to one standard color and style of text for links, avoid using those attributes for non linked text, and make sure that when links are clicked, they change color so users don’t have to remember where they’ve already gone.

Key Takeaways

  • Botton color should stand out from the rest of the website color scheme

  • Provide cues for linked text such as hover state or text decoration such as underlined

  • Don’t use the same color for links and non linked text

20. Reinforce Information with Icons

Icons have been a popular element in web design for a while, because they provide more information and clues than a headline would in less time, while taking up potentially less space and being more engaging for the viewer. Best of all, they can be relatively low complexity, reducing visual clutter and strain on the user’s attention span.

Good places for icons include representing services, company values, why us, and different features of a product. Make sure they’re consistent in their design treatment.

Key Takeaways

  • Use icons to reinforce information and break up content

  • Keep them simple, meaningful, and used sparingly

  • Be consistent in their design treatment

21. Build an Emotional Connection Through Images

Imagery provides the biggest influence on your website, enhancing your credibility and professionalism. Why? It’s what people see first and it brings forward an impression, whether that’s a good or a bad one. Don’t let the first impression be the last. Invest the resources in taking professional photography if at all possible.

If you have a salesforce that helps sell your products and services it’s imperative they’re on your website. People will want to know who they might be working with and it adds to the likeability on your website.

Images should be of high quality, demonstrate success, positive body language and vibe, and tell a story. Don’t have people’s backs facing the camera which comes off as cold and impersonal, and make sure images aren’t pixelated or stretched out. Don’t use cliche stock photography, like a bunch of businesspeople in suits looking at a conference room whiteboard, or a group of people jumping up and high fiving each other. Finally, avoid visual metaphors all together … just flat out bad!

Example of bad visual metaphors

Key Takeaways

  • Images should be of high quality, demonstrate success and positivity, and tell a story

  • Don’t use cliche stock photography

  • Invest in professional photography, especially when it comes to your team

22. Direct the User on What to Do Next

It’s not the user’s job to figure out what to do. It’s your job to tell them, which means you must understand their goals and needs. Prompt them with copy, visual cues, and clear calls-to-action. Subtlety isn’t your friend here—not every user is clued in on best practices, nor your thought process when designing their journey. Research shows people will simply leave your website sooner if there isn’t a call to action in place.

Key Takeaways

  • Tell users what to do next, in plain terms and imperative verbs

  • Don’t be subtle

  • Make visual cues, like buttons, big, bold, and obvious

Need help with user experience design for websites?

If you need a professional web design service with a strategic, user-centric perspective, we can help step you through our thorough process combined with our digital strategy services and custom WordPress development.

Download our UX Website Best Practices

We’ve already done the heavy lifting for you with our handy UX Website Best Practices PDF. It’s based off the lessons from this user experience design guide, and specific for website projects.

Website design rfp template

Download our UX Website Best Practices

We’ve already done the heavy lifting for you with our handy UX Website Best Practices PDF. It’s based off the lessons from this user experience design guide, and specific for website projects.

  • By submitting my details through this form, I agree to the Privacy Policy