I started my career as a Drupal developer, but with time I shifted towards content strategy and user experience (UX), which made me realize, among many other things, how developer decisions impact design. That's why I believe any Drupal developer can use this advice: everyone who contributes to building a website also contributes to UX. When we all incorporate UX design thinking into our work, the quality of our output can only get better.
In this article, we'll discuss the goals of UX design, how users evaluate it, and, specifically, how developers can do their part to build a better user experience.
What is User Experience Design For?
The most obvious answer is that user experience design should make users happy. We want them to find what they need and feel good about their interactions with the site, application, or product.
That's the first part. The second part is that good UX design finds the overlap between what users like and what the organization wants them to do. It satisfies the user in achieving their goals; it also gently nudges them toward the information, transaction, task, or interaction that contributes to the organization's goals.
The ultimate goal of UX design is to balance what the organization needs with what the user needs so that everyone walks away from the interaction with what they need.
Isn't UX Design for... Designers?
Well, yes. However, design mockups don't include everything a developer or site builder needs to know. Many UX design decisions are either functional, contextual or dependent on components unavailable to the designer. Other choices may be out of scope for the designer and pertain more to information architecture or markup.
In practice, this means that developers often end up making on-the-fly UX decisions during configuration or development. This can include many questions not answered by the design mockups:
- Link text or URLs for icons
- Video player controls
- Search filtering, result ordering, and pagination (For a focus on search UX, see How to Design a Search Experience Users will Love.)
- Form labels, validation, and error messages
- Placeholder text behaviour
- 404 page appearance and functionality
It's little stuff: the apparently irrelevant, imperceptible details. However, this can have a huge impact on the user experience. It can mean the difference between giving people what they need and sending away some unhappy users. Let's talk about why.
Six Elements that Impact User Experience
If we want to make good UX decisions, we have to think about what is going on in a user's brain and what factors impact how they feel. So we break it down into six key elements that factor into user experience:
- Language - Along with speaking to our target audience in their preferred language(s), we must adjust our tone, comprehension, and readability to suit them. It is often on developers to ensure that this applies to functional languages like navigation, form labels, link text, alt text, and search filters. When building or configuring a site, keep an eye out for inconsistent capitalization and language, misspelled words, and technical or obscure word choices.
- Predictability - Whenever possible, build something that feels familiar. While developers tend to be expert super-users who can easily adapt to a poorly designed site, most end users are frustrated when things don't work as they expect. That thing that seems like a clever innovation can easily become a hurdle that prevents the users (and organization) from achieving their goals. If something seems unconventional, flag it and consider whether it should actually appear and work that way.
- Timing - Users like speed and get frustrated if simple tasks take too long. Slow page loads, confusing navigation, extraneous steps, and poorly managed search results drag down the experience and make it more challenging to achieve goals. As a developer, keep an eye out for uncompressed videos and images, wonky menus, and unfiltered, muddled search results.
- Comfort - A major goal in UX design is to make the experience as satisfying and pleasant as possible. Large text, generous whitespace, good organization, accessibility, and minimal clutter all contribute to ease of use and a comfortable look and feel. When developing the site, be conscious of element spacing and consistent use of font families, spacing, and size.
- Branding - Branding is a key tool your organization uses to convey its personality and values. It also serves vital functions for UX design. Consistent branding signals to users that they are in the right place. For developers, brand identity rules provide essential guidance for making on-the-fly design decisions in development. Reference your organization's brand standards for colour codes, font rules, whitespace requirements, and tone guidelines.
- Accessibility - We can't talk about user experience without accessibility, and developers play a critical role here. Semantically structured markup is essential for those using a screen reader, navigating via keyboard, or using other assistive technologies. (If you've never tested a page with a screen reader, try it now. You can use the Mac Voiceover tool or download the NVDA screen reader for free.) Semantic markup, well-organized information, useful alt tags, jump links, and meaningful link text are critical to keeping your site's information and tools accessible to all users. For a deeper discussion of how developers influence accessibility, see Accessibility, Applied: Chatting with Firat Ikiler, UI Engineer.
Improving the Off-Site Experience
The markup we use impacts how web content is displayed on social media and in search results. This is an area where developers often have to take the lead, selecting the metatags that will determine what users see before they arrive on the website itself.
We can optimize this discovery experience with thoughtfully configured metatags that provide good defaults. A relevant image and accurate title and summary text are important to include. We can also prompt publishers to include accurate and appealing titles, preview images, text snippets, and other applicable metadata.
Content Editors Are Users, Too
A bad user experience will hinder your content editors and site visitors. When an editing interface is clunky or confusing, it slows the publishing process, discourages content creators, and makes it more difficult for publishers to manage quality and workflows.
When building for your content editors, balancing flexibility and control is vital:
- Your configuration should include a comprehensive library of predefined content types, paragraph types, and block types that address a range of use cases.
- Style settings should be limited, enforcing adherence to style guidelines and design conventions.
- HTML entry fields should be avoided or tightly restricted.
- User roles should align with team roles and include permissions only for the functionality required by each role.
Additionally, admin configuration should reflect the realities of the creation and publishing process, with workflow states and transitions to match.
Drupal gives us control over a number of simple things that can significantly impact content editing. As you're configuring and developing the admin side, be sure to take advantage of the high-value details:
- Provide meaningful, relevant names for content types, blocks, taxonomies, templates, and other configured bits
- Ensure that content creation forms display consistently across the system
- Enable preview and autosave
- Configure and test the Media Library
- Configure image resizing that makes sense with the site's design and content assets
How to Get More Involved
So that's all great, right? You know you can watch for many things and improve the user experience. But how do you get an understanding of what your designer meant and what your specific users need...specifically?
The best way to understand the intent of your site's design, and the users you are building it for, is to get involved in the design process. This doesn't have to be hugely time-consuming, and you don't need to sit in on every design meeting and colour palette debate.
The simplest and most obvious way to understand the designer's intent is to ask:
- How do interactive elements behave?
- What happens when users click a link or button?
- What text is fixed, and what can the content team edit?
- What exactly is the spacing between components?
- Are all those animations and videos necessary?
- How should they make the user feel?
- Where are missing controls, and how should they look and behave?
Beyond that, try to participate at the wireframe stage and use these approaches to both understand and help inform the UX design for your site:
- Attend a UX workshop to understand user needs and pain points.
- Collaborate with designers to improve the technical viability of designs.
- Provide insight into functionality like search interfaces to ensure they are considered and addressed.
- Discuss available content with designers to ensure designs work well with real content.
Getting involved early both helps you make better UX decisions in development and reduces the number of decisions you need to make.