I'm working on an effort to introduce a grid/list toggle, and we can't decide on where to place it in the page. My vote was for the top-right, but the client wants to explore other placements.
Is there a best-practice for this toggle placement?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
There may be enough examples (Google Analytics and Podio are two more) that place toggles like this to the top and right of the content to say that it's a conventional location, but I'd argue that the location of controls like this should depend on the specific application and user goals.
Too often the motivation for inquiries like this one is that the client "wants to explore" other options, but consider whether this is sufficient justification to mess around with this. A more reasonable approach would be to lean on design convention (put it in the top right) and test with users. If they have trouble with it, then explore other options.
Regardless of which scanning model you subscribe to, the top right is generally a secondary (or tertiary) area of focus on the page, so it makes a good place for non-primary actions. i.e. actions not directly related to the primary task e.g. toggling list views.
A counter example of this is the general Wordpress list view. They channel the primary actions on table items through buttons and dropdowns, and, accordingly, place these buttons in the primary focus area on the page - the top left.
If you're wanting to just follow the norm then top right is pretty typical. I don't recall any specific black and white conventions for this specific thing, but it's typically a good idea to go along the lines of what other large products do.
As Devin mentioned, Google Drive keep their grid/row toggle in the top right which is consistent with where Windows place their button in the Explorer browser.
I work primarily on eCommerce products and our convention is to place the toggle buttons to the top right of the grid/list.
If you want a more general rule for picking placement in your UI then keep the toggle buttons near the context of the action. So as long as they are close enough to the list/grid view that the user will see a switch you should be fine. It isn't a destructive action and allowing the user to experiment is fine.
If you want to test placement, A/B split test a few different variations and see which gets the most interactions.
Based on the F pattern, and user goals when viewing the list, consider top left as a starting point of focus above the grid or rows. "Power options" like "edit" or "new" are intuitively to the right. I wouldn't consider toggling a power option, rather an accessory to usability and viewing preference.