Can't navigate long topics

[nadonomy]

I'm in a room with a long topic, and I can't read it all. Specifically, I'm trying to click on a link which is clipped out of bounds, and it's not clickable when viewing room settings making it even more frustrating.

Should we implement a mechanic that reveals more of the room topic? Either by making it reveal more on hover, or scrollable, or with a 'Show more/Show less' interaction. Simple first option:

• Click topic -> modal
• Room avatar & room name as modal title
• Topic as modal body
• X button/ESC to close

[lampholder]

I'd never considered the link-clicking case. It's not uncommon for links to get stuffed into the room topic, so it would be nice to improve this.

[jryans]

I do wish there was some minimal Markdown support in the topic, or at least some way to express [text](url) so you can compactly show a link without resorting to URL shorteners.

[hwine]

I do wish there was some minimal Markdown support in the topic,

@jryans you might want to upvote #5180 as well.

[aaronraimist]

Related/dup: #1836

[anoadragon453]

I do like the way Discord tackle this. Very simply, you can click on the topic in order to reveal the full thing.

2021-05-06.10-45-17.mp4

You'll need to think about what happens when a user tries to click a link in the unexpanded topic, but that's the only UX complication I can see.

[SimonBrandner]

With a simple tweak, e.g. clicking to reveal in a low touch dedicated modal with:

• Room avatar & room name as modal title
• Topic as modal body
• X button to close

From #17367

[ShadowJonathan]

From #17916:

Or maybe in the sidebar. For that matter, maybe it's interesting to place the topic somewhere under "about" in this section anyways;

Clicking anywhere in the whole room header (except avatar) would then open the sidebar to the room info, similarly to how clicking on the name does currently.

[t3chguy]

#15244 (comment) has a nice poc

[niquewoodhouse]

#15244 (comment) has a nice poc

I think that's cool. If we take that approach, just adding some small changes, aiming to push down the content of the right panel by adding much more UI.

web-ele-room-topic-01.mp4

But I think the previously mentioned discord idea (or some variant of it) is more helpful for users because, if you're interested in the room description, you'd be more likely to try to take action from the more visible location (eg the room header).

Eg this is Slack: hover > shows full topic. if admin > click > opens edit

slack-room-topic-web-01.mp4

[ShadowJonathan]

@niquewoodhouse that mockup has a visual bug, where it fades the topic text on top of the elements below the topic itself when expanding or closing it, i'd either recommend putting it in a bounding box, or just making the transition without an animation.

[williamkray]

would love to see this feature, and agree the 1 modal mockup looks great.

[niquewoodhouse]

@nadonomy @kittykat I was looking for some smallish existing web issues that are to do with IA and this seems a good fit. It's all about being able to find the content you want (eg read the whole topic). If you agree its part of it, we could look to fix shortly?

[williamkray]

not to throw yet another solution into the mix, but what about just making the full topic expand on hover? users can still use the modals to view/edit by clicking on it, but it might be more indicative that you can click on the topic if it were to do something on hover. seems like expanding would be a nice indicator that "this does a thing" and people could opt not to click on it if they just wanted to read it.

[anoadragon453]

The full topic is already displayed in a tool tip when hovering over the topic?

[ShadowJonathan]

The full topic is already displayed in a tool tip when hovering over the topic?

I've often found this to be disorienting, as f.e. linux has a radically different tool-tip design on hover than element's overall design, differing in font, font size, colour, etc.

but what about just making the full topic expand on hover?

I'm not sure, this may be unexpected and "unwarranted" behaviour, does any other chat app do this?

[williamkray]

yes, slack does this. examples below:

[niquewoodhouse]

yes, slack does this. examples below:

Nice spot @williamkray. They also have, when you click, the dialog that appears with the topic in it with an edit button. When the topic is short on Slack, the user can click to go the edit dialog. When it's longer (has the ... this custom tooltip appears on hover.

ele-web-read-topic-02.mov

There might be drawbacks to doing custom hover things here, like, if we later alter the header a bit we have to consider how this works with it. It might be strange to have it here but not elsewhere in the product.

ele-web-read-topic-01.mov

I think the interaction from Slack is nicer than clicking to see the topic but I feel overall like this just needs to work for now and it's ok to just go straight to the full length topic for the first version to keep it a simple, consistent solution, using mostly existing things, even if it means a couple of extra clicks.

Figma link for reference.

[germain-gg]

I personally prefer the second approach as it will probably survive future redesign as Nique explained.
@daniellekirkwood are we happy to go ahead with this?

[kittykat]

Second option looks better to me, we should go with that

[daniellekirkwood]

If by "second approach" we mean this one (below) then yes, let's do it!

155513640-fd64cf27-a91f-4771-a880-ceaf96bab2cc.mov