Thursday, 10 November 2016

Addressing Mobile Thumb Zone in UX Design: Why and How to Do It?

Did you ever interact with a mobile app that is challenging to navigate while holding the phone in one hand? If yes, you might have noticed that most of the UI elements in that app are located out of the reach of your thumb. If you are observant and attentive, you can see the same thing in many mobile websites as well. So, any app and website that is not easy to navigate with the thumb are basically not designed for thumbs. What is then designing for thumb means? Well, we are here to explain this design principle, the importance of it from user and business perspective and the technical considerations for a thumb optimized design.

The trend of bigger screen

After ignoring the popularity of bigger screens for many years, Apple finally left its conservative approach and succumbed to the growing trend of larger screen devices. So, we have got iPhone 6 and 6 Plus in a non-Apple like design with the much larger screen. Already the bandwagon of large screen devices was stronger, and now as the industry leader, Apple decided to follow the trend. So, finally, the big screen became an established norm for mobile device manufacturers.

What is the impact of this new approach from device brands? Well, bigger screen in the one hand allowed more finger-friendliness, and on the other hand, it created more challenges for single-handed handling and thumb-based navigation. Finger taps became easier but navigating with thumb became tougher since the thumb in bigger screen has to cover more area. So app makers and designers now address the thumb zone in the screen more accurately.

Mobile Thumb Zone

The coinage of the term mobile thumb zone now became commonplace among designers. What does this mean actually? What is its significance from the design perspective?

For users holding a mobile device single-handedly the comfortably reachable area around the thumb is called Mobile Thumb Zone. It is the particular sector where the thumb of the user most comfortably moves around and reaches various UI elements.

Since the vast majority of the users now hold their mobile device single-handedly it is the thumb zone that remains to be crucial for user experience. By placing the most commonly used and most sought after UI elements within the Thumb Zone you make the user experience better while designing UI without consideration for the ease of thumb-based navigation the UX design misses the ease of use.

How to prioritize?

When designing for the thumb zone, you need to prioritize few UI elements over others since within the thumb area you cannot put all elements. Only the most commonly clicked and used navigation buttons, clickable areas and UI elements will be there while the less significant and less used UI elements will be outside of this zone. By offering priority to certain things you are giving users more ease in navigation.

Beyond fixation and towards flexibility

Now let us see how mobile thumb zone can be designed? Should there be a fixed dimension irrespective of the size of the available screen real estate or it should be flexible enough as per the display size? Well, most notable cases of mobile thumb zone have been designed flexibility to address the screen size proportionately. So, it is a large screen or a relatively smaller display device, and the thumb area will take proportionate dimension allowing ease of use for users irrespective of the instrument they use.

Apart from the consideration of device screen size, the size of the hard is equally important for designing as per the thumb zone. Smaller hands with small thumb size are likely to have less reach over the screen while the bigger hand can cover a larger area. But apparently, thumb zone cannot adjust to various sizes of hands and covered area of the thumb. Designers try to address this issue by considering an average thumb size. A middle point somewhere between the large and small helps to make the design friendly for all thumb dimensions.

Thumb zone for mobile web

While the majority of web users today browse even on mobile devices designing for the thumb is equally important for the mobile web and responsively designed websites. But the principles of UI design remain a lot different than that of mobile apps. The users of mobile sites are more fleeting and less loyal in character while the app users have decisively downloaded the app for a purpose. Naturally here designing for the thumb is of paramount importance.

Drop down menu hidden under a hamburger icon is a common attribute of mobile website or responsive website design. How can you give user more accessibility to this menu with a thumb optimized design? Well, a few design cases addressed this problem with an excellent solution. By placing a navigation aviator inside the thumb zone the accessibility and reach to menu items can be optimized for the single-handed users.

Different degree of thumb reach

The coinage Thumb Zone itself signifies that all screen areas are not equally reachable by the user's thumb. Even within the thumb zone there are areas with easy reach, moderately accessible and harder to reach. To allow thumb is reaching most of the required elements, you need to prioritize among UI elements and at times try to offer individual features somewhere at the middle point between inaccessible and easily accessible screen areas.

Allowing gesture input for the thumb

In advanced smartphones, we give various gesture inputs for commands including swipe, finger tap, double tap, pinch, etc. All these data should be offered equally optimized for the user's thumbs. Does your app or mobile website allow single-handed users are making these gesture inputs by efficiently moving their thumb or they need to use the right hand quite often for the desired action? Obviously, from a UX perspective, the reply should be positive. From ensuring easy reach to allowing gesture inputs, a great UX is achieved with a thumb-friendly design.

17 comments:

  1. I am expecting more interesting topics from you. And this was nice content and definitely it will be useful for many people.

    Mobile App Development Company in Chennai
    Web Design Company in Chennai
    Web development Company in Chennai

    ReplyDelete


  2. Really it was an awesome article...very interesting to read..
    Thanks for sharing..please sharing like this information......
    Android training in chennai
    Ios training in chennai



    ReplyDelete

  3. Really it was an awesome article...very interesting to read..
    Thanks for sharing..please sharing like this information......
    Android training in chennai
    Ios training in chennai

    ReplyDelete
  4. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing..
    Mobile App Development Company
    Mobile App Development Companies

    ReplyDelete
  5. These ways are very simple and very much useful, as a beginner level these helped me a lot thanks fore sharing these kinds of useful and knowledgeable information.
    Mobile App Development Company
    Mobile App Development Companies

    ReplyDelete
  6. It's really informative! Thanks for the great article.
    Hvantage Technologies is leading Mobile application development , and Web Development Company in USA offering various integrated IT Services including Ecommerce Solution, SEO Services & Digital Marketing Services.

    ReplyDelete

  7. Thanks for posting useful information.You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...Really it was an awesome article...very interesting to read..
    please sharing like this information......
    Android training in chennai
    Ios training in chennai

    ReplyDelete
  8. You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting

    for your next post keep on updating these kinds of knowledgeable things...

    Mobile App Development Company
    Mobile App Development Company in India
    Mobile App Development Companies

    ReplyDelete
  9. I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.

    Android App Development Company

    ReplyDelete
  10. great and nice blog thanks sharing..I just want to say that all the information you have given here is awesome...Thank you very much for this one.
    web design Company
    web development Company
    web design Company in chennai
    web development Company in chennai
    web design Company in India
    web development Company in India

    ReplyDelete
  11. it is really amazing...thanks for sharing....provide more useful information...
    Mobile app development company

    ReplyDelete
  12. Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every blog.i am expecting more updated posts from your hands.
    iOS App Development Company

    ReplyDelete
  13. You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...
    Fitness SMS
    Salon SMS
    Investor Relation SMS

    ReplyDelete
  14. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving..
    Texting API
    Text message marketing
    Digital Mobile Marketing
    Sms API
    Sms marketing

    ReplyDelete
  15. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..Website Designing Company Bangalore | Web Development Company Bangalore

    ReplyDelete