Cluttered interface, progressive reduction, ideas

(Camilo Bravo) #1

I have a problem with the interface. It looks a bit scary and cluttered the first time you see it. Lots of buttons, lots of tooltips, etc. With this in mind, look at this concept, progressive reduction. My idea is not exactly the one in the article, but instead to show a minimal interface at first, and once the user gets familiar with it, present more advanced functionality gradually. The idea of progressive reduction could also work here. So, each user would see the interface differently according to how much they’re used to the site’s interface.

An examples where this would be cool to implement is the “format” toolbar when writing a post. Maybe at first you can only write plain test. My idea is not exactly to limit functionality (like the idea of unlocking features in Stack Overflow), but to kinda hide it so that new users are not scared when they first visit the site.

Posts overview - Participants avatar
(Shawn Holmes) #2

Discourse already employs progressive reduction; there are a multitude of navigational elements that are hidden, right out of the gate.

Feedback is still being collected from the community on this, as it pertains to the “too much” vs. “not enough” ratio, and will continue to be tweaked and polished as necessary.

(Jeff Atwood) #3

We already do this, to some extent.

At trust level 0, users don’t see the “Reply as new topic” action in the right gutter, for example. Nor can they flag.

On this site, however, everyone starts at trust level 1 per the admin config. That’s because at trust level 0 you also can’t post images, or construct posts with more than 2 URLs, etc. We also start everyone at trust level 1 on try.discourse because otherwise they couldn’t exercise core functionality, and we wouldn’t see problems… sandboxing new users is great for safety and making it simpler, but it also means they can’t tell you if those features are working!

More specifically, I’m not a fan of hiding the preview, since the preview is essentially automatic and helps users not construct posts that are visually broken. Nor am I a fan of hiding the toolbar, since editor toolbars are quite standard all over the web (who is scared by an editor toolbar? ours is tiny).

There’s not a whole lot to hide, because there really isn’t that much on the page.

(Eli the Bearded) #4

I think it is entirely different to restrict a user’s available options based on “trust” than to restrict a user’s available options based on “familiarity”. Once I become adept with an interface, it will translate to other instances of that interface. My rights or priviledges should be entirely orthogonal to my understanding of the interface.

(Rowan Lewis) #5

I’ve got to disagree, it is quite busy, especially with the heavy borders around each post and the way things fade in and out as the mouse moves over them. While it looks very pretty, it all takes attention away from the content itself.

Beneath all the replies are two rows of buttons, which isn’t bad as I can see why it’s needed for the “Tracking” control.

Below that again are the “Suggested Topics” with full details of likes views, categories, posts for each. It doesn’t really seem necessary.

TLDR; as a third time visitor I’m absolutely baffled by half of the things on this page.

(Chris Bridgett) #6

I have to say I agree that the interface somehow does feel cluttered, despite there not being that much on there. I can’t explain it, but I know where the OP is coming from.

Progressive reduction as a concept is simply brilliant (and sounds like it could get progressively more difficult to implement and maintain) but as @codinghorror said, I don’t know what else you could hide. Most of it is necessary.

(Simon) #7

Though I don’t think Discourse feels cluttered to me (especially in comparison with existing forum software), I kind of see some areas where it could be reduced even more.

  • The bar at the bottom of each post could be hidden by default and only show up after clicking of some small icon (like the ‘last read icon’ at the top right of a post). The idea would be that most stuff in this bar is not essential, except maybe the reply button. How often do you need to flag a post, bookmark it or share a link to it? Even liking a post is probably not that important…

  • The same could be done in some way for the additional ‘metadata’ below each post (currently only ‘likes’ are shown here). Though some very compact summary would be necessary, as ‘likes’ are kind of pointless if nobody sees them.

  • The buttons at the bottom of a topic could be reorganized. The reply button could be moved to the right, so it would line up with the reply buttons of each post and it would separate it from the other actions, which are kind of less important. The ‘Favorite’, ‘Share’ and ‘Notification’ button could stay where they are or the former two could be moved to the first post (though ‘Favorite’ already is integrated into the topic title).

I guess this could be done in the default theme, though it would be perfectly fine to do this in a custom theme, as it also is a matter of taste.

(Jeff Atwood) #8

I’m curious, have you ever looked at other forum software? Here are some vBulletin screenshots I took just now.

If you are “baffled” by Discourse, you may actually have an epileptic seizure if you visit other common forum software, because there are easily 100x more elements on each web page served. :smile:

Here are larger versions of the images so you can see for yourself:

(Jeff Atwood) #9

Liking a post is one of the most critically important actions in the system. We did discuss hiding some other more rarely used actions behind an additional click, but that is substantial friction. Clearly reply has to be on each post. And once you do that, you have this entirely unused column on each post… so you might as well put the other common actions there, too.

Yes, we could hide them until mouseover, and we used to! But remember on a tablet there is no such thing as hovering your finger over the posts to make things appear. And in the future, all computers will be tablets. Period. For better or worse, you have to design as if mouseovers don’t exist although they are awesome for hiding complexity until you need it. Yes, it is sad we are losing such a powerful technique, but that’s the way it is.

Probably the best option here is for you guys to come up with a CSS theme that meets your needs.

Certainly nobody goes to a WordPress blog, sees the default theme, and says “WordPress is too noisy! I can’t use it!” – they just try a different theme. Right?

In the future, all computers will be tablets!
(Rowan Lewis) #10

I’m very familiar with other forum software*, but that’s besides the point. You’ve made a good start here no doubt, but I don’t think you’re finished just yet :wink:

* I used to be a YaBBSE modder, OpenBB modder then developer, then wrote my own forum.

(Vaibhav Arya) #11

@codinghorror Your competition, as far as look and feel is concerned, is not vBulletin (which is horrible), it is stackoverflow and all other modern web based community fora. I’d even include Google Groups, Facebook and Yammer in the list.

(jon) #12

@codinghorror @Victor1 I agree with your points re competition. One thing where discourse could really differentiate itself is a strong plugin ecosystem which the other forum apps don’t really have.

This is a bit of a tangent but I think the idea of different views could be extended. For example, in the top right ‘user’ nav, I would love to see a ‘simple’ and ‘complete’ toggle. The simple view could prioritize the content that the users write and embedded content and the ‘complete’ could show all the user actions that could be done on that associated content. Maybe even more simply, icon-only and spell-out-everything mode?

(Nicholas Perry) #13

Tablet apps get around this by placing action into contexts. The ability to select items for deletion don’t show up until you are in delete mode, for example.

Why not have it so that the other options don’t appear until you tap on a post? That would be a definite signal that someone wants to interact with that item.

This would work well if combined with @timpone’s recommendation.

(Jeff Atwood) #14

Makes core activities two “taps” instead of one, hides common actions – like the double click action on a mouse, how do you even know this is possible?

Kind of severe side effects.

(Nicholas Perry) #15

I’m not quite sure what you are asking here, but I know that jquery has some support for touch events for almost a year now: GitHub - benmajor/jQuery-Touch-Events: A collection of mobile event plugins for jQuery.

You are talking about touch interfaces, which implies that the user is rudimentary familiar with them. - This is also kind of the whole point of progressive reduction… the user is shown help tips until he has proven that he is aware of the feature.

Have you seen Intro.js - Step-by-step guide and feature introduction for your website ?

(Jeff Atwood) #16

Yes, but this can lead to an extreme form of “mystery meat navigation”, where the user taps on everything on the screen to determine where the “hidden” commands are.

As Nielsen points out, touching something can result in one of five things happening:

  • Nothing happens
  • Enlarging the picture
  • Hyperlinking to a more detailed page about that item
  • Flipping the image to reveal additional pictures in the same place (metaphorically, these new pictures are “on the back side” of the original picture)
  • Popping up a set of navigation choices

Is there anything to give you even the slightest clue what result you’ll get? Not usually. As a rule apps leave you jabbing at the screen like an ape trying, via some kind of random walk process, to figure out what everything does.

Therefore, most sane touch UIs make all the primary commands visible all the time.

(Nicholas Perry) #17

I guess the point would be to leave these clues and train the user a bit - Giving them a life-jacket before throwing them in the deep end. You don’t need UI affordnces as much if the user has been trained and proven that they know how things work. (I.e. don’t weight down a good swimmer with arm-floater)

E.g. Most people failed hard on the hidden menu feature of Word 2003(?), but do great if they set up their own custom ribbons in 2010. I know that training them to set up their own ribbons indirectly forces them to get familiar with the UI paradigm and recognize the clues in the future. I’ve been using this tactic to orient people with windows 8’s interface.

I think that this would only really be provable with UX testing sessions. I’ll have to play around a bit to see what I can rig up.

(Jeff Atwood) #18

Perhaps the (somewhat) recent minimalist-ification of the design addresses this concern?

I definitely agreed that with our older Feb 2013 launch design, all the lines and borders and boxes and shaded corners made it very fatiguing to read over time.

We do suppress some buttons now with the ellipsis, depending on how many are shown. This also allows us to have plugins add post buttons without it getting crazy.

(Marvin R ) #19

Just my two cents (after taking a more in deep look of discourse):
The UI on the topic page really looks (it is hard to explain) “too much”. It is hard to read even the topics. Just from my gut feeling:
UI looks too bootstrappy somehow and I can easily read the topics (even more at once) on a normal vBulletin in comparison to Discourse. If I would suggest a better way to do it (and not look like vBulletin) then I would say it is Gmail. It is much easier to read (email) topics without so much whitespace there. My eyes feel more tired when reading Discourse titles. Also the buttons and controls are not recognizable as such. For example the tag “UX” looks like a button here so that I cannot distinguish between information (like tags) and action buttons which do something more (like reply). So I see too much buttons and widgets here which have the same “weight of importance” although there are not so many. If you look e.g. at the Gmail standard design you will see that buttons have a small border or are red (very visible). I think this is something you need to look at: Good button design and better seperations between action and the information which is much more important (white) than controls (don’t be afraid if you use some very light gray for control backgrounds). It just needs a littlebit polish… nevertheless… really great software.

(Jeff Atwood) #20

@therealmarv and @cambraca take a look at the current design and see what you think. I agree we were way too cluttered in 2013 and 2014. We’re paring things down a lot.