Персональные компьютеры и ноутбуки больше не являются основным инструментом, посредством которого люди получают информацию из интернета. Большую часть времени юзеры предпочитают использовать смартфоны или планшеты. Посредством их люди не только «серфят» в социальных сетях, на сайтах, но и работать.
Если вы строите успешный бизнес и хотите, чтобы сайт компании был эффективным, мобильная версия сайта должны быть по умолчанию. Просто создать её автоматически — не достаточно. Версия для смартфонов и планшетов требует отдельной оптимизации и настроек. Даже ключевые запросы для неё прописываются специальные, к примеру, под голосовой поиск.
Но даже если вы провели все настройки, ваш сайт попадает в ТОП-выдачи, у вас отличный контент и конкурентная продукция — это не значит автоматически высокой конверсии. Мобильной версией вашего сайта может быть просто неудобно пользоваться. А всё потому, что телефоны и планшеты мы держим определённым способом. Причём, чем моложе поколение, тем легче и увереннее они это делают. Если люди 60+ используют две руки и нажимают указательным пальцем, то подростки запросто управляются одной рукой, параллельно выполняя несколько задач.
Как люди держат телефон и почему это важно учитывать web-разработчикам
Исследования юзабилити сайтов по отношении к тому, как люди держат в своих руках телефон, было проведено ещё в 2013 году, исследователем Стивеном Хубером. Тогда он выяснил, что для 49% пользователей привычным является держать смартфон одной рукой, 36% применяют одну руку, но работают на нём пальцем второй и 15% человек используют одну руку. При этом, 75% от всех пользователей задействуют большие пальцы. Отсюда и появился термин «правила большого пальца» при взаимодействии с мобильным устройством.
За прошедшие с того времени 7 лет изменилось многое — и сами телефоны стали больше, и число пользователей работающих одной рукой, либо исключительно большими пальцами выросло. При разработке мобильной версии сайта данный факт необходимо учитывать.
Интерфейс мобильной версии сайта адаптируется нашими web-разработчиками под удобную работу всеми пальцами. При этом, наибольшее внимание уделяется именно взаимодействию большого, так как именно на него ложиться основная нагрузка. К примеру, если вы решите разместить кнопку «Купить» в правом нижнем углу — вашему пользователю в руках которого в данный момент находится смартфон, это будет неудобно. Целесообразнее если она будет находится посредине, или справа. В этом случае, человеку не придётся менять положение рук, чтобы совершить действия. А все люди, по своей природе, ленивы и лишних движений совершать не хотят, предпочитая максимально продуманные интерфейсы. При этом, в версии для планшета или ПК, подобное расположение не столь критично и не вызовет снижения юзабилити.
Что из себя представляет зона большого пальца на телефоне
Когда вы скролите ленту социальных сетей, просматриваете почту или ищете информацию в своём телефоне, не зависимо от того используете вы одну или две руки, ваши большие пальцы совершают строго определённые движения. Визуально — это дуга. Не верите, просто поэкспериментируйте со своим смартфоном. Даже если вам кажется, что это вертикальные движения снизу вверх и наоборот по центру экрана, вы быстро поймёте, что это не так.
Зона большого пальца начинается от центра нижней части экрана, затрагивает практически всю его правую сторону и заканчивается в левой верхней части. При этом, стоит учитывать, что любой из углов использовать для взаимодействия не удобно. Это особенно важно, если статическая картинка или текст с побуждающим к действию элементом адаптирован строго под размер экрана. Он виден полностью и не нужно скролить. А вот выполнить действие, для которого это всё и задумывалось, человеку не комфортно.
Данное правило работает для правшей. С левшами — всё в точности наоборот. Но давайте будем честными, все мы с лёгкостью управляемся смартфоном в какой бы руке он не находился. Два интерфейса одной и той же мобильной версии сайта не создаются. Чтобы его было одинаково удобно использовать всем, целесообразно разместить кликабельные элементы в центре экрана на статическом контенте. Таким образом, они попадут в зону действия большого пальца любой руки, поскольку центр экрана является зоной пересечения пальцев обеих рук.
Кстати, размер телефона никоим образом не влияет на то, как человек его держит. Это исключительно вопрос привычки. Поэтому значение имеет исключительно расположение информации. Важные элементы, на которые пользователь должен обратить внимание, лучше поместить в верхней части экрана, избегаю углов. Большими пальцами гораздо удобнее кликнуть на кнопку или ссылку вверху, нежели внизу.
Особенности расположения рук на планшетах
Не смотря на всю схожесть планшета и телефона, оптимизация сайта под работу с ними имеет существенные различия. Во-первых, планшет держат двумя руками, если он полноценный, а не размером с телефон. Следовательно и взаимодействие с ним осуществляется большими пальцами обеих рук. И зона больших пальцев здесь совершенно другая.
При адаптации сайта под планшетное устройство, веб-разработчики SEO-HI, никогда не размещают важную информацию или побуждающие к дальнейшему действию элементы в самом низу экрана. Это — слепая зона. Дотянуться пальцами до них крайне сложно. Можно парировать, что многие работают с планшетом лёжа. Но и в этом случае, нижняя часть экрана не видна пользователю. Она закрыта подушкой, которая используется в качестве подставки, одеялом, одеждой, если вы лежите не спине и держите планшет коленями.
Второй важнейший фактор на который обращают внимание наши разработчики и дизайнеры — зона комфорта больших пальцев. В отличии от телефона — это не дуга. Адаптация сайта для планшета предусматривает, что большие пальцы при одновременной или попеременной работе рисуют песочные часы. Второй после нижней части экрана, по степени невостребованности, является центральная вертикаль, которая расширяется книзу. Дотягиваться до неё большими пальцами попросту неудобно. Поэтому, любая важная информация размещается справа или слева на уровне центральной горизонтали или немного выше.
Если интерфейс вашего сайта требует от пользователя большого числа различных движений, то юзабилити он оценит низко и предпочтёт вам более удобных конкурентов. Поэтому важные элементы, которые используются чаще всего, необходимо сгруппировать в одной зоне, которая входит в область действия больших пальцев.
Только на первый взгляд кажется, что интерфейс сайта в версии для мобильного телефона или планшета подогнанный под положение рук — лишняя опция. На самом деле, вещи кажущиеся незначительными приводят к колоссальным потерям прибыли. Статистика крупных продающих интернет-площадок показала, что 77% покупателей, которые используют мобильные устройства, предпочитают те товары, к которым удобно дотянуться большими пальцами. При этом, их товарная группа и характеристики не играют основной роли. Они могут даже несколько уступать по показателям конкурентам, расположение которых не столь выгодно.