The web is without question the primary mode that students / faculty / staff (both current and prospective), alumni and others use to access information about UBC.
It is in the university’s best interest to ensure UBC web sites adhere to the highest-possible standards of web usability, design, timeliness, and relevance of information.
A modest investment of time and money spent in improving existing sites’ design and usability can deliver tremendous improvements in visitor satisfaction and the perceived quality of the unit.
The following are some widely accepted standards for web site design and usability. These standards have been derived from “best practices” outlined by several major web design / development experts, and we encourage all UBC units to adhere to these standards to the best of their ability.
Our thanks to John Corry, College for Interdisciplinary Studies (CFIS), for gathering much of the information below.
- Content Quality
- Information Design
- Visual Design & Branding
- Navigation Design
- Technology
- Usability / User Experience Testing
- Metrics
Content Quality
A site’s content is paramount — the most visually compelling (“beautiful”) site in the world is useless if it doesn’t contain the information that people need or expect to discover on that site, laid out in a way that’s easy to find and read.
Photos, Logos, Graphics
- Correct web-resolution (72 dpi) and file type used
- Correct physical sizing and usage (ensure that very large (several MB) original images are not simply ‘resized’ by dragging the handles in your web page authoring software)
- Photos are well-lit and colour / gamma corrected
- No pixilation of graphics
- ALT tags are used on all images
Copy
- Concise, written for web (bullet points, short paragraphs, links to definitions and references)
- Internal jargon or acronyms are either not used or are clearly defined / explained
- Spell-checked, proper grammar
Font
- Used consistently
- No more than three different web-friendly fonts used (e.g. Verdana, Arial)
- Whenever possible, font is not hard-coded, but rather applied via CSS so that can easily be changed in the future
Information Design
The site’s information architecture (IA) should be mapped out well in advance of actual site development, and ideally should be augmented by good usability practice (see below for more on usability testing).
- Pages are laid out in a consistent manner
- Links all work and are checked on a regular basis
- Standard page elements available (complete header information, link to home page, navigation to major site sections)
- Adequate white space around content for easier readability
- Limited scrolling required (a good rule of thumb: a page should be no more than three screen lengths long)
- Balance of copy and photos
- Target of each link is clearly identified
- Metatags (keywords and description) included in header (the code hidden in the top of an HTML document)
- Copy and page design optimized for search engines
Visual Design & Branding
The visual design of the site should match the intended audience (conservative? hip?), and should follow any established UBC / faculty / department identity guidelines — see for example UBC Brand Guidelines.
- Unit and/or program name and purpose is clearly identified
- Brand and logo is applied consistently on all pages
- Brand and logo follow CFIS visual identity guide (in development)
Colours
- Colour palette reflects branding of unit; does not impede usability
- Colours are “web-safe”
- Colours provide sufficient contrast
- Colour-based information is also provided without colour (for colour-blind)
- Navigation colour is consistent with colour palette
Navigation Design
Navigation should be easy to find and understand.
- Splash page (e.g. Flash entry page) can be easily bypassed or exited
- Seven or less navigation headings
- Links all work
- Logo links to home page
- No more than four levels of navigation
- Contextual links (“breadcrumbs”) used to locate where user is in the site and increase search engine optimization (see www.bccampus.ca for example)
- Links to other sites open those sites in new browser window
- Footer includes text links of main navigation headings
Technology
Pages should be developed using correct “doctypes” and XHTML / XML standards, and should meet World Wide Web Consortium (W3C) code standards for XHTML and CSS.
- Framesets not used
- Flash used sparingly — not for main content sections, only as augmentation
- Links to plug-ins provided next to any multimedia files (e.g Adobe Acrobat, QuickTime, Media Player) requiring that plug-in
Cascading Style Sheets (“CSS”) used consistently, if used - Printer-friendly page view is provided (either the page itself is print-friendly or an alternate print view is provided e.g. using a separate print CSS for print or other media / display types)
- Database-driven pages have human-readable URLS (e.g. www.somesite.ubc.ca/urlThatMakesSense rather than www.somesite.ubc.ca/page=123)
- Pages should load in one or two seconds
Usability / User Experience Testing
Whenever possible, usability practices are incorporated throughout the entire design / redesign process, from before the project starts to the time it launches and beyond.
Possible user experience testing methods include:
- Simple surveys (“What do you think of this site?”)
- Focus groups
- User feedback sessions
- Advanced user experience testing (think aloud protocol, eye tracking)
Metrics
Ideally, you should be able to determine which pages are getting viewed most, how long visitors are staying, what IP visitors are using to access pages, how visitors have found your site, where visitors enter and exit your site, etc.
- Summary of metrics should be readily available
