Chroma Experience

Simplify design

Companies strive to create simple and user-friendly products. More features, new technologies, expanded capabilities, but still in a lightweight and easy-to-use format. In doing so, simplifying is the hardest part.

Blaues Visual auf schwarzem Untergrund

What is "simplicity"?

We can define "simple" - as something that is easy to understand or do; that presents no difficulty. Simplicity is something subjective. Things that seem simple to one person are not perceived identically by another. Generally, we form our personal opinions about whether a process is simple or complex in three quick steps:

Fragen, die man sich stellen sollte, um Einfachheit zu erreichen

Removing hurdles on the user's path to their goal - will help move toward simplicity. In The Laws of Simplicity, John Maeda describes ten laws for balancing simplicity and complexity in business, technology, and design - guidelines for needing less and actually getting more.

Maßnahmen für ein vereinfachtes Design

The Laws of Simplicity, John Maeda: http://lawsofsimplicity.com/
Maeda - a professor at MIT's Media Lab and a world-renowned graphic designer - explores how we can redefine the term "optimized."

What about complexity?

When we talk about simplicity, we must also mention the other side of the spectrum. Like simplicity, the perception of complexity is subjective. With proper training, even rocket science is not that hard. But there are some factors that tend to complicate even the simplest task. These should be avoided as much as possible in product design:

No Gos für barrierefreies, vereinfachtes Design

How can simplicity be applied to product design?

1. products with clear benefits

There is a lot of software out there that tries to do too much for too many audiences at once. Trying to be a Swiss Army Knife of the industry. If a product is to be simple, the core benefit that is essential to the success of the product must be defined and identified.

Produkte mit klarem Fokus

2. remove everything unnecessary

The easiest way to achieve simplicity is thoughtful reduction. When in doubt, remove. Secondary information, controls not frequently used, and distracting awards. Get rid of them. Once you start applying this principle, the results are immediately apparent.

There is a lot of software out there that tries to do too much for too many audiences at once. Trying to be a Swiss Army knife of the industry. If a product is going to be simple, you have to define and identify the core benefit that is essential to the success of the product.

Reduziertes Design ohne Unnötiges

3. data belongs in a meaningful form.

Much of the product that is designed on a daily basis focuses on a lot of data that you are supposed to make sense of in order to do your daily tasks efficiently. If you know that user:ins are interested in developments and changes, you should support them with a visual representation instead of a bunch of numbers. If necessary, these can be supplemented with additional information. The goal should be to extract relevant data and put it in front of the users.

Daten in anschauliche Formate übersetzen und interpretierbar machen

4. support for rapid decision making

Users who are inundated with choices must take time to interpret correctly and make decisions. This creates inefficiency. This situation is explained in Hick's Law. It states that the time and effort required to make a decision increases with the number of options. If one wants to realize an intuitive usage in terms of a good user experience, a fast decision making has to be considered. To be able to guarantee this, one should, whenever possible, refrain from letting users choose. Instead, you should help them navigate through the application.

Grafisch: Zu viele Optionen verzögern das Treffen von Entscheidungen

5. too many choices discourage customers.

Research in psychology confirms the positive and motivating effects of individual choices. These findings have led to the widespread notion: The more choice, the better. But in reality, research proves the opposite.
The "Jam Experiment" is one of the most famous experiments in consumer psychology. According to it, offering consumers less choice can be good for sales. Critically, the study shows exactly when offering less choice can increase sales.

Vergleich: Zu viele Optionen wirken abschreckend

This experiment proves that customers who are presented with fewer choices are ten times more likely to make a purchase than those who are shown many choices. It was used as a crucial example of over-supply with choices, i.e., of the idea that presenting too many choices actually prevents customers from buying.

Vergleich: Zu viele Optionen wirken abschreckend

6. clear recommendations when multiple choices are presented.

