Joe Leech - Forms are boring - NUX2

okay hello everybody I am I'm Joe oh is that is this working here this this microphone I get further away from that one yeah you can hear me all right can you yeah even the grumpy guy at the back so yeah hi I'm Joe mr. Joe and Twitter but you can call me Chuck okay show of hands how many of you guys have booked a train ticket online hands up great to book two hotel online thumbs up taking that car insurance online yeah taking that credit card online yeah you've all had the unfortunate experience of using something that I designed over the last ten years sorry about some of those some we're better than others but I've learned a lot in the last 10 years about specifically forms so I use three things in my job and I work for a company called CX partners we're a a UX agency Bristol and I do three things so I do I'd like it to be 30% of each of these things research design and most importantly of all I do design advocacy and that is making sure that the right stuff gets built and designed now any of UX is out there you must know the same thing you know you spend a bit of time researching a bit of time designing you spend an awful lot of time in meetings telling people and are encouraging people to do the right thing that's my life as well so we're all in the same boat yeah so I did I wrote book psychology for designers calm I think you got that bit didn't you it's only 2 pounds all right publishers I don't blame them but yeah it's the books that eight dozen words so if you bought it as a poem you brought it but it have you read it those people some have I find the old folk we buy it for two quid and ever get a friend to read in the damn thing it's a great read as well as a cheap line okay so my background is I was originally I study neuroscience which is the psychology of the of the brain psychology is cognitive science as biology it's all of these things in one and it impacts on everything that I do in my job so this is a this is a map of the human head as proposed by the Victorians in the science called phrenology and phrenology was basically the idea that certain parts of your brain controlled certain options certain things now what got me really interesting in phrenology was this little this little thing here oh look at that beauty that's right again yes that took me ages to do on the train today so I'm done it actually works thanks for the nervous laughter anyway big thing see that area there we've got an area in our brains performs who would have believed it Victorians ahead of their time so what I like to do and what I thought you encouraged you to do now is any time you're working on a form project so I want you to because this is the area of the brain is to just do this last are you ready to come on everybody let's nice eyes before come on the form area of our brain and get the blood flowing because again forms ultimately are really really boring things to design white boxes text next to air often gets given to the junior blah blah blah boring boring boring but my job I spend probably 30 percent of the design stuff I do is forms and I got a secret love for these things so I'm gonna share that love with you today give you three overall kind of tips and strategies for working with forms so your forms can be brilliant and next to that form project comes along and Jamie I'm looking at you for DVLA because you've got a shitload of those forms you can use these three tips and techniques to help make your forms better sorry apologize for swearing and things is being recorded isn't it safe beep some of those things out ok this is the problem this is my wife recently punch this website in the face we've all been there haven't we when something is absolutely dreadful and it's more often than not gonna form you're like oh my god this is awful and here is the problem if you know anything about me follow this up oh right I hate this thing this is verified by Visa it's horrid this is the thing you have to go to to validate your your payment details we pasted it there's something online and basically it breaks every single law of form design beautifully in one example so those might be really annoying it's a great tool for us speakers to get right it's just absolutely dreadful and I've written about it here I've written about Lowe's and continually Avast them on Twitter it's somehow they want to work with me don't know why anyway it's dreadful and this is the problem is that loads of us designers are producing stuff like this rubbish here and people is making having a huge impact on people's lives and they're getting really angry and upset you know rather like Jamie that like when he was getting an electric shock people feel that same way when it comes to web forms and it's a huge source of pain for people right now so what can we do about that so tip number one security is important to you write this down stop writing it down no it's wrong here's what the here's some quotes I got from the internet 18% of online shoppers feel more confident about entering personal information on sites using security indicators it's also been observed through field testing the empower blah blah blah you get the message guess where I got these from these quotes yeah the security companies well of course they're going to say that their marketing is purely based in the fact you know spend hundreds of pounds I'm secure certificate from us and your customers will feel better now Verisign blessum they just changed the name to norton security which is a really bad mistake because again you're losing one of that anything that might have happened from this stuff is just gone so sadly do you know what this isn't the case and here's not a psychology study that shows why not here's the numbers what happened here is some researchers did a task they said they say a survey to students and they asked them some questions it was about cheating in exams and they asked them questions like have you ever played rice texts for any kind of assignment and what turns out was with people you know on average 28% of people if they thought it was completely anonymous which this survey said it was they were fine there was the twenty eight percent of people would say you know do you know what would they do that warrants a bit sneaky wasn't that bad of me but weirdly ten percent of people said yes if the research has said things like now honestly we're going to keep this very secure we're not gonna let anybody see your details your details of 100% fully secure ten percent of people said oh do you know what oh you know yeah the numbers have gone down hugely so security is important but don't Ram it down people's throats tip number one yeah I just said that in there tip number two and this is quite a long run because there's an awful lot of this about so anytime anybody gets a new tool they go a bit crazy you ruin your kids when you've got that brand-new Lego set or you've got that brand-new Barbie how to do crazy build crazy stuff now you praise things with Barbies Harry time you get something new you go a bit mental with it and the same stress designers unfortunately with html5 and there's some great examples of forms that are out there I love this one which is made completely out of bones I mean really really I love this create an elegant website with html5 yeah that looks beautiful doesn't it I mean just horrid stuff invalid value you have to specify a value horrible stuff is being created because we've got loads of new tools and so what that means is we've got to really understand how we use and how we think about usability using experience when it comes to form design because we can do so much more cool stuff so you know just because you can doesn't mean you should now follow some quote from spider-man about responsibility Hado before but anyway just don't do stupid stuff folks so some examples like this ones right thank you somebody said why look like wives come on clicker work why wine earth would you design a form like that good only knows because you can other things that's works this is a great one this is a form that I found on a website for age now I've used a test of this form a number of times and guess what most users do now you'd expect them to go in and be able to type the entry in but no most people when they see that needler whose two little dots at the side there they think oh I've seen that sort of thing before it's like a select box is that war woman was bless her she was 55 that's what she did 55 times she hit that button then he used a test yeah I'd honestly I was like I didn't want to stop because it was great video footage poor woman the poor woman but you get the idea is that if we start playing around with these new things and this is this was designed this html5 element was designed to focus purely on numbers and give me this little thing called a spinner I mean waste of time now anybody know what this is yeah I heard some you say this is Fitz law the other big problem with these spinner things is that 55 year old woman bless her she was not very good with a mouse or a trackpad and so it took her ages to click the mouse over the top of that tiny tiny tiny little square a tongue yellow triangle and click it 55 times maybe soften it would move out she should lose count that was painful to watch this is Fitz law and Fitz law says that small things are really hard to click on all right people will see one to seem really intelligent quote that spits law they're clearly in action actually it's just small things are really hard to click on obvious stuff but useful to describe the problem as she also dictates what size you should make things but you know your designers you could understand other things that I've seen in terms of forms as well again from the wild please enter your salary now I would love somebody to try and get this right here were fifteen thousand and thirty pounds almost impossible to use a slider to enter your salary unless you've got some kind of amazing skills with a slider and a mouse again hugely inappropriate stuff yet we're seeing this rubbish online right now it's a few sliders and forms okay one simple piece of advice don't okay sliders are rubbish they're a waste of time I've seen them fail in so many user tests and so many people ask for them and so many people what the main that you're much better off just not bothering with them because they're a fiddly horrible thing to do I mean the niceness of things for picking colors in certain situations but for entering data they are terrible other things I mean this autoplay equals autoplay which means a video starts automatically when you start and join the site this stuff's being used because it's out there unfortunate but it's there don't use this stuff too much unless you you know get away with it this one Auto teen equals Auto Tune this one is an html5 property not well documented they'll take a video of a singer and automatically make that video in shoe from html5 anybody have come across this one before now that's what you call a guy going down really badly I can say that one of my guys has got that so bad in the stage at the Comedy Store of it you actually got happy some laughs in there anyway other things that are going on in form design as well factors I Oh My lordy flat design you can see the problem so here's our before look that doesn't know like a button because it's flat design that looks a bit more like a button but it's not really looking like a busting we've got a really careful returns like flat design it's a whole article here written by my friend Jessica whose does a credible piece on how flat UI in forms works on a list apart gonna check that out what's really useful for the mistakes that people making the flat design in forms but again it's a minefield doing this sort of stuff online other things that I see a time a time a time again is we're here really hey hi rear we had this conversation quite a lot when when we was working at many supermarket I was advocating with doing it one way she was okay to do it anyway this you've all done this haven't you inform us before you or know what this means don't you yeah yeah I didn't see them the asterisks there's nothing that explains what they mean so I hear this probably every six months or so in the user test is people don't know what the asterisks me now why is that so stupid users yeah yeah we do recruit stupid users typically no it's not it's because this is an invention the asterisk is an invention by us geeks to make it easy for us to tell people what they should do rather than mapping the behavior of what people really do which is not look for little asterisk to tell them what they should do what people do and they fill out form is they start at the top and they finish at the bottom and I'll only stop when you tell them to stop filling things in that's what people do on the form you guys are different now you spot the stuff you know you know about privacy you care about that stuff most people don't know tell the falinda for now star and they'll stop until you tell them not to so what do we do we mark stuff as optional so you mark bits within a form as being optional now this is still pretty controversial stuff some people advocate the other way some people advocate this way lots of user testing like Jamie's shows it's kind of can iron out some of these issues Ben got to be thinking about what's going on in forum design I'm really questioning what's going on before you can design a proper forms are always questioned what's out there okay unfortunately html5 sadly it has this option which is required it was required which means required good at this technical stuff on a which means allow it allows you as a designer as a developer to tell the browser if the fields required it not and this causes a small problems because again what's starting to happen is the behaviors that are maybe a little bit broken again hard-coded into the buttons the browser to do this stuff now times are changing and the younger generation are much better at this stuff but it's still an awful lot of people I get back to Jamie's point the 20% of people that are not gonna be doing the stuff on digital the 20% of people that need the most help in getting the stuff right who's gonna struggle with things like asterisks all that kind of stuff so we need to be really careful in designing for people and not using stuff like this so here's a browser called chrome if you'll know and this is what happens with form validation when you haven't filled something in did you miss that so you click to the submit form and there's an error message please fill out this field exclamation mark this is the default behavior in chrome when you use required it was required and let's face it is horrific as a UX designer oh there's no way in the world that I would ever reckon to my clients that is what we allow something to happen yet this is the default behavior in chrome opera little bit better well boss it's red it's still there and if you saw the other one it disappears so the problem in Chrome enter it which comes up you look you know you look away because the kids have called you off you look back there's nothing to tell you something's gone wrong at least with opera it sticks around and it's still there with chrome the error message disappears you've got no idea what's going on this is Firefox it's a bit better so it says please fill out this field and it kind of gives an error message around it but it's still really geeky I mean think about it what the hell is a field a field is where cows live it's not a white box on the screen where you put information in the field is the word we're using databases this stuff shouldn't be happening and we as designers shouldn't let this stuff happen so be really really careful when you're doing forms because this stuff will creep through unless you're really really sharp and on top of stuff and it's also message for these guys as well they've got to really pull their act together because they're really messing things up for us UX designers if we have to capture and modify browser behavior because the browser experience are so horrific last I mean that's not good for anybody so these guys need to wake up and start taking things like form design seriously you know whiz-bang html5 animations are one thing but that's not the reality of what a lot of us do in design a lot a lot of what we do on the Internet is transactional based and these guys are letting us down moment of contemplation all right let's think of some other things so this one this this is a site I enjoyed working this out this wasn't insurance I worked on a few years ago for Allianz insurance and this was pre this was what 2009 this was so and we worked on this idea of drag and drop in terms of insurance products so what you can do is you can take something drag it from over here in the box then you add it to your policy and it updates now what happened here on this project was is that their focus group was done where somebody showed them how this worked in action and everybody went oh wow that is amazing this is totally the future of insurance I've got so much control everything's great this is fantastic it feels amazing it's light it's vibrant they've all had some Chardonnay they're all tall things get very exciting about the future of insurance the designs were high-fiving each other the reality of what happened when it went live was nobody had the first clue about how it worked so can I keep referring back to Jamie Jamie was absolutely right you've got usability test this stuff never do a focus group ever okay it's my experience in ten years of researching focus groups are 100% useless endeavors thank you you forget excited they talk to each other so yeah yeah I feel that - yeah I feel that - that's amazing that's great I was said the story of the focus group Sony they'd this great one they did this road trip work of designing radios they have a black radio and the yellow radio in this focus group they said to people you know what do you think about the two radios I mean I love the yellow it's vibrant it sells life it's colorful it's wonderful and the folks people like yeah the yellow radios the radio you should go for Sony and so they were like great the end of it at the end of the focus group didn't plan this they said to people or you know you can take a radio home with you you take a black one or a yellow one guess what happens everybody took the black one how that's the problem with focus groups so back to html5 forms this is the problem yeah George Bush this was a really funny video I do encourage you to watch it it's George Bush fighting a door and it's hilarious but it shows a real problem so guess what George Bush did he walked up to the door he went to grab it and pull it like you'd expect it to do and guess what it was a push door yeah we've all come across this anyway no this this this is called in a the UX world yeah Ford ins another technical term for something that's been obvious we love those but yeah it looks like you should pull it and you can pull it but now if I can push it now what ends up happening the door a door makes you look really stupid the same is true of the stuff we design and this is again a problem with flat design there's a lack of a forward and sort of stuff so what do we do in her usability well let's get the usability guys and Bob did immediately I said what we need to do is out some buttons that say add in and they did that and not surprisingly conversion went up on the form because again people would go oh I know what to do click Add that goes into the box what was interesting soon as we did that we did some research to figure out why that was we move it's pretty obvious why but we wanted to really understand the nerve of the problem see what was going on and what we spotted what we saw as the period of this research was happening was that this thing was coming along which is the iPad the iPad was launched sort of midway through this project and suddenly everybody was mini placing and dragging and stuff and dropping stuff on screens and that was the the the thing everybody thought we'd be doing in the future and the iPad came along it's like Oh God you know you backwards UX people have told us to put a button on this you knew iPads coming out with one of the young and cool and crazy can we have drag and drop like they're doing the iPad you know it turns out this is why another quote from user testing this is this guy's looked at me he said he said why drag when you can click and it goes over automatically if you click on it and it shifts over it's like one clicked you should about that over it goes I thought do you know what he's absolutely right the big problem is insight number two humans are fundamentally lazy and drag and drop requires effort to move click move click move you know to drag stuff release it it's hard things to do it requires motor control coordination it's hard to do so people don't like to do it the prefer to click and watch things move over as much prettier that way so what we did is we you know we put the ad button in and the thing we did to make everybody happy as we put a nice busy animation there to show it going over and everybody was quite happy with that project but it shows the problem of what's going on now is that things that you expect to work because they work on things like the iPad in reality in real life don't work so well and this is still true of many of a drag-and-drop interface stuffs changing and people still like to do it but the fundamental problem with drag-and-drop is not that people understand it or don't understand it's not the foggiest problem it's a laziness problem it's can put can't be bothered to do it they'll prefer to click and watch it move okay that states from a 5-bit done hey you feeling guys alright loads of input there and really good stuff wish I could look at the tweets now I'm sure they're brilliant I hope you're not still talking about that joke that went really badly let's keep going okay encouraged honesty so again big problem this one in terms of forms and I've come across this one again and again and again you know in terms of how many points have you gotten your license have you any accidents in the last three years have you made a claim on your house insurance have you ever been refused this thing that we've all come across these questions online here's a good one the last 24 months haven't used any tobacco products hands up if you've used the tobacco product in the last 24 months thumbs up yep few of you there not many of you yeah so this is a question that is on a insurance form for for life insurance there's a life insurance for so same question again if you saw this on the life insurance form hands up those of you who've used 20 tobacco in the last 24 months thumbs up that's nobody oh there's one in the back on this man and this is the big problem the insurance companies have is that they know we lie recourse you get a sneaky eight months ago you're like oh it's just a sneaky fact they're never going to know well no they're not but all of this stuff is really important for them so they can calculate how much the premium that you pay is going to cost so everybody lies what happens are it's premiums go up so it's a problem for us so we need to encourage our customers to be honest now this is a real challenge because again the stuff you'll see later on that Susan talks about you know it's not hard to get your customers to do things it's a real challenge and it's also an ethical challenge that we have to face is that I was faced with this problem and I was like well what could I do I could encourage people to answer this question correctly but what would happen to those people is their insurance premiums would go up again you know faced it again work we've really encouraged her interview if you get people to be very honest on the car insurance form your premiums going to go up and you look very uncompetitive as an insurance company so what do you do it's a really difficult challenge that you've got an awkward what any good design I did what any good designer would do I went out and I looked for some psychology to figure out what was going on so again poke my book my book shows you - how to go out and find psychology to solve a problem so you've got a design problem right now you think it's really difficult for me I don't know what to do my book helps you find and go out find the psychology solve that problem so I found some and I found this piece of piece of research scary eyes aren't they so these experiments is what they did is they had a cafeteria an unmanned cafeteria and they had honesty box you could go in and you could take a drink a tea or a coffee or some milk and there's lots tea box and you were encouraged to give money for the for the thing you just taken and they were like well okay let's see what we can let so play around with this because this was just in a local lad I said look play around this and see what's going to happen stay this idea let's see what happens with various different types of pictures so they try all of these different pictures eyes and flowers for the control guess what happens with the eyes were there so this shows donations okay so you can kind of see that with all of the flowers donations were around about 10 P on average for a drink was with the eyes some of them in sort of between about 13 about 70 P big takeaway big scary eyes I mean that people are a bit more honest so I read this I thought how you know what that's genius that's exactly what I'm looking for in terms of my health insurance problem so yeah listen words that just say what I said same problem so you know I went out I thought right what am I going to do so just so happened that this insurance company had a famous celebrity face June Whitfield this is going so this this is me this is my genius design moment I said let's go find this couldn't asked seek about the last photo shoot and see if we've got any really stern pictures of Jeanne Whitman we found a stern picture of doom with her she's looking a bit friendly she's looking you in the eye she's looking a bit Stern and you know what happen to this to this question sure enough more people were honest which meant that insurance premiums were different so if he didn't smoke insurance premium was a bit lower overall he did smoke as I thought and this was a good success it was really very successful for them unfortunately this is this is a big tip for you unfortunately June Whitfield quit this insurance company and they're to get Michael Parkinson in another insight June Whitfield converts far better Michael Parker sir in terms of forms okay so where's Devon I set my book only two pounds gotten by it and it gives you the tips and the help and support you need to go out there and fix some of this horrific form stuff is out there so best of luck with your forms one and all thank you

Channel: northernux

Views: 8,944

Rating: 4.8757763 out of 5

Keywords: usability, user experience, ux, nux, nux2, conference, design, psychology, uxmanc, User Experience Design (Industry), cx partners

Id: K6jiCkZwLgg

Length: 27min 54sec (1674 seconds)

Published: Thu Nov 14 2013