Dissecting the Visual Design of Products through PINC Analysis
Designing carefully crafted interfaces can sometimes be difficult. We constantly seek inspiration and make efforts to better our designs. The trick lies in sticking to the first principles of visual design by focussing on presentation, interaction, navigation, and content.
Is “Simple” simple enough?
“We want to offer a simple and usable yet world-class product” — says every product company. And..why not! Aren’t we all suckers for simple and uncomplicated products? Be it physical or digital products, we want to experience simplicity in everything. But achieving this simplicity is rarely as simple as it seems. Chris Sacca, a renowned venture investor, and entrepreneur, popularly known for investing in Shark Tank products believes that:
“Simplicity is hard to build, easy to use, and hard to charge for. Complexity is easy to build, hard to use, and easy to charge for.”
Looking beyond ease of use
In the quest to make simple and usable products, creators often focus on resolving one aspect of complexity and end up ignoring the other elements that stitch the whole experience of the product. Some important questions to ask while designing a product should be:
- Is it easy to learn and remember?
- Is it efficient to use?
- Is it engaging?
- Is it error-tolerant?
One of the most important aspects of building a good product is understanding visual design and its core elements and principles. While there is no magic formula, there are four magical pillars of design that help us achieve this. To elaborate more on this, we, the designers of the Methodbee Initiative present to you — PINC analysis.
PINC Analysis: 4 steps to mastering visual analysis
PINC stands for:
Presentation — tells about the ease with which the product may be understood.
Interaction — shows how we interact with it.
Navigation — shows how we navigate and locate what we need.
Content — informs us what is it that we want to see.
Presentation, Interaction, Navigation, and Content form the four pillars of visual design. And these pillars aren’t completely self-contained. To create a fantastic user experience, they must all be in sync and integrate smoothly. While Presentation and Interaction connect users to the interface, Navigation and Content assist users in developing a better understanding of the products.
PINC analysis is incredibly useful in many aspects of the design life cycle. It can be used while conducting competitor analysis and visual testing.
A team that learns together, stays together
Before getting into the session, we had a small icebreaker with our team to get them warmed up for the session. We used this entertaining and educational UI errors game — Can’t Unsee — in which two design samples are shown and the player must find the correct one. We assume you’ve played this before, but if not, give it a shot. While we were pleased to see that our designers had an exceptional designer eye, we were surprised by our developer buddies who took the lead and scored the maximum points.
Diving into the P, I, N, and C of PINC analysis
Presentation
What are the things to consider when understanding Presentation?
- Visual perception — How we perceive the products i.e. what emotions do they invoke in us and how our mind reacts to them.
- User’s attention — How can we engage users while they use a product.
- Layout — The consistency, structure, and hierarchical organisation of content.
✍️ Things to keep in mind
1. Basic elements of Visual Design:
Before stepping into the visual aspects, it is essential to remember the basic elements of visual design — Line, Shapes, Color, Value (lightness and darkness of a color), Texture, Typography, Form, and White space (negative space).
2. Principles of Visual Design:
A visual design should have unity, balance, and hierarchy between all elements, follow Gestalt’s laws, and emphasise the elements with contrast and scale.
Interaction
Interaction is how the user reacts to the visual design after it has been processed. The two factors that influence the interactions are:
- Interface — The forefront of a system where the user can interact with. It consists of an informative and intuitive set of UI components, user flows, and sequences that assist users in making decisions and completing tasks.
- UI Controls — The elements of the interface that allows users to perform actions. For ease of understanding and implementation, these elements are mostly consistent and generically defined.
Interaction involves 5 dimensions: Words, Visuals, Objects/Space, Time, and Behavior.
- Words — The written information provided to users.
- Visuals — The graphical elements like images, typography, icon, etc. that helps us understand the interface better.
- Objects/Space — The medium via which users interact with the interface, such as the mouse and keyboard. It also accounts for the user’s physical surroundings.
- Time — How much time do users take to interact with the interface. It also includes media that vary over time, such as animations, videos, and sound.
- Behavior — How users and the interface behave and react, i.e. how the product responds to user inputs and delivers feedback.
✍️ Things to keep in mind
1. Easy to recognise:
The design solution should be easily recognisable and actionable. The user should not get confused while interacting with the design.
2. Easy to navigate:
The interface should be intuitive and informative enough for the users to be able to navigate and accomplish tasks with ease.
3. Provide clear affordances:
The states of interaction should be distinct, consistent throughout the product, and have clear affordances to enhance usability.
4. Handle errors efficiently:
The solution should be able to identify, avoid, and handle errors while also providing sufficient information to users in order to reduce their effort.
Navigation
Navigation has a significant impact on how people interact with and use the products. It’s the least irritating route for your customer to get from point A to point B, and even point C. Largely, there are three types of Navigation:
- Lateral Navigation — It is moving between the same level of hierarchy. It allows users to navigate to other destinations inside the product, as well as pivot between related items in a set. Navigation drawers (sidebar menu), bottom navbar, and tabs are some examples.
- Forward Navigation — It’s switching across consecutive levels of hierarchy, steps in a flow, or across the product. It is frequently included in the content of the screen via a variety of components. Content containers, such as cards, lists; buttons that progress to another screen; search on one or more screens; and links inside the content are just a few examples.
- Reverse Navigation — It is the backward movement between the screens. The navigation might be in reverse order of the most recently visited screens or one step upward in the hierarchy.
✍️ Things to keep in mind
1. Clarity:
The navigation should be clear and intuitive throughout the product.
2. Effortless to use:
The user should be able to get to their destination with less or no effort.
3. Easy movement:
The user should be able to return to a previous screen or action (unless restricted by security reasons).
Content
The language you choose and the way you tell your stories may make or break the user experience. Users want to discover the information they’re searching for quickly and with as little effort as possible. This is best achieved by prioritising and arranging your content such that the most critical information appears first on the page, followed by additional topic specifics, and last, any background information. This is easily illustrated with the Inverted Pyramid.
✍️ Things to keep in mind
1. Scannability:
The content should be easy to scan and process. Wherever possible, acronyms should be avoided. The content should be brief and crisp, i.e. it should deliver instructions rather than lengthy descriptions. However, critical information should be included wherever possible.
2. Right usage of Active and Passive voice:
Active voice should be used most of the time, especially when writing instructions or labels that support user actions. It is observed that users tend to scan the first 7–11 characters while looking for relevant content. Passive voice can be used to emphasise important terms upfront in headers, sub-headings, captions, and so on.
3. Keep it basic:
In order to keep the content simple, jargon or complex technical terms should be avoided. Users consume and comprehend basic content faster.
4. Consistent personality:
The personality of the content should be maintained while changing the tone to meet the user’s emotional state and the topic.
But where do we use PINC?
While the four pillars of visual design assist us immensely in building better and more usable products, they can also help us in identifying and analysing better designs. PINC Analysis can be majorly used in:
- Competitor Analysis:
It is essential to conduct routine analyses of our competitors to stay updated with market trends and product offerings. Comparing our business to our competition shows us where we can improve and excel. It may even assist you in identifying a new niche that you can capitalize on. PINC analysis for competitors may help us learn about current visual styles and interactions, better our understanding, and improve our product’s user experience. - Visual Testing:
It is the method of laying out the description and explanation of the visual structure of a product, as a whole or of specific flows. It is done in three phases:
- Observing the visual attributes
- Analysing the observations further
- Interpreting and making statements about them
By applying PINC Analysis, we can peer review and analyse the visuals of the user flows and features introduced in the product. This will help us understand how we have integrated our visuals and flows into the current product.
But we don’t say it just for the sake of it. We at Zeta Design have used PINC analysis in a variety of ways in our products and competitor analyses. One of our clients introduced us to this strategy, which gave us a new perspective on analysing the visual aspects of products and competitors. And we’ve found that this is our go-to approach for most projects. Here’s an example of how Zeta uses this technique:
Implementing PINC Analysis in your design process
Thank you for sticking with us all the way through. Here’s a tiny treat for your patience. Now that you have established a firm grip on the four pillars of design, you can confidently proceed to perform PINC analysis with these simple steps:
- Pick the products (internal or of competitors) and collate the screens.
Assemble the screens or mock-ups of the products you want to analyse. - Categorize them and select the journeys to focus on.
Create categories for specific user flows or journeys. This will provide better context. - Color code the four pillars and document your observations under each pillar.
Take 4 color cards (we recommend: red, blue, green, and yellow) and assign them to each of the four pillars. Once done, start adding your notes/observations. - Create the final analysis — collectively for all products or individually for each product.
Create a final analysis of your observations by highlighting the important points.
You can also find our Figma template to help you start with your PINC Analysis.
Closing the session with a quick activity
After an intense and information-packed session, we intended to de-stress our team with a short and light activity. We asked them to choose an app and do a short PINC Analysis on it. And they all agreed on the bold and modern app — CRED.
We divided our team into four smaller groups and distributed the template to each. Here are a few observations made by our teammates:
We hope you use this method in your workspaces soon and share your experiences with us. We have also shared the link to a few important resources below.
And that’s a wrap.
Thank you Lavanya Gopalaswamy, Ramakrishna V, Kshitij Pandey, and Nupur vats for your valuable feedback and support. A huge shoutout to Aakansha Menon for her lovely illustrations.
Links to Resources:
- https://www.wqusability.com/articles/more-than-ease-of-use.html
- https://www.tothenew.com/blog/4-pillars-of-design-part-1/
- https://www.tothenew.com/blog/4-pillars-of-design-part-2/
- https://museum.cornell.edu/sites/default/files/Johnson%20Museum%20Visual%20Analysis%20101.pdf
- https://medium.com/ideas-by-crema/it-is-difficult-to-keep-it-simple-452d1fe24646
