Improving UI/UX/DX of solid-panes/mashlib (aka Solid data-browser)

Tim and I at inrupt are going to do some major work on the solid-panes, which is at the core of the data-browser. The focus is on improving UI and UX for end-users and improving DX for developers so that they can easily modify existing panes or create new on their own.

If you’re uncertain what I mean about solid-panes of the data-browser, think of it as the views you see when you navigate the data of your POD. The following image is a screenshot of my public folder at solid.community, to give you an idea:

If we want to improve UI/UX it is helpful to know the experiences people have today, and especially the pains they experience with todays solution. So I hope people want to contribute to the effort by sharing their experiences or suggestions :smile_cat:

I’ve created an issue at Github where we invite people to add their experiences/suggestions, but I’ll keep an eye out on this thread as well, so add it where you find it most convenient for you.

6 Likes

Appearance button choices similar to Finder on a Mac. Where it can show items as icons, in a list, in columns or with a cover flow. As an alternative to dragging and dropping the file or folder into the browser, a button feature to allow users to open any folder in a new browser window. The dock of applications at the top of the page should be neatly organized and symmetrical in the layout and not indented in appearance and a choice of dark mode would be nice for that and the bar, dark view would be fantastic. Navigation helps when hovering over an item. Choice of appearance for buttons, menus, and windows like blue, graphite, purple, or whatever. The Solid Logo should be added to the top left corner.

It would also be a great to include a feature like React Hooks to arrange the order of the folders by dragging and dropping them in a different arrangement, or arrange by date created, alphabetically and as is. https://codesandbox.io/s/3x04qwj6vm

2 Likes

:clap: :clap: :clap: I find this part of the Solid UX really painful :laughing:. I’d be willing to do a call so that you can see me use it and we can discuss what might be good to change and how. I’d love to contribute to this.

There’s little things I’d change like:

  • Permanently displaying the icons instead of showing/hiding on hover (just saw you created an issue on this)
  • Getting a proper icon set with a coherent design
  • Displaying text next to icons to convey meaning (instead of using tooltips)
  • Does the whole pane need to be foldable? Do I ever need to do that as a user? When I fold the pane, the control changes position, which means I need to move my pointer to fetch for that control again. Also, what’s the point of having the option to remove the pane with that X? I end up with an empty page.

pane%20folding

There’s many more things, some of which I’m not sure how to articulate because I find the design so confusing that I’m not even sure what the intent was or how I’m supposed to use it. That’s why I think that having a call might be better. Let me know if you’d like to arrange that.

4 Likes

I’ll send you a PM and see what we can set up :smile_cat:

1 Like