Using Gestalt Principles to Improve Your Design – Designer vs. Developer #17

Using Gestalt Principles to Improve Your Design – Designer vs. Developer #17

MUSTAFA: Now everyone
seems to be doing it. And there’s kind
of this fear that I have that we’re just doing
like decorative distractions, because we have the capabilities
to do it, so we’re doing it. SVEN LAQUA: If you’re
designing for a user, go and talk to that person,
or that person representing the group that this
product is relevant for. [MUSIC PLAYING] MUSTAFA: We’ve reached the
point with design tools where they feel like they’re
guiding the way we are actually creating things and
too much control has been handed over to
them rather than the more individualistic custom stuff
that when we’re creating things as designers. I mean, what are your
thoughts on that? SVEN LAQUA: I think we
have made a lot of progress with design tools,
and that’s very good, because it makes it very
easy for a lot of people to pick up a tool and design
sites or applications. And to me, that ties in with
design systems that are often, right, you can load
whole libraries that– I’m working on a
project right now where we have to use material
design, and I can just load all the components,
and we can start doing that. And that’s great. It speeds up the process. But it also means someone
who is not very experienced can make something
that looks good, that seems to make sense
very quickly without actually thinking it through, because
that’s not their job. And so they’re not
designing with, necessarily, the right intent. They can put all
the things together, but they’re not thinking through
visual hierarchies, information architecture, how pages fit
together, user journeys. All those things might
not be designed for. Each screen is designed
for on its own. And so that will look good. But if then someone
starts using it, things kind of might fall
apart or don’t really make sense or become confusing. And that’s because the tool
makes certain things easy, but it doesn’t replace
someone using intent in every kind of
design decision, laying out information,
deciding what information goes on a page, or
doesn’t go there, and how things tie together. MUSTAFA: Do you think they’re
making us more lazy then? Or potentially making
the makers of things not consider context or
like quick wins, easy fixes? SVEN LAQUA: I don’t
think they make us lazy. I think what they
do is they make it even harder to do good design
in terms of their business person. Right? Someone in management
commissions a job, and sees a junior
person can kind of do something that looks all right. Because that’s often
how they look at things. Right? Oh, this looks fine. Then why do we
spend so much time on information architecture
or visual hierarchies. Those are not concepts
that they’re familiar with. And for them, this
looks OK, colors match, buttons, it’s
consistent, so it’s fine. And so I think in
some ways, they make it a lot easier
and faster to do things, but in other ways, they
make it a bit harder to defend why things
take time, why the invisible things of design
just need to always be there. And the tool doesn’t
replace that. MUSTAFA: So in terms
of in UI design, you say motion animation
is quite popular now. And we’ve come to a point where
before to understand animation, emotion was quite complicated. You had to have some sort
of animation background, or at least understand
how the human eye works. But now everyone
seems to be doing it. And there’s kind
of this fear that I have that we’re just doing
like decorative distractions. Because we have the capabilities
to do it, so we’re doing it. And I know you’ve
done a lot of studies with eye tracking and
interfaces about how someone can navigate through
something using their eyes. SVEN LAQUA: I’ve done a lot
of research on HCI and UX, and I’ve built a
lot of prototypes, and I’ve started with doing
just eye tracking studies, looking at where people
look on the screen and how you lay out
the information that it makes sense. But then what I found
a lot more interesting is actually building
interfaces that people can explore with their eyes. And when you get
to that point, it becomes even more critical
to think all of those things through. Because you don’t want any
information that distracts. You need to really
actively think about at every step in time
where you guide the person’s eye, because that’s the only
way for them to navigate around. And visual attention is very
limited, and it’s linear. And as the eye moves, it
abstracts a lot of information. So our eyes kind of are not
getting the rich picture that we think we are getting. Most of that is actually
processed by the brain and interpreted based on
experience, previous knowledge, and so on. So what we are
seeing isn’t really what the eye is perceiving. And so it’s very important
to design, again, with intent for those things. And a lot of, especially for
mobile apps, tools nowadays, come with all kinds of animation
builders that you can do. And again, what the
risk is that you’re losing the intent in what is
the purpose of that animation. So for example, if you
touch a button, right, and it kind of
glows up, which is one of the material
design things, that makes a lot of sense. Because that is intent. It confirms visually that
I am selecting this button. But then I was just looking
at the Google Calendar, for example, where
if I create an event, I can choose the color that
I want to code this event in. And then the whole
header changes. And it uses the same animation. And, yeah, it looks nice. But it over focuses. Right? It takes me off my journey. I’m trying to create this event. I’m filling in all the details. Maybe there’s a reason why
I want to change the color. And suddenly, half of the screen
is animating that color change. That is unnecessary. It doesn’t serve any purpose
other than a little bit of vanity of the designer
wanting to say that I can do this and it looks cool. But it distracts the user. And it’s maybe not a highly
critical situation in a case. It’s just a little bit maybe
frustrating or annoying. But it’s the general risk that
you actually just designing for the animation’s sake. Dark Sky, the weather app,
I really love that app. And it’s very nice for looking
at weather in the next 10 minutes, half an
hour, and so on. But the key animation or
the key interaction with it is just sliding left and
right from your debut to different locations, and
then there is this global map that you can look at the
temperature and the rain on the world map. You’re swiping left
to get to that view. So what this
communicates to me is I can swipe right again to
go back to the other view. But I cannot do that because
I’m now in a global mode. I rotate the globe. And I now need to hunt for the
x in the corner to go back. So the animation is there. Because it’s a common thing,
you swipe left and right to switch between screens,
but it doesn’t make sense. The right way to
design that interaction would be to make the map
accessible from the place where you exit it again. So they are consistent, and they
meet the user’s expectation. When I go to it, I can go back
to it, to the other screen. Or you can spend
more time thinking about how to solve
the problem, and then come up with a completely
different direction. But the inconsistency is
just what breaks this. And it is introduced
because it is so tempting because these
animations are cheap and you can add them
easily and you don’t have to think through the problem. MUSTAFA: I think it’s just
basically gloss, which makes the thing look like
you’ve done something amazing even though it’s just the
setting that you’ve just included. SVEN LAQUA: I think
there is this temptation because animations I
think today the hot topic, and it’s something that would
have been traditionally very hard to do. And you can do it
right out of the box. You pick the animation you want. Just like people, I don’t know,
10, 20 years ago, or maybe even now in PowerPoint do
all these slide animations just because they can, and
they didn’t make any sense. And I’m not saying it’s
just it’s that bad now, but it’s that easy to use them
and not having to think about why am I actually using this
and does it help at all. And just as you would use visual
hierarchies to think through how you organize information,
right, where’s the header, where’s a title, and how does
the paragraph text fit in, and how is the user’s eye going
from one place to the next, the same applies to animation
as it guides you from one screen to another, from one place
on the screen to another. The intent is to
guide the user’s eye from one place they’re
looking at to the next that is relevant for them,
especially if they’re on a journey where you’re
designing to make pain go away. So I have a problem. I need it solved. It’s a shopping journey,
or it’s, I don’t know, I need to fill in
a form, you want to guide the user through
this as quickly as possible, so there’s little cognitive load
and the pain goes away quickly. If you’re designing for
delight, because it’s something entertaining,
or it’s a game, then it’s obviously
different, and the animations have a completely
different purpose. But, again, I don’t think
people think along those lines necessarily enough when
they’re using those tools and adding animations. MUSTAFA: Isn’t that basically
down to experience though? I mean, I think we all
look for the answer. You know, from
some of the videos I’ve done before,
everything’s about the answer. I want this checkbox
for performance. I want a checkbox
for accessibility. It’s like is there
an answer in UX? Is there something that someone
could actually do or approach like principles that they
can look at least to have a starting point? Because unless
someone is an expert, and had studied these
things, how would they know? Or is it do you feel
that as an industry, we’re not necessarily
thinking deeply enough about the problems
that we’re trying to solve? SVEN LAQUA: Yeah. So I think a good
starting point is always to look at some of the
psychological theories behind it, and the principles. And one thing I think
is very important, and when I interview
people, I always try to probe for their knowledge
in those is Gestalt laws, so Gestalt principles. And Gestalt laws
are basically rules. Psychologists came up
with those in Germany. They’re basically just
rules that describe how human perception
works, how the brain tries to make sense of information. And there’s different laws
of proximity, of continuity, of simplicity. For example, if you look at
different shapes and some are complex, less
complex than others, that we find the
simpler ones appealing. Right? And that drives design. That’s why products
look often sleek, and they’re very simple
shapes, and so on. And there’s laws that mean
that we are looking for things that are familiar to us. So if we’re seeing something
we can’t recognize, the brain will try
to make sense of it, and will try to make us see
things that aren’t actually there. The more common laws
would be obviously related to alignment of
information, of groupings, so how we lay out things. Right? So a very concrete
example I like to or that’s very
dear to me personally is if you use whitespace,
right, and how you group things
together to make them appear as relevant
to each other is it’s just use whitespace
rather than lines. Right? Lines as like outlines to
group things is another way, but it’s often a cop out. Right? MUSTAFA: It’s the less
[INTERPOSING VOICES] SVEN LAQUA: Yeah, to do it. And so these laws relate to
how human perception works. And I think it’s critical
to understand those in order to use tools that
come with design systems and that make it very easy
to put things on a screen and lay them out to understand
those rules and those laws to design better experiences. MUSTAFA: So if you’re
a developer coming into this today, or
a designer, what’s the first thing they should
really be looking at when trying to solve a problem? SVEN LAQUA: If I was a
developer, or if I would have a developer to design
something, I would probably tell them to take a
step back not just start playing with the
tools straight away and do some reading. And I think reading
on psychology would be a good thing, Gestalt
laws, human perception. And a very, very useful book
is the “Universal Principles of Design”. It has those kind of laws and
a lot of other laws, beauty bias, all kinds of things that
explain why people perceive things the way they do, why they
make decisions the way they do, why they like certain
things more than others. And so it has the
theory on one side, and it has really nice
concrete examples on the other. And it’s very accessible. And I think it’s a
very approachable book to familiarize oneself with. MUSTAFA: How do you
do your research? SVEN LAQUA: Well, user
research, you should always do. Right? So yes, if you’re
designing for a user, go and talk to that person. If you’re not familiar
with doing user research, it’s very tempting or it’s very
easy to ask the wrong question. How do you like this? Right? Should we do it like
this, or like that? Right? And those are not the
right questions to ask. What you are trying to do is
you’re trying to understand, again, the let’s say the
stick within the kind of solving kind of a real
problem, the user’s pain. You’re trying to understand what
is it that is bothering them. What is hard for them that
you want to design something that makes it easier for them? With that regard,
if for example, I should suggest what’s the
best way to do research, there is something called
master and apprentice model in interviewing, and
it’s for contextual interviews. And it basically tells you
that when you interview a user, you are the apprentice,
and the user is the master. He’s the master of
what he’s trying to do. And he’s telling you
what’s the problem. And you are there to learn
about what’s his problem. You’re not telling
him, or you’re not trying to explain why
the prototype works in a certain way. That’s not your job. Your job is to understand why
it doesn’t make sense for him. So that would be another
thing, contextual interviews would be a good
thing to read up on. MUSTAFA: One last
thing, I mean, I remember Allen Cooper’s
the UX guru who came up with this idea of personas. I remember in the early
days looking at personas, you’d think, OK, what’s
the person’s demographic? But he really
dislikes this idea. He’s like the demographic
doesn’t tell you anything. I mean, what do you think about
defining a persona or user persona? SVEN LAQUA: Well, actually, we
just had a workshop yesterday. And we used empathy maps before,
and I used that template again yesterday. I think traditional
personas that are based on kind of demographic
information for marketing, if you want to
narrow down, right, who the group of customers
is that you’re targeting. But I think a lot
in software design, the experience is a
lot more personal. You want to go a lot
deeper, because you’re designing specific journeys
for a specific purpose for a group of people. And so the only way
you can do that well is by talking to
them, by understanding the groupings, of
course, but understanding the real pain on why the
mother in the morning when she has to bring the kids
to school forgets something. Right? A traditional persona
wouldn’t describe that. Right? The way you understand this
is by going there, observing it, and seeing the problem. And then once you understand
it, and you can actually understand it by just talking
to maybe five similar people for that specific problem, you
can then come up with something to help fix it. SPEAKER: You’d replace the
word blue with the word green, and now you have a green sky. MUSTAFA: You make
it sound so easy. SPEAKER: It really is. Like I’ve got 12-year-olds
coding full VR scenes in under an hour.

4 thoughts on “Using Gestalt Principles to Improve Your Design – Designer vs. Developer #17

  1. Special thanks to Sven for appearing, if you have any questions about any of the topics, be sure to ask in the comments.

  2. I loved this! It was refreshing to hear your guest talk about using white space as a design decision to group elements without adding more visual noise to the design. The proper application of white space is an art form itself and it's very important when you have to create an application that can be very information intensive because you don't need to add even more to the user's cognitive load. I wish more people would listen to this, maybe one day I won't have to give a ten minute dissertation about why I am not cramming more things into a page and white space doesn't mean I'm lazy. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *