quantified-uncertainty / metaforecast

Fetch forecasts from prediction markets/forecasting platforms to make them searchable. Integrate these forecasts into other services.
https://metaforecast.org/
MIT License
56 stars 5 forks source link

Make question page a bit nicer. #78

Closed NunoSempere closed 2 years ago

NunoSempere commented 2 years ago

Some quick improvements:

question-page-nicer

berekuk commented 2 years ago

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?

NunoSempere commented 2 years ago

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.

NunoSempere commented 2 years ago

Overall I'm not too hung up on any particular improvements, but wanted to bring up that it doesn't look great right now.

berekuk commented 2 years ago

I think this can be closed, given your recent commits.