{"id":117134,"date":"2015-10-27T19:15:00","date_gmt":"2015-10-28T00:15:00","guid":{"rendered":"https:\/\/www.dacgroup.com\/fee-fie-foe-thumb-5-tips-for-mobile-web-design\/"},"modified":"2024-12-19T16:40:21","modified_gmt":"2024-12-19T21:40:21","slug":"fee-fie-foe-thumb-5-tips-for-mobile-web-design","status":"publish","type":"post","link":"https:\/\/www.dacgroup.com\/en-ca\/insights\/blog\/creative\/fee-fie-foe-thumb-5-tips-for-mobile-web-design\/","title":{"rendered":"Fee Fie Foe Thumb: 5 Tips for Mobile Web Design"},"content":{"rendered":"

With the introduction of the \u201cphablet\u201d and ever-growing physical size of smartphones, the mobile growth trend no longer only applies to the increase in device usage.\u00a0 Browsing on less than 4\u201d screens is on the decline<\/a> with the majority of consumers taking on the 5\u201d or larger sized smartphone. These gigantic phones have replaced desktops and tablets and now hold a special place on the inside of your palm, making mobile web design<\/a> a critical element in determining the mobile user experience.<\/p>\n

The Mobile Hold <\/strong><\/h2>\n

When about 3 hours of a person\u2019s day is spent on their mobile device<\/a>, it\u2019s important to understand just how these mini-tablets\/phablets, the new iteration of \u201cphones,\u201d are held and maneuvered and what those implications are.<\/p>\n

The majority of us have had various challenges with adapting to the larger phone. I personally had several instances of phone-to-face collision or balancing my device on my fingers so that my thumb could reach the top left corner of the website. I know I\u2019m not alone.<\/p>\n

Although we may not always hold our phone the same way, \u00a0Steven Hoober\u2019s study<\/a> illustrated that there are 3 distinct ways a mobile user holds the device:<\/p>\n

1. The One Handed <\/strong>(the most popular)<\/p>\n

\"One<\/a><\/p>\n

Image via Steve <\/em><\/a>Hoober<\/a><\/h6>\n

This position allows you to maneuver and browse on a page using your thumb.<\/p>\n

2.\u00a0The Cradled<\/strong> (the common)<\/p>\n

\"Cradled<\/a><\/p>\n

Image via Steve <\/em><\/a>Hoober<\/em><\/a><\/h6>\n

This position allows for the thumb and pointer finger to control the screen, however, the majority still resort to using the thumb<\/a>.<\/p>\n

3. The Two Handed<\/strong>\u2014 which I call the Texter<\/p>\n

\"Two<\/a><\/p>\n

Image via Steve <\/em><\/a>Hoober<\/em><\/a><\/h6>\n

Unless you\u2019re using the phone in active mode (ex. gaming, movies), it is rare to find mobile users using the landscape mode while holding the mobile with two hands.<\/p>\n

Nonetheless, in all three grips, the thumb plays an increasingly important role in our daily digital lives. Think of all the times you scrolled through Instagram and didn\u2019t use your thumb or texted using your pointer finger\u2026you probably can\u2019t, unless you\u2019re my mom (sorry mom).<\/p>\n

The Thumb <\/strong><\/h2>\n

Because we no longer have a precise cursor like the mouse, it\u2019s important we learn how to cater to the mighty opposable thumb and its characteristics.<\/p>\n

The thumb is both the shortest and chubbiest finger of the bunch making maneuvering a webpage a dexterous task, even with someone who has long \u201cpiano\u201d fingers like myself.\u00a0 The thumb zone heat map<\/a> evolution illustrates how the growth of the display screen decreases and limits our ability to reach across the screen, comfortably.<\/p>\n

\"Thumb<\/a><\/p>\n

Image via Steve <\/em><\/a>Hoober<\/em><\/a><\/h6>\n

With mobile searches exceeding desktop searches<\/a>, your website needs to deliver the best mobile user experience possible. When designing a mobile friendly website, you must think of how you should design your page for the thumb.<\/p>\n

Here are 5 tips that can help<\/u><\/strong>:<\/u><\/strong><\/p>\n

1. Mobile responsiveness<\/strong>\n

\n \n
\n
\n

\n Stay Forward <\/h2>\n

\n Get exclusive insights into digital
media's top-trending topics delivered
directly to your inbox. <\/p>\n <\/div>\n\n

\n
\n
\n
\n \n