Our eyes are strange because they often lie to us. But if you understand this property of human visual perception, you can design a more user-friendly interface. If you are a font designer, you can design fonts that “look” more harmonious by taking advantage of the visual properties of the human eye. If you’re an interface designer designing the way users interact with machines, understanding this visual property is also useful. Read on to see what this visual property is.

1. Geometric perspective and human eye perspective

Which do you think is taller, the square or the circle in the picture below?





Does it feel like the square on the left is much bigger than the circle on the right? But if I tell you, geometrically speaking, they’re the same width and height. I know you’re gonna think I’m lying to you again, so I’m gonna have to mark the scales.





Let’s look at another picture. Can you see whether the height (diameter) of the square and the circle in this picture is the same?





To me, the height of a square and the diameter of a circle look the same, in other words, I can’t tell you off hand which of them is bigger. I wonder if you feel the same way?

Actually, I increased the diameter of the circle by 50 pixels.





To illustrate this, I took the two examples above (one is a 400 pixel square and circle; The other is: a square with a length of 400 pixels and a circle with a diameter of 450 pixels.





As shown in the figure above, the square on the left has more area A than the circle, and the circle on the right has more area B than the square. The square on the left completely covers the circle, while the square and circle on the right are relatively balanced. Neither of them completely covered the other; instead, each had four more zones than the other. Also, parts of the square and circle in the picture on the right overlap, although the width of the square is different from the diameter of the circle.

We can see the same phenomenon in a square versus a diamond. To make them look the same, the square should be slightly wider and slightly higher. The area – size – based approach is perfectly valid for a variety of simple shapes.





Do you think 1 is bigger than 2, 3 is bigger than 4

So how do we apply this principle when we design interfaces?

For example, when designing a group of ICONS, it’s important to make the group look the same size so that none of the ICONS stand out too much and none of the ICONS look too small. If we place the icon directly in the square area, the square ICONS will look bigger. As shown in the figure below.





Do you think 2 is bigger than 1, 4 is bigger than 3

Therefore, I recommend that you slightly adjust the size of different shapes of ICONS when designing them. Make the ones that look smaller slightly bigger and the ones that look bigger slightly smaller. As shown in the figure below.





In fact, many ICONS do have this tweaking now.





Now it’s clear why the icon area is always bigger than the icon itself — it’s simply because you want non-square ICONS to look the same size as square ICONS.





The red line is the icon area

In fact, the easiest way to test the size of a user’s visual area is to blur the icon. If the blurred ICONS have the same pixels, the ICONS will look the same size.





But in practice, we often use ICONS that already exist. Take, for example, the social networking logo, which is often used for sharing and liking. Facebook and Instagram have square ICONS, while Twitter’s logo is the outline of a bird and Pinterest’s is a “P” surrounded by a circle. That’s why Twitter and Pinterest have bigger ICONS than Facebook and Instagram, so all four of them look the same size.





Another example of visual balance is shown below, when a text box is followed by a circular button. If the diameter of the circular button is equal to the height of the text box, the circular button will look smaller than the text box. But if you make the diameter of the round button a little bit bigger, the whole design looks more balanced.





But if you adjust the style of the circular button, there is no need to adjust the diameter of the button, as shown below. The height of the round button and the text field are both 80 pixels, but since the round button is filled with a black background color, it’s hard to tell which one is smaller.





Summary (tap on blackboard)

  1. Visual size is the size and meaning of an object perceived by the human eye, which is not necessarily equal to the actual pixel size of the object.

  2. Circles, diamonds, triangles, and other non-square ICONS need to be slightly larger so that they look the same size as other square ICONS.

  3. ICONS should have room for visual balance. This is important for a group of ICONS to look the same size.

2 consistency of different shapes

Visual congruence is a logical extension of visual balance and visual weight. Take the stripes in the picture for example. Can you see if they are the same length?





In terms of pixels, they’re exactly the same length. However, at first glance, many people think the lower stripes are shorter.





If you look at this picture again, do you think they’re the same length?





I borrowed the principle of visual compensation and increased the length of the bottom stripe by 20 pixels to compensate for the visual difference between the two stripes so that they look the same length.





Of course, there are some more mature examples of stripes of different shapes, as shown below.





So, if you’re designing stripes for poster folds, or if you’re tying discounted stripes to products in an e-mart, make sure the stripes look balanced. The edge of a sharp stripe should extend slightly beyond other shapes, especially rectangular ones.





What about plain text and paragraphs with background colors? This depends on the visual density of the paragraph background. If the background color is bright, you can highlight paragraphs in plain text.





Because the background color is bright, it usually does not interrupt the flow of text the user is reading.





However, if the background color is darker, this method will not work. In the image below, the black background is aligned with the rest of the text, while the white text is indented a few characters.





Why do you do that? Unlike a bright background color, a black background color has a lot of visual weight, and if placed in the middle of a paragraph, just like any other paragraph space, it is best to align with the text, not highlight it.





The same principle applies to the position of buttons and input boxes, as shown in the following figure. This is not a standard, just a visual consideration for the interface.





On the left, the light background color of the input box can be slightly beyond the input box and the user’s input. The right side of the “Send” button does not need to be completely aligned with the right side of the input box because the background color of the send button is darker, making it look heavier to the eye.

In the image on the right, the input box has a black border. I’ve aligned the input box with the text label and indented the user’s input a bit. The “send” button has a triangle on one side, so I moved it slightly to the right to make it look more harmonious with the square input box.





In the image above, we mentioned the alignment of text and icon buttons, which we will now discuss. As shown below, can you see if the text is centered relative to the button?





Can you see that I moved the text on the right button slightly to the left? Because the right edge of the right button is a triangle, not a square. In addition, the right button is 40 pixels wider than the left button, making them look the same size. As shown in the figure below.





Text buttons not only have horizontal alignment, but also vertical alignment of text and background. The first method I want to tell you about is often used in the design of various operating systems, websites, and application interfaces. It is aligned according to the height of the font’s capital letter (the so-called capital letter height), which is equal to the height of the capital letter “H” or “I”.





Basically, in a button, capital letters are the same distance from the top and bottom of the button. This makes sense because the buttons’ names are written in the title, and there are more ascender letters (l, T, D, B, k, H) than descender letters (y, j, G, P).





Another method is to align the lowercase letters in the text button according to their height (the so-called X-height). In Sans and Sans Serif fonts, this height is equal to the height of the letter “X.” Don’t be surprised





This approach also makes sense because the main optical weight of text is concentrated in the region where lowercase letters reside.





What’s the difference between the two methods?

While there are differences between the two approaches, they are not significant, as shown in the figure below.





Let’s look at a couple more examples.

The left side of the image below represents the alignment of the larger letters, which is the most common placement of the Cancel and OK buttons. Because “Cancel” has no downward letter, “OK” is all capital letters.

The right side of the figure below represents alignment according to x height. This is the best placement for the ‘Sync’ button because it happens to have one up letter and one down letter. The arrangement of “Cancel” and “OK” looks a bit close to each other.





The icon button is a little different. Let’s put the usual “send” icon in a circular button, as shown below. Do you have any idea what kind of placement looks more harmonious?





You may have noticed that the button on the left in the image above doesn’t look right. This is because of the different alignment. The first button changes the triangle icon to a rectangle. In a way this is true, because when you send an SVG or PNG icon to a developer, the developer will place it in a square area. The second button places the icon from each corner to the edge of the round button. As shown in the figure below.





When preparing an icon for a developer, you need to reserve some area so that the developer can center the icon against a square background and it looks harmonious.





This is also true in the Play button. If you center the triangle’s icon directly against the square’s background, as shown below on the left, it will look strange.





But if you want the triangle to look harmonious, you can think of it as a circle and center it with the square’s background.





Summary (tap on blackboard)

  1. Shapes with edges and corners need to be slightly larger than shapes without edges and corners to look the same size as square objects.

  2. Uppercase alignment is widely used when placing button names on buttons with backgrounds.

  3. An effective way to handle the placement of the triangle icon on the button is to treat the triangle as a circle and align it with the background.

Optical fillet

What could be rounder than a circle? I used to think such a thing didn’t exist. But as I said at the beginning of this article, our eyes are strange, and sometimes they don’t perceive what we expect.

Which circle is the roundest in the picture below?





I asked a lot of people this question, and they chose between Figure 3 and Figure 4. Figures 1 and 2 are clearly not round enough, while Figure 5 looks too flat. If we overlap the geometric circle of Figure 3 with the variant circle of Figure 4, we will see that Figure 4 looks a bit more rounded than Figure 3, as shown below, with figure 3 on the left and Figure 4 on the right, and the overlapping circle in the middle.





To better illustrate this, I use three common geometric fonts for the letter “O” as examples: Futura, Circle, and Geometria. Since high-quality fonts are built on the basis of human visual perception systems, using advanced visual construction systems, I think they look rounder than geometric circles. Do you feel the same way?





We superimpose the geometric circle on the top three figures to get the figure below. Even the nearest Geometric font, Futura, highlights four parts, while Circle and Geometric characters are wider than Geometric circles. Of course, this comparison assumes that the height and width are the same.





Therefore, from a visual point of view, a circle adjusted according to the relevant rules will look more round than a geometric circle. As shown in the figure below.





The right is the adjusted circle, and the left is the geometric circle

So how can we take advantage of this in our design?

Yes, you guessed it, we can take advantage of this phenomenon when we design rounded corners. If you use popular image editing software such as Photoshop, Illustrator or Sketch, the result is a geometric image rather than a more harmonious one. As shown in the figure below.





Do you think that the rounded corner is a straight line that suddenly becomes a curve? In other words, it doesn’t look natural at all.





I tweaked the rounded corners based on our visual perception, as shown below.





I added another area to my rounded corners to make the gradient from line to curve look even smoother. The diagram below.





You can see the difference between the two rounded corners in the picture below.





We can also use this method on rounded buttons, as shown below.





I guess you’ve noticed that the rounded corners of the button on the right in the image above are smoother and more comfortable.

Similarly, we can apply it to the design of app Icon. A not simple fillet using standard achieved a perfect result. But while we’re on the subject, let’s see for ourselves what the difference is between these two rounded corners.





As shown above, the picture on the left is my standard circle Sketch. The diagram on the right is superllipse, also known as Lame curve. The Lame Curve was discovered by French data scientist Gabriel Lame.





Marc Edwards pointed out that the formula of Lame curve produces smoother, more perfect looking shapes. ICONS after iOS 7 use it too.





Later, the shape was adjusted to look like the one below based on the golden ratio and the grid that guides the design of the new icon, but that’s another story.





The biggest benefit of using shapes like Superellipse is that they look rounder and smoother. However, such non-standard shapes are difficult to use in real interfaces. They should be able to combine the SVG of multiple special formulas, either with some scripting, or with PNG masks like Apple did on their app ICONS.

How about adjusting the rounded corners during the design process?

You need to convert the default rounded corners to outline, then open shape Edit mode and manually adjust the position of the curves as shown below.





It is important for visual correction of images that the rounded corners are adjusted to look more vivid than the exact rounded corners entered.





Left: before adjustment; Right: After adjustment

Summary (tap on blackboard)

  1. Geometrically rounded corners look more fake, because you can clearly see that a straight line has suddenly become a curve.

  2. Visual correction of rounded corners requires special formulas or manual shape adjustment.

eggs

Do you sometimes feel that the square you draw doesn’t look right or square?

Isn’t that nonsense, you might think? Now, look at the two squares in the picture below. Which one looks more square?





Which is more like a square?

If you choose the one on the left, you may be listening to your inner voice from unbiased optical perception.





The right-hand side is actually more square

Personally, I was surprised to learn that our eyes are more sensitive to the height of objects than to their width. This explains why the geometric letter “O” is geometrically wider, and why the vertical part of the capital “H” is always wider than the horizontal part.

Abstract: Optical Effects in User Interfaces (for True Nerds) 46K (as of October 11, 2017

— the end —

Thanks for reading!