About content and space in UI

With the introduction of the new App Store redesign and the ‘Do not disturb while driving’ feature in the last Apple WWDC 2017, we are witnessing the consolidation of a very interesting pattern taking place on most of the User Interfaces we interact Today; The era of white space and an important boost of high quality and meaningful content.

App Store — iOS 11

Unlike other more superficial or ‘short-terms’ trends, I believe this is a ‘non-returning’ point in the way we understand and interact with hardware and software. We already have simpler and more friendly User Interfaces, but I don’t think this is it, there is still more to come on the same line. Let’s take a closer look at what is going on:

White space* is not wasted space

N26

In the past, it was a common practice to use as much space as we could for our content. Buttons, copy, etc, were the main characters in our designs trying to fit everything on the different screen ratios as much as we could. Well, it feels good that this is part of the past, now the trend is all the opposite. After many trial-error and some terrible oversaturated screens, we are not afraid of white space anymore.
 The use of space went from being the Cinderella in our UI to the Queen in the castle. We realised that it feels good to our eyes (and our brains) to read the content on our screens without being in the middle of a continuous fight for our attention. The white space allows content to ‘breath’, helps users focus their attention on specific hotspots and on a single task, making the journey more comfortable, efficient and enriching the experience while using a space-wise built product. Embracing this not-so-new approach of spacing automatically affects the whole of the components on any UI, from the content to the type fonts, input fields and style guidelines.

*Disclaimer Though white space is the most common and neutral use of space, this doesn’t mean that it is exclusively a matter of colour, we have to bear in mind that the use of other colours can be a better fit according to Brand or UX requirements. e.g. An app to record migraines or visual disturbances, or a website where you can spend a copious amount of hours coding will work better with a dark theme rather than with a bright white interface, but these are still applying the same principles regardless of the used colour.

Content is the King

Instagram app

White space is clean, simpler and a breeze of fresh air for our eyes, but it is also boring. People don’t open Instagram or Apple Music to watch beautifully designed empty cards, they go for the content or to perform a task, and these are now -unlike some might think- more important than before. Increasing the spacing around the content on your UI increases at the same time the focus on this, which is translated into an increased demand for high-quality content.
 But, how can we improve the quality of the content?

Meaning

You can have the most beautiful UI in the world, but it will still be terrible if it is built with a meaningless content or an undefined purpose. Contextualise the content in order to solve real problems, use logic variables based on reliable research about your user’s needs/problem to be solved/task purpose. Bring meaning to your content and dare to try many different shapes and styles if needed, enrich the experience through this, not through aesthetic.

Empathy

Listen to your users and what they are asking for, they don’t want to have that fancy card on top of the screen that you put there only to satisfy your ego as a designer, instead, they need a search bar which will allow them to solve a pain point while using your app. Understand your target; Who they are? What do they want? and what would they use your product for? are questions that every designer or Product Manager ask themselves several times during the lifecycle of any product, but there are more questions about your users that need to be asked; What makes them enjoy it? How do they behave? How do they communicate? Answering these type of questions will give us a universal point of view of what to offer in terms of content, what tone of voice we should use, what style, where to put this content, and even more specific details like, what font will connect better or the size of a container layer.
 Empathy is not just a pretty word related only to your social life, it is a tool we need to use in order to connect with our users and consequently, deliver a better experience for them.

Context

When and where are two words that have to be part of your design decisions continuously, context is a useful resource to bring meaning and empathy together when using time and space variables. For example, on a booking site, a list of things to do in Barcelona wouldn’t make too much sense when searching for a hostel in Madrid, it just doesn’t fit that part of the user’s journey, neither the timing or the task the user is performing but it would definitely be important and interesting if we position that piece of content for users who booked their holidays in Barcelona instead. That is the power of contextualised content, offer solutions to problems users don’t necessarily know they have, thanks to a right use of ‘When’ and ‘Where’.

Other interesting UI trends

Bold fonts

Fonts | Podcasts | Apple Music

Bold fonts and white spaces are a good combination to enhance readability, label objects and define sections on our UI.

Serif

The King of Soul

Serif fonts are alive and well, the use and combination of these, mainly for tags headlines add an interesting and sophisticated touch to our user interface without renouncing to basic points like readability and consistency.

Rounded cards and soft shadows

Udacity

Cards are still one of the best ways to create a clean content structure and to group similar type of content. They are excellent containers, suitable for every screen size, providing you with more layout flexibility in many cases. Something that we are seeing these days is the use of soft shadows as a replacement for border lines to stand up these components without having to use a different background colour; the result is both subtle and clean.

Conclusion

New movements and ideas like the ones behind the Calm technology Principles are a good indicator of what users are willing and looking forward to using. In an oversaturated world with plenty of info without fast-proved reliability and with most of the products out there fighting for our attention and our time; we need a different approach and new solutions for a time poor society. I believe that a simpler User Interface with meaningful and useful content, built around a more human-centered idea is the path to follow in order to build products that enrich real human interactions instead of creating time-consuming traps. Adopting this new approach, it is not only an important real improvement of the user experience and a success formula to generate profit, it is mainly, our responsibility as Product Designers.

Thank you for reading 🙂