7

I don't know if it's just me, but I find the flagging history filters incredibly confusing. Here's what mine looks like:

enter image description here

Maybe I'm an anomaly, but it took me years until I realized what was going on here.

Rather than mentally grouping things between the white space (e.g. "1 spam flags" and "1 declined" go together), I was grouping things between the horizontal rules (e.g. "51 helpful" and "1 spam flags" go together).

Is there a way to improve the UI/UX?

The first obvious thing that comes to mind is to increase the whitespace even more, but that could be an obnoxious solution. What about using a table-like structure instead of a list? For example, the comments flag block gets moved to the right of the total post flags block (or something along those lines).

Anyone agree, or have any suggestions?

  • 1
    Hm, didn't notice that until you pointed it out. Now I understand the UI design decision, but it's counter-intuitive. You can't even treat each line like the line in an arithmetic problem; you'd have to invert the first group to make that work. – Robert Harvey May 29 '18 at 19:26
  • 1
    You could potentially add the words, of which: right after each instance of the word "flags" to fix this. – Robert Harvey May 29 '18 at 19:28
10

Robert Cartaino analyzed this request and recommended the indentation (SOLO's alternative suggestion) as a clear indicator of the list's dual-level nature.

I decided to implement this using Stacks' second-level navigation pattern, as seen in the network's legal documents:

screenshot of redesigned flag history sidebar w/ two-level indentation

This is live right now here on Meta; barring issues, it should appear everywhere after the next build.

Big thanks to the good folks in The Tavern for helping with some hallway testing as I played with the design here! Thanks also to Nick & Aaron for assisting in getting these changes live.

7

Like Robert, I never noticed this until you pointed it out (not that I was looking particularly closely)... and now I can't un-see the "wrong" way.

Seems to me that the problem isn't directly about horizontal lines and whitespace, but ultimately stems from the UI not making it clear that the lines of text above the gray dividers function as section headers.

One solution for this would be to emphasize the "header" lines, using something like bold text or actual <th> HTML headers.

bolded list

Another solution would be to indent the "breakdown" items under a given section, e.g.

indented list

This could work with or without bullets.

An alternative to indentation might be showing all the possibilities, even if the number is zero, e.g.

complete list

That has the side benefit of teaching people how the system works, but could get unpleasantly lengthy.

Whatever is done, I'd vote for getting rid of those horizontal rules... I seriously can't stop seeing them as section dividers now. (Okay, if you look at the page source, they're not actually <hr> elements, they're borders on table cells, but they sure look like horizontal rules.) At the risk of getting too tangential, here's what the MDN docs say:

The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section

Just for completeness, here's the original feature request that brought the gray lines into existence: Clarify Flagging History Stats

  • 1
    Turns out adjudication is a real word. I assumed you invented it for the occasion ... – rene May 29 '18 at 20:31
  • I like the idea of indenting the filters, but I find the indentation of the counts kind of distracting/confusing. One approach is to keep the 187 where it is, but move the 145 (and other sub-counts) after "declined". – pushkin May 29 '18 at 21:24
  • I just noticed that the labels don't line up with my actual counts. So your picture shows that 145 of my 187 flags were declined lol. – pushkin May 29 '18 at 22:42
  • @pushkin Ah, sorry, I was mostly focusing on formatting, not the text. I can change them if they bother you. – SOLO May 31 '18 at 13:24
  • @SOLO No, I wasn't upset. Leave them as they are. – pushkin May 31 '18 at 13:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .