Let's Talk About UI/UX pt1

As web developers, we rarely focus on UI (user interface) or UX (user experience). It's easy for us to get caught up in the technical details and planning out how we're going to design/implement code. However, the interface and how users experience it is almost immeasurably more important to the success of your site/app/product. We're going to take a quick look at some common mistakes and some general guidlines for improving both your UI and UX. The UI of our applications is the layer between us as developers and our users and the UX is how they interact with the UI. So UI design plays a large part in UX and as such we should focus on our UI before we think about UX. In fact, as developers we often start our application design by laying out classes and database schemas. We get so caugtht up in the details of a cool back-end feature that we forget to stop and think about how that will practically work for a user. One giant example of UI and UX is a form. When buidling an application, sometimes you end up with quite a few forms and if you don't think about how features will translate to the UI you can end up with unnecessarily long forms or forms that don't make sense.

Let's take a look at some common issues with forms and easy ways to improve their UX. I find that really utilizing semantic HTML5 makes building forms with great UX a lot easier. One thing that is commonly overlooked with forms is the "label" tag and even when it's used many times it's not fully utilized. For instance, let's look at two examples of labels next to text inputs.

<label>Unconnected:</label>
<input type="text"/>
<label for="test">Connected:</label>
<input type="text" id="test"/>

The first label isn't conected to it's input so when you click on it nothing happens. As you may notice, the second label utilizes the "for" attribute which targets the id of another element, focusing on it when the label is clicked. It's such a simple addition, but I can't count the number of times that I've used a form without it. Like many UX things, this is a functionality that users have come to expect and when it's absent it really sticks out. Another thing that really helps UX is client-side validation and given the capabilities of HTML5 there's really no reason not to use it. Let's look at a quick example.

<label for="none">No Validation or HTML5:</label>
<input type="text" id="none"/>
<label for="validated">Validated using HTML5:</label>
<input type="number" min="0" max="10" step="1"/>

The first input is an example of what many sites will do when asking for a number (such as age). They just use a standard text field and verify it on the back-end after the form is submitted. The second input utilizes HTML5 attributes to specify exactly what it is we're looking for: a number that is between or equal to 0 and 10 and the numbers must be in increments of one (ie whole numbers). If you try to put anything else in that input it just won't work. Granted there are a few edge cases where the users browser may not support HTML5 (like IE 8 or older), but that's why you never rely on only one form of validation. When dealing with user input data, you always need ensure there are several failsafes or backups to cover every possbile situation. Obviously the second input in this case is better because if a user were to accidentally fill out that field incorrectly, they don't want to wait for the page to submit and then bring them back to notice and take care of it. As far as UX is concerned, you want to minimize the amount of both waiting and back and forth that a user has to do. So any time that you can validate what they're doing as they do it, it not only saves their time but it helps to ensure that the data they're giving you is correct.

That brings me to one of the worst form attrocities: not saving form input when redirecting back with errors. Granted it's been a while since I've seen a site do this, but it's still something that bears being said. Once a user has input form data, there's no reason for them to have to re-input it unless there was something wrong with it. Even then, you should keep it so that they can see what they did that was wrong. Nothing will drive away users quite like submitting a form with one wrong thing and being forced to start over from scratch so it's imperative that you handle it well. I would even go so far as to say that if you aren't capable of doing this you shouldn't be building user facing forms.

Another important thing when dealing with forms is tab order. Like many people I like to use the tab key when filling out forms. It makes things much quicker because instead of moving your hand between the mouse and keyboard you can just leave your hand on the keyboard. It also helps for mobile devices so the users don't have to try and hit the input field with their finger every single time. Instead they can select the first input and hit the enter key to go to the next input. What you need to keep in mind is that every element in the form (except hidden fields) is included in this. What that means is that if you have elements in your forms other than input fields (like perhaps a ? icon) they will be focused using the tab key when you get to them. Obviously that isn't ideal for most forms so there is a element attribute named "tabindex". Using this attribute you can define exactly what order you want the tab key to use. Let's look at some examples.

<form>
<input type="text"/>
<a href="#">Example Link</a>
<input type="text"/>
</form>
<form>
<input type="text" tabindex="1"/>
<a href="#" tabindex="0">Example Link</a>
<input type="number" tabindex="3"/>
<input type="text" tabindex="2"/>
</form>
Example Link
Example Link

The first form uses the default tab order and if you click on the first field and tab over you'll notice that it moves to and highlights the link. The second form utilizes the tabindex attribute to not only skip the link when tabbing but also do the last two inputs in reverse order.

Forms are a big concern when thinking about UX and as such have a big affect on your users. There are many others concerns with forms and even with other page elements but it's most important to get in the right mindset. When building UI and considering UX it requires that you're in the mindset of a user and not that of an engineer or developer. The things I've talked about up to this point all answer one question: what would make using this easier? This is one of the most important questions you can ask while designing and building UI.

comments powered by Disqus