complex logic interfaces

One of the toughest design challenges out there is in creating interfaces that essentially represent code. This is just one of the many types of design challenges I faced while working at Aktana.

Developers use conditionals to filter through tons of backend data and then associate an action with those results. In code, writing conditional logic can get very tricky. Yet, it’s actually more flexible in code because once you start to represent that within an interface, the UI elements are locked into place. True, one can make the form dynamic based on the path the user is going down, but that is a rabbit hole of progressive disclosures, hidden choices, and repeated calls to the server. The UX has to be flexible enough to cover all the use-cases in an intuitive way, yet static enough to not excessively surprise and confuse users.

I found a few ways to lessen the pain in these types of interfaces.

Use A Grid

The interface itself is essentially a form that is dynamic and reads in “z” shape going down the page. Think of grid lines as quarter-note beats in a song. As the song progresses and the beat is established, all the elements that stick to the count are predictable, making the song catchy and easy to listen to. The same can be done visually, with UI elements that fall into predictable spaces. This becomes even more important when there’s an overabundance of elements on screen with the potential of scaling. If the user adds more conditions, the buttons will line up uniformly going vertically. To the extent possible, pop-up and dropdown panels should also align to the grid.

Minimize Variety

The fewer shapes and patterns, the easier to parse. Look for ways to remove uniqueness, things should be uniform and feel like part of a family. In my example, there are only two widths for a button. The smaller button shape (the shape with four rounded corners) is cut in half to accommodate two elements in one: a “greater than” or “less than” dropdown and an input field. The larger button shape is about twice the width of the smaller (including the space between), which is natural, not arbitrary.

Use Containers

Groupings of conditional logic should be bounded visually. These groups should have plenty of room around them so that the user’s eye can remain comfortably within the space with no peripheral distractions. This will also help to reinforce the concept that each of these blocks is one rule.

Hard to Make, Hard to Destroy

The more elaborate the work, the more time and effort it takes to create an output, the harder it should be to destroy or delete that work. Provide ways to save along the way, whether asynchronously or with an obvious button. If the button is not obvious, users will walk away, close it down, or suddenly lose connection. That’s a horrible feeling.