📢 User feedback

[teolemon]

In addition to the ❤️ Love Letters, here's a thread for more nuanced User Feedbacks

[teolemon]

First product I scanned was not in their database. What followed was 15 minutes of photos and questions I had no answers for. Then requests for the same photos. Then requests to write down the information that was in the photos. They may know all of this. But they don't know the first-timers like me who know nothing about any of this. Screen after screen of confusion. I gave up and deleted it.

• Background tasks + Robotoff + Lack of onboarding

[github-throwaway]

➕ Adding a new product

⚠️ I second the notion mentioned by the user above. Adding a new product is a tedious and frustrating process!

🍵 🎅 Here is the product I added: Glögimauste - Santa Maria - 37g

I took some screenshots while I logged a new item. Let me take you through my rollercoaster.

1. I'm not sure what to think of the first screen. I think there is a lot of empty space and a lot of text. At a glance, it almost looks like some sort of debugging information. Maybe a visual would help here In the style of the onboarding graphics? Maybe to celebrate that YOU are the first person to scan this mysterious item? Maybe promise something if the user adds the item? Gamification? Open for ideas.
2. This is where the app writes checks it can't cash: "Please take the following photos and the Open Food Facts engine can work out the rest!" That is a lie and as a user I felt betrayed. I thought the only thing I need to is takes picture. Not true. There are also too many choices. What should I pick first? The wording should be changed and the option shown reduced!
3. After you take the picture, it's somewhat counterintuitive that you have to use the back button. If this is the first picture you take, "Select an existing image" should not be shown.
4. The icon displayed during upload looks broken. This should be fixed.
5. After you have uploaded all the pictures, you come to the (in my opinion) most daunting task. Picking a category. I have no idea what to pick. Reluctantly, I pick something. The autocomplete is not really helpful. Plus, if you add a new category ("My new Category") it gets saved as "my-new-category". Confusing.
6. Now I need to fill in the nutrition facts. Why? I was promised I only need to take a picture and the Food Facts engine can work out the rest. I feel lied to. Also, why is there Unknown product name and unknown brand at the top. Feels weird.
7. Why does the keyboard show a comma (,) but in the text field I see a period (.). Most likely due to the locale, but I was confused by this.
8. Most products don't have an alcohol content, so I pressed the 👁️ icon to disable it. Imagine my surprise when I got an error upon saving. So what is the eye icon actually for? Also, the sodium field appears to be calculated automatically but only after you saved it (?). I was surprised by that.
9. So I filled out everything for the nutrition, but the field does not turn green? Why? Did I make a mistake? I can't pick the ingredients field because it's greyed out, so I click Next.
10. Nutri Score: Why am I shown this? I have already provided the category information. Why am I asked twice?
11. NOVA score: Again I am asked for the category? And for the ingredients. But this time I can actually click on it. So I do that.
12. Ahh. The ingredients are empty. Again, the apps broke the promise from the start ("Please take the following photos and the Open Food Facts engine can work out the rest!"). Why do I manually need to click the button to extract the text? I do that. It doesn't work correctly. So I use the build in scan text feature from the iPhone (worked flawlessly). Also, why is half of the image covered by the buttons? If the image is landscape, it should be positioned so that I can read the text on the image and I can double-check that the extraction worked correctly. Also, why does the app instruct me to indicate allergens between underscores, if that is not required anymore? Something that is also really unclear is what is supposed to go into this field and what not. What about comments regarding possible traces? What about the hint that the ingredients marked with * are sourced organically? I think the ingredients field is a source for a lot of confusion!
13. Even though I added the ingredients, the bottom is not marked as completed. Weird. At this point, I don't care anymore. I click next.
14. Now I get asked for basic information? As the seemingly last step? Why? Should this be the first step? Also, why do I need to do an extra click? Why not just show the basic information input form directly within the screen?
15. Huh? Where are the pictures I just took?
16. I switch to Finnish. Still no pictures? What the ...?
17. Why is the last letter of the autocomplete not highlighted? Weird.
18. I'm done with the work and I get .. nothing? Or at least nothing really useful. The product name was not saved? The ingredients analysis also didn't work?
19. Let's try to refresh. Arghhh. HTTP 504. Server down. What now?
20. Refresh again. So the refresh worked, but the info is still missing. Alright, here we go again.
21. Let's fill it out again. Still no pictures.... Ah. let change the app language to Finnish. Ahhh.
22. Now I at least see the picture I took. So the inputs are language specific. Good to know. The button still asks me to fill in basic details. I click on it.
23. Huh? But everything is filled out?
24. This is the point where I give up.

