When building a website, it is important to consider common usability issues, that a user might face. These are generally quite small factors to consider but they do make a difference in how well your users can interact with your website.
Let’s start with forms. Pretty much every website has a form in some way or another, whether it’s an ecommerce site, with a checkout form, or a simple ‘contact us’ form.
Fields in a form, will generally have a label, telling you what to do, and the input box, where you need to type your details. The label is the important part. It is quite common in a website design, to show the form instruction as a placeholder inside the field. However, if we were to use the placeholder HTML attribute, this can be pretty bad for the user. As the moment you type in the field, the instruction disappears, for example:
Take note of the date field at the bottom. The form requires a specific format for a date entry. The moment you start typing in your entry for this field, that information disappears, which can cause the user to think “Wait, was it year first or day first?”.
Here’s another example of how we can display our placeholders, using labels.
Here, we are using labels instead of the placeholder attribute. Using a little CSS and a little bit of JS, we create a friendlier form. Where the user doesn’t lose the information they need to fill out the form.
Buttons are also used on basically all websites, used for call to actions, to submit a form, or to start a process. Whatever it is, the clicking of a button means that something is going to happen, and the user expects something to happen. Buttons need to give the user some kind of feedback to let them know that this bit on the screen is supposed to do something, and example of this is a hover effect. We however are going to think about how a user interacts with a button on a mobile device, such as a smartphone or tablet.
Smartphones and tablets, don’t have cursors, ergo you can’t hover over anything. So surely there’s know need to do any kind of effect for pressing a button, because the user is more limited in how they interact with your website, they need more feedback to tell them they’re doing the right thing.
Say your user is browsing your website, but they have a fairly slow connection, and it’s generally taking a while for different pages to load. If a button that doesn’t give any kind of response, will seem like that it isn’t doing anything. See the following example:
Imagine that you are browsing this on your mobile or tablet device, (or if you are already reading this on your phone). Try pressing the red button, and then the blue button.
The red button doesn’t do anything when you touch it. If your website is supposed to have an action at this point, the user doesn’t have anyway of knowing other than the visual cues of their browser (which are often be quite subtle). The blue button on the other hand, reacts to the users touch. This makes it much obvious that the user has interacted with the website.
These are just a couple of things to consider when building a site. It is important to consider, “What does the user want to do?” and “What do they expect to happen?”