Designing an Effective Support Site

(making it easy for users to get what they want quickly)

Don Bell

Web Learning Consultant

Rensselaer Polytechnic InstituteCopyright Don Bell, 2004

http://www.rpi.edu/web/webct/nercomp2004_pres.ppt

This work is the intellectual property of the author. Permission is granted for this material to be shared for non-

commercial, educational purposes, provided that this copyright statement appears on the reproduced materials and notice is given that the copying is by permission of the author. To disseminate otherwise or to republish requires written permission from the author.

Why an Effective, Well-designed Support Site is Important

• Think of how many times you’ve gone to a web site and experienced frustration – unable to find what you want quickly

• Bad design = wasted time• Wasted time = lost productivity• Well-designed sites save users’ time,

reduce load on support staff, contribute to the overall productivity of the college

Common Problems with Web Sites

1. Page takes too long to load (big graphic?)

2. Too much stuff to read on a page

3. Hard to read - print too small, font, color

4. Can’t easily find what you want

5. Too many clicks to get what you want

6. Inconsistent/confusing interface/navigation

7. Easy to get lost – poor site orientation

Support Site Design Problems

• support people not trained as web designers – site can resemble farmhouse additions more than architectural designs

• professional web designers sometimes create support sites that are ‘pretty’ but not as functional or usable as they could be

• site architect needs to recognize that most users are content/solution/speed driven

1. Define Support Site Goals

• Make it easy for users to move quickly:– get to/load support site homepage– login to courses– navigate around site, perform useful tasks, find

useful information, answers to questions or support problems

– get out of site quickly

• Provide rich, useful content, media, links• Facilitate fast support response time

2. Create Usable/Functional Design Structure

• design whole site at once

• clear, simple, consistent, organizational structure, user interface, and navigation

• usable, learnable, memorable, interface

• prime screen real estate – center, top right

• shortest path, fewest clicks to find information

2. Create Usable/Functional Design Structure

• research web, find good examples, build on common web design conventions

• fast loading pages, few graphics, small file size

• See “Usability 101” – Jacob Nielsen• have fun! - play with the design – try

different things to see what looks good and works best

3. Borrow Design Ideas from ‘Good’Sites

• http://www.useit.com/

• http://www.macromedia.com/

• http://support.dell.com/home.aspx

• http://support.microsoft.com/

• http://www.homedepot.com

• http://www.amazon.com/

• http://www.ibm.com/support/us/

4. Add Search Tools

• search tools help users quickly find relevant information

• More that 50% of users search-dominant• Provide search on every page• Use ‘site search’ tool to find specific pages

that match a given keyword• Use ‘search page’ tool to quickly find

keywords in long web pages

Sample Support Site Design -Screen Layout for Fast Access

Most Used Functions in Prime Screen Spots

Consistent, Easy Access to Site Navigation Structure

Search Site Tool

Breadcrumbs Trail helps orient user & makes ‘going back’ navigation easy

Title Tags help users decide where to go next; they describe the link destination when the cursor hovers on link. For example, title for ‘Related Links’ – shows Calendar, Student Information System (SIS), Library, Campus Computer Store

Campus Links

5. Use Support Form to Accelerate Problem-Solving

• Support (problem) Report Form - collects all relevant user data about problem once and in one place; sends email to shared support folder; subject line identifies problem type, user type; allows all relevant support people to see problems, divide up work and share solutions

• See: http://www.rpi.edu/web/webct/webct_prob_rpt.html

6. Test/Revise Design

• before adding content, test design on a small group of users, different web skill levels – revisions based on feedback

• New web user profile – impatient, short attention span, reads little, clicks a lot, likes fast pages, may bolt early if usability or response time poor

• Check design against original goals

7. Make Support Pages Portable

• Printable – print version of long pages

• URL-able – can email support page URL to user – if you use frames you may not be able to do this

8. Provide Redundant Links

• Site may have several links to important information – e.g. login, login help, browser tuneup, FAQs

• Navigation bar repeated on each page

• College site may have more that one link to your support site

9. Provide Rich Content

• Rich content makes it a reference site worth visiting again and again

• Provide support information, FAQs, training materials/notes, tutorials, links to related information

9. Provide Rich Content

10. Make Content Searchable

• use focused and highly descriptive keywords in title tag and meta tags to improve search retrieval

• Meta tags are information inserted into the “head area” of web pages

• <meta name="description" content="Main WebCT Information…">

• <meta name="keywords" content="WebCT, web, courses, login, students, faculty">

Some Good Examples

• http://www.rpi.edu/web/webct

• http://www.ualberta.ca/WEBCT/

• https://www.elearning.ubc.ca/home/

• http://www.rdg.ac.uk/blackboard/

• http://www.utexas.edu/cc/blackboard/

• http://www.cites.uiuc.edu/edtech/