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?
-
2Please provide some sketch or a more detailed explanation. – wassx Nov 25 '14 at 8:15
-
Made this a question and removed the request for examples, which are considered off-topic as links to example resources become dated and unreliable. – dennislees Nov 25 '14 at 14:53
Best practice may not apply to a location
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.
Examine your motivation for change
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.
Why put it in the top right?
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.
I don't know of any best practice standard. There certainly seems to be a trend for top right, Google Drive makes use of this using a single toggle button.
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.
