Internet DNA Podcast
Ever tried to learn design as a non designer? How do designers get it right? A dissection of what it is that comes naturally to designers that makes that difference to the UI of a website from pattern libraries and style guides, to balance and rhythm of the gestalt theory. How contrast may be more important than colour and no any old photo won't do - oh and our usual moan at the UI of Netflix.
Transcription
(this transcription is written by robots… so don’t be surprised!)
Welcome Internet DNA with me Abby this week as we move into the summer months, which is lovely. We're going to discuss UI or user interface and see, the thing is Abby does this all the time, even in her sleep, but Dan's done a course and he keeps saying that there is lots of laws and rules.
Oh I know. I know those rules cause that would be unfair, but a guidelines creates if you can bend the rules and do all sorts of crazy things, but if you're not like me, then they really help when you're developing UI to help you not make mistakes. Let's put it that way.
Well I thought the conversation of these rules or guidelines would be interesting to see whether as a UI designer, I don't even know them as these anymore there just to learn sixth sense and it'd be interesting to see if I got, oh yeah, of course. Let's do that. I hadn't really thought about it, which is probably true when you've been a UI designer for how old am I? 20 years or so, 25 years. How old do I have? I'd like to be that out. It's how long, how long I've been a UI designer, so let's have a conversation and see what is embedded in my design and what maybe I could learn.
Yeah. I guess one of the really interesting things that I picked up from it is that contrast makes more of a difference than color and that it just seems so counter intuitive to me because you think, oh, that's a bright orange button, all that stuff, and you think it's the orange. But within the course they did this really interesting thing, which is they turned a lot of interfaces to gray scale and they looked at whether the order or the dominance of elements changed because of the color. And so I found that really interesting that actually the contrast made a bigger difference than color did. That you can take the color away on on good UI, you can still see which buttons were there. And obviously that leads into things like people who are color blind and that sort of thing, so that you make sure that your UI works without color. And then even the fact that maybe people don't register colors in the same way won't affect the usability of your UI?
Well, so when I design, obviously if there's a brand and a brand often has two main colors and depending what they always say to a client, really I like two colors and a highlight. Yeah. My highlight is the equivalent of your contrast in color. So I've got two colors that may balance each other, there'll be different and they will therefore, so I'm posted information in different ways, but when I need to go and here is where I want you to go as a user, that's where I would use the highlight. And it does work in that similar way. Number one, I do it.
Yeah. So he showed that, but he showed me something where he had a bright orange button, but there was actually a darker element. And the weird thing was is that your eye, despite orange was
constantly drawn away by this darker element because the contrast was higher with the white. And it was quite interesting. I mean he did a lot of examples of you think it's color and good designers do this automatically because they automatically make sure that the contrast, even of the highlight color is more than the surrounding elements. But he said it's quite easy, especially if you're like me and not a designer to think, oh that bright orange is great. Okay. No, when I say highlight color, it does. It's not necessarily red grade orange, it's just something that contrast. And also I think a lot in color, I use balance. So if I want my highlight stand out, then it would have perhaps white space or the lower contrast had color around it, which gives it that strong oof than other areas where I may need it to be softer. I may want you to look at a couple of examples where I'd use the colors as balancing and that's where the contrast would be less.
Yeah. And so one of the things he showed his email, but I know it was the whole suite and the fact that they use color extremely sparingly, and when they do, it's always in a darker color. So even if you gray scale it, you can still see what are the buttons they want you to press, what are the things that you're meant to have your eye drawn to, and he went through a whole bunch of Uis to show when this is done properly.
That's how it works. So I guess the final test would be kind of dog still see it. They see the gray scale all the time. I'm going to get my that Russ like it right [inaudible] today I found that
really interesting and he did a really interesting thing of how you can choose colors by either through obviously choosing brand colors or by choosing associated imagery, which was really interesting where he would take a photo and he would pick like a shadow, a mid tone and a low light. And then as the sort of standout color, he would pick another one out of a photograph that was associated with what you're talking about. You did one with all the volumes, which I thought was really interesting because I think his thing was you should only ever use color if you're not a designer. Don't go crazy with colors. I thought that was about to say, but his real thing was used color when it's needed.
Let's get back to the photo saying then yes, that's great. If you're not picking the colors from the photos because you have brand colors, then your photos, do other people see it or notice it? They need to complement those brand colors so they may need to have a little bit of a, a bluish tinge or or whatever it is. Now, the quick and fast, the cheap and easy way of doing it. Of course, it's just whacking a color overlay, which I feel is very overused. If in doubt, stick a color overlay and everything's fine. So that's the very quick way to do it. But the better way to do it is to compliment the colors of the imagery with the colors of the page furniture, the text that the buttons, that sort of thing, without making it hugely obvious. But then if you put in a different image it jaws or I can tell that it jars and that's a lot of the time when I might be choosing imagery for a client and they go look at the photo library and say well I don't like that one. I want to put this one in. And to me I'm like that jars, we can't use that one because it doesn't sit calmly. It makes me chuck, which isn't good for a smooth user experience
and if you don't want people jerking cause in somebody's constances you might want people jerking,
but I hope they were jacking because of an action that I had created.
Yeah. Or if the brand is quite jerky for example, so if you might use a lime green if it's sort of, I dunno, sporty or that kind of thing, whereas you wouldn't use that kind of color in a lawyers
lime green in the imagery and then suddenly you decide to put it in next, it goes quite well with it. Something that doesn't go with it or something that doesn't contrast with it. Then you're jerking. I don't mind if it's really bright and in your face and everything's really bright and in your face, but then let's say you had a pretty insipid image that would stand out because that wasn't brighten in your face. So whatever color, however vibrant or calm you're trying to be, the imagery and then the graphical coloring all need to be at one with each other. No, in a, Oh, it's all going to be the same. But in that they work together. Again, going back to your contrast and how the eye is perceived and not wrongly drawing attention away from where you're trying to put them.
Exactly. He actually said choosing photographs is really important, but that's out of the scope of this because you got to pay for the next level. Well, no, I do that. But like, you know, that's a whole world unto itself as to, you know, when people say an image conveys a thousand words, you gotta be very careful about the words you're conveying with an image.
I, as you know, I'm an abstract artist as well. Yeah. My paintings, my prints are incredibly bright, bold, colorful, and I'm a designer so I worked with color all the time. But I have to say color is a very difficult thing to get right. To be someone that automatically gets color is quite rare. It's not an easy thing. And sometimes even I've been like, okay, I gotta think about this, I've got to Redo it. There's something not quite right about the color. It's not, uh, it comes naturally to very few people, other people actually, it's very difficult to get those colors. As you're saying. They're contrasting the balance is the same as the opposites.
You said one other really interesting thing. Well, I mean, so lots of things. I've got these sort of 20 mantra, but um, we won't go through them all. But one of the things that he said that was really interesting is every force evolves form. So what he was talking about is that when you're designing a UI, it's not just experiment in space. Everything that your every aspect of working on something even including like office politics because some people will be very forceful about their, I had a really interesting conversation the other day about having a meeting moderator but that's a different subject.
So you had talking about Fullman force, did you say?
Well it's the line is every force evolves for you don't design in an abstract bottle actually. Yeah. Well you can't just sit in a darkened room and design something. Actually there are going to be people who are going to interact with it. There are going to be functionalities that interact with it. There are going to be,
so it's a unit on its own or out half dry. Yeah.
Your design process has to adjust to the environment to accommodate those forces and I thought that was really interesting because I'm doing this as a part of a process to create a standard UI but non designed but standard UI for the company because we built a lot. Yeah. So basically I'm using a Brad for US atomic design principles. So you designed atoms and then you put them together as molecules and then they become organisms and then you put those together and that creates pages
and if you program them into libraries you can actually take library elements and stick them in and head. Always the same. So but explain what sort of force an example of a force that would make the form in our world, in the web world.
Okay, so you might find somebody, you might find that in your office you have somebody who is very opinionated about something and that you have to basically work around or with them. You know in my company obviously it's quite a big company and there are lots of voices all with very different requirements. Actually I think more than anything out. So you know some people need are looking at revenue points and some people are looking at content points and some people are looking at, they run an events, they've got to work around how do we do this and how do we evolve as natural journey that all the people can sign up too. Because it'd be quite easy for me to go, well, I can easily build this and the media sales department will be happy as Larry, but editorial we'll be like, well what? Why is there all this stuff?
Do you see what I mean? And so all these different forces evolve in the form and including, you know, we do a whole range of things from small business sites all the way through to investment sites and technology sites and they all, I have a very different voice in fact. And so they're developing the UI, this block UI in sketch, which is this is what a button looks like, this is what a secondary button that this is how these work. Because you can create libraries and sketch. So you can say, right, I'm going to add in the AIAA color Palette from the design team and the typography and then you can apply that to your UI and it should all click through and you can,
yeah. But would you say then a brand and identity is a force that influences the form, which is why too many templated pre templated or creed themed websites don't work. Because it's just not taking into any consideration of the force that is the business is trying to represent. I think
that's exactly what happens, which is people see a template and they think, oh looks amazing and they get it and then they put it for their company and then they put their company images and then their company texts in and they actually looks fairly tawdry and the reason is is because it wasn't designed for them. It looks nice. I mean this is one of the things I'm trying to get away from in the company, which is people looking at designs as a way of building. This is why I'm sort of doing this building, which is to say if we can agree a UI, then the designers jobs are much easier and then we're actually going to not be arguing about the size of buttons and what a signup form looks like and we're actually going to be talking about does this flow properly, are the right things put to the front? Are the revenue generators clearly if signposts is the journey signposted correctly rather than, Oh, I'm not sure if I like to just see what I mean because that's the thing in the process at the moment, the design part of the process is taking way too long and we do lots,
but you're trying to produce is not a UI is the UI guidelines. I believe that Google have material design. It's not an actual UI.
That's a lot actually. Yeah,
it's the guideline because otherwise every small business brand that you have, the forest isn't going to be right if you're all using the same UI. But if you can give them guidelines as to how to create their UI, then at least they will all feel of the same family. And I think that's so important and something missed as well is the understanding of a design can look different, but it can also look like it's part of a family just like children that different, but they look part of the family and that's really important in publishes and now where there are a lot of brands under one umbrella. Obviously if they're a brand in its own right, that's irrelevant but in a lot of cases you need them to feel, yeah, you're going to get the same quality, the same service that you get from all.
Okay. When you go through Google's guidelines, cause I've actually been going through them a lot, they have this thing where they have 12 themes that they've given to all use the UI guidelines and it's amazing to see how it changes what are effectively standard elements and that's why I found that really, really interesting because you're not changing very much. They're changing some typographic, they're changing some padding allowances and they're changing some color schemes and how things are put together so they don't change the atoms, but they do sometimes change the molecules and therefore they change the organisms and so it's amazing how if you think from a programming point of view, if you can program the atoms and they don't ever change, then what you're really doing is coming up with innovative ways of using that to get the journey that you're wanting for your, for different unit. What you want people to do in Gmail is very different to what you want them to do. In Google maps just uses the same underlining guidelines, the same structural elements underneath it. So it's actually really
well. So in design there is a thought or best analogy that says if you have parameters, then trying to work within those structures, you get a better and more creative design then if you can do whatever you want. Yeah. And it's the very fact that you have to work to what is there. This is the force and form thing. It's a very fat that you have to work to what is there that enables you to create creative outcomes. Whereas if it's just, again, going back to your in the middle of space, yeah, you're not challenged, you're not pushed against anything. So actually the creativity and the design doesn't get as challenged and isn't just good.
No, I totally agree. And I think that's why a lot of websites look boring because you can tell, well tell necessarily, but you can see they've come from a scene, they've had new stuff put in them and actually what made that seem to stand out to you have been removed because a lot of it is the photography and the words that they use that aren't relevant to your business and so you'd couldn't put them in and therefore suddenly the site, that image doesn't work. Now was that site and, and I've found that really interesting. He actually starts off with this thing which is from the original 54 pieces of Lego, you can build virtually anything the bricks or Lego don't change. What it does is it frees you up to be creative because you're not having to think about building the bits of lego cause they're already built correctly.
Yeah. So it's been really, really interesting from a non designer who's doing it from a very technical point of view, basically to make sure that our developers have a library of items that when the designers say this is it, it's literally a case of putting them together and styling them correctly. That's been a really interesting process. What's really done is I sit on websites now and I'm like, God, that's really stupid. I do a lot with commerce and one of the things that they've got on there is I do a bulk apply, but when you do the bulk apply two button next to is so great out that you almost forget that it's there and often I change it thinking, oh, it must be one of those javascript. You change it and it will change because you have to have everything selected that you want to change. You're ready. Yeah. There's a part of you that thinks when I changed that to that status, it's going to do it, but actually next year is a really great out button that looks like it's not really anything to be doing with it. It's made me really aware of poor UI or UI elements that really annoy me. I'd actually, the one that really annoys me is not even anything to do with the web. It's pool balls on push doors winds me up
like we don't talk measure. I can't open any door like that without going through all the red ones first. Even if I've been to that dog for the last two years, I still get it wrong.
And what happens is that that pool bog gets broken because people yank it thinking it's a bit, but it's actually pushed and all you needed. There was a push plate, which is universal push.
I find the UI of both Netflix and Amazon prime and I can never remember which is worse, but I find them impossible to use. They do that on purpose. I am sure there's some really great things that I want to watch and I just can't find and I can't get to categories cause it's all categories that they've decided that my daughters what does something really obscure and now they think that I only want to watch things with princesses and
which is probably true. But um, I think that purposefully obscure because I think they're trying to force you to choose the things that they want you to watch because you know, things like where's my watch list? Well yeah, like watch list is the thing that should be literally just like where have you hit it? My watch list, all I'm trying to come to see is are there new series, I mean my watch list, I don't want to be told that you've got some new thing that's not at all in those sort of things that I'm interested in or may vaguely be, but actually not.
And at the top one of them says my videos and then it says movies as a UK person. That's sort of the same thing.
Yeah. And also I never really understand what they mean by it either
because you still can't find your watch list. So any other good things that this guy has told you or should we bring those in another time when you've had more?
Well, I'll give you just a little 30 seconds. One of the things that simpler is almost better. And one of the things he does when he's actually talking about data visualization at this point, so he showed a graph, I mean it was obviously a bad graph 3d and Dah, Dah, Dah. But he literally just removed everything from, it, literally removed everything from it. The grid lines, the points, the keys down the side and literally left you with basically a simple bar graph with just Xer if data's so the bar that we were really interested in, which in this case was the highest sales at that point, was just a darker color. So you were pulled to it and because he had put the numbers into the actual bar, you didn't need all the scaling down the left and the bars across it. And it was just so simple.
And it looks so elegant. Once he had finished it and literally all he had done is say, well, we don't need that 3d word art nonsense. We don't need this. We don't need the key because the keys already in the bog are off because we know what it's about. We don't need this, we don't need these lines, we don't need these axes, we don't need this. And actually all we need to do is pull that one forward and show the numbers on it. And it was amazing to see how just removing stuff, getting everything, some space made it visually.
I haven't actually, I did that very exercise in a infographic I was doing just recently and just had a few lines left and then they was degrading to it. So I actually just Grady anted the background of the box, not even trying to sort of gradient the curve in the chart itself. So it was really calm, really clean. You can see where you're going, but every designer should have that lesson. It's almost part of a critique with a tutor who you respect to go through and go, right, what's this? When it still worked without it. So worried about this, will it still work without this and do exactly the same on a website, on a wireframe, on anything that you're working on as, it's a really, really important lesson because again, as a designer, if you are not thinking about the UX and if you're not trained and well versed and that side of things and the fact that users are going to be using it, it becomes slightly like a piece of art. But like a canvas that this just looks nice. I'm putting it, this just looks like, and yes it does look nice, but when someone's in a hurry and they're trying to buy a ticket, that's not the important.
Yeah, and especially when you're trying to understand data. If it's going to take you a while to work out what the hell's going on, that's not very well presented. So the one of the key things he was talking about is understand what you're trying to show in that data and show it and don't let anything else clutter the message of what you're trying to show. And if you have to do that in two simple graphs rather than one complicated, not very easily understandable growth, that is the better way to do it. So yeah, it was just very interesting. I mean the whole course was very interesting.
Okay. Have you finished or are you close? Do you have finished, I mean one thing I think is important for a designer and perhaps even as what separates design from art is spacial awareness and balance. Yeah. And it's the what's not there that helps you read and follow and act on what is there. And to me that layout and the balance and space between and around the layout is what makes the design stand out as a good design and a usable design or a good usable design.
Yeah. The conversation we were talking about at the top of a page and someone said, I want an ad in there. And I was like, well, we'll put the ad below and then I need it higher up. And so I put it in and to show him that what that did was separated two very related elements and then made them just seem like random elements sitting on a page. And so it was quite interesting to show that proximity of those items together actually is what makes them understandable. Cause if you separate them apart, they just are two random things that you can't really understand why they're there on the page. It's things like that that I've been really interested in. I've been using things like rhythm, which was another thing, but this rhythm where he said you should be able to tap it out, but Duh, Duh Duh Duh Duh Duh Duh Duh Duh Duh through a site. And that rhythm helps you understand that these things are together, these things are together, these things are together.
I think that's called the good stouts theory. Yeah, and again, it's something that I do and didn't know it had a name, but it's very much this balance and symmetry and rhythm. I think rhythm is a wonderful word for, again, it's like those photographs we talked about jarring with the color. If the reason's not there, it will jar and if you are not ready to touch the button because you needed this, this, this, and now touch whether it's for full time,
anytime. If you change the rhythm, then people automatically will think that that's a different thing to say. Like if these four items are the same item, they should have the same rhythm and if we put this item here, it has a different rhythm, the brain will all
traumatically know. That is a different thing because it has a different rhythm and if it's not a different thing, you're in trouble. It was very interesting to send you an article about the gestalt theory in design and I think you'll really like it. It's along that rhythm line and it's very clever and very informative. If it's not something that you're used to doing,
I will find, I think we should. I'll see you next week. Goodbye.
—
Dan & Abi work, talk & dream in tech. If you would like to discuss any speaking opportunity contact us.