Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • One-click Process: Because the system advances on any click, the user doesn’t have a chance to verify that they selected the correct option, reducing the safety.
  • Large Buttons: The buttons are all large, so the likelihood of accidentally clicking the wrong button will be smaller. Users will also see the button depress when clicked, so they will get that feedback about which element has been selected. These together improve the safety.
  • Forward/Back Buttons: If the user makes a mistake, she can chose the back button to correct it. Error correction improves safety. The forward buttons let her navigate back to her current position without reentering information – which would increase the likelihood of making another error.
  • Status Bar: The user can keep track of how far she is.If a ballot was missed or double-submitted, this mechanism will help catch that error. For example, if the user sees that she is entering the 3rd ballot, but the ballot number is 2, she knows that one of the ballots was not properly submitted.
  • No confirmation: Aside from the button depressing at the user's click and the ballot number incrementing, the user gets no feedback. Hence, if she makes a mistake it will be hard to spot and realize this.

Storyboard 2 – Ballot metaphor


When Mrs.Johnson begins her task, this is the first scene she sees. To minimize confusion, there is very little text on the screen, just a spot for her to enter her username.


Similarly, the next page just asks for her password. This way she can be validated and she will be logged in to perform her task.


The format for this design is a similarity to a physical ballot. Hence any item with options will have the text as well as a bubble radio-button beside it. Mrs. Johnson and other users can click the button or the text to select a choice.

After logging in, Mrs. Johnson has the option of entering votes by race or by ballot. She's always done it by ballot, so she selects that choice to move on.


The first ballot now shows up and Mrs. Johnson is ready to start entering ballots.

The left pane mirrors the physical ballot that she has seen. The races are in the same order, as are the candidates. Again, she can select the radio buttons or text for a given candidate.

As a method of feedback, the right pane shows the current selections in each race. These are in much larger font to make it easy to quickly verify that she selected the correct candidate.
After scrolling down to the bottom, Mrs. Johnson will see a back button to return to the previous screen, a continue button to move on to the next ballot, and a save button in case she has fewer than 50 ballots or needs a break. She selects continue.


Mrs. Johnson can fill out ballot number 2 in the same manner, and she continues on.


Mrs. Johnson is comfortable with the system and completes ballots 3-49 in the same way.


Finally, Mrs.Johnson reaches ballot #50. This one is a bit unusual with a write-in. But similar to the paper system from past years, she merely marks that the ballot had a write-in, sets the physical one aside, and moves on.


Mrs. Johnson now takes a moment to look over the summary of the 50 ballots she just entered. This way she can make sure the numbers seem to align with what she was entering.

Seeing that these are all correct, she selects "submit these ballots" at the bottom of the screen.


Mrs.Johnson is relieved to see that the ballots were successfully submitted. That was all she needed to do now, so she selects finish and log out.


Seeing that the system is back to the home page, Mrs.Johnson is satisfied that she has completed her work and is safely logged out of the system. She's now ready to move on to her next task.

Analysis

Of our final three designs, this one has the strongest metaphor to a real ballot.

Efficiency:
  •  With the presentation of the whole ballot on the page, the user has to scroll down, hindering the efficiency.
  • The summary page presented to the user requires yet another step of verification.

...


When Mrs.Johnson begins her task, this is the first scene she sees. She logs in with her username and password.


After logging in, she sees the welcome screen. This screen gives her a personalized welcome message, and informs her of the task of the day: she has 50 ballots to audit. She can choose to count these ballots by race, or by ballot (going through one complete ballot at a time).

Mrs. Johnson, having audited ballots this way for a long time, chooses to count by ballot. She presses the "By ballot" button.


This brings her to the main counting screen. On the top left corner she sees what race she's counting for, in this case the presidential race. In the top right corner, she sees what ballot she's currently on (ballot #1). 

Candidates are represented as ballot boxes, and there is a single 'ballot' in the center of the screen. Mrs. Johnson must drag and drop the ballot onto the corresponding candidate box to 'count' a vote in the ballot. If she casts her ballot in the Obama/Biden box, she is showing that the ballot she's auditing voted for Obama/Biden.

The layout of candidates is improved for efficiency. Top and bottom boxes hold the two candidates that received the most votes in the election (remember this is an audit, and votes have already been counted preliminarily). Because elections in the US are dominated by two major parties, we can assign one of these boxes to each party for every screen and improve consistency. To the user, these boxes have infinite height when dragging and dropping, so they don't have to be as precise. Blank and write-in boxes are always in that position as they involved fairly common votes. The idea for this layout was inspired in a pie menu, to give fast access around a central pivot.


The reader tells Mrs. Johnson that the vote is for Obama/Biden. She drags the ballot and moves it onto the Obama/Biden box. When she enters the box's area, the box is highlighted by a dotted boundary and changes color to give more feedback about the action that she's about to perform.

Mrs. Johnson drops the ballot onto the box.


After dropping the previous vote, she is immediately taken to the next screen. Her cursor is placed on the ballot again. The top left hand corner has been updated to show her that she's in the Senate race, but still on ballot #1.

This race has less candidates, but maintains a fairly consistent layout. Blank and Write-in boxes are in the same place. Top and bottom candidates are still of the two most voted parties.


The writer tells her that the vote is for Scott Brown, and Mrs Johnson drags and drops the ballot onto the top box.


The system moves forward, Mrs. Johnson will now count the votes in ballot #2. 

(Note: the drawing does not show blank and write-in boxes. This is a drawing error, they should be there)

However, the reader tells her he made a mistake. Mrs. Johnson presses the back button to correct the mistake.


She is taken to the previous screen. In place of the ballot, the candidate's box she chose is selected. She clicks on it to undo her choice.


The ballot 'flies' out again, and her cursor is positioned on the ballot. The reader tells her that the vote is for Elizabeth Warren instead.


She drags and drops the ballot onto the Elizabeth Warren box.


Mrs. Johnson is back to counting for ballot #2 ...


... we fast forward to the last race of the 50th ballot. She drags and drops the vote for Scott Brown.

(Note: the drawing does not show blank and write-in boxes. This is a drawing error, they should be there)


The system tells her she's completed her task for the day. She can choose to submit her audit, or go back and fix mistakes. Mrs. Johnson presses 'Submit'.

Analysis

Learnability:
  •  
Efficiency:
  •  
Safety:
  • The design has high learnability because it relies on the known task of casting a ballot into a box. Counting a vote is represented by dragging and dropping a ballot to the candidate's box.
  • The design provides immediate feedback to the user for all tasks (dragging, dropping, correcting mistakes).
  • The system clearly labels what race the user is counting. Candidates are labelled with large fonts, keeping in mind the older user population.
  • The design focuses on providing a better user experience. The user gets personalized messages with clear instructions on the task to perform.
Efficiency:
  • The layout of the candidate boxes is inspired in a pie menu. The top and bottom boxes are easier to click on because they effectively have infinite height, so they are reserved for the most popular candidates. Other boxes are easy to click from the center of the page.
  • A more efficient layout could have the more popular candidates on the side. It is easier to move your mouse sideways than vertically.
  • After dragging and dropping a ballot, the system moves to the next race. This speeds up the counting process, assuming the user made no mistakes.
  • A big caveat in efficiency is the use of drag and drop as the main input mechanism. For a user population that averages 78 years old and is not used to technology, drag and drop is a complex motor task. 
Safety:
  • Safety is handled by single-error level correction. The user can go back, and with clear instructions they can undo a selection and modify a vote.
  • The user has to realize that they made a mistake, and then fix an error. If they don't notice, the system will keep moving forward. A widget that shows previous selections might increase the possibility of noticing a mistake.