Making Matters 4 - UX, UI… U-Wot?!

Chris, Will and Mathew discuss the difference between UX and UI, wireframe fidelity, and using prototypes to help sell your designs.

Will, Mathew and Chris discuss the overlap between UX and UI, how we work effectively between design fidelities.

  • What does a UI designer do?
  • How can we develop styling and interaction in tandem?
  • How can we use prototypes more effectively?
  • How can we avoid ‘big milestones’, and be more collaborative instead?

Transcript

Intro

In this episode of Making Matters we talk about the difference between UX and UI design, the ‘hows and whys’ of wireframe fidelity, and using prototypes to help sell your designs. Enjoy!

Chris

Hello once again and welcome to Making Matters! The podcast about web design, web development, and all other kinds of crazy exciting digital stuff!

My name is Chris Myhill and I’m a UX designer.

Will

My name is Will Snow, and I’m just about the start at Salesforce as a senior experience designer.

Mathew

My name is Mathew Alden, and I’m a UI designer.

Chris

New blood! New blood on the podcast!

Will

And a new role, as well!

Chris

I should probably add before we get too far into this that we are currently in a weird meeting room in the middle of an office.

Will

We haven’t broken in!

Chris

Well, YOU haven’t broken in.

Will

Some of us have broken in. *laughs*.

Chris

Yeah, so apologies in advance for any… um…

Will

Clip-clopping… Elevator noises…. Bikes being wheeled in and out. This is after hours. So I’ll try and edit out the noise as much as possible.

Chris

And we can judge you if you don’t!

Will

Please let me back! *laughs*.

Mathew

So… My role as a UI designer is mainly designing websites and apps. Predominantly the way they look.

Chris

The way they look… So, that’s interesting. I think what we want to talk about today is this distinction between UI, UX…

Will

U-Wot!?

Chris

*Laughs*. I see what you did there. And uh, just to dig into how we break all of these things apart.

Will

I think as well it’s interesting for jobs. Because I think we’ve all seen the job description UX/UI designer. Indeed, I’ve had feedback saying ‘you’re not suitable for this role because we’re looking for someone with more interface experience’. So yeah, I think really seeing the handover between UX and UI, and what ends where. It’s important, both because it’s interesting and also for the job market.

Chris

Absolutely. I think there’s a lot of confusion in the job market at the moment. So let’s start off with a bit of history.

Will

The big bang?

Chris

Yes, so just shortly after the big bang. So before the dinosaurs died, but after the big bang, there were several roles that have since been squashed together to form UX.

So you had ‘information architects’, and these guys were responsible for classifying the structure of the website or an app. The flow of information, and what goes where.

And then you had your ‘interaction designer’. This was the sort of, the wireframing-type role. The person who would define the interaction, and do very low fidelity wireframes and mockups.

And then you had the ‘UI designer’, who would, as Matt said, would be predominantly in charge of how things looked and how they’re styled. However, recently in the last few year (I guess due to salary demands and what’s trendy and what’s not) these three things have kind of been a bit confused and jumbled up into the same job description of UX designer.

Matt, we’ve talked about this before and I know you consider yourself to be a UI designer. What does that really mean?

Mathew

Like you said, it’s the way the structure is styled. But, I don’t like to think of my role as only being the way it looks. I think a UI designer should always understand the structure, and have commentary on it. It’s a really hard role to define. UI itself has many different categories, whether you’re a digital designer or a web designer… So it is kind of an amalgamation of lots of different roles under one.

Will

Could I query you with regards to structure? What do you mean by that?

Mathew

I guess I mean site structure. So what sits where on the page. Where pages it next to each other. It’s important for a UI designer not just to be given that structure to work with a UX designer to understand it. And make sure it’s going to work visually.

Chris

It’s funny because we think about all of these different roles and give them different names like ‘UI designer’ and ‘UX designer’. But I’ve always had the view that UX design as a field is extremely broad… And UI is just one slice of that big UX pie, just like how ‘information architect’ is one, and ‘interaction design’ is one too. I don’t think that UX is a singular activity. Which is why I feel that a UI designer is just as much of a UX designer as an information architect or a researcher.

Will

Absolutely. Not to go into that whole topic of ‘what is UX’, but I would suggest that my understanding of UX design would be ‘design led by they did’, instead of ‘design led by I think’. That approach, that practice - doesn’t end with a prototype.

Mathew

