New phone models are launching every week and almost every phone screen size is different. If something can be really exasperating on a smartphone, it is that the interface does not recognize our keystrokes well. Either ignoring or worse, confusing the element we wanted to touch for the one next to it. Unfortunately, our finger has dimensions that prevent it from acting with precision. When creating an app, it is very crucial to keep in mind the different phone screen sizes.
Smartphone companies provide us with different guidelines. That we should follow this to make sure that the interface of the apps is flawless and according to the phone screen size and resolution.
There is no single directive to follow, but each manufacturer has its own recommendations that should be followed. If we want our users not to feel obliged to have good aims when using mobile apps.
Table of Contents
IOS Interfaces
In its guide to human interfaces, Apple recommends using elements of 44 × 44 points and gives as an example of a very usable interface, its own calculator. Until the release of the iPhone 4 and its retina screen. The reference spoke of pixels instead of points. So it is convenient to review the difference between these two measurements to understand well when we refer to the internal size (creation and editing of the image) and when external (representation on screen).
Windows Phone Screen Size
The Windows Phone user interface guide is one of the most comprehensive in this regard. In the first place, they define 9 mm as the ideal size of the smallest pulsating element. Since after hundreds of hours of tests, they verified that this size reduced errors to 1.6%.
From this minimum, they recommend creating larger elements if possible. Leaving 2 mm spaces between two elements that can be interacted with and defining a touch area larger than the visible part of the element. So that the edge of the element works in a way just as correct as the center.
As an exception to the 9 mm rule, it is recommended to go down to a minimum of 7 mm in height when a large number of elements need to be stacked. On the condition that they are at least twice as wide as they are high. As it could happen in a list formatted as a vertical table. As a curiosity, instead of offering an equivalence between pixels and millimeters. Microsoft advises measuring the elements with a caliper on the final device.
Nokia Phone Screen Size
The Finnish manufacturer is committed to a practical approach. The usability considerations of its developer guide suggests that the elements have at least the size and spacing equivalent to the tip of a finger.
But the thing does not stop there. They make a distinction between the interface elements that are easily operated with the thumb. And also those that cannot be reached with it and have to be pressed with another finger. Thus, it establishes a diameter of 7 mm with 1 mm of spacing for elements to be played with the index and dimensions of 8 mm with 2 mm of spacing for those that are touched with the thumb.
Ubuntu
Ubuntu intends to jump into the market for tablets and smartphones and for this reason it already has a good part of the way prepared. Having established its fingerprint interface design guide. In this sense, its recommendations are very similar to those of Nokia: adjust it to the size of an adult’s fingertip. However, they emphasize the use of the entire bud and not just the tip. So they suggest sizes between 10 and 20 mm. And also provide a convenient table of equivalences between millimeters and pixels, depending on the phone screen size.
Android?
As surprising as it may seem, Android does not offer any specific recommendation on the size of your user interface design guide. Appealing to logic, the most reasonable thing would be to adopt a “finger-centered” approach like that of Nokia and Ubuntu. While the more specific Apple and Windows Phone guides are focused not only on usability but also on maintaining certain aesthetic patterns. However, if you use an app builder to make an app then you don’t have to worry about the screen sizes.
In search of a standard
As in so many other aspects of computing, the ideal would be to have a standard that you can refer to at all times. Regardless of the technology used. In this regard, several studies can be pointed out that tried to define the average size and use of the human finger.
On the one hand, in 2003 an MIT study laboratory undertook to calculate from the anatomical point of view the average size of a human fingertip. The result is that the normal fingertip measures between 10 and 14 mm. While the fingertip measures between 8 and 10 mm.
In 2005, a study by the universities of Oulu (Finland) and Maryland (USA) more focused on the use of the devices themselves. Calculated the precision of use of the thumb of the hand with which the mobile is held. The result determined that we are adept at handling elements of a minimum of 9.2 mm using the mobile with one hand, or 9.6 mm when using both thumbs.
In any case, as programmers and designers, the logical thing is that we make a reasonable design. And then we test it as exhaustively as possible to determine something that cannot be measured in millimeters, points, or pixels: if our interface is easy and comfortable to use or not.