Proper Web Design:
WHAT DOES YOUR WEBSITE SAY ABOUT YOUR AGENCY?
by
Christa M. Miller
A well-designed website’s value is indisputable. Private companies’ websites make or break their businesses; likewise, government agencies’ sites enhance their public image for better or worse. How? By the way design and content interact.
A professional website doesn’t require a corporate-sized budget, or “toys” like Flash multimedia introductions. This is good news for smaller agencies, which can’t afford multi-feature sites. However, at the other end of the spectrum, an overly basic site--or no site at all--risks appearing unprofessional. And the obvious somewhere-in-the-middle solution depends on many variables.
Define goals first
To be effective, a website must have a purpose. A broad plan for a community-policing-related Internet presence isn’t enough. Dr. James Onder, Extrication.Com, safety specialist who teaches public information workshops for law enforcement, says agencies’ website goals should derive from their mission statements, strategic objectives, and program areas. “What are you already doing? What more could you be doing?” he asks. Greg Edwards, chief technology officer at Eyetools, Inc., a San Francisco-based website analysis company, adds, “Without goals, someone else – namely the website designer – will set them for you. This means you be able to tell which site elements work for and against you.”
Onder provides numerous examples of agencies’ website goals, and their resultant features, at http://www.extrication.com/laweblist.htm. These include (but aren’t limited to:
· E-government services like online ticket payment.
· Online recruitment, including application forms.
· Email and other contact information.
· Public-service information, including details on each unit’s responsibilities.
· Crime and traffic analyses, sometimes including maps.
· Neighborhood information, including sex-offender addresses and “be on the lookout” notices for suspicious persons.
Goal-setting may be easier, at least in part, if it’s directed by the agency’s overarching government. Many government portals, for example, require agencies to “brand” sites by incorporating a unique design element from page to page. Maryland is a typical example of a government requiring commonality among its agencies’ sites. Trooper Doug Baralo, Maryland State Police webmaster, says the state requirement allows for agency individuality at the same time that it promotes better customer service: by linking all agencies together via one main feature, the site makes it easier for citizens to navigate.
When goal-setting, law enforcement agencies should remember that although they don’t directly compete with each other--the police almost always monopolize services to their constituents--as Edwards says, “They won’t lose money as a result of a bad site, but they might lose an intangible asset: the ability to communicate with the public.” Moreover, an agency implementing e-gov solutions like parking ticket payments may indeed lose more tangible assets; if the e-gov component is hard to understand or navigate, lack of use could cost the site revenue.
Ensure reality and goals converge
Eyetools’ mission is to help organizations determine whether their websites fit their goals. The company accomplishes this mission through an innovation called eyetracking, which combines human beings, hardware, and software into a comprehensive solution that captures not only what website viewers do and don’t do--but also what they see and don’t see.
Eyetools, which offers free home page analysis along with more in-depth, whole-site studies, recently completed three “mini-studies” of the San Francisco Police Department (SFPD), Cook County (Illinois) Sheriff’s Office (CCSO), and New York City Police Department (NYPD) home pages. “The sites were selected based on their diverse look and feel, as well as the diversity of the communities themselves,” Edwards explains. An added bonus: SFPD recently redesigned its site, allowing for a comparison between old and new.
“The first way to look at eyetracking data is in terms of how many people saw what you wanted them to,” says Edwards. Eyetools’ solution shows this information via “heatmaps,” in which site elements are shaded from red (indicating the most noticed areas) to blue (indicating the least noticed).
For instance, Eyetools’ ministudies revealed viewers actually saw very little of the NYPD’s site (Fig. 1) compared to the other two. “There are hotspots on the images, but not much else,” Edwards says, pointing to green and blue spots on the site’s left navigation bar. Additionally, site elements like critical contact information and wanted-offender and missing-persons photos drew less attention than perhaps desired. And, despite the site’s length and wealth of information, viewers spent the least amount of time there compared to the other two sites.
In contrast, both the CCSO (Fig. 2) and the SFPD (Fig. 3) sites drew attention to important features. The CCSO site’s left navigation bar and chief’s welcome message were of particular interest (although initiatives like the sex offender registry and the “Yell Run and Tell” program got fewer fixes). Likewise, the latter-version SFPD’s right navigation bar, CrimeMAPS, and Megan’s Law links received significant views.
The upshot of these analyses, says Edwards, is that the NYPD’s site is more “cluttered” than the other two. He credits the other sites’ design, content, content placement, spacing between features, and even fonts for their success, adding that the CCSO site’s real estate is in fact underutilized. “It has a strong ability to get people to look at its elements, and it should capitalize on that.” (See sidebar, “A Tale of Two Websites,” to see how the SFPD accomplished exactly that.)
Edwards says there is no rule of thumb to good website design. “Good templates exist, but they have to match what you’re trying to accomplish. And that depends on the content and the organization--how your website tries to satisfy viewers’ complex requirements,” he explains. “Most viewers come to a site with a specific need in mind. One person might want crime statistics; another may only need contact information. Each user cares about just one thing, so you need a way to balance their competing needs. Also keep in mind that a good design informs users apart from helping them meet their own goal.” Part of this equation is cross-promotional design, which draws attention to features viewers may not have known they needed--such as sex offender information.
Furthermore, although a “likable” site design can lead to success, likable doesn’t equal effective. For instance, although users’ comments reflected their preference for the NYPD’s site over either of the other two, they didn’t see as much of its content. “This indicates clutter, a waste of real estate,” says Edwards, pointing out that a site’s effectiveness works on two levels: the design’s ability to guide viewers to its content, and the content’s ability to capture their interest. Clutter is often the result of web designers’ uncertainty over which items users want; to rectify this problem, they populate the site with every feature.
However, this defeats its own purpose; viewers completely miss important content. “This means the design ‘stole’ the content from the viewers, often because they don’t like the site,” Edwards explains, drawing a distinction between missing content and scanning it: “Scanning content indicates they see it’s there and they just don’t want to look at it.” He adds, “If you have great content, a bad site isn’t as much of a problem. But a lot of clutter means the viewers aren’t as likely to find the content.”
When your resources are limited
Many law enforcement agencies are unable to afford long-term contracts with web designers. Their websites then fall into one of several categories:
· Part of a larger effort to put a municipal or county web presence online, maintained by a government-wide designer. Onder says although advantages include better overall quality and uniformity, a small government may only include features for a majority of citizens–-not necessarily what police deem important.
· Part of a regional first-responder network. Pooling resources with other agencies cuts costs, but again, agency goals may not be compatible.
· One of several of an officer’s duties. Onder cautions against allowing officers to volunteer site design on their own time. In Florida, for example, a city determined an officer’s site made him an unpaid consultant, which was against the rules.
However, many agencies have found success when they add website design and maintenance duties to an officer’s existing job description. These officers have found numerous ways to cut costs and still develop professional-looking websites.
The Maryland State Police, for example, now allows its troopers to update information themselves. “The previous version in itself wasn’t hard to maintain, but information was hard to manage,” says Baralo. “If units or barracks needed me to update something, they had to call or email me, and if I had days off or vacation, I couldn’t make the update as quickly as they needed it.” Although there are plans to provide a single assistant, the position wouldn’t be full-time. Baralo, in the meantime, is the agency’s only webmaster, dividing his time among the site; his primary duty as a flight paramedic; and patrol.
The decentralized update process means officers in charge of certain units or initiatives can change meeting times and provide news. If a time or date changes for, say, a carseat safety class, the public has that much more advance notice. Baralo says he’s adding a similar functionality in a new Amber Alert feature. “As soon as a trooper enters an Amber Alert, a file will be sent to the site to activate the online alert,” he explains. In general, not all troopers can make changes. Baralo says one designated person from each barracks and unit is trained on making basic changes; redesign issues are still up to him alone.
Another part of the decentralization plan is to make as many public features as possible downloadable. “We’re building electronic forms so people won’t need to print and mail paper copies,” he says, adding that the troopers’ own intranet is set up the same way. Such decentralized control frees resources that would otherwise be spent on site upkeep.
Finally, Baralo makes site maintenance easier on himself by using a content management system (CMS), a series of databases, instead of standalone pages. “We have 23 barracks and a number of specialized units. Each could have its own page plus related pages, but using a database, you simply click on a link to populate a single web page with information relevant to that link,” he says.
When a small agency simply has no resources to spare, including an officer, Onder recommends contracting with an application service provider (ASP). Similar to a CMS, an ASP allows users to enter information into a site template without having to know any website programming languages. Additionally, some agencies generate revenue by actively recruiting website sponsors: local businesses that contribute the money necessary to maintain the site.
“A professional website, depending on its size, scope, and how centralized it is, takes more time to maintain than many people realize,” says Onder. “So it’s important to align your goals and preferences with the reality of your resources.”
Ensuring success
Hit counters and web logs provide site statistics on number of viewers, time of access, pages viewed, and so forth – if there’s time to analyze them, Baralo points out. (Edwards says assigning someone to review web logs regularly can at least track trends over time, using cookies and URLs to show where viewers are navigating a site.) However, although hit counters and web logs show what users do, they don’t tell a whole story about why the users do it. How to ensure the site’s “look and feel” meets constituents’ needs?
The simple answer: ask. “Our site will evolve as we add more features people request,” says Baralo, who built the state police intranet almost entirely based on troopers’ feedback. For the public site, Baralo will solicit comments and requests from troopers, state government users, and citizens via phone, email, or each page’s “Contact the Webmaster” form. Because user comments sometimes conflict with each other and site goals, Baralo recommends analyzing them on a case by case basis. “Who made the comment, and what’s it asking for? Are there similar comments from others? What would be good or bad about the change?” he asks.
User comments, however, can sometimes reveal a necessity for a complete site overhaul, which can cost in both time and money. It’s therefore important to balance user comments with actual evidence, a key factor when committees are involved, since they often require hard data proving the need for an overhaul. (Edwards notes that the site may be perfectly efficient as is, and redesigning it just to “stay current” would be a mistake.) When an overhaul is necessary, Edwards recommends taking users both within and outside of the agency through a prototype process. “Even with limited resources, this process shouldn’t be viewed as more expensive. Ultimately, it means you’re removing inefficiencies from the process of design,” he explains.
Edwards recommends first coming up with page prototypes featuring different content, colors, fonts, and other treatments. To stay cheap, website designers needn’t create whole sites, but can limit prototypes to GIF or JPEG images. Then, users should be tasked with identifying elements they like, and those they wish were featured. Making several different designs at once gives people choice, and cuts down on inefficiencies created when user groups haggle over the “best” way to design a website. The elements and desired features that seem to work best throughout the prototype process can be combined in the site’s final version.
The last part of the prototype process should include a usability test just prior to launching a new or revised site. “You need to know whether users can perform tasks when asked to do so),” says Edwards, “and you need to stay open to opinion.” Soliciting citizens’ feedback is also important to determine whether the site looks professional enough. “What are your design goals toward showing that yours is a confident, safe, and trustworthy agency?” Edwards asks. For instance, a research company that had enlisted Eyetools’ services found that its artfully designed site had actually reduced users’ confidence. Why? It didn’t look “dry” enough for a research company. “Pastels wouldn’t work for a law enforcement agency or a jail,” says Edwards.
Onder adds, “A smart site makes you look smart. People have become pragmatic about the World Wide Web, and they know that services like online ticket payment save time and money for everyone.” Only a well-designed and well-maintained site, however, shows citizens that your online services are worth their time.
Christa M. Miller (http://www.christammiller.com) is a freelance writer based in southern Maine. She specializes in public safety issues.
Recommended sidebar: A tale of two websites
Design and content lessons can be learned from the San Francisco Police Department (SFPD)’s 2004 website redesign. (Figs. 3, 4) Although the city’s telecommunications contractor had designed a site for the agency three years previously, the pages were simplistic, and gradually went out of date. “It was simply archaic and needed to be updated badly,” says Officer Jason Hui, the police department’s current webmaster. “People I ran into while I was on patrol during that time sometimes mentioned that there was really nothing to see. Even fellow cops had no interest seeing it more than once.
“Edward Goehring, [leader of the] neighborhood activist group City Hub Neighborhood Alliance, encouraged then-assistant chief Heather Fong [currently chief of police] to redesign the website as an outreach to citizens, a customer service tool, and then-Chief Alex Fagan [agreed with] the idea.” A committee was established to do the upgrade, but its members had other duties, and this along with other problems slowed progress. Hui was then appointed as the agency’s sole webmaster, tasked to create a competitively designed site that presented all the data from the old site.
San Francisco’s city departments all use content management systems (CMS) for their websites, so Hui worked with the original contractor to import the old content to pages using the new design. “I also did a lot of legwork and telephone calls to the [department’s] different bureaus and units, gathering information for the website,” he says. “The advantage of using CMS is that the search engine is already in place within the CMS and updating pages is easier than updating and redesigning a web page,” he explains. “[However], I think this job [including] artwork, design, obtaining information, clerical [duties], and answering citizen emails takes more than one person to do on a daily basis.”
Hui’s efforts resulted in a vastly improved site, whose newly realized benefits are reflected both in citizen emails and Eyetools statistics. Although the old site (Figure 3) had the benefit of a strong right navigation bar, users noticed hardly any of its other features. In particular, they saw photos of Chief Fong and Megan Kanka, but hardly any of the links associated with Megan’s Law – or public information links below the “fold,” the point below which users must scroll to see the rest of a page.
In contrast, the new site (Figure 4) netted significantly higher views of its right navigation bar and all its links. Edwards notes that although the site’s content didn’t change much, its design appears to have made all the difference:
· The site went from a two-column design to a more standard three-column design.
· A larger and more picturesque “masthead,” the agency’s introductory banner.
· Links deleted and rearranged.
· Language translations moved nearer to the page’s bottom.
· The site makes better use of its real estate, moving content around to capitalize on what an Eyetools white paper refers to as an “acuity gradient,” the way viewers’ vision degrades the further away content is from their point of focus. For example, Edwards contrasts “old” and “new” Megan’s Law links. Set several spaces away from her photograph, the old links were hardly seen; although the redesign still drew focus to the photo, links spaced closer to it ensured viewer attention.
· A soon-to-be-added online reporting feature will make it easier to file simple reports without waiting.
Hui says these decisions were based on other agencies’ site designs, and citizens’ wants and needs figured equally. “I do read incoming mail each day, [and] if there are any complaints about the website, I try to satisfy [users’] interest,” he explains.
Hui went through several site design iterations, complete with different artwork and content versions, before the final design was approved. Then usability testing took place. “The testing was done by command staff [members with] an interest in the project, [and] by Edward Goehring,” he says. However, he says, the process is ongoing. “I’m on it every week looking [for] improvements, constantly updating it with daily information from the stations, police commission, public affairs, etc.... To keep users coming back, the site is never finished and will always be as dynamic as the citizens want. As soon as a citizen mentions that certain information should be on the website, I start looking to see if it’s feasible [to] implement.”
Hui says the design’s success is borne out by its ever-improving numbers. “The website statistics [showing] the number of users prior to the new site’s [launch] was about 1000 a day. After the launch, the amount reached 3200 users per day. It’s still growing steadily every month as more people find information they need and want, [for instance] public affairs announcements and our CrimeMAPS system, which provides up-to-date crime data for [each] neighborhood.”
Hui says the site is foremost about customer service. “The redesign was a must for the police department to be viewed as a professional entity,” he explains. “Like any corporation, [people’s] perception is important when you’re conveying a message or selling a product. Instead of a product, we’re selling the police department’s image, and letting the public know that they’re [as much a] part of the police department as any officer. The Internet provides a tool to access us as easily as a friend for advice.”