phone mode UI: no way to search on dandisets listing page

[bendichter]

I can usually search, however the search bar is not accessible when the window is very narrow, as is the case when viewing the website on a phone:

More broadly, is responsive design a priority for us? Do we care if the app is fully functional when viewed from a phone?

[bendichter]

Also, this text overflows in phone mode:

[waxlamp]

To be descriptive, we have always prioritized the desktop experience over mobile. But if we need to focus more on making sure the mobile UX is better, maybe we can discuss it at an engineering core meeting. I am, for instance, curious about mobile use cases for DANDI.

[yarikoptic]

FWIW I pretty much tend to use phone as my "work laptop" while traveling on which I accomplish quick drills, even at times submitting easy PRs. So, I a number of times already navigated dandiarchive.org from the phone to share pointers to dandisets relevant to issues, or to people. As for how others use it -- some clues could be gained by checking out the heroku logs I guess.

We do have some, albeit not many, hits this month already:

dandi@drogon:/mnt/backup/dandi/heroku-logs/dandi-api$ grep -c Mobile 2025020*.log | grep -v ':0'
20250201-0001.log:8
20250201-0801.log:1
20250201-2001.log:7
20250202-0701.log:4
20250202-1401.log:6
20250202-1601.log:7
20250202-1901.log:2
20250203-0701.log:14
20250203-1301.log:15
20250203-2201.log:21
20250203-2301.log:21
20250204-0001.log:6
20250204-0601.log:4
20250204-0701.log:3
20250204-1001.log:1
20250204-1401.log:10
20250204-1501.log:2
20250204-1701.log:8
20250204-1901.log:17
20250204-2001.log:33
20250204-2301.log:7
20250205-0401.log:46
20250205-0601.log:8
20250205-0701.log:18
20250205-0801.log:17
20250205-0901.log:1
20250205-1101.log:53
20250205-1501.log:105
20250205-1601.log:35
20250205-1701.log:18
20250205-1801.log:1
20250205-2001.log:53
20250205-2201.log:4
20250205-2301.log:5
20250206-0101.log:36
20250206-0501.log:12
20250206-0801.log:8
20250206-0901.log:123
20250206-1001.log:10
20250206-1101.log:18
20250206-1201.log:14
20250206-1501.log:9
20250206-1701.log:25
20250206-1801.log:28
20250206-1901.log:13
20250206-2101.log:12
20250206-2201.log:4
20250206-2301.log:11
20250207-0001.log:6
20250207-0201.log:1
20250207-0301.log:1
20250207-0701.log:8
20250207-1001.log:29

I note that we do have search bar on the main page and DLPs even on the phone for me (android, chome), so I have adjusted the title. But indeed it is not visible in the line up of sorting toggles, moreover I cannot even scroll it to keep "Stars" sorting toggle visible - it scrolls back beyound the screen.

[bendichter]

Here's a possible user story:

A scientist is at a talk where the speaker presents on a paper and says that the data is available on DANDI. The data seems potentially useful to the scientist, and they don't have their computer available, so they look it up on their phone either during the talk or shortly after. They examine it briefly and star it so they can easily explore the data in depth later.

If the speaker included a QR code, a bitly link, or some other means of easily communicating a link, and our user was able to catch it in time, then the current website would work pretty well, as it does a reasonably good job of rendering dandiset landing pages on mobile. If not, it might be difficult for our user to find the dandiset, since the search feature is not working on mobile.

[waxlamp]

@jtomeck, could you take a look at this?

[jtomeck]

@waxlamp has tasked me to do a design review of the DLP and the plan was to include this in there. I'll give some suggestions here, but likely will go into more detail in the design review later on.

Avatar

• This can be made a little smaller. Same height as the current "New Dandiset Button"

New Dandiset button

• can be slightly smaller on mobile
  • maybe add a "+" icon in it for more visibility since the font and button size will be smaller/tighter

Logo

• The text in the DANDI logo can be hidden on mobile, just showing the brain

Sort by

• Having to horizontal scroll to see all the options isn't a great interaction
• Suggest making this an icon button which opens a dropdown showing the sorting options.
• The ascending/descending arrow can live next to it.
• Taking up most of the space of that bar, can be the searchbar

[bendichter]

@jtomeck ok but the inability to search is the main issue here

[jtomeck]

• Taking up most of the space of that bar, can be the searchbar

The search bar will be accessible.