Interface Design Fundamentals

[00:00:00]
>> I thought I'd talk about some interface design fundamentals because I know a lot of people that are watching this course may be coming from more of the development side of things. But yeah, you think, okay, do I really wanna open that can of worms? Cuz how many years have you guys been studying interface [LAUGH] Designer, it's like, okay, we're gonna just put this, just drop this in as a part of a four hour workshop.

[00:00:26]
So it's I can't begin to cover everything that's involved in interface design, but there's a few tips I thought I'd throw out there of things that I particularly pay attention to. So consider this a starting point. And again, Steve's course on Figma for Developers, that probably has more of them in as well so you might wanna check that out.

[00:00:48]
So there's those three steps of simplicity. I just wanna mention them again, because I think they work really well. So going through everything. So often, if I'm just, I referred earlier to an existing app. But I also do this if I work on a screen in an app and I've mocked it all up, and it's all in Figma, and everything's in place.

[00:01:09]
And before I then show anyone, I go back through it and do these three steps again. I look at every element on that and say, can I remove that element? Can I hide it? Can I shrink it, right? So I almost use it as a double check for my own work cuz it's amazing how you sneak in stuff without really thinking about it.

[00:01:31]
When you're in the flow of design, you go it'd be nice to have an icon there. And then afterwards, you go, why did I put an icon there? [LAUGH] What was the point of that? So that's great. The other thing which I've mentioned before is limiting the options.

[00:01:44]
This whole thing of we can only hold 4 things in our short term memory. So limit the number of options you show at one time. So here's a list of options from a site that I worked on. So you click on the Options button and it shows that blooming big list.

[00:01:58]
Notice all the icons. And it's like [NOISE] that's quite an intimidating list, isn't it? So what I did is I did a bit of a top task analysis on it to find out which ones are those options people actually cared about. And then I redesigned it as that, right?

[00:02:18]
So the others are available, you can hit load more and it'll bring in the rest of the list. The other thing that we played with on this particular case, I don't know whether we did it on the end, whether we settled on it. But we were looking at if you previously had selected one of the options under load more, the next time you came back, that option had been moved up, right?

[00:02:38]
So that the most used ones are sitting at the top. The only problem we found with that when we did a bit of testing is that then people went the one that had been removed and put it back in the show the load more or less. People were like, where's that gone?

[00:02:53]
So it was like a kind of we I can't remember what we ended up with, but there's lots of ways I I think is what I'm saying that you can kind of, reduce the amount of overload people are seeing at any one time. So yeah, that's one a little technique that I use quite a lot.

[00:03:13]
Yes, go for it.
>> Is there a reason why it's not in alphabetical order? It's hold, duplicate, cancel is that because those are the top three?
>> It's because it was the order. Yeah, it was based on the order that they were most used. So people normally hold, that's our number one task, sometimes then they wanna duplicate it, sometimes they wanna cancel it, sometimes they wanna create return.

[00:03:41]
Now I'm not saying that's always the only way of doing it. Alphabetical almost never use because alphabetical is a completely arbitrary and not based on user behavior in any way. So in that case it's viewed in order of usage but you could, You could say if it was a process, for example, you would put it in the order of the process.

[00:04:06]
So there are lots of different ways of organizing it. Interestingly, now we're really getting into psychology, but if you've got a longer list, like the list on the left there, you don't always wanna just go in order of usage, because we zoned out after three or four options.

[00:04:29]
So and then we pick up again at the end of the list. So the least looked at stuff in that left hand list is not the stuff at the bottom of the list. It's the stuff in the middle of the list. So there's all kinds of little weird things like that that you could take into account, but that's a bit more than we're trying to get at here.

[00:04:48]
But yeah, I don't tend to use alphabetical a lot. I mean, obviously, on like tables and things like that and where you're sorting via name. You're gonna use alphabetical there, but not generally as much in menus. Yeah.
>> I noticed that you're using some maybe microcopy techniques. You're also like, okay, single word.

[00:05:10]
>> Yeah.
>> Instead of.
>> Yeah.
>> And also, I'm guessing that you've tested this all out so that you can say to the stakeholders who are like panicked that you're shorting this list.
>> Yeah.
>> Based on our testing.
>> Yeah, so I've got two things that I showed them.

[00:05:30]
First of all, I showed them the top task analysis that shows that those four items that are listed there are counted, as I remember, for something like 73% of all votes, right? Instantly, that's a good one. And then we also had some usability testing where I said, find out how to open a concern, which is something you do with why are you doing this app?

[00:05:59]
And people found, they went to the action, which was great. And then they looked down the list, saw it wasn't there, but they saw the load more and they clicked on it. So I had evidence that people were actually looking under that submenu. So the combination of those two was enough to swing them.

[00:06:16]
But it might not have worked. It might have crashed and burn. [LAUGH] In which case, that brings me on to another option I use quite a lot is chunking, right? So as you can see from that menu there, it's one massive long list. This was their side navigation.

