Feeling empty in whitespace: my love and hate relationship with negative space
Whitespace can either be a great asset or a big liability in design. This is a true black and white situation. Lately I’ve been paying more attention to detail as a user. Rather than aiming to complete tasks, I’m taking a step back and appreciating the empty space, often referred to as Whitespace. As a designer I’ve heard the phrase ‘better use of space’ about a trillion times. Another term going around a lot is ‘minimalism’, which plays around using fewer visual components on screen and using less space. Finding the right balance is crucial, which is what I’m writing about today.
In the Middle of Nowhere
I’ve used the Paypal app on my phone for a while, but I had to login from my laptop for some reason, and ….. nothing. I was greeted by this plain white background, and I felt this emptiness in my heart. I’m not sure what it’s called in psychological terms, but I just felt that there was something missing, even when there wasn’t. I’d prefer to see a simple background image, some kind of illustration, or maybe two forms together, one for login and one for registration ( I’m just throwing darts in the dark now ). That can help fill up the empty space and not leave me feeling empty from the inside.
I Have So Many Questions
I used to have Spotify on my tiny Sony phone back in the day, with my playlists playing loud on my earphones, it was a truly brilliant experience with a simple layout which worked and a set of beautiful artworks.
Fast-forward a few years, on my iPhone 7, Spotify has started to look like a ‘clutter’ of empty space, much like a person of few words ( I believe in giving real life examples ). They have kept the beautiful artwork, but I’m not sure where the mobile layout is going. Don’t get me wrong, It looks very clean, but It’s missing something. I feel they have compensated for the empty space on the top left, with a gradient which moves in from the status bar into the actual UI. It’s hard for me to understand, as a UX/UI designer, why the ‘Made for You’ section is so empty. And if it is empty, then why as a user don’t I see a prompt, asking me to listen to more music to get more recommendations. I feel this was the perfect case to put in a Call-to-Action for a discover section.
The Perfect Justification
The Headspace app uses some clever tricks to engage users and keep the user interested. A simple sentence in the middle of the empty screen and a Try Again button is super simple, but often super effective. Now let’s break down the sentence:
Whoops, It looks like your app got distracted by something shiny. Mind trying again?
Whoops: This word is a staple when it comes to indicating some kind of an error. Not putting an error word would be a rookie move. So, Kudos to Headspace for making sure the basics are intact.
It looks like your app got distracted by something shiny: This is a cool sentence to use as a reason for the error. Since it’s a meditation app, using words like distracted by something shiny is very creative. Plus, it says ‘your app’, which indicates that there is a problem with the device and not the servers themselves. This sets this error apart from, say a 404 error.
Mind trying again: Now this is a play on words, where ‘mind’ is the first part of the name Mindful. This sentence is leading me to the Call-to-action, which is the try again button.
Since there is so much whitespace around this part, my eye automatically goes to read the sentence. No distracting illustrations or text to fill in the whitespace. This just works.
Whitespace Masterpieces
Negative space or whitespace can be smartly used t create illustrations, which is probably one of the best uses for whitespace. This is a different take on illustrations, since it uses simple or complex shapes to add something to whitespace, which makes it more interesting and adds an illusion to the design.
Here’s an entire article on negative space illustrations: http://bit.ly/negativespaceillustrations