Yeah. When it comes to UI design if you break it apart into all of those different elements you’ll be working with, like colours, typefaces and imagery… All things that, in the end, affect the way a person uses the website. I think that speaks for itself. It’s a part of user experience.

Chris

Absolutely. Getting back to basics for a minute, and the artefacts we produce. We’re all designers. I consider us all to be designers, sitting around this table at the minute. But we do produce different things on a daily basis.

Will and I are probably more in the camp of the ‘interaction designer’. So wireframes, and more low fidelity. Mockups. But predominantly not working in colour.

Will

Absolutely.

Chris

I see the world in black and white! And sometimes certain shades of grey. *laughs*. But most of the work I do is low-fidelity. Within the world of wireframing there are lots of different approaches you can take, but mostly you’re working to that lower end of detail. You’re focusing on speed, and getting across a concept very quickly in kind of a ‘quick and dirty way’, but you’re just trying to get the point across.

Will

I think it’s important to put the horse before the cart. So, if we’re going back to user centered design principles. If we’re saying that the principle of UX is to test things and find out how the user finds our experience or product… Well, in order for testing to be viable we have to quickly build something. And what we do build has to be quick to amend. Therefore, a low-fidelity prototype is the sensible deliverable.

That’s because it’s quick to build. You know, in a day we can make quite a substantial deliverable. It’s easy to test, because it looks enough like the real thing… To an extent…. And it’s quick to amend. So I always think it’s important to remind people why we make wireframe prototypes. We don’t make them because it’s some eternal truth and that’s just ‘what we make’. We do it because it comes out of the whole principle of user centered design.

It’s the tip of the iceberg. It’s the end result of what should be a thorough process.

Chris

How… This is something I’ve always struggled with, and it’s the reason we’re talking about it today. It’s to understand where the low-fidelity point ends, and the high-fidelity point begins. Because I know a lot of UX designers (I’ll throw my hands up here) who get very precious about layout. And they like to see that translated into the UI design.

However, when you start working with styled elements, and you start increasing the level of detail, actually the layout you thought worked in the wireframe might not work in the styled up high fidelity design.

Mathew

I think this is down to process. There are different ways that people work. We’re talking here about a two stage process, where wireframes are created and they’re handed over to a UI designer to style.

I’ve worked with different UXers who go to different fidelities. I can’t say that I prefer one or the other, or appreciate a different amount of fidelity…

Chris

Do you think it’s possible for UI and UX designers to be working on a project in tandem during the early stages?

Mathew

I think this is the ideal situation. It’s a way of working that I’d like to try more of. UI design almost needs a low fidelity stage in itself. And, we all know the importance of testing. Testing this stuff on the user. There should be this ‘mesh’ where UI design is tested at a low-fidelity during the UX process, and everything slowly evolves together.

It seems crazy to hand over a low-fidelity wireframe and then the next thing you show the client is a high-fidelity design. You’ve just jumped a huge step. All of the stuff that happens in between is really important. It’s really important, and should be tested. I think during that stage, that’s where the UX and UI really cross over.

Will

So what would you say happens in that stage? Ideas for high-fidelity design?

Mathew

Yeah… I think as certain UX elements have been created, the UI design should mock those up. Starting to incorporate imagery, brand colours, look-and-feel. That needs to be tested the same way that wireframes are being tested. And then you can start adding to it. That’s when the UI designer will take a step forward and start producing high-fidelity designs.

I think that cross over period is really important.

Chris

An idea that I’ve seen work really well in the past is a ‘style tile’. There’s different names for it, but it’s essentially the idea that you’re designing components separately for an overall page layout.

Because it can be quite hard to jump in at the deep end and start doing a home page layout. There’s a lot of variables there and it’s hard to get straight into the finished article like that. But if you start looking looking at individual components on that page, like a button or a card or a link style, you can make an imaginary page made of things like that. And that’s something that, as a UI designer you can start working on that before any wireframes have even been agreed or signed off.

Mathew

And they’re elements that can potentially be tested by themselves individually, without any wireframes. I mean a button colour is a quick, simple thing to do - but is very necessary.

Chris

So when you’re testing styling, rather than interactivity, what sort of feedback are you looking for from users?

Mathew

I guess we’ve got to be a bit more careful with styling. Because people have personal opinions over what colours they like, for example. On previous projects where we’ve tested colours, they (the user) say they like one thing and not another - and it’s quite hard to find out why. It’s a lot more…

Will

Nuanced…?

Mathew

