Design
Raiting:
2

[Translation] Circle circle: optical effects when designing interfaces


What "circle" is perceived as the most "round"?

image

Our eyes are a rather strange organ, which, often, deceives us. But if you know the features of human visual perception, then you can create a more understandable and clean design. Typographers are not the only ones who use optical tricks in creating readable and harmonious looking fonts. This knowledge is also useful to interface designers who organize communication between the user and the machine.

How to create visually proportional icons, correctly arrange objects of different shapes and perform an ideal rounding of corners. In the post there are more than 50 images.
1. Actual and optical size
What's more: a 400-pixel square or a 400-pixel circle? From the point of view of geometry, their width and height are equal. But look at the picture below. Our eyes instantly determine that the square outweighs the circle. By the way, words related to weight are better suited for describing optical effects.

image

If you do not believe that the sizes of the figures correspond exactly to each other, here is the version with auxiliary lines and numbers.

image

Let's look at one more picture with a square and a circle. If you rely on visual weight, do they look the same for you?

image

For me, definitely yes. At least, it is already difficult to say at once which of them outweighs whom. Not surprisingly, because I increased the diameter of the circle by 50 pixels.

image

To show why this is happening, I put the figures on top of each other as in the first example (400-pixel square and circle) and in the second (400-pixel square and 450-pixel circle). As you can see below in the picture, the square outweighs the circle in area "a", while the circle outweighs the square in area "b". On the left, the square completely picks up the circle, as if covering it from four sides. On the right, the circle and the square are balanced; no one limits anyone; each has four free zones.

image

The same effect can be observed with the example of diamonds or triangles. To visually look proportionate against the background of squares, they should be larger.

image

How can this feature be used in interfaces? For example, when creating a set of icons, it is important to make them all proportional so that no icons stand out too much or look too small. If we directly enter the icons into square areas, then those of them, whose shape is closer to the square, will look larger.

image

To compensate for the "weight" of icons of different shapes, I recommend giving visually smaller icons to get out of the region, and also leave a little space between the visually large icons and the border of their area.

image

And now look at a few real optically proportioned icons.

image

Now it's clear why the icon area is always larger than the icon itself - just to make the non-square icons fit well and not look any smaller than their square neighbors.

image

The visual balance is easiest to check through the blurring of objects. If you turn icons into more or less similar spots, then their optical weight will be the same.

image

But sometimes we are dealing with already existing graphic elements. For example, social network logos are used on the "Share" and "I like" buttons. Icons Facebook and Instagram are square, while at Twitter it takes the silhouette of a bird, and in Pinterest it is represented as a letter "P" inside the circle. Therefore, the Twitter and Pinterest icons are slightly larger so that they do not look isolated against the background of the Facebook and Instagram icons.

image

Another example of a violation of visual harmony is the text box next to the round button. If the button's diameter is equal to the height of the text box, the button will appear visually less, but if we increase it a little, the whole composition will look better.

image

But if you change the style of the button, you will not need to enlarge it. In the picture below, the height of the button and the text box is 80 pixels, but the button on the right on the background with the text field looks better due to the black fill.

image

It's important to remember


Optical weight is something through which human eyes perceive the size and significance of an object, and it is determined not only based on the size in pixels.
Circles, rhombuses, triangles and other non-square shapes need to be made larger, so that the square-like figures do not suppress them visually.
The area of ​​the icons should have a little free space for optical balance. This is very important when creating a set of icons, so that all elements in it look the same.

2. Aligning objects of different shapes
Optical alignment is a logical continuation of the theme of optical harmony and such a phenomenon as optical weight. Look at the strips below. Do they have the same length?

image

With respect to pixels, a solid "yes". However, at first glance, the lower strip looks shorter than the upper one.

image

Another picture with two strips. Has anything changed?

image

For the bottom strip I applied optical compensation. I made it so that its sharp tips would go 20 pixels beyond the boundary of the length of the upper strip. So you can compensate for the gap between objects and make them visually equal.

image

And now a more complex example with strips.

image

