Designed for touchscreen phones: "Hot zone/Dead angle" and "control size" for thumb operation

Source: Internet
Author: User
Keywords Dead end suggestion touchscreen phone
Part 1 background of the background and challenge of the interface design of 1.1 touch screen mobile phone

Challenge 1: Short development time, research at home and abroad is still in the exploratory stage, full of unknown and uncertain.
Touch screen technology was first applied to the mobile phone to date back to 1999 (Motorola A6188), although it has been 12 years, but the real finger-operated touch screen interface design revolutionized the January 9, 07 release of the Iphone1 Generation and his multi-touch technology. Today, but 4 years, the development of the Apple design team as a pioneer at home and abroad, including touch gestures, touch screen interface specifications, touch usability research and so on, are still in the exploratory phase, which means that there are a lot of existing things are based on speculation and try to build on, Their maturity is also awaiting examination. These include foreign journals and books, and even the information and design principles on the web of Apple's app development official.

Challenge 2: From the mouse keyboard to the finger, the problem of accuracy rate, hot zone and dead angle.
There is a qualitative change in the research of touch-screen mobile phone interaction and PC interaction. Input devices from the mouse keyboard into a finger, on the one hand, the operational accuracy of the challenge, in the intensive information processing, users often appear many misoperation; On the other hand, the finger operation of the unique "dead End and Hot zone" problem is also the PC interface design will not face.

Challenge 3: The influence of Eastern and Western physiological indicators and cultural differences on existing design principles.
Even those theories that proved to be reasonable and workable can overcome the effects of physical and cultural differences between the east and the west after flying across the sea to China? You know, the same size of mobile phones for the Chinese hand and the stability of the hands of foreigners may also be different. Therefore, how to put the mature Western knowledge doctrine, carry on the adjustment which conforms to the physiology characteristic and the national culture, is the third challenge which we must face.

Challenge 4: General Wap/app design principles for Taobao (App/wap) applicability.
Mobile phone E-commerce is a special field, we face a huge amount of decision-making information and limited screen space between the contradictions, this is a common WAP Web site or app applications rarely face the grim situation. How to translate other products ' touch-screen research results into more suitable applications in the field of electronic commerce is a problem we should solve further.

1.2 Touch screen mobile phone interface design some previous experience

"Tapworthy-designing great iphone Apps" Josh Clark 2010-6-25 (Chinese version: "The human-designed iphone application" translator Bao Tijien) mentions two principles of the iphone interface design--rule Thumb and the Magic number is 44 (see figure below). That is, the right hand touch screen operation of the hot zone and dead angle (pictured below), and touch control design reasonable size of at least 44pix.

For this research, it is not difficult to find two questions

Question 1: How does this hot zone map and so-called standard size come from, not in a detailed narrative, based on "research results" or the designer's own "empiricism" we don't know. According to the descriptions in the book and the author's professional background, these are probably the authors ' own analysis and experience after collecting a large number of iphone interface cases.

Question 2: Many designers can easily make a mistake after reading the 44pix figure--The actual physical size of 44pix for different resolution screens varies greatly. Under Iphone3, 44pix is equal to 7mm, but less than 6mm under iphone4. The background of the discussion in the book is Iphone3, so the designers need the corresponding conversion according to the physical size.

1.3 Touch screen mobile phone interface design Some predecessors ' research

Josh Clark may be an experienced man, so let's revisit this 44pix. In fact, the iphone team has no basis for limiting the minimum size of the touch control's interface to 44pix (7mm). As early as in ergonomics research, predecessors have concluded that the use of index finger operation, the scope of the strike in the 7mm is more appropriate, and with the thumb operation, the appropriate range of strike should be around 9mm. To provide designers with more accurate engineering indicators, the key to the operation of precision experimental design is essential.

Part 2 Research objective is it true that the single hand thumb operation hot Zone of Chinese users is so distributed? How big is the difference between hot zone and dead angle? That use hands, index finger operation there is no hot zone and dead angle difference? Hot zone and dead End if there is a difference, 7mm this design principle in any area of the screen applicable? What is the difference between the single hand thumb operation and the hand forefinger operation for the control size design requirements?

