...
Here’s how it’s going to work: We're going to present you with a paper prototype of the mobile web app, which is fairly rough representation of what the mobile site might look after we build it, but on a much larger scale. Depending on the type of mobile phone you are on, the stylus will be your mouse or your finger (for touchscreen phones). We'll give you a few short tasks and ask you to try to execute them on this "web app". As you click on things, We’ll physically change the website to respond to your actions. Let me briefly introduce you to our team. My name is ___, and this is ___ _ and ___. After we get started I'll be controlling the "computer" and they're going to be taking notes to identify areas where we need to fix our system.
...
- Home Page
- User didn't like the overall position label (the total amount you are in the red or green).
- User felt like the overall position could have been the last transaction and recommended that a label like "Balance" would definitely help the user understand what it actually means.
- User also wanted the overall balance to be color coded.
- User didn't like the arrow icon for drop down menu. User felt like it could be a play button and was therefore a bit confused.
- User liked the drop-down idea and felt it was a good way to get around having less screen space on a phone.
- User felt like the icon for viewing all transaction kind of looked like a calendar; suggests putting the rings on the side and not the top
- List of Transactions
- User felt that the +/- was confusing. He feels that color coding values with red and green is much more intuitive and should be done throughout the application.
- Scrolling Interface vs Search Interface
- User liked the very clear scroll interface to find usernames to add to transactions.
- User did not like the include me option and felt like it could be confusing to some users.
- User recommended that we move the include me option into the names section of the interface (closer to the bottom) instead of where we had it (closer to the top).
- User preferred the search interface over the scrolling interface due the fact that long list of names can be very painful to scroll through .
- Splitting of Money
- User understands the "custom" and "even split" options.
- User brings up a concern with custom splits and mental mathematics
- What if the users are splitting something more complicated than even integers?
- Suggests that we have some sort of recommendation when there is only one person left.
- Example
- Total = $68.47 for three people
- First person: User puts in $20 dollars
- Second person: User puts in $25 dollars
- Third person: User gets recommended by the system to put $23.47 dollars.
- Example
Prototype Iterations
Throughout the user testing process, we encountered many suggestions and observed a number of changes we could make to produce a more user-friendly PennyPincher application. Outlined below are changes made during the various iterations and corresponding descriptions:
Iteration Alpha (after user testing round 1)
- menubar icons: both the icons for the “Add Transaction” and “Summary” pages were scraped and changed to better reflect the information each of the pages ultimately displayed.
- “Add Transaction”: This icon was originally a large plus-sign. However, many users noted that this was confusing as it wasn’t entirely clear whether it was designed to add a transaction, add a friend, or if it even indicated any “add” feature at all. The plus-sign was replaced was an image of a receipt with a scaled plus-sign to the right. (Upon use in subsequent user tests, it was well received and claimed to have been easily understood.)
- “Summary”: The icon was originally a steno-spiral notebook with a dollar-sign on the page. The feedback that first round users provided clearly indicated that there was a lot of confusion as to what that symbol represented; was it a calendar? Some sort of calculator? Or an interactive notebook of sorts? Upon careful consideration of what information was displayed, the new icon is what looks like an address book; a non-spiral bound notebook with tab dividers. (User tests that followed this change received positive feedback and indicated no outstanding misunderstandings of what the icon represented)
- Selection of people involved in a transaction (on Add Transactions page): One of the efficiency problems we aimed to solve was finding a way to reduce the number of new transactions needed to be posted for a group of people (say that 10 people were splitting a bill; it would be much easier to put in 1 transaction for 10 people, than 10 transactions for 1 person). This introduced the problem of choosing a type of selection method. For our first round of user testers, we created two different features for adding people to a transaction; one was search-based while the other called for mulit-selection list box. After testing both interfaces and collecting feedback, it was decided that the unanimously favored search method would prevail and the multi-selection list box would be scrapped.
- Addition of Labels: Users were confused when first shown the home screen of the web application as it was unclear to them what the dollar amounts and colors indicated. “Green means good,” one user thought aloud, but it was obvious that it was much more difficult to determine what value meant what (even with color tags) without explicit labels. The addition of labels was definitely a good choice.
- “Undispute” button: One user asked about what happened if a transaction dispute was incorrectly initialized. We then realized that as a safety measure, to protect against this type of mistake, we needed to implement and add an “undispute” feature to compliment the “dispute” tag.
- “Back” button on Add Transactions page: For transactions involving more than a single individual, a second input field page is necessary to complete an “add transaction” task. However, when a user made a mistake in the first page and didn’t realize it until he navigated to the second page, he wasn’t able to go back and make changes as there was no “back” button to revisit the previous page. This button was added in, as it is also an issue of safety. (Upon the addition of this button, we noticed that it was used by other users at various times as well)
Iteration Beta (after user testing round 2)
- Consistency of color-labelling throughout the site: PennyPincher uses color to display transaction values as well as to show meaning of transaction type (whether you owe someone or whether someone owes you). The app also used +/- indicators in conjunction with the color, however the +/- indicators caused more confusion than aid. We decided to get rid of them and ensure that there was more color consistency throughout the entirety of the app to convey transaction-type information. Users commented that the colors were much more conducive to helping their understanding of what each transaction indicated than did the +/- signs.
- “Success!” Confirmation Page for adding a new transaction: following a successful submission of Add Transaction, the user will now be provided with immediate feedback letting them know that the transaction was successfully added. The addition of this will prevent confusion and unnecessary clicking to check to see if the transaction posted correctly.
- Auto-generated amount for custom bill splitting among a group: One task required users to input custom amounts for the various individuals within the group. It was noted that auto-calculating and generating the last individual’s contribution toward the total bill would be helpful in that the user would not be required to do extra math. We added this during the second round of testing and those users greatly appreciated the addition of that feature.
Iteration Gamma (after user testing round 3)
- Linked-Directory List: This feature was thought of after the final user tester. A few users wanted to know how to “go back” to a previous page. As a web application, the user could choose to hit the “back” button on the browser, however we felt that it would be useful for a user to be able to see where they were in the site map and navigate back to previous pages with ease.