Forem: Razvan Ilin

Designing for memory - Design Stories 2

Razvan Ilin — Fri, 07 Feb 2020 14:56:01 +0000

Prepare your coffee or tea and let's get ready to go through the second design story, part of the 32 Design Stories series.

In the previous part, I wrote about the visual perception capabilities that we humans have and how important this is for design. We take all the current interface design for granted, although most of them rely on decades of research. Especially since the Gestalt Psychology school was founded at the beginning of the 20th century.

Now let's shift our focus towards our memory and to relevant theories that are guiding the design. Believe it or not, designing for memory is vital in ensuring that your users are not struggling with your product. Again, due to the decades of research in this domain, most of the current designs are doing a good job on this side of things, but the problem comes with more complex systems where you have to keep switching between familiar interface interaction and more specialised use. Let's go to the basics first.

Attention

Attention, as I see it, sits right between perception and memory and has an important role in how we perceive the world. For example, you can look at something, but if you're listening to what somebody from behind is telling you or you are deep in thought, you will most likely not pay attention to what you're looking at. Some people are better than others at dividing attention, but as designers, we should not make these ideal assumptions.

Like I mentioned in the previous article, we are constantly processing a lot of sensory information at any given time. When we are working in an office, we will pay attention to the temperature around us, the voices, notifications, the colleague chewing something near us, etc. We as humans have the capability of having selective attention. This is how we manage to focus on what we want to pay attention to.

There is an interesting effect called the "Cocktail Party Effect" which describes the situation when you look at something, but you pay attention to another thing. Much like at a party when you look at a person, but you concentrate your attention on someone else speaking behind you.

When it comes to design it's fairly difficult to design for attention since you have limited knowledge about the user's capability to maintain a focused state for long. The general rule of thumb is to make sure the user can resume the work at any time as though they lost attention. Thinking about an interface, this could be a visual state of the progress that's been done by the user, so they can safely resume.

You can read some more in-depth theories in the "Cognitive Psychology" book written by Robert Sternberg.

More of an aside, here is a podcast episode from devmode.fm about maintaining focus as a developer.

Memory

Memory comes in three different levels that feed into each other, the sensory stores, short-term store, and long-term store (take a look at the picture below). Attention is part of the sensory memory and this is extremely short-lived in nature. If we stop paying attention to the information at hand, it fades immediately.

Now let's take a look at the other two parts, the short-term and long-term memory.

Short-term memory

Short-term memory or working memory is where we keep the information we need to complete the tasks at hand. The information we keep here usually fades away in around 30 seconds. A good example is a sequence of numbers we use to make the next call. Let's say we have a chat with someone and this person tells us a sequence of 7 numbers to make a phone call right away. This usually works and most people will be able to keep this information in their memory long enough to make the call.

The cognitive psychologist George Miller wrote a famous paper where he discusses the ability of a person to remember 7 ± 2 numbers using their short-term memory. This number can be extended using patterns. Remember in the last article how good people are when it comes to patterns? Well, this is the same when it comes to memory. For example, if we have a series of let's say 16 numbers, but we chunk this into groups of 4 and each group has a meaning for us, then we could actually remember this long sequence quite well.

1980 4687 7734 2514

What are the implications in design when it comes to working memory? As designers, we need to optimise the way the processes work within the application. The first example that comes to mind now is the 2-factor authentication. Let's say you secure your application and decide to send an SMS code to your users when they try to log in. The easiest way for the user is to glimpse in their notifications to see the code and then write it in the verification box on your site. Pay attention that the user will most likely have their phone on the table, locked and with a short on-screen time so writing number after number and checking the screen multiple times is a bit cumbersome. So what are most of the applications doing? They send a very short number, usually ~6. That way most users can remember the number with just one glimpse. Six is still a big number and the safest bet that the user will save the number in their working memory is more like 4.

Long-term memory

Unlike the working memory, long-term memory is basically unlimited in capacity. Our long-term memory stores most of the information in a semantic way so that we can remember facts based on the context or we can even use our senses to pull down memories, for example, using our olfactory senses to recognise the perfume of a loved one or to recognise if food is fresh or not.

On top of the semantic memories, we also have two other types, episodic and procedural. The episodic memories are things that marked us in life such as important achievements and very negative experiences. You know how everybody says that once you learn how to ride a bike you will never forget how to do it? Well, this is the procedural memory at work. This type of memory usually is always accessible in our minds unless a person suffers a severe trauma that can interfere with the memory.

