Chat UI improvments

[kobakitty]

@kevincoleman there has been quite few comments and improvement suggestions about the new chat UI, im collecting those comments here under one post if you're interested on developing it further

Most comments i've seen have been about the side panels feeling too wide and there being way too much wasted space, espesially on the right side of screen with the username list.
People have requested that the width of those panels could be adjusted with "click&drag" type of thing.
Also some kind kind of "collapse/expand" buttons for the side panels (like what twitch has) was asked by someone.

Many people like the the alternative background colour of panels for channels and users lists, but the colour should be darked on dark/accessible themes. Not as black as the chat background colour, but darker than pm window background.
There was also some wish to have the alternative background colour for the light theme too.

The current spacing between the usernames on the list is liked by many, but for groups which have hundreds of users (see https://online-go.com/chat/group-25/go-basics ), and for users who are members of hundreds of groups/tournaments there is now lot more scrolling required.
One idea was to reduce the spacing between channels/users on the lists whenever the list is long enough to have a scrollbar, but keep the current spacing when the entire list fits on users screen.

Also the gap between timestamps and the actual chatlines looks really nice, now it doesnt look as crammed as it did before for users who have mod/ss icons in front of their name.

The "day separator" thingy is easy to miss when its on the left side of the chat at the same place as timestamps, people have asked if it could be centered like it used to be.

Hiding the scrollbars when the user isnt scrolling anything, espesially the scrollbar on channels list is too "center of the screen" and feels like out-of-place. Tho i think this might be more depending on what browser you're using, i think chrome will always show scrollbars if they exists?

"More channels" could be written in bolded text so the button pops out more.

When using the search box under "more channels" the list starts jumping up and down when user starts writing. Seems to be issue only for those users who are in so many group/tournament channels that they need to scroll down to see the "more channels" button.

Some people have also said that they really preferred the old look, and have wished if that could be brought back as it was. Maybe there could be some switch in the settings for choosing between new/old chat UI?

[kevincoleman]

Hi @kobakitty,

Please forward along people’s comments to me as well, if you want me to address them. One or two people expressing opinions can quickly become “everyone thinks this” or “everyone thinks that”. I prefer to work with objective feedback when possible. This iteration is just a step in the right direction, so by no means am I saying it’s perfect. I do appreciate the feedback, though, so please know I’m not upset about this!

Most comments i've seen have been about the side panels feeling too wide and there being way too much wasted space, espesially on the right side of screen with the username list.

The only screen sizes I see that suffer from excessive space to the right of the usernames in the right panel are large sizes in which the chat panel itself is unoptimally wide for the sentences it contains. The exception to this, of course, is when people scale the interface using cmd/ctrl +/-, in which case the usernames scale too and that becomes moot. For a reference regarding how wide the chat panel should be for optimal readability, here’s a link to the subject in the book I use when teaching collegiate level typography (Line Length - Butterick’s Practical Typography). This book errs on the side of wide lines, as it was written by a lawyer who doesn’t mind smaller text sizes. I usually recommend keeping line lengths shorter than he recommends (2–3 alphabets’ worth), but in the case of the chat UI we are often near double his recommendation. Suffice it to say that we have plenty of space for the chats themselves.

One upside to the wider bar, of course, is that wider usernames actually get to be seen when they occur. Granted, this is more the exception than the rule, but it is actually a nice accommodation for those with longer usernames, and arguably not an inconvenience for those with shorter names (see the above line length reasoning)

I do think we’re probably looking at a case where people have gotten used to a certain way, and thereby perceive the new way as excessive. I’d posit that it’s just a shifting of expectations we’re seeing—not an actual excessive amount of space.*

People have requested that the width of those panels could be adjusted with "click&drag" type of thing.
Also some kind kind of "collapse/expand" buttons for the side panels (like what twitch has) was asked by someone.

Again, I’d like to know how unanimous this response was. “people” means 2 or more, which I’ve seen with you and @anoek. I don’t disagree with this idea, but it’s considerably more involved to implement because of several code and layout-specific reasons. PRs are welcome if you’d like to see it move faster. Also, I responded to this sentiment already here.

Many people like the the alternative background colour of panels for channels and users lists, but the colour should be darked on dark/accessible themes. Not as black as the chat background colour, but darker than pm window background. There was also some wish to have the alternative background colour for the light theme too.

Glad to hear people like it, generally! For both the light and dark themes I’ve used a color that’s already defined by our global site styles, in an effort to make light changes and follow established standards. In other words, I didn’t make this up arbitrarily. The exception to this is that I had to re-instate the off-white color in our global styling because it had been replaced with completely-white. This was noted in the PR, and it didn’t seem to get pushback at the time of merging. If it does cause issues I’m happy to discuss and revise. For the dark theme I could personally see the case for going a bit darker, but keep in mind that this level of lightness/darkness is actually very dependent on the screen displaying the site. Some people will have their screens jacked to the brightest settings with gamma cranked, and others will be chatting on old phones with dimmed night mode and color shift enabled. Making sure that the colors are substantially different errs in favor of supporting a wider list of devices and screens. Actually the thing I’m most concerned about here is the level of contrast for accessibility reasons, particularly between the blue links and the dark grey background. Darkening the background may help in cases where users have a harder time reading the linked text. Then again, so would brightening the blue or changing links out to white—or even underlining them. There’s no single perfect solution here. Again, we’re iterating in small steps for a reason.

The current spacing between the usernames on the list is liked by many, but for groups which have hundreds of users (see https://online-go.com/chat/group-25/go-basics ), and for users who are members of hundreds of groups/tournaments there is now lot more scrolling required. One idea was to reduce the spacing between channels/users on the lists whenever the list is long enough to have a scrollbar, but keep the current spacing when the entire list fits on users screen.

The spacing between usernames in the list has not changed in this revision, so I’m going to have to disagree that there’s a lot more scrolling requried. But everything is always open for discussion. In my opinion as a UI designer the current spacing is actually pretty optimal. As a typographer and type designer I’d say it’s a bit on the tight side (usually reading line heights should hover between 1.5 and 1.8 ems), but as a web dev I understand that we want to push this toward being efficient at displaying long lists. I think this has already been pushed to its reasonable limits. If this is really causing people issues it may be cause for a forum thread to gather data about it. I suspect we’d actually get far more use out of some quick-search functionality in the user list instead of line-spacing adjustments. When the list gets really long it’s very impractical to look down a list of 50+ users to find the name you need, regardless of the line spacing. Changing styling based on if there’s a scrollbar is maybe technically feasible, but it’s pretty non-standard and can actually lead to dynamic layout loops (the list size adjusts, making the scrollbar disappear, which makes the list size adjust back, ad nauseam). Changing display based on screen height might be more practical, but I think it’s likely still not the most elegant solution from a user experience standpoint. The problem is likely not the length of the list, but the ability of users to find things in it. We can ease that problem in better ways than to tighten line spacing (which may actually make it harder anyway).

Also the gap between timestamps and the actual chatlines looks really nice, now it doesnt look as crammed as it did before for users who have mod/ss icons in front of their name.

Huzzah! A tiny win, but details matter, and celebration should ensue. ᕕ(ᐛ)ᕗ

The "day separator" thingy is easy to miss when its on the left side of the chat at the same place as timestamps, people have asked if it could be centered like it used to be.

I was not really sure if this would be better or not. My intent was to semantically group the day stamps with the time stamps and keep text more findable. I was actually most worried about how it would present/perform for cases where the site is being consumed in a right-to-left reading language. From a purely-design standpoint I aimed to anchor it to the side so as to not have centered text floating in the middle of a cluttered window. By and large having no vertical rule to the side of text makes it harder to find and process. I actually think the best solution here would be to add a light horizontal rule across the chat window, whether the date indicator ends up left, center, or right. Take for example how Slack does it. It’s centered, but not without some visual motifs to help users understand what’s there. Happy to iterate on this going forward too.

Hiding the scrollbars when the user isnt scrolling anything, espesially the scrollbar on channels list is too "center of the screen" and feels like out-of-place. Tho i think this might be more depending on what browser you're using, i think chrome will always show scrollbars if they exists?

The scrollbars are indeed primarily styled by browsers, and I’m not sure if we do any intentional styling of them on OGS. I expect trying to override people’s browser styles of them may end poorly. We’d get to play whack-a-mole with every browser, and accessibility would suffer across the board. I agree that some browsers implement better than others, but I think if we wanted to address it we should do so site-wide and make a whole new discussion/request out of it. I’m not sure just what “too center of the screen” means, and I’m not sure what any given version of Chrome does by default.

"More channels" could be written in bolded text so the button pops out more.

An interesting suggestion! Bolding text is normally intended to emphasize words within the context of a paragraph where the surrounding words are of consistent (lesser) weight. Bold fonts are actually less readable, objectively, because the letters’ negative space, counters, &c. get compromised—reducing individual legibility. They do tend to get used for headings, so I can see how that would be a natural solution. That said, perhaps there are other ways to make this stand out more? I personally found a box and an arrow with more generous spacing did the trick pretty well, but I’m certainly open to trying some things! Maybe something to try in a next iteration.

When using the search box under "more channels" the list starts jumping up and down when user starts writing. Seems to be issue only for those users who are in so many group/tournament channels that they need to scroll down to see the "more channels" button.

Interesting! I haven’t seen this issue at all as I’m only in a couple groups. I also tried to get it to act up by resizing the window to some odd sizes and trying some searches. It seemed to be ok to me. Could you find a case where this happens and screen record it? I’d be happy to at least help file the bug here if not fix it once confirmed. Thanks for bringing it up.

Some people have also said that they really preferred the old look, and have wished if that could be brought back as it was. Maybe there could be some switch in the settings for choosing between new/old chat UI?

Thank you for the feedback.* As I mentioned before, I could see the case for an “old skool” or “IRC” mode, but I think if we did that we should consider making it a site-wide style.

Also, I came back to edit this to remember to say thank you! I know your thoughts on this are a donation of your time, and I appreciate it. Let’s consider making new issues over things that we both see as improvements going forward. Happy to keep these in front of mind.

* This is inevitable with pretty much any changes that occur to interfaces that are heavily used. People get used to what they use, and because we’re creatures of habit the tendency is to resist change. That doesn’t mean it’s without merit—only that designers only ever get a mix of substantiated and... eh... reactionary(?) feedback.

[kobakitty]

Ah yeah, im quite active in chat so i fowarded some of the features and requests i have seen in chat and privatly to you, i hope they can be addressed. There has been a lot of comments about it since the update.

Indeed, many users have the browser zoom set up to something different than the default 100%, i personally use 67% zoom so i can fit 7 game thumbnails per a row in home page, and to have more text visible on chat. But ive seen even the people who do not use the browsers zoom feature have been calling the panels too wide, and many have suggested if those could be adjusted according to their own preference. This is how it currently looks for me:

I feel like there is a lot of wasted room on those panels, the entire right side of name panels is just empty and the channels panel have its scrollbar too much in the center in my opinion. It would be perfect to make those just little bit thinner so there would be more room for the actual chat, which is the main part of the page afterall ^^

The background colour being same on panels and pm's isnt great. Espesially for people like me who have bit impaired colourvision, when you just have a stack of boxes with the same colour placed on top of eachothers, it starts getting really messy and i find it bit difficult to see what belongs to where since it just all melts together. At least with the accessability theme there should be a clear difference on the background colour.

Tho ive also seen people who use the normal themes to comment the same thing, so maybe its not just me.

I think the "channel list jumping up and down" meant this thing

telegram-cloud-document-4-5859205715326930651.mp4

The other suggestions i mentioned have come from various users so i cant really comment on those, i just fowarded them here for you

[kevincoleman]

@kobakitty I see what you mean about the private chat windows matching the sidebar colors. It doesn‘t look awesome. I think it may work well in dark mode to go darker for those windows, for two reasons: 1. it contrasts the backgrounds better; 2. it creates more readability in the private chat windows (higher contrast between type and background colors.) Here’s a mockup of going darker on the window.

This way actually feels fairly natural to me in dark mode anyway, because a darker background feels more like it’s a “more private” instance/area. Of course following the system would be the opposite in light mode, but then light mode uses pure-white and off white, so we couldn’t go brighter than it. Definitely room for some fine-tuning here.

Edit: Ooh. One more idea is to go darker with the sidebars and keep the PM window the same (though I think its header could benefit from more contrast). See this mockup:

I might just make another update to this styling pass to bump the chat windows darker. Full black might be a bit much, but I’ll put a little thought into what colors we use systemically when revising.

For the sidebar space, I could see the case for making it about 20% narrower in the widest applications, but also it’s not top of my list for a few reasons:

1. When someone has this humongous of a screen I have a hard time lending credibility to the idea that the space is “wasted”. Their layout is the exception, not the rule, and they don’t tend to want for space. I would love nothing more than to be able to share screen size statistics here, but the community is very against gathering data (even fully anonymized) via analytics tools. Take a look at the amount of space in your screenshot in the main chat panel that isn’t filled with text. It’s like, what, 60-70% empty space. When lines of text make it all the way across it’s neither the normal case nor a good reading experience. Lines really shouldn’t be that long. If you are of the mindset that any space not filled with information is “wasted” you’re mistaken. negative space actually helps our brains make sense of data in an important way. If anything, the best solution here would be to increase text size for people with larger screens so they get more accessible and readable text, but that’s a whole design-system-level change I haven’t put much time into it just yet. Keep in mind many people aren’t on wide screens, and see something a little closer to ideal, like this:
   

2. If we implement resizable sidebars this immediately becomes less important. It’d be like doing touch up paint on your trim before a remodel.

Please know I’m not against people with large screens. I have one myself. That said, I usually split screen windows because there’s almost no reason not to have two windows across an ultrawide span, functionally speaking.

Re: the list jumping: thanks for the video! I see what’s happening now. The list below the search is resizing down to a short amount, meaning there’s not enough content in that pane to make it scrollable (or as scrollable). We could try making the container for the channels list be a fixed size regardless of how many results are displayed when searching, which would keep the jumping from happening. The bummer to that would be that it would have a considerable amount of scrollable space just to display... no content. That would be especially bad on mobile. Even still, that might be the better option here. I always hesitate do do something that breaks intended functionality of something like scrolling, so I’m honestly a little bit at a loss for the right solution here. I welcome ideas.

[kobakitty]

Hi @kevincoleman !

Any updates about those improvments?