What is the optimal number of text boxes on a single page of the App ?, App text box count

What is the optimal number of text boxes on a single page of the App ?, App text box count

[1]. The number of optimal text boxes on each page varies with mobile phone screens of different sizes.

[1.1] for iPhone 4 screen size, when the resolution is 640x960px, the maximum number of text boxes is: 2 text boxes

Calculation Formula]

Step 1, (960px total screen height)-(40px Power Bar Height)-(top Bar Height of 88px)-(Next button height of 88px)-(keyboard height 520px) = 224px text box height; Step 2, (224px total text box height)/(88px single text box height) = 2.5 text boxes ≈ 2 text boxes

[Basic size]

40px is the height of the battery bar;

The height of 44px is the minimum value that can be clicked on a normal screen;

IPhone 4 is a high-definition screen, so the minimum value of the clickable height is 88px;

That is, the minimum height of a single text box that can be clicked is 88px.

The keyboard height is 520px. The keyboard height is analyzed to prevent text boxes from being blocked when the keyboard pops up.

[1.2] If the screen size of iPhone 5 is 640x1136px,

Maximum number of text boxes: 4 text boxes

Calculation Formula]

Step 1, (1136px total screen height)-(40px battery Bar Height)-(top Bar Height of 88px)-(Next button height of 88px)-(keyboard height 520px) = px text box height;

Step 2: (4.5 PX total text box height)/(88px single text box height) = text boxes ≈ 4 text boxes

[1.3] If the screen size of iPhone 6 is 750x1334px, the maximum number of text boxes is 6.

Calculation Formula]

Step 1, (1334px total screen height)-(40px battery Bar Height)-(top Bar Height of 88px)-(Next button height of 88px)-(keyboard height 520px) = height of the 598px text box;

Step 2: (total text box height of 598px)/(single text box height of 88px) = 6.8 text boxes ≈ 6 text boxes

[Conclusion] Considering that mobile phones supporting small screen iPhone4 are supported, the optimal number of text boxes is less than two;

For Android screens of similar sizes, refer to the above calculation formula to calculate the maximum number of corresponding text boxes.

[2]. sliding the keyboard and typing keyboard are different from preventing text boxes from being blocked by the keyboard.

As shown in

On the left side is the [TYPING Keyboard]. You cannot click the [complete] button. If there are three text boxes: You need to slide up and down before you can click the next button. In order not to slide up or down, the maximum number of text boxes in an App page is 2.

On the right side, click "slide keyboard". In the "validity period" text box, click the "finish" button on the displayed sliding keyboard, if the last text box is similar to the "validity period", you can pop up a sliding keyboard with the "complete" button, then the last text box, after clicking the "finish" button, the next button appears. That is, the keyboard will not block the text box. The last text box is similar to the "validity period" text box. When a sliding keyboard is displayed, the maximum number of text boxes in an App page can be three.

[3]. Whether the last text box is the text message verification code input box.

As shown in

There is only one text box on the left, and four text boxes on the right. [Left] VS [right], there are three disadvantages of the right image:

First, [right] because there are more than two text boxes, the text box will be blocked when the keyboard pops up. You need to continuously slide up and down to complete the input;

Second, the prompt text and text box in the right figure appear on the top, and the text box is arranged in the next two rows, which is a waste of the screen height. If the text is on the left and the text box is on the right, you can save the height of the screen;

Third, the text box of the mobile phone number in the "right" and the text message verification code are placed on the same page. after entering the mobile phone number, you need to click "get verification code" to send the verification code text message, while the left figure only contains a text box with a text message verification code. When a user jumps to this page, the text message verification code is sent to the mobile phone at the instant of the jump, this saves you the time to click [get Verification Code.

[Conclusion] If the text box is the text message verification code input box, the optimal number of text boxes is one.

From almost; almost Source: http://www.jinhusns.com/Products/Download? Type = xcj