To be fair. It was an edge case where I added a product from a different country. But nevertheless, the process was extremely intransparent and frustrating. The journey felt not at all logical, and I would think a person that is not tech-savvy would be lost as a user at this point.

An alternative approach

• Don't make promises you can't keep! Don't lie to the user or lead them on.
• Start with easy, low-effort, no-brainer mini tasks, such as image capture or easy data entry.
• Be transparent. What happens automatically, what needs to happen manually. Give examples. Show Dos and Don'ts.
• Show the progress throughout the process.
• Don't ask for information more than once.
• Image capture and data entry should be more tightly coupled. I take the picture, the information automatically gets extracted, I doubled check the information, and then I submit it.
• Don't give me the impression my data is not saved. I just take a good minute copying nutrition information, don't let me believe I wasted that time by not showing the stuff I just entered.
• Clearly explain the language setting. Why can I change the language in every single setting? How does it work? I'm beyond confused.
• Above all, it must be convenient, low-effort and fast. This process should be so easy that a 5-year-old could do it within one minute.

[c0coco]

As a new user (of this amazing project!) I recently went through most of this myself too and I wholeheartedly agree with all of your findings above. Thanks for writing this down. There is lots to gain here in UX/UI that can help improve user motivation to supply data into OFF.

[teolemon]

Hello Malte,

• All your points are perfectly valid and we agree with them.

• A couple of reasons for the sub-par experience.

• Be reassured that we are aware of many of the issues you raised.

• Part of issues you're seeing are due to the fact that the server still remains slow (Autocomplete, Gateway, Long time between scan and addition screen) cc @stephanegigandet @alex-garel

• It also seems that you don't have the latest version of Open Food Facts, since we are revamped the screen mentioned in point 1 (new product screen) (feat: New layout when a product is found #6073)

