I’m currently pretty dissatisfied with the icons for Agree/Disagree. They look ugly and cluttered to me. Unfortunately all the other icons I can think of (“thumbs up?”, “+ / - ”?) come with an implication of general positive affect that’s hard to distinguish from upvote/downvote.
Curious if anyone has ideas for alternate icons or UI stylings here.
I think I’d change the left/right for regular karma to up/down, to match common usage. I agree with dissatisfaction for the agree/dis icons, but I’m not sure what’s better. Perhaps = and ≠, but that’s not perfect either. Perhaps a handshake for agree, but I don’t know the opposite for disagree.
edit: I’d also swap the icons. Good on the left, bad on the right. Only works if the votes are no longer less-than/greater-than symbols, though.
The problem with doing up/down is mostly just that this is hard to combine with the bigger arrows we use for strong-votes. If you just rotate them naively, the arrows stick out from the comment when strong-voted, or we have to add a bunch of padding to the comment to make it fit, which looks ugly and reduces information density.
I kinda like that the site ‘LessWrong’ uses a ‘less’ symbol for downvotes, and ‘more’ for upvotes.
I also like how this gestures at the intended interpretation of voting (an indication of whether you want less or more of the thing, not necessarily of the comment’s inherent goodness or badness).
I think the current symbols for agree / disagree are fine. Maybe there’s a version that does the ‘less vs. more’ thing too, though. (Here referring to ‘less true/probable’ vs. ‘more true/probable’.) E.g., ⩤ and ⩥, or ⧏ and ⧐, or ◀ and ▶.
Aesthetically speaking, this current implementation still looks rather ugly to me. Specific things I find ugly:
Left-right arrows in the comments vs. down-up arrows on LW posts.
The visible boundary box around normal votes & agree-disagree votes.
I might understand vertical lines between date & normal upvotes, and between normal upvotes & agree-disagree votes. But why do we need boundary lines at the top & bottom?
And rather than even vertical lines, maybe just extra whitespace between the various votes might already be enough?
The boundary boxes even seem to push some of the other UI elements around by a few pixels:
See this screenshot from desktop Firefox: the boundary box creates a few pixels of extra whitespace above and below the comment headline. This creates undesirable wasted space.
Also, the comment menu button on the right (the three vertical dots) are not aligned with the text on the left, but rather with the upper line of the boundary box.
None of the comment hover tooltips are aligned: That is, when hovering over comment username, date, normal downvote & upvote button, normal karma, agree & disagree vote button, and agreement karma, the tooltips just seem to pop up at semi-random but inconsistent positions.
And while I’m already in my noticing-tiny-things perfectionist mode: The line spacings between paragraphs and bulleted lists of various indentation levels seem inconsistent. Though maybe that’s good typographical practice?
See this screenshot from desktop Firefox: there seem to be 3+ different line spacings with little consistency. For example:
big spacing between an unindented paragraph and a bullet point
medium spacing between bullet points of the same indentation level
medium spacing between a bullet point of a higher indentation level, followed by one with a lower indentation level
tiny spacing between a bullet point of a lower indentation level, followed by one with a higher indentation level
big spacing between the end of a comment and the “Reply” button
Huh, are all the disagreement votes here meaning “the current icons are not cluttered looking?” I’m hella surprised, I was not expecting this to be a controversial take since the current UI was whipped up really quickly.
I’m currently pretty dissatisfied with the icons for Agree/Disagree. They look ugly and cluttered to me. Unfortunately all the other icons I can think of (“thumbs up?”, “+ / - ”?) come with an implication of general positive affect that’s hard to distinguish from upvote/downvote.
Curious if anyone has ideas for alternate icons or UI stylings here.
I think I’d change the left/right for regular karma to up/down, to match common usage. I agree with dissatisfaction for the agree/dis icons, but I’m not sure what’s better. Perhaps = and ≠, but that’s not perfect either. Perhaps a handshake for agree, but I don’t know the opposite for disagree.
edit: I’d also swap the icons. Good on the left, bad on the right. Only works if the votes are no longer less-than/greater-than symbols, though.
The problem with doing up/down is mostly just that this is hard to combine with the bigger arrows we use for strong-votes. If you just rotate them naively, the arrows stick out from the comment when strong-voted, or we have to add a bunch of padding to the comment to make it fit, which looks ugly and reduces information density.
what if you rotate the arrows’s icons to icon-up, icon-down, but don’t move them into a vertical column?
I would do thumbs up/down for good/bad, and tick/cross for correct/incorrect.
Weak disagree
Disagree, they don’t bother me
Yeah plausibly, if the switch is made
I kinda like that the site ‘LessWrong’ uses a ‘less’ symbol for downvotes, and ‘more’ for upvotes.
I also like how this gestures at the intended interpretation of voting (an indication of whether you want less or more of the thing, not necessarily of the comment’s inherent goodness or badness).
I think the current symbols for agree / disagree are fine. Maybe there’s a version that does the ‘less vs. more’ thing too, though. (Here referring to ‘less true/probable’ vs. ‘more true/probable’.) E.g., ⩤ and ⩥, or ⧏ and ⧐, or ◀ and ▶.
Aesthetically speaking, this current implementation still looks rather ugly to me. Specific things I find ugly:
Left-right arrows in the comments vs. down-up arrows on LW posts.
The visible boundary box around normal votes & agree-disagree votes.
I might understand vertical lines between date & normal upvotes, and between normal upvotes & agree-disagree votes. But why do we need boundary lines at the top & bottom?
And rather than even vertical lines, maybe just extra whitespace between the various votes might already be enough?
The boundary boxes even seem to push some of the other UI elements around by a few pixels:
See this screenshot from desktop Firefox: the boundary box creates a few pixels of extra whitespace above and below the comment headline. This creates undesirable wasted space.
Also, the comment menu button on the right (the three vertical dots) are not aligned with the text on the left, but rather with the upper line of the boundary box.
None of the comment hover tooltips are aligned: That is, when hovering over comment username, date, normal downvote & upvote button, normal karma, agree & disagree vote button, and agreement karma, the tooltips just seem to pop up at semi-random but inconsistent positions.
And while I’m already in my noticing-tiny-things perfectionist mode: The line spacings between paragraphs and bulleted lists of various indentation levels seem inconsistent. Though maybe that’s good typographical practice?
See this screenshot from desktop Firefox: there seem to be 3+ different line spacings with little consistency. For example:
big spacing between an unindented paragraph and a bullet point
medium spacing between bullet points of the same indentation level
medium spacing between a bullet point of a higher indentation level, followed by one with a lower indentation level
tiny spacing between a bullet point of a lower indentation level, followed by one with a higher indentation level
big spacing between the end of a comment and the “Reply” button
What about something like text buttons?
When I’m designing a UI, I try to use text if there is not a good iconographic way of representing a concept.
Something like:
AGREE (-12) DISAGREEI’m not sure how that would look with the current karma widget. Would require some experimentation.
Huh, are all the disagreement votes here meaning “the current icons are not cluttered looking?” I’m hella surprised, I was not expecting this to be a controversial take since the current UI was whipped up really quickly.
My upvote-disagree meant “Current UI is not that bad, though am supportive of a thread of dissatisfied folks exploring alts”.
UI looks fine to me! There might be improvements available, but I’d need to see the alternatives to know whether I think they’re better.