Web Site Wonders

EDITOR’S NOTE: This article is part one of a two-part series and discusses strategies to build a viable, engaging front-end Web site. Part two, which will appear in the next issue of Ed Tech, will feature strategies, solutions and technologies to construct and maintain an extraordinary Web site.

If you’re feeling frantic about making a good first impression with your Web site, a recent study from Ontario’s Carleton University may give you new reasons to fret. Newcomers to Web sites form rigid conclusions about their likes and dislikes in less than the blink of an eye — about 50 milliseconds, according to Carleton researchers.

No wonder Web designers are drawing on every trick in their design books to attract, inform, engage and retain visitors. But the challenges go beyond just the short time it takes to grab viewers. Higher-ed sites must appeal to diverse audiences: current, incoming and prospective students, as well as their parents, alumni, faculty, researchers, the press and members of the community. Creating one design that appeals to all these groups presents a daunting challenge.

Furthermore, visitors expect to find information quickly. A site’s design and navigational structure need to bring viewers quickly to the appropriate pages, which should load in seconds. As Bob Kraft, Web administrator at Loyola University Chicago points out, “People who have upgraded from 56K modems to broadband aren’t going to wait more than five or 10 seconds for a page to load.”

Fortunately, schools can draw on a number of best practices to solve design, navigation and performance issues.

When St. John’s University in Jamaica, N. Y., modernized its sprawling Web site as part of a 2003 rebranding effort, it applied some of these best practices. The redesign was “a struggle, but it was worth it,” says Caren Batzer, director of communications. “We now present our internal and external audiences with a clearer understanding of what we offer.”

Pleasing the Audience

Before a college can decide what content is essential for its Web pages, it should determine the target audience. The focus for most schools remains its prospective and current students, but institutions are reaching out to external audiences more than ever, says Kevin Adams, senior Web designer in the marketing and communications office at Case Western Reserve University in Cleveland.

“Think about the revenue streams that come into universities, and it’s obvious why,” Adams says. “Students, of course, pay a portion of the bill, but in our case money also comes from NIH [National Institutes of Health] dollars. So our news stories are front and center on our home page to get the word out on what we’re doing.”

Thus, the best home pages act like a virtual traffic cop to quickly shuttle new arrivals to their areas of interest. Loyola University Chicago redesigned its Web site nearly two years ago to create “a consistent look and feel to better serve users and project a strong Loyola identity,” says Mary Nowesnick, executive director of marketing communication services.

The current home page design displays both key audience links and popular topics in such areas as academics, research and campus life that link to second-level pages where visitors can find detailed information. “We relied on something as basic and functional as an outline to clarify content organization and paths so people can get needed information quickly and effectively,” she recalls.

With its redesign of the university site well under way, Loyola is now installing a content management system that allows nontechnical personnel in school departments to regularly update their information without learning HTML coding.

“If you redesign a site but don’t establish an effective maintenance strategy to update it, the site will just fall by the wayside,” Nowesnick warns. The content management software also helps Loyola enforce the use of design templates to maintain the site’s overall look and style.

St. John’s, Case Western and Loyola have won the Boston-based Web Marketing Association’s WebAward for higher education institutions.

The Inside Story on Design

Once schools develop personalized home page launching pads for each audience segment, they need clear designs that help people probe deeper into the site. It’s on these underlying pages that design problems often come to light.

For example, before its redesign three years ago, St. John’s managed about 6,000 active pages with a home page that didn’t organize information in a hierarchy of importance. “Since the Web site was such a visible manifestation of our brand, it was essential to coordinate our design and message so we were giving a consistent view to our different audiences,” Batzer says. The site relaunched with only 1,000 active pages after St. John’s excised outdated and redundant information, and each page used templates for a uniform look.

To gauge the site’s effectiveness, St. John’s periodically uses a pop-up survey form to solicit feedback about who is using the site and how easy the desired information is to find.

Colleges also rely on usability studies to gather verbatim comments and even record eye movements and mouse clicks to gauge what attracts — and repels — viewers as they move around Web pages.

Darlene Fichter, a usability specialist and data library coordinator at Canada’s University of Saskatchewan Library in Saskatoon, asks volunteers to perform basic tasks, like finding a department’s home page or looking up a faculty member’s name without knowing the exact spelling. As the volunteers carry out these tasks, Fichter uses Camtasia Studio from TechSmith to record their conversations and mouse clicks.

“Maybe the way your site is organized isn’t the way their eyes are tracking on the screen,” she says. “If they’re taking five seconds to find information on the page, that’s probably okay. If they’re taking 45 seconds and have to read every line, maybe there is something you need to be doing.”

Fichter believes good Web design isn’t only a matter of arranging elements on the page. Language also affects usability. She says schools should avoid using university colloquialisms like “registrar” that might stump some visitors. “Choose your classes” is easier to understand, she adds.

Aiding Navigation

Closely aligned with design is navigation — the structure and guideposts that help visitors find what they’re looking for. Case Western’s designers understand that not every visitor arrives through the home page and may be dropped off on an internal page by a search engine or a URL.

So the university requires three links at the top of every page: to “Home,” “Directories” and “Search,” the third consisting of Google technology with Case Western branding. Any of these reference points should lead visitors back to a familiar reference point.

Consistent design also aids navigation. The university recommends using one of two templates: one for pages with a limited number of elements, the other for more densely packed pages. Depending on the template, navigation bars span the top of a page or stack along the left margin.

Promoting Performance

The third element of good Web design assures that all the design and navigation innovations work efficiently. To keep pages flowing, St. John’s advises designers to create simple pages without dense graphics and to compress any images on the site. It pushes for pages that are 100 kilobytes or less to promote a quick load, says Adam Bell, director of Web development and technology in St. John’s marketing and communications office.

Loyola installed mirrored Web servers — duplicate machines connected by a network router — equipped with software that divvies up workloads so neither machine becomes inundated. The school also installed a server between the main Web servers and the Internet connection to store frequently requested pages on the auxiliary computer to reduce stress on the primary equipment.

The requirements for a successful university Web site are similar to those of many other IT applications: Meet the needs of diverse audiences for speed, simplicity and ease of use.