Эргономика: зоны для больших пальцев и области нажатия

Ранее в этой главе шла речь о пяти состояниях пользовательского интерфейса: идеальном, промежуточном, пустом, ошибочном и состоянии загрузки. Это элементы UI-стека, и все они существуют для каждого из создаваемых вами экранов. Они универсальны, где бы вы их ни применяли — на персональном компьютере, мобильном устройстве, планшете, телевизоре или в машине.

Теперь давайте поговорим о том, как интерфейс должен учитывать влияние физического мира.

Нет-нет, мы не попали в фильм «Особое мнение», и нам не доведется работать с потрясающими голограммами, которые создает для Тони Старка его друг ДЖАРВИС (хотя друг ли он ему? Хм…)

Речь пойдет о строении большого пальца человека и о том, почему это важно для дизайнеров.

Даже если сейчас вы не создаете продукты для тачскринов, очень скоро это время придет.

Не верите? Посмотрите на рис. 6.33. ДА, ЭТО МЛАДЕНЕЦ С iPAD.

Рис. 6.33. Маленькие дети пользуются iPad. Что дальше, кошки и собаки научатся жить вместе?

Впервые в истории человечества появилось поколение, с детства знакомое с тачскринами. Давайте предположим, что в ближайшее время они никуда не денутся, а мышь станет пережитком прошлого. Сегодня нужно создавать продукты для экранов, на которых можно выбирать, двигать, уменьшать, увеличивать объекты и так далее.

Что же делать?

Помните, в первой главе я рассказывал об истории разработки цифровых продуктов? Я рассматривал работы Лиллиан Гилбрет, Генри Дрейфуса и Скотта Кука. В чем была их основная тема?

В исследованиях. Нужно понять, как именно люди держат в руках свои мобильные телефоны, планшеты и другие гаджеты и как используют компьютеры с сенсорными экранами.

Что ж, нам повезло.

Эксперт по мобильным технологиям Стивен Хубер провел такое исследование в начале 2013 года и привлек к нему 1333 респондента[126]. Он выяснил, что люди держат телефоны так (рис. 6.34).

Рис. 6.34. Исследование, проведенное Стивом Хубером в 2013 году, показало, что 49% опрошенных при взаимодействии с мобильным телефоном используют только большой палец[127]

• Одной рукой: 49%

• Между плечом и ухом: 36%

• Двумя руками: 15%

Из тех, кто держал телефоны в руках:

• 67% касались экрана большим пальцем правой руки

• 33% — большим пальцем левой руки

Хубер отметил, что левши составляют лишь 10% населения. Соответственно, выявленная им высокая доля пользователей, предпочитавших держать телефон в левой руке, должна была объясняться тем, что те одновременно делали что-то еще: курили, ехали на велосипеде, пили кофе, ели хот-дог и так далее.

Судя по всему, мобильные устройства с диагональю 3,5 и 4 дюйма очень скоро будут забыты. А это значит, что те из нас, кто зарабатывает себе на жизнь созданием приложений, быстро адаптирующихся сайтов и веб-продуктов, оптимизированных под мобильные устройства, должны что-то изменить в своей работе.

Закат подобных устройств уже начался. В отчете 2014 Mobile Benchmark Report от Adobe говорится, что в мае 2014 года поиск с мобильного телефона с диагональю 4 дюйма осуществляли на 11% меньше пользователей, чем за год до этого (рис. 6.35)[128].

Рис. 6.35. В мае 2014 года компания Adobe сообщила, что телефоны с большими экранами (то есть с диагональю более 4 дюймов) генерируют больше интернет-трафика, чем когда-либо в истории

Но это исследование касается только телефонов, проданных до мая 2014 года. Если помните, Apple объявили о самом успешном квартале в истории своей компании в январе 2015 года. Тогда было продано почти 75 миллионов iPhone, а iPhone 6 стал самым популярным продуктом Apple[129].

Это значит, что сейчас нам, как никогда раньше, важно научиться разрабатывать продукты для тех, кто предпочитает взаимодействовать с мобильными устройствами при помощи больших пальцев. Радует то, что размеры экранов этих телефонов будут практически универсальными. Беглый обзор самых популярных размеров экранов телефонов с Android указывает на диапазон от 5,1 до 5,7 дюйма[130].

