40

How am I supposed to navigate the new site home pages?.

I look at the page, and it is just a giant blob of meaningless non-information in a dense cluster and white space — the only regular information that stands out is who did the last activity on the question and when.

enter image description here

Some people tested this and concluded that this is an improvement, and I would like to understand how to make scanning/reading the presented information functional.

I have one device on which I can restore basic site functionality by running this user script: LegacyQuestions - Bringing back the old questions design by https://stackoverflow.com/users/14251221/spectric who has done an admirable job at keeping .se sites at the quality they had before the recent "features."

Unfortunately, I have a second device where I can't activate it. Usually, I view the site at a 10% increased font size, and before this recent "feature," that worked well enough. Now, I can't compute the information - the font is thin, and the page looks meaningless except for the pee coloured "watched" filter. I don't understand how to read the page - how do you do it? What do you focus on in that dense cluster of information overload when you scan the page?

enter image description here

7
  • 10
    For what it's worth, it's interesting on some level how just rearranging the same data within each box has made it dramatically harder to scan posts on the page. The data available for each post is more or less the same, but the page feels way emptier and easier to get lost in (in a negative way).
    – zcoop98
    Jan 25 at 16:58
  • 6
    @zcoop98 I can't read the page - it makes no sense to me. I feel like sitting on a chair at my optometrist, who shows me increasingly smaller letters blending together that I have no idea what they are, but I can sometimes guess them.
    – Akixkisu
    Jan 25 at 16:59
  • 6
    Step 1: throw your desktop computer out of the window and start using a mobile device (apparently, designing a layout that only works for mobile phones is more welcoming and more inclusive nowadays ¯\_(ツ)_/¯). Step 2: turn your mobile phone screen into grayscale mode so you don't get blinded by all the yellow labels. Mission accomplished. Jan 25 at 17:20
  • 2
    @41686d6564 Step 1: glue mobile device to desktop computer. Step 2: find keyboard/mobile device interface (it's gotta exist somewhere) and mouse/mobile device interface. Step 3: Browse stackexchange with new "desktop"!
    – Phoenices
    Jan 25 at 18:03
  • 1
    @41686d6564 It's still bad on many mobile devices as well, although for different reasons. That's not a fix.
    – Mast
    Jan 25 at 19:40
  • 1
    The update 2 (gold/yellow color for watched tags) doesn't fixed this problem, make it worse.
    – Rubén
    Jan 27 at 17:28
  • 1

1 Answer 1

35

So much web development these days is intended to improve the experience for mobile readers. It's certainly more comfortable to read the Top Questions page on an iPhone: Top answers on an iPhone (Portrait)

The basic flow at this size is:

  1. Meta data (answers, votes and views)
  2. Title
  3. Tags
  4. Most recent activity

Turning the phone to landscape shows a similar flow, but with the navigation moved out of the hamburger and into the left bar: Top answers on an iPhone (Landscape)

You can start to see the flow fall apart, however. With more horizontal space to work with, the recent activity line floats off to the left and out from under the vertical flow. I'm pretty sure this isn't new. What I'm trying it illustrate is that the flow changes based on screen width.

The difficulty on desktop is two-fold, in my opinion:

  1. The information flow didn't survive a transition from vertical to horizontal.
  2. Desktops have different affordances than phones.

The flow problem is easier to point out. when the page is sized for a desktop, the flow goes from left to right:

  1. Meta data (answers, votes and views)
  2. Title and tags
  3. Most recent activity

Only the most recent activity sorta floats off on its own since it's flush right and everything else is lined up on the gutter between the meta data and the title. That happens on the mobile view too, but since the flow is vertical, the activity line has a clear place in the story: associated with the question, but tucked out the way.

It reminds me a bit of chapter 4 of Scott McCloud's Understanding Comics. He shows how the individual frames in a comic naturally read from left-to-right and up-to-down because that's the way other media (in English at least) flow. Responsive design breaks the page into boxes, not unlike frames in a comic and gives the browser hints on how they should be arranged on different sized screens. On mobile, the flow works up-to-down, but on the desktop, it's disjointed with a bit of vertical flow (the three meta data lines), over horizontally (title and tags) and then sorta diagonally (the recent activity).

In both views the title and the tags are clearly the center of focus. The title is bold and colored as a link. The tags have prominent boxes around them. But on mobile, there is a clear introduction (meta stats to give the question context) and conclusion (recent activity gives a snapshot of history). Meanwhile the story is confused on the desktop because the flow isn't as clear. It seems entirely possible that this layout wasn't strictly intended, but just sorta the way the browser interpreted the hints in the context of a larger canvas.

We can get an idea of what the intention was from this Figma design: Figma design of the question summary

This summary also includes the post excerpt, which helps provide context. But it also includes icons and colors for the meta data. It seems the idea is that questions with a lot of answers, votes and views will stand out from the typical question with no answers, no votes and a handful of views. But when you look at a typical page of questions, the numbers will typically be grey right down the screen with the occasional green box if there are answers or heavy green box if an answer has been accepted. (Or, if you foolishly watched a tag, you'll get aggressive yellow "Watched" boxes.) Subdued text doesn't get in the way on a small screen, but on a large screen text isn't enough to tell the story.

The previous view wasn't perfect, but it had been refined over years to highlight votes and answer counts with large, prominent numerals:

Not exactly what the Top Questions used to be, but the goal is to illustrate large numerals.

To borrow a term I learned from The Design of Everyday Things, the problem is one of affordances. Low contrast numbers purposely de-emphasize answers, votes and views if they aren't large. Perhaps for a casual reader that's appropriate. We want people to focus on useful questions. But for people hoping to find questions to answer or vote on, the affordances are all wrong. The difference between 0 and 1 votes (well, technically score) is large as is the difference between 1 and 3 answers. But these differences are difficult to discern at a glance. Indeed these low numbers (relative to the site as a whole rather than the current view) disappear into the background.

I wonder if part of the problem was focusing on Greatest Hits, which is an atypical view of the site. While it remains hard to find the votes (at a glance), my eyes are drawn to the view and answer counts that have clear and distinct colors and iconography. Obviously the fire icon would be inappropriate for a question with 6 views.

At any rate, I'm not a designer. Usually I feel the shock of the new and that subsides after a week or so. Maybe that'll happen for me this time too.

4
  • 9
    You did a wonderful job of articulating some of the problems I've encountered with the new design (but didn't post because I couldn't really express them in a way that was actionable). I think autocorrect introduced a typo: how they should be arraigned Did you mean arranged or arrayed? I don't think anyone has standing to bring charges against them ;)
    – ColleenV
    Jan 25 at 20:38
  • @ColleenV: Quite right. I'll blame autocorrect. (But in reality, I thought the suggestion looked correct. If there were a misspelling court, I'd surely be arraigned.) Jan 25 at 20:48
  • I would testify in your defense. Autocorrect changes what used to be obvious typos and misspellings into real words. I'm unsure whether it saves me time or just makes every post take twice as long because I have to triple check everything.
    – ColleenV
    Jan 25 at 20:57
  • 5
    Thank you, this is incredibly insightful.
    – Akixkisu
    Jan 25 at 22:50

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