discuitnet
UI: Improve comment collapse on desktop + minor UI additions
Adds a collapse & expand icon from mobile to the left of the user header in a comment.
It is my opinion this improves the user experience because
- It removes ambiguity & inconsistency - current the profile icon expands but does not collapse the comment, which causes accidental clicks. Furthermore it's odd that the entire header acts as an expander except the name, which also causes misclicks.
- It behaves more consistently with mobile design of using collapse & expand icons
(Disclaimer: the current way that I am aligning the collapse/expand icon feels a bit hacky)
Additionally this displays the percent upvoted a post is to improve readability (current bar is thin + not colorblind accessible, & it is not immediately clear what it is indicating)
Leaving a community you are the moderator of also uses the discuit confirm modal now instead of browser confirmation dialog.
Apologies if formatting got a little botched on any of the files, I did my best to correct it
You're right about the ambiguities, but putting the "(-)" icon to the left of the profile picture makes it look ugly. Instead I'd propose these changes therein:
- Place the "(-)" icon to the right of the "4 hours ago" text, as in the mobile view.
- When the comment is collapsed, make the entire header, including the profile picture and the username, expand the comment.
I have the same objection for the second change as well, that it isn't good looking. It improves UX at the expense of UI. Sometimes that's the correct tradeoff to make, but I don't think it is in this case, because the upvote:downvote ratio is not very important information. New users might be confused as to what that green bar is for a minute, but they'll quickly catch on. However, I think a better tool-tip there is warranted.
The last change is pretty good.
@previnder In terms of the collapse changes you proposed, should desktop's thread lines mimic mobile? (and if so, 1px or thicker like on mobile?) I agree it might look better to place it next to the time since placed. Also maybe # of replies be in [brackets] like on hackernews?
But I also wonder about it being on the right side, it would look better, but the left side provides consistent positioning and is better for mobile ergonomics.
In terms of the second change, I do agree that it could be made to look better, but I disagree that there's no way to make it look good while also improving UX. In terms of it's importance, I read the post about why comments show both upvotes an downvotes (did something with -10 get 100 upvotes and 110 downvotes, or 1 upvote and 10 downvotes, etc) so by that logic I assumed it would still be important for posts.
Maybe there is a better way to display that information, its just that currently it feels sort of out of place with being a thin red/green line with no context.
Sorry, I meant to reply earlier. This kind of got lost in my inbox.
In terms of the collapse changes you proposed, should desktop's thread lines mimic mobile?
I don't think so. The reason why the thread-lines are different on mobile is because it saves space horizontally so that more deeply nested comments could be displayed on the screen without needing to switch pages.
But I also wonder about it being on the right side, it would look better, but the left side provides consistent positioning and is better for mobile ergonomics.
For mobile users, I think they are more likely to accidentally hit the profile picture instead, which would be a worse experience. The best option for mobile users here would be to implement a drag-left-or-right-to-collapse feature.
In terms of the second change, I do agree that it could be made to look better, but I disagree that there's no way to make it look good while also improving UX. In terms of it's importance, I read the post about why comments show both upvotes an downvotes (did something with -10 get 100 upvotes and 110 downvotes, or 1 upvote and 10 downvotes, etc) so by that logic I assumed it would still be important for posts.
I'm inclined to agree. How about if we replace the entire green bar with "x% upvoted" as in the mobile view?
Also, agreed with placing the number of replies in brackets for collapsed comments.