Blood Bank Questionnaire UI – Part 1

I’m a regular blood donor so I must have used this self-administered questionnaire UI dozens of times over the years. It’s old, clunky, and suffers from providing the bear minimum in functionality with little thought to usability.

Screen shot of the self questionnaire interface
Screen shot of the self questionnaire interface

Top issues

  1. Using check boxes for the answer responses when only one choice is allowed (yes, no, or skip). My best guess about why they used check boxes instead of radio buttons is to allow a user to remove any response to the question.
  2. Placing the “Continue” button at the bottom of the page, far away from the answer check boxes. This results in having to move the mouse up and down, over and over, for every question.
  3. No indication of how many questions there are or which question you’re on.
  4. No integration of the educational materials within the interface. If you want to know which European countries are on the travel list, you have to consult a paper print out.
  5. It’s ugly and does not provide a very friendly experience.

Design Recommendations

Here’s a mock up I did that attempts to address the top issues.

Screen shot of a new mock up of the questionnaire UI
My mock up of the questionnaire UI
  1. Use radio buttons for the answer responses (yes and no) and move the “skip” option to a link that does not give the “skip” option the same visual weight as “yes” or “no.”
  2. Change the “Continue” button to “Next” and place it next to the radio buttons to minimize the effort of answering the question and moving on to the next one.
  3. Add a status bar for a quick visual of how far along you are in the questions, and indicate which question you’re on, e.g. 15 of 28.
  4. Add links to the educational materials within the interface.
  5. Update the look and feel. Use the blood bank’s logo and color palette instead of the software maker’s.

And here is what the interface looks like once the user selects an answer.

Screen shot of the updated UI with the "no" radio button checked
UI updated with a checked response

The user no longer has the option to clear a response. Maybe clicking “skip question” would clear the radio button? But since a user must answer all questions eventually, either in the software or verbally to a tech, I don’t see the ability to clear a response in the UI as very important.

On Infinite Scroll

Infinite scroll can definitely be useful. This is what you see on sites like Twitter where more results load as you get to the bottom of the page content. This asynchronous behavior helps moderate page load times by requesting more data as needed.

What doesn’t always work with infinite scroll is a footer. I was on a site where I was trying to read its “about us” statement, linked in the footer, but could never click on it since the page had infinite scroll.

screen shot of a webpage with the message "loading next set of posts" above a footer
Infinite scroll with a footer

As hard as I tried, I could not click the “Read more…” link. Even getting the screen shot took some ninja tricks.

Design Recommendations

  1. Don’t have a footer. Is it really necessary? I eventually found a link to the “About” page in the global navigation menu.
  2. Have a “sticky” footer. This could work like sticky headers do, where if you’re scrolling down the page it gets smaller or even hidden, then if you scroll back up, it shows again.
  3. Instead of loading more posts automatically, provide the user with a link to manually load more instead.

What’s the right solution? That comes down to testing and finding out what the site’s typical visitors expect. I’d opt for no footer on this page.

 

Driving in Mexico

A few weeks ago, I took a trip to Mexico’s Yucatan peninsula. We flew into Cancun and were driving south to Tulum. I enjoyed driving there after I learned some key rules of the road.

Stop signs aren’t

Mexican roads have what look like stop signs, the same red octagon as in the United States, with the word “Alto.”

a city street with cars and a stop sign with the word "Alto"
City street intersection with “Alto” sign

Drivers here do not stop at these signs. We almost got rear-ended leaving the airport for stopping. While they look the same as our stop signs, the “Alto” translates more to “halt” which people seem to treat like a yield. Keep going if there are no obvious obstructions.

Topes!

Topes are speed bumps and they are all over the place. I was truly impressed how well they control traffic in three ways:

  1. As a highway enters the town and speed limit drops from 100 km/h to 40 km/h, there is a severe set of speed bumps that force traffic to slow down.
  2. Once in town, there are speed humps just large enough to allow traffic to travel at the speed limit without having to slow down much to go over them.
  3. They are spaced out before intersections and crosswalks, helping maintain cross traffic flow like left turns.
street with a speed hump across it and two signs reading "Tope"
Street with a speed hump and “Tope” signs

Go with the flow

Mexican drivers seemed much more calm, aware, and patient than many drivers in the States. The roads were chaotic with people crossing, motorbikes on the shoulders, bicycles, and dogs. Yet I didn’t see any accidents or hear angry horn honking. People just made driving work. If you’re in the left lane and someone wants to pass, get over.

One other interesting feature is at light controlled intersections, there is no bi-directional traffic. Each of the four directions get the green light in turn which means you always have a protected left.