SolidOS User experience improvements

[bourgeoa]

Following solidOS auth-upgrade @timbl prosed we have some discussion on user experience and presentation
https://gitter.im/solid/solidos?at=61728092d78911028af251d5

[bourgeoa]

As a first point I think we should make all panes mobile first.
This has been done for profile-pane, a multi columns

The next one could be the dashboard, which has a multi items header.

[timea-solid]

About user experience: one meaning this has for me is about the flow in the application that a user has.
For example:

• where does the user start, who is the user (developer, entrepreneur, pod user)? see discussion over at: User experience upon registration/login #54
• Another example is how intuitive the UI is. Do we need tool tips? Documentation?
• the whole new readme is part of it and so is the way we communicate about SolidOS. (solidOs pod, links to documentation and so)

Related to presentation maybe more UI:

• I'd like to streamline the UI meaning all button have same color, all messages types are the same color.
• undergo structural changes - divs instead of tables and responsive design to name some examples.

[bourgeoa]

You are right I propose to have 3 or 2 discussions to clarify if you agree.

• code cleaning (not sure)
• user experience
• representation

[SharonStrats]

I think it would be a good idea as well to have separate discussions as in each one there is much to talk about and when we do this it would be really great if we could add the steps in each area we want to take and prioritise them in our project board. As an example a lot of the UI work of making buttons similar color has been done, but there are still areas we are missing it would be good to document those so we know where to go to change them. I agree with all the points of flow, UI, and divs unless it is really a table. I think the latest philosophy is that tables are still good for being used as tables. As we go through each area (maybe we could do this by pane), we can check on the work involved to make them mobile first. I think the styles of the buttons etc would be more important to tackle first if it's too hard to do both at the same time.

[timea-solid]

Before we split the discussion, I want to make a record of topics collected from previous work or mention the topic as a whole:

• suggestion about using of material-ui https://github.com/solid/solid-ui/issues/148
• virtual DOM considerations: https://github.com/solid/solid-ui/issues/240
• for icons we use: https://thenounproject.com/
• a want to have a 'dark-mode' for solidOS
  Some non-functional requirements:
• make sure the UI is slim (bandwidth) to keep the server resources low -> also optimize images, don't use bloatware UI frameworks.
• add a 'user mode' in addition to power user and developer.
  Previous documentation from TMB:
• https://htmlpreview.github.io/?https://github.com/solid/solid-panes/blob/main/Documentation/VisualLanguage.html

[timea-solid]

Work is recorded on 2 boards:

• UX: https://github.com/orgs/SolidOS/projects/1/views/14
• UI: https://github.com/orgs/SolidOS/projects/1/views/15