Top 5 Usability Suggestions
Below are the top 5 usability recommendations compiled by ibiblio. These suggestions are high-priority and range from easy to medium in terms of implementation. If you’re aiming for a few impactful changes rather than a complete overhaul, we strongly recommend starting with these.
- Consider your audience (Identify their background, knowledge level, expectations, etc.), write with clarity and simplicity.
- Consistent Layout and Information Hierarchy
- Most important information should appear “above the fold”
- Relevant images should have alt text
- Descriptive Link Text
Before you publish something to the web
Here is a quick set of rules to consider before publishing your content to the web–these are not exhaustive but rather, are the most important things to consider when hitting that “publish” button.
- [easy, high-priority, accessibility] Ensure that the content is valid HTML.
- W3C HTML and CSS validators can be used to check this
- [easy, high-priority, accessibility] id=”Top1″> Consider your audience (Identify their background, knowledge level, and expectations.), write with clarity and simplicity
- [medium, high-priority, accessibility] Choose appropriate reading level: Write at a high school level or lower for general audiences—this is not to “dumb down” your content but rather, it is to democratize access and understanding of your collection. Tailor vocabulary and content for more targeted audiences.
- [easy, high-priority] Home pages should indicate who, what, where, when, and why? This should ground your users in what your collection is all about!
- [easy, high-priority, accessibility] Avoid jargon and technical terms that may confuse your readers. Use clear and concise language that’s easy to understand. Remember, your goal is to communicate your message effectively.
- [easy, high-priority, accessibility] Use simple sentence structure. Avoid complex sentences that can be difficult to follow. Break down long sentences into shorter ones.
- [medium, high-priority] Clarity: If content contains a lot of repetition, or non-informative language, try to improve it. If the content is ambiguous or confusing, try to improve it.
- [easy, high-priority, accessibility] Keep words text! Tip from UNC Digital Accessibility Office
- Images that have text in them, including infographics, fliers, pictures and some scanned PDFs, do not provide the content to all viewers. Take the text out of images and put it in the content of your website or document. Carefully consider what text has to stay in an image. Duplicate any image text in the alternative text of the image.
- Because PDFs, Word and PowerPoint files add complexity over text files to people who use assistive technologies, remove them where possible, or provide a web HTML version first and the downloadable versions as alternatives.
- [easy, high-priority, accessibility] Use Headings Correctly
- Headings: implement logical headings using HTML headings tags. This is essential for creating well-structured and accessible web content. They break down information into manageable sections, making it easier to read and navigate. Headings provide visual structure, semantic meaning, and improve accessibility.
- There are six levels of headings (H1 to H6). H1 is typically used for the page title, followed by H2, H3, and so on. Search engines and screen readers prioritize websites with proper heading structure.
- Avoid: Skipping heading levels (e.g., going from H2 to H4) and using styled text instead of headings.
- [medium, high-priority, accessibility] Consistent Layout and Information Hierarchy
- Consistent layout is essential for creating a user-friendly and accessible website. By using repeated elements and a predictable structure, you can help users navigate your site more easily and understand its content.
- How to do it: use a standard ready-to-go template, for example, from WordPress (example here) and read our guided tips on Information Hierarchy and look out for accessibility related tips.
- Why it matters: Improves navigation, understanding, and accessibility and helps users learn and navigate the website, especially those with disabilities. Watch this video to see more on the impact and importance of clear layout
- [easy, high-priority, accessibility] Descriptive link text
- Descriptive link text is crucial for creating accessible websites. Users, especially those relying on screen readers, need clear and informative links to navigate effectively. Descriptive links help users understand what clicking the link will do.
- Descriptions of links should be helpful (clearly explain the purpose of the link (e.g., “Link purpose guidelines” instead of a URL), concise, and unique (Avoid using generic text like “click here” or “learn more” for multiple links.)
- Stylistically blue text remains the standard practice for visual distinction with links, however you can use other colors.
- [medium, medium-priority, accessibility] Color contrast is the difference in brightness between foreground and background colors. Color contrast impacts the readability of your content on the web and in print. It is especially important for users who are low vision or for users who are colorblind. The contrast of the main text should not be less than 4.5:1
- Why it matters: ensure that your website/product is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. That’s what Web Content Accessibility Guidelines are for. WCAG 2.0 standard for color contrast is a 4.5:1 ratio between foreground (i.e. text, images) and background.
- Check your contrast ratio
- [easy, high-priority, accessibility] Alternative Texts are included for images and other media, and videos and audio files are captioned.
-
- Alternative text (also known as alt text) is the text equivalent of an image in context. All images must have alt text. It is essential for screen reader users to access that image content. Also, if the image is unavailable, web browsers will display the text in place of the missing image. Most web editors like WordPress and Drupal provide an easy way to add alternative text.
- To learn more please refer to the alt text section of this guide or visit W3C’s page on Complex Images
- Written version of the spoken words, sounds and relevant non-verbal information in an audio file. They should be synchronized with the media, include speaker identification and non-speech sounds and be available in a format compatible with assistive technologies. Additionally, providing options for adjusting the text size, color contrast and line spacing can enhance readability for users with visual impairments. Check out UNC Digital Accessibility Office’s article on captions and transcriptions.
- Alternative text (also known as alt text) is the text equivalent of an image in context. All images must have alt text. It is essential for screen reader users to access that image content. Also, if the image is unavailable, web browsers will display the text in place of the missing image. Most web editors like WordPress and Drupal provide an easy way to add alternative text.
Information Hierarchy
- [medium, high-priority, accessibility] Headings Ensure that there is structural HTML hierarchy in your HTML headings and documents
- As a general rule, only one H1 heading per tag
- Why it matters:
- Users with screen readers depend on headings
- Better structural integrity to site
- [medium, high-priority] Information on the page is arranged according to F- or Z- pattern
- Why it matters: Eye-tracking research shows that people scan webpages and phone screens in various patterns, among them are those in the shape of F and Z letters. Essentially, your web design should focus attention on what’s most important, but it is likewise important to recognize that most users tend to follow an F or a Z shape when scanning a web page. So, make sure to arrange the most important information on your website in F- and Z- shape, and watch this video to learn more.
- F-pattern
This pattern is best for pages with lots of text, like blogs or news sites. It follows the natural way readers scan text, starting at the top left and moving across, then down the left side. The first two sections of content are the most important, and the first words on each line should contain keywords. - Z-pattern
This pattern is best for pages with a mix of text and visuals, or for pages with less text. It guides the eyes in a “Z” formation, starting at the top left and moving diagonally down to the bottom left. This pattern is good for drawing attention to key elements, like calls to action.
- F-pattern
- Why it matters: Eye-tracking research shows that people scan webpages and phone screens in various patterns, among them are those in the shape of F and Z letters. Essentially, your web design should focus attention on what’s most important, but it is likewise important to recognize that most users tend to follow an F or a Z shape when scanning a web page. So, make sure to arrange the most important information on your website in F- and Z- shape, and watch this video to learn more.
- [medium, high-priority, accessibility] Navigation should be consistent across all pages
- Why it matters: Users develop mental models of website navigation, it reduces cognitive load when moving between pages, and it Improves user confidence and efficiency
- [easy, high-priority] Most important information should appear “above the fold”
- Why it matters: Users spend 80% of their time looking at information above the scroll line so therefore critical content should be immediately visible which increases likelihood of user engagement with key information
- [medium, medium-priority] Use white space effectively to separate content sections
- Additionally, sorted content in lists top down rather than in columns tends to work better
- Why it matters: Improves readability and comprehension, helps users distinguish between different content areas, and reduces cognitive overload
- [hard, medium-priority, accessibility] Implement breadcrumb navigation for deep content structures
- Why it matters: Helps users understand their location within the site, provides easy navigation back to higher-level pages, and improves overall site orientation
- [hard, medium-priority, accessibility] Use progressive disclosure: a technique used to reduce cognitive load by gradually revealing more complex information or features as the user progresses through a website.
- Why it matters: Prevents information overload, allows users to access details as needed, and improves page load times and performance
- [medium, medium-priority] Create clear, visual relationships between related content
- Why it matters: Helps users understand content connections, improves information discovery, makes complex information more digestible
Images and Other Media
- [easy, high-priority, accessibility] Alt Text: Relevant images should have alt text
- Rules to Follow
- Be concise with your descriptions, 125 characters is a golden number although descriptions can go anywhere from 100-250 characters
- When to include alt text description?
- If the picture or image on your site has a decorative purpose or is simply for aesthetic value, write alt= “” or alt= “null” so that screen readers can skip these images
- Otherwise, write an alt text description!
- What to include in your description?
- Type of image- a graph? A photograph? A comic strip?
- Text- all text in an image should be written in alt text (Note: it is best practice to avoid using images with text rather than writing out text on your site using <p></p> or other text tags in html)
- Who is in the image? Is this person known? If it’s an animal, write the species or breed. What is their expression or emotion?
- Where is the image set? What are the colors in the pictures
- Example:
- <img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>
- Rules to Follow
- [medium, high-priority] File Size and Optimization:
- Optimize images for faster loading times. Large image files can slow down your website, impacting user experience with tools like TinyPNG or Adobe Photoshop to compress images without sacrificing significant quality
- Why it matters: Faster loading times improve user experience and SEO ranking.
- Optimize images for faster loading times. Large image files can slow down your website, impacting user experience with tools like TinyPNG or Adobe Photoshop to compress images without sacrificing significant quality
- [easy, medium-priority, accessibility] Content Warning:
- Include content warnings for any images or media that may be disturbing or upsetting to some viewers (e.g., violence, gore, medical procedures). Briefly describe the sensitive content in a text overlay or caption before the image appears.
- Why it matters: Shows respect for your audience and allows them to make informed decisions about viewing content.
- Include content warnings for any images or media that may be disturbing or upsetting to some viewers (e.g., violence, gore, medical procedures). Briefly describe the sensitive content in a text overlay or caption before the image appears.
- Video and Audio Captions: For videos, provide audio descriptions to convey visual elements for users who are blind or have low vision.
- [hard, high-priority, accessibility] Captions
- Types: There are two main types: closed captions (can be turned on/off) and open captions (always visible).
- Captions should be accurate, with proper spelling, punctuation, and minimal edits (filler words like “um” can be omitted). Identify speakers and describe important sounds using brackets.
- [medium, high-priority, accessibility] Transcripts
- There are three main types: basic (text version of audio), descriptive (includes visual information), and interactive (synchronized with video).
- Transcripts should identify speakers and sounds using brackets, similar to captions. Example:
- [sarcastically] Sure.
- [Upbeat music playing]
- Include timestamps sparingly, only for significant changes in speaker, topic, or visuals.
- Title the transcript with the corresponding video title.
- Why it matters:
- They make content accessible to people with hearing impairments or disabilities. Transcripts can aid language learners by providing a visual representation of spoken words. Captions can improve search engine optimization (SEO) by making video content more searchable.
- [hard, high-priority, accessibility] Captions
Design and Aesthetics
- [easy, high-priority, accessibility] Font size should always be big enough for users to comfortably read. As a guideline, relative sizing is the best so users can zoom in or out according to their preferences or needs (this relies on relative sizes and CSS being relative). With relative sizes, the default unzoomed size should generally be at least 12px to 14px.
- Why it matters: Again, it’s not a fixed rule — sometimes you can use smaller sizes for very specific purposes — but generally speaking the sizes below 12 pixels will impact font readability.
- [medium, high-priority, accessibility]Color contrast is the difference in brightness between foreground and background colors. Color contrast impacts the readability of your content on the web and in print. It is especially important for users who are low vision or for users who are colorblind. The contrast of the main text is not less than 4,5:1
- Why it matters: ensure that your website/product is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. That’s what Web Content Accessibility Guidelines are for. WCAG 2.0 standard for color contrast is a 4.5:1 ratio between foreground (i.e. text, images) and background.
- Use WebAIM to check you contrast ratio
- [easy, low-priority] No more than two different font families should be used on a site/application. Likewise sans serif fonts are typically more readable than serif fonts at the same pixel size, so keep this in mind when choosing fonts.
- Why it matters: Generally speaking, combining more than two font families is not an easy job. For usability and visual purposes, focusing only on two font families are much better, because it’ll simplify your typographic hierarchy and improve website’s comprehension.This ensures stylistic cohesiveness
- Learn more about font pairings with this Canva article
- [medium, medium-priority, accessibility] Variation is size and weight can be used to differentiate between different content types
- Why it matters: It impacts readability and comprehension. A clear visual distinction between headings, subheadings and paragraphs reduces users’ mental overload and helps them digest the content. It also brings visual benefits — your page will look better and feel lighter.
- Example: the variations in style and weight of the font creates hierarchy and differentiation in content types.
- [hard, high-priority, accessibility] Visual hierarchy leads users to required actions
- Why it matters: Visual hierarchy allows users to scan information quickly, prioritizing content based on their immediate needs. Thus, items at the top of the visual hierarchy must be the most important to the business and most relevant for users.
- How to test: Cover your eyes so that only small cracks remain. When looking at the product, you’ll instantly visualize the hierarchy and notice which elements stand out. Are those the most important ones for your collection and users?
- [easy, low-priority] There are no more than three main colors on the page
- Why it matters: It’s not a fixed rule and sometimes, for specific cases, more than three main colors can be used. However, keep in mind that combining three colors is already difficult, so combining 4 colors and more should be avoided.
- [easy, medium-priority, accessibility] Uppercase words should only be used for labels, headers, or acronyms
- Why it matters: It impacts readability and comprehension. A clear visual distinction between headings, subheadings and paragraphs reduces users’ mental overload and helps them digest the content. It also brings visual benefits — your page will look better and feel lighter.
- [medium, medium-priority, accessibility] Make sure to ensure reasonable line length and layout through responsive layout (see example to the right of responsive v. non-responsive website). For instance, there should not be a narrow column with a big empty gap next to it. For some applications, a line size of 50-75 characters per line may be useful, but keep in mind that users may view your site on different types of devices.
- Why it matters: Improves readability, reduces eye strain, helps users maintain their place while reading
- [medium, medium-priority] Implement consistent padding and margins
-
- Why it matters: Creates visual rhythm, improves content scanning, maintains professional appearance
- Best practice: Use a consistent spacing scale (e.g., 8px, 16px, 24px, 32px)
Need Help?
Contact ibiblio Staff for:
- Traffic analytics
- Technical assistance
- Accessibility guidance
- Custom solutions for your collection
Resources and Tools
- WebAIM Contrast Checker
- Accessibility-ready WordPress themes
- Image optimization tools: TinyPNG, Adobe Photoshop
- UNC Digital Accessibility Office resources
- W3C Web Accessibility Initiative guidelines
- Article on How to Write Alt Text and Image Descriptions for the visually impaired
- Perform a UX Audit Templates