How “mental modeling” simplified my UI
Imagine an interface every user can handle as you expected it, an interface that is visually fully understood by every person that interact with it and an interface that is so intuitve to operate with, that no tutorial or instructions are needed at the beginning. Isn’t that what all interface designers are trying to achieve these days?
But often the reality is quite different. Users totally get stuck operating in the interface. The visual design seems fancy, but most users don’t get the intention behind it. And last but not least, what we designer might found intuitive is an new pattern the users have to learn.
To make things clear, as you are going to read further you won’t get an exact recipe to reach those goals declared in the top section, but I want to describe an esential part in my current workflow, which has a huge impact on how I build up my interfaces. I call it mental modeling (there might be some theoretical correct description for it, but that’s how I named it).
But first things first.
Mental Model, what are you talking about?!
Well, in my defintion a mental model is an user’s idea, how the application’s components are related to each other or how things basically work. It is the imaginative construct where different pages have to be, where informations come from and what content is going to be revealed by the current interaction. The more detailed and well-crafted the mental model of an application is, the better the user will be able to operate with it and the less misoperations will occure during the users journey.
A well-crafted mental model improves the way users interact with your product.
When you start working on a new application, the first things the user might hear of your upcoming product creates expectations all based on his made up mental model. We have to decide whether we will serve the expected functionalities to keep the learning curve low or to redefine, what users might expect. Whether serving or redefining, a clear communicated mental model is the base of an intuitve and efficient use of your product.
Okay what firstly seems very theoretical and difficult is quite simple if we take a look at mental models we are familiar with. Right now you are reading this article and whether you are reading it mobile or at your desktop you are navigating through a website. You know you can simply scroll down, if you reached the end of the current view, because you know content is positioned vertically. And the knowledge you can scroll down is a mental model.
Okay I got it! What does it have to do with modeling?
As user interface designers we all know, that wireframing is an essential part during the evolution of an UI’s visual and functional design. In fact mental modeling is quite the same, but focussing some different aspects.
Mental modeling is focussing and designing the connection between informations.
Instead of positioning and functionally layouting each single page, during mental modeling we focus on the transition and the connection between different informations. First we focus on how we navigate between the hierarchical highest navigation points and think carefully, where they would be positioned correctly. If we get things right in place, we start to get more detailed in layouting the different components and functions.
Nothing ground breaking you might think and until this step you might be right. It is just focussing the attention during the wireframing on the overall application and the navigation flow the user might follow. But now there is a simple conclusion, which changed the way I build up my interfaces entirely. First I have to admit I’m a really great fan of the material design’s approach “motion provides meaning”. Now that you have carefully crafted your overall application, there shouldn’t be any other possibility to get from a point to another. The animations and transition are basically defined by the way the mental model of your application is set up. But not only the transitions are defined, also the look and the UI elements needed, are heavily influenced by the mental model you’ve created.
What about an easy to follow example?
To get things clear, let me show you a simple example we have to struggle with almost each single day. Especially on touch devices long articles combined with single photos and galleries are the status-quo these days. When you scroll through an article you get paginations, counting slide numbers and even control arrows indicating there is more than one image to discover. And frequently we start swiping on single images, because we think this might be a gallery not communicated right.
If the user understands the mental model, he doesn’t need certain UI elments.
Paginations, counting numbers and arrow icons are a pain in the ass at my point of view. So why not getting a more simplified UI and clear guided interactions by communicating the mental model right?! As we know galleries are nothing else than big horizontal sliders simply putting new content into the viewport. So one easy approach to actually communicate this mental construct could be simply teasering the next image or information bite in the gallery context. When we are interacting with touch devices, we know we can swipe and interact with everything we see on the screen. If the user sees some cutted image the affordance is clear to swipe to reveal the full picture. So a more intuitve and simplified visual design could be achieved with a layout like the following.
And now …
As mentioned at the beginning this article is not meant to be a full guided workaround how to get from an idea to the final UI. I wrote this article, because it really changed the way I tackle UI design challenges these days, by simple shifting the focus right. Hopefully some of you got interesting aspects and intentions during the read and maybe some of you start mental modeling right now or during their next project.
Thanks for reading! Please give me a shoutout on Twitter if you have any questions, if you have ideas for future topics you would love to see or simply liked what you have just read.
