Front-End Development is User Experience Design

Published on .

I was speaking yesterday with a colleague of mine tasked with auditing a website. She, a user experience designer, is responsible for a great many things: facilitating client kick-off exercises, conducting user interviews and research, assessing information architecture, and designing the user interface with wireframing tools like OmniGraffle. Instinctually, she started the audit by assessing the website’s content structure, information organization on the page, and the overall visual design.

Without putting much thought into it, I suggested she open up her browser’s Web Inspector and get a feel for how the website was built. Does the website’s markup appear to be concise? Are there an over-abundance of images? Are stylesheets and JavaScript files minified and gzipped? There’s a wealth of information valuable to user experience designers buried amongst the seemingly-arcane HTTP status codes, intimidating console.log() messages, and curly braces.

I didn’t think much of the conversation as I went about the rest of my work day. It wasn’t until this morning that I became consciously aware of what I was getting at: Front-end development is user experience design. More specifically, front-end development is one piece of the user experience process.

As front-end developers, we’re responsible for building the user experience. We take the information architecture, the wireframes, and the visual design, run it through the blender of HTML, CSS, and JavaScript, and deliver a functioning website. Every decision we make during the buildout phase affects how quickly users can accomplish their tasks. Thinking of using a CSS framework like Bootstrap? What about including a JavaScript library like Modernizr? What’s your team’s process for optimizing images? The answers to these and a thousand similar questions carry a cost and should be carefully vetted before inclusion in a website’s codebase.

Every byte we ship over the wire matters. Clearly, a slow website is a bad user experience. So too is an inaccessible website. Every single line of code we write affects the user experience. Performance and accessibility aren’t solely the front-end developer’s responsibility, but the onus is on us to ensure that the code we write improves the user’s experience.

To be clear, I’m not advocating we abandon useful tools like Bootstrap, Modernizr, or any of the other great libraries and frameworks we have at our disposal simply because they add weight to our websites. I am encouraging front-end developers to keep the user’s experience front-of-mind throughout the build process. As we’re tasked with writing the code delivered to user’s browsers, it’s our responsibility to act as stewards of the user experience.