In today’s lesson we’ll learn how the Science of Great UI can help us create better callouts.

Take a look at the sample callout below:

Callout Example

This callout violates four of the guidelines we cover in the Science of Great UI. And as we’ll see again and again in this course, when the design (and how the eyes and brain naturally react to that design) fails to match its functional intent, it’s time to fix the design.

The guideline we’ll discuss in today’s tip deals with corners.

If we isolate the callout’s frame, it looks like this:

callout-isolated

In the course we learn how our eyes and brains react to corners. And it may not be too surprising to find out that the sharper the corner is, the more salient (or interesting) it is.

So how many corners (at 90° or sharper) are in the callout above?

A cursory count might reveal the answer to be five.

However, I count ten corners.

The callout has ten corners at 90° or less.

Now, the functional intent of a callout is to explain something and point to it.

And in graphic design, we can direct gaze with an arrow or a sharp corner.

One of the problems with this particular callout design is that it has ten sharp corners (all fighting for our eyes’ and brain’s attention), when it should only have one (pointing to the target graphic elements that the callout explains).

And so the first step in fixing this callout is to round the unimportant corners, like this:

callout-corners-fixed

That’s better. Now the callout’s design more closely matches its functional intent – it very clearly points in one direction. Purists may argue that the design above still includes two extra corners near the base of the pointer. And for those folks I offer an alternative callout shape design, one that truly has only one corner (keeping in line with its functional intent):

callout-corners-fixed-only-one-point

But corners are not the only problem with this callout design. In addition to the corner rule, this callout also violates three additional important guidelines you’ll learn in the course.

To see a preview of the course, as well as the first two chapters for free, click here.

sgui-case-studies-thumbnail-ws

 

By the way, if you purchase the Science of Great UI design course you’ll also get access to my Science of Great UI Case Studies mini e-book, which reveals three more guidelines this callout design violates and how to fix them.