The implication in the design arises when thinking about how people retrieve the information from the long-term memory store. There are two ways that designers in HCI base their designs on - Recognition and Recall. My favourite example to understand these concepts is the one on the Nielson Norman Group's site where it describes the situation when you meet a person on the street, you remember their face, but you think hard and can't remember the name exactly. The first part of the example when you remember their face is the recognition at play and the second, when you want to remember the name is the recall. You can see right away that recognition is a much better way to retrieve information from the memory. Recall requires more time and effort for the person.

Using the information above, we can reach the conclusion that we want to employ recognition as much as possible in our designs so we don't put too much pressure on the user. Recognition is easier because it relies on more cues to help a user retrieve the memory. In the example above, we might've seen the person multiple times, but they didn't mention their name all the time for us to remember (I often forget names because of this). So when designing an interface we rely on common design patterns such as toolbar menus in photo editors with the familiar icons for select, bucket, crop, etc.

Have a more in-depth read about this on Nielson Norman Group's site.

Discussion

In this article, we looked into the inner workings of the mind when it comes to memory. In my HCI journey so far one of the most prominent discussions arising were about the Recognition/Recall. Most designers nowadays try to use elements that users are accustomed to and really keep the user away from having to recall information or to learn new things completely. But I want to start a discussion with you on this.

One can argue that always designing for Recognition can kill innovation. Think about it - what if we're too afraid to come up with new interaction designs and miss out on opportunities to introduce new designs in the industry. Michel Beaudouin-Lafon, one of my professors at Paris Saclay, mentioned that it takes usually around 20 years for an interaction type to move from the lab to the industry. But now I'm thinking, what if designers in the industry will stop taking current interaction designs for granted and become more creative? Do you think this will create chaos in the world of design or everybody will benefit from this? I would love to hear your opinion, so feel free to send a tweet my way and let's discuss!

Catch you next week with another article in the Design Stories series. If you haven't done so, subscribe to the newsletter to know exactly when I post a new story.

-Raz - @razvanilin

This article was based on a lecture by Patric Dahlqvist from KTH University and David Benyon's Designing Interactive Systems book (ch. 21 and 23).

Cover Photo by Valentino Mazzariello on Unsplash

Human perception and how it influences design - Design Stories 1

Razvan Ilin — Mon, 03 Feb 2020 15:16:23 +0000

Prepare your coffee or tea and let's get ready to go through the first design story, part of the 32 Design Stories series.

In this article, we're going to take a dive into learning about different human capabilities when it comes to the perception and how it influences the designs we are creating. This article is based on a lecture I had at the beginning of my course in HCI. It will be more theoretical than I planned, but I think it will be useful to get to know different theories, build upon that and then get to play around with some examples. It's funny how when I started studying these I was getting tired of all the theories and now I see the importance of all of them when thinking about design. And this is the point of this series - going back through all the material and extract the most interesting and important bits that I can then build upon and apply later in my projects.

Perception

Even though we as humans can do amazing things with our bare hands, we got where we are today based on our ability to create tools to help us in the day to day life. You will hear this a lot in HCI, but one of the most sophisticated tools we are referring to in this domain is, of course, the computer. Even though there are advancements in different AI algorithms to make computers smarter, at the end of the day the computer is still meant to be used to help humans accomplish goals faster. What I'm trying to get to here is that we have capabilities such as our perception of the world that influences how we create these tools. Knowing more about how we perceive the world means that we can design better tools.

Our perception capability is based on how we gather information from the world. This is done through our senses like vision, hearing, smell, touch and taste.

We are actually processing a lot of data every second:

With our eyes, 10 million bps
With our skin, 1 million bps
With our ears, 100 000 bps
With our nose, 100 000 bps
With our tongue, 1000 bps

So in total, our brain's bandwidth is of about 11 million bits/second. Naturally, perception becomes of great importance to HCI and related fields like Human Factors because then the design can take into consideration how humans communicate with the world around them. Since we're concentrating on HCI, we're going to look more into how humans communicate with computers, in particular, and how the design is influenced by this. The main sense we're going to look at is the vision.

Vision

When it comes to vision, we as humans are super good at recognising patterns. Take the image below as an example where you can easily recognise all the letters in the image below as the letter "A" even though the letters vary in size and shapes. The fcat taht yuo cna raed tish aslo prooevs taht hmuans aer cool.

from https://www.s-cool.co.uk/

This superpower can also play tricks on us with things in the form of what we call optical illusions. Take the image below as an example. What do you see?

from http://illusions.org

These are all interesting observations because it hints that we can see things better if we group them. If we can't see patterns, it will be hard to understand and navigate the world around us and will create confusion in multiple scenarios. All these observations were the basis of a psychology school that was founded at the beginning of the 20th century called Gestalt Psychology.

