|
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
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
|
|
|
|
|
Center align looks more appealing.
|
|
|
|
|
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
|
|
|
|
|
For me center align gives the best look and feel.
|
|
|
|
|
|
I dont see the crossfires
For me a checkbox columns looks better in center alignment. But I think that is a very personal taste thing.
|
|
|
|
|
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.
|
|
|
|
|
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..
- 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.
- 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.
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
|
|
|
|
|
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.
|
|
|
|
|
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"
|
|
|
|
|
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
|
|
|
|
|
One thing I learned in life is to always find out if the person giving advice actually has any experience in what they're talking about. To use the financial markets as an example, there are tons of people who will tell you what to do despite them failing and losing money.
Same is gonna apply here. If someone's been a console programmer their whole career for instance, that wont stop them from given recommendations. This is the Internet, so everyone's an expert. However, if a dev can't tell you what a box model is (without Googling it) or talk about the difference between CSS Modules vs SCSS Modules, etc. (legitimately) or a UX person can't talk about kerning, etc. (legitimately) then their thoughts on style is tenuous at beast.
To that end, if you follow this style guide insofar as the alignment goes you'll be ok...
Table and Data Grid Guidelines
Jeremy Falcon
|
|
|
|
|
|
I like it
In a closed society where everybody's guilty, the only crime is getting caught. In a world of thieves, the only final sin is stupidity. - Hunter S Thompson - RIP
|
|
|
|
|
A real toe-tapper.
If you can't find time to do it right the first time, how are you going to find time to do it again?
PartsBin an Electronics Part Organizer - Release Version 1.4.0 (Many new features) JaxCoder.com
Latest Article: EventAggregator
|
|
|
|
|
Wordle 1,047 4/6
⬜⬜🟩⬜⬜
⬜🟨🟩⬜⬜
⬜⬜🟩🟩🟨
🟩🟩🟩🟩🟩
|
|
|
|
|
Wordle 1,047 3/6
⬜⬜🟩⬜⬜
⬜🟨🟩⬜🟨
🟩🟩🟩🟩🟩
|
|
|
|
|
Wordle 1,047 2/6
🟨🟨🟨⬜⬜
🟩🟩🟩🟩🟩
One of those lucky breaks.
|
|
|
|
|
Wordle 1,047 2/6*
🟨🟨⬜⬜⬜
🟩🟩🟩🟩🟩
"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
"Common sense is so rare these days, it should be classified as a super power" - Random T-shirt
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
⬜🟨🟩⬜⬜
🟩🟩🟩🟩🟩
In a closed society where everybody's guilty, the only crime is getting caught. In a world of thieves, the only final sin is stupidity. - Hunter S Thompson - RIP
|
|
|
|
|
Wordle 1,047 4/6*
⬜⬜🟩⬜⬜
⬜⬜🟩🟩⬜
⬜⬜🟩🟩🟩
🟩🟩🟩🟩🟩
Happiness will never come to those who fail to appreciate what they already have. -Anon
And those who were seen dancing were thought to be insane by those who could not hear the music. -Frederick Nietzsche
|
|
|
|
|
Wordle 1,047 5/6
🟨⬛⬛⬛⬛
⬛🟨⬛🟨⬛
⬛⬛🟩🟩⬛
⬛⬛🟩🟩⬛
🟩🟩🟩🟩🟩
Ok, I have had my coffee, so you can all come out now!
|
|
|
|
|
Wordle 1,047 5/6*
🟨⬛⬛⬛⬛
⬛⬛🟩🟩⬛
⬛⬛🟩🟩⬛
⬛⬛🟩🟩🟨
🟩🟩🟩🟩🟩
|
|
|
|
|
|
I recently purchased a low end laptop for testing software. I find that the Windows 11 it came with is pretty snappy.
The difficult we do right away...
...the impossible takes slightly longer.
|
|
|
|