We’re a digital product design studio specializing in user experience design. This means that rather than working on one in-house product, we’re often working on a number of projects at once and our design team, as a result, needs to be extra lean and Agile. Process, therefore, plays a big part in how we work, and methodology helps guide our process.
Before we dive straight into the methodologies, let’s start with a crash course in interaction design. Last month, I put together an article on what is interaction design. Interaction design is about making a connection between a device, its interface, and the user. It facilitates the actions we want to take. For example, anytime you perform a function on a digital device, interaction design is what makes it happen, making a framework of text, components, and objects useful, learnable, and ultimately intuitive. Most importantly though, interaction design delivers that human element that makes technology enjoyable and pleasant to interact with, aka delightful. At its core, it is fundamentally centered around the human connection, a valuable and defining principle at aequilibrium.
Now that we’ve gone through our introduction, I’m excited to share a taste of our design process. As mentioned, our process plays a big part in how we work so these methodologies are vital to our team, as well as client success.
Human Conversation, Experience, and Activities.
First, let’s start with explaining HCI. Interaction design is often mentioned together with this concept called human-computer interaction, or HCI. In a nutshell. HCI suggests that interactions between humans and machines should resemble that of human-to-human conversation. The idea gained popularity when the first personal computers invaded people’s homes and offices and has stuck around ever since.
“You have to deeply understand the essence of a product in order to be able to get rid of the parts that are not essential.”
––Jonathan Ive
John Millar Carroll, distinguished professor of Information Sciences and Technology at Pennsylvania State University, explains the rise of HCI as an expansion of general user behavior to the widest possible spectrum of human experiences and activities. “HCI has expanded from its initial focus on individual and generic user behavior,” he said, “to include social and organizational computing, accessibility for the elderly, cognitively and physically impaired, and for all people.”
A lot of scientific research, including computer science and cognitive science, has been used to apply HCI and explore ways of creating a better, more humanistic interaction between machines and humans. Here are some of our favorite, as well as most important, methods for interaction design sparked from HCI theories. Note that this is not an exhaustive list by any means.
Fitts’ Law.
Introduced in 1954 and targeted to calculate the performance of assembly workers, Fitts’ law describes one of the most basic phenomena of human-computer interaction. It illustrates the relation between the distance to the target, your speed, and the size of the target. It basically says that the bigger the object, the faster you can point to it. Whether you point with a cursor or a finger, you can calculate how big a button should be to decrease the time spent aiming for it and increase the accuracy of pointing.
Discoverability.
A general rule is that if the user cannot find it, it does not exist. It must be made clear as a bell what actions in a UI are possible within less than a microsecond. A good example is the addition of icons added for ‘trendy’ visual design or to break up copy. If icons are needed to help with the content layout, well, you may need to think about your layout. In mobile, for instance, where space is a precious commodity, labeling icons is a best practice that can help reduce the initial learning curve for the user.
Signifiers.
Very much tied to discoverability, signifiers ensure that affordances — the potential of an action on an object — are clearly indicated in the UI. Signifiers provide valuable clues like signals or signposts that indicate an available interaction. If they were alive, they would shout, “here I am, you can interact with me.” An affordance may exist in the UI; however, it may stay hidden because it lacks a signifier so that it can remain invisible to the user. A good example is a hidden gestural interaction that doesn’t reveal itself unless the user accidentally swiped left or right. Swiping left or right on an SMS message could indicate delete, or a mouse hover on an image could reveal another state of intent that is actionable.
Feedback.
Feedback naturally follows signifiers. Feedback simply shows explicit information about the status, sometimes duration, but most importantly the impact of the action. It also means constant visibility of system status, such as a progress bar. A few best practices we use at aequilibrium:
- There is continuous information about the result of actions and the current state of the product (system)
- After an action has been executed, it’s easy to determine the new state
- There is no confusion in the mind of a user as to what the state of the product is, i.e., processing, loading, searching, uploading, or some other state change
- Users are kept informed about what’s going on
Constraints.
Constraints are a way to determine how to restrict the kind of user interaction that can occur. They present the user with a baseline of options to keep their cognitive load simple and task orientation efficient. To help illustrate this, think of a price range slider. Starting from zero to a max amount, it tells the user what the variable ranges are and sets expectations early, resulting in more accurate results.
Constraints in design ensure that only specific things are enabled, or visible, in order to guide the user towards specifically intended actions. Constraints consider size, scale, and proportion, and emphasize how this help create hierarchy and influence the user. Constraints can also when used correctly reduce the chance of user error.
When constraints are not used, users can get overwhelmed with decision making. We refer to this as cognitive load, which makes it difficult for users to decide what to do next. Fundamentally, it’s the principle of choice: the more options, the more difficult it is to choose any one of them because we become overwhelmed by all the possibilities.
An example of this is Jelato, an app that we built for a client. Jelato’s onboarding interaction was crafted in a way that asked a series of questions which then allowed the system to understand the user’s preferences quickly and then display the content immediately afterwards, thereby increasing the product’s engagement level. Constraints were designed into the interaction, specifically the way in which questions were asked. We structured the questions using logical hierarchy from user feedback, manageable options, and parameters which allowed us to create a positive, gamified experience for the user in what is sometimes a tedious and undesirable process in other cases.
Recognition over recall.
Recognition refers to our ability to recognize an event or piece of information as being familiar, while recall is much more of a cognitive load that involves pulling related details from memory. Showing users things they can recognize improves usability over needing to recall items from scratch.
For example, using icons in a UI is powerful because it allows for the instant recognition of a symbol. Our brain processes recognize symbols about a thousand times faster than reading the text. If a designer displays a standard warning sign icon and associated colors in a dialog, it immediately makes the user focus and pays attention because the next action may be destructive. Often we see icons ‘misused’ purely because of bad design practices or trends. Websites trying to explain a set of services with heavily-branded icons above copy, which on its own has no global or decipherable meaning, illustrate how purely visual elements can confuse the user and provide little meaning to support text, in effect creating inefficiencies and decreasing usability.
Minimalist design.
Minimalism has always been my guiding North Star. Having a massive OCD complex, minimalism helps focus and minimize my design choices and inherently design better interactive experiences. I live and breath this methodology of design, and accept the challenges it presents to me every time I embark with my team on a new project. Minimalist design is one of the most challenging principles of design because it’s just hard (don’t even get me started on hyper-stylized branded icons added to content). The natural tendency is for designers and product managers to add every available option under the sun to show how versatile and valuable the product can be to the user, resulting in sometimes overbearing content which can actually cause high cognitive load, confusion, and potentially signs that the information architecture and hierarchy need some rethinking, and probably testing.
At aequilibrium, we try to design interactions with one mission: K.I.S.S. or Keep It Simple, Stupid. If you are overthinking and struggling with interaction design, it’s too complicated. We typically do the first pass, establish a functional understanding with users, measure qualitative and quantitative tasks, then start removing interaction elements to the point where we are gaining the maximum results with the fewest elements. If there is still confusion in the next round of feedback tests, we’ll start adding them back as it fits closer to the goal. This is not always a bad sign, rather a signal of what direction to steer the interaction design back too. If the interface does not support the user’s primary goals first because of collateral noise, we determine what that noise is and remove it. Additionally, you can improve computational performance loads and user experience by removing interactions that bog down the system (also, the dev team will love you).
The Final Connection.
Interaction design is about making a connection between a device, its interface, and the user. It facilitates the actions we want to take and it delivers the human element that makes technology enjoyable and pleasant to interact with. There are many ways an individual or organization can create interaction design. These are just a few of our favorite guiding methodologies centered around the human connection that we use at aequilibrium. We hope you can put them to use in your design process. If you need help applying interaction design into your next project or want to learn more, find me on Medium or Twitter @mattcorsto.
