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

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

Мы провели немало звонков после установки, где первым вопросом клиента был вариант «почему никто этим не пользуется?» И в девяти случаях из десяти аппаратное обеспечение в порядке. Экран достаточно яркий, отклик на касание достаточно быстрый, высота установки правильная. Проблема почти всегда одна и та же: меню строилось на основе того, что кто-то в офисе думает о каталоге продукции, а не на том, что на самом деле думает человек, стоящий в вестибюле или выставочном зале.

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

Начните с задачи, а не меню

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

Посетители не думают кодами SKU. Они думают: «Я ищу маленькую синюю», или «где вещь, которая продавалась», или «есть ли на этом этаже ванная». Если первое нажатие на экран не говорит на этом языке, люди либо сразу сдаются, либо начинают наугад стучать, что, как бы то ни было, имеет тенденцию выглядеть так, как будто экран сломан, даже если это не так.

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

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

Один экран, разные пути пользователя

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

Розничные витрины

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

Справочники зданий и посетителей

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

Экраны образования и обучения

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

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

Быстрый способ учесть эти различия перед проверкой дизайна:

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

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

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

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

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

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

Где контент-планы обычно идут не так

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

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

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

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

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

Что отображается на первом экране, а что нет

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

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

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

Сенсорным мишеням нужно пространство для дыхания

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

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

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

Изменение размера экрана. Что может сделать контент

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

FVASEE производит настенные сенсорные дисплеи размером 42 и 43 дюйма, 49 и 50 дюймов, 55 дюймов и 65 дюймов, при этом доступны конфигурации как Android, так и Windows, в зависимости от того, что необходимо для запуска проекта. Панели меньшего размера, как правило, зарабатывают себе на жизнь с помощью целенаправленного, однонаправленного интерфейса, построенного вокруг одной линейки продуктов, одного каталога или одной четкой задачи, и ничто другое не конкурирует за место. На больших панелях есть физическое пространство для поддержки группового просмотра или более широкого набора категорий, при этом все не кажется упакованным, хотя это дополнительное пространство легко потерять, если контент-план никогда не был разработан для того, чтобы оно действительно требовалось.

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

Переход от первого черновика к работающему интерфейсу

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

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