UX/Design and structure

SolidOS / chat-pane

Solid-compatible chat discussion applet for solid-panes framework

MIT License

10 stars 4 forks source link

UX/Design and structure #10

Open eduardoinnorway opened 5 years ago

eduardoinnorway commented 5 years ago

Improve the UX/Design and structure:

List of participants on the left
Main chat on the right
Navbar with "Chat logo" and Name pluss "Settings" as dropdown
Responsive
Consider removing user colors and find some alternative solution. The issue is readability concerns regarding web accessibility colors.
Remove "date/time" from user name and add it on the right as Gitter have it.
Do a proper user test online to find out if everything is understandable (I could do that for example)

timbl commented 5 years ago

All good points. The user coloring is a preference. The preference control is behind the menu.

timbl commented 5 years ago

@eduardoinnorway Thank you for the mockup! https://sketch.cloud/s/JaDgb/25ZG9Vl

melvincarvalho commented 5 years ago

@eduardoinnorway @timbl fabulous design!

Here was mine with webid.im

webid.im

melvincarvalho commented 5 years ago

I've also collected quite a lot of links for open source messengers. Many designs in here. The much acclaimed Telegram messenger (webogram) is one of a few that stands out imho

https://github.com/melvincarvalho/webid.im/wiki/FLOSS-Messengers

melvincarvalho commented 5 years ago

webogram

melvincarvalho commented 5 years ago

Perhaps a competition for the best solid chat design? Bounty for a pane? :)

eduardoinnorway commented 5 years ago

@melvincarvalho I am still in love with mIRC :) I think a competition of design would be waste of valuable time. The design should be based on the coming UI or we will not get UX/Design consistency on the ecosystem. Better team up if more people want to pitch in, I have no issue working with others, in the contrary.

Mitzi-Laszlo commented 5 years ago

@melvincarvalho There are a group of students who are working on Solid Chat as an assignment and the next Solid World theme is Solid Chat, would you be open to giving a 5 minute presentation on the work so far on Solid Chat?

camslice commented 5 years ago

have people considered adopting a modular CSS system like basscss? i've found this to help tremendously with UI consistency and working collaboratively

emiliocortina commented 5 years ago

@Mitzi-Laszlo We are a team of those students you mention. Here is the UI we built for our first functional prototype.

melvincarvalho commented 5 years ago

@emiliocortina LOVE this UI!

EDIT : which css are you using, look a bit like material design?

emiliocortina commented 5 years ago

@melvincarvalho Thanks! It's just CSS with nested flexbox componenets to make it responsive. Feel free to check it out https://github.com/Arquisoft/dechat_en2b/tree/master/experimental_stuff/ui_templates

timbl commented 1 year ago

I feel that user choice in the UI layout is really important. Note quite a lot of things are in the preferences already, but you have a competition don't pick one, try to build a UI which in fact can be customized to produce any of them at the user's will.

BTW the participant list exists, click on the "group" icon bottom left. Like the "Settings" wrend bottom right. Settings include

Color user input by user
Expand image URLs inline
Newest messages at the top
Inline image height (lines)
Shift-Enter sends message
Author & date of message on left
Show placeholders for deleted messages"

bourgeoa commented 1 year ago

@SharonStrats