OIT Service Center

Submit a request

Usability Guidelines - Knowledgebase / Web and Online Media / Web Literacy - OIT Service Center

Usability Guidelines

jeremy spurr

Last updated: Mar 31, 2017 by jeremy spurr

For Web Sites and Applications

These guidelines should be considered for every web application by internal teams and outside vendors.

Topics

Accessibility

A website is not usable if it is not accessible to everyone.

The content on the site should be accessible by people with visual impairments. The first HTML elements inside the <body> tag should be "skip to main content" and "skip to primary site menu" links. It should be positioned off-screen with absolute positioning via CSS.
No words should be "baked into" images.
All images should have alt tags that describe the image.
Color blind¹ users will need all links within content to be underlined.
You will need to convert your full color comps to greyscale to see if there is enough contrast for color blind users, too.
Use the WAVE accessibility tool or Chrome extension to test your page's accessibility to visually impaired users.
Use the Spectrum extension on Chrome to test the visibility of your site to red/green color blind users.

Audience

Every web project has an audience.

Determine the devices, browsers, and operating systems your target audience will be using.
Consider the Internet access of your users; mobile devices on 4G access and slower can only access responsive sites and/or apps with fast download speeds, low file size, and streamlined content.
Design and build a solution that will be usable on all of those devices.

Browser Support

Browser support depends on the audience and devices. Brown Web Services recommends testing devices on the following browsers and operating systems:

Chrome for OSX
Safari for OSX
FireFox for OSX
Chrome for Windows
FireFox for Windows
IE 11 for Windows
Chrome for iOS 10
Safari for iOS 10
Chrome for Android

Brown.edu - Usage Share of Web Browsers - Dec. 2016
Chrome	53%
Safari	24%
FireFox	10%
IE 11	6%
Edge	2%
Safari (in app)	1.5%
IE 9	0.5%
Opera Mini	0.5%
Opera Mini	0.5%
Opera	0.25%
IE 8	0.25%
IE 7	0.25%
IE 6	0%

Colors

University Communications allows for 3 color pallettes. All pallettes include the use of black text on a white background and/or white text on a dark background.

Primary: Red / Brown / Gold / Gray
Secondary: Sky Blue / Emerald / Navy / Taupe
Metallic: Red / Gold / Brown / Silver

When choosing when and how to use these colors, consider the following:

Is there enough contrast? Black text on white background works best.
Is it legible to color blind users? To red-green color blind users?
Is the use of colors on links or buttons consistent?

Icons

Users rarely understand icons². If you want to use icons, do the following:

Add a text label near the icon.
If using icons to create a list of information, make sure the label is bigger than the icon.
Use simple icons.

Information Architecture

Your sitemap should only contain pages that your audience would want to read
When creating page name and links, the title should be short and digestible (Eg: Jobs is better than Career Opportunities)

Images

All images should use alt tags for the hearing impaired. The alt tag should describe the image or photograph.
If your target audience are using retina³ displays, the image should be twice the resolution so that it appears crisp.

Forms

The Nielsen Group does extensive usability testing, their findings⁴ are as follows:

Keep it short, it increases the conversion rate.
Always use labels and keep them close to fields.
Avoid placeholder text.
Distinguish optional and required fields.
User visible and specific error messages, preferably next to the field where the error occurred.

Layout

Layout should be done after the content is determined. Content will define the layout. Use plenty of white space and only show content that will drive users to your goals.

Links

Hyperlinks are found in navs as well as within content itself. Links within content should:

Be underlined.
Be a different color than the default text color, and look like a different color to color blind users, too.
If it is a button, it should contrast nicely, and be at least 26px tall, sp users on mobile devices can touch them.
Never link to a pop-up window.
Avoid using click here, use link text that describes the linked content, e.g.: Brown Dining offers a variety of catering options.
If linking to a PDF file, adding a pdf icon to the link helps users understand a file download is about to happen.

Images can be links, too. In teaser mode, images should link to the full content, as well.

Mobile Devices

Unlesss using a sperate mobile site, all sites should utilize responsive styles to adjust to the traditional mobile screen size, which is 320 pixels wide. Things to consider for your mobile layout:

Mobile users sometimes want different content.
Some mobile users are not on WiFi, so the site has to be fast to download, don't serve up large images.
Mobile users still do not use hamburger menus ⁶. Instead, hide the least important menu items, and have a "..." option to see the full menu.

Navigation

There is no need for a "Home" link, users will click the logo or site title to return to the top level.
Mobile users still do not use hamburger menus ⁶. Instead, hide the least important menu items, and have a "..." option to see the full menu.

Pop-Ups

Pop-ups can be new browser windows or HTML elements (modals) on top of a page.

Do not use pop up windows, users find them annoying, and most web browsers automatically block them.
Pop up modals should only be used as an alert or warning.

Scrolling

Thanks to their experience with handheld devices, users scroll. Do not fear putting content "below the fold" anymore.

Search

Google has left a lasting impression on users.

A rectangular search box is the most recognized symbol of search. More than a magnifying glass.
Users expect site search to be on the top right of a web page.
Searchable filters should be located above the content to be filtered.

Site Speed

47% of consumers expect a page to load in 2 seconds or less⁵. To determine how fast your page loads, we recommend the Pingdom Website Speed Test.

Ways to make your site speed faster:

Minify all CSS and JavaScript files into one file.
Optimize images, so that their file sizes are as small as possible. Use a tool like Compressor to achieve the best results.
Reduce the number of requests to images by utilizing Image Sprites.
Move render blocking JS files to the bottom of the HTML file. Use the Pingdom or Google PageSpeed Insights tool to identify JS files to move.
Use of a CDN increases site speed, although Brown does not currently offer one.

Typography

Use no more than 3 fonts. Brown's official fonts are Minion Pro, Freight Sans, Gotham Narrow, Georgia, Arial, and Vitesse.
Line height should be between 1.2 to 1.5.
No moving or blinking text.
Keep the target line length to 12 words. Articles that span the whole width of a large screen are not very readable. Too wide: losers will lose focus. Too narrow: it will break the reader's rhythm.

User Testing

User testing should be part of the design process, and done before anything is coded or built. You don't need a large sample size.

Show wireframes to a group of users, the Ratty is an excellent place to find some willing students.
Use a paid service like User Testing.

URLs

URLs are valuable to users on search engines. If a user is looking for information on Professor Kosterlitz's Nobel Prize, which of these URLs do you think a user will click on?

https://news.brown.edu/articles/2016/12/nobel
https://news.brown.edu/articles/2016/12/kosterlitz-wins-2016-nobel-prize-in-physics

Videos

Users expect a fast download from the video player, that's why we suggest always using the YouTube player. The video should never autoplay, and users will also want to play/pause, and adjust the volume from the video player itself.

Whitespace

Whitespace is your friend. It makes content readable and gives users a break from the barrage of content.

Sources

Helpful Unhelpful

60 of 180 people found this page helpful

Send us a note about this article

Author: jeremy spurr