Project goals
Improve usability
- Existing design (original version, then "interim" redesign) had numerous problems
- Some examples:
- Local navigation image bar - very small white text, uppercase, on light blue background
- Important navigation utilities hidden in page footer
- Text size small, and fixed
- See project website for detailed documentation
Improve accessibility
- Original design was WCAG level-A compliant (many implementations were not)
- We wanted to make further improvements
- We wanted to show that is not hard to achieve and costs little more to do when it is an upfront design goal (compared to cost of retro-fitting)
Improve content
- Users told us that existing content not useful - too much fluff, too "producer-oriented"
- Existing content did not do a good enough job of meeting our business objectives for the website
Development process
Research phase
- Goal: understand more about our users: characteristics, preferences, goals, information needs
- Goal: identify usability problems and priorities for the redesign
- Email feedback analysis (looked at reactions to previous redesign, webmaster email over an extensive period)
- Web server log file and search log analysis (identified key resource use. Click-through rates for various pages confirmed concerns about poor page design)
- Survey of careers teachers (helped identify information needs of year 11 and 12 students)
- Online survey of all user groups (identify information needs and preferences, understand the user experience through subjective feedback)
- Workshops with primary audience groups (identify information needs and preferences, understand users' goals, prioritise issues for the redesign)
- Usability testing of the existing site and competitor sites (objectively identify usability concerns; benchmark usability)
- Goal: identify the business goals and needs
- Goal: identify business priorities for the redesign
- Series of meetings with faculties and major business units
Design and evaluation phase
- Goal: improve information architecture and navigation design
- Goal: improve visual design
- Goal: improve content
- Series of participatory design workshops involving business representatives,
end users, designers and technical staff to produce draft wireframes
and discuss navigation design
- Developed and tested a series of wireframes (page layout schematics), using paper prototypes
- Developed and tested navigation, using paper prototypes
- Series of "content review" meetings with business stakeholders
- Developed a visual design brief
covering usability and accessibility goals and visual design and branding requirements
- Received 12 design submissions (all from within Monash - including work from design students)
- Shortlisted to 5 (based on branding requirements)
- Tested design concepts using paper prototypes
- Monash Digital design selected
- Changes made based on usability testing and insertion of new masterbrand
- Series of participatory design workshops involving business representatives,
end users, designers and technical staff to produce draft wireframes
and discuss navigation design
References
- User-centred design project reports (Monash-only access)
- Redesign of the Monash University website: a case study in user-centred design methods
- Testing web page design concepts for usability
Implementation
Goals
- Use latest standards; ensure standards compliance
- Increase the use of structural markup (to improve accessibility)
- Aim for a high level of cross-browser compatibility, but focusing on
IE6 and Netscape 4.7x
- IE 6 is most popular browser accessing www.monash.edu.au
- Netscape 4.7x is the University's corporate browser
- Ensure graceful degradation on older browsers
- Ensure accessible markup is used
Standards compliance
- XHTML1.1 DTD would have been nice, but:
- Settled on XHTML 1.0 transitional DTD in order to deal with Netscape 4.7x
- XHTML1.1 mime type is incompatible with older browsers (sends page as text/xml or application/xhtml+xml - which will make older browsers try to download rather than display the page)
- In some browser (e.g. IE 6), the user would be shown the document tree for pages using XHTML1.1 DTD
- Did not use XML prolog <?xml version="1.0" encoding="UTF-8" ?> because it causes problems for IE6 and some older versions of IE on Macs
- Getting rid of table markup would also have been nice but:
- Cannot use CSS-P because of Netscape 4.7x
- Need to ensure reasonable display on a wide range of browsers
- Need to gracefully degrade to older browsers
Increased structural markup
- All pages use header styles (h1, h2, etc.)
and nest them properly
- except for highlighted content/related links boxes because of problems controlling heading styles in Netscape 4.7x
- All navigation lists and related links lists and site map now use list markup (rather than images as bullets and line breaks between each item)
- Structural tables use table headers
- <strong> and <em> are used rather than <b> and <i>
Cross-browser compatibility
Browsers/platform combinations we tested on
- Windows XP
- Netscape 3.04
- Netscape 4.75, 4.77, 4.79
- Netscape 6.01
- Nestscape 7.02
- Opera 5.12
- Opera 6.01
- Opera 7.11
- Internet Explorer 6.0.2
- Mozilla 1.4
- Mozilla 1.3
- Lynx 2.8.4
- Home Page Reader 3.0
- Windows 2000
- Internet Explorer 5.5
- Windows 98
- Netscape 4.75, 4.76
- Netscape 6.2.3
- Netscape 7.1
- Internet Explorer 5
- Internet Explorer 6
- Mozilla 1.4
- Macintosh OSX
- Camino 0.7.0
- Omniweb 4.5
- Safari 1.0
- Icab pre 2.9
- Mozilla 1.4
- Internet Explorer 5.2.3
- Macintosh OS 8.1
- Netscape 4.79
- Internet Explorer 5
- Internet Explorer 5.2.3
- Mandrake 9.1 Linux
- Mozilla 1.3.1
- Galleon
- Konqueror
- Opera 7
- Browser Photo (Netmechanic subscriber service)
- Windows Netscape 4.7
- Windows Netscape 6.1
- Windows Internet Explorer 4
- Windows Internet Explorer 5.5
- Windows Internet Explorer 6
- Imac Netscape 4.7
- Imac Netscape 6.1
- Imac Internet Explorer 4.5
- Imac Internet Explorer 5
- Windows AOL 6
- WebTV
- We also tested at screen resolutions of 640x480, 800x600 and 1042x768
(though, of course, not on all of the browser/OS combinations listed above)
- We have no stats on our users' screen resolutions, but stats from other sources indicate that higher resolutions are becoming more common - 800x600 (44%), 1024x768 (42%), 640x480 (2%)
- And we tested how pages would print
Compromised design due to Netscape 4.7x
- Had to use lots of nested tables and single pixel gifs to make borders work properly in Netscape 4.7x (86 cells in fact!)
- Even then, we found rendering bugs in Netscape 4.7x on WinXP (may have also been the case for other O/S, though Win98 looked OK)
- Compromise:
- Borderless version of header and home page for netscape (required creation of an alternative batch of images)
- Allowed us to create a cleaner markup version for newer browsers
Known problems with other browser implementations
- Netscape 6.2.3 on Windows - rendering of "About" box on home page
- Netscape 6.01 on Windows - puts search button on new line beneath search box (but home page rendering fine)
- Netscape 6.1 on IMAC - search button rendered behind the search input box (? rendering bug)
- IE 4.5 on IMAC - breadcrumb bar at bottom of page (instead of the top of the page)
- Mozilla 1.4 - rendering of list item images; corrects on page refresh
- Opera 7 - list item images did not align well; we replaced with standard list item styles
- Opera 5, 6 - rotating campus image at bottom of home page does not align well
CSS implementation
- Stylesheet link is to monash.css which doesn't exist
- Server rewrites to appropriate css file based on user agent string
- A browser-specific stylesheet is delivered (and imports a base stylesheet)
- We are currently using 14 stylesheets (plus the base stylesheet)
- Advantages of doing it this way
are:
- Can be used on all servers, all server platforms (we used to use SSI and then had to use JavaScript for IIS)
- No reliance on client-side detection (same as with SSI method)
- Relative font sizes are used throughout
- Text can be resized using browser or our new "change text size" feature
Change text size
- PHP script that sets a cookie (for 12 months)
- 4 size options in addition to default
- smallest is 80% of user's base font size
- smaller is 85% of user's base font size
- default is 90% of user's base font size
- larger is 100% of user's base font size
- largest is 110% of user's base font size
- User's font size selection is loaded into the stylesheet (ie, the font
size aspects of the css are generated dynamically)
body {
font-size: <?php echo fontSize(); ?>;
}
References
Quality assurance process
- Each page formally reviewed by two different people
- Process included:
- Pages validated - using W3C's online validator
- Manual link check performed
- Metadata was checked (page title, keywords, description)
- Pages printed and proofread for spelling/typing errors
- Accessibility of pages checked with The Wave
- Page download size was checked using Netmechanic
- Pages were checked in IE6 and Netscape 4.7x
- Functioning of scripts, SSIs was checked
References
- W3C HTML/XHTML validator
- W3C CSS validator
- The Wave
- Netmechanic - Toolbox
- QA review record sheet (doc) - in case you're interested in implementing something like this
Project team and resourcing
Resourcing
- Research phase
- Team of 4.4 for 4 months
- Design and evaluation phase
- Team of approx 1.6 for 5 months
- Implementation and testing
- Team of around 2.6 for about 6 weeks
Team members
- Project manager - Sue Steele (Manager, Web Resources and Development, ITS)
- Technical lead - Dey Alexander (Usability Specialist, Web Resources and Development, ITS)
- Team members
- Derek Brown (Media Communications Officer, Marketing and Public Affairs - on secondment)
- Gabriel Anderson (Client Liaison Officer, Flexible Learning and Teaching - on secondment)
- Lesley Forsyth (Usability specialist, Web Resources and Development, ITS)
- Jane Peck (Usability specialist, Web Resources and Development, ITS)
- Karen Taylor (Web designer, Web Resources and Development, ITS)
- Andrew Norman (Web developer, Web Resources and Development, ITS)
Rollout issues
Implementing the brand architecture
Some initial questions
- Which sites will use the masterbrand?
- Which sites will use a sub-brand with crest?
- Which sites will use a sub-brand without crest?
- Should these sites use an official University web design?
- How will co-branding work on the web?
- MAPA are currently working on these issues
Ensuring our design leads to the formation of a correct mental model
- Current design has global navigation beneath the masterbrand
- If masterbrand is replaced with a sub-brand, what does that imply about
the navigation that appears beneath it?
- Users may think global navigation belongs to sub-branded site
- Visual hierarchy would imply this - global navigation is positioned beneath sub-brand, therefore sub-brand is the parent element
Implementing faculty colours
- New faculty colours are part of the brand architecture
- How will this be handled on the web?
Ensuring a high quality rollout
- Need to produce a style guide to assist web teams and web authors with
rollout
- Plans to develop a style guide in collaboration with Monash web teams
- Style guide should cover:
- Branding and visual design guidelines
- Content guidelines (e.g. appropriate use of graphics, multimedia; writing for the web)
- User interface guidelines (e.g. information architecture, navigation, usability, accessibility)
- Technical standards and guidelines (e.g. markup, file/directory names, metadata, access restrictions, customised error messages)
- Quality assurance process (e.g. content review and maintenance, markup validation, accessibility auditing)
- Need to produce templates for masterbrand and sub-brand sites
References
- Usability and human factors - see section on conceptual models and role of the designer
Website redesign rollout workshop
- Friday August 29, 2.30pm
- Sir George Lush room (building 3A, Clayton)
- Need to limit numbers to two per faculty/major business unit
- Workshop will look at brand architecture, ideas for web implementation, development of style guide and web templates, timelines for rollout
- Aim is to form a small working party to work on style guide and templates