Improving UI/UX/DX in solid-panes and mashlib (aka the Solid data-browser)

[megoth]

@timbl and I are going to start work on improving the user interface, user experience and developer experience of solid-panes. With this issue I want to invite everyone to add their issues on the current design. We ask you to please add it as a comment here or create a new issue.

The hope with the work is to end up with a data browser that is intuitive and easy to use for end-users and flexible and easy to modify for developers.

I've added a new project to the Solid organization as this might span multiple repos (and actually multiple organizations, as mashlib in the linkeddata-organization will also probably be part of this work), and I invite you to follow the progress there. If you want to participate in the project I hope you contact me so that we can coordinate our efforts (you can of course contact Tim as well, but he's quite busy, so he might not respond). (But of course, as always, you can simply skip to submitting a PR if that's how you want to participate.)

[mikeadams1]

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.

[pangolingo]

I just started checking out Solid this week and got very confused. So I have lots of UI/UX feedback. But I'm not very clear about the scope of solid-panes and how it compares to solid-ui and other Github repos. Here are a few things I've noticed. Let me know if you prefer that I create individual issues.

1. icons are unintuitive. See my issue on the solid-ui repo: https://github.com/solid/solid-ui/issues/60
2. fields need validation. I went to edit my profile and add a new address. I used Chrome autocomplete, and it somehow blew away all the fields, leaving me in a weird state.
3. Button hiding (and showing them on hover) is confusing, and also inaccessible. @megoth already has an issue for this: Buttons should not be hidden in certain states; need another pattern to offer better accessibility #53
4. login/sign up buttons appear even though I’m already logged in
5. Profile card form has no save button
6. when I click “Profile” on https://pangolingo.solid.community/ or https://pangolingo.inrupt.net I expect to see editable profile fields. Instead I see a bunch of obtuse metadata with no clear call to action. I have no idea what to do from here

Screenshot demonstrating points 4 and 5

[pangolingo]

Here's another one: I thought I was signed in and could edit my profile. But when I try, I get 401 errors. If I check the console, it tells me "(You do not have your Web Id set. Sign in or sign up to make changes.)"

1. It would be nice if that error appeared somewhere on the page
2. It would also be nice if the fields didn't appear editable until I'm actually able to edit them
3. I have no idea why I successfully logged in without having a Web Id. Maybe this is an issue with solid.community not creating one when I signed up? Super confusing for a Solid novice.

[InruptKelly]

This one is pretty specific, but in trying to add items to a meeting pane, I accidentally dragged in a bunch of random stuff (noun7927.svg) and now I have no idea how to delete it all.

[InruptKelly]

A few other thoughts:

1. Shared pads are very cool and should be a core tool I think. However it is impossible at the moment to seed a shared pad with notes composed elsewhere. When you copy and paste, it all goes into the same line, whereas I'd want it to automatically generate one line in the shared pad per line that I'm pasting in.
2. It's really difficult to add participants to meetings, projects etc. (See the error screenshot below). Seems like you need to already have a list of people that you can paste into a field? I'd like to see a simple search bar of people in your organization I guess.
3. In general, I think the home screen of the databrowser gives you access to all the possible tools/options at once and that can be overwhelming. Would be nice to have a few simpler options at the beginning based on common use cases. Starting a meeting? Click here. Launching a new project? Click here.

[Julian-Cole]

@megoth "easily modify existing panes or create new on their own." that would be good!

I think ultimately the default ui and features needs to reflect the typical user and what that user would be using their pod for. I don't really mind the current ui workflow as a developer tool set, to me it just needs a bit of tidying up to make the learning curve a little more intuitive. I do think though there needs to be much more focus on the ontology tools to make app building easier.

[angelo-v]

I think we need to differ between panes that useful for the average end user and those that are interesting for developers or hardcore users. Average users should only see a specialized HTML view that is appropriate for the data in question. Panes like "XML source", "about" and "under the hood" are more like developer tools that should step far back and have to be opened explicitly like dev tools in a browser.

[angelo-v]

For a WebID there are several panes that are quite similar: "Person", "Friends" and "Your profile". These could be merged, better distinquied or grouped somehow.

[angelo-v]

Handling of ACL and trusted apps is something different than handling the data/document itself. Yet it is "just another pane" in the row of panes. We should distinquish between the actual document/data and metadata/control configurations.

[angelo-v]

A question that also bothers me for a while now is the relation between build in panes and solid apps. The strength of solid is, that users can choose whatever app they like to manage their data. In the long run I would expect, that when I open a specific URL representing a thing, that I get automatically redirected to my favorite app to manage this type of thing. E.g. if I derefernce a WebId, it is openend in my favorite Profile Viewer and not in a weird pane on the person's POD.

[sblakeborough]

Hello,
I'd like to contribute to this project.
I've been a designer for 30 years and started in the web in 1996 after 10 years of being a brand and corporate graphic designer.
I'm currently UX design lead for ADP based in the UK. I lead an international design system initiative.
I've never contributed to an open source project so not sure how to get involved.
Is there someone I can talk to to see if I can add value here?
Kind regards
Steve

https://www.linkedin.com/in/steveblakeborough/

[megoth]

Hey @cblakeley, I'll send you an email 😸

[InruptKelly]

It’s very frustrating to use the shared notepad — which I think of as the native document editor of the databrowser — because you cannot select more than one line at a time.

So when I compose a memo on the notepad but want to share it elsewhere (email, for example) I have to highlight, copy and paste EVERY LINE of the document separately
The inverse problem happens when you try to compose elsewhere (like in an email or word doc) and then paste it into the shared notebook. If I copied a 10-line paragraph into the shared notepad, all 10 lines would stay in one field, making it unreadable

[InruptKelly]

I also think it should be much easier to rearrange files and folders within a Pod.

[JordanShurmer]

Really excited about progress being made on this front! I'd be happy to help out too! Not sure how best to get involved though. I'd be able to contribute in the JS logic, as well as styling.

This work is, I think, crucial to getting people to buy into the Linked Data way of thinking. If the default experience provided when signing up for "solid" is nice, intuitive, etc. then people will be more likely to stay (devs, and non-devs alike).

So, how can I get involve? :)

[megoth]

@JordanShurmer thank you for your interest ^_^ I'll send you a DM.

[melvincarvalho]

I have made a mockup of a hierarchical striped table for enhanced readability. I propose altering the rendering style to create this effect. I can have a look at adding this to the internal pane, if there's no objections.