Understanding Visual Hierarchy
Visual hierarchy within UI design is the way the most important content is prioritized to be the first thing a user sees. Design principles help guide UI Designers with creating interfaces that flow in a way that doesn’t create a cognitive overload for users. These principles include size, contrast, whitespace, proximity, symmetry, the rule of thirds, the rule of odds, implied movement, the concept of “below the fold”, and eye tracking. Without visual hierarchy, interfaces would be difficult to use and would amount to an overall poor user experience. I’m going to analyze the visual hierarchy of some websites I use a lot in hopes to better understand these design principles.
One of my favorite websites/apps is Waitr. Waitr is a local food delivery service that started in Lake Charles, Louisiana in 2013. There are currently over 450 restaurant options for delivery/carryout in my city (Lafayette, LA). My favorite feature of the app/website would probably have to be their high-quality photos that are provided with almost every food item.
When I open their home page, the first thing my eyes are drawn to is the beautiful, colorful photo of a fruit tray and plate of pancakes. Highlighting one of their professional photos on their homepage makes a lot of sense because it’s something that differentiates them from their competition. Next, I see their giant text that says, “Discover. Order. Eat. Great local food delivered.” I think they’re able to merge both their unique value proposition (UVP) as well as a call to action with that text. The black text up against the white background shows a strong contrast, which makes it stick out more. There’s already pops of color with the fruit tray photo, so the dark text also stands out in its own way. The color and typeface change for “Local” makes me focus more on that word. Right underneath, there’s a search bar that allows me to search for restaurants and food items.
The top-left corner features Waitr’s logo, and there’s a bar next to it that automatically finds the user’s address. There are more options on the right side, but “Start Order” and “Switch to Group Order” are the actions being pushed more. I think it’s worth noting the proximity of these two CTAs because someone who is looking to start an order might also be wanting to start an order for a group. Peeping up from “below the fold” — which is an old newspaper term that now refers to all of the content that can be seen on a screen before the user has to scroll down — are all of the available restaurants organized by distance from my location.
Personally, I like the design and feel of this website, but I’m also a little biased because I’m a very active user and have worked there. It seems to have a set color palette of specific shades of greens, dark blues, and grays. I love the professional food photos and the use of size and contrast for the text makes it stand out. This is the most important information on their page according to the visual hierarchy of how it’s displayed. There’s some — literal — whitespace underneath the photo and text which helps set it apart from the list of restaurants. The page is pretty asymmetrical up until you scroll down through the list of restaurants. In that case, I think the symmetry helps with the overall ease of use for selecting a restaurant.
Next is a website for the University of Louisiana at Lafayette. I haven’t used this website much since I’ve graduated, but I was on it constantly as a prospective student. UL is the local university in Lafayette, Louisiana and is home of the Ragin Cajuns.
At first glance, there is a lot more going on with this website in comparison to Waitr’s. However, this makes sense because this website caters to a lot more users desiring to use and see a variety of unique content. What catches my eye first is the giant photo of people, which rotates with two other photos. There’s content that goes along with it followed by a CTA. I believe they’re making this the focus of the website because it’s updated content featuring their own students. In the top left, there’s the university’s logo. The white text provides contrast, but I feel like the size of it could be a bit larger. The main navigation bar is centered on the page. There are other ways to navigate around the website to the top right of the navigation bar, and they get smaller and smaller. The website uses the “rule of odds” at the bottom of the screen which has a row of three cards of information.
Last but not least, I’m analyzing Metallica’s website. I’m a super fan and honestly, I’m trying to score tickets to see them with the San Francisco Symphony in September. Metallica is a metal band that formed in San Fransisco in 1981 that continues to release new music and tour the world.
Metallica’s website is certainly different from Waitr’s and UL’s. There’s hardly any text in comparison and it’s mostly whitespace. The entire background is a photo from one of their live concerts. Judging by content that follows the large text that says, “Relive the show!” it’s a photo from their WorldWired tour. They’re pushing for their fans to continue to enjoy the Metallica experience by getting audio recordings and videos from the tour. Since they’re such a famous band and already have an established fan-base, they can focus more on guiding users towards a very specific action instead of a few general things, like signing up. The text and CTAs are white on a dark background, which helps with contrast. The background is busy, so an additional box was added behind it to help make the text more legible. They also use the “rule of thirds” with that box, which makes it look more interesting. The biggest text is their logo, which is featured at the top-center and is aligned with the lighting structure of the photo. There’s a hamburger menu, search bar, and a place for members to log in. At the bottom right there are links to social media.
Overall, each website uses visual hierarchy differently, but each serves very unique purposes. Waitr’s visual hierarchy is aimed to inform people about their service first. The University of Louisiana at Lafayette wants to showcase their student life to prospective students. Meanwhile, Metallica’s visual hierarchy guides fans to reliving their most recent tour.
If you have any feedback or recommendations about this article, visual hierarchy, or design principles, please leave a comment below! Also, feel free to contact me on social media:
Twitter | Instagram |LinkedIn | Email: kaylahrox@gmail.com