(Can I talk about UI?) Column headers vs content alignment

Maximilien

I don't think there is a UI specific forum and the question is language agnostic... I have a UI with headers (days of the week) and checkbox/radiobox under each day of the week. Should I left align the checkbox/radio box with the header ? or center-align ? and columns will all be same width in the real thing. (x for check box, o and O for radio box )

Monday Tuesday Wednesday Thursday Friday
X X X X X
o o o o o
O o O O o
o O o o O

Discuss/fight/troll me... Thanks.

CI/CD = Continuous Impediment/Continuous Despair

GKP1992

Center align looks more appealing.

Richard Deeming

I'd be inclined to center-align. And if possible, expand the hit-test area for the inputs to fill the cells.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

0x01AA

For me center align gives the best look and feel.

Pete OHanlon

Judging on some of the questions I've seen in QA recently, you should have multiple headers and align all the checkboxes in the first column.

Advanced TypeScript Programming Projects

Jeremy Falcon

Keep in mind, this is all context dependent. But, as a general rule of thumb, I tend to follow the _default_ Excel way of life. That is to say, text, etc. are left-aligned and numbers are right-aligned. For a couple reasons.. 1. This is what people are used to seeing. And while bucking the trend is ok, do so when it's done ironically or comically or for something that's actually better. For stuff that's wishy washy like this, the trend is your friend. 2. Even if the grid had cell borders, the centered version doesn't convey the structure of the grid as much. Remember, UI is about visual cues to hopefully make it so the user doesn't need to overthink at all. As silly as it may seem, the centered example doesn't look anything like a grid at all. To an artist it looks like the text is crying and the numbers are the tears in blocks. :laugh: Now, there are exceptions to this rule. It really, really depends on the data being shown. But, if your goal is to show data akin to a spreadsheet, just follow Excel and call it a day. If we're talking paragraphs in columns that's a whole different story. Note, it should be the exact opposite for RTL languages. That is default to right but numbers go left. The above is regarding LTR languages.

Jeremy Falcon

Nelek

I the entries have more or less the same length, I would go for centering. If one cell can have one letter and the other a long word... I would go for left

M.D.V. ;) If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about? Help me to understand what I'm saying, and I'll explain it better to you Rating helpful answers is nice, but saying thanks can be even nicer.

kmoorevs

My vote is for centering. I'd also abbreviate the day names. The problem I've seen with left align is mostly when the column to the left is numeric (right-aligned) and there's not enough visual separation. I also prefer centered with very short (yes/no, on/off) text values.

"Go forth into the source" - Neal Morse "Hope is contagious"

Jeremy Falcon

kmoorevs wrote:

The problem I've seen with left align is mostly when the column to the left is numeric (right-aligned) and there's not enough visual separation.

That's what padding is for. If left aligned text fills up the entire cell, it'll do the same when centered. Promise.

Jeremy Falcon

Jeremy Falcon

I actually think left aligned is way to go. I was just on a thumbs up rampage and you got caught in the crossfires. :laugh: :laugh: :laugh:

Jeremy Falcon

0x01AA

I dont see the crossfires :laugh: For me a checkbox columns looks better in center alignment. But I think that is a very personal taste thing.

Jeremy Falcon

If you follow this style guide insofar as the alignment goes you'll be ok... [Table and Data Grid Guidelines](https://balsamiq.com/learn/ui-control-guidelines/tables-data-grids/) Just don't forget to do the opposite for RTL languages for cells that aren't form controls.

Jeremy Falcon

Jeremy Falcon

Crap I need some coffee. I agree with that in regards to check-boxes, just not plain text. I might nuke my post.

Jeremy Falcon

0x01AA

Don't worry ;)

Maximilien

damn, a guideline !! I'm doomed!! Thanks.

CI/CD = Continuous Impediment/Continuous Despair

Marc Clifton

Make it user configurable. ;) Make sure you support right-to-left languages. :) Or, as my French teacher told me, if you don't know which way the accent mark goes, just draw a horizontal line and the testers can't ding you. AKA: center-aligned. ;)

Latest Articles:
A Lightweight Thread Safe In-Memory Keyed Generic Cache Collection Service A Dynamic Where Implementation for Entity Framework

Maximilien

Every friggin' thing is configurable in our software. This is one of the rare UI that will not be configurable

CI/CD = Continuous Impediment/Continuous Despair

BernardIE5317

Center of course for the obvious logical reason previously stated. Also : Vertical line separators. Each column in alternating colors. Upon hover icons fly around depending on column. to wit exempli gratia: Monday flying piggies Tuesday flying kittens Wednesday flying puppies Thursday flying butterflies Friday flying froggies Of course the library of flying icons should be user extensible. Distinct perhaps random fonts is user optional.

englebart

Make sure you reach orbit first!

englebart

Bring back the survey!