Key Principles in UI/UX Design (PSSICA)

PSSICA = Placement, Shape, Size, Interaction, Color, Animation
The p is silent. Let's start there.  

Influencing your user to take a certain action, or influence their feeling, or emotion about an object portrayed to them can be very.. well deep. I have been a designer and developer for several projects through my years in the tech industry and I have come up with a common pattern I bring to every project when working with the project manager on the design.


Design can take on several styles to portray a brand as a whole, but this article is not about edges, angles, or font-type. It's about the basics of influence in the human mind, one layer deeper. The term PSICA is something I started to use, which refers to Placement, Shape, Interaction, Color, and Animation. Which reflect the 4 basic things that come into play when dealing with a UX experience. So let's break it down.

Placement

I think this one is something that can be understood easily. As we grew up, we learned importance goes from top to bottom, and center. When you want to focus someones attention, you put something in the center of their view. When you want to show what will be the first thing you want them to look at within a web page or application, you put it above the fold.


Shape

This one can reflect several things to a user, take for instance the image below, 3 simple square boxes that all have content. This reflects equal importance for each feature.

Now in this next image, we added a new element and made it a rectangle, extending it above the other squares.

This image is also reflecting placement, which we talked about above. It's important to understand that compounding these concepts together delivers more importance for the user.


Interaction

The next one that I will touch upon is Interaction, most people overlook this, as it is not shown until the user performs an action and the element reacts. An element could be hovered, and then one of its other PSSICA properties changes, such as size (shape) and/or color. This can also be overdone in some cases, you don't want every element on your page intractable, it makes the user


Color

The color of the element is very important, without the need to say, colors influence how we feel. We can easily apply different colors and color tones to show importance. As we are taught psychologically at a young age colors have reference. This stems throughout life and into the human interaction with software interfaces.


Animation

I recently added this one, as animation can portray an emotion, for example, a rocket flies quickly on the screen and then slowly off. It portrays that something is slowing it, or if something fades in as you scroll, it could be because you didn't want your user to think about it or be distracted by it yet. This can be used for multiple call to actions, or for the presentation of a call to action after 3 seconds on the web page or app.  Animation becomes a powerful way to not only direct the user's attention but also to tell a story to get your user to go in the direction you want them to.

Eric Cavazos

Eric Cavazos

https://codelabs.io

I love to build software, workout, and snowboard...

View Comments