"Questions" game: UX Improvements

[braaar]

The main operation in this game is not very streamlined for a good user experience. I think it could be improved by reorganising the layout so that the most important things are easily visible. The focal point of this game to me is the question, the image of the product, and the yes/no/skip buttons.

Images should be bigger
It can sometimes be very hard to read small and blurry text on the image.

In this example, (desktop 1920x1080p) I can make out WWW.PILEJE.FR by squinting a bit, which is sufficient information to deduce that this product is from the brand "PILEJE".

It's easier to read this on the larger image that I can see by clicking the fullscreen image button. However, this operation is not very ergonomic. In order to see the larger image I have to press the fullscreen button (no keyboard shortcut) and afterwards I need to close it again. It's not nice to have to do this everytime.

In my opinion, the image should be as big as possible without causing overflow in the y direction.

Keep it centered
Also, I think the main content of the game (the content that is currently in the container on the left) should be centered to emphasize where the user should focus their attention. It's awkward to always be looking at the far left side of the page. Other details can be shown in sidebars on either side.

Here's a crude mockup:

We can easily make the image quite a bit bigger than the current version with some tweaks like this.

Keyboard shortcuts
It should also be possible to rotate the image from the main view, with keyboard shortcuts (arrow keys, maybe?). If we implement this well I think the fullscreen image viewer can be removed.

[braaar]

As you can see in my mockup, I removed quite a bit of content.

I'm sure that stuff is useful, but when I first started using this, it felt like unnecessary noise, and it was definitely taking too much valuable space on the screen. I would recommend moving some of that stuff to a collapsible sidebar or something of that nature.

"Remaining questions: 61705" could even be demotivating, so I would consider removing that entirely.

[VaiTon]

"Remaining questions: 61705" could even be demotivating, so I would consider removing that entirely.

I do agree with that. Maybe hide it by default behind an option.

[raphael0202]

Or adding a 99+ instead, with the possibility to get the full number on hover. The number of remaining question is quite important to me.

[braaar]

Since that number is bound to be so high for quite a long time (I assume), I think it could be hidden away behind some kind of context menu. I would think it's more valuable and motivating to show the user how many questions they have answered.

[alexfauquette]

That number is bound to be so high for quite a long time

It depends on how you filter questions. If you filter questions for example "Does this product has the label organic EU" you might get less than 100 questions, and it can be satisfying to know you did all of them

[braaar]

Aha, I see. That makes sense.

[VaiTon]

I think that instead of removing the info (which can be quite useful sometimes, it would be better to make the left image zoomable on click, instead of the bottom-right button we now present to the users which is not always seen.

[braaar]

I disagree. Seeing a big image is the number one priority for me. It doesn't make sense to have to click the image every time to get the most useful view.

A good compromise here would be a "zoomed in/image focus" mode that persists between questions, so that you can switch to that mode and then keep answering questions.

[alexfauquette]

Technical point of view: openfoodfact provides images with different max size:

• 100px
• 200px
• 400px
• full (the original resolution of the picture)

We currently use 400px by default. If we were using the full size image, the image loading time might be noticeable between two questions

But yes we could let the visual state (full size or reduced) stay the same between two questions. because you need to read on some specific one, but for others (mostly based on logo or branding) small images are enough

[braaar]

I would say a stretched 400px image is an improvement over a smaller 400px image, at least on most screen sizes? Many times the text on the products is just kind small so you just need to blow it up even if the resolution isn't perfect.

If we implement progressive image loading that would be the best way to get a "large image mode" working smoothly. But I guess we don't have anything like that in the current tech stack? It comes free with Next.js and whatnot, but we don't necessarily have to go there, either.

[raphael0202]

I'm not sure that the issue has to be solved on Hunger Games side.
Many brand insights are regex-based, and by default Robotoff uses the picture from which the detection has been generated.
For regex-based brand insights, it makes sense to display instead the front picture by default: we're almost certain that the detection is correct (mismatches due to OCR errors are very rare).

[braaar]

How would you guys feel if I took a stab at implementing a "large image mode" that can be toggled on or off based on the user's preferences (but is persistent so that when it's on it stays on for every question)?

[alexfauquette]

Sounds good as long as we keep a quick access to the two menu in the right which are usefull for advenced users.

To give you some context, the first one is usefull for:

• showing other images of the product, which allows to detect images added to a wrong barcode (main image is a green bottle, the others are yellow boxes, you spot the problem)
• showing additional information. Requested by contributors, they seems to appreciate to know that the label was no already present in the product data

For the second one, it dispolay the number of product to annotate, but mostly the history of the last annotated products. Which allows to revert wrong annotation by either stopping the request, or going on the product page to manually correct it if the request has already been sent

[braaar]

Current progress

I'm unsure where I want the cropped logo to be. It feels like it's taking up way too much vertical space here, but I didn't like having it in the bottom right corner, either 🤔