Looking at the first example given I think this book is the one missing the mark. I genuinely have trouble when things have less borders! I don’t care about things designed to seem nice, I want them to be usable!
I think this is probably somewhat a pitfall of using this example as a lead.
Design rules like "fewer borders are better" don't tell the story well, but they're easy to teach people. It's harder and less grabby to say something like:
Over reliance on borders to separate types of content can lead to designs where contrast between elements is too sharp and it's harder to read through information. Designers should have a sense for information hierarchy and follow that through in their application. Have a point of view and use the visual design to express that. Tools you can use to create that hierarchy are things like borders, shadows, fills, scale, and space. Using all in concert, you can make a design that feels harmonious, but also allows users to freely navigate through the interface.
That advice is probably harder to grok, and isn't as punchy because it can't be used as a simple diagnostic (do we have fewer borders?), but it is realistic.
It seems like this page/preview conflates interaction design with aesthetic/cosmetic design.
Interaction design is like “which buttons even exist?”, “should this input be represented by a radio or a drop down?”, what is the navigation hierarchy?
You won’t automatically be good at interactions even if your sense of aesthetic is good.
Indeed. In the "correct" version the search field looks almost like a highlighted item in the list. With many modern user interfaces you really need to be trained in the current conventions to see which elements you can interact with. Compare this with the typical unstyled HTML.
I get where you're coming from, but I don't think they are saying to never use borders, but instead use them intentionally. They explain better than "Use less borders" below:
> Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered
The example screenshot on the page shows a use case where they want to highlight a single row from a table, and using less borders is great for that. However, if they were trying to increase readability of the table overall, they may choose to keep the borders in place for contrast.
They used the same type of border over the first example, of course it doesn’t work. It’s “our genius design vs average nonexistent nonsense” type of move. Make table/list grid less pronounced, make the selection hint more saturated than a field bg, and now it looks better than #2.
Their selection looks like a hover hint in both cases as if they were afraid to tell a user that a row may have a selection on it.
I came to the comments specifically to talk about this first example. I also think the left design is not a bad design. It's just a different style, but both are valid. Maybe the one on the right is more trendy but that's it.
The other examples are more sensible, but this specific one is just the author forgetting about subjectivity.
OTOH, I'm using full screen apps without decorations, and I'm fighting with edge to forcefully remove all the scrollbars on every website automatically (I want 0 scrollbar unless I'm actively scrolling)
> How do you know when there is content to scroll then? You randomly scroll parts of the screen to see if they move?
Sometimes, but more often I press on page down to read more content until there's no more content to read, so having scrollbar is pointless: it eats screen real estate without providing anything in return
I loathe things "magically" disappearing and reappearing. I want a predictable, consistent interface. I can work faster when things are consistent. Scrollbars, besides allowing me to jump around in a document, give me an indication of where I am on the page. When I ask, "How much of this page/window/document is left? About where am I in it?" (a common question) the answer should be RIGHT THERE and not unhelpfully hidden/unavailable or difficult to see. I shouldn't have to waste time fighting to find out.
> I loathe things "magically" disappearing and reappearing. I want a predictable, consistent interface.
I do not want the trackbar to magically disappear. I want it gone for good, unless I ask for it, which is predictable and consistent.
> I can work faster when things are consistent. Scrollbars, besides allowing me to jump around in a document, give me an indication of where I am on the page.
I work faster with a good concentration, which is helped by a lack of UI clutter (FYI I use my browser in fullscreen mode because I find buttons and tabs distracting)
Hitting the touchscreen, doing a gesture on the trackpad (or the trackpoint), or pressing pageup then pagedown gives me context when I need it and if I need it.
The rest of time, I don't want no scrollbar.
> When I ask, "How much of this page/window/document is left? About where am I in it?" (a common question) the answer should be RIGHT THERE and not unhelpfully hidden/unavailable or difficult to see. I shouldn't have to waste time fighting to find out.
When I do any of the above, the scrollbar is here. The rest of the time, I shouldn't have to waste my concentration on a useless indicator nagging me on the right side of the screen.
