{"id":7527,"date":"2017-03-16T14:35:16","date_gmt":"2017-03-16T14:35:16","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7527"},"modified":"2017-03-16T14:35:16","modified_gmt":"2017-03-16T14:35:16","slug":"the-thing-about-contrast","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/the-thing-about-contrast\/","title":{"rendered":"The Thing About Contrast"},"content":{"rendered":"

When I started as a designer, fresh out of school, I thought I was ready to be a real professional. I would be creating elegant interfaces that would delight users and solve their problems. At least I thought I would.<\/p>\n

Those years in school taught me a lot. Research, project planning, teamwork, prototyping. Buckets of theory about devices and interfaces, users and stakeholders. I was clobbered over the head with important and familiar advice such as \u201cKnow the device standards!<\/em>\u201d and \u201cDesign for context!<\/em>\u201d.<\/p>\n

Visiting conferences only confirmed that my teachers were on the right track. These speakers, obviously knowledgeable in their field, touted the same sort of advice. <\/p>\n

\u201cYour users don\u2019t just sit behind a computer anymore, oh no, they use phones now! They might be sitting in a bus even!<\/em>\u201d<\/span>
\nI nodded knowingly. \u2018Yes, they might..!\u2019
\nObviously I knew this, after all, I\u2019d studied it for years! I just forgot one thing..<\/p>\n

The real world.<\/em><\/strong><\/p>\n

The generic advice of \u2018design for context\u2019 hadn\u2019t been concrete enough for me to avoid a common pitfall: Designing with low contrast<\/em>.<\/p>\n

<\/div>
<\/svg><\/div>

\"The contrast on an older or cheaper screen can play a huge factor on how your product is experienced.\"<\/p><\/span><\/blockquote>\n

Today I\u2019d like to share some of my learnings with you. I\u2019m going to talk to you about Contrast as it pertains to interface design and how incredibly important it is.<\/p>\n

The Beauty of Soft\u00a0Grey<\/h2>\n

Have you ever divided content by putting it in white overlays on a subtly grey coloured background? I know that I have. I remember the first time I presented an intricate interface, with several types of content ever so subtly divided, on a beamer. I can feel some of you cringing. That\u2019s what I did too. But it was school and that beamer was known for it\u2019s issues. So I, like others, learned to \u2018look around\u2019 the beamer issue and showed designs on my laptop instead.<\/p>\n

We tiptoed around the problem until a real world work problem popped up. A client mailed me about a design I\u2019d created for him. He was missing some design elements he\u2019d remembered seeing.<\/p>\n

\u201cI don\u2019t see the grey anywhere!\u201d He said.
\n\u201cAre you sure? I see it in the files I sent you..\u201d
\n\u201cIt isn\u2019t there!\u201d
\n\u201cCould you send me a screenshot?\u201d<\/span><\/p>\n

The screenshot looked just fine, exactly as I\u2019d designed it. So he sent me a photo taken of his screen. The grey was gone. <\/strong>His monitor was worse than mine and couldn\u2019t show the subtle difference in colours I\u2019d so painstakingly created.<\/p>\n

<\/div>
<\/svg><\/div>

I\u2019d effectively hidden meaning in the weakest link of my design without even realising it.<\/p><\/span><\/blockquote>\n

I see this trend persisting all over the community. Soft grey dividers, white boxes on grey backgrounds, light grey text. Perfect aesthetically pleasing screens that don\u2019t keep the problem of contrast in mind.<\/p>\n

When Does This\u00a0Apply?<\/h2>\n

With every digital product you design.
\nWait, let me give that statement some nuance:<\/p>\n

This applies to every single digital product that can be used or viewed by users.<\/span><\/p>\n

Better?
\nLet\u2019s break it down.<\/p>\n

Monitors<\/h3>\n

The client example above shows that even in today\u2019s world, where the average resolution is pretty good, contrast is still different per monitor.<\/p>\n

<\/div>
<\/svg><\/div>

\"You can\u2019t know for sure if your user has their monitor on the highest or lowest possible contrast setting.\"<\/p><\/span><\/blockquote>\n

You can\u2019t know for sure if your user has their monitor on the highest or lowest possible contrast setting. Maybe the brightness hurts their eyes, maybe they just never touched the settings and the original settings are kind of crap. You can\u2019t know everything, but you can keep more in mind than what you normally see.<\/p>\n

Older phones<\/h3>\n

As designers we are likely to use high-end phones that\u2019ll show us the work of our competitors in all their glory. In similar fashion we will view our own work on those devices.<\/p>\n

<\/div>
<\/svg><\/div>

\"As designers we fall in love with how our designs look on our devices. But it may not be what your users see.\"<\/p><\/span><\/blockquote>\n

Just like our users don\u2019t necessarily work with the best hardware when it comes to their big screens, they aren\u2019t likely to hold their small screens to our excessive industry standards. Users may be restricted by their finances at the time, the plan they could get, they might have a personal preference for a brand or maybe their choice of phone is simply not as much of a priority. iPhone designers may the worst offenders here (full disclosure: I am one)<\/em>. Since iPhones are bright and contrast-rich, we are lulled into the sense that all phones are similarly so. Nothing could be farther from the truth.<\/p>\n

Unless you know for a fact that your entire user base will only consist of the phone that you are using to test at that very moment \u00e1nd it need never grow beyond that user base, you need to keep in mind that the phone your app or website will be viewed on may be crappier than your own.<\/p>\n

The contrast on an older or cheaper phone can play a huge factor on how your product is experienced. So lower the brightness on your phone when testing your designs and see if it still communicates your brand and doesn\u2019t create any user experience problems.<\/p>\n

<\/div>
<\/svg><\/div>

\"The phone your app or website will be viewed on may be crappier than your own.\"<\/p><\/span><\/blockquote>\n

Sunshine<\/h3>\n

If you\u2019re lucky enough to mostly be desktop based, you might not have to keep sunshine in mind when you are designing (although it could still spill in through the window). When you are designing apps this is a much more common issue.
\n(Even here in Amsterdam, where sunshine is a rare sight to behold)<\/em> \u26c5????<\/p>\n

At Fonk<\/a> we design a lot of apps, used by a variety of quite active users. When your app is being used by a truck driver as he\u2019s picking up products at his various stops, or kids that are running around outside and using your app throughout the day, you need to make sure whatever you\u2019ve designed is viewable in their context.<\/p>\n

An Example<\/h2>\n

Let me give you an example. This is not an app comparison but meant to show the effect of low contrast design when used in the sun.<\/p>\n

\"Example<\/a>

Example shot: Found on Dribble. (If anybody can find the creator I\u2019d really love to credit\u00a0them!)<\/p><\/div>\n

I found this shot on Dribble and instantly liked it. It is soft, elegant and gives me a clear context: it has to do with location. The tilting of the map and location pin make me feel like I\u2019m \u2018in\u2019 the map. I loved it! I even saved it as inspiration. I did make note of it\u2019s very soft contrast though and decided to take it outside as a test for this post.<\/p>\n

\"In<\/a>

In the sunshine!<\/p><\/div>\n

When viewing this shot in the sunshine I could barely make out the map and much of the information on the left. There wasn\u2019t enough contrast to let me pick out what was happening where, even with my eyes scrunched up.<\/p>\n

\"Phone<\/a>

Such reflection, so\u00a0wow.<\/p><\/div>\n

By contrast (pun intended) Google Maps, although arguably a far less elegant design, is quite clear. The different elements on the map can easily be identified.<\/p>\n

\"Phone<\/a>

Someone clearly didn\u2019t fix their nails before rushing outside to test.\u00a0*cough*<\/p><\/div>\n

We also gave Apple Maps a whirl and, though less viewable than Google Maps, it did provide enough contrast to make out where we are and what is around us.<\/p>\n

Solution?<\/h2>\n

Test it. <\/em><\/strong>Before considering any design finished, test it. You don\u2019t need to create extravagant prototypes to do so. You just need to test how your design will present itself in a different context.<\/p>\n

<\/div>
<\/svg><\/div>

\"Before considering any design finished, test it.\"<\/p><\/span><\/blockquote>\n

Go outside!<\/em> You don\u2019t need to act out the entirety of the user experience if you can\u2019t, but you can open the door and go outside to see what your design looks like.<\/p>\n

Get a crappy phone to test your app on.<\/em> Have an acceptably shitty monitor around to test your website with.<\/em> Choose a mid-range device that will give you a realistic estimation of how the spectrum of users you are designing for might see it.<\/p>\n

Change your contrast and brightness settings, just to see how your design behaves. <\/em>If you aren\u2019t in the opportunity to buy the devices you\u2019d like to test on, at least try to keep them in mind.<\/p>\n

In Closing<\/h2>\n

As Interface Designers we are held to a high standard by ourselves and our community. This standard shouldn\u2019t simply be defined by what is pleasing to the eye.<\/p>\n

<\/div>
<\/svg><\/div>

\"The standard shouldn\u2019t simply be defined by what is pleasing to the eye.\"<\/p><\/span><\/blockquote>\n

Soft colouring can provide a great atmosphere in digital products. There is nothing wrong with soft grey, or blue or green or whichever colour you choose. So long as you always check if you aren\u2019t employing design traits that make your screens look beautiful, but render it less usable in different contexts or on different devices. If so, drop them or find alternative solutions.<\/p>\n

The thing about contrast is that it\u2019s remarkably easy to loose sight off, despite how much it means for the usability of our products. We need to design for understanding first, delight\u00a0second.<\/span><\/p>\n

We are creating solutions to help users of all sorts accomplish their goals. Be mindful of those users. We as designers are not the norm, if there even is such a thing.<\/p>\n

(Goodbye soft grey, I loved you..)<\/em><\/p>\n

Thank you for reading!<\/p>\n

(Sidenote: all the photos were taken by an iPhone 6s of an iPhone 6s. In reality the screens were somewhat more visible than the shots, in order to make the screens more visible I edited the \u2018screens\u2019 somewhat, giving our example shot a bit more light than the others. The differences between the apps are clearly visible.)<\/em><\/p>\n

This article was originally published on Leonie's Medium Page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

When I started as a designer, fresh out of school, I thought I was ready to be a real professional. I would be creating elegant interfaces that would delight users and solve their problems. At least I thought I would. Those years in school taught me a lot. Research, project planning, teamwork, prototyping. Buckets of theory about devices and interfaces,… Read More ￫<\/a><\/p>\n","protected":false},"author":111,"featured_media":7534,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-7527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n