RecommendationsQueen Anne’s County Board of Elections

Board of Elections Website Goals

According to a 2008 report from the PEW Center on the States, elections websites may be “successful” if they can achieve the following:

Answer three primary questions of prospective voters:• How do I register to vote?• Where is my polling place?• What candidates and issues are on the ballot?

Provide information for the following primary tasks:• Registering to vote or checking status of registration• Learning about upcoming elections• Obtaining information on volunteering for an election

Provide the above information in a way that is:• Easy to find• Well-organized and understandable for users• Designed and coded for optimal accessibility • Up-to-date and accurate

We have sought to address each of these areas in the following recommendations.

Source: “Being Online is Not Enough: State Elections Websites.” The PEW Center on the States. October 2008. http://www.pewstates.org/uploadedFiles/PCS_Assets/2008/VIP_FINAL_101408_WEB.pdf

The Current Site – What Works, What Doesn’t

What Works…• Site offers very comprehensive election information. • Content is up-to-date.• Site falls within first three Google search results.

What Doesn’t Work…• Too many navigational items, which vary as the user goes

from page to page, are confusing to users. • Reverse type and centered text on all internal pages is

difficult to read. • Invalid, deprecated HTML markup and table structure

throughout the site impedes accessibility by visually impaired users with assistive readers.

• Typos and broken links lessen the validity of the information.

Research Methodology

The researchers used the following research methods to understand, test and propose the subsequent recommendations:

Content InventoryThe researchers recorded and organized all website pages and files in the current website in order to understand more deeply the breadth and depth of content and the manner in which information is currently organized.

Card Sorting & SitemapUsing the card sorting software WebSort, the researchers conducted 10 in-person open card sorts and 36 online closed card sorts. The results were incorporated into the proposed sitemap.

Personas & ScenariosThe researchers developed personas and related scenarios to represent four specific target audiences of the website.

WireframingA final step, the researchers developed two paths of wireframes for each of the main pages of the site. Wireframe components were chosen to enhance site usability and support accessibility.

Wireframes

Based on the previous research, a selection of wireframes were created to represent the new information flow and to produce an more usable web site.

• Build reusable layouts that can be expanded and enhanced for users as user and site needs change.

• Develop a wireframe approach that leads the users through the website to their desired destination pages through:– Large, task-oriented buttons and targeting global navigation on the homepage. – Organized and descriptive sub-navigation previews on landing pages. – Following detail page content, highlight boxes that help users learn about possible next steps.

• Construct site components that may be implemented using flat HTML files or a content management system.

Wireframes – Homepage

1) Logo: To be developed in accordance with branding guidelines. Linked to homepage. Displayed on all pages.

2) Utility Navigation: Links to landing pages for each section (first is a homepage link). Displayed on all pages.

3) Search: See following slide explanation. Displayed on all pages.

4) Global Navigation: The five top tasks for users. Local navigation expands as a drop down menu on hover. Displayed on all pages.

5) Billboard: A static or rotating segment that would highlight 1-3 highly important elections actions. Entire billboard should be linked to appropriate destination page.

6) Quick Links: Four customizable buttons linked to the most popular user pages.

7) Upcoming Dates: A manually editable area to highlight important upcoming dates.

8) Polling Place Finder: A Google map plugin. The image is linked to the interactive “finder” page.

9) Board News: A manually editable area to highlight important board actions and news.

10) Footer: Board address, administrative information, and social media links. Displayed on all pages.

1 23

4

5 6

7 8 9

10

See live page: www.carnaghan.net/qa/wireframes/index.html

Wireframes – Landing Page

All applicable elements noted previously, plus…

1) Global Navigation: When within a section, the respective navigation element stays highlighted.

2) Breadcrumbs: Shows users’ location within the site. All non-current elements are linked to their respective pages. Displays on all pages except the homepage.

3) Tools: “Enlarge Text” link enlarges all body and navigation text each time clicked. “Print Screen” prepares a printer-friendly version of the page and queues the user’s default printer. Displays on all pages except the homepage.

4) Local Navigation: Displays the applicable secondary and tertiary navigation elements within the global navigation. Column displays on all pages except the homepage.

5) Body Content: Contains a number of highlight elements describing each sub category within the global navigation element. A large button is linked to the respective detail page.

See live page: http://www.carnaghan.net/qa/wireframes/voting_registration.html

12 3

4

5

Wireframes – Detail Page

All applicable elements noted previously, plus…

1) Body Content: Displays all detail page content. Content should be divided into sections with clear headings to make it as scannable as possible. Images, if desired, may also be used to illustrate the topic and provide visual interest.

2) Highlight Elements: Two manually editable content areas that may hold information directed toward users. These areas may contain important upcoming dates, links to other popular or related pages, or special notes to users. They should be kept short and scannable.

1

2

See live page:http://www.carnaghan.net/qa/wireframes/vote_absentee.html

Wireframes – Polling Place Finder

All applicable detail-page elements noted previously, plus…

1) Descriptive Body Content: A short area meant to explain how to use the polling place finder. Upon completing a search, this content would display the search results, including the location’s address, phone number, hours, wheelchair accessibility, parking availability, and vending machine information.

2) Address Field: An entry field for street address. Upon entering an address and clicking “Look up”, the address’ local polling place information displays.

3) Google Map: An interactive Google Map plugin that displays the location of the polling place and offers direction options (through Google).

See live page:http://www.carnaghan.net/qa/wireframes/polling_places.html

1

2

3

Wireframes – Past Elections Database

All applicable detail-page elements noted previously, plus…

1) Descriptive Body Content: A short area meant to explain how to use the past elections database.

2) Filters: Drop down menus allowing users to select election year, election type (e.g., presidential) or precinct to see the results. Upon selecting an item, the table repopulates with the appropriate information.

3) Table: Lists downloadable PDFs of all past year’s elections data by precinct and county-wide. Table column headings sort ascending/descending when clicked.

See live page: http://www.carnaghan.net/qa/wireframes/past_elections.html

12

3

Search

While research has led to the most efficient information architecture structure presented here, search is still an important tool to consider for implementation. The researchers have provided some recommendations on how search should be integrated into the new board website.

Recommended Features• Comprehensive stemming, synonym recognition and the

ability to self-correct spelling mistakes are essential for a good overall user experience.• Query suggestions should provide relevant results when the search cannot return a suitable number of relevant

items for the user.• Vertical searching should be made available where appropriate for the different audience types as well as content

areas (e.g., Candidates, Voters, Staff and Election Results, General Election Queries, Locations).• The search application should be user-friendly and provide similar features to common search engines with which

users are already familiar.

Planning & Implementation Development can be expensive in terms of both time and cost to write a customized search platform. Readily available search applications are available, which can be tailored to the site’s specific requirements.• Google provides a free custom search product, which would be well suited for the board.• The search features described above are integrated into Google search, with added customization features.• Other free open-source search engines (e.g., Lucene, Zettair, Sphinx, Sqlite, and Xapain) provide greater levels of

control, however require higher expertise to implement and manage.

Thank you!Questions?