Page links from Chat list (groups & tournaments)

Hi all! I’ve felt for a while that there should be an easy way to get from the chat page to a channel’s respective group/tournament page. Yesterday, I submitted this PR for review which made it so you could click the little icons next to a channels name to take you it’s page.

image

However, @anoek had a few concerns with this proposal…

I’m on board with providing a link, but making the icon an actionable thing is too hidden I think, and might very well cause some confusion if someone is expecting to join the channel but clicks the icon.

The two ideas I have for this are

(1) we could make a link button that appears when the mouse is over, much like the leave button.
(2) get rid of both the link and the leave button because they aren’t very mobile friendly and are kind of a weird pattern to begin with and instead add a header space above the chat window itself that has actions like leave, and visit group/tournament. That would give us some room for adding channel title topic kind of stuff too.

I have replied based on my own personal experience (see below), but I would love some feedback from the community here regarding where on the Chat screen would be the best place to implent a “go to page” button for groups and tournaments.


Below is my reply to anoek’s feedback:

making the icon an actionable thing is too hidden I think

I can see that… From memory, the main problem was UI real estate so I wanted to maximise the effect of what we already had. I did add an on-hover text to the icon though, so for the people whose mice do tend to wander over to the far edge of the screen, it is likely they’d see the hover text and think “what’s that for” which would hopefully minimise both not knowing it exists and accidentally pressing it.

(1) we could make a link button that appears when the mouse is over, much like the leave button.

Possible, but that might exacerbate the potential problem of clicking it by accident since a dedicated button would almost certainly be bigger than those tiny existing icons we have on the side.

(2) get rid of both the link and the leave button because they aren’t very mobile friendly and are kind of a weird pattern to begin with and instead add a header space above the chat window itself that has actions like leave, and visit group/tournament. That would give us some room for adding channel title topic kind of stuff too.

I can only speak from my own personal experience on this, I use chat on my Samsung S7 pretty much every day. The leave buttons are easy to press when I need to, and I don’t believe I’ve ever accidentally pressed it (though even if I did a second tap easily resolves that). On the phone the icons sit flush against the edge of the screen, personally I’d have to go out of my way to touch such a place so I don’t think I’d be accidentally pressing it. Still, I think it should be possible to use on the phone.

Regarding your header idea though:
Firstly, moving all of the “leave” buttons into a channel-specific header would mean that you would have to enter each channel before leaving it. Currently, you can quickly and easily drop any channels you want without leaving the one you’re interested in. A bonus if you have a slow connection.
Secondly, with the limited screen real estate on a phone, the space required for a header which contains two buttons and a bulletin text would take away precious space needed by the already restricted chat window. I have a very small font size as default on my phone that would be unusable for most, and even I only have 27 lines that are only about 7-8 words each, so I would be against putting anything in place that further reduced that.

Since my own experience alone is hardly grounds to impose a feature on the whole community, I’m thinking now (if not earlier) is the right time to make a forum thread to discuss the feature in general and also possible solutions.

3 Likes

I do agree that it would be hard to discover that the icon is a link.

I wonder whether the thing that pops up when you mouse over could be a dropdown, with leave and “group” as options?

1 Like

For extra context, here are the mobile views of the chat page

Hmm possible… How does on hover work on mobile though? Press and hold?

The problem with on-hover drop down menus is they either get in the way or don’t open fast enough… either way they tend to be a bit annoying…

1 Like

What if we did something like this? (Stole the button from top right of the screen next to profile pic) I imagine I could just borrow the code we currently use for the drop down menu when you click a name?

What do you think of this style @anoek ?

edit: hmm… I forgot that’s where the unread count live also… it’s a small icon, should be able to fit both right? I’m thinking maybe something like Group Name (x):arrow_down: ?
Or maybe we combine the two ideas? Replace the existing “Leave” button with a dropdown button, but it only shows on hover (as the leave button currently does) - all should be possible.


Option2showonhover

It doesn’t really, you have to click the group, and then that line is considered hovered so the leave button is there.

I’m ok with the drop down idea. Overall I’m not wild about the current usability on mobile, it sucks. I would love to move in the direction of being more mobile friendly overall, however the drop down doesn’t make things any worse than they already are so sure.

If you had any ideas in particular, I’d be happy to take a stab at it :slight_smile:

Did you have a preference over which of the two above depicted styles I implement?
If I do put the icon on all of them (top picture) it’ll obviously be much less gaudy than my hack demo above lol

If you’ve ever used discord on mobile, they have a rather good chat interface on mobile I think - looking to them for ideas is probably a pretty good start

1 Like

Probably on hover, it looks really crowded with them on every line I think

1 Like

I’ve used it before but not for a while, I’ll check them out and see if anything stands out to me :slight_smile:

Ok cool I’ll have a crack at getting all those different elements to play nice together :slight_smile:

out of curiosity @anoek is there a list somewhere of all the fa-fa icons? I’ve only been able to find a reference to a small number of them in src/global_styl/font-awesome-hacks.styl
so, where are the rest of them? :stuck_out_tongue:

maybe @Eugene or @flovo know? :slight_smile:

https://fontawesome.bootstrapcheatsheets.com/

(Note that we are on the “old 4.7 set” not the new 5.x)

1 Like

Legend!

This feature is now live :heart:

3 Likes