Specs (maturity level) label

[koalie]

Feedback from @ianbjacobs:

While I like the blue box with the status, I find it uncomfortable that it moves around
An alternative approach that would be consistent with our own specs would be to make it vertical alongside the name of the spec.
(to the left)
That way it would be in the same place all the time AND remind people of the spec.

[tripu]

@ianbjacobs, do you mean rotated 90°, running along the side?
That would be difficult to read, more so when scanning the list of specs quickly (you'd have to tilt your head a lot). No?
My alternative suggestion is to keep their orientation as it is, but align them vertically and put them always in the same spot for all specs — that way the layout is easier to parse quickly, and it's easier to find that piece of information for each spec.

[ianbjacobs]

@tripu,

Here is the sort of thing I had in mind:
#47 (comment)

You wrote:
"do you mean rotated 90°, running along the side? That would be difficult to read, more so when scanning the list of specs quickly (you'd have to tilt your head a lot). No?"

A couple of observations:

• When scanning the list of specs, all that I read is the title. Once I find a title that I need, I look at the other information.
• That is one reason I like the current approach of a series of lines of text with the titles left-aligned. That is very easy to scan. I think it will be less easy to scan an N-column series of cards.
• In the current design, the horizontal publication status rectangles are not in a predictable position. this makes them very difficult to scan quickly. The approach I have proposed puts all the rectangles in the same position with respect to the title, which should be easier to scan.

Ian

[deniak]

@ianbjacobs are you assuming all the rectangles will have the same width/height? It's currently not the case as some labels are longer than the others, eg 'Retired'

[tripu]

In #50 I put all little maturity rectangles in the same spot (top right-hand corner). Would that do, @ianbjacobs?

[ianbjacobs]

@deniak wrote:

"are you assuming all the rectangles will have the same width/height? It's currently not the case as some labels are longer than the others, eg 'Retired'"

I thought that the rectangles would be using 2- or 3-letter abbreviations, making them easier to skim and nearly the same size.

Ian

[ianbjacobs]

@tripu wrote:

"In #50 I put all little maturity rectangles in the same spot (top right-hand corner). Would that do, @ianbjacobs?"

In that layout, it's not clear whether the label applies to the title to its left or right.

Ian

[tripu]

In that layout, it's not clear whether the label applies to the title to its left or right

We can

• increase a bit the space between columns,
• give a subtle background colour to all the first lines (“joining” visually title and maturity), and/or
• give each rectangle (ie, spec) a very light background colour,

so that boundaries are clearer.

[gosko]

I tried floating the maturity rectangles to the right as well, but didn't like the result because they seemed dissociated from their specs in many cases. (i.e. I agree with @ianbjacobs)

My version tries to make the titles easy to scan, and makes it easy to find the WG and publication date, and the other details available to those who are interested.

I found it difficult to come up with something I liked for the maturity tags, so I reduced the size of their boxes and aligned them a bit better to minimize the visual distraction. It's not great but it's the least-bad option I have seen :)

[gosko]

Maybe something like this could work?

(I don't think this is great as-is; just thinking out loud. Mocked up by editing styles inline and dragging things around using dragon.js)

[tripu]

@gosko, I like that last idea of yours. Moving the maturity pill below to a separate line would also help when titles contain very long words (there are only a few of those, but they may get either truncated or wrapped at strange places inside words when they have to share the line with the maturity bit).

If anything, on your mock-up the maturity is a bit lost, not so easy to spot at a glance. We can make it a bit bigger (and reduce its padding too), so it's more apparent.

[gosko]

Great. I noticed the same about wrapping of long titles.

Here is another quick revision since I still had that experimental tab open:

This one uses the following CSS:

.profile {
    float: right;
    color: #036;
    background-color: white;
    font-size: smaller;
    font-weight: 800;
    padding: 1px 4px;
    border: 1px solid #036;
    margin-top: -7px;
}

(I am not sure why the padding is so unbalanced for the WD and PR boxes)