Laws of Locality: Where in your UI you should put certain controls

learnui.design

32 points·feross··6 comments

The "switch app" and "switch profile" buttons being right next to each other in Gmail is a common annoyance for me. I frequently click the wrong one. They do very different, unrelated things—they should be in different places. Similar things should be together, unrelated things should be apart.

Indeed. Office 365 has them on different sides, and iCloud requires going to its home screen to view account settings.

tldr

1. Put an action near/inside of the object it affects.

2. If an action affects multiple objects, place action above those objects.

3. If you can't do 1 or 2, compensate by making the action more noticeable.

Thank you. This is the reason I can’t start to write. I love brevity and clarity.

Prolonged blog posts where the crucial information can be made up in 2-3 lines is now the norm and I can’t for the life of me adapt to this style of writing.

I would love to have a tldr; or executive summary (I know it has a different meaning, but you get the point) up on top and then the rest of the article, for those who are now intrigued to read more, available to read.

> If a control affects change across an entire area, put it above that area

If I select multiple items, usually I do it from top to bottom (and from left to right). So I end up at the bottom of UI. And to run action I have to go back to the top? It's even worse if scrolling is involved.

And using gmail, which has pretty bad UI, as example?

I believe the idea is that the UI that applies to an entire area stays at the top of the screen, like a toolbar. Therefore, it doesn't matter if you scroll from top to bottom, you will still see the toolbar (or perhaps a minimalist version of it to save space).

Reply on news.ycombinator.com