Yeah. It’s a very vague kind of thing. I think the kind of stuff we’re actually looking for is the same sorts of things we’re looking for in wireframes. How are they using it? Are they noticing things? So if we’re testing two buttons, we want to know which one they’re quicker to click on. Or are they even noticing the button? Things like that. Are they attracted to certain kinds of imagery over others?

I think it’s generally smaller, quicker tests.

Will

And I think the emotional reaction is still of value. Is that something you still want to win? I forget the term of the model, but a great product or service…. It should be useful, valuable, learnable and memorable. But at the very top, it’s got to be enjoyable to use. And I think the high-fidelity design is the one that plays on that. The emotional experience.

Something like, let’s say Citymapper… I think personally, a lot of the emotional finesse does come from the colour scheme, the typography. The little characters…

Chris

Exactly the mascot. Thinking of Mailchimp as a really good example of this, they have a great little mascot, I can’t remember his name…

Will

That’s a great pub quiz question.

Chris

*Laughs*. But he appears several times throughout the user interface, and he really adds a lot of value to the user experience. He’s total decoration. He doesn’t offer any functionality. So if you were to wireframe this experience he probably wouldn’t appear, but he does add a tremendous amount of value.

So for example, he appears in the bottom-right hand corner of the screen when you’re about to publish your newsletter. As you hover over the button, he starts sweating and looking a little bit nervous - like, ‘are you absolutely sure you want to do this?’. And then when you click it, he does a little thumbs up.

It’s really awesome, but I don’t think that awesomeness could have existed if the wireframes were not being created with whatever the UI designer wanted to do in mind. They may have even been the same person.

Mathew

Mmm. That’s why those early discussions are important.

Chris

So thinking about that example, we work in digital agencies or consultancies. Quite often we’re really trying to sell ideas into the client. We’re trying to convince them that it’s the right decision.

Using that Mailchimp example, if we were trying to sell something like that to the client and we’d already signed off the wireframe… If we tried to introduce something like that later on, it’d be really puzzling to the client. They wouldn’t know where it had come from and it would get poo-poo’d. In that event, would it have been acceptable to skip wireframes? And is it ever ok to go straight into high fidelity designs on a project?

Mathew

I’d say no. As a UI designer, I would never really want to start a project without wireframes. That doesn’t necessarily mean that I need a UX designer.

Even offline, design has always been created from a basic structure. You always look at it from the elements that need to be on the page or the poster first, and how you’re going to lay them out. I guess you’re never going to do a project without UX. You might do a project without a UX designer, but that’s not to say you don’t do those things yourself.

Will

We started talking about clients, and showing clients wireframes. Showing them high-fidelity designs. I think that’s an interesting point. Because something we do, Chris, is when playing back our UX deliverables to clients we preface it with a page that we very carefully go through.

This page sets expectations, and tells the client what they’re going to see with these wireframes or low-fidelity prototypes. We specifically call some things out. We tell them what they should and shouldn’t pay attention to.

Chris

I often get made fun of, because I actually have a script that I give every time I present wireframes.

Will

Give it one more time, here! Once more with feeling!

Chris

*Puts on a silly voice* “The thing about wireframes is you’ve really gotta focus on the content and the content and structure on the page. We’re focusing on what it is, rather than what it looks like!”

I’m going to stop doing the voice *laugh*. What we’re focusing on in a wireframe is, you know, to some extent the layout… But it’s also about interactivity. What goes on the page.

Will

…Where the user can go…

Chris

The flow of information. What we don’t want to think about at that point is styling and look-and-feel and images. And to some extent, even the copy and content that goes on the page. Because that’s the thing that we want to crack in the UI design phase, when we’re more comfortable about what the product actually is. Then we can start progressing fidelity.

The value of wireframing isn’t just agreeing usability principles. It’s also to save a bunch of time later on. And also to save a bunch of pain for other people, too. Simarialy to you, I’ve worked on a lot of project in luxury and fashion sectors. The clients are very very visual. Or at least they say they are. Therefore they won’t want to see anything that isn’t full of lovely branding and high resolution assets. The issue with that is that we you do eventually present those polished high-fidelity designs, you need to start pulling apart all of the navigation and journeys that you would have normally done in the wireframing stage. It’s much more time consuming to do that in a high-fidelity design.

Mathew

I think this is the problem with not having wireframes. And having a client that wants to see VERY high fidelity. You end up spending a lot of time pushing pixels, and when those changes happen it’s labour intensive. It takes a hell of a lot of time.

Will

Going back to how I described UX design… Perhaps the solution is to never JUST show your stakeholders and clients the wireframes in a meeting, or a slide deck. But instead, show the results of having tested the wireframes.

If you can show them just a little video reel of say, five users using the navigation and not getting lost. Or maybe getting lost, and proving the point of how you need more time to change the navigation. Then, that’ll help them understand it. They’ll know that yeah, it’s not sexy. It’s not branded. It doesn’t have the luxury design… But they can see that it’s a layout and a structure that people are using. And that’s the key I think.

Mathew

Yeah. That’s the case. Often the client will expect two deliverables. One is a wireframe, one is a high-fidelity design. It’s rare that they see all of the stuff in between, that gets you between those points. It’s that in between bit that they should be commenting on. They need to understand that this isn’t just a ‘first go’ we’re presenting them.

Chris

It always makes me think that we need to move away from these kinds of big milestones. Like, we’ve “signed off” the wireframes, let’s move onto the next bit. We’ve “signed off” the high-fidelity, let’s go into the build. Because design just doesn’t work like that. It might be that, although we’ve progressed certain elements of the experience to the point where we’re totally happy with the polished, styled-up design, there might be others where we still have no idea what we’re doing!

Mathew

And that’s about getting the client comfortable with seeing rough drafts. Sketches. And I guess you’re trying to take them on the journey with you. There as much a part of it.

Will

Yeah. I can absolutely relate. Just been doing something with McDonald’s, and part of it involved the user selecting their location. And we very quickly spoke with the developers to find out what’s feasible. Can we do geolocation? And then we went to the client - can they afford that? Is it something they want? Can we do it legally? No? OK, so what’s the best experience we CAN do?

So I quickly mocked something up and took it to the developers. And they quickly told me about something else. This is all happening on the same day. So, the more you can move away from this distinct silos, the better.

Chris

A lot of it is… I’m going to hate myself for saying it, as a freelance consultant… But um, a lot of the best work a the moment is happening in in-house teams. Because a lot of this big design milestone mentality, it comes from billing. It comes from where third party vendors need to bill at certain times, and we need to lock it down, so we’re not over delivering on what we’ve quoted for.

Will

Which is important, because we’ve all got to get paid.

Chris

Sure, but I think a lot of the agencies who are having the most success at the moment are those who can embed themselves into the client’s organisation. Rather than saying, right, we’re going to work on the UX for 3 months, sign it off, then quote for the build. Instead, they’re putting themselves in the business for say, a year. And they’re doing what they do, but throughout that time they’re part of the in-house team. Just like how companies like AirBnb, the ones who are doing really well, are working together and iterating. It’s just the way to do it.

Mathew

It’s not just at the benefit of the client either, doing it that way. It’s to the benefit of the individual, too. So that the designers are working together. The UI and UX designers are working together, rather than being handed ‘signed-off’ deliverables to colour in.

Because… What’s colouring in? We did that in primary school! The processes need to be intertwined, and you want to be helping make decisions. You want to send out that idea of having a little monkey in the corner of the page early on, rather than saving it to the end. You don’t want to be just colouring in, essentially ending up with a coloured-in wireframe. You might even end up with some very horrible surprises too.

Chris

So, we’ve talked a lot about wireframing. And we’ve talked a lot about high fidelity design. I think Will, you touched very early on the distinction between wireframing and prototyping.

I think this is an important thing to touch on, because the terms ‘wireframe’ and ‘prototype’ are often used interchangeably. But that isn’t at all what prototyping is. It’s an interactive presentation of a design. And that could be a high-fidelity design OR a wireframe.

There’s also a more um… er… I don’t know what the term is, but I think ‘delighters’ gets thrown around quite a lot. Doing little things in the user interface like animation that don’t really do anything crazy, but add a lot of value. So think about the iOS login screen. When you type in your password and get it wrong, it clears the password field, the field does a little wiggle. Like someone shaking their head. That’s a tiny animation, but it’s very important, because it communicates to the user what’s gone wrong.

Mathew

This is where UI prototyping is becoming more useful. It’s these little interactions that, aren’t just showing off how good things can look, it’s adding to the user experience. We’re seeing way more interaction design in UI, and it’s such a valuable part of the user experience. Like we’ve been saying, you can’t just leave that until the end. You have to think about these interactions early on.

I think that’s why we have a problem with something like Invision, where you can’t say, fill out a form. You give the client a two-step process where you first show them a wireframe that can be used, and you can do whatever you want…

