Drastically Improve Your UI Designs With This Technique

One of the more arbitrary steps in the process of designing user interfaces is deciding what to put where and making sure that we've laid out all of our UI elements in the most optimal and logical way possible to create the best user experiences for those using our products.

The 'What happens if...' technique is a powerful and simple method of working that takes the headache and guesswork out of deciding how and where to place our content. It also helps to ensure that we're not leaving any important considerations out and that our designs can be reproduced accurately and easily by our developers.

Solving the content layout struggle

If you've ever stared blankly at your artboards and Figma frames wondering whether you should put your text on the left and the image on the right or where you should place the category tags on a post, than you know that struggle of deciding on UI layouts and element placement.

Over the years working in startups and enterprise companies as a product (UX/UI) designer, I've used this process for both small and very large projects to keep me on track and making sure that there are no gaps in my design states, logic or UI interactions.

This technique will also help us to create designs that can be reproduced accurately by our developers once they head off to production, which will make your developers absolutely love you! I also recommend working with your developers to help you determine the 'What happens if' questions that you should consider.

In this example, I'm going to go walk through how I design a blog post in Figma using this 'What happens if...' technique, along with a content UI checklist.

The Technique

Designing user interfaces is about determining the visual appearance of the different states of feedback from the user and the system and the best layout of each component and how they should all flow together. So conditionals are really at the core of what we're designing.

The 'What happens if' technique is based on conditional logic. It's what engineers use to determine interactions based on context, actions and various use cases that might occur when a user interacts with our design, product or application.  

💡If you're interested in learning more about the UI design and how it's different from Graphic or Web design here are some lessons on that.

I like to start out by creating a simple content UI checklist right inside of Figma (or the design software of your choice).

Here is the UI checklist example. On the left side, I've listed the main content/design elements that need to be added to my blog post card. On the right, I've added checkboxes to make sure that I've considered the empy/alternative states that might be needed. You can create more elaborate UI checklists and you can also do this in a companion checklist or notetaking app like Notion, Evernote, Trello or even on a piece of paper. We've also created some very extensive free UI and UX checklists for Notion that you can copy for free here!

💡Here are some more recommendations for product design and UX/UI Checklists and Design Patterns!  

This UI design checklist includes common elements like:

• Author
• Author avatar
• Date
• Tags
• Title
• Body (Excerpt)
• Read time

The thing to keep in mind throughout this process is that in the context of designing dymanic user interfaces (as opposed to static websites), whenever a user adds or excludes information or content from our user interface, our designs need to adapt accordingly.

Next to my UI checklist in Figma, I've created a simple Blog Post Card

This author added their avatar, date, featured image title and excerpt. But they are missing some optional elements. This is where the 'What happens if' technique comes in to help us determine if we have accounted for all of the possible additions and exclusions that the author can control.

What happens if there are tags added to the post?

This author didn't add a tag to their post but if we want to make sure we're designing all the states and not leaving any design gaps, we have to decide where a tag could potentially be added without interrupting the entire user interface design or user experience of the post. So our first question might be 'What happens if there are tag(s) added to the post?

So, let's create a little category tag. If I add it in between the author and the title of the post there isn't much room.

Adding it above the author's name is also too tight and means we would need to push all of the content down within the blog card.

We could add it over to the right side of the author's name and date but then, 'What happens if the author's name is very long? This will leave less room for tags.

"What happens if there are multiple tags?". This is also a state that we need to consider and design for.

We could move the tag(s) to the bottom of the post, but a single tag placed here looks a lot like a read more button, which could confuse our users. Design all the possible components.

Design all of the possible components

So now that we see how the addition or exclusion of one small element can have a ripple effect on our overall User Interface design, one method of working that can help us adjust things appropriately is to create all of the possible components that could be added and then create versions of the max and min states of the blog post card for each of these states.

What happens if the title is very long?

Let's say that it the we have a very long blog post title. We have to decide whether we should allow the title to wrap to a second line, a third or to truncate it and at what point.

You might think, well what about just making everything longer and increasing the height of the card? And we certainly could do that just but then let's say for example, this blog post card will exist inside of a grid of other blog posts, which is quite common for blog post cards. If one of the posts has a longer title that pushes the entire card length down, then when these cards stack next to each other, they won't be the same height. That would work for a Masonry style layout, but what you might want is just an even grid. So we have to figure out how to accommodate different lengths of text without changing the overall height of the card. Let's go back to our first example and see how we can move these elements around in order to accommodate all of the possible permutations and conditions that this postcard might exist in.

First, I think I would prefer to have the blog title wrap for two lines before it truncates. So that means if it goes to three lines, there will be ... the end, but if it's one or two lines it will simply show the entire title. The other issue now is that a two-line title means that we need to reduce the length of the body excerpt test if we want to keep all the blog cards the same height.

So I'll repeat this process with the remaining elements, testing various things, moving them around and then asking what if conditional questions to help us decide the best layout for our components.

What happens if there are blank states?

The last thing to consider is 'What happens if the user doesn't upload some information?', 'What are the blank states?

One option is to make each of the fields required in the back-end so that the user is forced to upload all of the content. However, for the best user experience, it's always best to make the designs do the work on behalf of our user. For that, we need to make sure that our designs behave and look consistent even with the exclusion of some information.

Here in this final example you can see this layout best answers all of my conditional questions.  It works with or without a featured image, with none, one or multiple tags. with a longer author name etc.

You can see how thinking and working this way can save you from making arbitrary design decisions or leaving our important things that you might cause you to have to redesign entire components to accommodate them later.

This is also a great way to start thinking in terms of component design and design systems

💡If you want to learn more about component design and design systems here is a lesson on that.

In summary, thinking in terms of conditionals and using the 'What happens if' technique along with a UI design checklist can help us:

• Ensure our designs adjust to user input
• Prevents gaps in our flows and use cases
• Adheres to best practices and design patterns.
• Helps our developers know how things should look and behave
• Helps us account for all of the components that might appear or not appear
• Consider all of the interactions that might take place

So the next time you sit down to design a user interface follow this technique:

• Create your content checklist
• Think through all of the possible conditionals and empty states that your users will need
• Work with your developers (if you have them) to determine what is required
• Create all of the components on your checklist
• Position and move them around based on the intended user experience

📚Want to learn end-to-end product design with us? Check out our Product (UX/UI) Design Course.