Make your Key Insights the Boss using Visual Hierarchy
Source: https://www.creator-fuel.com/blog/what-is-visual-hierarchy-in-design-explained-with-examples
This month we are discussing hierarchy in qualitative data design. What is hierarchy? Why should qualitative researchers even care about it?
Honestly, you should care because hierarchy is the foundation of a good layout. It’s the start of how you make your slides pop and have an impact.
Without having a good hierarchy in which to present your qualitative data, you might as well report chaos and confusion, while also overwhelming your viewer at the same time.
What is hierarchy in design vs research?
In art and design, “hierarchy” is clearly defined. It refers to the organization of design elements – such as line, shape, and color (amongst others) – to show the order of importance. By laying out these elements logically and strategically, designers can influence users’ perceptions and guide them to desired actions.
In qualitative research, “hierarchy” is not as clearly defined and can refer to several concepts. It can refer to the social structures being studied. It can also refer to coding and analysis of the data, amongst many others.
However, based on these definitions and understanding of what “hierarchy” entails for both design and qualitative research, we can understand that the common thread or purpose of “hierarchy” in both qualitative research and design is about order and organization. Good organization of how you present your data is key.
Ok, what do we do with that? Why should we care?
Well, according to Nielson Norman Group, a research-based user experience firm, visual hierarchy “controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.”
Have you ever looked at a slide or page in a report and thought “Where do I begin with this?”. That’s what Nielson Norman Group is referring to. You can have great insights from your qualitative data, but without a clear, organized structure in place to make it make sense to a viewer unfamiliar with your data, those precious insights will simply get lost/never used/forgotten. Which is exactly what we DON’T want as qualitative researchers.
A solid understanding of “hierarchy” provides researchers the capability to:
Offer Clarity and Focus: Hierarchy allows for a clear structure, helping viewers quickly grasp the main points and navigate through the data. It reduces cognitive load by directing attention to the most important elements first.
Emphasize Key Insights: By highlighting significant insights, themes, or narratives, hierarchy ensures that viewers can easily identify and understand the core messages.
Create Aesthetic Appeal: A well-structured hierarchy contributes to a visually pleasing and coherent design, making the visualization more engaging and effective.
Developing an understanding of visual hierarchy can enable qualitative researchers to directly influence how a viewer sees, responds to, and uses a design. And by having this understanding, qualitative researchers can create a more impactful and clear understanding of their data’s story.
How can qualitative researchers use hierarchy to aid in their qualitative data design?
It really comes down to certain elements of design, such as:
Scale: Larger elements naturally draw more attention. In qualitative data design, this could mean using larger text for main headings or bigger shapes for key insights. Look at the image below. Where does your eye go? Which layout seems to have more emphasis?
Color: Bright or contrasting colors can highlight important information. Utilizing a strategic color scheme can enhance the visual hierarchy and reinforce the significance of certain data. Look at the image below. Which is easier to understand?
Position/Format/Layout: The placement of elements on the page impacts their perceived importance. Typically, items at the top or center are viewed as more important. This is a very classic layout. But you can pay around with this. Remember our meme from the beginning of this post? How does it direct your eye? You’ll have noticed that it follows this classic layout, but uses other principles we’ve discussed to create visual interest and direct your eye. And that’s why it works.
Contrast: Differentiating elements through varying fonts, weights, colors, or styles creates a clear distinction between levels of information. Look at our examples below. Where does your eye go first?
Whitespace: Proper use of whitespace (or negative space) helps to separate and define elements, guiding the viewer’s eye through the hierarchy without overwhelming them. Here’s a great example of how important whitespace is for creating visual hierarchy and guiding a viewer’s eye:
Source: https://www.digital.ink/blog/importance-white-space/
CAUTION!
If you ignore any of these concepts, you’ll wind up with a confusing and ineffective design.
Try to avoid the following common mistakes:
1) Not making the differences obvious enough. If the differences aren’t significant enough (as we saw in our contrast example previously), then the hierarchy becomes unclear, and the composition becomes harder for viewers to navigate. Our brain and eyes aren't exactly sure where to look first and where to carry on from there. We, as humans, like and need a direction to visually follow.
2) Using too many contrasting colors. Look, I get it, I love color and the defaults in a lot of our programs have a lot of different colors, so we should utilize all of them, right? Right? This is a common belief, but it is a misconception. Remember our color comparison above? It was kind of hard to look at. Color contrast is important for creating visual hierarchy, but too many colors can create excess cognitive load and overwhelm the viewer. This is why understanding color theory and selecting color themes is crucial in any type of visual design. You can read more about that here.
Implementing Hierarchy in Qualitative Data Visualization
By being mindful of how these design elements come into play in visual hierarchy, qualitative researchers can begin to organize their data to generate the most impact.
Here are the steps I will follow when I’m planning a visual hierarchy:
1. Identify Key Insights: Always, always, always start with your data. Before I even begin to consider designing anything, I figure out the most crucial insights/themes from my qualitative data (usually during the analysis phase). I then will place these themes/insights at the top of my design as they are the most important and will form the top tier of the visual hierarchy in my report.
2. Plan Your Layout: Once I’ve isolated my key themes/insights, I will then sketch or grid a rough layout to determine where each element (bullet points, quotes, images, etc. that support that key theme/insight) will be placed. I also allow myself to change the layouts as I’m working on the design. Sometimes I will realize that that key insight is not as prominent as I initially thought, or I have so much within a theme I need to break it up into smaller components to make it easier for my stakeholders to understand. However, I always ensure that the most important data points are given prominence through size, color, position and/or other design elements.
3. Use Visual Cues: One thing I really love about PowerPoint is that it can make applying visual cues easy right out the gate. The slides are already programmed to account for different visual cues such as larger or smaller fonts. However, I don’t rely on font size as my only visual cue in the overall design. Colors, images, and the positioning of your data on the page can all be used to accent and support your key insights (as well as make the page more aesthetically appealing)
4. Maintain Consistency: Consistency in king. Maintain consistency in your design elements like fonts, colors, and spacing helps maintain a clear hierarchy and enhances readability. I always make a list of the fonts, color hex codes, even opacity levels I’m using when creating a design. This not only helps me stay organized, but also consistent.
5. Test and Refine: Feedback is crucial for designers, but even more so for non-designers wearing a designer hat. People see things differently and may see something that you missed (this happens to me all the time). Be open and get feedback on your design, not only to ensure the hierarchy is effective, but so that your design eye can also improve. Testing does not have to be a long arduous process either. It can be as simple as saying to your co-worker or client “Hey, does this look ok?” It also has the added benefit (if you do this with your clients) to giving them a sense of buy-in or ownership over the data as well. After you receive feedback, adjust as necessary to improve clarity and focus.
Conclusion
And there you have it! Visual hierarchy is the foundation of having a cohesive and impactful overall design when it comes to designing qualitative data. Creating a good visual hierarchy requires a little planning but is worth doing because of how massive an impact on how you can effectively communicate your qualitative data. Visual hierarchy can reduce cognitive load, capture attentions, and allow viewers to really absorb the information from your research.
References:
"5 Principles of Visual Design in UX." Nngroup.Com. Nielson Norman Group, March 1, 2020. https://www.nngroup.com/articles/principles-visual-design/.
"What Is Visual Hierarchy?" Shutterstock.Com. Shutterstock, May 21, 2024. https://www.shutterstock.com/blog/establish-visual-hierarchy?gad_source=1&gclid=Cj0KCQjwjLGyBhCYARIsAPqTz1-ybow01RIPuvgntaz9Z0RgxS6ViGZWOZ2N8ajeYktTJiOn7rP50O0aAkmvEALw_wcB&kw=&gclsrc=aw.ds.
"What Is Visual Hierarchy in Design?" Creator-fuel.Com. Creator Fuel, September 20, 2022. https://www.creator-fuel.com/blog/what-is-visual-hierarchy-in-design-explained-with-examples.
"The Importance of White Space." Digital.Ink. Digital Ink, Accessed May 22, 2024. https://www.digital.ink/blog/importance-white-space/.
