Your website should stop doing this right now (pt. 2)
The horrors you are putting your users through
As shocking as it might seem, there are more horrors web developers are putting the users through. Part one of this article covered just four of the inexcusable design & development decisions, so let’s continue.
MEMO
To whom it may concern:
Design is not just about shiny pixels. It is mainly about how products work. Everyone working on the product is a designer, and every decision which pertains to the product is design decision.
There. So you cannot say you didn’t get the memo.
Take for example Dropbox. Almost the entire internet knows about it, and I am quite certain all the web developers know about it. Dropbox, for most use cases, has no visual design. It is an invisible app that works its magic in the background keeping your files in sync across your devices. Yes, I know, there is Dropbox website, but for majority of the time people access the files through folder residing on their devices.
Yet when you think about a Dropbox you think of it as a well designed product. Why? Because it works excellently.
Come to think of it, try to remember the products you use daily and you think they are well designed. Perhaps a computer mouse, mobile phone, a doorknob to your house, car key, kitchen appliance, anything… You will quickly notice that your feeling of hey this is a well designed product does not come from this product being visually beautiful. It comes from that product working exceptionally well. If it is visually beautiful too, that is just an added bonus, the how-it-works facet is much stronger.
With that in mind, let’s stop more of the horrors developers do:
5. Stop breaking the way links work.
Clicking on a link (or any similar element, it doesn’t have to be just a textual link), which takes user to the next page is the most common form of user interface interaction on the internet. The. Most. Common. Why the hell would anyone ever tinker and fiddle with the way links work? Why?
Take for example Groupon Ireland and the way deals are crafted:
When you hover over the element some more detail appears and that is OK. But the entire thing, even tho it is clickable, is not a real link! It is a fake done through JavaScript or some other trickery. When you right-click it there is no regular right-click menu which enables many things, things like…
… opening Link in new Tab or Window. Copying the link so you can send it to someone. Adding it to Bookmarks. Anything! There are things users expect to be able to do with links, stop breaking that! There is no reason whatsoever for you to break how the links work and behave. None. Even if you think there is a reason, you are wrong.
Furthermore, without doing any research, I can guarantee that such fake links do pretty bad when any software tries to interpret them. The software blind people use to read the internet has got to be thoroughly confused when reaching such “links” and probably cannot follow them. I bet even Google crawler has no idea what to do when getting to those and cannot link them to their destination page.
6. Stop breaking the Back button in browsers!
Back button is the second most used interface element on the internet.
Forget about your fancy scrollers, carousels, popups or whatever. After a link from previous point, it is the Back button that takes the silver medal.
Why, oh why, would anyone break the way Back button works? Tell me? Why on some pages some poor soul decided that Back button will log me out? Why on some pages Back button doesn’t do anything, it just takes me to the same page I am at?
Jakob Nielsen wrote about Breaking or Slowing Down the Back Button back in 1999 and had this as #1 mistake of that time. 1999. Nineteen ninety nine. Fifteen years ago.
And yet, here we are in the year 2014 and I have to say this again. There is no reason whatsoever for you to break how the Back button works and behave. None. Even if you think there is a reason, you are wrong.
Oh, but security and…
Shut up.
..but what if you leave your computer…
No, go away.
…but form resubmission and passwords!
There is no valid reason why a user could not go one page back using Browser interface elements. None.
In some worst case scenarios if the previous page requires form (re)submission, password check, PIN entry, or something, take the user there and gracefully do actions from there. Do your work and do not offload your lack of knowledge to the user.
7. Stop breaking how forms work!
Ah, forms. Half the internet is filled with cats and dogs, and the other half is filled with forms for users to fill out. Forms forms forms.
Seeing that internet is littered with forms, why would anyone not take 5 minutes extra during development and make forms actually work great?
Instead of poking fun at a random site for having utterly failed forms which would just be too easy, here is a cheat-sheet on how to make your forms be excellent.
a) Create order in your form set,
When users are done inputing data in one box and want to skip to next logical box by pressing Tab, they need to actually end up in the next logical box.
In one of the most common form sets on the internet — user details and address, the input order should be logical, like this:
And this should be punishable by 50 whip lashes:
Take a look at Apple’s iCloud sign in form:
Even tho the visual flow is different, the logical and the Tab flow is actually correct. Pressing Tab from Apple ID takes you to Password, Tab to checkbox where you can press Space to check it, Tab to enter button.
Is it a bit strange that the Enter button is located inline with “Password” box? Perhaps. But this thing works flawlessly.
b) Programatically specify type of data that goes into a form,
If you ask the user to enter phone number, for example, specify that form correctly in the code. Specifying data type brings up different keyboard as well on iOS. Handy!
c) Be careful about auto-advancing forms,
We usually see these in various serial number and PIN entry locations. Sign ins to eBanking systems, entering serial number for a product you bought, etc... There are a few small input fields and when the system thinks you are done entering data into one field it auto-advances you to the next one by placing cursor there.
Fight!
Here is the form I have to fight with on almost daily basis. Each box accepts one digit, and as soon as I type it the form auto-advances to next box. Issues arise when I realise that I have entered wrong number because numbers and positions are randomized. Going back is a major pain because as soon as I focus previous box it figures there is a character there and auto-advances. I have to fight the damn thing to correct an entry. Frustrating.
If it is absolutely necessary to auto-advance forms, make sure that every angle for going back is covered. Shift-Tab, clicking into previous form, Undo, and every other possible way of going back should work without triggering auto-advance.
d) Use native drop-downs.
The typical fail scenario is as follows. Designer painstakingly designs the most pixel perfect drop-down. UI developer tells to the designer that the ability to style drop-downs is limited and that in most cases the browser will just take over. Designer gets mad and insists that the drop-down looks like in Photoshop. Developer bends, and finds a way how to make drop-downs look like that. In this process about half a megabyte of code gets shovelled into the project, along with tons of unnecessary workarounds and specifics.
There really is no need to go through all of that when the best drop-down is the one which is already sitting in the browser. Numerous reasons, first of them being that user is already used on such drop downs. If 99% of the internet uses default drop-downs, and then you come along and decide that your one is better … well guess what, you have just introduced unnecessary learning curve into your project.
Second reason is that default drop-down already has all the goodies built in. User can use keyboard to type characters which in turn focuses on the wanted option, scroll it natively if it is really big and drop-down options can fall outside of browser window.
Oh, and it works on mobile devices as well, invoking that device’s default drop-down menu.
Technically speaking, most of this can be recreated through code. Keyboard input, scrolling, fall-back to native in case of mobile use, yadda yadda yadda. But at what cost? Tons of code, endless testing to see how will each browser handle this… And you still won’t be certain that some god forsaken browser won’t completely disable user from selecting an option.
8. Stop masking your content!
We all know this. Click a link on Facebook, new page starts to load and
* BOOOOOOM *
a full screen bullshit content instead of the content you wanted.
Advertisement, push of some other product that website has (like an iPad app or something like that), link to another content, … anything. Except that thing which you actually came to see and read.
This fullscreen overtake can be categorised in two, equally dumb and pointless, categories:
a) Advertising & promotions
Seriously? No, seriously, you haven’t found other method of making money from your website other than masking your entire content with an ad? Usually requiring the user to do additional action, click to close or whatever? Really?
b) Pushing tablet/phone apps
Alright, you made an app. Great for you. Here is the kicker. If the app you are trying to push was any good, people would find out about it one way or the other. If the app you made is shit, and majority of them are, why push it? Make great product and it will naturally grow.
The trend of masking entire content with useless stuff is so annoying that people are spending actual time, energy and resources complaining about it. It is one thing to complain about a silly trend casually while having a beer with your friends, but when pages like Tab Closed; Didn’t Read appear and become really popular — we know there is a real issue with this.
Stop masking content.
Let’s make the internet less frustrating. Please.
Unicorns & marshmallows.
