Trip Advisor is a tool that allows users to explore and book travel experiences. Although travel hasn’t been in the books during the pandemic, the website is reminiscent of better times. On a brighter note, it does provide ideas of places one can go by car that are near their local town.
At first glance, the visible items on the site are: the logo, navigation cards, hero image, user actions and search bar. Although typing all those items seem like a lot, it presents itself rather simply on the website. The use of space and alignment draws your attention to the left through right and top to bottom, where the navigation and actions lie. The space between the cards, the top right actions, and hero search action suggest the order of actions the user can take.
As shown in Image 1, the navigation cards are grouped together in a grid-like structure, horizontally and vertically, a principle that Cooper et al. recommend. The labels and icons are consistently aligned, as well, within each card. On the other hand, the label and icon use between the navigation cards and the user actions, on the top right, are not consistent. However, I imagine it might be because they are trying to visually differentiate the use of these two groups. The navigation cards also have an outline around them, which I believe was intentional in order to call out more attention to those elements or actions.
When scrolling down further, the headers can be seen distinguished by large and bold typography with a line that defines a next hierarchy.
Following this, the white space on the left leads your eyes to move left to right and top to bottom. I think this is a great example of showing concise information, or “keeping it simple” in other words, which does not result in cognitive overload to the user.
One piece of constructive feedback is that the colors for each of the homes in the Image 2 have different saturation, and therefore certain homes call more attention from others. Being that none of these homes should be calling out more attention than another, I find this to be distracting and could result in biased customer decisions. For example, see the “Lake Harmony, PA” image in comparison to the “Luray, VA” image.
Scrolling to the next section, the use of hierarchy changes. Instead of following the visuals of Image 2, the header in this section is defined by a box with text within it. Underneath, there are similar image cards representing places one can further explore or learn more about. I found that the header in this section appeared to be clickable, even though it’s not, because its visuals (a box with a label inside) is synonymous to the clickable image cards. See Image 3 below.
Additionally, the positioning of the “More to explore” header does not make it apparent whether it belongs to the previous section, or as a ‘new’ section (as shown in Image 4). Since no other section uses the box frame visual, I was also confused that this was a header; as mentioned, my first impression was that it was a clickable button.
In conclusion, I find Trip Advisor’s website simple, easy to process, as it does not have a lot of visual clutter and the typeface is consistent throughout. In addition, I think it provides a good balance of icons and text, as said by Cooper et al. “Visually show what; textually tell which.” However, I found that the visuals chosen for the “More to explore” header was not consistent to the other headers, and ultimately was confused by its interaction (or lack thereof). I also found that the difference in color contrast between the images unappealing, though I understand that it may be a hard thing to keep consistent since the photos are uploaded by hosts and not Trip Advisor. Having said all this, I still found that the overall visual elements of the site did a good job communicating the available interactions and followed other patterns I’ve seen on the web.