When choices cannot be avoided, try to limit them. A hint, recommendation or sharing a statistic about what is most preferred by other customers is suitable for this. It is important to clearly communicate what the main difference is between the options offered. This approach is often used on pages with price plans.

Empfehlungen optisch hervorheben

7. Focus attention on the important areas.

Understanding a customer journey means knowing the goals and what stages exist within that journey. Some of these stages are more relevant than others. The point is to find the key areas and focus attention on them.

Aufmerksamkeit der Nutzer lenken

8. color and typography to communicate a hierarchy of content.

How many times have you heard, "User:ins don't read". And it's true. We are very selective with what we actually remember and where we go in depth. If you've ever accepted extensive terms of service without reading a word, you know what's meant.

There are a lot of features that can affect what and how text communicates: font and style, size, kerning, line spacing, capitalization, and color. You should use these features to communicate the hierarchy of the content. With the right use of color and typography, you make content more recognizable, more attractive, and more memorable.

Farbe und Typografie nutzen, um die Hierarchie der Inhalte zu kommunizieren

9. Order helps to make a lot look like a little and that in addition clearer.

A simple test. In the figure below are two forms of representation. Now, using a stopwatch, measure how much time (and effort) it takes to count the number of black dots in each square.

Vergleich: Saubere Anordnung der Elemente vermittelt bessere Handhabbarkeit

Ready? As probably noted, counting the disorganized representation of points took much more time and, moreover, was more cognitively taxing. But why do we have this result if the surfaces have an identical number of points?

Assigning the dots to a particular grid helps us to visually grasp them and group them when counting. Whereas with the unorganized display form, we have to wander from point to point and count them individually.

Vergleich: Task-Journey wie Zeilen statt kreuz und quer abbilden

Tidying up elements not only improves their recognizability, but also makes them easier to remember. When operating a machine, it is very important to remember the location and function of all controls.

Another test. Just now the dots in the two figures were counted. If you now try to remember the positions of each point, you will find that it is almost impossible to remember the disorganized structure.

Vergleich: Elemente in sinnvoll angelegter Reihenfolge wirken ordentlicher

10. Group related contents

It is often a good idea to start grouping components to simplify a complex user interface. The end result is that the user:s are dealing with a few groups rather than a multitude of unrelated components. Adding separators (creating associated areas) around an element or group of elements is a simple way to create separation from surrounding elements. In Gestalt psychology, there are several principles of grouping that help elements feel like they belong together: Proximity, Similarity, Continuity, Closeness, and Connectedness.

Content in sinnvollen Gruppierungen

11. Break large tasks into smaller steps / evaluate single column

Various types of forms are an essential part of many applications. They are a way to collect data. Sometimes, even after deselecting all optional information, they are unnecessarily voluminous. Such forms can be very demotivating to use and lead to early abandonment. This situation can be counteracted by splitting an extensive task into a series of smaller tasks. As a result, it seems much easier to complete the process to the end. Finishing small subtasks gives users a dose of endorphins and satisfaction to keep going.

When designing forms, try to use a single-column layout instead of multiple columns. A single column layout is much easier to fill out. This way, users don't have to think about what to fill in next, but navigate from top to bottom in a learned manner.

One Column Layout für Aufspaltung umfangreicher Vorgänge

12. Transparency in the communication of the process and the system status.

Uncertainty unsettles us and should be avoided as much as possible. Therefore, at any time within an application, unless it is obvious, you should be able to see where you are in the process, where you are coming from, and what is coming next. A summary of the previously provided information is also a good idea, as it puts less strain on the user:s memory and they don't have to go back to check the previous steps.

Kommunizieren des Fortschritts während eines Prozesses

13. Avoid mental arithmetic

The human brain is (mostly) bad at dealing with raw numbers. Evolution has meant that we are good at grasping and mapping objects, but less good at performing arithmetic. This knowledge should be used to perform all calculations for the user:in.

Rechnungen für User vorgenommen

14. Hiding Complexity with Progressive Disclosure

