The problem here is that the ellipsis button in this table is placed to the left. I inherited this pattern, but I am not sure if it's correct, practical, or normal. From other things I've seen, the convention of putting an ellipsis to the right is most common. Thoughts?
Answer
Terminology
Luke Wrebowski calls this menu choice the meatballs menu.
Note that your buttons don't look like ellipses (•••); They look more like square dots (▪▪▪). I would fix this to ensure that users who have seen this pattern before can immediately get it.
Placement
You should take a look at this question for some ideas on how to think of placement of controls. But the short answer is to place it where the user reading the row would expect to find it. I have a strong urge to see this menu aligned to the right as you do. Firstly, it would group the Action and Menu controls, thereby keeping data separate from controls. Secondly, it aligns with left-to-right reading, so users would get to the controls after they have read the data in the row.
As a counter-example, below is a data-table from the webapp for the Deezer music streaming service. Each row has four controls including the meatballs menu and they are positioned on the sides of the row as well as within the row. I use this UI daily and I think it works.
No comments:
Post a Comment