Как создавать дизайн приложений в эру громадных экранов

После нескольких лет противоборства, Apple наконец-то анонсировала iPhone 6, который можно считать началом отсчета эры больших экранов. О том, что пользователям это по душе свидетельствуют отчеты Apple о начальных продажах, но и без них ясно что «большие» айфоны разбирают как горячие пирожки.

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

Процесс перехода на мобильные устройства с большей диагональю уже начался. Отчет Adobe’s 2014 Mobile Benchmark подтверждает, что просмотр веб-сайтов с устройств диагональю менее 4‑х дюймов снизился на 11%. Поэтому, теперь понимание того, как создавать удобный дизайн для управления одной рукой, важно как никогда.

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

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

Дизайн для больших пальцев

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

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

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

• одной рукой — 49%
• в док-станциях — 36%
• двумя руками — 15%

Доминирование хвата левой или правой рукой тоже довольно интересно:

• правая — 67%
• левая — 33%

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

Зоны большого пальца

Зоны большого пальца представляют собой что-то вроде теплокарты. Они дают наилучшее представление о том, насколько доступны различные зоны экрана для наших пальцев. Давайте используем результаты исследований Хубера, чтобы составить такую теплокарту для самого популярного сценария использования, когда мы держим телефон одной рукой (правой) и основание большого пальца находится в правом нижнем углу. Вот наглядное представление того, как зоны большого пальца распределялись еще с первого iPhone (2007).

Более детальное сравнение iPhone 6 и iPhone 6 Plus:

Как видите, «безопасная» зеленая зона остается почти неизменной (об iPhone 6 Plus чуть позже). Это потому, что наши пальцы не могут чудесным образом растягиваться под размер экрана. Печально, ведь в детстве я так любил играть за Dhalsim’а в Street Fighter.

Но что же случилось с iPhone 6 Plus и почему красная зона на нем так резко увеличилась? Кроме того, изменилась и «безопасная» зона. Это происходит из-за того, что iPhone 6 Plus имеет больший размер и чтобы удобно держать его в одной руке, нам приходится придерживать его мизинцем. Удивительно, но именно так изменился опыт использования большого iPhone.

Нагромождение

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

Видите, iPhone 6 Plus, из-за большего размера, оказывается в более выгодном положении при таком раскладе, в то время как у iPhone 6 просто «заканчивается» экранное пространство.

Reachability

Нагромождения, описанного выше, можно избежать при использовании функции Reachability, которая доступна на iPhone 6 и iPhone 6 Plus. Двойной тап по кнопке Home (не нажатие, а просто прикосновение) активирует ее и экран сдвинется вниз к зоне досягаемости вашего пальца. Вот как это выглядит.

А вот как Reachability выглядит с наложенной на iPhone 6 Plus зоной большого пальца:

Обратили внимание? На демо Apple палец размещен четко в естественной зоне.

А вот еще один интересный момент, на который указывает Джон Грубер:

Reachability на iPhone 6 Plus сдвигает контент на экране ниже, чем на iPhone 6 (в процентном соотношении) — здесь все дело смещении верха экрана до высоты, которая доступна большому пальцу при обычном хвате.

Вот о чем идет речь.

Что все это значит?

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

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

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

via