Chat redesign accessibility mockup

Did my first stream on the site yesterday and stream was good enough but for me the chat is very busy as a streamer so I took the liberty to do a lil redesign mock up. I have ADHD and am dyslexic so my designs are with these in mind.

  • Avatars: So in my design avatars have been made bigger and moved to the beginning of the message, realistically there should be a option to toggle this off and on, but in the current version it’s just to small so redundant and just adds busyness.

  • System Messages: Added a thicker boarder to make it pop for the streamer eyes so they can address donations etc. Should add options to hide and show certain system messages.

  • Admin Icons: So one of the main things that made it hard for me to read chat was all the icons so in this design there’s a 3 dot menu icon which when clicked, expands showing the options, this just makes it neater for admins and streamers to view messages. If they need to be visible at all times there is another design I have in mind but I have not included it on this.

  • Time stamp: I think the timestamp is already toggleable which is good, and I just moved it out of the way as its not always needed. If it is hidden then the admin menu moves up as in the example

  • Emotes: I suggest copying discord with making emotes big if they are the only thing in the message, this makes them easier to see which is nice.

  • Font: Last thing is font, I struggled to read the default font so having a option to change the font would be a godsend, in my example I am using open dyslexic. Names and system messages are also emboldened to help them stand out a bit more.

There is a lot more that I could add but I did not want to mess with the design too much. Let me know what you think and any feedback and if it’s all good, please devs implement this so I can read chat :joy:

I quite like a lot of this but I think it may be better to have the username along the top line of the chat bubble still with the enlarged user avatar just under it then have the message work from there. Otherwise the longer usernames may end up creating a lot of wasted space.

1 Like

Yeah I agree :yum: I had thought of that but I wasn’t sure if it would be as readable so I left it inline but that could have just been Berri’s avatar with the blue text :yum:

1 Like

Just a heads up, I’ve done some work in regards to this and I’ll try to get a screenshot of the changes I’ve made locally. I don’t have time now to do more work with it but if anyone wants to pick up this task or can suggest even more design changes, by all means hit me up.

2 Likes

You, Sir, are a legend <3

you can actually hide all the mod icons right now if you wanted from the gear menu at the bottom. I think it’s important for mods who need them to have quick 1-click access to them

i think having “open dyslexic” as a font option to use site-wide would be great for those who need or prefer it. I’ve heard it’s helpful even for those who are not dyslexic, just to read the chat faster

2 Likes

Yeah I agree. I’m not dyslexic but my eyes are not great at times so it helps alot to have a more legible chat.

1 Like

Here’s some of the in-progess local changes I’ve made, I’ve updated my code branch to the latest as of Sept. 25, 2022 if anyone wants to pick up where I left off before I can get back to it, you can find my fork of the Glimesh repo here: GitHub - MemoryLeakDeath/glimesh.tv at feature/chat-text-size-and-visual-improvements (branch: feature/chat-text-size-and-visual-improvements)

Here’s some of the changes that were in-progress:

  • Wrangle Zalgo text so it does not break out of the chat bubbles
  • Viewer can specify the size of the text from size 8 to 48
  • Viewer can specify the font: Roboto (default) or Open Dyslexic
  • Chat entry automatically expands to 3 rows as you type instead of just scrolling to the left when you hit the end of the input field
  • Moved moderator buttons to their own line at the top of the bubbles
  • Added ability for users to show their pronouns in the chat if they desire
  • Changed the font color of the usernames to make it a little easier to see them
  • Added icons before the users to denote what type of user they are: Streamer, Subscriber, Admin, GCT.
  • Allow chat bubbles to expand to 95% of the chat area if needed rather then having a hard limit of ~500 pixels.

Here’s some in-progress screenshots:

3 Likes

pronouns feel like they should be to the right of the username (maybe that’s just me)

Yeah that be good and it would break up the time from the user name

Looks good, my main two critiques would be either the avatar should be bigger or not there as its too small as it is.

The other is the admin icons, they draw my eye away from the text still so I personally would recommend moving them to the side like this( that’s if they always have to be visible ), main issue with that thought is longer messages would stretch them but you could but a button box around it so admins could click anywhere in that region to do the action.
untitled

All good feedback! The moderator buttons and time are toggleable, I just have them on in the screenshots to figure out how much space I have to work with.

I agree the pronouns should be after the name, I’m also thinking of adding an optional pronunciation key somewhere.

I like the idea of having the user’s avatar be on the left and take up a larger area as it lets the viewers show their personality more.

1 Like

I feel like people already complain that the chat bubbles take up too much space. that would only make it worse

1 Like

An avatar helps me see a message from a unique person so if it was bigger I think it would add value, and for people who think it takes much space, their could easily be a toggle to hide avatars

Would it be possible to have more compact versions of the pronouns for the chat bubbles where they are abbreviated to save space? And if it is, maybe include a tooltip when hovering to see the full pronouns in case of the rarer ones and just overall clarity. That might make it look less out of place regardless of if it’s before or after. Considering how long usernames can be, having a full one after it may not look great in some cases.

I think mod tools would be better off hidden behind a single icon that expands the list out when hovering. Either way I don’t think having them vertically listed will fit every chat bubble and should remain horizontal.

As for the avatars, I think being able to make them bigger is what matters. Sure it would be handy if it was bigger to begin with so it’s more recognizable at a glance but I agree with Cykotiq’s point about it possibly taking up too much space. My suggestion is yet another hover function where the avatar is the normal size and on the left margin of the chat bubble text and it expands when hovering over that margin.

1 Like

Yeah I prefer them in a menu of their own myself too xP