search

prestodb / presto

The official home of the Presto distributed SQL query engine for big data
http://prestodb.io
Apache License 2.0
15.92k stars 5.33k forks source link

Columns should be left aligned #23532

Open elharo opened 3 weeks ago

elharo commented 3 weeks ago

No ragged left margins:

image

HKMANOJ commented 3 weeks ago

Hi @elharo can I work on this issue?

elharo commented 3 weeks ago

send a PR

yhwang commented 1 week ago

I believe the info-title CSS is intended to use the right text-alignment. It is also consistent with the stages info down below. Using the right alignment for the info-title and the left alignment for the info-text here is to help users visually match the two columns.

elharo commented 1 week ago

It might be intended. It's not good UI though.

https://waffledesign.medium.com/the-power-of-left-alignment-a-user-centric-perspective-in-design-8546ea330c71

yhwang commented 1 week ago

that's for generic articles/images in paragraph format. here is for data display in table format. I don't think that applies to the query view.

elharo commented 1 week ago

Good point that this is a data table. Here's one good article about that: https://medium.com/mission-log/design-better-data-tables-430a30a00d8c

yhwang commented 1 week ago

For typical data tables, please check out the result table of the SQL Client and also the tasks table on the query view page. These data tables are using left alignment for sure. If you pay attention to the session and execution information on the query view page, they are 1) a special two-column table, 2) one column is for labels and the other column is for data The design for this kind of table is to have users focus directly in the middle of the two columns and provide the visual cue to link labels and data easily. Using left alignment for the label column makes users travel through various spaces to get to the data column. It makes the UX experience worse in this case.

elharo commented 1 week ago

A user doesn't focus directly in the middle of the two columns. The first thing the user does is can down the left column to find the label of interest, then scan right to see the value. Left alignment on the left hand column is needed, given it's an LTR language, to optimize the scanning down to find the right label.

If needed, label-value connection can be facilitated with alternating row colors and/or cell borders.

elharo commented 2 days ago

A left aligned table also found in Presto:

image

tdcmeehan commented 2 days ago

@elharo I believe that's from an internal tool within Meta.

elharo commented 2 days ago

Possibly, but it's still a nicely formatted left aligned table. There is a case to be made that number should be right aligned here, though that might not apply with the different units: B, MB, GB