Aside from my full-time role as Senior Designer & HMI specialist here at Sundberg-Ferar, I’ve also taught part-time at College for Creative Studies here in Detroit for 23 years. Right now, I’m teaching fundamentals of UI design in the Master’s Program.

What’s remarkable about the Master’s Program is that the students you’re teaching are different than in Undergrad. When you’re teaching Undergrad, most of the students are coming in from high school and are already very artistic. In the Master’s Program, a lot of these students come in from entirely different disciplines. I’ve had students with marketing backgrounds; some are civil engineers; they’re all people from all walks of life. These brilliant students come to me every year with amazing skills and tons of creativity, but a lot of them haven’t done user interface or user experience before. When they come in and want learn User Interface Design, they have to get oriented to the task first. What I find helps for them is boiling it down to some initial guidelines to creating a good UI or UX.

What follows is a list of principles for creating effective UIs from my experiences as a teacher and professional designer.

A “good UI/UX” often comes down to its ability to engage the user. Each one of these 10 guidelines has a particular hook in it that relates to engagement, and driving that consistent connection with the user. If you can follow these 10 rules when you’re developing the organization, consistency, and functionality of a UI to meet user needs, you’ve got a good start on developing a truly engaging UI.

1. Solve the Right Problem

I have to credit Jacob Nielson of the Nielson Norman Group here. He formalized the practice of UI and UX design before anybody. He’s like the father of the industry. His quote above gets right to the heart of the engagement challenge. In UI design or any kind of design, even if you’re solving the wrong problem brilliantly, you’re still not going to be successful. Consumer research, observational research, design research – these are all super important for helping you understand and define what it is that you need to do and what problem you really need to solve.

2. Context Matters

A lot of people are confused by the term “frameworks” used above and it’s a concept that’s really kind of unique to UI design in particular. (I also use the word “context” for this.) “Framework” pertains to the mindset that a user brings to any particular interaction. When you sit down to design an app, you can’t only consider what the person is going to do in that app. You have to consider their total experience and what they’re going to be bringing to that interaction. This is true of any product, whether you’re doing a touchscreen and creating controls on a screen in a car, or you’re designing a physical product and organizing its parts and features in a way that meets the needs of the user. You have to understand these things in context. You can’t just take the technologist’s perspective and say “I have Bluetooth, let’s make a product for that.” It’s much better to have a need that you’re addressing and say “for this problem, Bluetooth offers a potential solution”. That way you’re following rule #1 which is to start by solving the right.

3. Consistency is Encouraging

Whenever you’re trying to get someone to be involved with and become passionate about a product, it’s super important that they feel encouraged. If at any point when the user is curious about the product, they become discouraged, they’re going to bail. The more you can bolster their confidence as they become more aware of and more interested in your product, the more encouraged they’re going to be to complete that purchase of your product, begin using it, and develop a relationship with it.

A lot of that comes down to expectations, or “cognitive modeling”, which means that people actually start to envision themselves using the product before they actually purchase it. That’s part of the expectations that people bring to a product. The more those expectations prove correct in the process of them learning about your product before they even commit to it, the more likely they are to become engaged.

4. Use Visual Hierarchies

This point, more than any other, comes very directly out of the UI world because what you present in a UI is literally a cognitive system that people have to orient themselves to and be able to engage with and understand. This is true of any product too. Even the shape of a car has an organization to it the same way that the screen on a phone app does. What it all adds up to is your ability to understand what that product is all about. Visual hierarchy is basically a way to bring sense to this. What you’re trying to do with visual hierarchy is say “[This] is the most important thing. [This] is the second most important thing. [This] is the third most important thing,” so that when a person comes to that “thing”, they’ve preconceived in their mind how they’re going to interact with it. So again, this is about meeting expectations based on the way you set the interface up.

5. UI is a Conversation

Many designers think that we design what the product looks like and how it’s perceived. This however is a common fallacy of design. In reality, you can see something, but the perception of that thing actually happens in your mind. This is basic philosophy. Of course, we can get into all kinds of conversations about what’s “real” and what’s not “real”, but correctly understanding that idea of perception is the important point. What a consumer sees in your product affects what they think about your product. In certain cases people just have an emotional reaction to a product that makes them feel good. That’s why people love cars, for example, because they’re rolling sculptures. They’re beautiful, and people have a reaction to that.

