User Experience has been a topic in the forefront of our industry for the past few years. We've all heard the term "UX" or "User Experience" or "Keep your users in mind," but how exactly do we do that?
We have information on what makes a good experience for users and who we need to accommodate, but sometimes the time or budget simply isn't there. When I first began to delve into UX, I kept running into the issue of believing I didn't have enough time to create all of these fantastic ideas the industry was raving about. After reading a handful of articles and doing a bit of playing around, I found that it doesn't take that much time to implement a few elements or ideas that will better your product’s quality. In this article, we are going to cover a few of the ideas that will get you on the right track, without breaking the bank.
Speak the user's language
We need to keep the product's dialogue simple and natural as well as allowing the user to respond naturally. "Forgiving format" allows the user to input data in a variety of formats while leaving the interpretation of the data to the system. We see this in forms all the time, most commonly with address/zip code search fields, allowing an email address or a username to login, dates, telephone numbers... the list goes on and on. This requires a bit more programming to interpret the multiple ways data can be entered, but not as much as you might think.
Most languages have ways to digest strings and data. With this functionality in our toolbox, we can quickly interpret what the user has entered. For example, let’s say we have a search field on an eCommerce site. A user might want to search for the type, name, SKU, or size of a product. We don't want to have multiple text boxes for them to choose from, but rather they should be able to enter what they want in a "search" box and the system will understand what they mean. In this example, you would need to add a few "where" clauses to your query.
Another example, as mentioned above, would be to allow a user to enter an email address OR a username to login to a website. One quick way we can do this is to search for the "@" and period characters.
To make ease of phone numbers, we see two commonly used approaches. One, let the user go hog wild and accept whatever they input or separate the phone number into multiple fields. I prefer the first method simply because a lot of the sites I have worked with don't make a phone number mandatory so its importance is lower than, let’s say, their email address. If, however, your product depends upon reaching out to clients with a phone number, you could separate the phone number into 3 (or 4 if you want to include extensions) inputs. I do recommend having the tabindex set on these so the user can easily navigate the fields.
The easy, and common, way out is to just have a label saying something to the sort of "(ex: 01 Jan, 2016)" or "(Address, City, State, Zip)" to let the user know how we need the input, but these often get ignored on the first go around. In order for us to keep the form filling process as painless as possible, we need to keep things feeling natural.
Use constructive error messages
There is nothing worse than filling out a tedious form only to receive an "Error has occurred, please contact support" message. We need a specific indication of what went wrong. A constructive error message will keep the user on track and keep them from feeling lost or defeated. The best error message will include instructions on how the user can rectify the problem they have encountered. Unfortunately, there isn't a quick way to implement these messages, but there are libraries that will ease the pain.
Even though error messages can be time-consuming, they play an important part in having a helpful and impactful experience for a user. An error admitting default gives them a better understanding of what happened compared to an "An error occurred, please contact us." Report the error that has occurred and how they can remedy it. Don't let them get stuck.
Keep them from feeling cornered
Always have a way for the user to go back. Be it breadcrumbs or a custom back button if you are using async requests, give them something to make them feel like they have control. In my experience, limited breadcrumbs work well for stores and blogs where custom back/cancel/exit buttons are great for interactive portfolios and single-page sites.
If you are using some sort of framework, this functionality will hopefully come out of the box for you. I prefer to use Laravel, a PHP framework. There are tons of other frameworks to choose from, so if you do not currently have one and are looking for a solid PHP solution, I would recommend Laravel. The majority of popular frameworks will come with some sort of built-in functionality for custom error messages, validation, breadcrumbs, pagination, and many other elements users expect to be on a website or product.
Make shortcuts, but don't make them mandatory
To me, this isn't a “make it or break it” tip, but it sure is nice when you can complete an action without having to jump through a few hoops. There is a great library called shortcut.js that can get your shortcuts up-and-running. The custom functionality will need to be written, but this library will help recognize what keys have been entered, whether or not to enable a shortcut, and allow callback functions to execute when a key combination is pressed.
One way keyboard shortcuts are appreciated and utilized by users is when they need to repeat certain tasks over and over. For example, navigating between an asset manager and an email editor. Gmail uses keyboard shortcuts to improve productivity.
A rule of thumb is to not overwrite default browser shortcuts, such as ctrl + v to paste something. With the above-mentioned JavaScript library, shortcut.js, capturing these events is quite easy.
It is important to note that it’s a good idea to have a link showing a list of available shortcuts. There is no sense in developing shortcuts if users can't find out what they are.
Give Feedback
This also ties into keeping your product's language simple and natural. Always let the user know what is going on and where they are; don't let them get lost or not know what the next step is. Highlight certain sections that will lead forward or backward in the user's flow. Keep them informed with meaningful success/error messages and how far along they are in the process. One of our biggest "I'm out of here" moments occurs when we fill out a long form, hit next, only to find out there is an equally long form. If we keep the user up-to-date on where they are in the progress, they are more likely to stay focused. Keep things simple.
Keeping these points in mind during the stages of your product's creation will certainly up your product’s quality. The real UX tasks come in when you are able to meet with the company's stakeholders and users but sometimes that simply isn't an option. Remember: keep it simple and do what you can to let the user feel in control.