Usability
Download as PPTX, PDF•1 like•371 views
The document provides recommendations for improving the Queen Anne's County Board of Elections website. It summarizes goals for successful elections websites outlined by the PEW Center on the States, including answering key voter questions and providing easy-to-find, well-organized election information. Research methods like content analysis, card sorting, personas and wireframing were used to understand user needs and propose a new site information architecture and wireframes. The wireframes aim to guide users through tasks with clear navigation, content highlighting, and accessibility features. Search integration is also recommended, with features like spelling correction and query suggestions.
Usability
- 1. Queen Anne’s County Board of Elections Recommendations
- 2. 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
- 3. 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.
- 4. Research Methodology The researchers used the following research methods to understand, test and propose the subsequent recommendations: Content Inventory The 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 & Sitemap Using 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 & Scenarios The researchers developed personas and related scenarios to represent four specific target audiences of the website. Wireframing A 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.
- 5. 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.
- 6. Wireframes – Homepage 1) Logo: To be developed in accordance with 1 branding guidelines. Linked to homepage. 2 Displayed on all pages. 3 2) Utility Navigation: Links to landing pages for 4 each section (first is a homepage link). Displayed on all pages. 5 6 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. 7 8 9 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 10) Footer: Board address, administrative information, and social media links. Displayed on all pages. See live page: www.carnaghan.net/qa/wireframes/index.html
- 7. Wireframes – Landing Page All applicable elements noted previously, plus… 1) Global Navigation: When within a section, the respective 1 navigation element stays highlighted. 2 3 2) Breadcrumbs: Shows users’ location within the site. All non- 5 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 4 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
- 8. 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 1 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. 2 See live page: http://www.carnaghan.net/qa/wireframes/vote_absentee.html
- 9. 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 1 the location’s address, phone number, hours, wheelchair accessibility, parking availability, and vending machine 2 information. 2) Address Field: An entry field for street address. Upon 3 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
- 10. 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 1 type (e.g., presidential) or precinct to see the results. Upon selecting an 2 item, the table repopulates with the appropriate information. 3 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
- 11. 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.