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

Key Takeaways

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 if you're designing for a user go and talk to that person or that person representing a group that this product is Miller and forth we reach the point of design tools where they feel like they're guiding the way we actually create things and too much control has been handed over to them rather than solve the more individualistic custom stuff that when we're creating things as designers I mean what you've what your thoughts on that 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 and to me or applications and to me that ties in with design systems that they often write you can load how libraries that working on a project right now where we you 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 do you think they're making us more lazy then all potentially making the makers of things nor consider context is all like quick wins easy fixes 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 businessperson right someone management Commission's a job and and sees a junior person can kind of do something that looks alright because that's often how how they look at things right or this looks fine then why do we spend so much time on information architecture or visual hierarchies that that isn't that those are not concepts that they're familiar with and for them it's this looks ok colors matched 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 by things take time why the invisible things that design just need to need to always be there and they just you to doesn't replace that so in terms of a in UI design use like motion animation is quite popular now and easy look we've come to a point where before to be to understand animation and motion was quite complicated you had to have some sort of animation background or let's understand how the human heart works but now everyone seems to be doing it and there's kind of this fear that I have 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 he interfaces about like how someone can navigate through something using your eyes I've done a lot of research on HCI and you accent it there's a lot of prototypes and I've started with doing just AI tracking studies looking at right 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 the 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 to really actively think about that every step in time where you guide the person's eye because it'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 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 you have if you touch a button right and it kind of grows up so which is one of the materials and things that makes a lot of sense because that is intended confirms visually that I am selecting this button but then I was just looking at the Google Calendar for example where you can 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 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 the vanity of the design of wanting to say that I can do this and it looks cool but as it distracts the user and it's maybe not a highly critical situation in that case it's just a little bit maybe frustrating or annoying but it's the general risk that you're actually just designing for the animation sake dark sky let up I really love that app and it's very nice for looking at vibe weather in the next 10 minutes half an hour and so on but the key animation or the the key interaction with it it's just sliding left and right from your debut to like at different locations and then there's this this global map that you can look at the temperature and the rain and 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 of you but I cannot do that because I'm now in a globe mode where I rotate the globe and I no need to hunt for the ax in the corner to go back so the animation is there because it's a common thing is five left and right to switch between screens but it doesn't make sense the the right way to design that interaction would be to make the map accessible from the place where you exit it again so so they are consistent and and they meet that the users expectation where I go to it I can go back 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 what breaks this and 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 it's just basically gloss which makes the thing look like you've done something amazing even though it's just a setting that you've just included I think there is this temptation because animations I think today 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 maybe even now in power bowing to all these light 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 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 you would use visual hierarchies to think through how you organize information right where's the header there's to a title and how does the paragraph text fit in and how is the users eye going from from one place to the next the same applies to 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 users eye from from one place they're looking at to the next that is relevant for them especially if then 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 than the animations of a different completely different purpose but I don't again I don't think people think along those lines necessarily enough when they're using those tools and editing animations isn't that basically a new experience that I mean I mean I think we all look for the answer you know and from some of the videos of them like before as long as I everything's about the answer I want this checkbox for performance I want a checkbox for accessibility it's like is there an answer of in you err because there's 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 like and I studied these things how would they know or is it do you feel that they're just not people as an industry we're not necessarily thinking deeply enough about the problems that we're trying to solve 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 for the knowledge and those is start laws or start principles and you start laws that basically rules the psychologists came up with those in Germany they're basically just rules to 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 that for example if you look at different shapes and some are complex that's complex other than others that we find the simpler ones appealing right and that that drives design that's why products look often sleep and they're very simple shapes and so on and there's laws that mean that we're looking for things that are familiar to us so if he's seeing something become recognized the brain will try to make sense of it and try to make us see things that aren't actually there the more common laws would be obviously related to alignment of information of grouping so if how you layout things right so a very concrete example I like to or that's very dear to me personally is if you use white space right and how you group things together to to make them appear as relevant to each other is it's just to use white space rather than lines right lines is a to like outlines to group things is is another way but it's often a cop out right using 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 so if you're a developer coming into this today or like a designer what's the first thing they should really be looking at when trying to solve a problem if I was a developer or if I would have a developer to to design something I would probably tell them to take a step back not just start playing with the toy straight away and do some reading and I think reading on psychology would be a good thing ghosts are at loss human perception and a very very useful book is universal principles of design it has those kind of laws and a lot of other laws beauty buyers 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 example than the other and it's it's very accessible and I think it's a very approachable book to familiarize oneself with that how do you do your research 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 with doing user research it's very tempting or it's very easy to ask the wrong question right 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're trying to do is to try to understand again the let's say let's take stick within they're kind of solving kind of a real problem the users pain you're trying to understand what is it that is bothering them well that's hard for them that you want to design something that makes it easier for them in that regard if if for example I should suggest what's the best way to do research there is something called master and apprentice model and interviewing and this for contextual interviews and basically tells you that when you interview user you are the apprentice and the users 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 know telling him or you know 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 one last thing I mean I remember Allen Cooper's the the UX Curie who came up with this idea of personas and members in the early days looking at personas we would look at you think okay what's the person's demographic but he really dislikes this I dislike the demographic doesn't tell you anything I mean would you think about defining a persona or user persona 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 Laden and software design the experience is a lot more personal you want to go a lot deeper because you're designing specific journeys for 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 via the mother in the morning when she has to bring the kids to school forget something right you you you you traditional persona I wouldn't describe that right the way you 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 you replace the word blue with the word green and now you have a green sky you make it sound so easy it really is like like I've got 12 year olds coding full VR scenes in under an hour