![]() ![]() ![]() But as we look closer, the problem occurs between Body text and Text link, both are sharing the same Type system (20px Regular) which could lead to user confusion and lack of user trust. Now in Approach 2 let’s observe its nitty-gritty parts - the Type system which are:Īt first glance, we might think that this is just an ordinary Type system that we could ignore. There is also another way to incorporate Similarity - Approach 2: But for now, let’s just take the least minimal step in making it better using Similarity □ This Design Problem A, can be furthermore improved by redesigning it (this will really need redesigning) so that it can simplify the user’s experience more. Thus, the Law of Similarity comes in:Īs our solution, I created similarity by making the text color green and adding left and right padding to our active state, so that it will be in closer proximity to the other tab, Flexible Maximizer. As we can see, it is pretty obvious that the branding colors of the interface are green, but suddenly a blue text color pops out from nowhere. But on a simpler note, nothing binds these two elements together which makes them look individually alone. What Makes These Two Elements Unrelated to Each Other? The reason for that is, on user interaction, Heavy Data User and Flexible Maximizer are related - they are actually Tabs user interface □ Design A In Design Problem A below, I’ve pointed out the blue text color. People often perceive them as a group or pattern. Similarity occurs when objects look similar to one another. In this way, we are able to tie up the 3 elements together (Image, Title, Link), which helped us to resolve our missing context problem. In our Design solution using Proximity, I removed the distance between Title, and Link by making them closer using center alignment. ![]() From having three individual elements floating in outer space into making them as one whole component: The whole component is out of context because nothing ties together the image, title, and link. If we will create a wireframe out of them, it would look like this: Wireframe One example of how we can use Proximity in solving design problems can be seen below: Title and link are far from each otherĪs we can see, the Category Title (Online Booking & Cruises) and Links (Learn More) are too apart from each other, which makes them look like floating elements. The idea that when objects are placed in close proximity to one another, those objects are seen as a group rather than seen individually. Thus if you have other design solutions, feel free to reach out to me. Some design problems you’ll see will need redesigning, but I opted to stick with the original design and make it better using Gestalt. Thus in this article, I’ll be sharing with you of how I used these Principles as my design solutions to the following websites and apps I’ve encountered:ĭisclaimer: The following design solutions provided are sample solutions using Gestalt Principles. This journey of discovering Gestalt Principle led me to a full understanding of how I can incorporate these principles into my design track. This school of psychology played a major role in the modern development of the study of human sensation and perception. Instead, our minds tend to perceive objects as part of a greater whole and as elements of more complex systems. When trying to make sense of the world around us, Gestalt psychology suggests that we do not simply focus on every small component. Gestalt psychology is a school of thought that looks at the human mind and behavior as a whole. And as I continue to dive deep into where Psychology comes in the picture of Design, I then stumbled upon Gestalt Principles. Our profession entails empathy whenever we deal with human needs whose our goal is to solve. I have always believed that Psychology and Design comprise User Experience. – Solving Problems by Understanding Human Behaviour. Psychology + Design: Gestalt Principles as Solutions ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |