When designing your website, it is beneficial to always keep the user in mind—the user being every person who visits and interacts with your site. Here are a few ways to make your site more user-friendly.
Accessibility
All EWU sites are required to meet ADA standards for accessibility. Accessibility means that people with disabilities can interact with the Web. As the Web has become an increasingly important resource in many aspects of life, websites must provide equal access and equal opportunity to people with disabilities. Additionally, meeting accessibility standards is beneficial for all users, including older people whose abilities change as they age. Accessibility standards often intersect with design standards, making websites easier for everyone to use.
For tips and information about how Page Builder addresses accessibility, see Page Builder and Accessibility.
For more information about what Web Accessibility is, why it is important, and how to make your website more accessible, see W3C's Web Accessibility Initiative and Web Content Accessibility Guidelines.
Consistency
Consistency is crucial to creating a good experience for your site’s users. Consistency reduces confusion and makes a site easier to navigate and understand. When design patterns appear on your site, your users will form expectations and act on those expectations. For example, if every button that leads to something important is red, your users will make that connection and pay more attention whenever they see a red button. If your styles are inconsistent, users will be unable to form solid expectations.
Consistency can also serve to emphasize items. For example, if every button is styled the same, but one breaks the mold, the difference may draw more attention to your button. This is useful if you have something important you want to highlight.
For an in-depth look at consistency, how it affects user experience, and ways to apply it, see Interaction Design Foundation's article: Principle of Consistency and Standards in User Interface Design.
Readability
The content of your site should be easy to read. Although you have the ability to change your fonts or the colors you use, too much styling can make your text difficult to read and can confuse your users or distract them from your content.
There should be a good contrast between text and backgrounds, but not too high. Pure black text against a pure white background, or vice versa, is difficult to read. Try a dark gray instead, or an off-white. Beware of colored text against gray backgrounds or other colored backgrounds; it may be difficult to read for users with vision impairments such as color blindness.
Text size is another factor. Make sure text is large enough to read, but be cautious of making it too large, as it will take up too much space on smaller screens. Generally, paragraph text is 16px to 18px, while headings or small amounts of text can be larger.
Our themes are already designed for readability. Sticking to your theme's default fonts and styles will ensure your site is readable. If, however, you use the Heading module to insert text that you wish to customize, keep these guidelines in mind.
Layout
When building layouts, remember that rows act as sections on a page, while columns organize content within each row. Try to group content in a way that is clear. There are a few ways you can do this:
- Proximity: objects that are close together will be perceived as a group, even if the sizes, shapes, and objects are different.
- Similarity: items that are visually similar to each other will be perceived as belonging together.
Be careful not to clutter your page. Too much information may be overwhelming for visitors, and it may be difficult to navigate. To resolve this, try to split your information into multiple pages if it can logically be segmented. This will make pages easier to search for, as well as easier for the user to process.
For more information about creating layouts, see our Page Builder Basics article or Page Builder's Column Layouts Overview.
Hierarchy
Your most important content should be larger and draw more attention than items of lesser importance. This breaks up the page and makes it easier for visitors to find the information they need. One of the best ways to establish hierarchy is to use headings and subheadings in bodies of text or to label sections of your page. Use of headings also makes it much easier for users of screen-readers to navigate your page.
Testing
One of the best ways to design for the user is to have actual people test your site, preferably people from your target audience. Give them a specific task to complete, and consider common user goals when determining tasks. For example, ask them to fill out a specific form, or ask them to find a certain piece of information. Observe the participant as they complete each task. Take notes on how long it took each participant to complete the task, where they had difficulty, and what frustrated or confused them.
After testing, questions can also be beneficial. Ask for feedback on design, navigation, and general usability. Specific, open-ended questions will yield the most helpful results. Avoid asking participants vague questions. "What do you like or dislike?" is too subjective and disconnected from actual behavior to provide any meaningful insights. Some sample questions:
- How easily are you able to locate what you need? Does the site's navigation make sense?
- Did the site confuse or frustrate you at any point? If yes, at what point?
- How do you feel while using the site or while performing a specific task?
- Did anything distract you or get in your way?
Because users look at a site with fresh eyes, they often find issues that the designer may overlook. Take feedback into consideration, locate problems, and solve them. Then conduct a new round of testing to see how effective your solutions are. Gather feedback, solve more problems, test again, and so on.
For a more detailed look at how to conduct usability testing, see Usability First's Usability Testing.