54
NJ Division of Elections, Proposed IA revisions by Alden Brigham Timmy Gelles Zach Pease

IDIA 630 Final Presentation

Embed Size (px)

DESCRIPTION

Final presentation for Interaction and Interface Design class (IDIA630) at the University of Baltimore, Spring 2015 semester.

Citation preview

  • NJ Division of Elections,Proposed IA revisionsby Alden BrighamTimmy GellesZach Pease

  • Introduction: Outline

    Content InventoryLogging all the content

    Card SortWhat do users do with the content?

    Site Map Recommended IA changes based on Content Inventory and Card Sort data

    Personas and User JourneysWho will be using this site?

    Competitive Analysis & Wireframes How are other states presenting the information? How will we?

    Accessibility ReviewAs per Section 508 and the Web Content Accessibility Guidelines (WCAG) 2.0

  • Our Objectives

    Group Similar

    Content

    Tasked Based

    Navigation

    Intuitive Task

    Completion

    Considerations: Recognition of Limitations

    Avoid mechanical solutions if possible

  • CONTENT INVENTORY

  • Content Inventory Every piece of content

    entered into an xls file

    Roughly 400 content items on the website 85 pages 70 external links ~250 PDFs 3 PPTs & 1 XLS

    Logged target audience, which quickly established 5 main user groups:

    Candidates Elected Officials Poll Workers Researchers Voters

  • Content Inventory

    However... Certain content items difficult to

    categorize by user group

    Many pages have ambiguous content at or near the bottom

    Limited information scent complicates identification

    Confusing placement of seemingly important content items

  • Personas / User Groups

    Jane Fabbro

    22Voter

    I care about voting but I still want to travel

    John Servicicio

    66Pollworker

    Voting is every Americans right, Im

    here to help them exercise it

    Ana Burkowitz

    42

    Researcher

    To learn about the future, one must know the past

    Tisha Irving

    53

    Elected Official

    Good records are the only way

    to ensure fair elections

    Tyler Smith

    38

    Candidate

    I pledge to serve my constituents as

    I have served my clients, well and

    truthfully

  • CARD SORT

  • Introduction

    Goals of the Card Sort

    Determine intuitive placement for content items

    Observe user interaction with content categories

    Identify trends in content placement

    Group Similar

    Content

  • MethodologyThe Cards

  • MethodologyThe Cards: Selected for difficulty

    and/or ambiguity

    Over 40 cards selected from 300+ unique items in Content Inventory

    Number of cards due to repetitive content and project constraints

    The Procedure: Closed Sort

    (Didnt allow user to create categories)

    Category labels and brief explanations provided

    Physical Cards

    All sorts in person

    The Participants Age 23 - 70

    Friends/acquaintances/co-workers

    17 individual sorts, One joint (2 person) sort

  • Methodology

    Data Management

    Cards numbered individually

    Participants numbered individually

    Each response individually logged into a matrix

  • The DataThe Raw Data, and Nothing but the Data

  • 10 cards (24%)showed no consensus (
  • The DataThe Good Many items showed strong

    alignment with a particular user group Polling Place content currently

    in Voter Rights and Accessibility Information

    Sort Data showed placement in Pollworker category

    Highest match: 100% for item #44 (1920-1975 Primary & General

    Election Results)

    The Bad Some items showed an

    indeterminate split between user groups

    Often split between Officials, Poll Workers, and Voters Card # 6: Voter Verified Paper

    Record Determinations 31.58% Official, 31.58% Poll

    Workers, 26.32% Researcher, 10.53% Candidate

  • The Good (left) and The Bad (right)

  • Card Sort: Findings

    VocabularyCards Vocabulary often difficult for subjects to interpret (Legislative Apportionment; Voter Verified Paper Record...)

    Esoteric TerminologyDifficult to explain without deep familiarity with content and jargon (Help America Vote Act [HAVA])

    Editing OurselvesTesting revealed content label Officials to be confusing. Change to Elected Officials clarified.

    The OutsidersSome content items proved exceedingly difficult to organize (National Voter Registration Act Report Forms; Voting District Maps)

    Additional Navigation?Which suggests a secondary navigation based on content type rather than user group

    Competitive AnalysisApproached and examined how other states dealt with similar content (more on that later)

    Group Similar

    Content

    Tasked Based

    Navigation

    Intuitive Task

    Completion

  • Card Sort: Conclusion

    ClarificationConfirmed that our user groups helped clarify a large percentage of the content

    Label RefinementSuggested a refinement of category labels (Elected Officials).

    Tell, Dont ShowDemonstrated the need for more explanation/introduction for each page & jargon heavy content items

    Our CategoriesHelpful for categorizing a majority of the ambiguous content items

    Additional NavigationShowed the need for a secondary, content specific, navigation system (Maps, Laws, Forms, Publications, etc.)

    Live in Two Places?Demonstrated that certain content items may need to be referenced under more than one user group.

    Group Similar

    Content

    Tasked Based

    Navigation

    Intuitive Task

    Completion

  • SITE MAP{Proposed}

  • HomeLeft Column

    LawsIndex & Site Map

    Contact UsUser Group Links

    PublicationsMaps

    Accessibility

    Candidate

    Financing & LobbyingPetition Challenges

    File PetitionDistrict Maps

    Recall ProcessSchedule Filing Appt.Criminal Conviction

    Researcher

    Previous Voting Maps

    Older Results

    Recent Results

    Elected Official

    Voting Systems

    Voter Verification

    HAVA

    Apportionment Plans

    Accessibility Regs

    Pollworker

    Voting Machines

    Reimbursement Form

    Pollworker Application

    Accessibility Checklist

    Voter Paper Records

    Voters Bill of Rights

    Site Map(Proposed)

    Voter

    Sample BallotVote In Other WaysRegister or Renew

    FAQ

    Where to VoteVoting How-to

    Party AffiliationVoting related Forms

  • PERSONAS & USER JOURNEYS

  • User JourneysJane Fabro

    22Voter

    I want to vote, but I still want to travel

    Bio:Jane has been voting in her home county since she turned 18. Recently graduated from college with a degree in ecology, Jane is taking a year off to hike the Appalachian Trail.

    Goal: Apply for an Absentee Ballot.

    Scenario:Jane has solidified her plans for hiking the Appalachian Trail, but would still like to vote in an upcoming local election. She navigates to the site, self identifies as a voter, and heads to the voters section. While there, the explanation of absentee ballots informs her of the procedure for application and submission. She prints and mails the appropriate form, and finishes voting before she departs for the AT.

  • User Journey - Voter Jane Fabro

    HomeLeft Column

    LawsIndex & Site Map

    Contact UsUser Group Links

    PublicationsMaps

    Accessibility

    2.

    1.

    3.

    4.

    Sample BallotVote In Other WaysRegister or Renew

    FAQ

    Where to VoteVoting How-to

    Party AffiliationVoting Related Forms

    Voter

    Task on website: Get to the voting information with as few clicks as possible.Find out the requirements for absentee voting, then print the form she needs from the same page.

    Journey:Arrives at Division of Elections homeNavigates to Voter child page Navigates to Where to Vote Reads Mail-In ballot introduction Prints forms

    2.

    3.

    4.

    1.

    Tasked Based

    Navigation

  • User Journeys John Servicio

    66 Poll Worker

    Voting is a solemn duty that I am here to protect

    Bio: John is a retired veteran, and approaches his position as a poll worker with the same sense of duty as he did his army career.

    Goal: Find and read all the voting laws and regulations as they relate to an upcoming election.

    Scenario: Arriving at the landing, John identifies as a poll worker and navigates to the child page. There, he finds a second nav link to a depository of election laws, navigates there, then browses a variety of relevant pdfs.

  • User Journey - Poll Worker John Servicio

    Task on website: Identify and read all voting laws and regulations that pertain to an upcoming election.

    HomeLeft Column

    LawsIndex & Site Map

    Contact UsUser Group Links

    PublicationsMaps

    Accessibility

    1.

    3.

    Poll Worker

    Voting Machines

    Reimbursement Form

    Poll Worker Application

    Accessibility Checklist

    Voter Paper Records

    Voters Bill of Rights

    2.Journey:Arrives at Elections HomeNavigates to Poll Worker child page Navigates to voting laws and procedures

    2.

    3.

    1.

    Intuitive Task

    Completion

    Group Similar

    Content

  • User JourneysTyler Smith

    38Candidate

    I pledge to serve the citizens of Gloucester County as I have served my own clients, well and truthfully

    Bio: Mr. Smith has spent years as a real estate attorney, and has decided to follow in his fathers footsteps and leverage his legal expertise into an elected office.

    Goal: Find necessary documents to run for a county position.

    Scenario: Mr. Smith has made the decision to run for office in Gloucester county. Arriving at the division of elections page, he happily self identifies as a candidate and clicks the appropriate link. At the child page he finds an election timeline, which he consults, before clicking on a link for a petition of candidacy. He sees he should schedule a filing appointment and does so. After that, he prints the form, and settles in to fill out and submit his petition.

  • User Journey - Candidate Tyler Smith

    Task on Website: Quickly find the documents he needs to register as a Gloucester county candidate.

    HomeLeft Column

    LawsIndex & Site Map

    Contact UsUser Group Links

    PublicationsMaps

    Accessibility

    1.

    3. Journey:Arrives at home pageClicks sidebar to Candidate pageScans Candidate informationChecks election timelinesGoes to file petition Schedules filling appointment

    2.

    4.

    Candidate

    Financing & LobbyingPetition Challenges

    File PetitionDistrict Maps

    Recall ProcessSchedule Filing Appt.Criminal Conviction

    Election TImelines

    5.

    1.

    2.

    3.

    4.

    5.

    6.

    Group Similar

    Content

    6.

  • COMPETITIVE ANALYSIS

  • Competitive Review

    Sites Examined: Alabama (featured) Vermont (featured) Massachusetts Hawaii

  • Alabama

    Tasked Based

    Navigation

    Intuitive Task

    Completion

    Group Similar

    Content

  • Vermont

    Tasked Based

    Navigation

    Intuitive Task

    Completion

    Group Similar

    Content

  • Competitive Analysis Of sites observed, the most intuitive

    provide Plain language explanations and

    introductions. Visible calls to action for specific tasks Content groupings based around

    specific user groups

    Intuitive Task

    Completion

    Group Similar

    Content

    Tasked Based

    Navigation

  • WIREFRAMES{Current and Proposed}

  • Home Page (Current)

    What Works Minimalist Layout

    Easy to Scan

    Tasked-based buttons

    for highest trafficked

    areas

  • Home Page (Proposed)

    Whats New Streamlined Navigation New user-centric parent

    pages Second Navigation area

    of related or popular content items

    Group Similar

    Content

  • Home Page (Proposed)

    Whats New (cont) Expand task-based buttons to

    meet other user needs Add/subtract depending on

    analytics Keep it modular and

    scalable If possible: make buttons data-

    attributes filterable & searchable Use straight HTML with

    with isotope.js

    Tasked Based

    Navigation

  • Isotope Demo(click for video)

  • Home Page (Proposed)

    Whats New (cont) Highlights Upcoming Calendar

    Items/Events Timeline provides repeating

    visitors visibly new information

    Intuitive Task

    Completion

  • Home Page (Mobile Proposed)

  • Voter Landing (Current)

    What Works Information about

    registering in list format Easily scannable

    Application Forms Thoroughly covers how

    someone can vote

  • Voter Home(Proposed)

    Whats New Longer introduction paragraph Visual cue in sidebar of active

    directory Combines most pertinent

    content at top of page Secondary Navigation is its own

    section Also list content outside of

    Voters directory

    Tasked Based

    Navigation

  • Candidate Home(Current)

    What Works Thorough legalese

    information on landing page Very easy to find filing

    petitions

  • Candidate Home(Proposed)

    Whats New Introduction paragraph with

    minimal jargon Easily findable dates/deadlines Information on How to become

    a candidate Secondary Navigation is its

    own section List content outside of

    Candidates directory

    Intuitive Task

    Completion

  • Wireframe Summary

    Home Page Step 1aAdd additional buttons for other top user tasks. Relabel navigation items.

    Home Page Step 1bRevamp Recent Postings to Upcoming Events to highlight deadline-driven, task-based items.

    Home Page Step 2Add isotope.js library to allow search and filter functionality for buttons.

    Dynamic SidebarAdd additional sidebar for child pages, and other related content outside of parent directory.

    IntroductionsTreat each page like a homepage. Add introductions to each page outlining whats there. Provide information scent to links.

    FlexibilityKeep content items modular and scalable. Avoid content silos. Make pages WCAG 2.0 compliant.

    Group Similar

    Content

    Tasked Based

    Navigation

    Intuitive Task

    Completion

  • ACCESSIBILITY REVIEW

  • ...help you understand how people with disabilities use the web, the frustrations they

    feel when they cannot access the web, and what you can do to make your sites more

    accessible.

    http://webaim.org/intro/http://wave.webaim.org/

  • Using Web Accessibility

    Evaluation Tool

    Numerous contrast errors

    Images missing alt tags

    Most interior pages only have

    tags, missing subheads

    Body content tended to rank

    #20 in order for screen readers

    Accessibility Review

  • Example: Page layout very difficult for screen readers as body content often #20 item on the page

  • Enhance meeting WCAG guidelines and section 508 compliance Improve task navigation for people

    relying on screen readers Place main or most important information

    higher in content order Use semantic HTML Alt tags for images and links Make alt tags for link identical to page titles

    Darker and larger font for body text

    Accessibility Suggestions

    Tasked Based

    Navigation

  • Streamline and organize content and navigation for main user groups.

    On interior/child pages have links to needed forms and laws Add additional sidebar for child pages, and other related

    content outside of parent directory. Improve navigation and access by screen reader

    Intuitive Task

    Completion

    Group Similar

    Content

    Tasked Based

    Navigation

    In SummaryReorganizing the Navigation

    Revise Side Bars within Associated Pages Links to child pages associated with user groups Create discreet link to pages for publications, laws, accessibility materials,

    and maps

    Clear Labels and Minimal Jargon Add explanations to certain task-oriented pages Expand number and availability of task-based buttons for common

    user needs

  • Streamline and organize content and navigation for main user groups.

    On interior/child pages have links to needed forms and laws Add additional sidebar for child pages, and other related

    content outside of parent directory.

    Intuitive Task

    Completion

    Group Similar

    Content

    Tasked Based

    Navigation

    Start Today!Short Term

    Mid Term Links to child pages associated with user groups Create discreet link to pages for publications, laws, accessibility materials,

    and maps Make Section 508 compliant

    Long Term Overhaul the IA Improve overall accessibility: make content as WCAG 2.0 compliant

    as possible

  • APPENDIXES

  • Supporting Data

    Voter Research for Personas https://drive.google.com/file/d/0B7XUrGT8gfmXTFpSMjBXTWNGRzA/view?usp=sharing

    Card Sort Datahttps://docs.google.com/spreadsheets/d/1Ubcg8L4FtAoJEH5-cXXPYw0ryQbXJWp4AzExgy-FnZA/edit?usp=sharing

    Content Inventoryhttps://drive.google.com/open?id=1tqVcEuzPLihITPcbj6mnx_bsPf5W90W6w_l786uKxSw&authuser=0

    Accessibility Study: Voter Registration and Party Affiliation Pageshttps://docs.google.com/spreadsheets/d/1n5yICxTaiMg7i_7U160MJ9dwaw4AJvjQquQoKJC73lw/edit?usp=sharing

    Cards Used for NJ Division of Elections Card Sort https://docs.google.com/document/d/18Jvz9hqKDtxkVZcUr1darsh2dp940pOhqWMMykCXB5s/edit?usp=sharing

    Wireframeshttps://drive.google.com/file/d/0B0oETNU5aZzyZEE2QTF4Vkl2MlU/view?usp=sharing

  • Thank You!Any questions?