Ошибки интерфейса пользователя

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

1. Сложная навигация

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

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

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

2. Обилие текста и недостаток визуала

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

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

1. Использовать один шрифт на сайте. В редких случаях допускается сочетание шрифтов, когда для оформления применяют не 1, а 2-3 шрифта.
2. Не увлекаться шрифтами с засечками. Если в заголовке есть засечки, то в самом тексте их быть не должно.
3. Разбивать текст на смысловые абзацы.
4. Использовать заголовки и подзаголовки для структурирования информации и облегчения восприятия.По
5. ещать текст в плашку для создания акцента.
6. Разбавлять текст фотографиями и видео.

3. Отсутствие хлебных крошек

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

4. Сложная форма регистрации

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

5. Хаотическое отображение главного экрана

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

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

6. Отсутствие оффера и УТП

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

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

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

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

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

7. Всплывающие окна

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

8. Незаполненные разделы

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

9. Контент из фотостоков

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

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

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

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

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

Коротко о главном

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

Алексей Копылов

Плохой дизайн
и к чему он приводит

Краткая история пользовательских интерфейсов

Изменения интерфейсов с течением времени

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

В 1968 году из недр лаборатории XEROX PARC вышел революционный на тот момент так называемый «оконный интерфейс». Вы можете оценить это событие, посмотрев видео «Прародитель всех демонстраций», в котором Дуг Эрнгельбарт представил следующие совершенно новые концепции: оконный интерфейс, мышь, гипертекст, телеконференции, текстовый редактор (текст в котором можно было редактировать группой пользователей!). Далее компании Apple и Microsoft скопировали основные идеи XEROX PARC (санкционировано и не совсем), усовершенствовали их и создали собственные коммерческие операционные оконные системы.

Относительно недавно по историческим меркам появились сенсорные интерфейсы, которые стали по-настоящему популярны после появления Apple iPhone.

Прямо сейчас активно развиваются голосовые интерфейсы, а 2021 год стал прорывным для VR/XR. Не за горами развитие нейроинтерфейсов, то есть прямое подсоединение машины к мозгу с помощью проводов или даже без них.

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

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

Я привёл эти примеры, чтобы обратить ваше внимание, что стоит использовать весь «репертуар» видов взаимодействия, если это уместно в вашем проекте.

Давайте посмотрим на очевидно плохие интерфейсы и последствия их использования.

1. Плохие интерфейсы сбивают с толку.
Посмотрите на сайт Федерации настольного тенниса Республики Башкортостан.

Что не так в дизайне этого сайта?

Каждая текстовая строка, каждый элемент дизайна «кричит» о себе, как на восточном базаре: «Прочитай меня! Нет, прочитай МЕНЯ!» Посетителю сайта непросто сфокусировать внимание на чём-то одном и начать читать, поскольку внимание автоматически переключается на соседние «кричащие» и «вопящие» строки и заголовки.

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

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

Если приглядеться к сайту Федерации настольного тенниса Республики Башкортостан, то можно заметить, что здесь явно нарушена визуальная иерархия, то есть, напрочь отсутствует сознательное управление вниманием пользователей.

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

Давайте рассмотрим ещё один пример плохого интерфейса на рисунке ниже.

Дизайн интерфейса «по просьбам пользователей»

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

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

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

2. Плохие интерфейсы бесят пользователей.
В качестве примера приведу один из первых мемов в интернете, когда офисный сотрудник при работе с ПК (очевидно, не разобравшись с интерфейсом какой-то из программ) сначала ударяет ПК по стенке ЭЛТ-монитора, потом нещадно совершает несколько ударов кулаком по клавиатуре и в завершении своего приступа ярости сметает со стола монитор ударом по нему клавиатурой. Я видел, как подобные вспышки ярости возникали у пользователей из-за того, что интерфейс не позволял выполнить их задачу.

Пример интерфейса, когда объект не используется по первоначальному его назначению

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

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

GPS наводчик тактических ракет PLGR

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

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

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

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

Могу предположить, что проектирование «Plugger» выглядело следующим образом. На проекте был отдельный промышленный дизайнер, который продумывал форму, чтобы устройство было удобно для ношения, имело возможность крепления к поясу и так далее. Однако, не было такого человека, который продумывал бы «сквозные» сценарии, то есть, которые касаются и формы устройства и пользовательского (программного) интерфейса. Такие, как в том случае, когда у наводчика PLGR сели батареи.

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

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

Алексей Копылов

Эксперт в сервисном дизайне

Содержание

1. Затянутое знакомство с продуктом
2. Использование непривычных для пользователя иконок и других условных обозначений
3. Слишком большой объем текста
4. Недостаточное количество текста для понимания
5. Проблемы с читаемостью текста
6. Некорректные тексты кнопок
7. Маленькие кнопки и другие кликабельные элементы
8. Яркие цвета, которые отвлекают внимание
9. Отсутствие контраста
10. Неинклюзивный интерфейс