Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

Особенности интерфейса широкоформатных тачскринов и их отличие от смартфонов

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

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

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

Широкоформатные сенсорные экраны: удобно ли это?

Дизайнерские рекомендации для тачскринов любого размера

Дороти Шамонски (Dorothy Shamonsky), ведущий UX-дизайнер компании ViewPoint, занимается разработкой софта для электронных киосков и работает над дизайном интерфейса тачскринов больших размеров, некоторые из которых в диагонали достигают целых 72 дюйма.

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

Вот некоторые общие нормы, которые необходимо соблюдать как при разработке ресурсов/приложений для экранов в 7-дюймов, так и для 70-дюймового тачскрина:

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

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

Нужен ли ноутбуку сенсорный экран?

Доступность и указатели на макроуровне

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

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

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

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

Дизайнерам следует избегать скопления элементов и придерживаться рекомендации Эдварда Тафти (Edward Tufte), соблюдая правильное соотношение контента и других элементов интерфейса. Проведенное Nielsen Norman Group исследование доказывает, что плотность информации на веб-страницах на 8% влияет на их восприятие пользователями.

Итак, как должен выглядеть широкоформатный сенсорный дисплей?

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

Оптимизация дизайна мобильных устройств: планшеты vs смартфоны

Сенсорные иконки и указатели на микроуровне

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

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

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

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

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

  • жестко закреплен;
  • его невозможно взять в руку;
  • часто его нельзя наклонить или повернуть;
  • он может быть прижат к стене.

На фотографии мы видим, как человек использует 2 пальца, чтобы перелистнуть изображение на 72-дюймовом тачскрине

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

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

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

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

Кроме того, необходимо учитывать фактор усталости. Несмотря на то, что большой экран имеет много преимуществ по сравнению с маленьким, при взаимодействии с ним пользователи могут уставать гораздо быстрее. Дело в том, что работая с большими сенсорными экранами, людям приходится задействовать все свое тело. В статье для Scientific American, Дэвид Пог (David Pogue) называет взаимодействие с тачскрином посредством вытянутой руки — «рука гориллы» (gorilla arm).

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

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

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

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

Каким был пользовательский опыт на первых в мире планшетах?

Приватность и совместное пользование экраном

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

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

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

Чтобы обеспечить приватность:

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

Пользовательский интерфейс: 6 советов увеличения конверсии

Преимущества широкоформатных сенсоров

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

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

 

Смартфон

Большой тачскрин

Очень большой тачскрин

Устройство

iPhone

Небольшой электронный киоск/Nabi Big Tab

Настенный дисплей

Размер (диагональ)

4,7 дюймов = 12 см

24 дюйма = 61 см

72 дюйма = 183 см

Легко ли его использовать сразу нескольким людям

Нет

Да

Да

Возможность случайных нажатий

Да, особенно большими пальцами. Можно избежать, увеличив размер элементов

Да, возможно случайное прикосновение двумя руками

Нет

Дополнительные физические действия, чтобы рассмотреть весь экран

Нет

Да, дистанция требует движения головой

Да, дистанция требует движения головой или всем телом (несколько шагов назад или вперед)

Проблемы приватности

Нет

Да

Да

17 ключевых трендов в веб-дизайне 2015 года

Вместо заключения

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

Чтобы сделать интерфейс интуитивно понятным, необходимо принять во внимание привычные для человека жесты и то, как их можно применить в данном контексте.

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

По материалам: nngroup.comimage source: Bruno.T71

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto