How to create an application design in an era of huge screens

After several years of confrontation, Apple finally announced iPhone 6Which can be considered as the origin era of large screens. The fact that users like this show Apple Records about the initial sales, but without them it is clear that the "large" iPhones disassembled like hot cakes.

It seems that soon users will abandon their old 3.5- and 4-inch screen, and the process will proceed very quickly. And because mobile developers, site designers, and other professionals need to optimize their products and learn new things.

The process of transition to mobile devices with larger diagonal has already begun. Report Adobe's 2014 Mobile Benchmark confirms that browsing websites devices diagonal less than 4 inches decreased by 11%. Therefore, now the understanding of how to create a user-friendly design for one-handed operation, it is important as never before.

Changes Apple should make our lives easier, as smartphones with smaller diagonal already extinct. But this will happen only if the fact that we have adapted to the new conditions of our design. Otherwise, the future will be very painful for our thumbs.

This is especially important for those designers who only work on iOS-applications. Because they thought that the problem of different resolutions facing web designers, they have never been touched and now she suddenly in front of them.

Design for thumbs

So what does "design for the thumbs?" It involves the construction of such interfaces that are suitable for use within the natural range of movement of the thumb. But it gets more complicated, because we subconsciously alters grip the phone in cases where we need to get to the specific controls on the screen. Each of us does this many times a day, not even paying attention to it.

However, you need to start somewhere. Studies show most of us hold the phone in such a way that the base of the thumb falls on the lower right corner.

It has come to such conclusions mobile expert Steve Huber, held last year experiment, Which was attended by 1333 person. He found that people are using their phones while holding them as follows:

• one hand - 49%
• Cradle - 36%
• two hands - 15%

Dominance grip left or right hand is also quite interesting:

• right - 67%
• Left - 33%

Huber said that the number of left-handers on the total number of respondents was only 10% and the higher figure in the results of the experiment due to the fact that people hold the phone in your left hand when the right to engage in another case - in the time of smoking, cycling, during meal time etc.

Zone thumb

thumb zones are something like the heat!. They give the best idea of ​​how accessible different screen areas of our fingers. Let's use of Huber's research to create a Heat Map for the most popular script use when we are holding the phone with one hand (right) and the base of the thumb in the lower right corner. Here is a visual representation of how the thumb area were distributed since the first iPhone (2007).

A more detailed comparison of the iPhone 6 and iPhone 6 Plus:

As you can see, "safe" Green Zone remains almost unchanged (about the iPhone 6 Plus a little later). This is because our fingers can not be miraculously stretched to fit the screen size. It is sad, because as a child I loved to play for Dhalsim'a in Street Fighter.

But what happened with the iPhone 6 Plus and why the red zone it increased so dramatically? Furthermore, it changed and "safe" area. This is due to the fact that the iPhone 6 Plus has a larger size and comfortable to hold it in one hand, we have to hold his little finger. Surprisingly, it has changed so much experience in the use of a large iPhone.

Conglomeration

Let us analyze what changes in the thumb area, if we hold the phone a different way. Sometimes there are situations where it is more convenient to hold the phone so that the base of the thumb is located approximately in the middle of the screen. And this is how it affects the big toe area:

You see, iPhone 6 Plus is, because of the larger size, is in a better position in this situation, while the iPhone 6 just "end" screen space.

Reachability

Heaps described above can be avoided by using the Reachability feature that is available on the iPhone 6 and iPhone 6 Plus. Double tap on the Home button (do not press and just a touch) activates it and the screen will move down to the area of ​​your fingertip reach. Here's how it looks.

But how Reachability looks with superimposed on the iPhone 6 Plus area of ​​thumb:

Have you noticed? On the Apple demo finger is placed precisely in the natural area.

And here is another interesting point, which John Gruber points:

Reachability for iPhone 6 Plus shifts the content on the screen is lower than iPhone 6 (in percentage ratio) - is all about shifting the screen to the top of the height, which is available under the thumb normal-grip.

That is what is at stake.

What does all of this mean?

The size of the screens of mobile devices becomes approximately the same, and that's good news. But it also means that we can not simply scale the ready interfaces with smaller smartphones to 5.5 inches. Grip device is completely changed, and perhaps your interfaces will have to do the same.

I think the creation of prototypes will be as important as ever. Therefore, if you do not sit in the trains, it's time to jump into it.

PS: If you are a designer or have relevance to the development of mobile applications that you can be useful zone templates thumb that can be applied to your interfaces and check how comfortable they will be use. You can download them here.

via