Progressive Disclosure is a design pattern used in UX design to make user interfaces easier for users to understand. It involves sequencing actions and information across multiple steps or views to reduce complexity and avoid overwhelm. Great emphasis is also placed on hiding irrelevant information. Progressive Disclosure follows the simple idea of moving from the abstract to the concrete, including sequencing of user behaviors or interactions. A good example of "Progressive Disclosure" is the "nested doll" navigation of iOS.

Komplexe Inhalte ausklappbar machen

15. Build on commonly accepted patterns and interactions.

Users:inside spend most of their time with other products. This means that they prefer all applications to work the same or at least similar to all others they are already familiar with. In addition, certain expectations exist about how applications should look and behave. This insight applies to every digital as well as physical product, from social networks to refrigerators, and reflects the mindset and expectations of consumers. This does not mean that one should stop innovating. Rather, one should evaluate whether a deviation from the established way navigation or the controls are presented justifies that users need to change their mindset.

Nutzung gängiger Darstellungen von Interaktion

16. First impression counts

The primary goal of any design should be to communicate the value of the product to users as quickly as possible. Anything that stands between users and interaction with a system is a barrier of sorts, unless it serves a functional benefit. The first-use experience is extremely important to any process. We quickly form an opinion about a product and ignore it if we are not satisfied.

Even the simplest task can become a challenge when we first attempt it. Sometimes additional training is required before we can operate a product. With digital products, it makes sense to discard the analog mindset. The expectation of users is that the product is simple enough to understand without explanation. At the same time, they expect help when needed or when something goes wrong. The approach should be contextual, rather than providing an "instruction manual" in advance.

Optimierte Erfahrung von der ersten Nutzung an

17. Consideration of ergonomics and the circumstances in which the product is used.

Ergonomics is the process of designing or arranging workstations, products, and systems so that they fit the people who use them. Most people think of it as having something to do with seating or the design of controls and instruments in a car - which doesn't exclude it, but it's much more than that.

Ergonomics refers to the design of anything that has to do with people, including digital products.
In 1954, psychologist Paul Fitts, studying the human locomotor system, showed that the time it takes to move to a target depends on the distance to that target and is inversely related to its size. Thus, one should ensure that frequently used elements are of sufficient size and positioned so that they can be easily reached by users.

Ergonomie und Umstände für den Nutzungskontext im Design beachten

18. Inline edit and autosuggest values.

Get rid of all unnecessary interactions, views, steps in each process. There is an optimal speed at which user:inside should operate the system. It is called "state of the flow". This flow should not be interrupted with popups. For all actions/values that can be changed later, inline input is a good tool. If a large number of values are available, it is a good idea to use autosuggest.

Umbenennung erleichtern und Autosuggest nutzen

19. Smart Defaults to reduce cognitive load.

Smart Defaults are choices that provide answers to questions. They supported to fill out forms faster. When filling out forms, users must analyze the form, formulate an answer, and then enter their answer in a predefined format. To define relevant specifications, designers must understand the user community and the context in which they use a product. This is only possible through thorough analysis and testing to learn from users and adjust defaults based on historical data and usage patterns.

Nutzung von Default-Eingaben für einfache Nutzung

20. avoid errors

Error messages lead to frustration and give the feeling that one has done something wrong or is not up to the task. One should therefore provide for automatic checking of the data entered and present warnings for invalid or missing data entries in order to reduce errors.

Fehlervermeidung durch Passworthilfe

21. Low barrier

Designers:inside should be committed to barrier-free design and ensure that your product is accessible to the widest possible audience, with no exceptions. There are over 1 billion people worldwide who have a disability. You should not use color as the only visual means of conveying information. Sufficient contrast between text and background is essential. Navigation by keyboard should also be considered.

Barrierefreies Design mit Verlinkungen und Icons

Conclusion

Designing products to be easy to use and understand isn't easy, but it's a rewarding journey, and there are many ways to move toward simplicity.