2

I have a table with three columns: name (of the service), version (of the service), and activated. All cells (except the header) in the activated column contain a toggle button that allows users to activate or deactivate the respective service.

I have aligned the name and version columns as follows: the header cell is aligned to the left, and the other cells are also aligned to the left.

However, I am unsure about the alignment of the activated column. I see three options:

  1. Column header - left side; other cells (with toggle buttons) - left side.
  2. Column header - left side; other cells (with toggle buttons) - center.
  3. Column header - center; other cells (with toggle buttons) - center.

What do you think is the best option in this situation, and how might each choice impact user perception?

Improve this question
4
  • @jazZRo Please, remove duplicate. That is absolute different question about header and cell values alignment. Commented Sep 20, 2024 at 14:30
  • Is "activated" considered to be a checkbox only or is there text appended? Or do you mean real "buttons" inside the table column? Are the columns resizable? Can they be fixed in width individually? Commented Sep 20, 2024 at 21:57
  • 1
    @Antares Activated column has text only in header cell. All other cells have only toggle button. Columns are resizable. Commented Sep 21, 2024 at 7:52
  • 1
    From UX perspective it hardly matters as long as the cells are not super wide. If the values are aligned to left, then there is no harm in aligning the header to the left as well. Same goes for Center or Right alignment. Numerical values normally take right alignment, so the header can go right as well. I don't see any reason to have the header and the values aligned differently. For this case, center and center should work fine. Commented Sep 23, 2024 at 6:04

1 Answer 1

Reset to default
0

Since you have a simple "flip left/right" style of toggle button without any captions, it does not matter how you align them. You can decide this by cosmetic aspects alone.

Consider the column resizing action:

  • With center alignment the whitespace around the toggle button will get larger on both sides. This does not give any benefit to the user. The "clickable" area of the toggle button stays the same and the "non-clickable" area grows but also does not show more information like text for example.

  • With alignment left your toggle button will "stay" close to the predecessor column and whitespace just grows behind it. This is hardly any different than the previous case.

  • With alignment right your toggle button will stay at the right most border (and will not move at all if it is the last column in the table) and whitespace grows in front of it. This also gives not much of a benefit to the user.

Conclusion:

The only "sensible" way would be to have a fixed column width for those toggle buttons. Then the header can just be aligned as all the other headers for example (this would be purely cosmetical).

Improve this answer
2
  • What do you mean by 'the toggle buttons to fill the column width'? Rhetorical but are you suggesting that a simple switch expands the whole width of the page if the cell expands similarly? There are no captions along with the toggle buttons. Commented Sep 23, 2024 at 6:08
  • Oh, I see, you mean the "flip left/right" style of a toggle button on mobile. I had a button in mind which can stay "pressed" to have it toggle between on/off and a caption like "Activate". I'll edit my text accordingly. Commented Sep 23, 2024 at 7:08

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.