Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:47 minutes
  • Overview
  • Transcript

2.4 Dial Down the Visual Noise

Best practice #4: dial down the visual noise. And by visual noise I mean unnecessary design elements that are meant to make a pricing table look more attractive, but serve no real purpose.

A good example would be the combination of green checkmarks and red crosses. The checkmarks would indicate availability, while the red crosses would indicate the opposite. Let’s take a look at some more examples.

2.4 Dial Down the Visual Noise

Best practice number four, dial down the visual noise. And by visual noise, I mean unnecessary design elements that are used to make a pressing table look more attractive, but serve no real purpose. And a very good example here is the combination of green check marks, and red crosses. The green check marks would indicate availability, while the red crosses will indicate the exact opposite. Now, it doesn't really make sense to use both, right? I mean, if there is no green check mark next to a feature in a specific plan, then it's kind of self-explanatory that that feature is not available, right? There is no point in using another graphic to represent that. Thankfully, I haven't seen those around lately. So, I guess we're off to a good start. Now, most websites put a dash where a feature is not available, like this Shopify example here. The dash line is very subtle, so, it doesn't create too much visual noise. And the way it contrasts with the purple check marks makes it very clear to see what feature is available. SendGrid does something similar. They use very subtle dashes together with blue check marks to indicate availability. Now, while this works just fine, it's also a good idea to use just check marks, or some other form of visual indicator to show availability. Formstack, for example, does exactly that, feature availability is indicated by orange check marks. The plans that don't support certain features simply use blank cells. This is also very clean and easy to read. Another great example is Slack. Their pricing table is quite long since they offer a lot of features, but it's very easy to identify which features are supported in all three plans. Now, when it comes to reducing visual noise, something else to consider is the use of illustrations and icons. And while these might add to the visual appeal of a pricing table, they shouldn't be used unless they serve a specific purpose. To give you an example, we'll look at the website of Big Cartel, which is a platform for online shops. Their pricing table shows images on the header of each plan, and then the price of those plans overlaid on the image. Now while this looks interesting, those images don't really help a user decide on a specific plan, nor they represent a particular plan. There is another example, a good one this time. Slack uses this illustration on the left side of their pricing table, but it's not creating visual noise. It makes the pricing table more interesting, while integrating it with the rest of the website. So, is it or is it not okay to use images and illustrations? I would say it's totally okay if those images or illustrations serve a purpose. If they represent a plan, maybe, or if they help the users make a decision. TunnelBear, for example, totally nails this by using these three illustrations which represent their pricing plans very well. Now, what about icons? Because a lot of people want to use an icon for each individual feature. I would recommends against that, because it would just create visual noise, it will add a lot of content to the page. And unless those icons are custom made, which, in the majority of cases are not, they will not be able to represent that feature in a meaningful way. If, however, you do want to go down this route, make sure you use monochrome icons, and preferably line icons, so the visual impact is not as severe. Symu is doing this, and their pricing table looks pretty clean. I still think that removing the icons would make everything way better, but that's just my opinion. And that's best practice number four; dial down the visual noise. Now, let's move onto number five, which is make the price stand out, and that's coming up next.

Back to the top