UNDER CONSTRUCTION
Heuristic Analysis of Bison’s Salt Water Disposal App
Findings
Overall, users are capable of executing the functions the app was designed to allow them to do. However, a lack of guidance and support make the disposal app feel very thin, eroding user trust over time.
Recommendations
Help the user orient themselves within the web app
Allow for more personalized actions
Clearly display all information or indicate that there is more information to be show
Methods
Heuristic Evaluation
Tools
Nielsen-Normal Design Heuristics, Microsoft Excel, Zoom, Miro
Timeline
September 2022
Team
Roque Chavis, as supervisor, and Tiny Freeman, as PM
Company
Bison Technologies
My role
UX Researcher, Project Manager
Project Overview
Bison Technologies is a rapidly growing software company targeting the industrial energy supply chain and transportation sectors. Their products (both mobile and desktop) primarily address three specific customers within these sectors: back office administrators, truck drivers, and well-disposal operators. For this project, we focused on the last of these customers to improve their mobile app experience as part of Bison’s new user-focused initiative.
With a fledgling UX team, Bison had never before conducted any sort of user-focused analysis on its products before. When I joined, I noticed that much of the design was utilitarian — but for programmers and product managers. This, along with two other heuristic analysis of our additional projects, was something I initiated when I joined Bison’s UX Research team. Each were completed within a two-week timeline and were scheduled for a quarterly review, if there had been any major changes implemented to the products.
The application was broken down into five pages: Ticket submission, Admin, Attendant, Coordinator, Manager. Each page had its own separate function, accessible by which privileges the user had access to. The ticket submission page was primarily for drivers to submit their tickets at a disposal site (this app was on a tablet inside a covered lean-to), while the rest of the pages were designated by user title (managers used the manager page).
As this set the foundation for other heuristic analyzes and user-focused projects, the standardization of and goal-setting for this initial analysis was paramount above all else. Our goals for this project were:
Identify any violated heuristics that served as a major problem to the use of the app
Evangelize the process of a heuristic evaluation so all stakeholders could come to an agreement on priority and scope
As a result, a year later we were asked to complete a follow up evaluation and heuristics improved across the board by 13%.
What is a Heuristic Analysis?
The Nielsen-Molich heuristics state that a system should:
Keep users informed about its status appropriately and promptly.
Show information in ways users understand from how the real world operates, and in the users’ language.
Offer users control and let them undo errors easily.
Be consistent so users aren’t confused over what different words, icons, etc. mean.
Prevent errors – a system should either avoid conditions where errors arise or warn users before they take risky actions (e.g., “Are you sure you want to do this?” messages).
Have visible information, instructions, etc. to let users recognize options, actions, etc. instead of forcing them to rely on memory.
Be flexible so experienced users find faster ways to attain goals.
Have no clutter, containing only relevant information for current tasks.
Provide plain-language help regarding errors and solutions.
List concise steps in lean, searchable documentation for overcoming problems.
Metrics system for our evaluation
Process of Evaluation
Work through each section from a general user’s perspective
Note: Heuristics should be adhered to regardless of roles and/or permissions
Using the 10 heuristics as a benchmark, assign a “severity rating” to each of the usability issues identified (if any)
Discuss findings amongst the evaluators, evaluating ratings assigned ensuring consensus.
A heuristic analysis (HA) is used to identify a product’s common usability issues so that the problems can be resolved, consequently improving the user’s satisfaction and experience and raising the chances of a digital product’s overall success.
It’s important to note that a heuristic analysis should not replace usability testing. Although the heuristics relate to criteria that affect your site’s usability, the issues identified in a heuristic evaluation are different than those found in a usability test.
If heuristics are (and should be) the backbone of your platform’s usability practices, think of a heuristic analysis as your annual checkup! 👩⚕️👨⚕️
Criteria for Rating
Impact: Will it be easy or difficult for the users to overcome?
Frequency: Is the problem common or rare?
Persistence: Is the problem a one-time problem?
Scale of Severity
Major problem
If it breaks the heuristic
High impact: this blocks workflow
High frequency: very common
High persistence: repeated exposure
Medium problem
Medium impact: this affects workflow
Medium frequency: repeated but not everywhere
Medium persistence: repeated but solutionable
Minor problem
Low impact: this barely affects workflow
Low frequency: occasional instance
Low persistence: easily overcome
Meets best practices
Fits standard design requirements
Heuristic #1: Visibility of System Status
Requirements:
Is the design keeping users informed about what's going on?
Do users know the outcome of their prior interactions?
Are users able to determine next steps?
Are users informed of consequences or their actions?
Ticket Submission
Function of the page: Truck drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Examples:
Changing button color when active, or displaying a progress indicator.
Notification when the user has purchased something, downloads something, or otherwise performed an action
Forms have indication of how long they will be with dots, number ratio, etc.
In this section, the disposal site was clearly labeled, both English and Spanish funnels were easily identified (the option chosen is grayed out). However, where drivers can identify their ticket number is not clear and there is no progress indicator bar. Additionally, the Kabob menu to go into other role views is not immediately obvious to find. Lastly when "image attached" is clicked, the modal is empty except for the ticket name and close button and it is unclear what next steps are. As a result, this heuristic was scored as a Medium Problem.
Admin
Function of the page: Back office administrators might use this page to find all users in the system as well as see who is on-shift that day.
FAIL
Under this page, a confirmation message does pop up after a user makes any edits. When the edit is made, the modal maintains section title and under the user roles, that section is also properly highlighted. That being said, it is not immediately clear what first steps are, nor is it clear that in order to find the list of users, a user must click “load users”. There is no warning message to identify what would happen if a user is deleted or how to remedy the situation if it happens on accident. Due to these potentially damaging faults, this heuristic violation was scored as Major Problem.
FAIL
Attendant
Function of the page:
This page was designed for disposal attendants — those who worked at the site or managers. Both wanted a list of all services for a given well at a given date.
While the disposal site name is very clearly labeled, there are no clear next steps or what actions to take. Because there are no clear next steps, users are unsure how long the process will take. Additionally, there is no hierarchy of information and there is no confirmation before downloading a CSV. Because of this, this heuristic violation was scored as a Major Problem.
FAIL
The tickets are organized by timestamp, which is most useful for users. When the reports are being loaded, there is a time wheel to reflect back end operations are being executed. However, it is not immediately obvious as to what the correct first steps are to take. Additionally, there is no hierarchy of information. Due to this, this heuristic violation was scored as a Major Problem.
FAIL
Manager
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Results summarized:
Every single heuristic failed. However, the more serious failings exist around identifying clear next steps for users as well as a lack of information hierarchies.
Because there is no clear indication of what the users should accomplish here, or how to execute these goals, this violation was scored as a Medum Problem.
FAIL
Heuristic #2: Match Between Systems and the Real World
Requirements:
Does the language used match how users speak? (no internal jargon)
Does the information appear in a natural or logical order?
Are concepts used familiar to users? (user research & usability testing will help answer these questions)
Ticket Submission
Function of the page: Truck drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Examples:
Navigation titles should be easily understood, not catchy phrases.
“Peoples mental models of how technology works is based on their previous digital experiences and in the physical realm” - NN video = skeuomorphic design
Kindle book turn pages and highlight just as you would with a real book, or the recycle bin for discarding files on your computer.
On this screen, ticket is a "Ticket" is a term that is used amongst Spanish speaking drivers. Additionally, icons and terminology matches other systems outside of Bison. Unfortunately, not everything is entirely in Spanish (i.e. “you are at”), which does not help Spanish-speaking users. Depending on which hauler, several hauler names are nearly identical with no way to determine which is correct, which leads to errors with the subsequent operator and well logic. Lastly, using the clock feature over something like a scroll wheel to determine time is not something most users are familiar with. Due to these violations, the overall violation for the heuristic was identified as Minor Problem.
FAIL
Admin
Function of the page: Back office administrators might use this page to find all users in the system as well as see who is on-shift that day.
Fortunately, terminology and concepts reflects the real world nomenclature as well as other Bison products. But, based on prior system experience, it looks like chips under roles should be able to be clicked and dragged, but that is not their function. Additionally, it's unclear if "delete" is intended to delete a user or delete your changes. With this in mind, these heuristic violations were identified as Minor Problems.
FAIL
Attendant
Function of the page:
This page was designed for disposal attendants — those who worked at the site or managers. Both wanted a list of all services for a given well at a given date.
The search function allows the user to search by ticket for each column, an important feature. However, the calendar function does not provide the same ease as it does not match anything else in the real world or any other Bison products. Similarly, “refresh” is one of the first options, which indicates a potential hierarchy, but there isn’t one. Due to the fact that these features can be confusing for users and prevent an effective workflow, this problem was identified as Medium Problem.
FAIL
Here, Users must click 'refresh' after a filter is applied, where in most other systems, they can tap return. Additionally, each time the page is loaded, the user must click "refresh" to receive ticket list. Because of these confusing functions, these violations were given a rating of a Medium Problem.
FAIL
Manager
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Results summarized:
Clock Feature
Here, the good outweighs the bad. Names of charts reflect other instances in the platform and users have the functionality to sort by their preferred column. The Print/PDF button reflects similar functions elsewhere in the real world, as does the date selection function. However, the date with the year first might be confusing to American users. Lastly, because individual rows are highlighted, users might expect to be able to click into the row and receive more information
FAIL
Heuristic #3: User Control and Freedom
Requirements:
Are users able to exit/change actions they performed by mistake?
Are users able to undo, redo, cancel, or go back without having to start over?
Are exits clearly labeled and discoverable?
Ticket Submission
Function of the page: Truck drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Examples:
Undo photo filter.
Cancel out of creating content, or updating information, etc.
Exit out of forms, or go back and change information easily.
Remove something from your cart that you no longer want.
For Spanish-speaking users, there is an easy switch between English and Spanish after choosing New/Nuevo Ticket. For all users, data can be cleared by tapping "clear". Similarly, it is easy to tap away if the selection chosen was made in error. Another error alert came when reviewing the attached image, the close button is very clearly marked and in red. That being said, there is no search function for the inputs. If a user has an input that is low in the alphabet, there's lots of scrolling to do. “Image attached" has no function or status change unless an image has been provided, and when clicked the image is not shown and it is unclear what next steps are. If no disposal is selected, then the New/Nuevo Ticket is grayed out. "Exit to menu" is unclear as the previous page is not labeled "menu". With all these problems, the heuristic violation was scored as a Major Problem.
FAIL
Admin
Function of the page: Back office administrators might use this page to find all users in the system as well as see who is on-shift that day.
Users here have a lot of control, specifically on how to sort the database. It’s also easy to add and delete user roles and the "cancel" button as an exit button is clear and in red. Unfortunately for users, when selecting roles, the modal disappears after every click so the user must manually go back in to add several, one at a time. Users cannot be found in the search function until after they have already been loaded and there is no way to quickly clear terms in search function. Similarly, there is no clear messaging when a user cannot be found, only that nothing is displayed and user database is sorted by Role first, not immediately helpful. Without the problems affecting a user’s workflow, these heuristic violations were marked as a Minor Problem.
FAIL
Attendant
Function of the page:
This page was designed for disposal attendants — those who worked at the site or managers. Both wanted a list of all services for a given well at a given date.
Here, users have lots of control; Users can go into "edit ticket" then "cancel" to return to Attendant view easily. Users also have control over how many tickets they wish to view at one time. But, unfortunately for users, under "+ New Ticket", a user must click "View List" to go back to Attendant view, while users are able to click back when viewing a ticket. Under Totals, there is no functionality to be had here. It is unclear what "volume" refers here too and why its correlated with 7 tickets. Users can not easily switch to Spanish here and if a user wishes to select a different disposal, the list resets to the top of the alphabet. With these problems, the violations for this heuristic were identified as a Major Problem.
FAIL
On this page, users are allowed to choose as many tickets as they wished to view at once and the search function includes all column data. However, a user clicks into a ticket, they are allowed to go back, but the user must refresh the ticket list again, which would make them lose track of where they were in a list. Plus, when downloading a CSV, the date range is the only parameter considered, the status is not considered. Tapping on a ticket row does not provide any additional details of the ticket, but instead takes you to a ticket submission page with the message "No disposal selected for this location." Once you hit the back button, your search/tickets displayed will be cleared. .Tapping the "back" button on this page logs you out. With these violations, the score was identified as a Major Problem.
FAIL
Manager
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Results summarized:
There were lots of functional problems on this page. Users are not allowed to change the disposal site on this page, instead must go back to "attendant", which is very confusing. The date selection function where only one date can be chosen at a time is very time consuming, especially since it can take a while for the page to load. For these reasons that could potentially block the job the user needs to complete, this violation was identified as a Major Problem.
FAIL
Heuristic #4: Consistency and Standards
Requirements:
Do words, situations, or actions match those across the entire platform? (internal consistency)
Are words, situations, or actions following convention? (external consistency)
Ticket Submission
Function of the page: Truck drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page:
This page was designed for disposal attendants — those who worked at the site or managers. Both wanted a list of all services for a given well at a given date.
Examples:
Carts are consistently located in the top right corner of a site.
Navigation is generally across the top of a webpage. (improve learnability and reduce cognitive load by following internal and external conventions. Typically this is the information found in the competitive analysis
"Due to the fact that the colors and terminology are consistent with other reference throughout the app, this heuristic was not violated, and therefore, scored as Meets Best Practices.
PASS
Admin
Function of the page: Back office administrators might use this page to find all users in the system as well as see who is on-shift that day.
With this heuristic, terminology and colors match to other instances across the platform. However, there is inconsistent language between the “+ User” and “Create User” modal. Additionally, when confirming to delete a user, the verbiage states "Really delete user [Name]?" with the options "yes" and "cancel". Lastly there is no confirmation message when you’ve deleted a user. Due to these violations, this heuristic was identified as a Medium Problem.
FAIL
FAIL
Attendant
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Here, the colors, icons, and button terminology is consistent. However, users are unable to search within the Disposal field, which doesn't match how you would typically interact with this type of field. Because these violations doesn’t prevent a completed workflow, these violations were labeled as a Minor Problem.
Across the entire platform, there are similar functions and terminology as to this page. However, the title of the page (?) is "Unbilled Tickets" but users are able to filter by "Billed" status. But because this doesn’t effect workflow, this violation was a Minor Problem.
FAIL
Manager
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
This page had lots of problems, but nothing serious. It’s not clear what the charts below the summaries refer to. Additionally, this page automatically loads all content where the others pages require users to click "refresh" of some sort. Other pages allow users to sort by disposal whereas this one users cannot. Due to this minor usability issues, these violations were scored as a Minor Problem.
FAIL
Results summarized:
Heuristic #5: Error Prevention
Requirements:
Are good messages with a confirmation option available before users commit the action?
Are slips (unconscious errors caused by inattention) avoided with constraints and defaults?
Are mistakes (conscious errors based on a mismatch between a user's mental model and the design) prevented by supporting undo and warnings
Ticket Submission
Function of the page: Truck drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page:
This page was designed for disposal attendants — those who worked at the site or managers. Both wanted a list of all services for a given well at a given date.
Examples:
Buttons have logical size, color, and placement. Also, items that are clickable are indicated as such.
Confirmation dialog when transferring money or deleting a file. (worth the interruption to prevent an accident)
FAIL
There’s a lot that this page does well. Only numbers are allowed to be used in the Volume input. Users also cannot submit a ticket before attaching a receipt image and there is a clear error message indicating that. If there are in correct inputs, the error message shows up by the input. Although fields will present inline validation, this same validation is not presented when you tap "submit." The only error message when tapping submit is that "receipt image is required." The error message is not closest to the "take photo" button but rather the lane selection, which could be confusing. Due to these problems that could potentially halt workflow, this heuristic violation was scored as a Medium Problem.
Admin
Function of the page: Back office administrators might use this page to find all users in the system as well as see who is on-shift that day.
A strong feature for users, when deleting a user, a confirmation that is clearly understandable pops up. However, there is no way to undo an accidentally deleted user or an accidentally created one, and there is no confirmation message once you've deleted a user. Because of the serious implications, this violation was marked as a Medium Problem.
FAIL
FAIL
Attendant
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Fortunately, required inputs are shown in red with a visual shake if empty, and there are guard rails to prevent tickets from being deleted. However, there is no calendar error triggered even if the dates are impossible. When clicking on a ticket, an unclear error message pops up but it appears nothing is affected. When tapping on a ticket, users are immediately taken to a page and given a very technical error message. As these errors could prevent users from completing a workflow, these violations were marked as a Major Problem.
This page suffers from lots of problems. If there are no tickets matching the parameters nothing is shown to indicate this and a user could mistake this for an error. Additionally there are error notifications for calendar mistakes. Due to these violations, this was given a score of a Medium Problem.
FAIL
Manager
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
This page also suffers from a lot of problems. There is no confirmation for downloading a pdf or printing the charts, and similarly there is no distinguishing downloading a pdf or printing the chart. Due to this, these heuristic violations were identified as a Medium Problem.
FAIL
Results summarized:
Heuristic #6: Recognition Rather Than Recall
Requirements:
Are elements, actions and options visible?
Is information required to use the design (field labels or menu items) visible or easily retrievable?
Ticket Submission
Function of the page: Truck drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page:
This page was designed for disposal attendants — those who worked at the site or managers. Both wanted a list of all services for a given well at a given date.
Examples:
Google docs has an icon/graphic menu for formatting (recognition) rather than having to remember keystroke combinations or use drop down menus to find it (recall)(Recognition uses more cues to help memory retrieval)
While the camera icon indicates pictures are needed to complete the forum, there is no supportive information to remember hauler, operator, well, or ticket number (if a user doesn't know about specific inputs, there's no more information provided - no tool tips). Additionally, under the hauler selection, once you've tapped into the input and, due to the native keyboard being triggered, the dropdown menu covers the field label. The user then has to remember which information they're inputting. Because of these workflow preventing violations, these violations were scored as a Major Problem.
FAIL
Admin
Function of the page: Back office administrators might use this page to find all users in the system as well as see who is on-shift that day.
All colors and icons properly and accurate represent the action they imply, but not all elements (User Created/Updated times) are not visible. Despite the overall positive usability on this page, this violation was scored as a Minor Problem.
FAIL
Attendant
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Icons allow for users to easily remember which function each button performs, but there is no indication other columns exist past "hauler". This section was scored as a Major Problem because it could prevent a user from completing their workflow.
FAIL
Because of the multiple violations on the heuristic for this page, including not all columns are visible and its not immediately clear that others exist, and if clicking the image icon, it still takes the user to a ticket as opposed directly to the image as expected. These violations were scored as a Major Problem.
FAIL
Manager
Function of the page:
This page was designed for managers and admin to easily find unbilled tickets for this specific disposal sites.
Fortunately, all information is show and easily viewable. Unfortunately, it is not clear what 'volumes' refers to or it is not clear what percentages are being measured. Because of these confusing violations, this was scored as a Medium Problem.
FAIL
Results summarized:
Heuristic #7: Flexibility and Efficiency of Use
Requirements:
Are there different paths to get to the same page or information?
Are there any accelerators? (Keyboard shortcuts or touch gestures)
Is personalization provided? (tailoring content and functionality for individual user)
Is customization allowed? (selections about how users wan the product to work)
Ticket Submission
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Examples:
Copying text can be done in several ways, drop down menu, right click, or keyboard shortcut (accelerator).
Tapping twice on an Instagram photo is an accelerator to clicking the heart button. Following certain users offers personalization, and saving items into individualized folders offers customization
No way to simplify this
This heuristic was scored as a Meets Best Practices
Admin
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Medium Problem
Con:
- refreshing the page does not "Load Users"
- there are no alternative paths for executing necessary functions
- with a "create user' modal up, you cannot click away to clear modal, only click cancel or submit
- When creating a user and selecting their respective roles, I can only make one selection at a time although the form is multiselect.
Attendant
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Pro:
- There are several different ways to edit a ticket or view list of tickets for a given disposal
Con
- when downloading a csv, you have no control over which columns are downloaded
Con:
- there are not multiple ways to execute similar functions, for example: you can only download a csv from the home page
Manager
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Minor Problem
This heuristic was scored as a Major Problem
This heuristic was scored as a Medium Problem
All functions execute as they should, but a better user experience would be the ability to choose which charts to download
Results summarized:
Heuristic #8: Aesthetic and Minimal Design
Requirements:
Is all the information on the interface relevant and necessary?
Is there extra information that is irrelevant or rarely needed?
Does it seem as though there are too many competing elements?
Are the visual elements (graphics or photos) supporting the user’s primary goal?
Ticket Submission
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Examples:
Medium’s blogging platform is essentially a blank page, if you want to add anything you press the add button.
Trello maintains hierarchy well by having the in-depth information within the card, but the dashboard only shows headlines, or high-level information.
Shrink copy to short bullet point without loosing meaning
Pro:
- All visual elements are easy to observe
- colors are representative of actions
Con:
- Based on accessibility plug-ins, this page fails a lot of checks
- headset icon for support is unnecessary
This heuristic was scored as Minor Problem
Admin
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Minor Problem
Con:
- based on the design, it is not immediately clear that it is possible to scroll to the right to view Created/Update dates and times
- submit and "+ new user" colors are the same.
Attendant
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Con: - "refresh" and "download csv" are the same color despite having very different functions - there is no visual hierarchy of buttons and information - there is SO MUCH visual clutter - Fails different accessibility checks
Con: - there is no visual hierarchy - there are only two colors used to indicate function - because of the two colors, this page fails many accessibility checks
Manager
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Minor Problem
This heuristic was scored as a Major Problem
This heuristic was scored as a Medium Problem
Pro:
- the provided depth behind the charts make them easier to see
Con
- with no alternating colors, there is a high chance of eyestrain
- The labels of "Volume" and "percent" seem ambiguous.
Results summarized:
Heuristic #9: Help Users Recognize, Diagnose, and Recover From Errors
Requirements:
When errors occur, how easily can the users recover from them?
Do error messages indicate the problem in plain language, and constructively suggest a solution like a shortcut or link?
Are visual cues present on messages? (color, icon, image)
Ticket Submission
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Examples:
Skipping necessary fields in a form, they often turn red with a warning icon.
When arriving at a page that no longer exists, the 404 error uses concise text and an icon to clearly label it as such, often with a link home, or where it’s been moved to.
Gmail offers an undo option after sending a message.
Pro:
- Error message for missing receipt image is easy to understand, how to fix and diagnose
- Error message for empty individual inputs shows up beneath the input and the text shakes to help grab users attention
Con:
- The error message for missing receipts shows at the bottom, regardless of where the error is
- there is no error message if a date is impossible
- "Volume" validation
- After entering a large number, the messaging states that the "number must be less than 200" which could be limiting.
- After entering a small number, I'm given a banner that states "Barrels not within normal range" which could be limiting.
- If continuing to submit this volume, the Volume Warning modal actions are unclear (e.g. "Submit Anyways" and "Edit Volume")
This heuristic was scored as Minor Problem
Admin
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Minor Problem
Con:
- based on the design, it is not immediately clear that it is possible to scroll to the right to view Created/Update dates and times
- submit and "+ new user" colors are the same.
Attendant
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Con: - "refresh" and "download csv" are the same color despite having very different functions - there is no visual hierarchy of buttons and information - there is SO MUCH visual clutter - Fails different accessibility checks
Con: - there is no visual hierarchy - there are only two colors used to indicate function - because of the two colors, this page fails many accessibility checks
Manager
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Minor Problem
This heuristic was scored as a Major Problem
This heuristic was scored as a Medium Problem
Pro:
- the provided depth behind the charts make them easier to see
Con
- with no alternating colors, there is a high chance of eyestrain
- The labels of "Volume" and "percent" seem ambiguous.
Results summarized:
Heuristic #10: Help and Documentation
Requirements:
Is it easy to find help?
Is help documentation present in context and at the moment users need it?
Is help documentation easy to search and focused on the user’s task(s)?
Are there concrete steps and are they easy to follow?
Ticket Submission
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Coordinator
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Examples:
App onboarding pages, Walkthroughs, Tooltips, Popovers, Videos, Webchat, Chatbots, etc.
Help page with suggested topics to read about
When inputting credit card information there’s often a popover to explain where to find the information needed.
"Pro:
- If well is not found, there is the direct support number provided within the input
- Support is provided at the bottom on every page
Con:
- there is no way for users to troubleshoot unless they call support
- The support number could be easily overlooked since it's in the footer (which can be hidden via the device size) "
This heuristic was scored as Major Problem
Admin
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored Meets Best Practices
"Pro:
- support call number is on every page"
Attendant
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
Pro:
- Easy to contact support
Pro:
- Easy to contact support
Manager
Function of the page: drivers would use this page to record what they were hauling, where they dumped it, and which hauler they worked for.
This heuristic was scored as a Minor Problem
This heuristic was scored as Meets Best Practices
This heuristic was scored as Meets Best Practices
- the support phone number is all the way at the bottom which makes it hard to find
Results summarized:
