A Case for "Nighttime" App Design

While using my iPad in bed one evening, the white backlit screen blasting my retinas with melatonin disrupting blue light, I had the thought: 

"Apps should know what time of the day it is, and how much ambient light is around me, then adjust their design to my environment."

We know people use their phones and tablets in the bed all the time. We also know it causes sleep problems

Why not take this into account in our designs? 

This idea resulted in a tweet and my friend John Lloyd suggested I mock up some examples.

So here we are.

Let's Start With Google

First up is the Google app. It's probably my most frequently used app so it seemed like a good place to start. It's also the app that inspired the tweet above. 

Google iPad app home screen 

It's minimal design uses a large amount of white space, and that space is very white.
Right in my eyeballs at 10:00pm with one lamp on. 

When my eyes would start to sting I kept thinking about the eco-friendly version of google, "Blackle", which had a black background.

The thinking was, it took more power to render the color white than it did black on a digital screen, therefore using the bootleg version of Google with a dark design would save the planet. 

But we can start with saving some eyeballs.

Google iPad app home screen - "Nighttime" concept

An app that knew the time of day could automatically switch to a darker design that was easier to use in low-light environments.

Ambient light data + time of day would = the perfect combination.

but I don't want to ask for too much.



Here is an iPad screenshot of the home screen as it currently exists.

Referencing Google's material design color library I tweaked some of the colors to be much darker.

Google iPad app results screen 

I recognize this is off brand for what Google has done in the past so they probably wouldn't execute the design in the same way, but it makes a good example of what "nighttime design" might look like. 

Here is a mock-up of the same home screen using a darker color palette. 

This simple change would decrease the harshness of the white light once the sun was down.

I'm not sure if this approach reduces the amount of blue light from a technical standpoint, but it is at the very least less intense on your eyes. 


Next is the search results screen.

Google iPad app results screen - "Nighttime" concept

This one is a little more complicated since there are text contrast needs, but a few small adjustments can have a big impact on how harsh the light is.

Again I changed the colors based on the material design library to keep it as on brand as possible. 

The only goal here was to change colors, not design or strategy. 

It's not fool proof.

I can imagine situations where the user would not want the night design and prefer to use the traditional color scheme. There would be a need for the ability to turn this functionality off in the settings section. 

Aside from that use case I think using a color palate more suited for night would be more comfortable on the end user, if not potentially a little bit healthier. 


My friend JD Graffam shared this mac app that can make changes to your screen in a similar manner. Flux »

What apps do you use at night?

Is there an app you use regularly in low light, I'd love to hear about it. 
Send  a suggestion and I'll create a night time design concept if inspiration strikes.