The Convergence of Code and User Experience

Working on a complex web application can be, well, complex. The balancing act between front-end and back-end is constant, with the intricacies of the data and code constantly affecting the user’s interactions, and vice versa. We routinely start with designs and wireframes of what the final front-end product should look like, but what happens when project-specific, code-related intricacies and challenges affect what the user sees on the front-end?

For example, an application relies on an API, and that API can produce a myriad of errors that can have a broad range of affects on how a user interacts with the site. Say we are using the Facebook API to login, and we get a login error back from Facebook. How do we tell the user about this? Or do we even tell them at all? All of the design and development decisions around how the user interacts with the code of an application make up the critical field of User Experience (UX).

Unfortunately, it is incredibly easy to never even consider UX when navigating through an application’s development. Tools like Bootstrap allow us to just throw messages, alerts and notices a user’s way without context or design improvements, and platforms like Ruby on Rails allow a developer to whip a form together with a couple of lines of code, never taking into account whether or not the form is structured and displayed in a way that makes the user’s experience easier and better. Taking the time to consider UX on a project, and specifically how code affects UX, is something that is crucial to making a great application, and that extra time and care can differentiate the good from the great.

Here are five key components of UX to consider, and some questions we ask ourselves when developing a site:

  1. Interface: Is the site’s interface intuitive? Does it look simple or confusing? Are there clear buttons, forms and actions for the user?
  2. Usability: Is the site responsive on all devices? Do things like text size, spacing and font make my content easier to consume?
  3. Expectation: Can the user find the right content when they go looking for something? When they hit a page, do they expect one thing but get another?
  4. Content: Does the site’s content add to the overall experience? Is there too much? Too little? Am I sacrificing the quality of my content for other motives, like SEO keywords?
  5. Timing: Does the user get the right content at the right time? Do they see what is most important to them when they first arrive? Or do they have to go searching and waste time?

As mentioned earlier, a very digestible example of a simple UX challenge is how an application shows errors to a user. A great example of this is a 404 error page. The average person has no idea what a 404 error is, but they probably can infer that it isn’t supposed to happen. A simple yet effective mechanism for handling 404 errors is by designing a custom page that doesn’t just state “404 Error!” but rather informs the user that something went wrong, and what they should do next.

A 404 page we designed for MyPorter.com
A 404 page we designed for MyPorter.com

One of the most important considerations with UX is a user’s “path” through the site. Is it clear that they know where to go, what to click on, where to input data and so on? Do they ever get “stuck” and end up at a dead end? By considering a user’s interactions at every turn, you can greatly improve your site’s UX. Just put yourself in the user’s shoes and start asking questions. If you have more questions than answers, then take some time to go through the 5 factors above and get started improving your UX.