Наука о касании — часть вторая Статьи редакции

Продолжение руководства по функциональному дизайну мобильных устройств.

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

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

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

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

Наблюдая за людьми, я удивляюсь разнообразию способов взаимодействия с телефонами и естественности их смены.

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

• Создавайте дизайн для каждого пользователя — то есть для телефонов любых типов и размеров.
• Учитывайте все варианты взаимодействия с устройством.
• Откажитесь от предрассудков. Не надейтесь, что пользователи будут взаимодействовать со своим телефоном так же, как вы со своим.

Вне зависимости от типа сенсорного устройства люди предпочитают нажимать в центр экрана.

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

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

Именно поэтому дизайн в виде списков столь эффективен, а Material Design от Google, в котором функциональные клавиши располагаются по краям экрана, — это хорошее дизайнерское решение.

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

Центрирование пользовательского внимания распространяется и на взгляд. Люди обычно гораздо быстрее замечают контент, расположенный в центре экрана, и считывают его более внимательно.

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

Если вы не сделаете этого, пользователи всё равно попытаются перетащить контент ближе к центру экрана. Они потратят на это время, разочаруются и будут чуть менее удовлетворены продуктом. Не стоит следовать трендам и создавать страницы, которые сменялись бы свайпом. Очевидно, что так читать неудобно.

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

В первой части я много писал о том, что размер пальцев не имеет значения. Это так, но применительно лишь к точности касаний и размеру клавиш. Однако пальцы непрозрачны, поэтому часто оказываются помехой. Во время нажатия пальцы — неважно, указательные или большие — полностью перекрывают маленькие иконки вроде клавиши «Ретвитнуть» в Twitter.

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

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

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

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

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

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

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

Фрагментация устройств — это нормально. Уважайте выбор пользователей. Людям нужны все виды устройств. Разнообразны и типы пользовательского взаимодействия. Мы привыкли к образу человека, даже при ходьбе держащего смартфон примерно в 30 сантиметрах от глаз. Однако чем больше устройство, тем дальше от глаз его держат.

Люди чаще используют большие устройства сидя. В двух случаях из трех пользователи ставят планшет на подставку, кладут его на стол или на колени.

Чем меньше устройство, тем больше людей пользуются им на ходу. Однако «на ходу» — это не только в автобусе, в поезде или при движении пешком. Зачастую это означает использование дома или в офисе, стоя на ногах. «На ходу» — это скорее «мимоходом». Люди могут пользоваться устройствами одновременно с другими занятиями, не останавливаясь, чтобы поработать на планшете или набрать текст на клавиатуре компьютера.

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

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

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

#Интерфейсы