Subtler composer popups

composer

(Buddy) #1

I like the idea of just-in-time usability remiders, but I feel that the current implementation is less minimal than it could be. I’ll show you what I’m thinking of, but please bear in mind that I’m not a talented ui designer; this is just the simplest example that I could produce, playing around with the dev tools.

Current:

Proposed:

My feeling is that, as @codinghorror says in the article, you only want to show the minumum helpful reminder at exactly the right time; as long as you make the effects of the user’s actions clear, you don’t need the extra (some may say ‘nagging’) questions.


(Jens Maier) #2

I like this, but what about the hint popups for new users and similar topics? The first would be too long, the latter contains a list structure, so neither really works as a simple info/warning bar… :confused:


(Buddy) #3

Good point. It seems only the three messages marked urgent would be appropriate as info bars.

If someone wanted to try it, my userscripts look like:

//http://stackoverflow.com/a/15351813/2063518
Discourse.ComposerMessagesView.reopen({ 
  didInsertChildElements: Ember.observer('[]', function() {
    this.appEvents.trigger("composerMessage:inserted");
  }) 
});

//Init should actually be on didInsertElement, but by the time this runs that event has already fired
Discourse.ComposerView.reopen({ 
  _messageWatcherInit: Ember.observer('model.composeState', function() {
    this.appEvents.on("composerMessage:inserted", this, 'resize'); 
  }),
  _messageWatcherUnbind: Ember.observer('willDestroyElement', function() {
    this.appEvents.off("composerMessage:inserted", this, 'resize');
  })
});
.composer-popup.urgent h3, .composer-popup.urgent p {
  display: none;
}

.composer-popup.urgent > *:nth-child(3) {
  display: initial;
}

.composer-popup.urgent {
  width: 100%;
  position: relative;
  bottom: 0 !important; /* bottom gets applied to the element by javascript */
  left: -10px;
  background: #FCC;
  box-shadow: none;
}

.composer-popup.urgent a {
  float: left;
}

.composer-popup.urgent p {
  margin-bottom: 0;
  padding-left: 20px;
}

#reply-control div.contents {
  padding-top: 0;
}

#reply-control div.control {
  padding-top: 10px;
}

I used nth-child to display only the second line of test from the message. In discourse/server.en.yml at master · discourse/discourse · GitHub they are:

  • sequential replies: “Rather than many sequential replies to a topic, please consider a single reply that includes quotes from previous posts or @name references.”
  • dominating topic: “This topic is clearly important to you – you’ve posted more than %{percent}% of the replies here.”
  • reviving old topic: “The last reply to this topic is now over %{days} days old. Your reply will bump the topic to the top of its list and notify anyone previously involved in the conversation.”

(Sam Saffron) #4

I really like this, I find that the more there is to read the higher the chances are I will ignore it. :heart:


(Jeff Atwood) #5

How would it fit stuff like the new user advice for first posts and first topics?


(Sam Saffron) #6

One simple sentence with a “expand…” link.

I would prefer everyone reads one sentence than ignore 5 paragraphs.

Basically less word, inline as much of the UI as possible. I find the floats interfere and overlap UI elements.


(Buddy) #7

I’m trying to remember how I felt about the new-user popup when I first saw them (I basically forgot that they even existed until @elberet pointed that out). I think I found it quite nice to have the welcome blurb pop up like that as I began composing my first post.

On the other hand, having the welcome message start out collapsed does make a lot of sense, especially when you consider that users will see that message on every Discourse instance they sign up for.


(Jeff Atwood) #8

I am all for the “less words is more” mentality but this would be a fair bit of work, and probably has to wait a while.

In the meantime we can tighten copy as needed.


(Jeff Atwood) #9