Foveal and peripheral vision in mobile UI
I attended the UX/UI Global Summit 2022 last week. One of the interesting topics during that event was about mobile touch screen design rules by Steven Hoober.
First,
What is foveal vision and peripheral vision?
Our eyes are like a camera, and foveal vision is what we see directly in front of our eyes with very high resolution. And peripheral vision is what we see off the side. When we too focus on one area, we will ignore the surroundings. Here is the example: The vehicle’s speed increases and the area of eye scanned gets limited.
When it comes to UI design,
we will always refer to the Thumb Zone guideline when starting to design mobile UI. The Green Colour zone was the area where people were easier to reach with the thumb.
The bottom area of the screen seems easy to touch. However, that is the area people will always choose to ignore. Here is the image showing how people scan and touch the mobile screen.
Here is another interesting article by Teisanu Tudor. He tried to apply Tumb Zone principle to the UI, for example placing the search bar to the bottom. As the result can see the end the UI looks “weird” and also users easily ignore the bottom area. I think one of the reasons is because mental model, we always think that the search bar should stick at the top.
At the end of the sharing, there are the rules for better mobile touchscreen design by Steven Hoober. For more details can refer back to the video.
To wrap up
Believe the data, don't design a new interface that users don’t understand how they work.
