To do our jobs well as web developers, designers, and UX/UI experts, we are constantly thinking about the user. After all, they are the ones who will be interacting with the site, placing orders, consuming content, submitting information, and more. All of those tasks must be efficient, easy to understand, and appealing. When building a new site, or adding functionality to an existing site, there is one other user that is often forgotten—the site administrator.
A successful website should be dynamic, allowing content to be created and modified easily. The process of adding new products, news, offers, and functionality to a site should not be hindered by the site itself. Often, those who build the website aren’t the ones managing the site’s content. As web developers, we build tools for others to use, so we need to tailor how those tools work from an administrative perspective for those users.
Let’s look at the example of adding a banner or hero section to the top of a page and what we can do as developers to make it a great experience. This will include a few common elements: a background image, copy, and a call to action.
Background Image
Give direction to the site administrator on the size of an image that will work well. While custom image sizes and WordPress plugins can help make sure file sizes are manageable, providing direction will help ensure a desirable crop of the original image. Only providing a width can result in a tall image of something, such as a skyline, getting cropped to only show the tips of some buildings. If the person uploading knows both width and height parameters, they can properly crop their image ahead of time.
Copy
If your copy will have a title, subtitle, and longer text description, capture those three aspects separately. Capturing them separately will allow you, as the developer, to ensure each element has proper heading tags and consistent formatting.
CTA
Establish predefined options for combinations of background and text colors that match branding guidelines. Also, consider where links will be directing users and make them easy to select. If your links will always be to internal pages or products, let the admin select them from a dropdown menu, instead of a field where a URL is pasted. This ‘smarter’ connection can account for changes to URLs or slugs and let the admin search for their destination.
Colors and Contrast
Any time we are layering content on top of a background, we want to ensure the admin can confidently create text that is legible. Consider adding settings to provide your templates with information about the background image. Options to tell the templates that the background image is light vs. dark or predominantly a specific color can give administrators the control to set the text color based on that value. This keeps text within branding guidelines while assuring proper contrast. Be sure to add notes to any fields like this, so the admin knows the importance and implications of these settings.
Conditional Logic
Utilize conditional logic to only display relevant input fields. Similar to building a front-end form to capture information, you might have fields that are only required depending on the value of a previous field. Keep the user focused on one step and a time and don’t overwhelm them with irrelevant fields.
Remember, when you’re doing any sort of website development, you’re building a tool for someone else to use. A tool that is hard or confusing to understand will deter use, causing a project to suffer. Tailoring a site’s back-end experience to the admin will assure them that they can confidently maintain and and grow their website over time. This will also keep their trust in your work high, allowing you to focus on moving the website forward. Taking the time to make your website more user-friendly, on both the user-facing and administrative sides, means less time spent on support and more time making progress.
Subscribe via RSS
