6.3 Think Aloud Protocol

Navigation

• Think Aloud Protocol Results

  • User 1
  • User 2
  • User 3
  • User 4

• Overall Insights

• Improvements Made

Think Aloud Protocol Results

User 1

Observations:

• Welcome page:
  • User immediately try to scroll down page expecting more information but unable to, proceed with registration without comment
  • After registration, user tried to login but encountered "something went wrong" error, user comment: more helpful message and available actions to take should be provided (e.g go back to previous page, go back to home)
• Dashboard:
  • User stare at record issuer, and asked what it is.
  • After explaining what a record issuer is, user asked what a name refer to in the "Add record issuer" modal.
  • User commented that processing time took awhile and mentioned that he wondered if the system had hanged. User was tempted to click "Add" button again, as a result.
• Add record:
  • User click on "Add record" button and was not sure how to proceed. Re-explained what record issuer and record is, and what the fields required are (e.g issue date, record period)
• OCR input:
  • User pause at OCR selection screen, finds it difficult to find issue date of bill
  • User asked again what record period is
  • User finds it difficult to identify record period
  • User click on "Add" button, comments that not sure if system has hanged or did not click properly

Analysis:

• More information could be provided on the landing page
• More friendly errors should be provided to inform user of what could be done to recover from the errors
• Some feedback should be present to tell user that they have successfully submitted a request and that the request is currently being processed.
• Tooltips or labels should be present to help user understand terms used in application, or to change them to more commonly used terms
• Some examples/information should be provided to help users
• Feedback should be provided to indicate request is being processed

User suggestions:

• Instructions/help should be present somewhere in Add record page to help users understand what each field means and where they can locate these fields in the bill

User 2

Observations:

• Welcome page:
  • User went straight into register via "Join Us" button
• Dashboard:
  • User was confused with adding record issuer; typed own name instead
• Add record:
  • User tried to submit bill without drawing boxes because not sure what the instructions meant, commented after explanation that specifically saying draw a box would be clearer
  • User was confused with issue date (unsure what it referred to) and asked for help
  • User tried to select record period as "dd-mm to dd-mm" because that was how she interpreted it
  • Selected due date correctly
  • Selected amount due in a different location than expected, OCR results not affected
  • For second and third bill, user did not bother redrawing some boxes at times because saw it did not read correctly by OCR and rather go straight into changing values herself
• Confirmation in Add record:
  • User skimmed the information and missed out one mistake, only realizing after hitting submit, asked if could edit record
  • When told no editing function available, user went through deleting and re-adding the bill
• Statistics:
  • User tried to change time period to "update" the charts but realized it was not working

Analysis:

• Terms need to be explained/give example or changed to something more conventional
• Instructions have to be more explicit
• Edit function may be necessary
• Should not have not working features, otherwise overall user experience would not be good

User comments: was minimalistic, so not distracting and easy to know where everything is and what it does, but also somewhat confusing because there is not enough information at times. Thinks that it may be confusing for those not familiar with using computers/software.

User 3

Observations:

• Welcome page:
  • User stunned by visuals, not sure how to start
  • User clicks on "Join Us" button
  • Successfully registers
• Dashboard:
  • User confused by term "record issuer"
  • Types a random name for issuer and selects "bank"
• Add new record:
  • Comments why cannot upload a photo file
  • Clicks on submit without drawing boxes
  • Confused with instructions, repeatedly clicks on issue date
  • Selects wrong record period
• Edit mode page:
  • Comments that values by OCR are not even correct
  • Changes values by typing, did not notice the arrow buttons
• Statistics:
  • Changes period to "All of time" but nothing changes ("All of time" does not work)
  • Changes period to "2 years" and information is shown

Analysis:

• Explanation for terms needed so that users will not be confused
• Instructions need to be more explicit, so that users can take the correct steps to completing the actions required

User 4

Observations:

• Welcome page:
  • User is confused if "Join us" and "register" are the same.
  • User asked: "Don't you have forgot password?"
• Dashboard:
  • User asked rhetorically: "Is there no verification of email?"
  • User asked: "Why is the title Laravel?"
• Add new record:
  • Add new record is better if it's in the table. It takes effort to find the add new record button
• Edit mode page:
  • User asked: "What's record period?"
  • User didn't use the HTML5 calendar dropdown
  • After choosing a specific field and drawing the box incorrectly, the user goes and click the field again to redraw the box, although he doesn't actually need to click the field again.
• Record issuer page:
  • User said "OK these actions are: copy, download, and delete"
  • User asked "Why does the stats has so many zeroes?" -> referring to the shown stats "$XXX.900000"
  • User asked: "Why use bar chart instead of line chart?"
  • User said: "If there's a lot of bills, I prefer stats to be on its own page, if not it's hard to look at"
  • User said: "Stats would be better if period is shown instead of issue date. And when there's no bill for a certain period, show it too, make it empty"

Analysis:

• Change "join us" -> "register now" (more explicit)
• Might need to implement email verification
• Might need to implement forgot password
• Need to change the HTML title Laravel->Owlganizer
• Discuss the need to move add new record button to the table
• In general terms in the app are confusing. We need to make it more intuitive, friendly, and understandable.
• Change calendar from the built-in HTML5 to semantic calendar
• Change the icon for file preview from "file" to "eye"
• Fix stats bug
• Discuss placement of stats and data to show

Overall Insights

• We generally received positive feedback on our UI. However, when adding a new record, users generally face a difficulty because they're not familiar with the terms used. This could be because the users are not familiar with handling bills/bank statements. Furthermore, it seems that explicit instructions are needed in the adding new record flow.
• There are several subtle changes that can be made to improve the UX. For instance, in the record issuer page, change the icon of file preview and change the built-in HTML5 calendar to Semantic UI calendar instead.
• Need more informative error messages
• Need to change date format to a more conventional one.
• Need feedback after every user interaction

Improvements Made

• Friendlier terms are used across the app:
  • Record Issuer -> Organization
  • Record -> bills/bank statements (customized according to type)
  • Record Period -> Period
  • Join us -> Register now
  • HTML doc title: Laravel -> Owlganizer
• Friendlier UI components:
  • File preview: "file" icon -> "eye"
  • HTML5 calendar -> Semantic UI calendar
• Friendlier flow of adding new bill/bank statement:
  • Explicit instructions are given, for eg: added the explicit instruction "draw boxes"
  • Explanation of the terms are given
  • Each form has a title indicating what step the user is in
• A spinner was added for each user interaction in the app so that user is aware that the system is working
• Custom error pages are implemented and in the error pages, options to go back and to go to homepage are given
• We kept the "add new bill/bank statement" button in its original place with reasons that when there's many bills/bank statements, we don't want the "add new bill/bank statement" button to be at the bottom of the page.