Usernames on top, lifting username length restrictions

I just deployed this change set:

It allows you to lift the max username length restriction.

For the time being I made this setting hidden, this means you need the following to raise it:

./launcher ssh app
rails c
SiteSetting.max_username_length = 40 

Combined with this site customisation (thanks to @radq ) you can have usable site with long usernames:

@import "common/foundation/variables";

.topic-post {
  article > .row {
    & > .topic-meta-data {
      width: 79%;
      .contents {
        text-align: left;
        padding-left: 3%;
        position: relative;
      }
      .names {
        z-index: 1;
        position: absolute;
        top: -2px;
        left: 10%;
        width: 100%;
      }
      h3, .user-title {
        display: inline;
        padding-left: 5px;
        font-size: $base-font-size * 0.9;
        a {
            color: #6f6f6f;
            font-weight: bold;
        }
      }
    }
    & > .topic-body {
      width: 70.5%;
      margin-left: 7.5%;
      margin-top: -85px;
      border-top: none;
      padding-left: 10px;
      & > .contents {
        &.avoid-tab { padding-top: 0; }
        .topic-meta-data-inside, .avoid-tab .topic-meta-data-inside {
          margin-top: -52px;
        }
        .cooked, .avoid-tab .cooked {
          margin-top: 48px;
          z-index: 2;
        }
      }
    }
    & > .reply-to-tab {
      left: 9%;
      padding: 2px 12px;
      .avatar {
        height: 15px;
        width: 15px;
      }
    }
  }
  .embedded-posts {
    &.top {
      margin-left: 7.5%;
    }
    position: relative;
    .contents h5 {
      position: absolute;
      top: 12px;
      left: 95px;
      font-size: $base-font-size;
    }
    .topic-body {
      margin-top: 15px;
      .topic-meta-data-inside {
        margin-top: -15px;
      }
    }
  }
}

For example see: Welcome to the Discourse forum usability test! - #93 by DeborahJonesJewellery - Meta - Folksy Forums

4 Likes

The replies view is broken over there.

3 Likes

Oops, this should fix it:

@import "common/foundation/variables";

.topic-post {
  article > .row {
    & > .topic-meta-data {
      width: 79%;
      .contents {
        text-align: left;
        padding-left: 3%;
        position: relative;
      }
      .names {
        z-index: 1;
        position: absolute;
        top: -2px;
        left: 10%;
        width: 100%;
      }
      h3, .user-title {
        display: inline;
        padding-left: 5px;
        font-size: $base-font-size * 0.9;
        a {
            color: #6f6f6f;
            font-weight: bold;
        }
      }
    }
    & > .topic-body {
      width: 70.5%;
      margin-left: 7.5%;
      margin-top: -85px;
      border-top: none;
      padding-left: 10px;
      & > .contents {
        &.avoid-tab { padding-top: 0; }
        .topic-meta-data-inside, .avoid-tab .topic-meta-data-inside {
          margin-top: -52px;
        }
        .cooked, .avoid-tab .cooked {
          margin-top: 48px;
          z-index: 2;
        }
      }
    }
    & > .reply-to-tab {
      left: 9%;
      padding: 2px 12px;
      .avatar {
        height: 15px;
        width: 15px;
      }
    }
  }
  .embedded-posts {
    &.top {
      margin-left: 7.5%;
    }
    position: relative;
    .contents h5 {
      position: absolute;
      top: 12px;
      left: 93px;
      width: 500px;
      text-align: left;
      z-index: 1;
      font-size: $base-font-size;
    }
    .topic-body {
      margin-top: 15px;
      .topic-meta-data-inside {
        margin-top: -15px;
      }
    }
  }
}
1 Like

Maybe let’s move this into our CSS dir. Then the site customization can simply import the file

Neat! Though I think it looks a bit weird with the “in reply to” above it. It’s like saying:

“And now, in reply to what Chris said,
Here is Bob”

instead of

“Here’s Bob,
with a reply to what Chris said”.

Just updated and this change went live on our site. Am I the only one who feels things get a bit “crowded” with a username, real name, and title all crunched together? (And different font face, weight style, colors too in the default … just seems messy.)

Also it doesn’t seem to like longer names & titles:

I will probably end up relieving this with CSS customizations, but thought I’d put it out there for consideration.

1 Like

Yes we’re definitely going to fix that! super messy

2 Likes

Can we disable this feature later?
I think username at the bottom of avatar looks like more elegant, familiar and more readable, they are separated from post content.

And for me, 15 characters length more than enough for username like Twitter did.

3 Likes

