Let's Talk About UI/UX pt2

My previous post about UI and UX focused heavily on forms and different ways to improve a user's interaction with them. This post will take a look at using javascript to further enhance your forms. When thinking about your websites or applications in terms of UI/UX you can really separate them into two categories: informational and interactive. Forms normally make up the majority (if not all) of the interactive portion and as such need to be designed and built very well so as not to hurt UX. One way of enhancing your forms involves utilizing javascript on the front-end. There are two major things that javascript can help us to do and one of them isn't necessarily restricted to javascript. The first thing we'll look at is using javascript to do some preliminary form validation. In the previous post I mentioned this in the form of HTML5 validation; however, there are some edge-cases that we need to account for. The first is browser support: more browsers support javascript than support HTML5 validation. Another is that HTML5 validation only works for simple single-field data validation. For example, HTML5 doesn't have a way to require a specific field only under the condition that you've selected or filled out another field. There are many times when you might want or need conditional validation. Also, if you have a complex form that doesn't just contain simple data inputs (text, number, etc) then there probably isn't a way to validate it using HTML5. This is where javascript comes in handy. Personally I prefer and use jQuery for most websites that need any sort of javascript functionality. Depending on the specific form and site you can either use some hand-written logic to validate your form data or you can use a validation plugin. Either way you can do some great things.

When using javascript to peform form validation you'll always want to make sure it's run when the form is submitted. In addition you can run certain portions of the validation as the user completes the form. For instance if a user is registering a new account and you have a username field, instead of waiting for them to submit the form and check the username availability on the back-end you can use an AJAX request to check the availability of the username as soon as they finish that field. This has become a common feature when signing up for a new account at websites and for good reason. That's a somewhat obvious example but should help you realize what I'm getting at. When we have the ability to work in the bacground while the user is busy, it not only saves them time but it makes us look good. Ideally you want to handle every form input in this way. The easier you can make it for a user to use a form, the more likely they are to actually use it. This applies to every form from user registration to application specific forms. There's no reason for a user to submit a form, wait for the page to reload, and then be shown an error pointing out that they missed something or entered incorrect information that we could have caught before they even submitted the form.

The most important validations to catch before the form is actually submitted are required fields. Using both HTML5 and javascript we can guarantee that a user has input all of the required information and we can even verify that most (if not all) of it is valid. So a failure to do this only serves to waste a users time which they are extemely conscious of and take personally. Once you've accounted for required fields you can move on to validations that might require AJAX requests or more complicated logic to verify.

The next big thing we can do with javascript is actually something that can be accomplished on the back-end and is one of my personal non-negotiables. Whether you handle this on the back-end or front-end depends on how you submit your forms (either AJAX or standard HTTP request). When a user submits a form and there's something wrong with it, under no circumstances should they be forced to re-enter all of the information that they've previously entered. There have been times where this has happened to me and as a result I've just given up and left the website. If you're asking a user to give you their time and information, you should make that as easy as possible. You should never let your own laziness (which is what this is) make that process more difficult or time-consuming. If you were to handle this on the back-end you would just pass that form information back to the page and pre-populate the form fields with the previously submitted information. Doing this on the front-end is equally as simple. If you're submitting the form using AJAX the user never leaves the page and therefore the form never gets cleared. In this case if there are any errors sent back from the server, you can easily inform the user and allow them to edit what is already there.

This post is rather short, concept heavy, and light on code. Also, these aren't new ideas or things that you probably don't know; however, they can make or break your UX. Sometimes as developers we can get caught in the mindset that users love our sites/apps just like we do! (Tip: they don't) And as such we think they will endure anything just to be able to use it. We often times ignore problems or annoyances in our own products because they mean a lot to us. There's nothing inherently wrong with feeling this way, but we must understand that users don't feel the same. When designing UI and UX we have to be in a user mindset. If this was someone else's project, would you be happy with the way that form works? If you wouldn't spend more than 30 seconds trying to figure out a form then you need to make sure the forms you build would make you happy as a user. Ultimately UX has the potential to be very personal and it's of utmost importance that you don't waste your user's time. If you do they'll make you pay for it one way or another.

comments powered by Disqus