Published on <a href="https://blog.prototypr.io/ux-best-practices-part-2-2016db8eb43?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> UX Boot Camp 
<h4>#30dayUXchallenge [Day 18]</h4>
We started <a href="https://blog.prototypr.io/ux-best-practices-part-1-ce447b316dd9">“part 1”</a> of the UX best practices series talking about how established patterns can help us making our products easier to use by keeping the conventions our users are used to.
Now I want to invite you to think about our products from two different perspectives:
<ol>
<li>The elements our users see (the User Interface)</li>
<li>How they interact with the UI, what is their behaviour (the Interaction design)</li>
</ol>
By covering both aspects of the patterns, we ensure our UI not only works, but is actually enjoyable.
<h3>So let’s talk about part 1, the UI</h3>
<h4>Using Gestalt rules to design interfaces</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aC5Kw69qIJslSoqLLWzB-g.jpeg">Photo by <a href="https://unsplash.com/photos/nSrY5fJ4B60?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Samuel Zeller</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Please, don’t leave the post just yet! I know that “This way” arrow can be quite convincing — and that makes me wonder if there is any link so I can go “that way”.
This tendency to follow an arrow was deeply analysed by “Gestalt psychologists” and, basically, it teaches us how to apply these rules to our designs, so they can help our users making sense of our screens.
I wouldn’t be exaggerating if I said that learning Gestalt changed my life as a designer. I guess I just said it :). It’s one of the few “laws” that I can actually apply on every single work I touch, every single day. It’s not bullshit, trust me!
Overall, Gestalt is a german word for “form or shape” and it analyses the way our eyes perceives forms and shapes. When we see a group of objects, we first perceive the object as a whole- and then we start to identify the smaller and individual parts that compose the entire object.
<blockquote>Gestalt psychologists argued that Gestalt principles exist because the mind has an innate disposition to perceive patterns in the stimulus based on certain rules. These principles are organised into five categories: Proximity, Similarity, Continuity, Closure, and Connectedness (Source: <a href="https://en.wikipedia.org/wiki/Principles_of_grouping">Wikipedia</a>)</blockquote>
<ol>
<li>Proximity</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/500/0*wGfx5KWgEtGmfq43.png">Source: Smashing Magazine
The Law of proximity states objects appear as a group if they are close to each other, even if they are completely different shapes.
How it applies to UX:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2x9wIwW3URR0d-K9epuaQw.png">Source: airbnb.com<img alt="" src="https://cdn-images-1.medium.com/max/704/1*ldW_8fa5drgp8raMSKU65A.png">
On the screenshot above, we can see that Airbnb grouped the search features on the top, the benefits of “Travelling with Airbnb” side by side on three different columns underneath and featured Homes below it. It’s easy to understand the relationship between the groups.
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*RqjZ9i_QSgJtWmIhN202bA.png">
We need to make sure our groups have enough white space amongst each other, so that they are clear defined.
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*PDJ3yETOoGmEHlDjl8WUvg.png">
2. Similarity
<img alt="" src="https://cdn-images-1.medium.com/max/500/0*K2GJJ58USJKm4Xqw.png">Source: Smashing Magazine
Any similar objects are perceived as groups as well. The similarity could be perceived in their colors, shapes, sizes, textures, etc.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AXNSCdrQXeZMcmQ0IoKdMg.png">Source: globo.com<img alt="" src="https://cdn-images-1.medium.com/max/704/1*ldW_8fa5drgp8raMSKU65A.png">
On the example above, you don’t need to speak Portuguese to clearly understand that the “red, green and orange” news are related to three different groups (political, sports and entertainment). By grouping and color-coding the news, readers can quickly go to their group of interest without having to read every single one!
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*PDJ3yETOoGmEHlDjl8WUvg.png">
3. Continuity
It’s our instinct to see a line and follow it. Our eyes just tend to keep following the path until its ending point.
<img alt="" src="https://cdn-images-1.medium.com/max/500/0*4tEjqtd8b_FPi-F4.png">Source: Smashing Magazine
As an example, in the image above the first thing we see are two lines crossing, and not dots side by side.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*37Y5mVa4JpuHmPZYN-KYUg.png">Source: envato.elements.com<img alt="" src="https://cdn-images-1.medium.com/max/704/1*ldW_8fa5drgp8raMSKU65A.png">
Use lines to help your user focusing on what matters. On the screenshot above, we can see that the line below “Check our FAQ” is clearly driving attention to the box with the questions.
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*PDJ3yETOoGmEHlDjl8WUvg.png">
4. Closure
<img alt="" src="https://cdn-images-1.medium.com/max/500/0*K5ofAIbPAsAJ5Adh.png">Source: Smashing Magazine
When looking at multiple objects, we tend to look for a single, recognisable shape within. According to <a href="http://www.andyrutledge.com/closure.php">Andy Ruthledge</a>, despite what you’ll find everywhere else on the subject, closure ain’t just for making clever logos:
When presented with less than the full picture, we attempt to employ the principle of closure to fill in missing information and form a complete image. We naturally fill the gap because our brain is wired to “complete” the missing pieces.
Another concept that is applied on UI based on the Closure law is that users want to “complete” steps somehow. This can be easily perceived on this example from Urban Outfitters below. Notice what happens when the user adds the item to the bag:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dod9BlL1c09tuaerVHfwEA.gif">
3 visual hints give the user feedback to communicate the completion of that step: the button changes to “Added!”, the shopping bag icon shows “1” beside it and a tooltip moves down to reinforce the message that the item was added.
Closure works well when we don’t require the user to think too much about it. If too much of the form or pattern is missing, requiring that users work hard to make sense of it, closure is less likely to occur. So in order to utilise closure as an effective design mechanism, we must make it easy for closure to occur.
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*PDJ3yETOoGmEHlDjl8WUvg.png">
5. Connectedness
<img alt="" src="https://cdn-images-1.medium.com/max/500/0*tOPP1FsBp3datGBE.png">Source: Smashing Magazine
Objetcts that are connected by a visual element are perceived as related to each other, even though they are not necessarily close to each other or have the same shape.
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*ldW_8fa5drgp8raMSKU65A.png">
Similar to the “Continuity” law, we can use elements such as lines to help our user understanding relationship amongst different objects.
<img alt="" src="https://cdn-images-1.medium.com/max/704/1*PDJ3yETOoGmEHlDjl8WUvg.png">
<h3>Want to talk about part 2, interactions?</h3>
Stick around and check our post tomorrow, UX Best practices (part 3)!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F5eb5ba-2%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F5eb5ba-2%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F5eb5ba-2%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href">https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href</a></iframe><img alt="" src="https://cdn-images-1.medium.com/max/119/1*g1xXlc-Yf5xkdPNdA_gxEg.png">Gabi Braga — UX Designer at Envato Elements, freelancer at Toptal &amp; beer enthusiast in her spare time
This post is part of the #30dayUXchallenge: you can read more about why we started it <a href="https://medium.com/envato/why-were-embarking-on-a-30dayuxchallenge-e3d9f1bc1ac6">here</a>, and don’t forget to follow us on <a href="https://twitter.com/ux_bootcamp">Twitter</a> and <a href="https://www.instagram.com/ux_bootcamp">Instagram</a>!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2016db8eb43" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/ux-best-practices-part-2-2016db8eb43">UX Best practices (part 2): Gestalting our interfaces</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Best practices (part 2): Gestalting our interfaces

#30dayUXchallenge [Day 18]

Top Stories