So, if you create a poster where there are bent strips with text, or you put a bright strip with the word "discount" on the product card in the online store, keep in mind that they must be visually balanced. Sharp corners should extend slightly beyond the rest of the figure, especially for rectangles.

image

And what about aligning plain text and paragraphs with the background? It all depends on the visual density of the background. If it's light, then the selected paragraph is aligned to the main body of the text.

image

Because the background is light, then nothing breaks the harmony of the text.

image

Absolutely differently it is necessary to arrive with a dense background. In the picture below, the black background is aligned along the border of the main part of the text, and the white paragraph inside it contains indents.

image

Unlike a light background, black has a significant optical weight, and if you want the paragraph to fit well into the overall structure of the text, then it is better to align it as in the picture below.

image

The same principle applies to buttons with input fields. Of course, this should not be taken as a truth in the highest instance. Treat this as a way to present the interface through the prism of optical phenomena.

image

The bright background of the input fields on the left can go beyond the boundaries of the headers and user input data. The right edge of the Send button slightly lags behind the right border of the background of the input field. The button is darker and visually more massive.

On the right of the input fields, there were clear boundaries, and I aligned them according to the headings, and indented the user-input form. The "Send" button has a triangular edge, so it is slightly shifted to the right, so as not to break out of the general structure of rectangular fields from above.

image

And here we come to another aspect of alignment - alignment of text and buttons with icons. Look at the buttons below. The text is centered, right?

image

The whole thing is that on the button to the right I shifted the word a little to the left, because the right edge has a triangular shape. Moreover, the button in the form of an arrow is 40 pixels long, so that its optical size coincides with a rectangular button.

image

In buttons with text, not only horizontal alignment is applied, but also vertical for both text and background. The first approach, which I would like to talk about, is used in the interfaces of various operating systems, sites and applications. It is an alignment based on the height of the capital letter of the font (cap height), which is equal to the height of either the letter "H" or "I".

image

Initially, the distances above and below the capital letter to the edge of the button are equal. This makes sense, because The names of the commands are usually written with a capital letter, and among the letters of the English alphabet there are more letters with the upper remote element (when the part of the letter is on top: l, t, d, b, k, h) than the letters with the lower detail (when part of the letter leaves down: y, j, g, p).

image

You can also align the title and background based on the height of the letter in the lower case of the font (x-height). In the sans and sans serif fonts, it equals the height of the letter "x", as you already understood.

image

And this approach also makes sense, because the main optical weight of the text is concentrated in the lowercase letters.

image

Is there a difference between these approaches? Yes there is. But it is not particularly noticeable.

image

Below are more examples for comparison. The capital letter-height approach presented in the left column is definitely better suited for the "Cancel" and "OK" buttons (so often used), because the "Cancel" does not have letters with the lower detail, and "OK" consists entirely of capital letters. The approach based on the height of the lowercase letter (shown in the right column) wins only in the case of the "Sync" button, in the title of which there are both upper and lower detail elements; and "Cancel" and "OK" seem to be located higher than it should be.

image

The situation with the icon buttons is slightly different. Let's put the popular "Send" icon on the round button. Which option looks better?

image

I hope you noticed that there is something wrong with the left button. This is the case, because different alignment methods are used. The first one treats the icon as a rectangle. In some ways, this is correct, because when you send SVG or PNG files to the developer, they are a rectangular area with a picture of a paper airplane. The right option places the icon so that all its sharp corners are at the same distance from the boundary of the background of the round button.

image

If you are preparing a file for the developer, then you need to reserve in it some area so that the icon can be visually centered.

image

The same with the buttons "Play". If you just align the figures (a rectangle with rounded corners and a triangle) in the center, then it will look strange.

image

If you want to find the optically correct location of the triangle, then enter it in a circle, which you need to align with the background of the button.

image

It's important to remember


Figures with sharp edges should be larger than neighboring rectangular objects, so that it looks better compositionally.
A capitalization is an effective and widely used method for positioning a button's title inside its background area.
One of the effective ways of correctly arranging the triangular icon on the button is to inscribe the icon into the circle, and to align this circle with the background.

