Beautify status icon in user list

[janrudolph]

The status icon in the user list indicates if a user is online. In the current version the icon is placed on the left of the profile picture. In my opinion this breaks the clear line on the left side of the design.

Current version:

I suggest an alternative design:

CSS Code (not cross-browser or cross-device tested!):

.sidebar-item__user-status {
    margin-left: 29px;
    z-index: 1;
    margin-top: 8px;
}

What do you guys think of this design approach?

[TwizzyDizzy]

Hi @janrudolph

I agree with your general reasoning, yet the clear, visual line on the left part of the left sidebar is currently already broken by the hash icon (for public channels) and the lock icon (for private groups). See the screenshot below.

Yet I very much agree with you, that the current state with stuff left from this imaginary line is kind of disturbing. I'm wondering: what does one really use the hash and the lock icon for. Probably to visually indicate what kind of channel this is. But for that, I think, you already have the separation into Channels and Private Groups and Direct Messages - so I think there's actually no need for these icons.

Would you agree?

EDIT: hrm... when clicking into the search bar, you lose this separation into these 3 categories... so there it makes sense... damn. Any thoughts on this?

Cheers
Thomas

[Gummikavalier]

@TwizzyDizzy Those icons are needed if you set merge channels in options. Personally I'd lose avatars in channels unless they get some extra features in the future.

What @janrudolph suggests might cause visibility issues with avatars with much green, yellow or red hues, so the dot would need additional contouring.

[janrudolph]

@Gummikavalier If you add

border: 1px @rc-color-primary solid;

it looks like this

What do you think?

[Gummikavalier]

@janrudolph Looks good to me. :)

[RichardFoxworthy]

Current design for presence colour indicator looks especially silly with LiveChat

@janrudolph soloution with coloured dot in corner of avatar will be a big improvement I think

[engelgabriel]

We also have been struggling with this, and here are some points to consider:

• Channels and Groups will get the option to have real pictures avatars.
• We think that most people will prefer to merge all rooms into a single list order by activity, so the room type icons are important.
• Displaying avatar on the list will be optional
• Design need to cater for the compat and the detailed version of the list

I am open to suggestions, and I also like the proposed change, but I think we'd have to add the @ back in that case.

[janrudolph]

@engelgabriel Thanks for your reply. Just one question: Why do we need the @ in the list? In the current implementation users are indicated by their profile picture or initials. Do you plan to replace these options with the @ or add the @ as third alternative?

I just thought, why not add "badges" at each channel/profile picture to indicate the channel type? My rough prototype looks like this:

For sure, we should beautify this ;-) Such an implementation will keep the left sidebar compact even in the extended version. I think the challenge will be to have a clear design in the sidebar, especially when an user is member of many channels.

By the way, in a compact version the status icon will look like this:

However, I think if the compact version uses pictures instead of the icons, an additional badge will be too much....

What do all the UX guys think about this topic? ;-)

[engelgabriel]

[engelgabriel]

#9608