Design feedback from the perspective of Humane Tech

[Samuel_Klein]

Reposting from a good conversation with @erlend_sh over at humanetech.org: Some specific feedback on design with a calm-tech perspective, to help people preserve focus and avoid distraction.

1: On the topic overview, let readers focus on the topic titles.

• Make titles 90% of the view, rather than 40%.
• Compress icons together (overlap?), limit the variation in repeated information like ‘views’ and ‘activity’ (e.g.: clustering to the nearest day or order-of-magnitude)
• Offer slight variation in background color for the topic titles, to break up a long page.
• Use color where you expect eyes to go. Don’t have most of the color variation in the user-icons, unless the goal is mainly viewing and clicking on those icons.

2: For categories: by default don’t let a category take up more than one line in the drop-down menu. That led to us removing most category-description posts, since they make the dropdown less convenient to use.

3: For alerts:

The bright blue New! that pops up when a topic has new posts is pretty intrusive.

What would you recommend instead?

Make the notification visible when someone is looking for it, in a persistent place, but not otherwise. So it shouldn’t show up in the title column at all – it interferes with alignment and linespacing. You could put the blue “{n}” indicator for new posts next to the existing count of the # of replies. You might replace an actual number with one, two, or three tiny dots, for “1-2”, “3-5”, “many” – again on the principle that you don’t want to overwhelm w/ detail.

4: The notifications summary can also be less distracting. Right now it is an undifferentiated stream that is always disarmingly messy: things never disappear from it, they simply become unhighlighted.
Simple: Let people keep notifs clear. Cluster them so a single round of interactions doesn’t take up an entire screen. Have two different palettes for the colorful reminders there are unviewed notifs: one if there are new notifs since you last looked at the list, and a less glaring set if you’ve already reviewed them. The full chronological list of notifs has its own page – make the link to that full page larger / more visible in the summary.

More work: automatically unflag changes whose pages you have visited / read directly. Possibly have each cluster expand on mouseover, or show the full set of notifs for a topic when you click through and visit that topic.

5: Offering a few short words rather than ‘likes’

peripatetic writes:

Many people here in Humane Tech have complained about likes in general as being addictive. Personally I think they are shallow and create the problem that we are gamifying forums with addictive elements in the place of deeper conversation.
One big idea, I don’t know if its been done before. Give people the change to “react” to a post by typing say 3-10 words instead of doing a full reply. This would be used instead of likes. People would have a change to react in a meaningful way by typing “reactions” such as “Wonderful way you think”, “I agree in principle”, “Such beautiful colors in your photo” which is much more meaningful than a simple “like”. What do you think?

[awesomerobot (Kris)]

Thanks for the feedback, some interesting things to consider.

@Samuel_Klein

One big idea, I don’t know if its been done before. Give people the change to “react” to a post by typing say 3-10 words instead of doing a full reply. This would be used instead of likes. People would have a change to react in a meaningful way by typing “reactions” such as “Wonderful way you think”, “I agree in principle”, “Such beautiful colors in your photo” which is much more meaningful than a simple “like”. What do you think?

I understand being opposed to likes conceptually (we’ve also considered including more reaction types beyond likes), but those types of short reactions are often what we’re trying to avoid… likes are intended as an outlet so a conversation isn’t dominated by a stream of non-constructive affirmations. I think maybe you’re suggesting that those type of short responses live somewhere outside of the main conversation, but I’m not sure that the content is worth the additional complexity.

Take Dribbble’s comments as an example, these comment areas are commonly joked about amongst designers simply because they’re so useless. There’s often zero conversation here. I’m surprised they haven’t introduced a character requirement.

[erlend_sh (Erlend Sogge Heggen)]

@Samuel_Klein

2: For categories: by default don’t let a category take up more than one line in the drop-down menu. That led to us removing most category-description posts, since they make the dropdown less convenient to use.

We recently made a change here so that only anonymous and TL0 (i.e. very new) users see category descriptions. The rest of us just see a plain list, like this:

@Samuel_Klein

Many people here in Humane Tech have complained about likes in general as being addictive. Personally I think they are shallow and create the problem that we are gamifying forums with addictive elements in the place of deeper conversation.

In communities where Likes are a concern, I would recommend

1. Disable badges, as you’ve already done in your community

2. set the default other like notification frequency setting to never

3. hide likes entirely with CSS (currently not possible to toggle off entirely via settings)

I think (1) and (2) should be enough. Used sparingly likes will help you promote valuable content and users alike. We probably ought to have a more comprehensive guide on the many things Likes enables you to do in a Discourse community, because they are deceptively simple.

[codinghorror (Jeff Atwood)]

@Samuel_Klein

Make titles 90% of the view, rather than 40%.

This seems quite dubious to me – even Google Inbox doesn’t make the title that prominent.

@Samuel_Klein

limit the variation in repeated information like ‘views’ and ‘activity’ (e.g.: clustering to the nearest day or order-of-magnitude)

I’ve mentioned something like this before:

https://meta.discourse.org/t/new-topics-sorted-primarily-by-category-instead-of-activity/26766/11?u=codinghorror

It is a complex change, though.

@Samuel_Klein

Offer slight variation in background color for the topic titles,

We used to do tiger striping for the topic list in older versions of Discourse, the consensus was that it added more noise than anything else.

@Samuel_Klein

Use color where you expect eyes to go. Don’t have most of the color variation in the user-icons, unless the goal is mainly viewing and clicking on those icons.