Gestalt Psychology

Max Wertheimer, Kurt Koffka, and Wolfgang Köhler founded the Gestalt Psychology school which studied human perception and created a theoretical framework and methodology around it. The theory is based on the following principles:

The whole is more than the sum of the parts
The isomorphism principle or the similarity of structures
The organisational principle

From my experience in HCI, the last principle is the most important one when it comes to design. This principle is split into proximity, similarity, continuity, closure and good form. You might find these under different names depending on what site you stumble upon, but don't worry too much about it as the meaning is the same. So let's see what these mean:

Gestalt organisational principles

Proximity

Because we're so used to seeing patterns we tend to group items together based on the distance between them. If you look in the image above, you can notice right away 4 pairs of lines instead of 8 lines. To better illustrate this, let's think of a website UI where you group cards to better convey information. In the example below, you can see pricing plans grouped together in a row and then underneath there's more information about member pricing. The way you would read this is influenced by the position of the cards. You will most likely explore the different plans and only then look at the details. On top of this, both sections are close to each other because they both refer to pricing. The rest of the elements on the page are further apart to differentiate themselves from the pricing section.

Similarity

We also tend to group items together by how similar they are with each other. This works in the example above as well. The 3 pricing plans cards all look similar and our brain instantly sees them as a group. The members' section is clearly referring to something other than pricing plans because it looks different. The picture above combines Proximity and Similarity to better convey the information. You might say that this is straightforward and that you do that without thinking about these terms and I 100% believe you. Don't forget that these principles were developed in the first part of the 20th century and website design evolved just "recently". Now all good practices are based on these theories even though most designers don't know about these principles.

Continuity

The best example other than the picture above is a song. When you hear a song you don't hear every single note, you hear the entire melody, the continuity of the notes. In the example above, you don't notice every dot at first, you firstly see two lines intersecting each other. In UI design this is mostly reflected through the proper alignment of items on the page.

Closure and good form

This is mostly reflected in the way we perceive messages from shapes. In the principles picture above, we can clearly notice that the image shows two circles and that one of them is on top of the other. I actually had to think a bit how this can be used in website UI design as I couldn't remember the examples we went through in the class when we covered these principles. Luckily, I found this article by Eleana very interesting to read for more details and examples of how Gestalt principles can be used in website UI design. The closure and good form principles can be reflected by using iconography to convey quick messages on web pages.

Conclusion

Human perception studies were and still are paramount to how Human Factor-related design evolves. The UI design is made for human use and it makes complete sense to know how we perceive different things. We have pattern recognition superpowers and our design should reflect this. I find it very interesting now that I look at all the websites out there and most use Gestalt principles in their design. I don't think this is all due to the studies done in the first part of the 20th century though. I'm a firm believer that even without knowing about these studies we inevitably let our design be guided by how we perceive the UI as we put everything together. Is that enough? Maybe not, I think having theoretical knowledge can help tremendously. And, of course, having the practice takes you on a whole different level.

The next article will explore human memory capabilities and how to design for the different situations. Stay tuned for next Friday and don't forget to subscribe to the newsletter to get a notification when I post a new part in the Design Stories series.

Until next time,

-Raz ✌

Follow me on Twitter if you want to get in touch - DMs are open 📬

Cover Photo by Daniil Kuželev on Unsplash

Thinking of writing about HCI & interaction design

Razvan Ilin — Wed, 22 Jan 2020 14:10:53 +0000

Hi Everybody,

I am creating a new series on my blog about all my learnings from 1.5+ years of studying HCI & Interaction design in my master course. The series will have more than 30 posts containing theory and practice about different methodologies used by designers in research projects to create digital artefacts and interfaces.

Some examples of what the stories will be about:

Discussing Don Norman's principles of design
How to brainstorm and different methods to do so
How to interview users
Ethnographic observation
Usability testing (when to use it and when to stay clear of it) and other evaluation methods
Lo-fi & Hi-Fi prototyping
Video prototyping
...and many more

All of these will come with examples as I try to bring practice in all the articles.

I'm doing this mainly to record all the information I accumulated in this time because if I don't do it I'll most likely forget a lot of it. These design methods are to be used in different situations so it's good to have something to come back to when starting a new project in the future.

I'm mainly a lurker on dev.to and I was wondering if this is something that the community will like since it's not about coding directly. If yes, then I will repost my articles here as it will probably much easier for users to read the material than going to yet another blog.

Cheers ✌

Raz