Usability is about designing content with a user-friendly approach. When developing a website, it is important to consider the user experience, which refers to how users will interact with a website. Creating a user-friendly interface will allow for ease of access, understanding, and use of the information, which can make all the difference for users.
Usability encompasses a variety of concepts to ensure a user-friendly interface. Overall, the concepts fall under the following categories: user needs, visual simplicity, and design architecture.
Content creators must understand that not everyone interacts with a website the same way. Users can vary by abilities; users can be visual learners, auditory learners and they can also vary by age and prior knowledge. For instance, visual learners may need charts, graphs or illustrations to help them understand the material. On the other hand, auditory learners may need to hear podcasts or watch videos to interpret the information.
It is important to keep in mind the different perspectives and methods of interaction each user will have. When constructing an application or website, expect users to make errors. Try to anticipate where users will go wrong and create designs that mitigate this possibility.
Content must be simplified so it can be understood by a wide array of users from targeted audiences. This is not to say that content should be “dumbed down” or overly simplified for users. When content is too simplified, it becomes a disservice to users as it could result in missing information. The content should, therefore, be simple enough so that all users can interpret the information and leave little room for misinterpretation.
The design architecture must always be organized, structured and labeled in such a way that will make it easier for users to know where they are, what they have found, and what to expect on the webpage (usability.gov). Serving the user should be the centerpiece of website architecture. This means a website should focus around the users’ point of view.A thoughtful design should encompass all critical functions of a website specific to the type of user (e.g. student, staff, and faculty). In addition, the website design should be predictable and simple. Creating unique structures and navigation methods may leave website visitors confused and frustrated. Users should expect consistent functionality throughout the site and not have different a different navigation system for each page.
There are different types of users, including users with cognitive disabilities or non-native speakers, who prefer a variety of interfaces such as mobile, keyboard-only, or assistive technologies. The content of the webpage must be usable and simple enough for all users to understand. This will allow developers to reach out to a wider audience and have the content be comprehensible.
A website creator can measure their success by seeing how many of their site’s visitors understood their content and had a positive user experience. The users will be able to gather new information from your website, and you will be able to get your ideas and information across to the users. Accessible websites are a win-win situation for the users and content creators.
Usability and user experience design is about designing products to be effective, efficient, and satisfying. Specifically, the International Standards Organization (ISO) defines usability as the “extent to which a product can be used by specified users to achieve specified goals effectively, efficiently and with satisfaction in a specified context of use” (WCAG).
The Four Principles of Accessibility layout foundation needed for accessible and usable content:
Perceivable - Information and the user interface must be presented to users in such a way that they can view or otherwise consume the content.
Users must be able to access the information being presented no matter what; all elements must not be hidden in any sort of way.
Operable - User interface components and navigation must be operable.
Users must be able to operate the interface (the interface cannot require interaction that a user cannot perform).
Understandable- Information and the operation of user interface must be understandable.
Users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).
Robust - Content must be adaptive enough that it can be interpreted reliably by a wide variety of users, including those using assistive technologies.
The content should be simple enough that it can be interpreted and understood by various users.
As a precursor to creating a website, serving user needs should be the center of the design.
Audience: Identify your primary users and what their main expectation is from your website. Make sure you incorporate the needs of different user types and what you want each user type to achieve.
Mission-critical functions: Make a list of all critical functions and consider providing a logical path to achieve these functions. Identify the best ways to help a user accomplish major tasks. (e.g. registration, search result, finding resources, signing up, creating profile, etc.)
Website main objective: Always keep in mind the main goal of the website and assess the content and design along the way to comply with the main objective of the website.
Website Identity: Make sure that the purpose of the website and what it has to offer is clear to the user within a few seconds of landing on the website. A clear message, wordmark, and information that would reflect the website identity should be provided on the landing page.
Content type: Content should be accessible and digestible to users from different background and with varying needs. Make sure that document types and resources provided are usable and align with the main purpose of the website.
Navigation and structure: Minimize the level of difficulty for a user to complete a task by designing a thoughtful website structure and clear navigational path. Users should be able to easily navigate through pages, forms, and menus to accomplish what they expect from the website.
Cognitiveload: The website should reduce short-term memory load and recall.
Provide a method to help users keep track of their navigational path in a website (i.e. breadcrumb site navigation)
Interactive elements such as buttons and links should show that they have been activated.
Include important instructions (i.e. form field format) should remain onscreen as necessary.
Simplicity, goal oriented: The website should have minimal complexity and should be simple enough for users to accomplish their goals.
Avoid distracting information.
Category labels should reflect their content accurately.
Site navigation structure should be simple with a clear conceptual model.
Consistency: Related items should be presented in similar or identical ways so no difficulties could be created for users.
Identical terminology should be used.
Information displayed and data entered by users should be the same
Visual presentations such as visual cues should be consistent through the site.
Responsiveness: The website should update the system’s status and reflect any tasks that are performed by users.
Pages should load quickly, within 1-5 seconds; anything higher and users may assume the system is not working.
Provide immediate feedback to users for any delays occurring.
Error tolerance, prevention, and recovery: The website should be created to prevent user errors. If an error occurs users should be informed and presented with a method to correct the error.
Provide a simple error handling system.
Provide warnings to users if they entered data incorrectly.
User confirmation is required before changes are made.
Provide a method for users to undo their actions.
Flexibility, predictability, and efficiency: There should be a minimal amount of features that require unnecessary user interaction.
Allow the use of shortcuts, hotkeys, and accelerators.
Avoid unnecessary complexity.
Allow users to control the pace of the interaction.
Tiny clickable areas create a barrier to users with low vision or mobility impairments, preventing them from accessing information. The small areas can be difficult to navigate to when using a mouse, or can often be overlooked due to small font size. For example, in the mobile view (responsive mode), the clickable area should be big enough for the user to be able to touch the clickable item. Use CSS techniques to expand the clickable area.
The image above is an example from Smashing Magazine showcasing tiny clickable areas. The links “18 comments,” “16 comments” and “discuss” are difficult for users to navigate to and see. Although keyboard-only users may navigate to links easily, other users such as mouse-users or users with mobility impairments may not. Providing large clickable areas will allow all users to visually see and access content.
Visited Links Color
Links that do not change color make it difficult for users to track the sites they have visited. Visited links should display different colors so users will have a record of the links they have visited.
Fixed Font Sizes
Fixed font sizes prevent users from increasing the text. Users who have difficulty reading content may need to increase the font size to increase the websites readability. Providing tools and mechanisms to allow users to manually change the font size of the webpage will make accessing web information easier for them.
Unstructured text is plain text without headings or short paragraphs or text with no styles. Large blocks of text can be difficult for users to read and might cause them to feel overwhelmed with information. Instead, break the content into sections for easier reading. Add headings to each page to separate all the sections and to organize the entire page. Avoid using extremely long or wordy sections. The content and only include information that the user needs to know. For more information on breaking up blocks of text, visit the Lynda.com video on 15 ways to break up large blocks of text.
Content-heavy websites will discourage users from interacting with the website. It is recommended to visually separate the page using headers and lists, different text styles such as bold and italics, color, and images. This will make it easy for the user to scan the page and navigate to the section that pertains to them.
The image above is an example of unstructured text. The website shows text-heavy paragraphs with minimal paragraph breaks or headings to separate each section. When users visit this first view the set of paragraphs it may overwhelm them. As users start to read, they may have difficulty reading and focusing on the content. Other users may abandon the website at first glance due to its lengthy appearance.
The image above is an example of structured text. The text has frequent paragraph breaks in between sections and has headers to label each category. The paragraphs are organized and contain a good amount of white space. The text structure makes it easier for users to visually digest the information and allows them to navigate directly to the content in which they are interested in.
Since usability encompasses a variety of concepts, testing for usability requires an overall test of the critical functions of a website. Testing can be done through machine tests with prescribed navigation paths or through remote or in-person task-based testing involving users.
Usability Testing Checklist
Testing can also be done visually. To determine if a website contains content that is user-friendly use the following checklist:
Content creators should ask themselves these questions to help determine if their website is accessible:
Does my website do the things people want it to do?
Can people quickly find what they want without help?
Do people make lots of mistakes using my website?
Can everyone use my website?
Making a website usable begins with how the users will interact with your website. How people interact with a website can make all the difference, and excluding any user may tarnish the site’s credibility.
The best testing method is to have outside participants navigate through your website and state their interaction experience. Since content creators are familiar with the website’s content, there might be a bias which may result in inaccurate results. Gathering the opinions of others who have not interacted with the website before is preferred. During the testing phase, it is important to make a note on how the users interact with content and if they are any parts of the website that are unclear or difficult to understand.
Testing should be performed whenever any major design or content change – such as navigation, site structure, labeling, forms, visual display, or interactive elements -- affects the user experience of one of the critical functions of your site.
Content creators and testers should have a clear understanding of the mission critical functions (what you want the users to achieve and expect from your website) which define the main objective of a website.
In other words, it is essential to identify the level of difficulty to accomplish a task on the website.