UI and UX
Monday, January 20, 2020
The Official Starter Guide for Great User Experience Design
So you want to dip your feet into the world of UI, UX, IxD, IA, RBC, B-Complex, and G14 Classified. Get with the acronyms because they will be sprinkled all over this article and additional articles in this series for our convenience - a noble sacrifice that we’re willing to make.
- UI: User Interface
- UX: User Experience
- IxD: Interaction Design
- IA: Information Architecture
- RBC: Red Blood Cells
- B-Complex: a water soluble vitamin
- G-14 Classified: A made up code for privacy of an assignment used in the first Rush Hour movie.
In case you haven’t realized by now, the last 3 are completely irrelevant to this article.
This article is suppose to be a 5 minute read so we’re going to keep things simple, sweet, and straight to the point. So let’s get right to it.
Gestalt Principles (gesh - pronounced like mesh; talt (pronounced like vault), AKA Principles of Grouping, AKA Prägnanz, is an integral set of laws and gateway drug to creating great design.
"Das Ganze ist etwas anderes als die Summe seiner Teile"
Or “the whole is other than the sum of it’s parts,” is a very common saying that is usually referenced in this topic, quoted by 20th century German psychologist Kurt Koffka. In other words, the human mind is capable of interpreting something without having to recognize individual elements. For example, the letter 'S' in the USA Network logo.
So we’d like to say that there are about 5-8 principles of Gestalt, the reason why it varies is because some laws can be broken down further. But for the sake of time, and simplicity, and the lack of today’s average human brain’s capacity to pay attention to something for about 5 minutes before dozing off, we’re going to stick to 5 of them.
The Law of Proximity
If you see two people sitting together on a very large empty bench, there is a good chance you will assume the two individuals share a relationship. Same thing goes for things that users see on a screen - elements placed closely together, are viewed as being related compared to those that are placed farther apart.
The Law of Figure & Ground
The human mind is great at perceiving what is in the foreground and background. When the two appear to be flat on a screen, however, with no indication of a third dimension, we’re hopeless. So when creating interfaces that require the user to focus on a particular component during their experience, use shadows or blurs to help us regain hope. Material Design cultists usually have shadows in their UI to indicate a presence of focus. As for the people that love the Forbidden Fruit (Apple, iOS Human Interface Guidelines), use frost blurred backgrounds behind components that require focus.
For example, if you want modals to pop up on a device screen, be sure to darken or blur the background. This contrast helps users feel focused to complete a task on your platform.
The Law of Symmetry
Insecurity and instability can easily be triggered when elements on a screen are not symmetrical. Humans love symmetry, it creates a sense of order and stability, and is effective for communicating content in a scannable manner. That doesn’t mean, however, asymmetry ain’t sh*t. Asymmetry is vital to creating experiences where a certain element needs to demand a little more attention than the rest of the guys on the screen. An easy example being CTAs or ‘Call-To-Action’ buttons.
The Law of Closure
Yes, UIs need closure too. For example, if you are depicting progress, for the sake of progress, DEPICT PROGRESS. It is much more intuitive to understand a progress circle expressing 75% instead of a bar. Of course, you can further visually aid the bar or circle to better represent the percentage, but make sure that visual aid is there. Otherwise, your user will go to bed at night unable to sleep. Because you couldn’t give them the one thing they wanted - closure.
The Law of Similarity
This is a good one. Oh yes, this one is disobeyed too often! If it looks like a duck and quacks like a duck, and the user finds out that it’s an elephant - there will be riots on the streets.
Similarly, (no pun intended with the law itself) if your confirmation button or button that progress the user forward in their journey, is the same color, same drop shadow, same shape, same everything - as the cancel button which is located right next to it - you might as well take the next SpaceX shuttle out of this planet.
Similarly, (teehee we punned it again 🙃) for best practice implementation of your platform’s interaction design, keep a consistent color across all means of interaction. If a pink element means the user can interact with it, don’t suddenly use green on something else that can be clicked. This is confusing to users and before you know, they are going to start clicking on blank spaces on your page because you’ve turned them into a headless chicken. Congrats.
As a great designer once said:
“Gestalt or Get Out.”
In other words, dramatically boost your user’s experience by implementing these key principles into your platform. It doesn’t matter if your product is a website, web app, or native app - no mode of platform is above these laws.
Remember, at the end of the day, bad design will always cost more than good design. So Get-stalting! 😉
Ready to create something awesome or transform your platform? Unlike anyone else in our industry, we can turn it around in less than 10 days, no matter the size of the project, and still cost 70% less than the national average creative agency price. Oh and all of our prices are up front, final, and transparent. So there's no random agency fees that we can sneakily add on overnight unfortunately. Strictly located in the USA. Beat that and we’ll get on the next shuttle SpaceX off of this planet.