[00:06:32]
And as you can see, it had stacks of things in it. Now, ideally I would have liked to reduce that quite considerably. But, we don't always get what we want. So what I did instead is did introduce some chunking. So I had, broke it up with sales and logistics and favorites and things like that to make it a little bit more scannable.

[00:06:56]
I'm not, and then some stuff I moved out of the it's kind of secondary stuff. We've moved out into a the lower part of the menu. I basically just visually broke it up a bit to enable scanability. I'm not a 100% happy with that but I don't wanna always show just stuff I'm really proud of because otherwise, it gives false opinions about stuff.

[00:07:17]
But yeah, that idea chunking things up works quite well.
>> You also have dumped the icons.
>> Yes.
>> Is that search field searching for a command?
>> That search is a universal search that they had in a completely different part of the interface, as is my name and those options along the top.

[00:07:35]
They had this and that's another thing. A grouping is another I think I don't even know if it's on this. But a lot of people end up with icons and functionality all over the place. And it's like, well, where am I supposed to be looking on the page to work out what I'm doing next?

[00:07:50]
And I've just poured it all together onto that side menu. So I've actually added almost more into that side menu in some ways but I've dragged it out of other places on the screen. I'm not claiming that's perfect by any means. So yeah, chunking is something I do quite a lot.

[00:08:06]
Then it's progressive disclosure. So breaking complex interactions down into steps to avoid overwhelming users. So what you're looking at on the screen on the right-hand side, there is their filter list. So as you can see, there are so many different filter options and then you expand them out and there's even more options underneath that and it's a bit overwhelming.

[00:08:31]
So what I did is I replaced it with this add filter and then you can either search on a filter but notice it's doing that thing again where I'm showing the top four and then there's load more, right? So they could either search for it, however they wanted to filter or they could look at the list and select.

[00:08:52]
And then when they selected one of those, the filter is added to the bar above and then there is the additional options that are required for that specific filter. So that's how I kind of tidied that one up by disclosing it or gradually taking them through the process rather than just going.

[00:09:11]
Here's all the information you work it out so that's something I use quite a lot. The other one I favor is good defaults. So on average users only changed the defaults 5% of the time. That's a huge sweeping figure and it will depend hugely on your situations. But it's really worth thinking carefully about your defaults for things.

[00:09:38]
So here's an example from a flight site where, they've just automatically filled in a date range that is an average for them. In terms of how far ahead it is and how long people go away. And also, it's automatically filled in the number of passengers that it's getting at.

[00:10:02]
Maybe is not the best example, but any kind of situation where you're entering a default value, whether it be a date, whether it be a number of passengers, anything like that, make sure you think carefully about what that default should be. Because it can save people a lot of time if it's a good default and they don't need to change it, especially if it's a reoccurring task that they're doing all the time, right?

[00:10:27]
So, for example, if you were doing a task app you can't put in things like what the task is. But you might put be able to automatically fill in a delivery, a due date that's a week ahead because that's when people normally set it by a week ahead by default, things like that.

[00:10:53]
There's lots of options around that. Another one is prioritizing critical content. So when you mock up screens. It can be very easy with mocking up screens for if you've got a lot of things going on for the primary actions to be lost in the noise, right? And little things in the interface can really draw attention and drag attention away.

[00:11:26]
Now, there's lots of ways that you can check that you haven't done that and in the user research and testing course, I think we looked at first click test and five-second tests and things like that. One thing I would point out, an app that I absolutely love is called Attention Insight.

[00:11:50]
And Attention Insight is an eye-tracking simulation software. The best way to think about it is it's like a spell checker for designers, right? So when you check stuff with a spell checker you don't always agree with it, especially a grammar checker. And so it doesn't always get it right, but it's quite nice to kind of get a bit of feedback and advice.

[00:12:13]
So what you do is you upload your screen and it uses thousands of hours of eye tracking study to predict where people will look on that screen. It's not perfect, but it's not bad. So for example, you'll end up with something like this. So this isn't an app unfortunately, but on the left hand side was the first mockup I did.

[00:12:35]
But you notice how by with the second by changing the eyeliner the dog I draw more attention to the primary call to action a weaker on the first one. So it's quite a good way of refining your design and making sure that your attention is going to the right places.

[00:12:51]
So I'd quite like that, it's quite a useful tool for keeping you focused.
>> Does it tell you the order in which the eye would tap into.
>> There is a view that shows that. But actually, that doesn't matter as much as you think it does. It's more where the eye settles that matters.

[00:13:10]
I mean, the moment you put a dog on that screen with any face, full stop, a human, a pet, anything. It's like a sink that pulls attention but you can kind of control where attention goes by eyelines, by having arrows pointing at things by layout. There's lots of different ways of manipulating where people look on the page.

[00:13:34]
But it's definitely worth running through a thing like this. Just as a sanity check, really.