 Thanks very much for your time tonight, and I appreciate being invited up to speak to you about this topic It's someone that's very close to our hearts a video is a branding and digital agency based in Canberra and For us user interface design is kind of caught up to what makes a good website a good website basically It's a really big topic. So I'm going to try to Whiz through it and I've missed out lots of stuff, but we'll just see how we go So what is your idea? It's a it's something that's often shortened down to to user interface design is shortened down quite often Do you idea another thing that you're going to hear a lot about is you x which is user experience our personal opinion? Is that the two are so heavily intertwined, but? It's technically speaking user interface design is the design of websites routes with focus centred on the user experience Coupled with an understanding of actions or goals that we want to use it of make and that's really the key to the whole thing when we're Making a design of a website when we're really kind of crafting someone's experience online We need to we need to really be able to understand what the user wants We need to understand what we want to do put the do together and that kind of turns into you ID It's a critical component of making a truly effective website or app and to kind of extend on that It's actually a really effective element of Making a really critical component of making an effective Anything that a user needs to interact with I'm talking physical stuff as well as software stuff This is still designed by by someone that needs to kind of is it still interface that I need to to explore And if it's been poorly designed, it's going to be hard for me to work it out So your idea in UX are best friends This is my personal if the technical kind of definition of it isn't quite that but without really understanding How the experience and the design mixed together? How can we possibly? Expect users to get the most out of a website and how can we truly expect to make a website that is going to engage People and get them to do what we want them to do the experience is intrinsic to the design They can't be separated So for us, I'm kind of pitching to you that I from now on call them the same thing Why is it important? Because the information landscape is really crowded. There's more websites than ever before every day we Compounded by information people want our attention all of the time People's attention spend is now measured in seconds online. In fact, we have internally what we call an eight second rule on Websites that's measured by the bounce rate across all the websites that we currently manage about 400 and something sites Currently internally that we manage on a regular basis on a daily basis. We monitor them bounce rate has reduced year-on-year By about one and a half seconds a year We're sitting about eight seconds now I if people don't find what they're looking for Within eight seconds of getting to your home page or the landing page from search shirts engine. They leave So if your user experience of your new ID your user interface design Isn't something that's engaging them in eight seconds. You lost them It's important. It's really important. In fact, it's kind of critical to your online success So what's involved enough tried to break it down into kind of some of the steps that we do This actually heaps more involved, but I'm not sure if I can cover them all So I'm just gonna cover the bits and pieces that we're gonna get through some of the specifics step one know what you want and What your user wants and stick them both together. This is really really important your goals should be Your users goals and vice versa that we need to understand clearly how many clients come to us I can't tell you but it that come in sort of so we need a website We need to kind of do this we kind of have this wishy-washy sort of Idea of the type of goal that we're trying to get or we've got 49 different goals that we're trying to get and the website has to cater to all of them equally We can't piss off the CEO. We can't piss off the CFO. We can't piss off this guy But they just make it do everything really really well in eight seconds. It's impossible. So we need to clearly understand Okay, can you articulate to me what your site has to do like really clearly and do you can you clearly tell me what your user Wants, can you actually just tell me what does your typical customer want if you can't answer those questions? That's the first step of this process. Let's sit down and research it Let's have in one-on-one interview call your client call your stakeholder and say hey How do you want to engage with me in the best way? What's the fastest way that we can make this happen? What's the easiest way to make this happen? You'll be surprised at the answers that you get your users are very intelligent There's been this weird misnomer that's been pushed down people's throats for a long time that the consumer is stupid Well, the consumer is you and me and all of us. We are consumers. They're not stupid. We're highly intelligent Very skeptical of most like dodgy scammy sort of stuff They're not going to jump through hoops They're going to download your free report to get the free thing to do the unless they feel there's genuine value there These are all things that we know because we do it all the time and yet we don't follow through on So you really need to understand your user. That's your first step and you got to know clearly who you are step two the web is full of patterns and It's usually better not to reinvent the wheel and to suggest to say that Talking about some of this stuff design conventions are kind of informal rules that have just appeared over time They just kind of happen Someone had to invent the wheel at some point fair enough But what has happened is that people have seen that that's worked and then kind of stuck with it And we've ended up with these strange patterns that just exist all the time most people I think we'll get what that means what that means or what the little gear icon means or Because you've seen it before you know what that means you've seen this even though this is Insanity in my opinion, but you know what that is now that we call that the hamburger menu But it's it's a button to get you to a menu. Do most people recognize that straight away It's a something that's just come up because I think my gut instinct is that someone drew it on a wire frame One day and said oh, and there's we need a button that will take people to a menu Well, that's the shortest and smallest way that I can explain what a menu might look like from really far over zoom out So that's it. So but these have become design conventions So when you're starting to work through the designs of your application and you start to say oh, no I need a special button and it should really look like a fern that does this thing because that's what we sell We sell ferns with little fairies on them or whatever. Well, I don't think people can understand what that icon is gonna Do right so user conventions use those design conventions don't reinvent the wheel unless You've got something really special. So there's my little asterisk to say actually sometimes it's worth reinventing the wheel, but Do it with with utmost caution Consistency consistency consistency. This is a big deal and I'll kind of harbor on it People if you do something one way or once I don't suddenly change the rules It's a really big deal the amount of times where you go on a website and the menu is here And then you press on a button and now the menu is here and then suddenly the word is here And you usually you used to the contact button is here but not on that page actually the contact buttons down here and that stuff Really breaks the flow of the website and guess what happens in your eight seconds by the way Gone they can't find what they want. They get confused. They get frustrated. It doesn't work It's really really important the more users expectations prove right the more they will feel in control of the system and the more they will like it Jacob Nielsen is a very very clever marketing guru and usability expert and It's absolutely true once you start getting the use of this the system and you understand Where to find stuff? There's a sense of empowerment that the user gets and they get comfortable And they feel smart and they feel like they can find stuff and they'll come back to you And they'll refer you and they'll you'll become the website of choice It's very very important Proximity this is a bit of a rule that we use in our user interface design Methodology internally, but group things that make sense to be near each other IE in Gmail Proximity principles refer to the gripping related information if your Got lots of actions that kind of make sense. This is the bottom of the Gmail Letter when if you get an email you can archive your email you can report the spam or you can delete it They're all actions that make sense to an action that that that to you that you make to that email So it makes sense to put them all together. Don't put them far away Don't put them in places that don't make sense to people. It doesn't make any sense. It's very hard Can anyone tell me how to change your name in Facebook in the app? It's really crazy hard You have to press on the settings button in the top right corner go through three different menu items And then you'll see a field that says change name you press on the change name And then you can get to change the name in LinkedIn. There's a button with a little arrow next to it next to your name And you just press that button and you can change your name. That's it So having things close to where you think the user action might actually occur Is a no brainer most of this stuff by the way is no brainer stuff when you hear it you go Yeah, that makes lots of sense Great the reality is that most people do it wrong. So these are kind of some of these the rules Feedback feedbacks a big one and it helps people feel like they know what the hell is going on Tell the user what's going on or if something is wrong Tell them where they're up to in the process that you want them to go through Tell them if something hasn't happened the upload failed or you've got the form how many times have you submitted a form? And it just disappears And you kind of did they get the form did I get it? Do I get an email at least did something happen? So maybe I'll submit it again. I don't know. Maybe I don't maybe this bit scamming me and maybe this is actually a phishing was Feedback is really important because it gives people the sense of Something is working that makes them feel smart and makes them feel like they're on a legitimate website and meals like the stuff is happening So it's really really important to get that right If we can confirm that they're actually have led to the right result, you're doing you I correct Speak user this is mostly going to my government friends, but Speak in the user's language, which might not very well be the language of lots of acronyms and lots of weird Internals strange ways to label something if you're in an industry that uses a lot of acronyms or uses very specific technical language don't Assume that your customer consumer Stakeholder Understands what the hell any of that means More than likely they don't more than likely people to speak in a conversational way Typically like they would to anybody else that they speak to so even though you might be selling something heavily technical Okay, there's a room and there's place for that but make sure that the language that you're using is the language of the user It's really really important if you think every pixel every icon every typeface matters Then you also have to believe that every letter matters that also comes to the core of content user interface design is often kind of lumped into this idea of Designing the way a site looks but we're also talking about the way the site works and feels and it's the experience that you're Crafting so if you work in a very specific consumer market, and you're selling say I Don't know cleaning services, right? And we want them to just call us Ultimately we want someone to just call me Okay, well then that's gonna shape the way that we design a website should be pretty clear The language should be pretty clear what we expect them to do should be pretty good The content has to be critically aligned to what the goal of the site is same in government same in Non-for-profit same in B2B Whatever it might be people forget that the content That is the bit that all the design kind of goes around. It's the most important bit Get it wrong and no amount of user interface design will save your website because if your content sucks It sucks. That's it. I can't fix that Okay You've got to embrace change and experiment. It's really really important not everyone will get it right This is my rinse and repeat ultimately you're gonna design it you're gonna make it you got to do it You got it so many people build a website and go cool. I've done the website tick Finished it. I'm moving on. I'm never gonna look at it again for four years The budget's gone anyway, and it's finished and and what will happen is that hey, guess what your website will look like in four years piece of Really bad website design because the the internet has moved on quite frankly It'll probably move on in six months if you're not constantly reiterating and touching on your website and making it better and Talking to your consumers and talking about you what's going on in your marketplace You will be out there. You will be left behind the website is a growing constantly evolving thing. So Make sure that you do that make sure you experiment with stuff Try something new see if it works if it doesn't work. Don't worry about it. It's not you're not putting a book It's not like you only get one chance to get this right and then it has to go out and you can never change it again You can change it tomorrow you change it ten times tomorrow and it's fine And it's quite acceptable and you should and most people don't embrace that huge amount of power that they have over this publishing means you've got this Way to communicate with people that you can it's live Make it alive. Most people probably don't know but everybody does that the biggest tech companies in the world Reiterate and change and experiment all of the time and many times. They've got it wrong any Gmail users here Regular Gmail users anyone remember when they changed some of the The the nav items at the top to so you used to have docs and bubble encounter stuff at the time And then it just disappeared one day and you're like what the Frick just happened Well that that's what happened. What the hell does that mean? If I didn't tell you what had just happened Would anyone have told me that that's where you press to go to your calendar as well as your docs as well as all The other various apps that they'd merge together into one thing So Google tried it and it kind of just went to shit But they still keep their holding on to it pretty tight because it's part of then ethos to kind of get all of their apps into place But and they're educating people as well. They've got enough users to maybe just ram it down our throats I don't know but I would call that a bit of a UI fail I would say that that was user interface design that didn't really make sense huge company lots of resources They still got it wrong guess what they might change again next month They're gonna reiterate an experiment and in fact often they'll release changes in batches to certain little groups Test it out come back try again. We highly encourage Microbusiness massive business doesn't matter. It's not hard to do change it change your text. That's really easy to do Just change we had a e-commerce client that sold bikes We experimented for a month on the head up image of a special bike that they were selling in just different colors Turns out red bikes sell the most bikes online Tiny experiment five photos. We just changed them on a cycle change them every day change them on different days change them at different times What happened red bikes sold more so most of the bikes on that website are actually read might change it around again later But it's an easy change to do I didn't print it's not I'm not printing a book right? I can just change this tomorrow do it again. See what happens. You've got to do it Fert actions. This is another one. This is another one that I think so I think this is another Twitter weirdness Does anyone know what you're supposed to do on this website? Because My understanding is that the preferred action is to I'm sorry the screenshots not great anyway But it's rubbish in real life anyway compose new tweed is down here, and that's the other that's that I would have I would have thought that that Writing a tweet was my primary action on the Twitter home page however, I would kind of argue that maybe search or Read the feed might be the primary action that they're asking me to do because this is kind of hidden away and hard to find this is kind of Not really that clear. I mean I reckon there'd be a generous people that don't know what a quill is so Anyway, so that's the thing and again huge company lots of resources Ui possible fail maybe an experiment. I don't know. That's what it was like this afternoon. So It's okay to muck it up. That's probably okay, but it again, and you need to experiment just the same way Baby steps. This is another one that that people make a lot of mistakes as well Users are more inclined to perform complex actions if it's breaking down into small steps Look at the form on the right. This is the form on the left Which form is the one that you feel like you want to fill out? You know, and it's just based and it's just they've broken up their information Sorry, I'll use my ladies Into little tabs. So you kind of fill out this section then you go to section 2 and for that section Which is much more consumable than okay? What is there and then put in some photos than the average and there's stuff in five columns across? That's hard to use. That's just basic principles of user interface We want an easy function. So we want people to fill out that form Well, how would you want to fill out that form ask yourself that question stuff like that? So that's just three examples of things that that people you know that other people have made terrible mistakes around but The reality is that it's easy to change. It's really easy to kind of get into engaging professional An expert in the field will help you make those decisions potentially But often it is kind of no brainer stuff that you just have to stop and think about and try to get the experience Right on your website and craft it Thanks