12 UX Nightmares you MUST Avoid!

hey everybody what's up Gary Simon here so today I was on the interwebs and I was looking at a medium.com article and I scrolled down and it didn't let me read any other article except for the first three lines which fades into oblivion then it notifies me that I have to sign up in order to access the content so that is so frustrating to me I've seen other sites do it and it really just gave me the idea for today's video which is 12 pet peeves in terms of UX that I have and if you can avoid these things you're going to be pretty solid for the most part on your design in terms of the UX and not and the winged visitors so much so as always make sure to subscribe and let's check this list out now before we begin this video is sponsored by scrim ba' now scrim VII is the easiest and most interactive way to grow your coding skills it's a mind-blowing technology that allows you to play around the code directly inside screencasts for instance react is one of the most in-demand front-end frameworks for developers this particular bootcamp will teach you all that you need to know about react using scrim bus' unique interactive learning platform so if you hurry up and click the link below here in the YouTube description you will receive a massive discount but you have to hurry because we're limiting it to the very first 50 people all right so these are in no particular order the very first one I'm going to mention is what actually spurred the idea for this list of things that I consider to be bad UX and I was on medium.com I'm sure many of you who've been on medium.com seen this and it's the basically you're you've clicked maybe from a result somewhere else maybe on Google and you want to read this article and then it just shows a few lines of text here and then fades often do oblivion and then lets you know that you need a free account to read this article very very frustrating to me it's one of the biggest annoyances it's not just the medium.com does I think New York Times might do it or Washington Post or whatever and it to understand the need you know there's different ways to monetize a site obviously they want to build an email list that's perfectly fine but I have to say if you can avoid doing this as much as possible because I'm gonna tell you most people maybe 99% of people perhaps somewhere around there are going to click out and so just avoid this if you can try to think of other ways to possibly monetize your site next up now this is an obvious one splash screen splash screens used to be huge in the late 90s early 2000s I still see them though sometimes you know beginners essentially will do this I maybe they'll have some type of animation and then you have to click it to enter that's very frustrating it's fine to have maybe if you have like a real cool designer sort of unique portfolio to have a little quick intro animation especially if there's a lot that needs loaded in the background that's fine but I would automatically make it shift into the main UI rather than having a person to take extra action just to get to the UI so don't do this for sure now the next one up is not giving a contact form I see this all the time on portfolio reviews its contact section they give them an email address and maybe their Twitter or their Facebook or whatever but there's no forum so some people might be visiting on their phone and if you only give them an email their email client might not be set up they're gonna forget about you so that's a loss lead always integrate an actual form with a name and a message area in a submit button to send you that email and that contact automatically of course parallax alright so when I'm gonna call this one is excessive parallax and this wasn't really excessive parallax in terms of this little example here but it seems like when aspiring designers first discover parallax they get really excited and then start to parallax everything and that just it becomes very very annoying so there's good parallax and it's bad parallax and I suggest each one of you really do your research into eye parallax and what constitutes good parallax and bad parallax bad parallax is going to be over using and creating way too extreme elements in terms of your scroll based positioning of elements next up is going to be order forms that make you sign up to purchase something now of course if you have a SAS which is software as a service you know like me a hosting business or you're selling courses or whatever you have to have an email account along with the password in order for them to access their digital goods that's completely fine but I've seen many tangible based ecommerce sites requiring an account to order that there's no reason you should allow them just decide to order something as a guest and make that an option all right so it should be optional there should never be a requirement if you're selling something like a tangible physical good or service that that gets ships to their house so definitely that will ultimately that will lead to less orders because some people just won't finish the process or sometimes people won't receive the email for the confirmation in order for you to get to that part so always avoid that next up is going to be custom scroll bars that suck so of course this is a lot just like parallax there's good parallax and bad parallax but with scroll bars if you want to create a custom scroll bar please don't do something like this where it's this tiny little slither that's going to be hard for some people to access so always avoid doing this sort of thing and I see it a lot unfortunately so if you're gonna use them make sure they're easy use be fum beefing them up if that's an actual word alright so next up is going to be long forms alright so I did a recent party about a month ago video tutorial about form design and what constitutes good effective form design definitely check that out if you're unsure but this is an example of a really bad form design because you have a first name last name email address mother's name country state city address if you have to have all of these form elements break them up in the multi-step processes so you're only showing perhaps the first name last name and email on one form and then a next or a continue and then have some sort of like a breadcrumb navigation knowing letting people know how many different sections of this form there are and then maybe your mother's name and then maybe the location or something like that that way you're breaking them up now if for some reason these all have to be on the same exact page then definitely separate them I with white space or a divider of some sort so they're separated out in there all clumped together in this manner next on is going to be low contrast so I see this all the time as well and there's nothing worse than having a bunch of text like in the context of an article I where you have really low contrast it's hard for people to read it's bad I strain it's just horrible so you want to make sure that you use a tool that checks your contrast so in the browser there's a contrast checkers within the developer tools for Firefox I believe and also for design apps like Adobe XD sketch and figma there's also a different color contrast checkers such as stark contrast that's the one I did a really review on recently but what's it what it does basically is it takes a look at the text the color the color of the text as well as the background color that's sitting on top of and you want to get two for small text at least a four point five to one ratio all right so that's a contrast ratio and that's basically the number that's determined by the WCAG which is that web content accessibility guidelines 2.0 eye which states that if you can get to at least four point five to one color contrast ratio then you should be good enough for most people to be able to read this text because not everybody has the greatest eyesight next up excessive ads this is kind of a no-brainer we saw this sort of thing a lot more prevalent you know way back when but we haven't adhered you know we got an ad over here we have an ad right there we got an ad there you got all these ads over the place and it's just ruins the experience now I understand the need to monetize a site because some people you know they don't do things just for pleasure you have to be able to make a living but at the same time if you do something like this you're gonna probably make less money because more people are just going to bounce which means leave the site so your bounce ratio is gonna be crappy because we're am I supposed to look it also creates for a bad visual hierarchy too so because you're really not sure where you're supposed to look first avoid excessive ads at all cost next up lack of call-to-action so right now this is based this is a quick eye landing page design I did for one of the other tutorials recently last week and I took out the call-to-action so just underneath here it gives you somewhere to click right there's always be a goal in our objective when you're trying to I you know create like a landing page like this so in this context there's there's nowhere to click outside of just the navigation and I see this on people's portfolios too when I do my portfolio reviews they'll say their name you know their roles such as UI UX designer and then nothing else you know see if you want people to scroll down at least have an animated scroll into indicator icon i I do I would also put in a call to action button of some sort you know like I what's the main thing you want them to do or what are they going to likely want to do the most like if it's your preferably oh it's probably they check my work out or see my portfolio so something like that next up after that is kept CAPTCHAs on unimportant forms now I understand like if you're if you have like a user signup form and you're you start to get a lot of fake accounts you need some way to make sure that people aren't robots but for a contact form I would never add one of these annoying recaptures because they can be kind of hard to solve at times it has those little tiles I squares where you have to choose what's in the pictures and stuff and it it's just really bad UX I and so on a form I'm willing to accept a certain amount of spam because ultimately in there you will find the real emails and the messages that you want in them because the most important thing it was when you want somebody to contact you for whatever reason you wanted to make it as easy as possible you don't want to have to solve equations just it to getting a hold a touch with you so for somewhere for whatever reason a person might not be able to solve one of these and you just lost thousands of dollars perhaps if you know depending on what the contact the purpose is and then finally last but not least is unresponsive design now of course just probably out of all these twelve examples we see this the least because you know fortunately people have wised up you know in terms of you know the fact that we have smartphones and we have tablets you know we now know to use media queries to make our designs responsive but there are still companies even large ones like this one Kiesel guitars I'm a guitarist this is a great guitar company but their website just absolutely is horrendous it sucks very old design outdated but worst off is theirs it's not responsive so it looks like a very miniaturized version scaled-down version of their desktop version and it makes it hard to use and to click around on the navigation normally you'd have like a like on a smart phone like this you would have a hamburger icon menu I know it's all listed out and these tiny little icons and your phone you you have your pudgy fingers and you're trying to click them in and it just doesn't work it's the most frustrating thing ever and so most people most people say at this point in time they are responsive but even then I would say not everybody gets all the responsive elements right they don't really I adjust correctly the various elements like a gallery or whatever sometimes they're too big sometimes there's still too small so what I would say the takeaway if you are a margin modern UI designer and you do know what responsive design is make sure that you're really paying careful and close attention to exactly how you're manipulating the layout always try to put yourself in in the user shoes use your app on a small crappy phone and make sure it's very usable and it makes sense all right so hopefully you enjoyed that what are some other things that I probably inevitably left out you know one thing I think I definitely left out is the whole gdpr cookie acceptance modal's I understand that's required for a lot of people but a lot of people kind of make those custom designs very annoying maybe though they'll take up too much space or whatever that's definitely one I left out I should have included what are some other ones let me know in the comment give me subscribe and I'll see you soon good bye [Music]

Channel: DesignCourse

Views: 60,279

Keywords: ux, bad ux, bad usability, user experience, user experience design, bad user experience design, ux list, bad ux list, gary simon, designcourse, ux tips, ui ux, ui/ux

Id: FLSC0g3GaII

Length: 13min 26sec (806 seconds)

Published: Fri Jun 05 2020