Apple несколько упростят нам работу по мере исчезновения смартфонов с небольшими экранами. Диагонали iPhone 6 и iPhone 6+ составляют 4,7 и 5,5 дюйма соответственно.

Но почему разработчики должны адаптировать свои продукты к этим изменениям? Как показывает исследование Хубера, при использовании телефонов люди обычно меняют положение руки в зависимости от требований интерфейса. Судя по всему, они делают это бессознательно перед тем, как совершить то или иное действие.

Для меня это звучит как предупреждение. Почему люди должны подстраиваться под мое приложение? Чем оно отличается от других? Почему бы не создать более удобные элементы управления?

ДИЗАЙН ДЛЯ БОЛЬШОГО ПАЛЬЦА

Что означает разрабатывать продукты для больших пальцев? Создавать интерфейсы, удобные для использования при их естественном положении и движении.

Но это сложнее, чем может показаться. Возьмем, к примеру, телефоны с сенсорными экранами. Мы бессознательно слегка перемещаем свой телефон в руке, чтобы иметь возможность коснуться тех или иных элементов на экране. Готов поспорить, что в течение дня вам то и дело приходится тянуться или наклонять телефон в разные стороны, чтобы добраться до той или иной точки на экране.

Но с чего-то нужно начинать. Исследования Хубера показали, что большинство из нас держит телефон так, как показано на рис. 6.36 — основание большого пальца касается правого нижнего угла экрана.

Рис. 6.36. Когда телефон держит правша, большой палец естественным образом располагается в нижнем правом углу экрана

ЗОНА БОЛЬШОГО ПАЛЬЦА

Все это подводит к мысли о существовании зоны большого пальца. Это своего рода тепловая карта, показывающая, насколько легко наш большой палец может дотянуться до той или иной области на экране. Воспользовавшись результатами исследований Хубера, давайте нарисуем схему зоны большого пальца для самой распространенной модели пользования тачскрином:

• Одной рукой

• Большой палец правой руки на экране

• Основание большого пальца находится в нижнем правом углу экрана

На рис. 6.37 представлена карта зоны большого пальца для мобильных телефонов разного размера, от 4 до 6 дюймов по диагонали.

Рис. 6.37. Карта зоны большого пальца для мобильных телефонов размером от 4 до 6 дюймов по диагонали

А вот более подробное сравнение двух больших экранов с диагональю 4,7 и 5,5 дюйма (рис. 6.38).

Рис. 6.38. Зоны большого пальца для экранов с диагональю 4,7 и 5,5 дюйма

Обратите внимание, что удобные зеленые зоны остаются практически неизменными (чуть ниже мы поговорим о том, чем самый большой экран отличается от остальных). Это потому, что наш большой палец не увеличивается в размере как по волшебству. Очень жаль, ведь в детстве в игре Street Fighter моим любимым персонажем был Далсим (рис. 6.39).

Рис. 6.39. К сожалению, наши пальцы не растягиваются, как руки Далсима из игры Street Fighter

Меняется лишь площадь зоны, отмеченной красным цветом, что становится особенно очевидным на экране с диагональю 5,5 дюйма.

Кроме того, вы могли заметить, что на большом экране изменяется форма зоны естественного движения. Это происходит потому, что из-за размера такой телефон иначе ложится в руку, а мизинец начинает использоваться как стабилизатор. Удивительно, насколько меняется поведение из-за различия менее чем в один дюйм.

ДРУГАЯ ХВАТКА

Теперь давайте проанализируем, что происходит с зоной большого пальца, когда телефон держат по-другому. Иногда легче дотянуться до определенных областей экрана, переместив основание большого пальца в центр (середина экрана на наших тепловых картах будет обозначена белой точкой).

Вот как это работает для экранов с диагональю 4,7 и 5,5 дюйма (рис. 6.40).

Рис. 6.40. Когда меняется положение руки, телефон размещается в ней по-другому, что существенно влияет на движения большого пальца