How Designers Think

Let me know if you have any feedback! Please do not share this link.

image

Great designers are masters of understanding how people think and how they interpret stimuli and use this to create an experience or draw a reaction. Recently I have come to realise several things about design which I hadn't considered before, and these things have changed my outlook on design as an art and a function for communication.

Humans are a bit weird. We are influenceable, emotional, and almost always think subjectively. Cognitively, we are great at thinking in abstract ways and generalising to find patterns. Because we have developed with a high dependence on the visual aspects of our world, we can process simple visuals in amazing ways. A sketch on paper can be modelled into an entire living scene in our minds; a single squiggle of writing on a page can be transformed into a complex concept; and, most interesting to me, a set of objectively meaningless shapes on a screen can become an intuitive opportunity for interaction.

Designers play with our common understanding of visual elements to provide additional meaning and depth to interaction. Speaking broadly and historically, this has been one-sided. Stage performance was formerly interactive to an extent, though this has been replaced by books and films which have a clear creator-audience dynamic. Physical products have always allowed interactivity but their properties are, of course, bound by the laws of physics (there is an end to the space in your wardrobe, unless you hope to find a forest back there). This is one of the things which makes digital design exciting. This text on your screen – look at it fade in and fling around as you scroll, free from physical limitations. That's something that couldn't be recreated in other media. Digital design allows for motion, reaction, animation, extraphysical properties and unprecedented scalability. These all allow the experiences we can create with digital products to play more with human expectations of interaction and expand the possibilities design can create.

Designers can now produce even more engaging and effective experiences for people. I focus on experiences within mobile and web contexts (apps and websites). Designing these requires an understanding of when to use expectations of solid, real-world properties (e.g. when information must have a clear structure or an action must be intuitive) and when to avoid them (e.g. when the reaction of an element is supposed to delight or surprise). This is just one skill of this kind. More generally this comes down to knowing that design involves structure and abstracting representations. An app’s interface has rhythm just like a song or a sentence, and being able to ‘feel’ when a design is good naturally comes from this. In music, we all have our preferences, but a good musician knows the more abstract structure of their art, and how to make beautiful patterns of sound which anyone can appreciate. This is what digital designers aim to do with visual experiences and interactions.


To explain some of this design thinking a little further and to give an example of the abstraction I am discussing, I’ll work through a real world example. Let’s take the general formula for a song: verses with choruses between and a common rhythm and timing. Now lets look at one of my most recent designs: my portfolio.

image

As you can see, it has a fixed header with a photo of me, my name and a button. This serves as a constant element much like the percussion of a song. It is there throughout to give context and structure and would only be removed if special emphasis was being put on the rest of the content (like a break for a solo vocal part in music or a fullscreen image in design).

Following down the page we see a single project element with a title, description and image. In the website this is our introductory verse, giving an idea of a common structure but remaining unique in its content.

After this we have the chorus, a block of text on a light background. This is a simpler section and its content is much more distinct than the verse’s.

Below this we have several more verses of the same structure as the first, but notice that their colour is different, indicating significantly different content. These are like the verses of a song in that together they tell a story (of my recent work) but alone they are all different.

As you can see this simple pattern continues for the whole page, which concludes with a very simple footer with lots of whitespace.


While my portfolio is far from complex, it gives a good idea of how these seemingly unrelated arts can be related by understanding their abstract patterns and structures. This is what designers do all the time, and it is what you do all the time without even realising. When an app feels easy to use, a large part of that is because of these abstract structures which you understand and find easy to process. This is why things like the hamburger menu catch on.

One thing digital design and digital form factors can offer that other media cannot is interactivity. When you hover over a project in my portfolio, it springs to life (a little). This reaction is designed to delight the interactor (as I mentioned before) and make them want to engage further with the content. These things are unique to digital design and they allow it to bring new properties to elements. Through animation we can make elements come to life and give them personality, whether this be bouncy and friendly or bold and corporate. This is only the first level of interactivity – element interaction. We also have area interaction, which is the ability of the interactor to change the area of our experience they are interacting with (e.g. clicking the ‘new tweet’ button on Twitter will bring up the compose box). Higher still we have information interaction which is the more general ability of a person to access and modify data which can affect multiple people at one (e.g. writing a comment on Facebook). These are by no means standard terms but I believe they allow us to think of the different levels quite well.

Each of these different types of interaction is much more powerful in digital design than other media. I have realised that when I design, I take each of these into account and design around making each level of interaction the best it can be. This is why I take time when coding for the web to focus on CSS transitions first, then event animations, followed by any data changes for the screen. This is common practise, but defining each type of interaction allows me to better justify the code for it – it lets you say that a specific ‘:hover’ line of CSS code is used for a specific element interaction which has a specific effect and presents the experience in a specific way; rather than just that “it looks good”. Understanding these interactions has helped me to work more effectively with motion in my work and to think about structure in a more abstract way.

This idea of abstraction is one which I have known about for some time. After a few cognitive science lectures it was beginning to sink in. However, only now have I begun to understand how it can be applied to design and used to improve the way we create experiences with digital products. Digital design is something which is unchallenged in terms of its ability to grow and change over time. This allows digital experiences (currently predominantly apps and websites) to include an even broader range of interactions which help people understand complex actions on data and take knowledge or joy from that data depending on the circumstances.

Humans are a bit weird, and design lets us play with our brains’ weird systems for understanding the world to create entirely new experiences for ourselves.


Glossary

Extraphysical Properties – a feature of an element in a digital design which gives the impression of defying the laws of physics (e.g. a pop-up appearing in an instant with no velocity).

Interactor – a person who engages with an interactive experience such as an app or website. I prefer this to the impersonal “user” or just “person”.

Element Interaction – an event between the interactor and a single element of the design (e.g. a button), and the reaction of that element.

Area Interaction – an event which changes the interactor’s perception of the section or area of the experience which they are engaging with.

Information Interaction – an event which changes the underlying data which is being interacted with through the experience by the interactor.


Reading time: 07:38 Written by Graham Macphee