Web Page Design Guidelines for Accessibility and Usability

Good web design is not just about making a website look pretty, it's also about making it accessible and usable for everyone. According to the Web Content Accessibility Guidelines (WCAG 2.1), a website should be perceivable, operable, understandable, and robust.

To make a website perceivable, it's essential to use clear and consistent navigation. As mentioned in the article, a clear and consistent navigation is achieved by using a consistent layout and design elements throughout the website. This helps users with cognitive or learning disabilities, such as dyslexia, to easily navigate the website.

A website should also be operable, which means it should be possible to use it with assistive technologies like screen readers. This is achieved by using ARIA attributes, as discussed in the article, to provide a clear and consistent reading order for screen readers.

Clear and consistent design elements are also crucial for making a website understandable. According to the article, a clear and consistent design helps users to quickly understand the website's purpose and structure.

A well-designed layout is essential for a website's success. Consider the 10 rules for designing website layouts that work, which include guidelines for making your website layouts not only more stylish, but more effective too.

To get started, create some basic templates for your main layouts, which will define how your pages are structured. You can implement these using HTML and CSS. Other important parts of a style guide are the layout, grid, and spacing rules.

White space is good. It helps to reduce the cognitive load for the visitors and makes it possible to perceive the information presented on the screen. Complex structures are harder to read, scan, analyze, and work with, so it's usually better to use whitespace instead of visible lines.

To create a well-scannable layout, use white space as a primary design element, like Cameron.io. This will give the content a dominating position it deserves.

The homepage, or landing page, is the focal point of your website. It should set the stylistic tone for the rest of the website and direct users to other pages using calls-to-action, visual cues, or menu options. A good rule of thumb is to abide by Hick's Law, ensuring that users are only presented with a limited number of options for how to proceed.

Here are some core pages that all sites need:

Design each of these pages to accommodate different elements. Use wireframes to work out how elements should be arranged on different pages of a site. Wireframes are visual guides that represent the skeletal framework of a web page.

Understanding how users interact with websites is crucial to good design. This involves understanding how they think and what are the basic patterns of users’ behavior.

Users are often distracted by cluttered layouts, which can prevent them from taking the next step you want them to. Cluttered layouts can make a website look unbalanced and overwhelming.

To avoid clutter, remember that white space is your friend. It helps to create a clean and uncluttered design that guides visitors through your website.

Understanding your users' behavior is key to creating effective web design guidelines.

Typography and color are crucial elements of web page design, and getting them right can make all the difference in how users interact with your site.

Color is a powerful tool for unifying the pages of your website and affecting the mood and perception of users, with HEX codes being a coded version of an RGB color in the format #RRGGBB.

To create a cohesive look, it's essential to define your color palette, including primary, secondary, tertiary, and neutral colors. You can use the theory of color psychology to inform your color decisions, as different colors have strong psychological effects on viewers. For example, neons, orange, blue, green, and white can have distinct effects on users' perception and response to your website.

When choosing colors, remember that your brand colors don't have to be the only colors on your website. In fact, using bright colors as accents can be effective, but using them as backgrounds can strain users' eyes and make it hard to read text. A good rule of thumb is to use a maximum of three typefaces and three point sizes to keep your typography consistent and legible.

Here are some key typography guidelines to keep in mind:

Some of the best fonts for websites include clean, geometric sans serifs or chunky display types, which are more legible than serifs or italics. You can install web fonts onto your website, allowing you to closely specify the style of the typography on your site.

Using images or graphics to direct users is a tried-and-tested technique for guiding visitors to important actions.

This technique is effective because it taps into our visual intuition, making it easier for users to follow instructions. Using arrows pointing towards a menu option, for example, can help users quickly identify where to click.

Photos of people looking towards a button can also be effective in directing users' attention. This technique is especially useful for users who may not read instructions carefully or need a bit of extra guidance.

A clean and modern visual style can also help communicate credibility and trust, making it more likely that users will follow visual cues.

Typography is a crucial aspect of web design, and it's essential to create a typography hierarchy in your style guide to ensure consistency throughout your website. This includes defining font families and sizes for main headings, H1-H6.

To create a typography hierarchy, you'll need to include styles for running (body) text as well as forms, alert messages, and more. These styles will include font families and sizes, written in pixels (px), and should remain consistent across elements.

Font sizes should be progressive, such as 14px, 16px, 18px, or 20px, and avoid intermediate sizes like 15px. This will make it easier to expand your website and add new pages in the future.