• The Open Food Facts engine thing is indeed kind of an aspirational lie. We are actually about to include the automatic nutrition extraction (Allow to auto-magically extract nutrition facts from a photo #4896), so the promise will be closer kept. We also have several issues where we want to integrate robotoff questions within the product addition flow. (We can add Robotoff questions filtered on brands in the basic details editing section #4069, We can add Robotoff questions filtered on labels in the labels editing section #3986, We can add Robotoff questions filtered on category in the category editing section #3985 and more generally: Supercharge the app with artificial intelligence (Tracker) #4027)

The category browser is very elistic IMO. We designed and coded a much better solution with Miller's columns, but it didn't make its way to the app for a lack of consensus/bandwith at the time. (#565)

Other issues as I find them in the backlog / open them

• Preload the OCR in product addition Preload the OCR in product addition #6137 Preload the OCR in product addition #6137
• The icon displayed during upload looks broken. This should be fixed. #6136

[github-throwaway]

Hi Pierre, thanks for the in-depth reply. I really appreciate it :) Below is my debug information. I didn't see an update in the App Store. How can I get the latest product found screen?

LocaleString: de_DE
Language: OpenFoodFactsLanguage.GERMAN
Country: OpenFoodFactsCountry.GERMANY
IsLoggedIn: true
UUID: 16a2e86b2af94eda
Matomo Visitor ID: C000000000000000
QueryType: QueryType.PROD
Domain: openfoodfacts.org
UserAgent-name: Smoothie - OpenFoodFacts
UserAgent-system: ios+Version 17.7 (Build 21H16)
User group: 0
SystemVersion: 17.7
Model: iPhone
localizedModel: iPhone
Version: 4.16.1
BuildNumber: 1364
Scanner: Instance of 'ScannerMLKit'
Store: StoreLabel.AppleAppStore
PackageName: org.openfoodfacts.scanner

[g123k]

The app was blocked by Apple and that's why your version was 4.16.1.
But everything is fixed (don't ask us why) and 4.18.1 is on the App Store.

The UI/UX will change in a few days for your remarks about product addition.

[teolemon]

We had a user (a reviewer for a EU project actually) who believed we sent the Food Prefs to the server, despite the warning

[github-throwaway]

💬 Feedback from a new, tech-savvy user

tl;dr: IMHO, the biggest issue Open Food Facts faces today is a user experience with too much friction and too much cognitive load. These issues lead to user frustration and low retention rates, which ultimately hinder the app's ability to grow and achieve its mission.

---

✨ It goes without saying that Open Food Facts is an amazing project, and the countless hours invested by volunteers have made it into what it is today 💪 . So, with all the good intentions and respect for the work done so far, here’s some hopefully constructive feedback. I will split the feedback into different post, so it's easier to track with the threads.

---

🧠 Cognitive Load

Cognitive load is the total amount of mental effort that is required to complete a task. You can think of it as the processing power needed by the user to interact with a product. If the information that needs to be processed exceeds the user’s ability to handle it, the cognitive load is too high.

There are some excellent case studies on this by Growth·Design where I also borrowed the definition from.

📋 Use Cases

Let’s recall the primary use cases for Open Food Facts:

Consumer Applications

Target: Individual consumers
Goals:

• Avoid allergens
• Follow diets
• Track nutrition
• Find alternatives
• Check sourcing/sustainability
• Compare prices

Professional Data Usage

Target: Developers, businesses, researchers
Goals:

• Build applications
• Market analysis
• Scientific research

With the users and the use cases laid out let’s focus on the first group.

🛒 User: the individual consumer

Individual consumers turn to the app with specific, immediate needs—such as avoiding allergens (e.g., peanuts or gluten) or adhering to dietary restrictions (e.g., vegan or keto diets). However, the current design attempts to address all possible use cases at once, overwhelming users with unnecessary information. For example, someone who is gluten intolerant likely doesn’t care about recycling instructions—they just want to know if the product is safe for them. By focusing on personalization and allowing users to prioritize the features and information that matter most, Open Food Facts can deliver a more streamlined and satisfying experience, reducing cognitive load and increasing user retention.

Onboarding

Below is the current onboarding flow. I think it's great that I can use the app without an account! But let's see how we can improve the onboarding further.

Step 1	Step 2	Step 3	Step 4	Step 5	Step 6

• Step 2: Missing progress bar. Starting on the second page, there is a gray bar at the bottom, but it does not show any progress. If it is not supposed to be a progress bar, then the line should be removed.
• Step 3: Unnecessary popup to load a sample product. Maybe bundle that data with the app? If the schema stays the same, then there is no need to fetch this from a server. It's just an additional point of failure.
• Step 4: Loading of the sample product failed. That a bad start, I guess?
• Step 5: It's not clear that you can scroll on this page. And also apparently the sample product did load? I'm confused.
• Step 6: Where did the back button go? What if I want to change something?

🤯 Overall, the app shows me all the stuff it can do for me, which is a lot! There are so many buttons, labels and settings. Everything is clickable. I can even edit the sample product. I found this to be quite overwhelming. What if I don't even want to use these features? Or only some of them?

Alternative Onboarding

Ask the user. Guide the user through a set of questions to set up the app and set their preferences. I don't like this specific design, but I think it goes into the right direction.

Ask the users what they want to use the app for and customize accordingly. If I only want to check the sustainability aspect, then the entire section about allergies is not relevant to me.

Possible questions

• Question: What is your main goal?
• Possible Answers: (Multiple choice)
  • Avoid allergens
  • Follow diets
  • Track nutrition
  • Find alternatives
  • Check sourcing/sustainability
  • Compare prices

Depending on the user's input, continue with fitting multiple choice question. All the questions, should allow for custom input that is autocompleted. List the few most common options at the top. No need to list 300 different diets. 5 of the most common are enough. The user can always find what they need though a specific autocomplete field.

The exact questions and wording is of course to be determined, but I think the most important part is to not overwhelm the user.

Question	Options
Do you follow any of these diets?	- Keto - Vegan - Other (Autocomplete custom diets from community, see openfoodfacts/openfoodfacts-server#9092 (comment))
Do you have any of these food allergies?	- Mustard - Milk - Other (with autocomplete text field)
Do you avoid any of these foods?	- Gluten - Eggs - Other (with autocomplete text field)
Do you prefer products with these labels?	- Organic - Fair Trade - Other (with autocomplete text field)
Do you limit any of these ingredients?	- Sugar - Salt - Other (with autocomplete text field)

Resources

• Cognitive Load Theory
• Level up your UX skills with fun weekly comics
• Loading & progress indicators — UI Components series
• User onboarding: best practices

[github-throwaway]

It seems #4840, #4841, #4795 are already looking at something like this.

[teolemon]

Yes, and the current onboarding is slated for demolition.

[teolemon]

• Make the onboarding product refresh non blocking #6138
• Add a quick progress bar in the onboarding #6139
• The perfect product fails in many languages #6140
• Revamp the privacy screen #6141

[github-throwaway]

⚡️ Performance

• Frequent 504 Errors, while using the website, the API and the mobile app.

• Slow Load Times: Prolonged response times (especially on the website) frustrate users and hinder usability.

• UX/UI Impact:

  • Users experience interrupted workflows and lose trust in the platform.
  • Perception of an unreliable or outdated system undermines user confidence.

[teolemon]

@alexgarel @stephanegigandet Despite improvements, Perf has a very real impact on pissing out users.

[teolemon]

cc @CharlesNepote for the real value of having enough server capacity

[github-throwaway]

This PageSpeedInsight analysis might be of interest. It also provides ideas on what to change: https://pagespeed.web.dev/analysis/https-world-openfoodfacts-org/wk5sdz1yao?form_factor=desktop

Here is also one analysis by Mozilla:
https://developer.mozilla.org/en-US/observatory/analyze?host=world.openfoodfacts.org

And a last one for good measure:
https://tools.pingdom.com/#650f18b7c9c00000

Interestingly, the staging environment performs much better:
https://pagespeed.web.dev/analysis/https-world-openfoodfacts-net/sfyfp0qv9v?form_factor=desktop

[stephanegigandet]

@github-throwaway Thanks a lot for all the detailed feedback and ideas on UX and performance!

[github-throwaway]

Data Quality Issues

Top 3 reasons why Data Quality might be low

1. Product Addition Barrier: The process of adding new products is too complex and time-consuming, creating unnecessary cognitive load that discourages contributions
2. Edit Complexity: Editing an existing product is too complicated . It’s not immediately clear where to fix what. The input fields are sometimes hard to fill out. As in, what to write there.
3. Language System: The language feature implementation is confusing, with unclear distinction between language-specific and global inputs

Detailed Analysis of Current State

Language-Related Issues

• Wrong language entries create "unknown ingredients"
• UI inadvertently guides users to input data in incorrect language
  
• Unclear language-specificity of different fields

• Lack of clear examples how to fill field (much better on web version)

Image & OCR Quality

• Common image issues: wrong orientation, blur, poor cropping
• OCR text extraction produces gibberish
• No feedback that input is good/bad
• No automated image quality checks (I think?)
• Duplicate images exist (Example: https://de.openfoodfacts.org/product/4311501060766)

Data Entry Problems

• Amount and weight field often say 1pcs instead of useful value. What to put here? L/l/Liter? With space between number and unit? Without? No clear guidance on preferred formats

Potential Solutions

1. Implement Google Vision API crop hints for better image processing
2. Increase manufacturer/supplier data participation
3. Make it harder for user to make mistakes though UI
4. Consider legal scraping options (EU text mining exceptions), not necessarily to fill out the data but maybe as a feature in nutripatrol to aid moderators

Quality Monitoring

• Implement quality score tracking over time
• Notify user who edits the product (and moderators) when quality scores decrease. Meant as a warning.
• Allow subscription to specific products for changes/quality monitoring (I saw an issue for that somewhere)

References:

• Google Vision API: https://cloud.google.com/vision/docs/crop-hints
• UX Error Design: https://uxdesign.cc/designing-for-errors-6d3aac033b83

[g123k]

The UI is a bit updated in 4.18.1, it should fix your remarks.
Concerning the product's name, we will switch to one language per line instead of this annoying system.

And finally, for quality issues ("liters" for example), we will add "Help" features to product name/brands/quantity.
This help will also be visible during the product addition.

[github-throwaway]

Product page

Viewing

• I don’t know how current the data is
• I don’t now how correct the data is
• If data provide by manufacturer it should clearly visible at the top. This clear distinction ( a seal of quality so to say) could also be an incentive for manufacturers. A way to differentiate from the competition.
• I need to scroll a a lot
• I can't customise to my needs.

Edit

• autocomplete/suggestions too slow, so people enter whatever they think is right
• I don’t know what that label (eg Triman) is called, so I can’t add it. Better: logo detector, suggest labels visually
• On web, really inconvenient layout to edit a product. Lots of scrolling required.

It should be immediately clear if the data is provided and verified by the manufacturer!! Good for user and way to stand out for producer against competitors!

Example for confusion