Дизайн интерфейсов в эпоху Больших Экранов

Несмотря на годы сопротивления, Apple наконец-то сдалась, и недавно представленный iPhone 6 теперь тоже может похвастаться (или «похвастаться») большим экраном. Всего лишь в течение прошедшего понедельника, 15 сентября, Apple продала более четырёх миллионов новых смартфонов по предзаказам ^[1]. Всего лишь за одну ночь они продали почти половину от общего количества iPhone 5s и 5c, проданных за первые выходные в прошлом году.

Всё говорит о том, что устройства с дисплеями 3,5-4 дюйма неизбежно и очень быстро уходят в прошлое. Согласно Adobe 2014 Mobile Benchmark Report ^[2] количество просмотров со смартфонов с 4-дюймовыми дисплеями снизилось на 11%.

А это означает, что разработчикам, привыкшим создавать приложения и веб-сайты под дисплеи этих форм-факторов, пора адаптироваться к новому мощному тренду.

Совершенно очевидно, что большой палец является главным органом управления смартфоном. И всё важнее становится адаптация веб-сайтов и интерфейсов приложений «под большой палец» на крупных экранах. Хорошо хоть, что разброс диагоналей большинства современных смартфонов в целом невелик, по беглой оценке ^[3] популярных Android-смартфонов диапазон составляет от 5,1 до 5,7 дюйма ^[4]. И если дизайнеры и разработчики в скором времени на адаптируют свои творения под более крупные экраны, то большим пальцам пользователей придётся несладко.

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

Дизайн «под большой палец»

Что это такое? Это означает, что интерфейсы адаптируются под наиболее комфортное, анатомически естественное использование большого пальца для управления и навигации. Но теперь это сделать сложнее. Мы неосознанно меняем хват смартфона, чтобы легче доставать до разных краёв экрана. Готов поспорить, что большинство владельцев устройств с крупными дисплеями в течение дня периодически испытывают трудности с дотягиванием до дальних уголков на экране, когда сжимают телефон покрепче или берут его в первый момент «не слишком удобно».

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

В частности, это подтверждается исследованием Стива Хубера ^[5] (Steve Hoober), который наблюдал за действиями 1 333 человек. Также он собрал следующую статистику, как люди держат смартфон:

• одной рукой — 49%
• двумя руками — 15%
• положив на что-то — 36%

При удерживании одной рукой:

• придерживая правым большим пальцем — 67%
• левым — 33%

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

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

Лучше всего проиллюстрировать комфортность использования большого пальца можно с помощью «тепловой» карты. Вводные данные:

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

А так выглядит «карта большого пальца» для двух последних iPhone:

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

Поменяем хват. Иногда бывают ситуации, когда удобнее взять смартфон «повыше», когда основание большого пальца упирается примерно посередине устройства:

Весьма красноречиво, не правда ли?

Досягаемость

Функция Reachability в iOS 8 позволяет избегать вышеописанного высокого хвата. По двойному тапу на домашней кнопке (не по нажатию, а тапу) массив иконок съезжает вниз, позволяя легко дотянуться до верхних рядов:

Вот как меняется «карта большого пальца» при использовании функции Reachability:

Причём эта функция действует несколько по разному на iPhone 6 и 6 Plus. На более крупном экране иконки опускаются ниже, чтобы пользователь не тянулся за ними:

Заключение

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

«Карты большого пальца» можно скачать по этой ссылке: http://bit.ly/1p1SAGl ^[6]

Автор: Fyodorov2000

Источник ^[7]