Here are some key typography principles to keep in mind:

By following these principles and creating a typography hierarchy in your style guide, you'll be able to create a consistent and user-friendly typography system for your website.

Defining your site's identity is a crucial step in creating a cohesive and engaging user experience. A uniform look and style across all pages of your site is essential for keeping visitors engaged and interested in your content.

An effective site identity includes several key elements, such as a site icon, logo, typography, and color scheme. These elements work together to create a recognizable brand identity.

A site icon is a small visual graphic that represents your site, while a logo is a more comprehensive version of the site icon that may include text, such as a company name. Logos need to be sized appropriately to work effectively across different devices.

Here are some key considerations for your site's identity:

To ensure your logo looks good on standard displays and retina displays, it's recommended to double the size of your retina logos. For example, if your website CMS prompts you to upload a logo sized 100 by 100 pixels, you should upload a 200 by 200 pixel version.

Accessibility and usability are crucial aspects of web page design. Everyone who works on government websites has a role to play in making federal resources accessible and inclusive.

Designing with accessibility in mind means considering the needs of a broad range of users, regardless of their abilities. This includes users who navigate with a keyboard, use a screen reader, or have difficulty interpreting visual content. To ensure accessibility, ask questions like: Can users navigate your site using only a keyboard? Can users use a screen reader to access all page content?

Here are some essential questions to ask your team as you account for accessibility requirements and features:

By prioritizing accessibility and usability, you can create a better product for all users and make your website more effective and user-friendly.

Minimizing cognitive load is crucial for creating an accessible and usable website. According to Krug's first law of usability, the web-page should be obvious and self-explanatory.

To achieve this, you should aim to reduce the number of question marks that users need to answer consciously. This means making the navigation and site architecture intuitive, with a clear structure and moderate visual clues.

Let's take a look at an example. Beyondis.co.uk claims to be "beyond channels, beyond products, beyond distribution." But what does it mean? This is an unnecessary question mark that users need to answer.

By reducing cognitive load, you make it easier for visitors to grasp the idea behind the system. According to Steve Krug, testing one user early in the project is better than testing 50 near the end.

Here are some key points to keep in mind when minimizing cognitive load:

By following these principles, you can create a website that is intuitive, easy to use, and accessible to all users.

Embracing accessibility is not just a legal requirement, but a way to create a better product for all users. Legal requirements are a critical starting point, but they're only the beginning.

Accessibility affects everybody, and it's about usability for the broadest possible audience. Everyone who works on government websites has a role to play in making federal resources accessible and inclusive.

Design generously and celebrate accessibility requirements as a set of design constraints that help us create a better product for all users. By asking your team the right questions, you can ensure that your site is accessible to everyone.

Here are some useful questions to ask your team:

Humanizing accessibility can make it less abstract and more personal. Seek out examples of the real-life impact of accessible products and services to make it more relatable.

To create a cohesive and consistent web page design, it's essential to define rules for using your logo in all its variations. This includes guidelines for the logo's grid, font, colors, correct spacing and placement, appearance on different backgrounds, and more.

A style guide is a single reference source that consolidates all your design decisions, helping to keep your vision consistent across all pages and elements. It's a vital resource for web design teams, maximizing efficiency and minimizing tedious tasks.

A well-crafted style guide can serve as a reference for making the right decisions for future designs, saving time and reducing anxiety. It can also be an effective way to increase brand familiarity, provide a sneak peek into the working process behind your website, and share downloadable brand assets with clients, affiliates, and the press.

When working with user experience (UX) design, it's essential to have access to reliable resources outside of government websites. The laws of UX, found at lawsofux.com, offer valuable insights into the principles that govern how users interact with digital products.

The Laws of UX provide a framework for designing intuitive and user-friendly interfaces. For instance, the law of visibility states that users should be able to see what they need to do to complete a task.

If you're looking for more resources, A List Apart is a great place to start. With articles, books, and events for people who make websites, alistapart.com is a treasure trove of information on UX design and related topics.

A List Apart's content covers a wide range of topics, from accessibility to user research. Whether you're a beginner or an experienced designer, you'll find something to help you improve your skills and stay up-to-date with industry best practices.

Having a style guide is essential for web design teams, as it helps everyone involved maximize their efficiency and minimize tedious tasks like finding specific colors or button styles.

A well-crafted style guide serves as a reference for making the right decisions for future designs, saving time and reducing anxiety about whether the result is correct.

With a style guide, you can define the rules for the usage of certain features, making it easier to make decisions and avoid confusion.

By making your style guide publicly available, you can increase brand familiarity and create an impression of your brand's values and personality.

Sharing your style guide can also provide a sneak peek into the working process behind your website, giving visitors a unique perspective on your brand.

Your style guide can be a smart place to share downloadable brand assets with clients, affiliates, and the press.

To create a unique and consistent visual identity for your website, it's essential to define guidelines for illustrations. Custom illustrations can give your site a singular appearance and voice.

You'll want to include style and color references for the kind of illustrations you use, such as specific colors or illustration styles. This will help ensure that all custom illustrations are cohesive and recognizable.

To maintain visual consistency, you might include photo editing preferences for backgrounds, filters, brightness, contrast, and more. This will help keep your images looking polished and professional.

Remember to state the overall tone and message images should carry, such as a preference for candid photography or specific backgrounds. This will help guide the creation of your illustrations and ensure they align with your brand's personality.

User Experience and Perception is all about understanding your visitors' needs and making it easy for them to navigate your web page. A key principle to keep in mind is Hick's Law, which states that the more choices you give users, the longer it takes for them to make a decision.

To avoid overwhelming your visitors, limit the options at each stage of the user experience, and use a single call-to-action button whenever possible. This is more effective than lengthy menu options.

To ensure you're on the right track, ask your team the following questions: Does your product or service have access to the resources necessary to perform research? Who is your primary audience? What user needs will this product or service address? Here are some additional questions to consider:

User Perception is all about creating an intuitive and seamless experience for your users. Scrolling is generally considered lazier than clicking, which means users tend to stay on a site for longer.

A study by Crazy Egg found a 36% growth in conversion rates by switching from clicking to scrolling. This is because scrolling allows for a seamless continuation of your web layout, making it more intuitive on mobile devices.

Using visual cues like images or graphics can effectively guide users to important actions. For example, photos of people looking towards a button can draw attention to it, while arrows pointing towards a menu option can help users navigate.

User Experience is all about making things easy and intuitive for the people using your product or service. It's about following data-informed best practices to ensure that every component of your design is user-friendly.

The design of every component should follow best practices, both within and outside of government. This means looking to resources like the Nielsen Norman group for guidance.

Usability testing is crucial to ensure that your product or service meets the needs of your users. In fact, it's recommended to usability test everything you build.

Limiting options at each stage of the user experience is key to avoiding decision fatigue. Hick's Law states that the more choices you offer, the longer it takes for users to make a decision. One call-to-action button is often more effective than lengthy menu options.

Here are some key considerations to keep in mind when assessing user needs:

Designing for mobile first is a must, especially since around half of all browsing sessions worldwide are on mobile devices. This means that if you're not considering mobile users first, you're likely to have a website that's not effective and beautiful for them.

In fact, many professional web designers would advise you to design your website layout with mobile in mind first. This approach ensures that your site is user-friendly and visually appealing on both mobile and desktop devices.

Creating a Guide is a crucial step in establishing a consistent visual language for your website. You can consolidate all your design decisions into a single reference source, which helps keep your vision consistent across all pages and elements.

Having multiple web professionals working on one site can be complex, but a style guide can help everyone use the same visual language. This ensures the end result will be consistent and cohesive.

A well-crafted style guide benefits your entire web design team, helping them maximize their efficiency and minimize tedious tasks. You won't need to struggle with choosing how certain features should be approached because you've already defined the rules for their usage.

To create a style guide, you'll need to follow a structured approach. This involves compiling a key reference source that outlines your design decisions and visual language.

When defining the style of your website, it's essential to consider the appearance of main components. Iconography is another important stylistic choice, including decisions such as using a ready-made icon library or custom icons.

You'll want to define the style of your icons, including whether they're colored or monochromatic, filled or outline. It's also important to include the main icon sizes that should be used.

For custom icons, you may need to include certain icon grids or rules about how to create the graphics. This will help ensure consistency throughout your website.

To take things further, you should outline stylistic considerations for main website components. These concern the appearance, sizes, and states of buttons, form fields, and navigation menus.

You should define styles for the various form elements, such as radio buttons or checkboxes. It's also a good idea to refer to a components library, like Google's Material Design or Alibaba's Ant Design, to identify any important elements missing in your own style guide.

Defining the different states of buttons, such as regular, hover, active, or focused, will help create a cohesive user experience.