Designing an Effective Support Site (making it easy for users to get what they want quickly) Don Bell Web Learning Consultant Rensselaer Polytechnic Institute Copyright Don Bell, 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 NielsenUsability 101 have fun! - play with the design – try different things to see what looks good and works best

3. Borrow Design Ideas from ‘Good’Sites

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 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:

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 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

Some Good Examples