Today I would like to talk to everyone about the “thumb zone” we refer to when designing sites for the mobile user.
Have you ever been on a mobile app or website with your iPhone or Droid and it was very difficult to navigate through?
Most of us have been there and with the patience of online users in this day and age 99% of the time people will hit the back arrow. If you’re a website or app owner, you may lose that browser forever.
This takes place due to inadequate attention to the thumb zone and if you’re a web master we do not want this happening to your developments. That said I would like to ration the learnings that I have collected on this issue.
Sit back, get a cup of your favorite coffee and take some time to educate yourself about the thumb zone.
Gain knowledge from superior teachers
There have been plenty of experts like our friends at Visions Local Marketing of San Diego out who have created content revolving around the thumb zone when developing mobile applications or websites.
Utilizing the Visions Local Marketing’s teaching about the thumb zone, we have tested different areas of the design components. I tested with a top menu navigation and at the bottom of iPhone and droid screens.
The test that I ran confirmed that VLM’s developers were right on with their theories. Our research also helped us to differentiate what design functions work and what frustrates mobile users with poor design.
We would urge you to do your research on this topic in order to design a top notch product and keep your web design clients happy with your services.
The thumb zone isn’t every designer tries to optimize and by doing so you can set yourself apart from the competition.
High percentage of people use thumbs
Experts show that over 60% of mobile users are in fact one handed device operators making the thumb zone even that more critical to get right.
By making a clear comprehension of how people hold their phones can give designers like us feedback on how to design apps and mobile websites.
That said our research in finding thumb placement and mapping allows us to structure the design in a way that is extremely user friendly and now we can use this knowledge in all of our developments.
Times of simple dropdown links on mobile have passed and gone. We are currently in a time where navigation is evergreen.
All of have an organic motion we use when using our devices or on our favorite apps. For that reason, I have taken this into strong consideration when developing mobile websites.
Let’s all ask ourselves a few things when looking at our mobile sites:
- Does my site or app possess a list of links that run off the page?
- What does my primary menu look like?
- Does my color pallet blend in with my overall theme?
- Is my site in accordance with Googles mobile friendly test?
Asking yourself these questions, before creating a new site or revamping an existing site can save you a vast amount of time and money.
Links run over are don’t look attractive
Let’s say your mobile website has a list of links that run off your site and looks like a kindergartener built it.
From our findings, I employed a full screen overlay menu with an icon for users to navigate to. When the users clicks on the menu icon in a colorful and appealing full screen menu pops making it simple for the user to find their way around.
Within the full screen menu, we can spice it with cool looking icons and call to action buttons to entice users to click-through our mobile sites. This will also add a bit of Search Engine Optimization value to your website.
Google has confirmed that traffic and click-through rate of a domain are factored into their algorithm.
Sticky menu options
On the contrary of having a list of links a sticky menu may be suitable for your design. If you’re not familiar with a sticky menu allow me to explain.
Sticky menus are attached to your websites header or in some cases I have seen them on the footer. The sticky menu will follow the user while they scroll down while taking in content. Very handy for keeping your audience engaged and adds a call to action element.
Gestures for mobile design
All of the apps or websites you browse contain three functions.
This is what we call gestures in the mobile design business. Every great mobile build has these gestures and there is a ton development work that goes into it. If you’re interested in learning more about gestures and movements check out this post. Implementing gestures.
Understanding gestures will permit you to take your mobile thumb zone design to the next level and as we mentioned before set you apart from fellow designers. You’re welcome.
Another important thing to add to your thumb zone research is swiping patterns. Acquiring knowledge of swiping patterns users do will let you pin point the thumb zone for lefties, righties, and neutral mobile handlers.
All together I realized placing swipe gestures in the easiest regions to reach and making it easier for users to interact with apps or mobile websites.
I hope you have learned to understand that the thumb zone is a critical element when designing mobile applications or mobile websites.
Please take this post as an actionable guide you can use to optimize your design process. Thumb responsive sites are the future of design and putting a focus on this will put you in the driver’s seat.
Promoting a powerful thumb zone plan will make all of your future web users happy and less confused. In my opinion, that’s what it’s all about.
Thank you for reading and taking time to visit the Dying Tribe Web Development Team website.…Continue reading »