As mobile phone screens get bigger and bigger, what challenges do UX designers face?

Editor's note: Since the iPhone X was launched in 2017, full-screen mobile phones have gradually become popular. From the 4.7-inch screen of the iPhone 8 to the 6.1-inch screen of the latest iPhone 11 and the 6.5-inch screen of the Pro Max series, various screen styles such as notch screen, water drop screen, hole screen, folding screen, etc. have emerged. The physical Home button has been abandoned and replaced with a virtual button, or even gesture sliding operation without a virtual button.

[[316867]]

These mobile phones all have one thing in common, which is that the screen size is getting bigger and bigger. As the screen size gets bigger, the way of holding the phone and the interface interaction method also change. So should the design also change accordingly?

Thumb operating range

If you want to click the screen with one hand, you need to be flexible enough to reach the top of the screen. If you are not careful, the phone will fall to the ground at any time. The author's phone screen has been repaired several times, and it is almost as expensive as a second-hand phone.

In 2013, foreign designer Steven Hoober published a research report on "Mobile Interface Design", in which he conducted quantitative research data on 1,300 mobile phone users:

According to the data from the research at that time, nearly half of the users use their phones with one hand (certainly more than that now). When the user operates with one hand, the actual area that the thumb can touch is as shown in the figure below. The green area is the normal operating area of ​​the thumb, the yellow area is the maximum range that the thumb can touch, and the red area is the area that is difficult to touch.

However, the data in this research report was released in 2013, when full-screen phones had not yet appeared. If the areas of the above research conclusions are applied to the current mobile phone screen sizes, the red area at the top will account for a larger proportion. Take the iPhone 11 size ratio as a reference, as shown in the following figure:

The thumb can operate in about two-thirds of the area, which shows that it is difficult to touch the red area. This report is only suitable for the mobile phone market at that time and is no longer applicable today. Therefore, we need to reconsider how to design interfaces for large-screen mobile phones.

Designed for the thumb area

According to the mobile phone UX design trend in 2020, large-screen design will become a hot topic. According to the data report, the proportion of users using large-screen mobile phones was 16.3% in October 2018. By December 2019, the figure had risen to 41%, and will continue to rise with the emergence of more new models in the future.

As large-screen mobile phones become more popular, designers need to adjust the interface for large-screen mobile phone scenarios when designing interfaces to avoid user experience problems. Here are some design suggestions I have compiled:

1. The head area is designed to be higher

By enlarging the information area of ​​the title bar, try to move the main operation content closer to the thumb area.

2. Common navigation and operations are at the bottom

Rather than placing the navigation bar at the top, a more suitable approach for large-screen phones is to place the navigation and important operations as close to the bottom of the screen as possible.

3. Gesture operation page switching and return

The interfaces of short video apps such as Tik Tok and Instagram Story all use gestures to slide the screen to switch pages. The learning cost of the operation is very low, and the main operations are also at the bottom of the screen. This operation method will also be used more and more this year.

4. The pop-up window rises from the bottom

Many commonly used pop-up windows are designed to pop up in the middle of the screen. In order to adapt to large screens, you may want to try popping them up from the bottom. This way, key options can be easily selected, increasing conversion rates.

5. Use large cards

As the screen size increases, using large cards can allow users to browse content more attentively. Large areas of illustrations and blank space can also increase users' desire to click.

In addition, as a mobile phone manufacturer, when releasing large-screen mobile phones, some corresponding system-level design adjustments were made to the interface operations, such as pulling down and hovering the interface, one-handed mode of the keyboard, sliding back by sliding on the edge of the screen, etc.

Summarize

Large screen size is already a trend. A large screen means that the content can be displayed to a greater extent, which is conducive to the product providing more services, and no longer entangled in the first screen cannot display the main content. In this era of information explosion, users are no longer satisfied with the browsing method of small screens. It can be said that large screens are already an irreversible trend. Instead of worrying about the coming of problems, designers should think about how to adapt to the rapid iteration of products, constantly update their design thinking models, think about problems more comprehensively, and produce more reasonable and better experience design solutions.

I hope the content of this article can inspire you.