But UI is different because you have to not only see the product and think it’s beautiful and attractive, you also have to make sense of it. You have to understand its structure. You have to understand what it’s trying to tell you and how to respond to it. With any product, over time your internal perception of it evolves. Why? Because every time you use that object, you’re having a conversation with the people that created that product. Whether it actually gets back to them or not is a different question, but every time you interact with a product, you’re conversing with the criteria a company put together to create that object. The degree to which the product meets your needs should be really instructive to those companies about how they make their products.

6. Support and Enable

Two things you can always count on with any product is: 1) People are going to make mistakes, and 2) they’re going to change their mind. Good products embrace this and don’t punish it. A huge source of frustration with any product is when you think you can do one thing with it, and either you can’t do it, or you change your mind and decide you don’t want to do it. If the product punishes you for that, it’s a huge disincentive for continuing the use of that product. However, if a product is tolerant of those things and actually allows people to interact with it in flexible and non-restrictive ways, it becomes a much more friendly and supportive relationship.

When you’re doing a user interface, the “Back” button is something designers always want to ignore because it’s just visual noise on the screen a lot of times. However, it’s actually very important because if someone gets down in the weeds of an interaction, and they decide they don’t want to do that thing anymore, or they want to go back and change something they did three steps back, and you don’t give them that opportunity or you make it painful for them to do that, now you’re dealing with dissatisfaction not just for that moment, but for the whole interaction.

7. There Should Always Be More

In any product, there are certain moments that are really important, like the first unboxing experience. The moment when you first enter into the use of a product is always very poignant because you’ve made a decision, you’ve committed to it, and now you have the opportunity to have your needs fulfilled. It’s a fraught moment in that sense. What a lot of people forget though is that many products last really a long time.

When you buy a car now, it typically lasts about ten years, so you’re going to see the evolution of that car over that time. When I’m teaching UI classes, I also use photoshop as an example because it’s a software program that was built and originally released to the public in 1990, and today it’s still a powerhouse in the industry. The photoshop product that you see now is not the same product that was released in 1990 though. The beautiful thing about it is that it’s continued to evolve, change, grow, and get better year on year – sometimes month on month – for the entire 30 years of its product life. To its credit, I swear I can still learn something new every time I sit down to use photoshop.

This example is really instructive about the real nature of the relationship a product and a company has with their consumers. It’s not one moment. It’s a process. If you have a product that a consumer can still find value in 30 years after they first started using it, you’ve done something really remarkable. And it doesn’t have to be 30 years. If you have a product with a lifecycle of only two years, it’s really advantageous to consider, “Okay after two years, what am I still getting out of it? Is it new and different from what I got out of it at first? Or is it the same”. The more you can make a product grow and deepen and become better over time, the greater chance you stand of maintaining that engagement with your users. Especially if you’ve got products that do only have a two-year lifespan, if you have to replace that product in two years, you better hope that at the end of that two years, your consumer still has a positive view of that product. This idea of products that evolve is a really cool frontier for a lot of products in the future.

8. Every Word Matters

This also principle also comes out of UI a little bit because you can’t only put graphics on a page in a UI. You also have to use words in order to instruct people in what to do. Take a look at the quote above. The thing about words is that they carry meaning. Again, this gets back to cognitive modeling which happens between your ears as opposed to what’s on the screen. You might think you know what a given word means, but someone else might think differently about what that word means. Every word carries. Therefore, really concise language and being able to say exactly the thing you need to say to convey the essential meaning for that interaction is really important. The same thing goes, whether it’s in advertising or in the instructions of a GUI screen. Also, if you don’t trust a word, don’t use it! We’re all guilty of being lazy about that. What you can never predict is the meaning that another person will ascribe to what you’re saying.

9. Create Elegant Solutions

For this principle I used to say “keep it simple”, but I actually have a lot of heartburn about that because “simple” is the hardest thing to do. Most products have a degree of complication to them, and it’s real easy to just say “well, just make it simple”. To me though, as a designer, that’s really not the proper thing to say. What you really want is an elegant solution; something that is just exactly right for the thing you’re trying to do. Just “making it simple” might not actually be the best thing to achieve your goal.

