DH110
Assignmnet 01: Heuristic Evaluation
Mikayla Noh | DH 110 | Fall 2022
Tentative Tile: Sustainable Eating
About the Project - Responsible Consumption and Production
The UN states that each year an estimated 1/3 of all food produced, which is equivalent to 1.3 billion tons, is wasted. We’ve all produced food waste at least once in our lives, either by letting our fruits and vegetables spoil or ordering more than we can eat at restaurants. Especially in big cities, we are surrounded by abundance of food that we do not realize how harmful wasting food is to our environment. According to the UN, the food sector is responsible for about 30% of the world’s total energy consumption and about 22% of total Greenhouse Gas emissions. We need to realize that food production uses great amounts of our resources and energy so when we waste food, we are wasting all the resources that went into the production as well as increasing green house gas emissions.
At the cost of depleting our natural resources, we’re consuming and producing more to fuel the global economy thus creating as much waste. A step everyone can make towards responsible consumption and production is to live sustainably by reducing waste and learning waste management. For this project, I will be focusing on how we can adapt a sustainable lifestyle to reduce food waste and make responsible choices in managing food for a more sustainable future. I hope to contribute with my UX Design a website/app that can encourage sustainble lifestyles by offering tangible information with practical methods to reduce waste by consuming responsibly.
Jakob Nielson’s 10 Usability Heuristics
| Number | Heuristic | Description |
|---|---|---|
| 1 | Visibility of System Status | Clearly and visibly informs the user about its current status |
| 2 | Match Between System and the Real World | Uses language that is familiar to the user and presents information in an analogous way to the real world |
| 3 | User Control and Freedom | Gives users a way to easily undo an unwanted action or redo an action |
| 4 | Consistency and Standards | Follows conventions followed by similar industry and platform |
| 5 | Error Prevention | Prevents errors by reducing error-prone conditions or checks for them by confirming with user |
| 6 | Recognition Rather Than Recall | Reduces memory load by making information needed to navigate the website visible or easily accessible |
| 7 | Flexibility and Efficiency of Use | Provide shortcuts or customizations to cater to both experts and non experts |
| 8 | Aesthetic and Minimalist Design | Only contains information and features that are relevant |
| 9 | Help Users Recognize, Diagnose, and Recover From Errors | Provides clear error messages for problems and potential solutions |
| 10 | Help and Documentation | Has easily accessible resources to help users complete tasks |
Severity Ratings for Usability Problems
| Rating | Description |
|---|---|
| 1 | Cosmetic problem only: least priority |
| 2 | Minor usability problem: low priority |
| 3 | Major usability problem: important to fix, high priority |
Website 1: Further with Food
About
Further with Food is a center for food loss and waste solutions, devoted to reducing food waste, feeding hungry people, and diverting food to its most beneficial use. Users from businesses to investors and individuals are able to gain information about food loss and waste in the United States as well as solutions to reduce it from the many resources they provide. Further with Food also serves as a community platform where users can find and share information about proven solutions and innovate new approaches to combat food waste.
The website was initiated and is supported by a public-private partnership composed of the Academy of Nutrition and Dietetics, Feeding America, the U.S. Department of Agriculture, World Resources Institute, and many more credible, official organizations.
Overall Evaluation
Although the website contains and provides a lot of valuable information, the poor organization of the resources makes it overwhelming to use and incomprehensible. The website feels outdated and the solutions they provide do not seem tangible. A better organization of resources can help the website be more practical with their goals.
| Heuristic & Description | Evaluation | Recommendation | Severity Rating |
|---|---|---|---|
| 1. Visibility of system status |
The website shades in the menu that the mouse hovers over but after a user enters a page, there is no other indication than the filter bar on the left to let users know which page they are in. | Instead of having the filter bar indicating what page they are in, include a header that says the menu name at the top of the page so users can have a clear distinction first before choosing filters. | 2 |
| 2. Match between system and the real world |
The search bar is extremely vague and doesn’t provide specifics. The resources page is also not intuitive to use, as the information “cards” are scattered on the page. This can be confusing for users to know how they are sorted | Add more specifics like serach for authors, tags, topics, etc on the search bar. Create a clearer way to present information in the resources page by sorting in rows or separating into categories. | 3 |
| 3. User control and freedom |
In the Share Resources section, if the user accidentally adds a wrong tag, there is no way for them to remove the tag because the added tags are not displayed in the white text box that is given under “Tags”. | An option to remove added tags by displaying the tags after the user adds a tag. | 3 |
| 4. Consistency and standards |
“About” and “Help” pages are named differently. This may cause users to take a longer time locating where those pages are. There is also no “Contact” page in the menu bar and is only listed at the bottom of the page which may not be obvious to users since the other pages are displayed above. | Change “About this site” to “About” and “How to use this site” to “Help”. Add “Contact” next to the about and help pages. | 1 |
| 5. Error prevention |
The search bar does not have any spell check or recommendation features. | Provide alternatives in the search bar or recommnedations while a user is typing. | 1 |
| 6. Recognition rather than recall |
After selecting multiple filters, the website does not display which filters were chosen clearly. This forces users to recall what filters they have chosen while browsing through the resources page. | Add a “showing results for…” in the header or a list of filters that were chosen for users to easily see. | 2 |
| 7. Flexibility and efficiency of use |
Although there is a filter feature, there is no clear distinction for users to know which resources are being shown for which filters. There’s also no option for users to search for specific events in the “events” page and the search results are shown by walls of text. | Organize filtered results into separate categories with respective headings, add search bar in events page, and allow users to specify which category they want to search in. | 3 |
| 8. Aesthetic and minimalist design |
Further with Food provides an overwhelming amount of resources that can be cognitively straining for users as they display everything with no clear organization | Display only the resources that are highly recommended first and allow users to browse/search through others. | 3 |
| 9. Help users recognize, diagnose, and recover from errors |
If a user enters a search with a spelling mistake, the website simply gives result for the wrong search. | Allow users to change search to the correct spelling after the search is made by providing correct recommendation. | 2 |
| 10. Help and documentation |
Although the “Help” page provides step-by-step tips on how to navigate the site, there are no direct links to the questions that are asked and uses jargon that may be difficult for those that are using the “Help” page to understand. | Add images in their instruction or include a direct link that takes users to the specific pages that are in need. | 2 |
Website 2: Imperfect Foods
About
Imperfect Foods is a website that encourages sustainability and reduces food waste by providing grocery delivery services. They carefully curate groceries that are “imperfect” and best of their kind to build a less wasteful world. Products that were just surplus or cosmetically unpleasing and had to go to waste are being offered to responsibly consume and reduce waste, supporting sustainable lifestyles.
Overall Evaluation
The website is aesthetically pleasing and easy to use overall and provides good information on food waste for consumers to educate themselves. Imperfect Foods organizes information in a fun and engaging way for users to explore their service and learn about sustainable lifestyles. However the lack of user control and freedom makes the website difficult to use and can frustrate some users that may want to exit out of the sign-up process and just browse.
| Heuristic & Description | Evaluation | Recommendation | Severity Rating |
|---|---|---|---|
| 1. Visibility of system status |
Once the user clicks on the new page, there is no visible indication of what page the user is at. The menu bar follows as the user scrolls but all the pages in the menu bar remain the same colors. | Coloring in the specific page in the menu bar can help users be aware of what page they are in. | 2 |
| 2. Match between system and the real world |
When they explain their packaging, “LDPE plastic #4” is constantly mentioned throughout the page but no further information is included on what that is. This can be very confusing to users and hinder their understanding of further explanations. | Define what “LDPE plastic #4” is first before the explanation about packaging to reduce confusion. | 2 |
| 3. User control and freedom |
During the sign-up process, if a user clicks on the Imperfect Foods logo, it stays on the same page instead of going to its home page. This may cause user to experience frustration as they have no escape to leave the process midway. | Provide an option to exit the sign-up process and allow user to go back to the home page. | 3 |
| 4. Consistency and standards |
“Food Waste” and “Our Social Impact” takes users to the same page but their names are different. This inconsistency can cause users to feel confused when nothing happens after attempting to go to a new page. | Keep a consistent name for the page or refresh the page when a user clicks on either one so they realize that it is taking them to the same page. | 3 |
| 5. Error prevention |
The search bar does not have any spell check or recommendation features. | Provide alternatives in the search bar or recommnedations while a user is typing. | 1 |
| 6. Recognition rather than recall |
There is no easily viewable list of groceries that users can see in the list of sample groceries. Users need to constantly scroll down to view all the groceries or remember the whole list. | Add categories in the header of the sample groceries so users can easily access the list. | 2 |
| 7. Flexibility and efficiency of use |
There is no search bar on the website for quick and easy searches. Users will need to scavenge through the website to find specific informations they are searching for. | Create a serach bar outside of the FAQ page for users to easily use. | 2 |
| 8. Aesthetic and minimalist design |
Their website overall is clean and easy to navigate but their FAQ page contains walls of texts with headings. Users need to scroll through the text to find what they are looking for. | FAQ page should display main headings only and allow the questions to be in a toggle for each. | 3 |
| 9. Help users recognize, diagnose, and recover from errors |
If a user presses the home icon while browsing the site and they haven’t finsihed their sign-up process, it takes them back to the stage of signing up. This can confuse users as to why they are constantly redirected there. | Include a message asking user to complete the sign-up or provide an escape to quit the process. | 3 |
| 10. Help and documentation |
There is no “About” page and the “Help” page is hidden in the FAQ page where users need to take an extra step to find. | Add a “About” and “Help” page in the menu. | 2 |