Building Websites with a Focus on Usability and User Experience

The total number of usability designers worldwide is small but growing. Most designers consider themselves an expert in specific fields like graphic design, icon design, website layouts, animation, or mobile applications. But when it comes to UI design the most important part always boils down to the user experience. A sumptuous user experience is created by placing a focus on clean usability and speedy performance.

In this post I’d like to cover a few basic concepts for improving website usability. Website design is often seen as a creative medium – and it definitely is, but that’s not everything. Web designers should be experts in user experience because they’re not just designing a portrait to be hung on the wall. Websites are meant to be interacted with – in fact, many designers would agree that what separates a good website from a bad one is the ease of usability and user experience.

Symmetrical Code

The process of designing a responsive website seems detailed and convoluted. You have to build an entire layout which updates smaller and larger based on the screen dimension. But this layout should be coded using one codebase of HTML and CSS.

Granted with practice this gets a lot easier because you can plan moves ahead of time. But when it comes to usability I recommend sticking with a single base of symmetrical code. Figure out the best way to code a layout so that it’s flexible at any size. Look into browser restrictions and bugs that may affect users on legacy versions. Usability requires testing to ensure that everything turns out exactly as you’d like it.

A symmetrical codebase also makes updating a whole lot easier. When it comes time to edit an existing layout you can update buttons, forms, or interfaces using the same block of code. Unless you’re building a large social network or web application I highly recommend sticking to one stylesheet. Even compressed it should still be small enough to load quickly, and you can always save a local de-compressed copy for editing.

Consistent Load Times

Snails-pace load times are a primary cause of temperamental mood changes in Internet users. Granted this really isn’t such a big deal, and we are lucky enough to even have Internet access. But most people would agree that waiting around for 5 or 6 seconds each pageload gets incredibly frustrating.

The best solution is to reduce oversized assets and possibly offload HTTP requests to a faster web server. Although you can’t “see” the latency time in a website design it can have the same effect as a poorly executed design. If a website is broken, if the color scheme doesn’t work, if the navigation is difficult, or if the page takes too long to load… people can’t leave quick enough.

By placing a focus on performance you’re starting from the ground and working up. There’s little value in a beautifully-designed website if it requires 20 seconds to finish loading each page. In order to rectify the situation you need to first understand the problem(s).

Google PageSpeed is a free webapp that can parse your website for slow-loading areas. Most of the time these are tidbits of code or images that need to be optimized. If you have access to Photoshop or another graphics editor then image optimization is just a matter of repetition. External JS or CSS files can be minified with the help of online tools such as CSS Minifier or JS Compress.

I will admit this can get frustrating. But these performance enhancements will last a lifetime – if you just do them once you probably won’t need to do them again.

Planning Ahead

It never hurts to keep your mind focused on the path ahead. The best time to plan is right after starting a new project when everything is fresh. New ideas, new concepts, and seemingly endless opportunities await the creative mind with a focus on usability.

Locate other examples that you like which pertain to the same ideology. UI design is never easy but it can be made easier by simplifying the whole process. Usability is a partner and potential moniker of simplicity. Hold a solid focus by designing from a standpoint of the user – make sure that you’re seeing the final result in the same vein as a typical user.

Every website requires lots of moving parts so you have to be considerate of each one. If it helps to make a list you could expand on portions of the layout that require attention. Think about how menus should animate, expand, or how users should interact with such elements. These ideas don’t always tie into the design aspect but do prove useful to developers.

Interactive User Fields

In the past I’ve covered similar content on the usability of web forms. These forms might include anything from a signup page to a contact form or profile edit screen. When building a new concept the whole process is often much simpler and cleaner. As websites expand larger the idea of usability gets tossed by the wayside to focus more on new features and design aesthetics.

But form fields are some of the most important pieces to any layout. Assuming the website is even mildly interactive, form fields connect the visitor into the website. Static pages generally place more focus on usability in terms of navigation and content structure. While both topics are very important you’ll need to strike a balance between them both.

Every form is going to be different based on the style of inputs and how the form is fitted into the page. A contact form may only use 2 or 3 input fields and a textbox. Others may require dropdown select menus, checkboxes, or radio buttons. Styling and aligning each of these elements into a well-designed theme is difficult. So before even tackling the design make sure your forms are both usable and intuitive.

Like most aspects of design I recommend sketching or taking down ideas in written word before articulating them digitally. I find the keyboard and mouse interface to be slightly limiting when it comes to creative output. But a piece of paper is a blank slate, and the pencil can draw anything you want. Consider not just how the form looks, but how it might behave.

Is there any incentive for people to complete the form? Is the design using clear label text and readable microcopy to get the point across?

Final Thoughts

Performance and usability boil down to simplicity and ease-of-use. If the page is taking a long time to load, that’s a problem. If page copy is ambiguous or difficult to read that’s a problem. Spend even a little bit of time focused on the user experience before delving right into the pretty colors and graphics. You’ll save yourself a lot of frustration down the road by organizing a clear executable design & usability plan.