We designed a quiz app. Sometimes the users get the questions right and sometimes they are wrong. What about the grey area?
Our challenge was to design the for the instances when user's marked too many answers, not enough or should have selected some both not other responses. The goal was to develop an easily understandable quiz response system that meets Section 508 accessibility standards.
From our research we found that mobile users in crowded or stressful situations needed the option to use either the touch or keyboard to navigate through the device. They needed to do this with one or two hands and know when they were wrong and when they were right.
We were assigned with the task to design the interface for these variables, but also when the user chooses to read a rationale of why their answer was incorrect. The most challenging part was communicating that the user should have selected an option and therefor missed a point. Green and Red were used to denote correct and incorrect answers along with check marks and x symbols for those visually impaired. The app was required to allow for pictues, videos and text.
So, we designed a Palm Pre App
Users may select as many responses as they want by keyboard or touch screen. The Enter button has the native Palm Pre symbol to communicate how the answe can be submit by keyboard. The layout accounts for room for images, video and as a subtle scroll bar and arros that appear when the screen is touched.
The App notifies the user's progress at the top right corner of the screen.
But we did a lot of sketching first
We asked a lot of questions, too.
We built a prototype and ran a few usability tests
We wanted to understand how users would respond to different colors, symbols and navigation through the Pre. After evaluation we made a higher fidelity prototype. We knew what to do next.
The application tallies the score, then what?
Red selections with an x are incorrect and green selections with a checkmark are correct selections. Responses that should have been selected are higlighted with a dashed green border and an x. Above the Explain This button users are told how many responses are correct and incorrect. This system is secondary to the color and symbol feedback system. Users can navigate through the keyboard between the answers or hit the enter button for an explanation.
All selected or missed responses have an optional explanation available.