That is in fact, the goal – conversations are people, and we want the focus to the be on the people.

@Samuel_Klein

by default don’t let a category take up more than one line in the drop-down menu. That led to us removing most category-description posts, since they make the dropdown less convenient to use.

Which category drop-down are you referring to? Can you provide a screenshot? TL0 users get full category descriptions, and users who have been around longer just get the category title per recent @joffreyjaffeux changes. So this already scales to the user.

@Samuel_Klein

Make the notification visible when someone is looking for it, in a persistent place, but not otherwise. So it shouldn’t show up in the title column at all – it interferes with alignment and linespacing. You could put the blue “{n}” indicator for new posts next to the existing count of the # of replies. You might replace an actual number with one, two, or three tiny dots, for “1-2”, “3-5”, “many” – again on the principle that you don’t want to overwhelm w/ detail.

I think I’d need to see a mockup to understand what you’re getting at here? Nobody has ever complained about our existing notification that “new / updated topics have arrived” as it mimics what Twitter does.

Furthermore, it doesn’t shift anything around, because it overlays the column titles, as you can see here:

@Samuel_Klein

Right now it is an undifferentiated stream that is always disarmingly messy: things never disappear from it, they simply become unhighlighted. Simple: Let people keep notifs clear.

Why? That would remove my ability to quickly revisit something I was recently notified about; I use this all the time to return to a conversation I recently participated in.

@Samuel_Klein

Have two different palettes for the colorful reminders there are unviewed notifs

We already have a special color for unread notifications. You want even more color here, somehow? Wouldn’t that be quite noisy?

@Samuel_Klein

The full chronological list of notifs has its own page – make the link to that full page larger / more visible in the summary.

It seems quite visible to me, along with dimiss all?

If you have UX suggestions, I strongly advise whipping up some quick mockups, as those are easier to parse and respond to than a lot of text.

[Samuel_Klein]

@erlend_sh: thanks, will experiment with setting the like-notif frequency to never. Leaving the option in for now – people appreciate the ability to indicate thanks or appreciation – still thinking about ways to make it feel like a more meaningful interaction, and less a constant source of comparison [this post was liked more than the other].

@codinghorror: Hi! Thanks for the inspiration + tools.

90%: – Perhaps an exaggeration But 80%? In your screenshot, there’s a 4:1 ratio of [title+first line] to [icon+usernames+numbdata]. Will experiment.

Clustering numbers – Some option for a simple cluster (truncating at the first digit?) and making numbers slightly less prominent – lighter and less screen space – would be of interest. Experimenting with opacity as a simple change.

Tiger striping: Noted, will experiment. Not bimodal enough of a preference to leave as an option?

Conversations as people : interesting! We also have conversations meant to be about ideas and topics, possibly with many contributors to a single composite… I wonder if these are two modes worth slightly different interfaces. On a browse of our community of a few hundred people, I spend most of my time reading text and little time trying to recognize individual icons.

Categories: Great, the new changes address our thought.

Notifs and coloring: we are a very notification-averse community, so sensitive to things others might not notice or even wish for. “new” shows up at the end of topic titles, in a way that’s not always in the same place / breaks up the pattern of the column

The little blue number indicating how many new posts there are in a topic shows up to the left of the topic title, in our install; I’ll have to check what the default is.

Two different palettes: this was a minor request (from one person), ignore for now. If we come up with an interesting alternative, will start a new topic.

Notification overview: Seems like some people prefer to keep a clean notification summary, like an empty inbox; others want to keep seeing the recents. In either case, I can imagine people wanting to remove at least some notifs. So perhaps there could be a third state per notif: unseen, seen, and hidden. And the initial FR from this list could be satisfied by a “hide notifs once seen” config option.

The down-arrow doesn’t clearly say “Full Notif History” to me, I may not be used to it yet.

[erlend_sh (Erlend Sogge Heggen)]

@Samuel_Klein

Offer slight variation in background color for the topic titles, to break up a long page.

Here’s how to achieve “tiger stripes”:

How do you set alternating colors in the list of topics

You can achieve this with a CSS customization. Here’s an example to get you started: .topic-list-item:nth-child(even) { background-color: #EEE; } .topic-list-item:nth-child(odd) { background-color: #FFF; } Here’s how this looks on Meta: [image]

You’ll also find a link there to some history behind why we removed it.

[Samuel_Klein]

Yes, somewhere outside the discussion stream. Even something like the slack approach, w/ a shortlist of emojis and icons to choose from, helps avoid the “number comparison” reflex and offers a marginally more meaningful way of giving thanks.

Erlend: currently testing light striping, thanks.

[gdpelican (James Kiesel)]

FYI you may be interested in giving the retort plugin a go for reactions.

[codinghorror (Jeff Atwood)]

Visual mockups of proposed changes are always welcome! Small changes work best and are easiest to fit into our development schedule.

p.s. if you want to de-emphasize the “new” indicator that can easily be done with CSS, etc

[notriddle (Michael Howell)]

@codinghorror

Furthermore, it doesn’t shift anything around, because it overlays the column titles, as you can see here:

On desktop. It is a problem on mobile.

[aschrijver (Arnold Schrijver)]

@erlend_sh

hide likes entirely with CSS (currently not possible to toggle off entirely via settings)

I don’t think humanetech community should disable likes. They show you your content is on the right track, and with a like you show your appreciation (e.g. to a post directed to you) without polluting the topic discussion with non-constructive affirmation as @awesomerobot rightfully states.