Design Principles

Let me introduce myself; my name is Joann Eckstut. I am the co-author of *What Is Color? 50 Questions and Answers on the Science of Color*. When I'm not writing, I spend my time working as an interior designer. Today, I would like to discuss with you the transitory nature of color.

There are four primary ways in which colors appear to change or shift. Number 1: Daylight is constantly changing. So, the colors we see change constantly as well. Number 2: Changing a light source changes what colors we see. Number 3: Colors appear to change depending on what colors surround them. And Number 4: Colors that appear to match in one setting do not match in another.

Let's start with number one. Daylight is constantly changing. So, the colors we see change constantly as well. Although we don't necessarily realize it, millions of changes in light happen all throughout the day. Here, it's beautifully illustrated in this time-lapse image of the Statue of Liberty, which takes place just as the Sun sets.

You can see that even in this short period of time there are myriad changes. We could be overwhelmed by this information about constantly changing light, but our brains help us to hold steady. So, for example, when viewing the red house in this illustration, the human brain has no difficulty in seeing it as entirely one red, even though the side in the Sun looks coral and the side in the shade looks maroon.

When you isolate the colors and place them side by side, as in the two swatches here, the coral and the maroon tell a different story. Number 2: Changing a light source changes the colors we see. When we change the light source illuminating a space, the elements in the space reflect *different* wavelengths of light, causing the space and the objects in it to change their color appearance.

For example, daylight emits light evenly across the spectrum, so no particular color is emphasized, while incandescent light emphasizes reds, oranges and yellows, so objects lit in this way emphasize those tones. Fluorescents have an uneven pattern of emissions, giving objects a green or a yellow-green kind of a cast; whereas LEDs are weak in violet, blue-violet and red areas,

but peak in the orange, yellow and green range. In the example that we see here, the pencils on the left, lit in incandescent light, show the red as enhanced and the natural wood as pinker. The penicils in the middle, that are lit with LEDs, slightly neutralize all the colored pencils and the wood appears beige. The pencils on the right, that are lit with fluorescent lights,

are more muted generally and the natural wood appears a light brown. So, the source of the light determines the way colors are perceived. Number 3: Colors appear to change depending on what colors surround them. This phenomenon is known as *simultaneous contrast*. Simultaneous contrast reveals something of utmost importance: Color is not a fixed entity.

Color isn't constructed solely via particular wavelengths of light, but by a larger visual field. Simultaneous contrast can make a color look more saturated, duller, darker, lighter, or some combination thereof, depending on what color it sits next to. In the example seen here, all of the X's are printed in the same color, although they appear to change color as they are paired with different backgrounds.

In the second example, the turquoise-blue in the circle on the left and the bright lime-green in the circle on the right are actually the *same color*. I know this seems impossible at first glance, but I assure you this is true. They *appear* to be completely distinct colors only because the colors they sit next to are different. Number 4: Colors that appear to match in one setting do not in another.

Two materials can appear to be the same matching color under particular lighting, but no longer match when moved to a different light source. This called *metamerism*. For example, a blue carpet and a blue fabric swatch, as seen in this illustration, may look the same when observed in a showroom that is lit with bulbs that are close to daylight in temperature.

*However*, inside a room lit with *incandescent* bulbs, that reflect more red, the carpet may appear to have a more purple cast and no longer match the upholstery fabric as it did in the showroom. This is the bane of every designer's existence: color appearing one way in the showroom, another in the interior where it's going to be used. So, beware! This is due to the different molecular properties of the dyes – say, a vat dye versus a pigment dye –

and the different molecular properties of the fibers – say, a wool versus a nylon. So, now that you are aware of how ephemeral color can be, you will be prepared to work with it.

In the very beginning, when I first started  becoming a designer, which was the 1980s, I was concerned about the early adoption of computer systems which were really almost impossible for anybody to understand. Even the experts who designed them were making errors in using them. And there's a famous case where the early Unix  systems had a text editor

that was called 'Ed', for 'editor'. You could type away and type your program  or your text, whatever you were doing, and spend several hours typing it. And you'd have this wonderful document. And then you (say), 'Ah, I'm finished!' and you turn off the machine and go home. And you come back the next morning to continue, and... it wasn't there. Well, why wasn't it there? Because you *didn't save* it. And, well, you mean... The system doesn't bother to tell you when you try to turn it off that 'Hey – you want to save the information?'

It was little things like that that were so frustrating. In the early days, what we did was we tried to study the people who used these complex systems. And it was not just computer systems; I actually started off studying *nuclear power systems*, some of the nuclear power accidents where the control rooms were so badly designed that if you wanted to cause an error, you could not have done a better job in designing something to cause errors. And then *aviation safety*,  where lives were at stake; many lives were at stake, and there were a huge amount of research and work done.

And that was a really good place to work. I worked with the American National Aeronautics and Space Administration (NASA). Most people think of NASA as shooting rockets up into space, but they forget the first two letters, 'NA', are 'Aeronautics'; and so, NASA is the world's leader often  in aviation safety. And that's where I started. So, we were looking, though, at the *users* of these systems, and so we called them 'users'.

