[front] feat: replace criteria sliders by buttons on mobile

[GresilleSiffle]

This is a draft specification of the new comparison interface for mobile.

The sliders should be replaced by buttons, and the navigation between criteria should be possible by swiping up or down.

Some questions are still pending like:

• what happens when the last criterion is submitted?
• should we have a way to display all criteria at the same time?
• can the main criterion be skipped?

specifications (draft)

When a new comparison is loaded

(a) Display the main criterion of the poll.

• The main criterion cannot be skipped by swiping up or swiping down

On one hand it eases the development and allows to not submit comparisons that don't include the main criterion. On the other hand, it forces the contributor to evaluate the main criterion before all others.

• 5 buttons are displayed on a single row: (++), (+), (=), (+) and (++), see the capture 1 in Layout

(b) A click on a button triggers the slide animation and display the next criterion.

• the selected value is sent to the API
• the scale of possible scores is sent to the API

(c) A swipe up triggers the slide animation and display the next criterion

• if no value has been selected, the API is not called

(d) A swipe down triggers the slide animation and display the previous criterion

• if no value has been selected, the API is not called
• if the previously displayed criterion was the main criterion nothing happens (for now)

(e) (question?) A swipe up or a click on the last non-optional criterion displays the "continue or change video" UI?

This may not be useful if the UI always displays buttons to load new videos. In this case, the transition from optional criteria to non-optional criteria will be seamless. This distinction between non-optional and optional doesn't look very appropriate on mobile.

• 3 buttons are displayed on a single row: (reload left), (continue), (reload right)
• a click on the continue button display the next criterion
• a click on a reload button should suggest a new video in the related entity selector

(f) For the last criterion a click on a button should

• automatically suggest a new comparison? how?
• display the "reload left or summary or reload right" UI
• display a summary of the comparison?
• something else?

Layout

Capture 1 (the button should be more visible, with a coloured background)

[maximedrouhin]

Is it really a good idea to change the sliders to this? After all I regularly see sliders in settings and other apps, and it seems way more ergonomic and user-friendly than those "+" icons... At the very least sliders are not incompatible with mobile interfaces, as they are a part of material design. What do you think?

Example (material design 2):

Example (material design 3):

1. Enabled
2. Hovered
3. Focused
4. Pressed
5. Disabled

[maximedrouhin]

Other remark:

Is it because you're trying to fit everything into the screen that you want swipe-ups and swipe-downs to switch the criterion?

I don't think fitting everything is that important, for me continuity and similarity between the platforms is pretty important too.

What would you think of simply putting the sliders on top of each other like on desktop, and letting the user scroll to see them all? Wouldn't that be easier to implement as well, since you could simply keep the desktop code?