Design trends and their caveats (part 5) - Adopting UX flaws
After our trip through boring responsive land in the last part it is time to take a look at some things which are commonly misplaced, misused or simply applied in the wrong fashion. Let me point out a few things to give you an idea what I mean:
Forms
Form follows funtion, or was it the other way around? Do not follow some functionalities common in design for some time now.
Minimalist inputs
Input fields have labels for a reason. One can see what needs to go into them. Many designers make the labels appear inside the inputs looking like placeholder texts. Problem: Users tend to ignore placeholder texts. The label does not get read properly. Result: Wrong data input resulting in flawed data or error messages for the user. Either way, not what you or your users want.
Second problem: Someone starts entering data and is not sure what to put in there. Was it street name and number, or just the street name? No chance to find it out. Delete the entry, read the label/placeholder text, start again. Really?
Some designers were smart and started moving/animating the placeholder texts out of the input area on top of the respective input field. Better, but it is only a fix for a problem that would not be there if you would not start with a bad idea in the first place. Exception: Really little space. But even that is barely justifiable to my mind.
All men are equal and so should all inputs be, not.
Especially on mobile forms you get input fields which are all 100% wide no matter what you are supposed to enter. That causes form filling fatigue. Make form inputs represent the expected length. At least approximately. This is easier to scan as well. All inputs with the same length are hard to go through. Make it easy and at least try to define 2 or 3 sizes to make things easier to read.
Weird tab behaviour, faux inputs/selects/…
I don't know about you but I hate forms. I hate them because I might have to use the mouse, and then the keyboard and the mouse and the keyb… you get the point. Actually, I do not have that problem. I start forms and then tab my way through them. Jan TAB Persiel TAB Hamburg TAB … Sometimes this does not work, sometimes people decide to use funky custom designs and emulate form input elements and I cannot tab through the forms anymore. This is super annoying and not very accessible either. Please value peoples' time and do not slow them down by reinventing the wheel, a pretty one admittedly, but one that does not roll.
Burger Menus
Whether it is the name that makes people fall for the burger menus? One thing is sure, they can work great on mobile devices when you need to hide a lot of navigation while it is not being used, but many users simply do not expect these on desktops.
Despite the fact that oh so many UX experts might tell you that this is a common design pattern which people know by now (thank you facebook for adding it to your app a few years ago). Yes, true users have started to learn and accept that this stands for navigation access. But not all of them, and certainly not in a desktop context. Since it is not expected on larger screens it is often not considered to be the navigation. I have seen too many failed user tests for these menus to trust this method (yet). Make sure by testing your design with real users before going all burgerymobilish.
Password security
1234, here we go again. I will not go on my typicall rant about passwords and why you should make them more secure. Actually you should be usind 2-factor authentification by now where possible.
But that is not the point here. It is an apaling thing to try using safe passwords and then you get funneled into a registration process every now and then which tells you that your password exceeds the 8 characters limit and that you cannot use the following 723 glyphs. Never, never, never ever should you as the concept, design or developing craft decide what the limit is for passwords. It is not your account at stake here. Make your own passwords longer and more complex because obviously you did not encounter this limitation. Next, allow others to do so as well and do not enforce a limitation which can barely ever be justified.
Dark patterns
Ever visited https://darkpatterns.org? You should head over there and take a look at the evil side of usability. What is a dark pattern? Well let's put it this way: You are using the fact that users have build up expectations when using the web against them. An example: Users are used to close windows by clicking an icon in the top right corner. Now you might want to display a banner with advertisements on your site. But now you position something else up where the close button is supposed to be, at least from experience. Basically you are misleading people for your own good. Well, every time you do stuff like that, Karma sees it anyway, but until then I hope you are thinking about whether this is really what you want to do. Keep people on the site, but do not make them by brute-force or dark patterns. As a designer you should ask yourself when being asked to do stuff like that whether this is the right client for you.
Scroll traps
This is a great one. We have all been there, on a mobile website or a desktop browser: Contact page, huge Goolge map, you scroll down and all of a sudden you stop scrolling and zoom the map. Unfortunately the map is covering the whole darn screen by now and there is only one way out of this map: Quitting the browser. Well done! Seriously, this must be a perfect scenario why there is no excuse to not test the stuff you build. And not just with fancy sidual regression, integration and unit tests, no with the devices being used later on by your clients. The earlier the better. This stuff is easy to discover and fix. Test things, let others test it as well.
Up next
Icons are everywhere. Icons are loved by everyone. Ice cream is the only thing coming closer to winning the title of "best thing in the universe". Well and your boy- or girl-friend of course. But some things go wrong when it comes to icons. I will give some advice on where to pay attention and what to avoid.