Page History

...

Briefing

Briefing

Thanks for agreeing to help us out!  What you see here is part of a project we’re working on for the User Interface Design class (6.813). Today, you’ll be helping us test a new system for keeping Thanks for agreeing to help us out!  What you see here is part of a project we’re working on for the User Interface Design class (6.813). Today, you’ll be helping us test a new system for keeping track of outsanding expenses among friends and acquaintances.  This system, called PennyPincher, is a means of recording and monitoring transactions among individuals and groups. We’re testing particular parts of the system which allows you to post new transactions to declare that someone owes you money, dispute a transaction you think is incorrect, and view a history of all transactions you’ve been a part of.

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.

...

• User was displeased with the front page layout because he just found it jarring and confusing.
• User was completely confused by the +/- notation for money owed to you and money you owe. Had some major issues figuring out and feels there could be a better notation for it. 
• Besides these main problems, User found the tasks to be intuitive and easy to use overall. 

User 2

Task 1A (Scroll Interface) 

...

• User did not have any general comments.
  

User 4

Task 1C1C (Search Interface)

• User immediately found the “Add Transaction” button, navigated to the “Add Transaction” page. 
• User initially does not include himself in the transaction, but decides later to include himself.
• User manually types in numbers and does computation by himself.
• User completes all necessary fields to submit the transaction. 

...

• User selected the “Summary” button on the home page and selected Anna to view transaction history.

Overall Comments

• User did not have any general comments.

User 5

Task 1C1A (Search Interface)

• User immediately found the “Add Transaction” button, navigated through the “Add Transaction” page, and completed all necessary fields to submit the required information to add a transaction as stated in the task.
• User included himself in the transaction and clicked the “Next” button because he wanted to see his own name as part of the transaction. 

Task 1C1C (Search Interface)

• User filled in fields for amount and users involved in the transaction and clicked the “Next” button to enter individual amounts. 
• User liked the autocomplete for entering the amount of money.

...

• User navigated to the transaction history page with another user and successfully disputed a transaction. 
• User was confused about disputing a transaction because he was thinking about it in terms of the net transaction rather than individual transactions. 
• User wanted to see the name of the item.

Overall Comments

• User did not have any general comments.

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)

...

User 6

...

Task 1A (Search Interface)

• User immediately found the “Add Transaction” button, navigated through the “Add Transaction” page, and completed all necessary fields to submit the required information to add a transaction as stated in the task.

Task 1C (Search Interface)

• User immediately found the “Add Transaction” button, navigated through the “Add Transaction” page, and completed all necessary fields to submit the required information to add a transaction as stated in the task.

Task 2

• User navigated to transaction history page with specified user, selected the correct transaction, and pressed the “Dispute” button to successfully dispute the transaction.

Task 3

• User initially navigated to the home page to expand the “You Owe” and “You Expect” pull downs.
• User quickly noticed the “Summary” button at the top of the page and pressed the “Summary” button to successfully view the transaction history with another user.

General Comments

• User wanted more clarification on the color coding of the transaction amounts and what “-“ and “+” mean in front of the amounts.  These are changes that we have already decided to take into consideration after previous user tests.

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.
• "Home" icon to Menu bar:  Some users were confused as to how to navigate back to the home page (the initial landing page).  It was not initially obvious that clicking on the PennyPincher logo and icon at the top of the menu bar was an interactive button (versus a static picture).  Thus, it seemed appropriate to add in a more explicit icon to direct users back to the home page (User 6 interacted with this icon a few times during the final round of user testing).
• Add "Me" to list of Added names on Add Transactions*:  *Most users were first initially confused by the "include me in bill" radio button or ignored it.  Although it was eventually acknowledged and generally understood for most user tasks, some users claimed that they wanted to see their name or a "me" indicator in the Added field to explicitly show that they (the user) were a part of the transaction
• 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.
• *"Home" icon to Menu bar:  *Some users were confused as to how to navigate back to the home page (the initial landing page).  It was not initially obvious that clicking on the PennyPincher logo and icon at the top of the menu bar was an interactive button (versus a static picture).  Thus, it seemed appropriate to add in a more explicit icon to direct users back to the home page (User 6 interacted with this icon a few times during the final round of user testing).

Iteration Gamma (after User Testing Round 3)

...