Slider Usability and Positioning on Mobile

[farahrobleh]

The problem

On mobile, the text panel currently has three ‘notches’ where it can rest.

• The top one is quite high leaving a tiny sliver of map. Say 85% covering the map.
• The second one is (on my small-screened iPhone) just a little below that top one. Approximately 80% covering the map.
• The third one is mostly map and a little bit of text. Text panel covers approximately 35% of the map.

What we lack is an even split — right now it’s kind of too-much text or too-much map.

• Can we add another notch at 50%?
• (less important) Can we also allow the user to use any percentage they desire (but still allow some ‘snap to’-action when near a snap point).

If you need examples, contact me. You see these ‘notchy’ panels in UI sidebars often.

RPReplay_Final1731809008.mp4

Overview

What did you observe or what is a likely problem?

• The slider that displays food bank information on mobile takes up too much screen space at the start and slides in a notchy manner, which impacts user experience.

What is the user trying to do?

• Users are trying to view food bank information before and after clicking a map pin.

How many people are / will be having this problem?

• All mobile users accessing the Food Oasis platform.

Discussion and possible Solution(s)

What device is this happening on / what is the user’s context?

• This issue occurs on mobile devices when users access the application.

Discussion and possible Solution(s)

Possible challenges, solutions?
Challenges:

• Ensuring the slider is fluid and responsive, adjusting initial positioning without impacting other layout elements.

Solutions:

• Modify the slider's initial position to start at the 50% mark of the screen.
• Allow most any text slider position that user wants (except off-screen — the handle and some text should always be visible so user doesn’t lose the text panel altogether)

Resources/Instructions

• How this problem is addresssed elsewhere (possibly screenshots)?
  Look at similar applications for design inspiration. Consider using libraries that facilitate smooth drag-and-drop interactions (e.g., React Spring or Framer Motion).
• External documentation, recommendations and guides?
  Review the documentation of UI frameworks like Material-UI or Bootstrap for best practices on modals and sliders.
• Things to think about?
  User feedback on the current experience may provide insights for improvement.
• How do others solve this?
  Research competitors’ apps to see how they handle slider functionalities on mobile.

Action items

Research, internal/external testing, design?

• Developers can collaborate with the design team to prototype the updated slider functionality.
• Implement and test changes in a development environment.

[fancyham]

Added a video and more description of the issue, and desired solution for programmers.