iHUB

User Testing

After coming up with our design and wireframes we conducted usability testing on 4 students, all Carnegie Mellon undergraduates. We used the "think aloud" method for the testing, where we observed the users as they went through the interface and verbalized their thoughts. In order to display our interface to the users, we printed out our wireframes and presented them as screens. For our testing we introduced the user to our scenario with our personas, Ted and Alice, in which they would play both roles. The users went over the interface and interacted with the wireframes using their fingers and pressing buttons.

Findings

From the think aloud we found out several problems with our interface. The first was that in our interface we had forced users to press the help button in order to contact the HUB. This became a problem because users were hesitant to press the help button because some users were confused as to what the help button did. They did not know if the help button was for help with the HUB or help with the application.

We also discovered that the confirmation message on the iHUB web client did not stand out enough. In our scenario, the user needed to override a warning. After doing so, the system displays a confirmation message at the top of the screen. One user did not notice the confirmation after they pressed the override button and had to search the interface for a few seconds.

Another issue was that the proximity of the status drop down box to the reply message in the interface was too close, associating the two with each other. One user suggested that the status drop down be separated from the reply area so that the two were not associated with each other.

Improvements

Based on our findings from the user research we modified our interface in the final design. We added contextual help links, so that the user never has to go into the generic help system. For instance, we added a link to the help page about payment problems to the bottom of the error message about Ted's missing payment.

We also made the difficult-to-see confirmation message unnecessary. Using AJAX and Javascript animations, we made the reply form disappear and be replaced by the sent message, so that the user sees exactly what changed. If the message hadn't been sent, the reply would not have shown up.

We solved the issue of the message status being associated with the reply message by removing the elements until they were needed. In our original wireframes the reply and comment areas were always visible, where as we changed it so that they only appeared when the user selected them in our new interface.