The idea itself is quite simple: move the navigation bar further down. How can we fix this? Bottom Navigation PatternĮvery now and then, bottom navigation pattern pops up on the web. From the example above, we can see where the most expensive screen real estate is. As our screens got bigger, the top part became virtually impossible to touch without adjusting your phone. When the phones were small, most areas were easy to reach. However, I would argue, that with increasing phone sizes, the mapping has shifted a bit: New thumb-zone mapping adjusted to larger screen sizes ( Large preview) Thumb-zone mapping explained by Samantha Ingram ( Large preview) She defined easy-to-reach, hard-to-reach and in-between areas. In 2016, Samantha Ingram wrote an article named “ The Thumb Zone: Designing For Mobile Users” which further explores these ideas. There are three main ways in which we hold our phones. Steven Hoober had found that 75% of users touch the screen with only one thumb. 49% held their phones with a one-handed grip, 36% cradled the phone in one hand and jabbed with the finger or thumb of the other, and the remaining 15% adopted the two-handed BlackBerry-prayer posture, tapping away with both thumbs, states Josh Clark. The gist of it is that in nearly every case, three basic grips were most common. It’s based on the Steven Hoober’s and Josh Clark’s research on how people hold their devices. I first heard of the term “thumb-driven design” from Vitaly Friedman. That’s fine, but how do we adapt our design patterns to reflect these changes?
An overview of how the mobile screen sizes have changed (Image source: ScientiaMobile) ( Large preview)īasically, the mobile phone screen size is getting bigger and bigger. Now, we are starting to see 6-inch 18:9 displays become the new standard in flagships as well as in the mid-range price segments, as they have more screen area than 5.5-inch 16:9 displays, XDA-Developers reports. In 2017, device makers started to adopt the taller 18:9 aspect ratio with 5.7-inch and 6-inch 18:9 displays. The average screen size of smartphones has increased from 3.2 inches all the way to 5.5 inches. Compare that to 2010, when only a fourth of Internet users were phone-based.Īs phone sales increased, screen sizes have more than doubled, too. By 2020, we will spend 80% of our time on the Internet on mobile phones, reports Quartz and Ciodive. But that doesn’t mean people are not using phones. 2019 is the first year that the market reached saturation point and the sales have started to decrease. Since the original iPhone, mobile sales have been increasing year after year. The Mobile Phone Screen Size Doubled In 10 Years Since then, the top navigation and the hamburger became the industry’s standard. The current mobile navigation - as we know it - was popularized by Ethan Marcotte’s “Responsive Web Design” book back in 2011. You can read the whole email response by clicking here. This piece of history was uncovered by Geof Allday (who actually emailed Norm Cox). He also designed the document icon for the same interface. It was designed by Norm Cox for the Xerox Star - the world’s first graphical user interface. The first hamburger menu icons started appearing in the ‘80s. The History Of The Top Navigation And The Hamburger
How did we start using the top navigation with the hamburger menu in the first place? Is there a better alternative? In this article, I will try to explore these questions. This design pattern had been in use since the first responsive design days, and even though a lot has changed since then, this particular pattern has not. Whenever you hear of “mobile navigation”, what’s the first thing that comes to mind? My guess would be the hamburger slide-out menu. Is there something to learn from app design and tap bars? Can we fix the mobile navigation of our websites to have a lower interaction cost? In this article, we’ll find out. As our phones are getting bigger, we need to adjust how we build and design our websites.
0 kommentar(er)
