Yes, gap dimensions also exist in software development and especially in the development of user interfaces. And in this blog post, I would like to make it clear that these visual gaps are just as important in the software development of user interfaces as they are for car manufacturers.
The question is obviously about user experience (UX), which is negatively influenced by poor "gap dimensions" both in the automotive world and in the world of user interfaces. As a simple example, I have two screenshots of our Secure Password Share product.
In the following screenshot, the spacing is not correct, which would immediately lead to a bad first impression for many users:
Take a look at the screenshot and pay particular attention to the spacing of the login card. There's something wrong here, isn't there?
Now take a look at the corrected gap dimensions in the following screenshot and how the User interface now has an effect on you:
The asymmetrical spacing gives many users a negative feeling, which detracts from the overall impression (user experience) right from the start of the user experience. Some will claim at this point that these supposedly small discrepancies in User interfaces are to be regarded as trivial. However, the demands of today's users are very high and should not be underestimated.
How do you ensure that a User interface is implemented consistently and with the correct "gap dimensions"?
- Use of a CSS framework such as Bootstrap
- Use of a style guide: for our own products, we use our own style guide. doubleSlash Living Styleguide
- As little custom CSS as possible
- Regular QA: in the best case fully automated via e.g. visual comparison of screenshots with Playwright
If these measures are applied, you too can ensure that your user interface has the perfect gap dimensions!