I agree with @ahmadsoe. Not sure this change is better than what it was before… As I read through the posts now, it feels like I keep stumbling over each name…

To make it less ‘in the way’, maybe it could be dimmed more? Or even moved to the right, next to the timestamp?

1 Like

Let me explain why, after seeing usernames-on-top for the first time at Hummingbird, over time I came to believe that this is a superior layout.

  • Name length has been a huge problem for us from the beginning. Even with 15 char max usernames, the same as Twitter, we can barely fit long/wide usernames in the left gutter. @sam came up with arcane splitting heuristics to get names to be on two lines that helped, but seemed awfully hacky.

  • The bigger you make the left gutter, the less room there is for everything else. And other than badges, which will be glyphs or images, there is nothing useful to put in the left gutter. So other than a little flourish at the top with the avatar and 1 or 2 lines of text, the left gutter is empty space the rest of the time. Some whitespace is good, sure, but a giant set of whitespace to accommodate the rare ultra-wide username MMMMMAXIMUM is not helping anyone.

  • Choosing and showing titles for some users exacerbates the problem (a little).

  • Enabling the optional display of long names for each user exacerbates the problem a lot.

  • Choosing intentionally short usernames (15 char max) like Twitter began to feel like a long term mistake I did not want cast in stone for V1. Sure, you want somewhat short unique names so the typing and display of them doesn’t get unwieldy, but 15 chars gets a lot of pushback from communities because it is so short. I think something like 20 chars is much more realistic – and there’s NO way we could do that with the left gutter name approach. We can barely get 15 chars to work!

  • It’s even worse on expanded replies and in-reply-to since the width is even narrower there!

  • Trying the username-on-top layout on folksy felt very, very good and natural. I was surprised how much I liked the flow with the username on top. Maybe because that’s how Twitter does it, and a bunch of other chat clients I use?

The more I think about it, the more I believe that there is just no question that username-on-top is the correct long term model for Discourse. It solves so, so many problems we had.

12 Likes

It makes a lot of sense. Clearly there are many benefits. I totally get it. I want to like it more than before. I just don’t quite yet though.

Maybe its just a change I’m not used to. Or maybe it will just need a little tweaking. Some ideas to consider on the ‘tweaking’ front:

  • dim the username a little more
  • remove the highlighting for moderators,
    indicate that elsewhere (like a little icon or color chip near the avatar). keep the username / title area monochrome.

These are just ideas… not sure if they’re good ideas or not.

In any case, sounds like there’s no good reason to turn back!

1 Like

I was also very hesitant at first, but I decided to give it some time before speaking up. And the more I look at it, the more I like it. This would also allow me to enable showing real names for posters who opt-in, a personal touch I’ve always been fond of on my own forum.

I very much agree with the removal of the highlighted names though. It has become an annoying attention-grabber that keeps pulling my eyes back towards the top when I’m trying to read a post.

1 Like

@sam

My only problem with this is that you need some type of visual distinction between the username and the rest of the post. Maybe a line or something.

My initial reaction was “Why is this person replying to themselves at the top of their post?”

Because that’s what it looks like, minus the @ sign.

2 Likes

A few mocks, perhaps? too many lines cause fatigue

Do you think if the “Badge count icon” was displayed next to it that would be enough visual distinction?

Just saying, when I first noticed this new design without being aware that it was changing, my first thought was that it was part of the post text itself, rather than being part of the user information for the post because there is nothing that indicates it isn’t slightly bolded text in the first line of the text.

And that’s the same thing the average new user is going to think.

Sure, people will figure it out after browsing around.

But don’t make me think.

How about the name getting bolder instead of bold?

I too find the names on top a bit “off”, most likely from having seen them at the side so many times for so many years. Just seems to me that’s the “de facto” place for them and I expect them to be there.

But I can see the rationale for moving them. Allows for more room for the content, and after all, I imagine most visitors are more interested in seeing the actual content the post contains rather than “bio” stuff next to every post and wasted white space.

1 Like

Yeah I was struggling a bit with that as well. Perhaps the date stamp should be moved next to the username? Example mockup:


The datestamp is a very simple yet effective way of saying “This person posted on this date”.

Also see this live example from esoTalk, which I think have some other interesting ideas as well (it’s like Discourse’s PHP sibling!).

3 Likes

That has some possibilities. Question: What do you do with the “edits” icon?

  • Leave it over on the end. Could end up looking a little lonely…
  • Move it over with the date stamp. I’m not sure that you want a patch of red there, I suspect it would be distracting.

Oh please no. It’s already way over-crowded with user ID, full name, and titles. At least not without a line break or something.

1 Like