Let's look at the mobile UX design checklist. This is a checklist that you want to internalize and keep in your head as you're designing. First of all is – are you making sure that your controls are *consistent*, to the operating system and to the application that you're developing? The second one is *proximity* – that closeness of items mean that those items are in relationship. So, the grouping, for example, like that means that these items are the same and the pattern there  

is the 'OK / Cancel', for example. The third one is *visual hierarchy*. So, visual hierarchy is a concept from graphic design that says put the most important thing at the top and bring it down to the bottom. Generally, visual hierarchy is a reminder to put the important tasks up front on your screens,

and so the user doesn't have to navigate, doesn't have to play and look for them. And the fourth thing on the mobile UX design  checklist is *contrast*. Contrast and emphasis – that's a graphic design issue. If you're using very light colors, if you're using light gray. I mean, go outside and test your design in the sun. Go out, go into a dark place and test your design – see what it looks like. Turn your brightness down. I've interviewed users who actually use their mobile phones with the brightness turned to the minimum – I could barely see the phone.

And I said to this user, "Can you turn your brightness up?" because I was actually videotaping and trying   to get the phone in. He said, "No, I normally keep it down there just to save battery." So, what does your design look like on a low lighting, you know, where the user has deliberately turned the lighting down? That's another thing to test and make sure that  it works for the eye but works for the lighting situation. And then, the fifth one on the checklist  is *intuitive icons*. To me, if icons are not intuitive, then there's a problem with them – they're not usable.

So, when we say 'intuitive', it means no understanding – a user should look at an icon and know what it does. Otherwise, the icon maybe shouldn't be there; it shouldn't be used. That's my general rule of icon usability. And that applies to desktop as well. And then, finally, on our checklist – not to be missed – is *making the main task apparent*. That is huge and crucial – that's our task-oriented design approach. If you take one thing away from this checklist, it's that sixth element there

as one of your most important ones. So, let's go through some examples of these, then – *the consistency of controls*. So, you see here in this example, you have all the options side by side there. The in-call screen is a good one in the sense that you have this action, it's occurring – you know – it's a live call,

so how do you present and display the information? And these guys have decided to go with consistency – all the controls and the icons are the same size and the same positioning. That does make it easier to see. But it's not necessarily the right answer from a layout perspective. You could exaggerate one of those items, for  example. Conference calls doesn't have the same priority as mute does for me.

To me, I'm muting more than I'm conferencing, for example. So, we can see some 'at a glance' data and call to actions as well in this example. So, the second one on the checklist is  *proximity of controls*. You'll see proximity being used here. This is an iPad app – it's an EMR system, Electronic Medical Record. And the proximity we're seeing here is that

the grouping of that clinical information as buttons is all together, the vitals at the top and the patient history down at the bottom. You also have use of the left channel. Notice the left channel. Those buttons are huge because they're used when the patient is being interviewed, so the physician or the nurse needs to tap those very quickly and enter that data as part of the intake so they can get on with the exam.

Here are some different examples of visual hierarchy at use. You have the Yelp app on the left. And notice the the reviews, really important, at the top, right, so you can see the name of the – I think it's a pub, and the reviews, and then more information further down the page. The second app is from Open Table. Again, content first, so the name of the location and then the call to action is actually further down the page,

from the perspective of being able to easily tap those in that tappable area. And, of course, on the third example we've got the task up front and the main important things – prices and performance being one of the key tasks. It's like right there. Some other features further down is they've decided to go with a strict visual hierarchy: the important stuff at the top and then further down. So, our fourth item on the checklist is *using  colors for emphasis*.

So, remember we talked about making navigation *pop*. So, you see some examples here of – the Fandango app is where you can see you're looking at the 'in theaters', and the other one here, the other app, you can see that you're on 'what's popular'. Even though the contrast is a little light there, the color is still highlighted nicely in the icon at the bottom on all three of these apps, so that at a glance you can tell where you are, what you're looking at,

and be able to pivot from there. So, our fifth one is *intuitive icons*. Some  examples here: GasBuddy is one of my favorite   ones because it's task-oriented and the icon is actually used as the starting point. So, 'find gas stations near me', which is almost what you would say to Siri on an iPhone as well. So, that's a nice clever interlink between the app and the command, the way you think about it linguistically, but notice it's like very clear: the icons are not overdone.

All these examples have really nice clean icons. The second screen is when you go into GasBuddy – that's a list of results. And then the gas stations that appear  again with a nice visual intuitive icon there. And then, finally, *make the task apparent*. And so, making the task apparent is – the challenge there is that you don't want navigation, so you want to keep the user focused

on the *content*, you want to keep them focused on the *flow* of their experience. And this is a case where a pie menu can be very helpful or those contextual menus to know what the task is. A pie menu, by the way, is a left-click item, so it's not a right-click – it's a left, a left tap, if you will. And it brings up your options, your task options on a wheel and allows the user to navigate.