Geekly Articles each Day
📜 ⬆️ ⬇️

About screen size, pixel and item



Hi, username. I want to devote my first post to a topical issue related to the emergence of a large number of new display formats and the ongoing race for pixel density. In the light of the advent of devices such as augmented reality glasses, smart watches, 4k monitors and an even wider range of tablets and laptops, the question arises: what size of a graphic element / text should be considered optimal and what should it be measured in. Android developers, of course, immediately exclaim: "Yes, of course, in dp!". But practice shows that things are somewhat more complicated.

Problem


One of the key tasks of the interface designer is to create an optimal balance of elements that allows you to realize the business goals of the product comfortably for the user. Methods of differentiation of elements in addition to the position is not so much:
')
  1. The size
  2. Color and tone
  3. Borders (a special method associated with the property of the visual center to make out separate objects by touching the cut-off plane and the background)
  4. Textured and graphical saturation

Obviously, developing a single interface for different devices, the designer assumes not only a similar ratio of the details of this interface, but also the greatest readability of text and graphic elements. At the same time, David Ogilvy remarks that a poster cannot be readable at any distance, but must be such (and have an appropriate balance of elements) at a distance of the most likely viewing scenario. In the case of interfaces for interactive devices, viewing scripts are very different, but functional scripts are usually preserved. For a person familiar with the layout on different platforms, the problem clearly arises: how to designate the size of the elements so that they take up the necessary space in the angular space visible to the eye, regardless of the scenario?

Synopsis


A similarity to the standard for ppi (pixels per inch) appeared in the mid-1980s, when Apple released its first Macintosh computers. These computers had a 9-inch screen diagonal with 72 pixels per square inch. Even then, Apple took the position of creating its own ecosystem, so in the range of technological capabilities of that time, ppi was chosen exactly half the dpi (dots per inch) of the ImageWriter e-printer, which guaranteed that the size of the elements on the screen would exactly match the size on paper. However, this concerned only Apple computers, since other manufacturers used a variety of ppi, following their capabilities and the laws of the market. This rudiment of seeing a computer as a printer attachment led to the Resample Image checkbox in Photoshop, which, if removed, does not affect the image size, but affects the print quality.



Meanwhile, the resolution and diagonal of the monitors began to grow by leaps and bounds. If the Mac 128k had a resolution of 512x342 pixels, then by 1996 the same company released the Apple Multiple Scan 15 Display with a diagonal of 13.3 inches and a stunning 1024x768px resolution for those times. This value, regardless of the diagonal, remained the most popular screen resolution for another 12 years.

Despite attempts to develop some kind of standard, by the mid-2000s there were several hundred variations of resolution and diagonal of screens in the consumer sector. As for the professional market, where, it would seem, some kind of standardization should be respected, the situation there was even worse. The manufacturers created for the specialists monitors of very exotic parameters, which cost as a steam locomotive and had a tendency to become obsolete during the year.

In 2008, I bought a Lenovo Y710-200 laptop, which had a diagonal of 17 inches and a resolution of 1920x1200px. Unfortunately, at that time neither I nor, apparently, Lenovo had no idea what a strong advantage it was for a laptop: 132ppi! Even with professional monitors, ppi was lower, and higher could be seen already in a very specific technique, such as medical monitors or space device monitors, although it was this year that Kopin Corporation introduced the product of technological research peak - a device with 2272ppi. For me personally, it ended up being accustomed to watching only HD video quality (1920x1080), since on this screen, 720p or 480p video was very small. The same situation pushed me, as a novice designer, to an independent awareness of the independence of the size of an element from the device. By the way, surprisingly, Windows Vista coped with scaling quite well.

In 2010, Steve Jobs introduced a high-definition display called the Retina (“Retina”). At the same time, in his presentation, he stated that the ppi of the retina exceeds that of the human eye and, therefore, is considered ideal.
As an experienced presenter, Jobs made an impression on the public, but according to experts at cultofmac.com, he said about 2-3 times, as a number of researchers believe that the resolution of good vision is somewhat higher.



This picture (open on a device with a Retina) will allow you to understand how Jobs’s statement is true. A person with normal vision can easily find in this image both white and black stripes one pixel wide, and a cycle (black and white side by side) 2 pixels wide along the center.
It should also be understood that, due to the limited angular resolution of the eye, ppi for screens of different sizes and being from a user at different distances will be different. For example, for iPhone this value should be around 952ppi, and for iPad - 769ppi.

Situation


Today we have a number of problems associated with the history of the pixel. It is obvious that the dimensions specified in pixels have lost all meaning - only on Wikipedia the number of different ppi values ​​for monitors exceeds two hundred, which means that the size of the element will always be different. Google describes in its developer center several units of measurement, which in theory should be the solution:

By the way, Microsoft by default considers that dp = 1/96 logical inches, which dpi can be configured in the control panel. I would like to note that using physical values, the best practice would be to use millimeters as a derivative of the basic SI unit.

The sp / em unit would be closest to the title “universal” if we somehow knew the basic optimal size of the size of the size. The intuitive idea of ​​the designer about the optimum actually gave rise to the following hack in a web layout:


html { font-size: 22px; } body { font-size: 14px; line-height: 1rem; }

This elegant solution allows you to automatically build elements on a modular grid with a cell size, obviously, equal to the value of rem. Nevertheless, despite the advantages for layout, it has all the same limitations: it is not clear how to give an element an absolute size relative to visual perception.

In order to understand this problem, we will have to somewhat delve into the physiology.

Bionics


The visual apparatus appeared as a result of the evolution of the simplest photoreceptors, excited by bright light. At the same time, nature created as many as four options: the eyes of mollusks, which are formed from the epithelium, have the ability to see a wide range of light waves, the eyes of mammals, which are formed from nervous tissue and were originally designed to find the shapes and movement of objects, the camera eyes of cubes and the faceted eyes of insects. As a sign, the vision turned out to be a very useful tool for survival, and therefore its evolution in man (together with the man himself) lasted only about half a million years.

Without going into details, we can say that the eye is a biological lens, the bottom of which is lined with a layer of receptor matrix of rods and cones - special cells that react to light and create nerve impulses that go further to the brain. However, it should be remembered that, for example, there is a layer of amacrine cells in the retina that are directly involved in the primary processing of information, which is responsible for lateral inhibition: a decrease in the number of pulses in places of bright diffuse illumination and an increase in places in a sharp difference in illumination. The system, therefore, serves to highlight the edges of the shadow falling on the retina or moving along it - that is why black text on a white background reads better. This is one of the reasons why neuroscience considers the retina and the optic tract as participants in the processing of visual information and, therefore, as part of the brain.

On average, the vertical field of view of a person is about 135 degrees, and horizontally - 155. At the same time, the binocular and chromatic capabilities of the eye are heterogeneous in its area.


A source

In order to determine the visual acuity (analogue of the camera resolution), Snellen's tables are used - rows of letters of different points, where the size and width of the sign are chosen so as to tighten the angle of 1 minute of the arc at a certain distance. In this case, the norm is vision, in which a person distinguishes between letters in the sixth line from a distance of 6 meters, which is 5 minutes of arc. In scientific research, it is customary to use Landolt rings, as this allows for a more objective assessment of the data, without error on the recognition of typographic marks and type. In Russia, Landolt's rings are adapted by S. Golovin, and the Snellen table by a student of Golovin D. Sivtsev.



Psychotic Harold Blackwell expressed the concept of the resolution of the eye as an angular parameter of the function of lightness and contrast. His research showed that this angle is approximately 0.7 minutes of arc to determine the spot of a non-point object (to say that the spot is not a point, the observer needs at least 2 pixels), which results in a minimum resolution of 0.35 minutes of arc.

Modern studies of clarity of vision operate on the concept of a cycle per degree (a cycle is a black and white pair of lines) and suggest a value of 77 cycles per degree, which is approximately equal to 78 cycles per degree arc. Again, due to the minimum loop width of 2 pixels, we see similar 0.39 minutes of arc.

Considering the angular space of the eye, by simply calculating 100 * 100 * 60 * 60 / (0.3 * 0.3) = 400 we get a value very close to the total number of photoreceptors in the retina.

It should be understood that while the area of ​​clear vision gives a fairly clear idea of ​​the minimum allowable size of objects and their resolution, the mechanics of perception in the peripheral area is somewhat different, since it is more responsible for unconscious scanning and prioritization. The peculiarity of the human eye to have maximum resolution and cognitive focus in the field of fovea (the so-called yellow spot), for example, allows services such as Spritz to increase the speed of text perception (in addition to reducing lag due to the lack of eye movements), placing the word in a clear vision area.

In addition, the above scheme gives us a clear idea of ​​the recommended dimensions of the elements. It is clear that for comfortable interface orientation, the interactive element on which attention is focused in the current scenario should not exceed the area of ​​the macula (7 ° x5.5 °), and the block / group / list in which it is located must be clear 16-20 ° x12-15 °). This fact indirectly supports the hypothesis proposed by Google that a small screen does not mean less information, since the field of cognitive analysis is in principle rather small.


A more detailed view of the area of ​​clear vision. It is shown that the relationship between zones of different receptor activity actually corresponds to the golden ratio.

Optimum


Further studies revealed the most objective recommendations:


The formula for calculating the size of the element depending on the distance:

 h = 2 *d * Tan(x/2)

Where
h = required height of element
d = distance in millimeters
x = element size expressed in radians ( arc minutes to radians )

Examples of rounded calculations of the recommended font size (21 minutes of arc) in millimeters
DistanceSize
4002.4
5003.1
6003.7
7004.3
It should be noted separately that devices like the Oculus Rift, which are in close proximity to the eye, following this formula, should ideally have a huge ppi with a value greater than 2000.

findings


Based on the above reasoning, it is possible to come to the following conclusions regarding the solution of the layout problem on different devices:


At the moment, the only way to solve this problem with existing methods is to find out the parameters of the device through the user-agent and adjust the mod mod grid's rem variable to it. However, such a solution is probably suitable only for large companies that can afford to analyze and test the layout of dozens of types of devices.

PS In some paragraphs describing accurate data, sources were translated without change.

Source: https://habr.com/ru/post/229359/

More articles:


All Articles