The hidden design step that can make or break your interface

When you ask people what design means, you’ll probably get a lot of answers about colors, fonts, and layouts. You might even hear about mockups or wireframes if you talk to anyone who’s actually done some design work.

This post isn’t about any of those things.

The first project for Bloc’s UX/UI Design students is to design an app called Blocbox that is supposed to collect and share notes, images, etc. The idea isn’t based on any one existing app, but it’s clearly inspired by apps such as Dropbox, Evernote, and Google Keep.

Before starting any visual work, it’s essential to nail down what you expect the app to do. If possible, it’s good to get feedback from potential users on how they might use such an app or even if they would. Also, try to get as much demographic diversity as you can anytime you’re getting user feedback. Otherwise you risk shipping laptops with inadvertently racist webcams.

User feedback will help you figure out how people might actually use your app. This may not align with how you want people to use your app, so pay close attention here. Sometimes you can train a user to do things your way, but this is the exception, not the rule.

Now we’re getting to the good stuff. We’re starting to think about the parts of the app and how to arrange them, but we’re still not dealing with the visual stuff yet. This stage is all about flow, which I feel is one of the most important yet most neglected parts of an interface.

Actions within an app rarely happen in isolation. Say you’re trying to draw a rectangle in a program like Photoshop or Sketch. You can’t just press a button and magically expect the exact rectangle you want to appear in the appropriate location. You have to take a series of steps to make that happen.

Once you realize this, it’s a no-brainer to try and organize those steps in a way that makes things as easy for the user as possible. But I think this step is frequently skipped or given the barest minimum of attention when designing a product. When I brought this up with my mentor, he agreed. He added that in his experience, it’s hard to get clients excited about the flow of an app. There’s a lot more interest in–you guessed it–colors and fonts. But I think getting things wrong at the flow stage can damage usability a lot more than a font choice that’s a bit off.

This idea has parallels in other endeavors. If you’re building a house, you can paint the walls pretty colors and have all kinds of modern features, but if the foundation hasn’t been laid correctly, you’re screwed. Of course, you’re not likely to drive by a house and say, “Wow, that’s a great looking foundation!” Much like well-designed user flow, it’s most noticeable when absent. But it’s also worth putting in the unglamorous work early on to have a more robust product in the long term.

Are there critical design steps you feel are ignored? Talk about it in the comments!

One Reply to “The hidden design step that can make or break your interface”

  1. Great post Danielle! I totally agree with everything you wrote. Just want to add that since the flow is so important, the best way to get it right is to see it in action. Because in my experience to see it in our mind and then draw it is not always effective. That’s when you need to build a prototype. Paper, code, or software, it doesn’t matter. What matters is that it shouldn’t take long to build and that we can then REALLY see the flow.

Leave a Reply

Your email address will not be published. Required fields are marked *