Part 3 Research Rationale 3.1 Analysis of the cause of the user key misoperation did not hit the key (blank) when you want to press a key, you press one of the adjacent keys (wrong click)

For the user, the second error is more lethal, which requires him to spend more effort to correct the error, whereas the first is less serious. So in our experimental design, we only take the second case as the error operation.

3.2 Experimental Scenarios

Consider the two factors that affect the difficulty of user key operation: one for the user's state (static, walking, Bus-Class), and the other for the use of key-button operation of the finger (index finger, thumb, etc.). Combining these two factors, the formal experiment takes two kinds of the most common operation situation State (all is single hand operation): When still use index finger to operate, walk with thumb operation. The former is relatively easy and the latter is more difficult.

3.3 Psychological Physics Method--constant stimulation method:

This experimental study adopts the constant stimulation method in the psychological physics method, also called the correct method, the constant method, the frequency method. It is characterized by the use of only a few stimuli (generally 4-9), and these stimuli in the entire determination of the threshold of the process is fixed, the main test of these stimuli in a random manner repeatedly presented to the test. Before using the constant stimulation method to measure the sensory threshold, a preliminary test is performed to select the stimulus and determine the order of each stimulus presentation. The maximum intensity of the selected stimulus should be the intensity that almost all can be felt at each presentation, preferably at about 95% per cent; the minimum intensity of the selected stimulus should be the intensity that is almost impossible to be felt at each presentation, and the likelihood of being felt is best around 5%. After the range of stimulation is selected, 4-9 equally spaced stimuli are chosen within this range. In the formal experiment, the intensity of each stimulus should not be less than 20, and the number of times presented should be equal, and the order of presentation should be arranged randomly. When the absolute threshold is measured by constant stimulation, the value of absolute threshold can be obtained by linear interpolation or other methods according to the operation definition. The same method can be used to obtain the difference threshold when the differential threshold is measured by constant stimulation.

Part 4 Experimental planning 4.1 experimental subjects and crowd matching

Because this experiment is based on research, so the user's request is not high, not necessarily Taobao users. Object oriented can be all normal adults with the ability to use a potential touchscreen phone. Right hand is advisable. Before the beginning of the experiment, the size of the palm of the user should be measured to select the user with moderate hand size. See the national standard "Chinese adult human body size" gb10000-88 hand size. Using the test between subjects, the initial number of subjects was about 40, requiring the subjects to be over 20 years of age and half of men and women.

4.2 Experiment design Independent variable usage scenario (2): At rest with the index finger operation, walking around with the thumb operation (designed between the test) to stimulate the presentation area (16): The cell phone screen divided into 4x4 area (designed by the test) can strike the size of the area (5): Design 5 types of hit area-thumb 7\8\9\10\ 11. Index finger 5\6\7\8\9 (the experiment was designed by the test, each level requires at least 10 times to be tested, then a total of the test response 16*5*10=800 times. )

accuracy: In a single reaction, the correct hit of the target stimulus is the end, but the response is considered to be error if the number of hits is greater than 1. That is, the number of times the fingers hit the stimulus red dots for the first time accounted for the total number of red dots. Strike Hot zone: In the entire screen, the strike accuracy rate is significantly higher than other parts of the region. Strike dead Ends: In the entire screen, the strike accuracy rate is significantly lower than in other parts of the region. Minimum strike range Size: Minimum size of 95% and above for specific fingers at the correct strike rate. Mobile phone original screen parameters set experimental equipment: iphone4 mobile phone 3.5-inch screen resolution: 640*960 Physical Size: 4.93*7.40cm, the average 1cm has 130 pixel points around the background color for the gray RGB (144,144,144)

Note: The Division and marking of the screen area are virtual and do not appear directly on the screen. The initial presentation to the subjects was still the original screen, and the concept of the area was used in the background to stimulate rendering and data processing. Experimental steps

Step 1: Guide and later, count into the experimental parameter settings. The upper part of the screen renders the text box "Please enter a parameter", there is an input box below that requires that you can enter a number, and the number entered can be read by the program. Press the confirmation key to enter the formal experiment.

STEP2: Show only one red dot at a time and not appear at the same time. The participants were asked to complete the strike as quickly as possible, but not in the test of the reaction ability and time, to maintain peace of mind. The thumb experimenter was in a certain range of normal walking speed (1-1.5m/s).

STEP3: Each parameter value has 16x10 Click, Time is about 4-5min. A total of 5 rounds, each round can rest.

Step4: By the researcher to screen save, and then manually input SPSS in the later statistical analysis.

Part 5 The findings of the study of single hand, thumb and walk 5.1 conclusion 1: By testing, the rationality of the right hand thumb strike hot zone recommended in Tap worthy is still problematic

In order to verify this theory, this experiment approximate "b1+b2+b3+c1+c2+c3+d1+d2+d3" as the test area, defined as "suggested hot zone", and the remaining area is defined as "non recommended Hot zone". If this suggestion of "hot zone" was established, then the "suggested Hot zone" and "Non recommended Hot zone" should have significant difference in correct rate, and the difference is set up under different stimulus parameter values, in the case of red dot size in 7/8/9/10/11, it is suggested that the correct rate of hot zone should be significantly higher than the recommended dead angle.

However, by pairing T test, the suggested region correct rate is slightly higher than that of the 8/9/10/11 area, only when the parameter value is 7, but the difference is not significant when the red point size is the same. That is to say, there are some problems in the rationality of the method of dividing the hot zone, which means that the control strike size is 8/9/10/11 and above, the dividing meaning may be small, and the two regions are basically not different.

5.2 Conclusion 2: The experiment found a more reasonable right hand thumb operation Hot Zone

We speculate that the handheld is the best stability and the flexibility of finger movement is relatively good when the thumb is naturally curved and is in the position of the finger touching. So we simulate the area that the finger touches in this state, and it basically shows a "fan-ring" area, which is defined as "Exploring the hot zone" in this experiment, while the other areas are "non-exploratory hot zone". Similarly, if the exploration of the "hot Zone and Dead angle" of the hypothesis, then "explore the hot zone" and "non-exploratory hot zone" should have a significant difference in the correct rate, and this difference in different stimulus parameter values are set up, in the red dot size in the case of 7/8/9/10/11, It is suggested that the correct rate of hot zone should be significantly higher than that of non recommended hot zone.

Results the correct rate of the exploration area was significantly higher than that in the 7/8/9/10 region by paired T test and the Red Spot size was the same. The difference with the red point of the larger and weakened, probably because the hot spot increased to 11, the strike location becomes simpler, the overall correct rate has been improved, the difference between the regions disappeared. Compared with the recommended hot zone in the tapworthy, the right side is more reasonable by the hot zone we have explored. Especially when the size of the control is limited, the difference between the hot zone and the non hot zone will be very big.

Conclusion 3: The dead angle of the right thumb operation was found in the experiment

By comparing the correct average of 16 regions in different red dots, it was found that the correct rate of strike in a4\c4\d1\d4 four regions was significantly lower than the overall mean. The error rate of dead-end area is high, and the corner problem should be considered in the control layout, especially when dealing with high-frequency operation position.

conclusion the principle of 4:44pix (7mm) does not apply in the "single hand/Walk/thumb" operating State

In this study, when the red point size was 7mm, the accuracy of single hand thumb operation was not up to 95%. The design of 7mm or 44pix is far from satisfying the operation state of mobile single handset, and it is easy to cause high error operation rate.

Conclusion 5: The experiment found more specific size requirements for thumb operation

In this study, the minimum size of the average stroke accuracy of single hand thumb operation at 95% is shown in the following figure. It can be found that there are differences in the size requirements for the strike in different regions. In the design of the single hand operation interface, the reference control location of the contact size requirements, to avoid small size caused by misoperation, affecting operational efficiency.

~~~~~~ to Be Continued ~~~~~~~

Designed for touch-screen mobile phones "hot zone/Dead angle" and "control size" for 2--index finger operation


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.