3. Optical smoothing of corners
What can be a rounder circle? I used to think that it was nothing, but, as I noted at the beginning of the article, our eyes work rather oddly, and sometimes they perceive things quite differently than expected. So, which circle in the figure below has the most even round outlines?

image

The people I interviewed earlier were chosen between 3 and 4. Numbers 1 and 2 are too "hudovaty" and 5 too "chubby". If we impose number 3 on number 4 (a geometric circle and a modified circle), we find that the second object is slightly heavier than the first and therefore looks rounder in our eyes.

image

To demonstrate what I mean, I took the letters "o" from the three known geometric fonts Futura, Circe, and Geometria. Given that high-quality fonts are built on the basis of human visual perception, and they use a complex optical construction system, I believe their rounded shapes look rounder than geometric ones. You look at these letters, and the eye rejoices. Is not it so?

image

Let's put a geometric circle on them. The letter "o" even in the most geometric font Futura has four protruding parts. Well, the letters from Circe and Geometria are also wider than the circle, but even if they had the same width and height, these four "tummies" would not disappear from us, as if they were terribly hungry and ate extra.

image

Thus, the visually modified circle (on the right) may look even rounder than the geometric circle itself (on the left).

image

How can we take advantage of this phenomenon? Of course, when we need to smooth the corners! If you use the built-in anti-aliasing function in a popular graphics editor (Photoshop, Illustrator, or Sketch), the result visually does not please you.

image

The human eye immediately determines the point where the straight line suddenly turns into a curve. And this rounding does not look natural.

image

I corrected this, taking into account our visual perception.

image

In fillets of this kind, there is an additional area that extends beyond the boundary of the geometric circle, which makes the point of the joint between the line and the curve invisible.

image

Just try to catch the difference between these methods.

image

Now this approach can be applied to rounded buttons.

image

You probably noticed that the buttons on the right rounding is smoother, and it's more pleasant to look at it.

It's the same with application icons. You can not just take and apply the standard rounding of corners, and at the same time get the perfect result. But before completely immersing yourself in this topic, let's look at two figures for which different rounding methods were applied.

image

The first shape is a rounded rectangle created in Sketch. The second is the superellipse or Lame curve. This object was discovered by the French mathematician Gabriel Lama and, depending on the formula used, it can take different forms, starting from a four-pointed star to something like a rounded square.

image

Mark Edwards (Marc Edwards) proposed such a formula Lamé curve, which forms a smooth and visually perfect figure. Icons, starting with iOS 7, have exactly this form.

image

Later this figure was modified by adding the proportions of the golden section, and came up with a special grid to help the designers of new icons, but this is a completely different story.

image

The main advantage of using a super-ellipse is that it gives a rounded and smooth contour. On the other hand, such non-standard figures are difficult to apply in a real interface. It is necessary either to combine many SVG files, to supplement the code with special formulas or scripts, or to use PNG masks, as Apple does for its icons.
As for the design process itself, the solution is simple. You need to convert the result of the fillet into a contour, go to the figure editing mode and manually move the ends of the segments going to the points of the curve closer to each other.

image

The difference is even more noticeable with the rounding of sharp corners, which is an important component in drawing optically correct metro schemes and road maps.

image

It's important to remember


Geometrically rounded corners look unnatural due to the fact that you can immediately see the transition points of a straight line into a curve.
For optically correct rounding, special formulas or manual fitting of the figure are needed.

Bonus
Sometimes an ideal geometric square does not look square. You, probably, have thought: "What nonsense?" Then what you will tell about squares below? Which figure looks "square"?

image

If you chose the left one, then you managed to hear the voice of your objective visual perception.

image

Personally, I was surprised when I found out that our eyes are more sensitive to the height of the object than to its width. This explains why even in geometric fonts the letters "o" are always wider than the geometric circle, and the vertical lines of the letters "H" are always thicker than the horizontal ones.
Skull 2 november 2017, 11:25
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute