Make question page a bit nicer.
Closed this issue · 4 comments
Some quick improvements:
- Add a header to the description section
- Make the width of the description section more similar to the the width of the chart
- Center the indicators section
Um, actually, all of these were intentional on my side...
I know it doesn't look great, and I can revert all of these, but let me explain my reasoning first:
Add a header to the description section
I removed it based on this advice: https://www.refactoringui.com/previews/labels-are-a-last-resort, and on the observation that e.g. Manifold Markets (which has a similar layout) doesn't add a header and it looks fine there.
I agree that in the case of metaforecast it seems like there's something missing, I'm unsure why. Maybe there's not enough padding under the chart, or maybe it's that descriptions are taken out of context from other platforms so they're not always phrased in the same way, and the header creates a sense of indirection which is needed?
Anyway, I agree that it looked better with a header, so I'll bring it back. Maybe deemphasize it, though, with smaller font or gray color? (I should also check how it looks when there are headers inside the description, since description is in markdown and can contain its own headers.)
Make the width of the description section more similar to the the width of the chart
I used Tailwind's max-w-prose for the width, and I think that the common typographic advice of "don't allow more than 80-90 characters per line" is correct. So I don't think that description's width should be increased.
Which leaves us with two options: 1) decrease the entire card size (problematic, there won't be enough space for the chart, unless we move the legend below the chart, which might work); 2) center the description, which leads me to the next point:
Center the indicators section
Yeah, so, "center everything" is often my first intuition for "how to make the design look better". It's also the decision which I often had to revert in the past during redesigns. Mainly because the ability to vertically scan a page in a straight line is important.
I agree that in this case it created too much whitespace on the right, though, and the layout looks unbalanced now. Probably because the chart already breaks the alignment, its vertical axis is not aligned with other text (and it shouldn't be, otherwise probability labels will be too close to the left border).
Still, I'm not sure that indicators should be centered relative to the description.
Possible solution: center the description and indicators together, so that whitespace is more balanced, but leave them aligned by the left side relative to each other?
I used Tailwind's max-w-prose for the width, and I think that the common typographic advice of "don't allow more than 80-90 characters per line" is correct. So I don't think that description's width should be increased.
This seems wrong, or too strict. Note that Github does ~130 chars/line, and it looks fine, as does in Metaculus.
Overall I'm not too hung up on any particular improvements, but wanted to bring up that it doesn't look great right now.
I think this can be closed, given your recent commits.