Community Tab UI Improvements

[kevincoleman]

A glance at the Community tab (with chat and games) shows some easy opportunities for stylistic improvements. With a few small changes to background colors and padding we can give the content a little breathing room and separation so it’s easier on the eyes.

It’s easy to think that we need to preserve a lot of space for the chats themselves—as they’re arguably one of the most important elements on the screen—but this is one of those cases where less is more. A little less space for the chats means they get a little white space around them, which increases the user’s ability to parse the page more easily. It also means the sidebar content gets cut off less often.

In fact, typographically speaking we really shouldn’t be making people read super wide lines anyway, so particularly on wider screens we are doing users a favor. A good target is 45–90 characters, including spaces source or a couple alphabets wide. On a 1920ish screen we get a full 7 alphabets of width in the message box, which is certainly excessive. Even on a pretty small desktop screen (1024px) we get 3 alphabets, so we’re on the wide side for our font size. People expect considerably shorter lines on mobile, so no issue there.

Another possible solution might be to increase the font size, but the low-hanging fruit seemed to be to reclaim some of the real-estate for sidebars.

Here’s the current screen’s layout:

And here it is after some basic padding and color shifting:

Obviously we’d need to modify light mode a bit too, but see how it’s a little friendlier on the eye?

If this doesn’t get pushback I think it’s a pretty easy PR (which again I’m glad to make.)

[anoek]

That might be pretty welcome. It might be worth posting this discussion to #English to get some feedback too.

For my own part, I'd request that we make those side bars flexible in width so that for those of us who don't use maximized windows, or have small screens, the space isn't dominated by the side bars. This is my standard format as I have it on a secondary monitor:

So for myself, I wouldn't want to have wide side bars when it's in my small window, at the same time it is definitely too wide on my main screen if I full screen it so making that page stretchy and a bit smarter would likely be a good thing.

[kevincoleman]

Always down for some feedback, knowing that some will need to be taken with a grain of salt.

I can see the case for a better experience on much smaller screens. This could pretty easily be handled with some media queries, making them adjustable as you suggest, and as a next step maybe even a simple toggle to minimize the sidebars to the left and right.

Here’s the same mockup with an uncommonly narrow screen. I can see it starts to get a bit cramped, but by keeping the users list a little narrower it’s not so bad. This definitely starts to feel like an issue of fine-tuning those widths for different screen sizes, which is a good optimization to consider even without the visual style changes.

Now, of course, there are going to be cases where either a group or a user has a really long name (the wallawallaGOclub one is a good example). I don’t think it’s awful to let the UI subtly punish that, as these users/group-owners kind of know what they’re doing when they choose a long name. This is more about optimizing for the majority of cases and improving the readability for all.

I’ll solicit a bit of feedback and see what we hear.

[kevincoleman]

No immediate push back in #English. In fact, the only feedback was very much what you were suggesting above—so I think this may have legs. Could be worth a PR and some iteration. I’ll try to find some time for this.