SlideShare una empresa de Scribd logo
1 de 12
Queen Anne’s County Board of Elections
Recommendations
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 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.
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                   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
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
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
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
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
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?

Más contenido relacionado

Similar a Usability

ByteMeCollege High Level Design
ByteMeCollege High Level DesignByteMeCollege High Level Design
ByteMeCollege High Level Design
Nathan Foster
 
Bis Usability Report
Bis Usability ReportBis Usability Report
Bis Usability Report
bisgovuk
 
Bis Usability Report
Bis Usability ReportBis Usability Report
Bis Usability Report
diuscorporate
 
Usability review
Usability reviewUsability review
Usability review
sayedshiban
 
Usability Guidelines
Usability GuidelinesUsability Guidelines
Usability Guidelines
homeplate31
 
Background research
Background researchBackground research
Background research
nitish
 
2013 UX RESEARCH - UX Benchmark Study: TelCo Industries
2013 UX RESEARCH - UX Benchmark Study: TelCo Industries2013 UX RESEARCH - UX Benchmark Study: TelCo Industries
2013 UX RESEARCH - UX Benchmark Study: TelCo Industries
Vanessa Speziale
 

Similar a Usability (20)

Web Design Phase
Web Design PhaseWeb Design Phase
Web Design Phase
 
Intranet navigation governance
Intranet navigation governanceIntranet navigation governance
Intranet navigation governance
 
Creating a Website Sitemap
Creating a Website SitemapCreating a Website Sitemap
Creating a Website Sitemap
 
ByteMeCollege High Level Design
ByteMeCollege High Level DesignByteMeCollege High Level Design
ByteMeCollege High Level Design
 
Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Sh...
Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Sh...Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Sh...
Election Portal - Web Design Competition Report(Ashish Tiwari, Nischal Lal Sh...
 
Social shopping with semantic power
Social shopping with semantic powerSocial shopping with semantic power
Social shopping with semantic power
 
Bis Usability Report
Bis Usability ReportBis Usability Report
Bis Usability Report
 
Bis Usability Report
Bis Usability ReportBis Usability Report
Bis Usability Report
 
Data visualisation for gender statistics (EIGE)
Data visualisation for gender statistics (EIGE)Data visualisation for gender statistics (EIGE)
Data visualisation for gender statistics (EIGE)
 
Deep Web: Databases on the Web
Deep Web: Databases on the WebDeep Web: Databases on the Web
Deep Web: Databases on the Web
 
Usability review
Usability reviewUsability review
Usability review
 
Website Sitemap
Website SitemapWebsite Sitemap
Website Sitemap
 
517 final report
517 final report517 final report
517 final report
 
Usability Guidelines
Usability GuidelinesUsability Guidelines
Usability Guidelines
 
Background research
Background researchBackground research
Background research
 
Websites
WebsitesWebsites
Websites
 
ECHA Website Customer Insight Study Summary Report
ECHA Website Customer Insight Study Summary ReportECHA Website Customer Insight Study Summary Report
ECHA Website Customer Insight Study Summary Report
 
A Frame-work for Efficient Education and Exam Preparations
A Frame-work for Efficient Education and Exam PreparationsA Frame-work for Efficient Education and Exam Preparations
A Frame-work for Efficient Education and Exam Preparations
 
2013 UX RESEARCH - UX Benchmark Study: TelCo Industries
2013 UX RESEARCH - UX Benchmark Study: TelCo Industries2013 UX RESEARCH - UX Benchmark Study: TelCo Industries
2013 UX RESEARCH - UX Benchmark Study: TelCo Industries
 
Lambeth Council's Website Redesign
Lambeth Council's Website RedesignLambeth Council's Website Redesign
Lambeth Council's Website Redesign
 

Más de Ian Carnaghan (8)

Standardizing Drupal Development Environments using Containers
Standardizing Drupal Development Environments using ContainersStandardizing Drupal Development Environments using Containers
Standardizing Drupal Development Environments using Containers
 
Drupal Theming for Developers
Drupal Theming for DevelopersDrupal Theming for Developers
Drupal Theming for Developers
 
Drupal at ICF International
Drupal at ICF InternationalDrupal at ICF International
Drupal at ICF International
 
Curriculum Mapping
Curriculum MappingCurriculum Mapping
Curriculum Mapping
 
Information Culture Wrapup
Information Culture WrapupInformation Culture Wrapup
Information Culture Wrapup
 
Future Careers
Future CareersFuture Careers
Future Careers
 
Gamification
GamificationGamification
Gamification
 
Social Media
Social MediaSocial Media
Social Media
 

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.