...
Tasks Given to Users:
Task 1: Register and create a budget with 2 different categories.
Task 2: Enter several expenses.
Task 3: Oh no! You make an error on the last expense. Fix it!
Task 4: Share your budget with your parents.
Task 5: Your brother Luke shares his budget with you. View a pie chart of his spending.
List of Usability Problems from User Testing
...
Usability Problem | Potential Solutions |
|---|---|
“Save” button in expenses was confusing for two of the three users at first. They did not realize that you could save many expenses at once and tried to save each expense sequentially (although caught on quickly) |
...
Change the text of the button to “Save all” to increase learnability (what’s really interesting here is that this wasn’t a problem in paper prototyping, because users seemed to notice the “add another category” and deduce that the save button was for saving all the categories. We should have done a better job of understanding the root of the confusion, rather than just doing the easy fix). |
...
Toast messages that appeared when switching to viewing other’s mode and viewing your own did not provide enough feedback. 2 users said they did not notice it at all, the other instead noticed the text at the top of the screen. |
...
Make the header text saying whose budget the user is viewing (user’s or other’s) more apparent, though this would give a large and potentially irritating header to the screen. Could also flash a popup window as soon as the user started viewing someone else’s budget, rather than a toast message, which would be clearer (as it would be both larger and with a different color background). |
...
The icon that lets users edit their budget total is not extremely noticeable. One user wanted to change his total, but had trouble figuring out how to change it. |
...
Make the icon bigger. |
...
Category picker text is too small. |
...
Increase the text size (a reasonably easy fix). |
...
When viewing someone else’s budget, the header in the category page still says “select row to edit”. This was confusing to the user because you shouldn’t be able to edit someone else’s budget. The icons are disabled, but that text makes it confusing. |
...
Remove that instruction when viewing someone’s budget. |
...
Pressing back more than two or three times (depending on the screen) brings user back to login screen, which was confusing. |
...
This is a minor implementation bug that can (and should) be fixed in the next design iteration. |
...
The Expenses tab was hard to find for 1 user (although the other two did not have difficulty). |
...
We could try a different grouping of the tabs, maybe putting expenses in the 2nd layer, and use A/B testing to try to determine which is better. We can also try different icon designs for the Expenses tab to see if that would be more learnable. |
...
One user thought you could edit an expense from both the summary screen and the edit screen |
...
...
Change the label of “edit” to more explicitly state that it was an edit budget tab, not an edit expense tab. |
Reflection
The iterative design process was an incredibly interesting and unusual experience. As much as the instructors tried to impress on us how important it was to consider our user population and design the app for their use, each round of design and testing revealed new problems that users ran into with our design. We became so familiar with what the app was designed to do and how to navigate it that we had increasing difficulty separating ourselves from the model and understanding what user needs were as we went further and further into the design process. We became very attached to a particular style of the app fairly early on, and playing around with different prototypes in the paper prototyping and design stages could have resulted in a more innovative app.
...