Responsive UI/UX
What is a better alternative to the bottom navigation pattern on mobile web pages?
We must change the way we create, and design websites as mobile devices grow. Is there anything to be learned from tap bars and app design? Can we improve our websites' mobile navigation to make them less expensive to interact with? We'll learn in the next piece.
What at once comes to mind when you hear the term "mobile navigation"? The slide-out menu for hamburgers is what comes to mind. Even though a lot has changed since the early days of responsive design, this design pattern has remained in use. How come?
How did we initially come to use the top navigation with the hamburger menu? Exists as a preferable substitute. I'll try to investigate these issues in this piece.
History of the Hamburger and the Top Navigation
In the 1980s, the first hamburger menu symbols initially appeared. It was made for the Xerox Star, the first graphical user interface ever created, by Norm Cox. For the same interface, he created the document icon as well. Geoff Allday discovered this historical fact (who emailed Norm Cox). By clicking here, you can read the entire email response. Later, it appeared on DOS and Windows 1.
Ethan Marcotte's "Responsive Web Design" book from 2011 popularised the current mobile navigation as we know it. Since then, the industry has adopted hamburgers and top navigation.
In ten years, the size of mobile phone screens has doubled.
Sales of mobile devices have been rising every year since the release of the first iPhone. The market reached its saturation point in 2019, and sales have begun to decline. However, that does not imply that no one is using a phone. According to Quartz and Ciodive, we will spend 80% of our online time on mobile devices by the year 2020. Compare that to 2010, when only a fourth of Internet users were phone-based.
Screen sizes have more than doubled along with phone sales. Smartphone screens have grown on average from 3.2 inches to 5.5 inches. Device manufacturers began using the larger 18:9 aspect ratio in 2017 with 5.7-inch and 6-inch 18:9 screens. As they have a larger screen area than 5.5-inch 16:9 displays, 6-inch 18:9 displays are now starting to become the new norm in flagships as well as in the mid-range price segments, according to XDA-Developers.
Design Driven by Thumb
Vitaly Friedman is the one who introduced me to the phrase "thumb-driven design." It is based on studies on how people manage their devices conducted by Steven Hoober and Josh Clark.
The main takeaway is that three fundamental grips were used almost universally. According to Josh Clark, 36% of people held their phones in one hand while tapping away with the finger or thumb of the other, 36% used a one-handed hold, and the remaining 15% used a two-handed BlackBerry prayer position, pounding away with both thumbs. 75% of users solely use their thumbs to touch the screen, according to research by Steven Hoober. the phrase "thumb-driven design" was coined.
These concepts were expanded upon in an essay by Samantha Ingram titled "The Thumb Zone: Designing for Mobile Users" published in 2016. She described the terms "easy-to-reach," "hard-to-reach," and "in-between."