Last week, I had the pleasure of speaking at CHADev, a lunchtime series hosted by the Edney where Chattanooga’s developers gather to “talk tech.” CHADev is an opportunity to become acquainted with a bigger community of developers who want to learn from one another. I really enjoyed my time there, so I thought I’d recap a bit of what I said.
Set Sail with Backend and UX
The backend of a website is not directly seen by users, so we don’t often realize the impact code has on user experience (UX). It’s like wind in the sails. It moves the boat forward, and ultimately brings the site to life.
You may remember a couple of weeks ago, Tony wrote about how developers anticipate UX and the customer’s journey through planning and marketing research. Today, we’re taking that concept further by explaining how user interface design impacts site experience.
What is User Interface?
User interface design, or UI, is any application you see and interact with on a site’s frontend. This could be icons, search bars, headers, or navigation. All of these things are coded and thought out in the backend. UI design works with a site’s architecture or organization to accomplish the goals we have for a site. We want to make it easy for users to scan a page quickly and find exactly what they’re looking for. Visual cues like headings, icons, and images help direct the user’s attention through a page and to their destination.
UI Design and UX
Every visitor to your site is different and will have a different starting point based on what they want to achieve. By focusing on UX and UI design throughout the development process, we can ensure users have a great experience from start to finish.
Here are few things we consider when we begin drafting UI functionalities:
- The Right CMS for the Job
To ensure an optimal site experience long term, it is important to provide a great backend experience for your site admin. You don’t want something to break on a site because your client isn’t sure how to edit a page. Do your research and find a content management system (CMS) that fits the needs of both developers and site admins. We use ExpressionEngine. This CMS gives us the ability to define fields and data types, making it clear to admins where and how to make future edits.
- Step-by Step Product Search
We want every action taken on a page to seem natural. But things can get complicated when one product has a multitude of options for customization. Rather than having potential customers dig through endless pages of inventory, step-by-step dropdowns can reveal additional product options as a user checks certain boxes. It’s a quick way to help narrow their search and find the specific item they’re looking for.
- Layered Navigation
Another way to organize product search is through layered navigation. Stores like Amazon layer navigation using an interactive sidebar. This allows users to select multiple search criteria and narrow down displayed results.
- Multiple Ways to View Product Details
Dynamic options and tools like magnifying image sizes, content descriptions boxes, and resource links help buyers see your products from multiple angles and help them make informed decisions.
- Convenience Features
Finally, automated features like auto customer logins and auto-suggestions that fill in incomplete search queries are subtle ways to provide users with an effortless experience.
Put it to the Test
Now that we’ve planned and incorporated all design elements, our last step in a web build is beta testing. This is a time to check work for hang-ups and confusion. It’s a time to make sure our functionalities work seamlessly on all devices. A good tip for finding kinks is to have non-developers help test. Usually, they haven’t been immersed in the site’s functionality, and they will navigate pages similarly to your target audience, providing helpful feedback about their user experience.
UX + Backend = Smooth Sailing
User experience is important to developers because it is a window into the success of a project. When we provide our users with a stellar experience on the sites we build, we know we’ve done our jobs right. Through code and user interface design, we can make moving through a site smooth sailing.
Thank you to our friends at the Edney for allowing Papercut to be part of another great get-together! We hope to see you, blog readers, at our next event!