Notification layout restructure


(Kris) #1

I’d like notifications to be structured a bit differently! Here’s a mockup

Trying to achieve two basic goals:

  1. Float icons to the left and clear text from below, so I can visually separate type of notification and notification content.
  2. Enable entire notification row to be selectable rather than just a text link (similar to links under the hamburger icon)

I think to accomplish this the HTML would have to be structured like this

<li>
    <a href="#">
        <i>icon</i>
        <p>
          <span>Username</span>
          This is a notification
        </p>
    </a>
</li>
```

The `a` tag would get `display: block` which would make the entire `li` clickable, the `i` could be floated left, `p` would get `overflow: hidden;` so the text wouldn't float under the icon, and the `span` would be styled to differentiate username from notification content. 


Any thoughts/concerns? Unfortunately this would mess with a translation, so it's not as simple as just changing the HTML! 

(Dave McClure) #2

I think your idea may be the best, but here’s a few straw men / brainstorming ideas:

In the current layout, the issue is only apparent when the text wraps around:

But that kind of bothers me anyway. What about just trimming the text when it doesn’t fit?

And / or always putting the topic title on a newline:


(Kris) #3

I’m not super keen on trimming text, and while that’s the easy way to accomplish my first point… it’d still take some restructuring to make the entire li clickable anyway (wrapping everything in the li with the a).

and eh, not super into newlining the topic title - doesn’t read as nicely for me, and kind of screws up the formatting for badges anyway


(Daniel Ritchie) #4

@mcwumbly’s option B, text-overflow ellipsis, is the most consistent in the case of briefing the user about activity on a topic or private message. Badge (and potentially other system message) notifications are a different thing.

First, the difference is that those system messages exist solely within the notification area. Clicking the badge notification hyperlink takes you to a listing of all users sharing that badge. For a user receiving the badge, that notification is the only data they get about it which is personal to them. For that reason, we may not want to ellipsis that line.

However, in the case of topic activity (including private messages), the topic title and other actor are the only notified information, and the mock-up shows that it gets repetitive. The user’s goal is not to fully read the entire line. Rather, their goal is to read only enough (perhaps even peripherally) to apprehend the subject and participant. In that since, it’s more user-friendly to collapse all notifications to one line, because that is going to be orthogonal to glancing at the list. The design issue is similar to why column justification works in a tight area like this one.

@mcwumbly’s second mock-up is harder to read than the others because it needs some white space between lines. You’re getting that white space as a by-product of word wrapping in all other cases, but that is creating an unintended bias for the user’s mind to be attracted to empty areas of the list.

At minimum, the notification area will probably look nicer with a hanging indent on the text (pushing wrapped lines away from the iconography.

Easiest solution is to add class attributes to @awesomerobot’s markup and let designers wrestle with how their notification area should look in their design.


(Jeff Atwood) #5

We need to hurry if we’re going to get the HTML layout restructure in here before V1.

I don’t have any strong opinion about alignment, but I think the structure change should go in.

@zogstrip perhaps you can put this on your list?


(Régis Hanol) #6

Added on my list to restructure the HTML layout of the notifications.


(Jeff Atwood) #7

@zogstrip did we do this yet? I thought we did this?


(Régis Hanol) #8

I could swear I pushed it a few weeks ago…

https://github.com/discourse/discourse/commit/3330f5907cf2efad7531d16839289fd293682cab


(Régis Hanol) #9