Plan for the worst
Interactive design breathes, lives, and changes on a constant basis. It’s one of the beauties of the field. We are creating systems and structures that support dynamic content. It’s what keeps content new, relevant and interesting. This is a key difference from other graphic design mediums like print or packaging where the design we create is fixed. Once the copy and content is determined, it doesn’t change.
Interactive media is designed to support changing elements. Depending on the nature of the medium, this content can be predictable to some degree, but as it varies we need to account for the effect it has on look and feel.
A common mistake I observe with designers new to this field (and even some experienced ones) is designing for best-case scenarios vs. worst-case scenarios. We’re accustomed to making everything look the best it possibly can down to the pixel, so why wouldn’t we choose to design for best-case scenarios when creating mockups and comps of digital interfaces?
I’ll tell you… when we design with optimal content, we are setting ourselves up for failure. If we don’t have a plan for what will happen in the worst-case scenario, it’ll be determined by the code and will often present a less than optimal result. Time and time again I’ve witnessed missing content, overflowing copy, and squished, illegible materials because an interactive designer didn’t properly plan.
A successful system will account for the range of content that could be displayed and will solve for the range in an elegant and systematic way. So when designing for eCommerce, point of sale systems, social media, dashboards and data-driven displays, we want to shoot for the best solution that solves for a range of content.
Here’s a few tips on how to account for worst-case scenarios when designing interactive content:
Audit dynamic content: Consider the type of media you’re creating and take inventory of the areas that are dynamic. For example, are you creating a screen for an eCommerce shopping cart? If so, what content could change on that screen vs. what is fixed? Content that is dynamic could be changing prices, item names, item descriptions, etc. Content that could be fixed might include call-to-action buttons, page titles, site navigation etc.
Audit the range of values: Once you have an understanding of what could be dynamic content, audit the range of values that exist within those content buckets. So if you’re designing for a chart that has changing axis labels depending on the data, think about the range of characters or words your titles could accommodate. Count the number of characters in the highest value and the lowest value.
Test with maximum and minimum values: Once you know the maximum and minimum values you’ll be able to test your designs against them. At what range of characters is your design successful? Adjust your type sizes, spacing, etc. to accommodate both the most common and worst-case scenarios.
Pro tip: Make sure you always test with capital M’s or W’s for characters and 5’s for numbers. These are the widest and will really help you test spacing properly.Create Rules: When you know your design will support a certain limit on content, then you’ll be able to create rules around what will happen when that gets pushed outside of range. For example, if the data that populates an item description area exceeds the maximum character count, what will happen? Will the container expand? Will the content drop to another line? Will ellipse appear indicating there is more to read? You’ll want to make sure whatever solution you decide on is consistent throughout the whole system, provides an elegant experience, and is legible and understandable to the user.
Communicate with your dev team: Communication between UX/UI and development teams is mission-critical for any successful interactive design project. We always want to have a discussion and/or proper documentation to communicate with the engineers building the system. Make sure you talk through the rules you’ve determined, the capabilities of the system and how it will respond when things change. Do not leave it up to your dev team to make the design decisions unless they are properly educated in the best practices and UX strategy.