Will

…But it’s ugly…

Mathew

But it’s ugly. And then the next thing is maybe an Invision prototype where you can’t do any of that. It’s kind of step backwards in some respects.

If we started to work in a way where we maybe break it up into little bits and pieces… and introducing UI much earlier on, then they’re not going to be surprised by that. They’ll be able to distinguish more between the look and the functionality of the page.

Chris

Weirdly I had an example of that today, actually. A client was really struggling with signing off a designing for a navigation. We were trying to figure out what this navigation bar should look like. We produced a design prototype in invision, where they could sort-of see how it would work. How the dropdowns would appear, and what they’d look like… But what it didn’t demonstrate was how you’d get from that dropdown not showing, to that dropdown being displayed.

When we moved that along a little bit to another prototype that we did using a program called ‘Protopie’ (there’s many others like it, but this one I quite like), we could show how that dropdown would slide out, how the links would very briefly fade in, that adds a bit of animation that draws your eye to them. After we were able to present it in this fidelity, with this level of animation prototype, the client suddenly understood it. They were like “Oh I get it! Let’s do it!”.

Like you said, splitting up your prototypes into smaller features and smaller interactions is often the way to go.

Mathew

Yeah, it’s much easier to work on smaller interactions too. To create an interactive prototype is really time consuming. So pick out the bits that are important, and work on those individually. It can really help to sell the UI, but also lend itself quite usefully to the UX.

Will

On that point can I ask from a very selfish perspective… One of the reasons I suggested this topic for episode 4, was that… and this goes back a bit to typography…

So, FontAwesome. I bloody love FontAwesome. I have spent untold hours looking at the FontAwesome cheat sheet for the exact icon. I’ve put it inside the button on my wireframe. I’ve given that button a lovely 2 pixel radius… Bit of a drop-shadow… Just the right shade of black… Am I completely wasting my time?

Mathew

…No. I don’t think so *laughs*. I mean, FontAwesome is awesome. I use it myself in plenty of designs.

Will

I’m fully aware that devs have well moved past it all with things like SVGs.

Mathew

Yeah, I think having a wireframe with a bit of personality in it, from the person who made it is important.

Will

But you do throw it away? *laughs*.

Mathew

*Laughs*. I will get rid of the corner radius, if necessary. But then, I’ve never worked on a wireframe where I haven’t questioned the person who created it. So, if I there’s something I want to change and it looks like it has had a lot of thought put into it, I’ll talk to the person. I’ll ask “how did you expect it to work?” or “how did you envisage this looking? Those kinds of little conversations move things forward.

Chris

It’s taking the spirit of what was done there. So, Will made a giant, high-contrast button with a drop-shadow and a picture of a spaceship on it. Clearly that’s a very important high-priority part of the UI. Therefore, when we get to styling it, we should treat it with a large degree of prominence.

….Though that doesn’t necessary mean it needs to have a drop-shadow and a spaceship on the button.

Mathew

Exactly. But it could. *laughs*.

Will

I spent so long looking for that FontAwesome space ship icon…!

Mathew

And it’s not just small button details. There are times when I look at wireframes and I see things that I think, I’ve seen something that might work better. I don’t think we UI designer should ever be afraid to raise those concerns. And go, “Hey, have you thought about doing it this way?”. Or “this is a really cool interaction I’ve seen, could we do something like this?”.

Yeah, let’s just not be scared of each other. And work together to get to that great end result.

Chris

What a lovely note. What a lovely note to end on.

Mathew

*Laughs*. Let’s not end on that….!

Chris

Alright then. I think that just about does it.

Will

Yeah, I think so.

Mathew

Thanks for having me.

Chris

Hey, anytime.

Will

Well, not anytime. Just this time. *Laughs*.

Chris

*Laughs*. Will!

Will

Hello! Goodbye! *Laughs*.

Chris

Where can the boys and girls find you on the interwebs?

Will

So I’m on twitter @willjohnsnow or willjohnsnow.com.

Mathew

You can find me offline, at my local hipster coffee shop. *Laughs*.

Chris

And you can find me @justuxdesign. Thanks very much! Bye!

Found this useful? Why not share it?

Chris Myhill, an incredibly handsome UX designer who heads up Just UX Design

Chris Myhill

Chris heads up Just UX Design with 10 years of experience creating digital products and managing design teams.

He’s worked on loads of different projects, using UX wizardry to help businesses make better products.

Learn more about Chris

← back