UI LAYERING STUDY_____
This study is a practical summary of the work that lays behind those ‘fast and easy’ interfaces every user yearns for. Via the method of layering the interface, I describe a way to develop and practice system thinking for the design process in order to support the creation of those intuitive user interfaces (UIs) that people can engage with instantly due to their natural, systematic style of communication.
During this study, I’m going to correct, style and replace the elements in the sample UI group by group, layer by layer, with a systematic approach until the final interface has been reached. The principles applied along the way come from the field of behavioural psychology and material design (referral links provided in the transcripts), intentionally avoiding industry-specific alterations.
By the end of this study, I hope the readers will have obtained an overview on how an interface that communicates its functions clearly, leading users naturally and silently as well as eliminating any confusion about its usage, is engineered.
As a product designer, I’ve been working on web applications and mentoring design work for quite some time now. I’ve often made a note for myself along the way when I noticed certain areas causing difficulties. From this list, an interesting pattern emerged. The pattern showed me that the reason behind most of the confusion, both on the user’s side and on the designer’s side, is that the intended visual has been applied without employing systematic thinking, basically designing without using futureproof practices.
I’ve created this layering study to pull together the layers of intuitive interfaces and to discuss some very practical steps concerning how to develop system thinking for UI design and manage a large-scale project without losing the coherence between the elements. In order to demonstrate this method, I first grouped the interface elements – the most common visual tools used to communicate via design - into six groups based on their role in the UI. I also prepared a demo interface suffering from numerous flaws. That demo interface is where I’m going to put the elements using system thinking, explaining the problems with the original placements and offering new ways of considering the problem along the way, ways that take the human condition into consideration. In most cases, I have provided a link to the exact psychological or material design principle I’m referring to during the correction.
As I mentioned in the introduction, the aim here is to develop and practice system thinking for the design process. Designers need that system thinking because visual language is indeed a language, one that can be learned in a very similar way to learning any other language. First, one picks up some words, forms a dictionary, and checks the related grammatical rules. Yet, when meeting a native speaker, hardly anything makes sense. What is missing is the cultural context, the system these words and rules are embedded in. Without that, results sound like Google translate, i.e., the words are correct, but the sentence doesn't make any sense. The case is the same with visual language. One can throw the UI elements together, even while being aware of the design and behavioural principles that should be involved, but without the contextual matrix, without using it systematically, the UI won't make any sense. It just won't be usable.