Expense App Evaluation (#04)

Using Nielsen Heuristics

Issue #1

Problem	The Add Expense form does not report errors in the input fields and does not prevent users from trying to add an expense when their input fields aren't properly filled out.
Heuristic	Error reporting, diagnosis, and recovery (S) / Error Prevention (S)
Description	When entering a new expense, the "Add Expense" button only works (i.e. adds the expense to the table) if certain conditions about the input fields are met. I noticed this when I tried to add an expense with a negative payment amount. No error was reported to me (i.e. no feedback with instructions), so I had to assume what the issue was and how to fix it myself (in this case, I assumed that the payment amount should be greater than or equal to zero, so I fixed that). Digging into the source code for this app, I found the function that does this input validation. According to the function, nothing is done when the input fields do not satisfy the required conditions (e.g. non-empty payer and payee and non-negative payment amount).
Severity	Minor: needs fixing but low priority This issue is relatively easy to overcome and may not appear often since the conditions being checked are critical for a well-formulated expense; however, it is generally a good idea to try and prevent user errors from happening or at least report errors when they do show up.
Recommendation	In order to fix this issue, I would recommend the following: if the user tries to click the "Add Expense" button when their input fields are invalid, they should be alerted to exactly what fields are invalid and the condition that needs to be met in order for the expense to be properly added (i.e. report the error and offer suggestions). For example, if the user has not entered anything for the "Payer" field, then the error message could highlight this specific field and tell the user to choose an option from the dropdown. Alternatively, this error could be prevented entirely by disabling the "Add Expense" button when any of the input fields are invalid. The input elements could be contained in a form that automatically validates the input and gives helpful messages to the user when the fields are invalid.

Issue #2

Problem	The process of editing expenses is externally inconsistent which has the side effect of decreasing user efficiency.
Heuristic	Consistency & standards (L) / Flexibility & efficiency (E)
Description	Each expense in the table has an option for editing that expense. The consistent and standard way to handle editing is to allow users to edit entries in-place; however, in this application, choosing to edit an expense actually removes it from the table and places it into the form at the top of the page. This creates a learnability issue since it appears as though clicking the edit button actually deletes the expense. It took me a few tries to figure out what was happening, and I only noticed that the expense was being moved to the top of the page because the form at the top of the page was still visible to me. It would have been even more challenging if I had instead chosen to try editing an expense towards the bottom of the table which would have made the form no longer visible. This functionality also negatively impacts user efficiency since editing an expense at the bottom of the table requires the user to scroll all the way back to the top of the page to make their edits.
Severity	Major: needs fixing and high priority Editing an expense could be a fairly common action taken by the user and the current functionality is not only difficult to learn but also inconvenient for users.
Recommendation	I would recommend allowing users to edit expenses in-place after clicking the "edit" button for that particular expense. Users should then be able to make the desired edits and either confirm those edits with a "save" button or revert back to the original expense with a "cancel" button. This will make the action of editing externally consistent as well as more efficient since the user will no longer need to scroll to the top of the page to make their edits. An added benefit to this recommendation is that it will also improve user control and freedom since they will be given the option to either save or cancel their edits.

Issue #3

Problem	There is no way for users to know whether they have unsaved changes.
Heuristic	Visibility of system status (S) / Error Prevention (S)
Description	All changes made to the expenses table, including adding expenses, editing expenses, and deleting expenses are only saved once the user clicks the "Save expenses" button at the top of the site. Besides the fact that the user may forget to press this button and lose their changes (lack of error prevention), I also noticed that the current design does not adequately make the system status visible to the user. Specifically, users have no way of knowing whether there are currently any unsaved changes. This creates a safety issue for users since they may lose their work as well as an efficiency issue since users must explicity save their changes.
Severity	Major: needs fixing and high priority The fact that users are not shown whether they have unsaved changes combined with the fact that they must explicitly save their changes is a major issue for users and will come up every time the app is used. It should be very clear whether there are unsaved changes, so users do not lose their work.
Recommendation	I would recommend adding a message near the "Save expenses" button that appears when users have made a change since loading the site and alerts them to the fact that they need to save their work before leaving or refreshing the page otherwise their changes will be lost. I would also recommend incorporating automatic saving wherever it makes sense to do so. For example, adding an expense should be automatically saved since the user can always delete the expense if they change their mind later. For deletions, perhaps it makes more sense to require the user to confirm these changes; however, a way to avoid this would be to have a recycle bin with a list of deleted expenses that persists for a certain amount of time and therefore gives the user some time to recover from errors. My first suggestion will improve the visibility of system status, and my second suggestion will prevent users from losing their work (i.e. prevent accidental errors).

Issue #4

Problem	Users need to re-add an expense after choosing to edit, otherwise that expense is removed from the table. This can lead to unintentional deletions of expenses.
Heuristic	Error Prevention (S) / Consistency and standards (L)
Description	When an expense is selected for editing, its contents are automatically moved to the add expense form at the top of the page. In other words, editing an expense actually involves removing that expense from the table and asking the user to resubmit the add expense form after they have made their changes. Because this behavior is externally inconsistent, users may not immediately understand that failing to re-add the expense will have the unintended consequence of deleting the original expense from the table. This can happen, for example, if the user selects one expense to edit and then switches to editing a different expense before re-adding the first expense.
Severity	Major: needs fixing and high priority This inconsistent behavior is very likely to end in users accidentially deleting expenses while trying to edit their old expenses, so it should be a high priority to fix.
Recommendation	In order to help prevent the errors mentioned, I would recommend keeping a copy of the original expense a user is editing. If the user confirms their edits, then the original expense can be replaced with the new edited version of that expense. Otherwise, if the user does not re-add the expense, then the copy of the original expense should be reinstated.