Как создать продукт, который полюбят

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

Интерфейсы для большого пальца

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

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

AIRBNB

После ребрендинга этот сервис аренды жилья переместил контрольные элементы для управления некоторыми основными действиями в нижнюю часть экрана. Посмотрите, к примеру, на рис. 6.41.

Рис. 6.41. Эргономичный дизайн Airbnb

На обоих экранах присутствуют очевидные основные действия, и они не требуют непонятных движений руками или контрольных элементов на уровне ОС, как, например, «удобный доступ» Apple, позволяющий опустить верхнюю часть экрана ближе к зоне большого пальца путем двойного нажатия на кнопку Home.

Тем не менее Airbnb переняли у Apple скользящее движение от одного края к другому, что позволяет избежать нежелательного растяжения пальцев при попытке нажать на стрелку возврата сверху.

TINDER

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

Рис. 6.42. Tinder — это рай для тех, кто управляет интерфейсом при помощи большого пальца

Кроме того, приложение реагирует на скользящие горизонтальные движения для навигации, так что переход между разделами Settings, Discovery и папкой с контактами, которые с вами совпадают, можно совершать одной рукой. Великолепно.

Размещение контрольных элементов в нижней части экрана, если ваш продукт предназначен для устройств с тачскрином, кажется разумной тактикой. Так они окажутся в зоне досягаемости большого пальца. Даже если ваш пользователь держит телефон одной рукой, а управляет второй, продукт все равно будет оптимизирован под одну руку. Не забудьте, где контрольные элементы размещают производители (Apple — кнопку Home, Android — контрольную панель, а Windows Phone — старт, кнопка Home и поиск). Все они находятся в нижней части устройств.

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

Кросс-платформенный дизайн

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