While I was ordering food on Panera Bread website, I noticed a few things.
Overall the website design was fairly clean, but as I was scrolling their menu, I felt something was slightly off.
Because images of sandwiches are so strong that those grab my attention first.
Because of that, my visual scanning goes from top to bottom naturally starting from images.
Right below images, there are a few options like the size, customize, “Add item” button.
These options are well grouped with its corresponding image because of the background colors and the fact that the colored section is directly attached to the bottom of the image.
As you move your focus further down, you see menu item names.
Initially I was expecting that these are the item names for the photos that I already scanned through.
But then I realized that these item names are actually not for the above images. These are for the next new images right below the names.
Each menu item block consists of an item title, an image, then options including “Add item” button.
But the way its designed visually does not help you see this structure in the easiest way possible.
The item name on a white background somehow makes it “get lost” when you glance the whole page.
I think this is caused by the item name background having the same background color as the overall page background, and only having a grey stroke around it to separate it from the page background makes the item name area as a whole blend in as part of the background.
As a result, the parts with strong color and density, which are images and options parts, popup from the rest, detached from their item names.
To solve this problem, you can either put a slight shade to the item title section, or the page background, so that the visual grouping becomes more visible for each information block.
Here’s an example of putting a slight shade to the item title section.
As you can see, each information block immediately comes together as one block including the title, compared to the original design.
The same effect can be achieved even more dramatically by putting a shade to the page background.
These are subtle differences in visual treatment, but it makes a huge difference in organizing information blocks visually and effectively.
As a result, you lower a viewer’s cognitive load, and makes information easier to glance.
Check out YouTube version too.