We’ve done a fair amount of work in the medical industry and I think that’s a great arena to think about this problem. Inherently, anything that you do in the medical environment is backed up by huge amounts of information, technical constraints and things like that. However, you have to ultimately boil it down to something that becomes, a straight-forward “put tab A into slot B” kind of thing, so that people can react to it, make use of it, and understand it in a moment. They shouldn’t have to stand there and think about it really hard. What’s really important there is an elegant solution. Just simplifying for the sake of simplification shortchanges the complex context that surrounds that product. Where normally people say “keep it simple stupid”, I think “elegant solution” is much more appropriate to say for many of those cases.

There is a difference between “complexity” and “complication”. I always reference your desk at work or at home as an example. Most people separate all their different documents into piles on their desk, and if you’re a random observer, it just looks like a lot of mess. But the reason it looks like a mess to you is because you’re not the one who made the piles. You’re the one who’s trying to observe and make sense of what’s there. The one who created those piles and that system of organization is the one who understands it. As a result, even though the piles are very complex, to the person who organized them, it’s actually the simplest way to think about it. For the person who’s trying to observe that “messy desk”, the difference is that they don’t have the “key” to it. For them, it’s complicated because they don’t have the understanding of why one thing relates to another or why something is placed here or there. Without that key to understand it, they’re faced with only the complexity of that system of organization. Whereas the person that put those things there understands it perfectly, so even though it’s complex, it’s not complicated for them. If you want to learn more about the ideas of “complexity” vs. “complication” in UI design, I’ve written more about this in another article which you can find here.

This is something I learned from my wife, and I hope she’ll forgive me for saying this, but one of the things about getting married is that you’re suddenly intimately confronted with another person’s system of organization. It very quickly gets you to the place where you understand the difference between “complexity” and “complication” because the difference between the two is this key to understanding. Creating elegant solutions is about handling complexity in a way that gives the user the key to understanding.

This also gets at why designers can’t fully trust themselves all the time. If you create a design and you never show it to anyone or ask them what they think of it, you’re probably going to make mistakes that are exactly this kind of problem; where you’ve created a system of organization, aesthetics, and communication for a product that makes sense to you as the designer. Ultimately though, the person who it needs to make sense to is the user. This is a common trap for designers. If you create a design and never test it, don’t be surprised if you create things that don’t resonate with people.

10. Innovation is Never “Finished”

Every UI or product design is a collection of ideas, and ideas are never static. Product tooling and interface graphics are static in the sense that you have to set something down in order to produce a product you can sell. Nevertheless, because people have long-term relationships with products, innovation can never stand still. Just because you’ve created something, and it’s successful, it doesn’t mean you’re done. It just means that you have good footing for making the next innovation. At Sundberg-Ferar, a lot of companies engage with us on the basis of just one project or one product development cycle. I wish they would engage with us is as a resource for ongoing innovation because that’s really the best way to think about what’s necessary in the long-term for any company, or with any series or products that you’re trying to create.

* Rules are Made to be Broken

This brings me to my last point that’s not really a rule, but more of an axiom: Rules are made to be broken. As much as I’ve tried to codify the basics of putting together an engaging UI, I always know that there are things that will happen in the process of creating a UI, and for whatever reason, they just “work”. You can use these rules to try to decode why it “works”, but at the end of the day, if it works, you shouldn’t question that. Trust your gut and just go with it. Situational awareness in any development environment is hugely important. You can have a lot of things telling you that “this is the right thing to do” when making a UI, but if your gut is telling you something different, there’s usually some sense to it. You can also use these principles to break down why your gut is telling you that, but it bears due consideration, when something is working, to just go with it!

Last word of encouragement to designers:

Apart from these principles, the thing that I would tell any designer is: Just be curious. Being open and inquisitive is really a life skill and that you just can’t do without. I think we all have ideas about what we want to do as product designers, or developers of any type. But the world is going to throw you curveballs, and I think the most essential thing in any of those moments is to remain curious, and be open to the questions that the course of your life, or the course of a project, or of your professional career opens up to you day by day.

So get out there, trust your gut, stay curious, and make awesome UIs, physical products, or whatever it is you endeavor to do!

If you want to learn more about how you can leverage great UX/UI for your product or business, or if you just want to talk, drop us a note at hello@sundbergferar.com. We love to hear from you!

Discover more articles on GUI Design