Hacker News new | ask | show | jobs
by matte_black 3046 days ago
I would caution anyone from using these tips if you are building some kind of B2B Enterprise app where the focus is on getting as much information on screen as possible and minimizing the possibility of making errors.

Borders and clear destructive actions are a must. Needless spacing is wasted space.

2 comments

On the contrary, well thought of white space guide the eye. It doesn't waste space. It is a part of the design in itself and is usually the hardest component to get right.
It can certainly waste space. And a lot of it. I’ve seen designers redesign tight tabular data layouts into light and airy cells of data and it ends up displaying 60% less information on a screen, requiring more scrolling from a user. This is exactly the kind of thing enterprise apps don’t need, but it looks good for a consumer app.
That's an example of badly thought-of white space.
If it's important for you to fit as many rows in the screen as reasonably possible with maximum readability, then doing the separation with some separator takes less pixels/distance than separating them with whitespace.

There's not much to think about the whitespace in such a scenario - it's a simple yes/no experiment; you can try to simply remove the separating line. If the resulting whitespace ensures good enough readability/separation, then it works; if it'd need increased spacing, then it's worse than having the separator and not worth thinking about how much extra spacing you'd want - the answer to that is as little as possible, i.e., zero.

Not all empty space is "white space". Simply adding random paddings/margins around form fields isn't making good use of "white space". It's simply adding blank empty space. It's a dead weight on your page.

"White space" is negative space. It's something you should think of as an active part of the design.

One of the first rules of web design is "content is king". As a rule of thumb, any use of white space that makes your content harder to reach, read or see is a bad use of white space. It's breaking the "content is king" principle.

No part of your design should break the main web design principles. While there's no agreed upon list, "content in king" (or however you word it) is always present.

In short, yes, I agree.

---

Edit - A nice description of it:

"White space (negative space) is the area between design elements. It's another tool for designers to design for the user experience (UX). Remember that white space is not necessarily white; it’s just the name to indicate spaces where there are neither user interface (UI) elements nor specific content.

As a designer, you can introduce white space based on four main factors:

- Content,

- Design,

- user and

- brand

Use macro white space to organize content in the layout and direct the user through the blocks of content shown. Use micro white space inside the design element features as seen in the text, images and content blocks.

We can also approach white space as being passive or active. Passive white space does not have a specific role in the design other than facilitating the user experience. It is all about being easier to read. Active white space guides the focus and attention of users. It is more about standing out and making a statement." https://www.interaction-design.org/literature/article/the-po...

This is consumer app mentality.

Enterprise apps are expert systems, they are not designed for the masses. Your goal is not to surprise and delight, your goal is to help people get shit done and go home. That means data needs to be organized tightly and densely, forms often have a lot of inputs, tables often have a lot of columns and tons of rows. A simple separator line between rows and columns, and perhaps alternating background colors for even and odd rows is all you need. Think something that looks more like an Excel spreadsheet, and not some social network with documents.

If a new feature is needed, it needs to plug straight into the existing design wherever there is space. There is no time to think about a redesign, and changing a layout may just confuse an employee who got used to the previous one.

My biggest pet hate is borders inside borders and text inside tight borders. This dark pattern is used on mandatory health warnings on cigarette packaging in my country (and many others) I don't think this was an accident...

In a more applicable example I removed most of the borders and heavy rules from a information dense page of a popular B2B site I worked on and the readability / scan-ability of the page increased dramatically and it had a very positive reception from out clients.

I do think one thing is missing from this guide and that is point lines or point rules. This is something I think I learned reading one or Edward Tuftes books. In print horizontal rules of 0.5 - 1 points (see: https://practicaltypography.com/rules-and-borders.html ), however on the web I find dark grey 1px bottom borders to have a similar effect.