Лого vc.ru

10 рекомендаций по проектированию тач-интерфейсов от создателя первой мобильной версии Google

10 рекомендаций по проектированию тач-интерфейсов от создателя первой мобильной версии Google

Автор книги «O'Reilly book designing mobile interfaces», проектировщик мобильных интерфейсов, создатель первой мобильной версии поиска Google Стивен Хубер (Steven Hoober) составил 10 рекомендаций по проектированию интерфейсов для сенсорных экранов.

В рубрике «Интерфейсы» — перевод заметки.

Поделиться

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

Зачастую мы принимаем решения на основании личного опыта, субъективного мнения, наших склонностей, а также на основании того, что мы где-то когда-то услышали. Во главу угла мы ставим собственные предпочтения. Мы не учитываем то, что по душе пользователям, и то, как они работают с устройством, если это противоречит нашей точке зрения. Я встречал много дизайнеров, которые считали, и часто безосновательно, что разрабатывать дизайн стоит только для пользователей iPhone.

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

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

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

1. Ваши пользователи — не вы

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

2. Пользователи предпочитают взаимодействовать с контентом, находящимся в центре экрана

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

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

3. Людям нравится просматривать содержимое в центре экрана

То же можно сказать про просмотр содержимого: перед тем, как прочитать что-то, пользователь сначала перетащит содержимое в центр.

Следуйте классическому методу отображения списков, размещая основное содержимое и интерактивные элементы по центру. Добавьте отступы, чтобы сдвинуть содержимое к центру, а второстепенные элементы: строку меню, строку состояния и иконки — расположите по верхнему и нижнему краям.

4. Пальцы мешают пользователю просматривать содержимое

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

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

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

5. Разные устройства используются по-разному

Вы должны учитывать, что все люди используют устройства по-своему. Большие планшеты вроде 10-дюймовых iPad используются практически в качестве заменителей компьютеров, около 2/3 времени на подставке и четверть времени с внешней клавиатурой.

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

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

6. Нажатие не может быть точным

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

Телефон не может определить размер вашего пальца, силу нажатия, величину области контакта с экраном, в какую сторону направлен палец и прочее. Всё, что он может определить — это точку, которая назначается координатами нажатия. И эта точка никогда не может идеально точно соотноситься с целью нажатия. Пример исследования точности нажатия представлен на рисунке:

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

Если вы проведете некоторые исследования, то увидите, что это лучшая практика. Выпадающее меню или иконка стрелки «назад» у Google (по крайней мере так было до версии 5.0) на самом деле не такие мелкие как кажутся, и эти элементы активируются при нажатии как на саму иконку, так и на область вокруг нее. Во многих гибридных приложениях и веб-сайтах это не учитывается и интерактивные элементы проектируются неправильно, из-за чего, например, иконка «гамбургер» считается слишком мелкой.

7. Нажатия неравномерны

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

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

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

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

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

8. Люди нажимают только элементы, находящиеся в поле их зрения

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

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

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

9. Телефоны не плоские

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

По словам Робина Кристоферсона (Robin Christopherson), любой человек может быть временно ограничен в возможностях. Приняв во внимание это утверждение при разработке интерфейса, вы гарантированно обеспечите его работу в любой ситуации и для каждого пользователя. При работе с устройством нам может мешать шум, яркий свет, дождь. Бывает и так, что мы не можем взаимодействовать с устройством. Случается также, что мы отвлекаемся. В таких ситуациях ненавязчивые подсказки и диалоговые окна могут не сработать, поэтому убедитесь в том, что индикаторы и отклики на пользовательский ввод воздействуют на более, чем один канал восприятия.

10. Работайте в реальных масштабах

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

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

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

Проектируйте дизайн для людей

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Хорошая статья. Вещи, в общем-то, известные. Но написано (и/или переведено) очень по-человечески.

Спасибо за такие новости.

0

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Τамара Ρодионова

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

Креативный директор «Афиши» сообщил о закрытии журнала
0
Artem Prokopenko

Хорошая история, только почему bankir, с доменом com должно быть banker) однако не понятно, в чем ценность для работников. Проф сообществ полно, но они микроскопические

Основатель «Банки.ру» Филипп Ильин-Адаев объявил о запуске социальной сети для банкиров — Bankir.com
0
Михаил Коренев

И что? А в офис к работодателю можно ходить, когда настроение хорошее?) и уходить, когда вдруг захотелось?

Штаб-квартира: Гамбургский офис сервиса для отзывов Yelp
0
Georgy Bukov

P.s. Не только военных, ведь там завязаны и химическая промышленность, машиностроение и т.д. И частенько компании с государством не разлей вода.

«Через 50 лет стран не будет — останутся только города»: основные тезисы лекции Кьелла Нордстрема о будущем
0
Рашид Галиулин

Ну натырились квартирами в 2014 на панике, с тех пор они упали в цене на 10%. А можно было купить акции и получить доходность выше 50% годовых в течение двух лет или в банке за два года примерно 30%. Ну выростит цена на квартиру в течение пару лет на 20%, доход от возможной аренды за два года 10%, в итоге возможный доход 31—32% в течение пару лет. Так пока пройдут эти два года на депозите с учетом сложных процентов свыше 45% и при этом не надо париться. А вдруг квартиросъемщики зальют соседей?

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Показать еще