today I want to finish going over the laws of UX with you. So in part one of the Laws of User Experience, we went through some of the laws that I thought were more specific to the UX side of things.
Now, in part 2, I want to go more into things that I think apply directly to UI. So even though UX is not the same thing as UI, it's still important for people in the UX profession to know and understand.
As always, a link to the resources for the content that I'm going to be discussing is included in the description, so go ahead and check that out if you want to learn more and dive a little deeper. Let's get started with part 2 of the Laws of UX: UI edition.
1) Aesthetic Usability Effect : This states that people are more likely to think that your design is usable, if it looks nice.
Visually pleasing design scan create a very positive response in the mind. If your design is aesthetically pleasing, your users may be more likely to forgive some minor hiccups and usability; however, it's really important to keep this in mind while your usability testing.
If you are testing a design that looks really good, there's a high chance that you could miss a usability issue. Your testers, because of the way your design looks, may not speak up or even see it a san issue. This is why it is a great idea to test at lower fidelities.
So while you're designing wireframes, you can test those out to make sure you're catching any usability or functionality issues.
2) Von Restorff Effect : otherwise known as the Isolation Effect. This is a prediction that states that when multiple similar objects are present, the one that's different is the one that's most likely to be remembered.
 |
| Von-Restorff-Effect |
So this is important to keep in mind when want to design something to be visually distinctive or memorable, like information or actions that you want your users to either take or remember. This is the reason behind highlighters and why they exist.
You highlight things within text to be able to find it later; to come back to it; to remember things, right? If you're anything like me, you've had an instance where you highlighted basically the whole page, which does absolutely nothing for your memory because everything looks the same.
In order to make these visually distinct things, you can change things like color, shape, size, the list goes on.
3) Law of Proximity : In the Law of Proximity, objects that are closer together, will be grouped. In the human mind, we group things that are closer together. We associate them to be related in a way, because it helps with information processing.
It's more efficient and it saves us time in our thinking. It helps us recognize things faster and it's more efficient just for our mind and how it works.
Because of this knowledge as a designer, the things that you actually want people to group together, you put closer together.
4) Law of Similarity : This law states that the eye will usually perceive similar elements within a design as one complete picture or shape, even if the elements are separated. Anything that you want to be different on your screen or to stand out, needs to be visually different and styled consistently.
Kind of similar to the Isolation Effect. This is super important to keep in mind, especially for interaction designers. So, if you have a certain element or a component within your screen in your product that you want people to know that they can click on or tap on, that element needs to be distinct--whether it's a button or a link.
anything that you want your users to know that they can interact with, make it visually different. I can look at this even from afar and see that this link right here is a link.
It's an element in the design that is super different, that makes me think that I might be able todo something different with. I'm thinking, "all right, I'm not able to click on this text up here but man, this looks different. It's underlined and it's a different color.
" Maybe it's bolded and has a hover effect too. Anything that's visually different is going to stand out to people. Whenever you have something that you want your users to understand is different, for example, something that they can interact with, it's best to have that be visually distinct and also... styled consistently.So here, everything that you can interact with is the same color.
5) Law of Uniform Connectedness : This law states that elements that are visually connected will be thought of as related more than elements that are not visually connected.
Things with the same color, shape, or other visual aspects will be thought to be related. It's something that we see in interaction design, again.
Anything that you want people to think do the same thing, take this law into consideration, and use it to your advantage.
6) Law of Common Region : The Law of Common Region states that if you outline several objects with one clearly defined boundary, people will think that they are a group.
Keep that in mind, again, when you want people to think that things are related; to think that things should be grouped.
Similar to the Law of Proximity, another way that you can create groups or have people create groups in their mind of your content is by actually drawing a border around them.
7) Law of Pragnanz : The Law of Pragnanz states that people will perceive ambiguous or complex images as its simplest form because it requires the least amount of mental effort.
If you haven't noticed by now, humans tend to err on the side of not thinking too much. We gravitate toward simplicity so that we can understand and interpret information without being overwhelmed.
So, if you can help it, make things simple. Simple figures are the way to go. Avoid complexity where you can.
I think of them more so applicable to the development side of things but it's still really good to take into account on the UX and UI side.
8) Doherty Threshold : states that productivity is at its best when the system and its users interact at a pace that's no less than 400ms long. This way, neither one has to wait on the other. When it comes to creating your product, loading time and response time although not as "sexy," are things to take into consideration because they affect the experience.
Nowadays, nobody likes to wait on anything, especially technology, so when we're creating our products, it's important to keep this in mind so that you can at least make it seem as though the user does not have to wait.
This law is super old but it still rings true. For example--and this is something that I learned fairly recently that I did not realize. And somebody correct me if I'm wrong because I am liable to regurgitate this in an incorrect way--if I remember correctly Instagram at least when they first started, will start loading your photo, like whatever you choose to post, before you actually post it.
So it's doing all of these things on the backend while you're creating your caption and going through filters and doing all this other editing, and then finally when you hit post, it's kind of already posted.
You just opened the door for it to be accessible and seen by whoever you want it to be seen by. If Instagram hadn't done this, then you would be waiting a lot longer than it seems like you're waiting for your image to actually upload.
Honestly, my mind was blown I learned this but it makes sense. You're uploading a whole picture; a whole video. The system needs time to do that.
That progress bar that you see after you hit "upload" or "share," a lot of the time, it's actually not even doing anything but it's making sure that you feel as though you've taken this big action and the speed of the process in which it's being done, is fast.
9) Fitt's Law : which states that the time to acquire a target, depends upon that targets distance and its size.
this is where we get into HCI ,or human-computer interaction. There are actually studies that have been done to measure the time it takes to interact with different elements on the screen. The way you interact with websites on a computer, is different from the way you interact with it on your phone.
Same thing with on your TV if you're playing a game. So the button size on your computer, will differ from the button size on your phone which will also differ from the button size you may have on your TV screen.
There are standards for this and this all has todo with Fitt's Law and what's most convenient, most comfortable, and most doable or usable for people. When we're taking this law into account, it's important to keep in mind that objects that are touchable should be distinguishable from those that are not and they need to be easily selectable, so they have to be big enough.
They should also be easy to touch. So they should exist in places that are convenient for people. If you're on your phone, for example, there is a region that is most accessible for people with their thumbs and where it can go easily versus where it can't. And I'm using my left hand...it's different for the right.
You also have to make sure buttons are not too close to each other. It's really easy to accidentally tap the wrong thing if things are too close.
So, what is it that you want your user to do? Figure that out and then make it easy for them. What don't you want them to do? Figure that out and make it a little bit more difficult.
So do we make things that we don't necessarily want users to do, harder for them to do? What are your thoughts? Let me know.
10) Occam's Razor : When we're designing, oftentimes, we end up making things a lot more complex than they need to be because we're trying to provide the best user experience for people.
But a lot of it is distracting and just plain unnecessary. Occam's Razor states that among two competing hypotheses that predict equally well, the one with the fewest assumptions should be the one that's selected.
So in a general sense, extra things don't need to be added unless it's necessary. What does that mean for design? K.I.S.S. Keep it simple, silly! What's the minimum that you can show to your users to allow them to be successful in whatever tasks or goals they have to accomplish? What is the simplest thing that you could put on this screen, so that your user can understand the content that's being communicated? Figure that out and go from there.
Another way that you can apply Occam's Razor is to relentlessly edit your designs like a mad person.
As you go through your designs, make sure that everything that you've included in there is necessary. Let it be what it needs to be, and nothing more. But when you think about this, what does this mean for the visual design of things? Things that make your designs look pretty and stand out from the rest.
Maybe something that doesn't have too much complexity or is really requiring a lot of mental effort; maybe it's just something that's nice.
I hope you learned something new and took some value from this. If you did please let me know. Feel free to comment and leave me questions.
 | All UX Designers Should Know ){kind=link}
0 Comments