Design for issue pages with more information

As I mentioned in #1217118: [meta] Followups for API change nodes, contributors I spoke to had an almost unanimously negative reaction to the sidebar block while it was active. (Personally, the sidebar column made me feel claustrophobic.) Possible reasons:

1. The loss of screen real estate is generally frustrating, especially for long issues.
2. Developers (the main issue queue users) typically prefer a longer line length for text. (This is just a guess, but it feels accurate.)
3. People who look at issues frequently are habituated to the current layout, and so are disconcerted when they scan the page and the pieces of information they want are not in the usual places.
4. The sidebar did not contain any useful information, and as such "got in the way." If this is an important reason, people might react differently once the sidebar contained useful information.
5. The proximity of the "Jump to" links box to the sidebar block made the top of the page look cluttered, especially when it did not line up with the sidebar in any way.

Useful sidebar content might be:

• Issue "Jump to" links and metadata. I understand these are part of the node, but this is Drupal; anything is possible. ;)
• Links to latest revision diff, etc.
• Links to issue queue handbook docs.
• Project-relevant links.
• Issue queue search box (like the dashboard one)
• Related/crossposted issues.
• Related commits.

My suspicion is that some might dislike the sidebar regardless of what's there. Would making it collapsible (and the center column expandable) with a bit of jQuery be feasible?

I'm very interested in this topic, not just for the change notice nodes, but also for stuff like #443000: When viewing an issue, display a list of commits that reference that issue #.

One thing I've been thinking about, but haven't had a chance to try out is putting the issue settings and attachments on the left. These don't need the full width of the page, so I think it could work; and shorten the whole page. On the left allows code and images to spill out without obstructing anything.

See also #844532: Code cutoff by sidebar, if the left column has a giant table, like some API.drupal.org pages, it "pushes" the right column out of the way.

Making the title less specific, there are multiple possibilities.

See also #1310300: Issue details table jumps down when there are too many tags. I think that one can be tackled separately since it is more straightforward.

I think we should eliminate the idea of a sidebar altogether and do something like this:

When we deploy pi_related on Drupal.org, we should have a consistent style for meta information for an issue. Currently, having the information in the sidebar forces the rest of the page (issue header, comments, etc.) into 66% of the container width. pi_related already puts the meta information below the node body, so let's do the same with the change notices and commits for an issue.

The mockup in #6 looks awesome.

RE #6 - looks pretty nice... but some issues have really long summaries, and the new related issues/changes areas might get lost or not noticed. Can we put them:
- under the Jump To links?
- above the issue summary? [not sure if this is good or not]

@yoroy: Yeah, I think we're trying to figure out where to put meta-information about a node.

@jhodgdon, the node header is already pretty cluttered, especially when there are lots of tags on an issue. I think under the node body is a good place for this information because it follows a pattern that's already set by other project management systems: meta info is usually below an issue summary.

I think if we make the headers H2, it should be fine. In fact, the "related issues" field covers something I normally put in the summary. So making it a part of that region of the page makes a lot of sense to me.

One possibility would be to add jump to links to those headers, so you can just click to get there if the summary is long.

Oh, and regarding:

I navigate by new for my issues, meaning I land at the bottom of the page. I forget to look back up to the summary. In that sense, the summary + latest batch of interesting comments don't play nice where imo they should. (I am not suggesting reversing comment ordering). Maybe an exploration of a richer footer environment so to speak. Rambling, other issue.

Me too--which is why I usually link the issue summary by the template header IDs when I add a comment indicating I added one. Seems like the "Jump to" section could also include a link to the summary, and also appear at the bottom? Or, even, follow the user. Not sure if that is a good pattern or not, but it would be convenient for me, at least. Kinda related, but perhaps a separate issue as you've said.

Right, conditional jump-to links if there are any change records and/or any related issues would be slick. Then you could immediately tell ("above the fold") if a given issue had either one...

Generally, +1 to #6. I haven't had time to ponder this very carefully, but that all seems like a step in the right direction.

Thanks to everyone for putting some design thought into this...

Cheers,
-Derek

Generally, I hate blocks that "follow the user", but in this case, that could be pretty useful. It'd certainly fix #1307170: Make "Follow" button more findable if we considered the follow button part of the block that follows you around as you scroll up/down. ;)

Right, conditional jump-to links if there are any change records and/or any related issues would be slick. Then you could immediately tell ("above the fold") if a given issue had either one...

Ooh, I like this, too.

Edit:

Generally, I hate blocks that "follow the user", but in this case, that could be pretty useful. It'd certainly fix #1307170: Make "Follow" button more findable if we considered the follow button part of the block that follows you around as you scroll up/down. ;)

Yeah, I agree here as well.

*cough*

http://issues-drupal.redesign.devdrupal.org/node/1351694

drupal/drupal

EDIT: nvm: It's broken right now. I'll post back when it's fixed.

I don't see any block showing more information on that page? What are we looking for?

It's broken for the moment. I'll post back when it's working again.

I don't see anything different about the design of that issue node. It's not easy to find issues that have change records associated with them. http://issues-drupal.redesign.devdrupal.org/node/1057242 is a 404, for example. Can you give us a link to a page the demonstrates the UI changes?

Thanks!
-Derek

This is working now.

Note that this only includes change records. Related issues will have to wait for pi_related to be deployed.

And here's the patch (from bzr).

Here's an issue with no change records: http://issues-drupal.redesign.devdrupal.org/node/1366940
Here's an issue with change records: http://issues-drupal.redesign.devdrupal.org/node/1351694

+    if (count($change_records->result) > 0) {

This can just be if (!empty($change_records->result)) - we don't need to know how many, just if any are there at all.

Does the block need disabling in an update or is that still done in the UI?

New patch.

The block needs to be disabled manually.

Another patch. Changed h2 tags to h3 for consistency with pi_related, which is also deployed on the same dev site. There's an AJAX error that I'm running into, though. Not sure what the problem is. For now, let's get the change records patch pushed to prod and continue working on pi_related.

Sigh. One last patch. Changes the weight on the change records to 50. The weight of 10 made the change records appear between the related issue header and the "add a related issue" link.

Should "Change records for this issue" and "Related issues" be considered subheadings of the Issue summary? Doesn't really seem like it to me. If not, they should just be h2 to match "Comments" and "Issue summary". h2 vs. h3 should be about what makes sense semantically, not how it looks.

We can just fix this before committing, but if you want to re-roll, that'd be great.

While you're re-rolling, the comments should end with periods. Frankly, the 2nd comment doesn't really add any value -- the code is plenty self-documenting IMHO.

Otherwise, looks great!

Thanks,
-Derek

I like it. :)

Actually, we already have issue summaries where Related Issues exists as part of the issue summary. IMO, both Related Issues and Change Records should be considered part of the issue summary, and therefore should be h3.

The 2nd comment can probably be removed, and the attached patch adds a period to the end of the first comment.

Any further input on this? This patch is ONLY moving the change records block to the bottom of the node body. The related issues functionality can come later.

One more patch to properly escape the view title.

Ah, yes. Let's do sanitize our interface text. :)

Did someone turn off the existing change notifications block again meanwhile? Can we please leave it turned on until this patch is deployed?

Committed a version of this & deploying soon.

Yay!

Sorry for necroposting. Related issue for the D7 upgrade: #1991500: Blocks in sidebar on issue pages forces the rest of the page to 2/3 width