Что собой представляют главные принципы Usability? На этот и многие другие вопросы вы найдёте ответы в статье. Принципами «Юзабилити» называют общепринятые взгляды на взаимодействие с дизайном, которые ввёл Нельсен Якоб (основоположник «Юзабилити»). Эти воззрения, скорее, являются набором правил, а не жёсткими руководствами, поэтому их именуют «Эвристиками». Всего таких принципов существует десять.
Видимость статуса
Первый принцип Usability - видимость статуса системы. Эта позиция говорит о том, что пользователь должен знать, где он остановился и что происходит. Если это сложная регистрация, нужно указывать, что это второй шаг или третий.
Эффективность
Следующий принцип Usability - эффективность. Фактически он означает, что между каждым пользователем и системой должна быть связь. Ваш сайт должен быть настроен под определённую аудиторию, вам нужно разговаривать с ней на её языке, применяя её уровень подготовленности и обозначения. Поэтому веб-узел всегда необходимо разрабатывать для своей публики. Это касается не только структуры, но и текстов, дизайна, помощи, визуального восприятия информации и так далее.
Свободный выбор
Что собой представляет третий принцип Usability? пользовательское управление, которое необходимо, чтобы клиент всегда мог контролировать ситуацию. К примеру, если человек заполняет форму, он всегда должен видеть кнопку «очистить форму». А если в ней несколько шагов предусмотрено? Пользователь должен всегда иметь возможность вернуться к предыдущим пунктам или пропустить какой-нибудь из них, чтобы немного позже повторить действие.
Благодаря такой ситуации у пользователя появится впечатление, что всем управляет именно он, что его не пытаются запутать или обмануть. И мудрёный на первый взгляд интерфейс при верном подходе станет обыкновенным. Ведь человеку гораздо проще выполнить несколько простых действий, чем одно сложное.
Стандарты
Четвёртый принцип Usability - последовательность и стандарты. В Сети уже существуют определённые устоявшиеся стереотипы (контакты в верхнем углу, вид корзины и так далее). Тем не менее одно обозначение может иметь несколько видов, поэтому неопытный пользователь среди них может запросто заблудиться. К примеру, электронные корзины идентичны тележкам, обычным корзинам, ультрамодным пакетикам и прочему. А для появления последовательности необходимо выбрать какой-нибудь определённый стиль, который нужно соблюдать везде. Это касается и вёрстки, и шрифтов, и текста, и картинок.
Профилактика ошибок
Пятый принцип Usability - профилактика ошибок. Это правило гласит, что ошибку нужно не исправлять, а предупреждать. Всегда нужно ликвидировать случайные, ненужные действия и везде, где можно, упрощать выбор. Это может быть обычная подсказка при вводе с клавиатуры чего-либо.
Это касается и кнопок. К примеру, предложение «Принять» обычно делают ярче и крупнее, чем просьбу «Очистить форму». Вы должны подсказывать известные вам сведения о вводимой информации (код региона, формат телефона и так далее).
Упрощение
Шестым принципом является правило «Выяснить проще, чем вспомнить». Упрощайте жизнь пользователям максимально, запоминайте ранее вводимые ими сведения (даже с их прошлых посещений сайта), делайте им подсказки. К примеру, если вы используете многошаговую систему регистрации, показывайте человеку уже заполненные поля, если они пригодятся ему в будущем.
Гибкость
Седьмой принцип Usability - гибкость использования. Согласно этому правилу интерфейс должен быть эластичным, он обязан настраиваться на преобладающую аудиторию. Здесь базовый упор делается на простоту с учетом обычного пользователя. Детали для продвинутых должны быть небольшими. Их можно расположить в менее заметных частях экрана, так как такие люди их везде найдут.
Дизайн
Принцип дизайна Usability восьмой по счёту. Он заключается в эстетике и минимализме. Согласно этому правилу в интерфейсе должна отсутствовать информация, которая пользователю не нужна. Также не должны в нём находиться и те сведения, которые человеку понадобятся в редких случаях.
Аналогично нужно создавать формы: нельзя спрашивать у пользователя данные, которые вам не нужны. К сожалению, этой позицией почти никто не пользуется. Для того чтобы лишь поздравить с именинами или Новым годом, у клиентов в 90% случаев требуют предоставить и дату дня рождения, и домашний номер телефона, и мобильный, e-mail и даже адрес.
Помощь
Главные принципы Usability должен знать каждый веб-мастер. Девятым воззрением этой научно-прикладной дисциплины является оказание помощи пользователям в понимании и исправлении ошибок. Обо всех промахах людям нужно сообщать обычным, «человеческим» языком, а не компьютерным. Если неверно создана ссылка, не нужно писать просто 404. Сообщите так: «При вводе страницы произошла ошибка». Если, заполняя форму, пользователь запамятовал указать свой номер телефона, напишите, что имеется погрешность при вводе данных, а не просто «ошибка форма».
Поддержка
Почему главные принципы Usability так важны? Давайте рассмотри десятый принцип, который называется «Документация и помощь». Материалы и поддержка должны быть простыми и понятными, легкодоступными, соответствовать целям пользователя. Вдобавок документация не должна быть объёмной. Необходимо, чтобы она содержала чёткие шаги. Если материалы слишком большие, можно сделать краткую навигацию для быстрого перехода по разделам, а также поиск по поддержке.
«Юзабилити»
Итак, мы рассмотрели главные принципы Usability. Но что же это за дисциплина? «Юзабилити» является мерой качества пользовательского опыта, полученного при взаимодействии с системой или продуктом. К примеру, это может быть программное приложение, веб-сайт или что-нибудь иное.
Специалисты User Interfase Engineering определили, что в 60% случаях люди не могут разыскать необходимые им сведения в вебе. В итоге у них снижается производительность труда. Они не желают больше возвращаться на сайт, из-за которого вынуждены терять драгоценное время.
Известно также, что Forrester Research получил некоторые цифры, которые показывают суммы убытков, появившихся из-за некачественного «юзабилити» сайтов. Сетевые магазины теряют около 50% клиентов, которые не могут найти необходимый продукт. Примерно 40% пользователей не желают возвращаться на сайт, с которым им не понравилось работать.
Якоб Нельсен утверждает, что исследование поведения людей в вебе показало, что они отвратительно воспринимают веб-узлы со сложным дизайном и медленные сайты. Он говорит, что пользователи не желают ждать. Им также не хочется выяснять, как пользоваться домашней страницей. Нигде нет инструкций по сайтам или обучения веб-проектам. Якоб знает, что люди хотят бегло просканировать страницы и моментально понять функциональность веб-узла.
Создание
Что такое разработка Usability? Принцип её заключается в методологическом подходе к созданию сайта или любого иного пользовательского интерфейса. Такая разработка состоит из нескольких методов, которые в процессе используются последовательно:
- сбор требований;
- создание и анализ прототипов;
- оценка противоположных вариантов дизайна;
- изучение вопросов пользователей;
- предложение решений и анализ сайта (либо любого иного интерфейса).
Тестирование
А что такое тестирование Usability? Принцип этого нюанса не каждый знает. Вообще, он является частью процесса создания «Юзабилити». В типичном тесте человеку необходимо выполнить несколько задач с помощью прототипа (или иной системы). Во время работы наблюдатель записывает, что говорит и делает пользователь. Как правило, такой тест проводится с одним или двумя людьми, действующими совместно.
Анализ может собирать такие данные, как ошибки, которые делают пользователи, последовательность действий человека для достижения цели, время и место возникновения трудностей у аудитории, насколько нравится продукт людям, и их скорость выполнения задач. Большинство тестов используются для выявления и решения любых проблем, появляющихся у публики.
Шаги дисциплины
Из каких шагов состоит «Юзабилити»? Для планировки веб-сайта сначала нужно понять, для чего вы его разрабатываете, для кого, зачем и когда ваши читатели будут посещать ваш ресурс. Если вы ответите на эти вопросы, то выявите назначение своего сайта. Определённые цели зависят от аудитории веб-узла и вашей организации.
Кроме того, вы должны определить задачи сайта «Юзабилити». В соответствии с общими целями ваш ресурс должен быть эффективен в применении, прост в обучении, лёгок для запоминания при повторных посещениях. А ещё нужно, чтобы он удовлетворял пользователя.
Каждая цель «Юзабилити» важна для большинства веб-узлов, но вы можете выделить и иные для разных аудиторий и ситуаций. Известно, что дизайн базируется на потребностях людей, поэтому нужно собирать сведения не только о них, но и о том, в какой мере существующий сайт их удовлетворяет. Есть несколько приёмов сбора данных, которые включают логи сервера, формы обратной связи, тестирование «Юзабилити» существующего веб-узла.
Для людей проще взаимодействовать с реальным примером, чем рассуждать, что же лучше всего будет работать. Полезные результаты всегда можно получить с помощью прототипа сайта, который имеет минимум контента и лишён графики. Такой элементарный прототип годится для первого цикла тестов.
Контент размещать следует лишь тот, который необходим пользователям сайта. Если вы располагаете горой сведений, выберите из них те, которые будут полезны и приятны вашей аудитории. Вся информация должна быть разбита на маленькие кусочки с подзаголовками, так как люди хотят быстро прочесть то, что их интересует. Из текста нужно удалить необязательные слова, использовать таблицы и списки.
Далее осуществляется интерактивный процесс - тестирование «Юзабилити», о котором мы писали выше. Иногда нужно интерфейс, уже спроектированный в соответствии со всеми правилами, протестировать. Кстати, фокус-группы являются самым доступным способом для анализа «своими силами».
Составляющие
Итак, используя правила и принцип Usability, вы сможете создать ресурс, которым будете гордиться. Наличие этого удивительного предмета является качественным признаком, который определяет, в какой мере лёгок в применении. Слово «юзабилити» также означает коллекцию методов, улучшающих сайт в процессе его создания.
У «Юзабилити» имеется пять количественных составляющих:
- Эффективность: после ознакомления пользователей с дизайном, как быстро они выполнят то же задание?
- Обучаемость: насколько легко люди могут реализовать базовые задачи, впервые используя незнакомый им интерфейс?
- Ошибки: сколько погрешностей делает человек, насколько они серьёзны, легко ли он может их исправить?
- Запоминаемость: если пользователь вернулся к интерфейсу через определённый период времени, удастся ли ему восстановить свои навыки работы с ним?
- Удовлетворённость: до какой степени человеку приятно пользоваться данным интерфейсом?
Кроме «Юзабилити», существует ещё множество иных важных качественных признаков дизайна. Одним из ключевых является полезность. Этот признак описывает функциональность технического решения и определяет полезность интерфейса пользователям. «Юзабилити» и практичность одинаково важны: зачем пользоваться удобной программой, если она даёт не тот результат, который вам необходим? Плохой считается и та программа, которая гипотетически работает так, как вам нужно, но вам не нравится её сложный интерфейс. Для анализа полезности проекта можно пользоваться теми же средствами, что и при изучении качества его «Юзабилити».
В Web-e «Юзабилити» считается необходимым условием выживания. Если с сайтом сложно работать, посетители с него очень быстро уходят. Если на главной странице веб-узла ясно и чётко не указано, чем занимается предприятие, какие задачи ресурс позволяет выполнить, пользователи будут искать другой веб-узел. Люди уйдут также, если сайт запутан, информация на нём трудна для понимания и не отвечает на их ключевые вопросы.
Не существует таких посетителей, которые на освоение интерфейса сайта тратят своё время или внимательно изучают инструкции по работе с ним. В Web-e много других ресурсов, поэтому если посетитель наткнулся на трудность, вы его потеряете.
В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?
Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории
предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.
Для самостоятельной разработки интерфейса нужно учитывать несколько простых правил:
- Правило 7-ми.
Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
С этой точки зрения сайт tutu.ru , безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
В то время как сайт Российских Железных дорог - отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить. - Правило 2х секунд.
Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru . - Правило 3х кликов.
Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами. - Правило Фиттса
Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее. - Перевернутая пирамида
Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.
Тестирование состоит из четырех этапов:
- Подбор фокус-группы. Тестировщики должны соответствовать вашей целевой аудитории. Не стоит просить бабушку протестировать приложение для поиска обновлений драйверов.
- Составление плана тестирования – списка задач, для выполнения которых разработан ваш продукт. Именно этому списку будут следовать тестировщики. Если вы делаете интернет-магазин, в список должны быть включены такие задачи как поиск товара, получение информации о товаре, путь от получения информации о товаре к его заказу, удаление товара из корзины.
- Выполнение тестировщиками списка задач и фиксирование ошибок. Ошибкой можно считать все что угодно: слишком сложная капча, отсутствие сообщения от сервера о том, что «товар добавлен в корзину», невозможность изменить количество товаров в корзине или отменить действие, и т.д.
- После выявления и исправления ошибок цикл тестировки нужно пройти заново. Цикл должен повторяться до тех пор, пока результаты не будут удовлетворять необходимым требованиям.
Как правило, достаточно 5 тестировщиков для выявления основных багов.
Пример по теме
Напоследок разберем типичные ошибки на примере сайта известного исполнителя Влада Топалова . Предположим, мы хотим договориться о выступлении с его менеджментом и хотим найти на сайте их контакты. И вот тут начинается квест!Первое, что мы видим на сайте, это черную заставку со ссылкой «enter» и предложением обновить флеш-плеер.
Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».
Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.
Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!
Теперь о цифрах. Время ожидания отклика в зависимости от скорости соединения может разниться, но в любом случае это будет больше 2х секунд. А путь до страницы контактов менеджмента занял 7 кликов. А мог бы занять всего один.
Влад Топалов, конечно, может позволить себе такие «креативные» решения. Но очевидно, что такие решения просто губительны для бизнеса.
Совсем недавно мы рассказывали о том, каким будет новый Печкин-mail . Переход на новый движок, который произойдет уже совсем скоро, затрагивает и улучшения пользовательского опыта.
Аарон Уолтер, директор по UX в сервисе email-рассылок MailChimp, однажды сформулировал ключевой принцип его команды:
«Наша цель – сделать ПО функциональным, надежным и готовым к использованию, чтобы люди могли решать с его помощью свои задачи. Но мы считаем, что разработка ПО, которое просто готово к использованию – все равно, что приготовление шеф-поваром еды, которая «просто съедобна». Чтобы привлечь людей, надо выйти за рамки базовой практичности. Мы хотим, чтобы вещи, с которыми мы взаимодействуем, пробуждали в нас эмоции».
Сегодня мы поговорим о предназначении UX, его целях и задачах, а также расскажем о том, как выйти за вышеупомянутые «рамки» и какими качествами и навыками нужно обладать проектировщику интерфейсов.
Так что же такое UX и юзабилити
Официальное определение UX (User eXperience) звучит следующим образом:«Восприятие, возникающие у человека при использовании и/или предполагаемом использовании продукта, системы или при получении услуги» (ISO 9241-210:2010, подраздел 2.15).
Русскоязычным аналогом User eXperience является выражение «пользовательский опыт». Своим появлением и дальнейшему распространению словосочетание «пользовательский опыт» обязано Дональду Норману, который на момент введения термина (1995 г.) занимал пост вице-президента разработки перспективных технологий в Apple:
«Я «изобрел» этот термин поскольку считал, что «интерфейс для человека» (human Interface) и «юзабилити» были слишком узкоспециальными. Я хотел задействовать все аспекты пользовательского опыта взаимодействия с системой, в частности промышленный дизайн продукта, его графику, интерфейс и аспекты физического контакта с устройством».
Считается, что «положительный пользовательский опыт» – это результат адекватного сочетания 5 нижеприведенных основополагающих принципов «идеального» UX, где центральным пунктом является «юзабилити»:
- Физиология: Что мотивирует пользователя?
- Юзабилити: Что доставляет пользователю неудобства?
- Дизайн: О дизайне необходимо задуматься до стадии внедрения его в рабочий процесс, чтобы у пользователя не возникало чувство сомнения и/или недоверия относительно надежности вашей компании и ее продукции.
- Контент: Ясность подачи информации здесь играет первостепенную роль. Люди действительно читают тексты на сайте, в приложении или письме, и их написание надо рассматривать как часть процесса проектирования [интерфейса].
- Аналитика: О чем нам должен сказать процент отказов и другие показатели?
Проектирование интерфейса и проектирование UX: где связь
Рассмотрим основополагающие методы работы над проектированием пользовательского интерфейса:- Изучение устройств: в чем заключаются сильные и слабые стороны конкретных устройств, и какое влияние это оказывает на ваш продукт? Например, пользовательский опыт от работы на устройстве с touch-интерфейсом и на традиционном устройстве с монитором будет принципиально различным.
- Создание персонажей: как выглядит ваш среднестатистический пользователь? Как эта информация может повлиять на ваш продукт?
- Проектирование паттернов [поведения]: как (к примеру) чаще всего происходит процедура чекаута в электронных магазинах?
Но как проектирование интерфейса связано с проектированием UX? К примеру, википедия определяет проектирование UX как:
«Процесс повышения уровня удовлетворенности пользователя от взаимодействия с продуктом за счет повышения его удобства, простоты использования и доступности».
Ключевая задача проектирования UX заключается в том, чтобы сделать пользовательский опыт настолько успешным, насколько это возможно, исходя из того, что разработчик UX по большому счету обязан взаимодействовать с создаваемым им продуктом, ПО или иным объектом в первую очередь как пользователь.
«UX – не то, что можно просто внедрить, это – основа базовой системы ценностей», – говорит Уолтер.
Проектирование UX – это деятельность, направленная в первую очередь на людей, а значит, ключевое умение проектировщика UX – это способность понимать потребности и поведение пользователей сайта, приложения или продукта. Он должен стремиться к тому, чтобы эти потребности и желания соответствовали бизнес-целям компании, на которую он работает.
Однако конечной целью проектирования UX является не только удовлетворение запросов пользователя, но и помощь продукту в достижении поставленных бизнес-целей. Одной из сложнейших задач, возникающих в ходе работы над UX, является соотнесение целей бизнеса с целями пользователя.
Рассуждая о проектировании UX и проектировании интерфейса, следует провести едва различимую, но по своей сути значимую черту: проектирование UX возможно без дизайна интерфейса, но проектирование интерфейса неосуществимо без понимания итогового пользовательского опыта.
Профессия UX-проектировщика
Итак, первое, о чём думает проектировщик UX [для простоты здесь и далее будем считать термины «проектировщик UX» и «юзабилист» синонимами] – как объединить цели пользователя с целями бизнеса. Например, если целью пользователя является покупка продукта, то компания должна сделать эту покупку полезной, удобной и приятной.- Полезной: Вам нужно удовлетворить потребность клиента, т.е решить его проблему.
- Удобной: Высокий уровень юзабилити должен быть очевиден, чтобы клиенты понимали сферу применения вашего продукта или использования услуги.
- Приятной: Не лишним будет, если покупка вашего продукта доставит клиенту радость.
- Эмпатия – способность понимать, почему люди поступают тем или иным образом. Для того, чтобы заниматься проектированием UX, нужно уметь ставить себя на место других людей. Вероятно, это наиболее важное качество для работы в этой области, и вам необходимо научиться понимать поступки других людей. Вопреки расхожему мнению, этой способностью не каждый обладает от природы.
- Любознательность – желание узнать, почему люди поступают тем или иным образом.
- Ясность выражения – способность объяснить сложные понятия в доступной форме для тех, кто не знаком или мало знаком с данной областью.
На сегодня все. В следующих сериях мы подробнее рассмотрим суть работы проектировщика.
P.S. Парочка материалов из нашего блога:
Идентифицировать конверсионную цель посетителей и способствовать ее достижению через интеракцию с веб-интерфейсом — не суть важно, на автономном лидогенерирующем лендинг пейдж, товарной целевой странице интернет-магазина или полноценном SaaS-решении — вот основная цель маркетологов и веб-дизайнеров, разрабатывающих и размещающих в Глобальной сети свои продукты и услуги.
Существуют различные элементы информационной архитектуры, которые влияют на удобство использования, т.е. (usability), целесообразность (desirability) и надежность (reliability) ресурса. Чаще всего из подобных параметров (понятий) на слуху бывают «пользовательский интерфейс» (User interface, UI) и «пользовательский опыт» (User eXperience, UX).
Эти 2 фактора, относящиеся к любому веб-ресурсу, отнюдь не равнозначны. Миф о том, что «UI = UX», вводит в заблуждение обе стороны цифровой интеракции: как посетителей лендингов и сайтов, так и маркетологов и интернет-предпринимателей
В этом посте мы раскроем еще один секрет юзабилити эффективного интернет-маркетинга.
Дизайнер UI и дизайнер UX — это две разные профессии
Соискатели вакансий и действующие профессионалы в сфере веб-дизайна во всем мире сталкиваются с множеством проблем, порожденных широким распространением вышеупомянутого мифа.
Дизайнер пользовательских интерфейсов должен уметь проводить пользовательские исследования (user research) и, само собой разумеется, знать принципы проектирования пользовательского интерфейса, визуального дизайна и типографики, а также основ информационной архитектуры (information architecture).
Похожие требования — графический дизайн, информационная архитектура — предъявляются к дизайнерам UX. Дизайн интерфейсов, безусловно, связан с пользовательским опытом, и существует пересечение профессиональных навыков, но вот что нужно четко уяснить и твердо запомнить:
Умение проектировать пользовательские интерфейсы не решает всех проблем UX.
Теперь, когда мы уяснили разницу между UI и UX, можем сделать вывод, что разумнее всего стремиться к созданию полноценного положительного пользовательского опыта, нежели только к разработке красивого веб-интерфейса. Хорошее внешнее оформление не решает проблемы конверсии (хотя и безусловно важно): маркетологи и веб-дизайнеры должны стремиться сделать опыт интеракции с их лендингом/сайтом как можно менее психологически травмирующим для пользователя.
Именно такой подход приближает нас к решению конверсионной задачи.
UX-дизайнер, скрывающийся под псевдонимом Useagility, недавно опубликовал твит, провозглашающий неопровержимую истину:
«Ваш веб-ресурс может быть очень красивым, но посетители быстро покинут его, если они не в состоянии понять, какова цель конверсии и как на нем ориентироваться».
Легкая навигация по контенту, четко выраженная цель конверсии, ясно указанная пользовательская ценность оффера — вот неотъемлемые элементы хорошего UX. Интерфейс сайта нужно разрабатывать с учетом этого факта.
По всему интернету во множестве разбросаны примеры цифровых веб-продуктов с хорошим UI и плохим UX. Наиболее распространенные из них — длинные лид-формы с множеством полей для заполнения. Да, некоторые из них выглядят очень хорошо: грамотная компоновка полей и надписей, красивое использование пробелов, эстетически безукоризненные шрифты и т. д. У них только один недостаток — они раздражающе длинные.
Правый вариант лид-формы способствует формированию позитивного UX
Когда маркетолог просит пользователя заполнить форму, он на самом деле начинает диалог с потенциальным лидом или даже клиентом. Взглянем суровой правде в глаза: когда в реальной жизни мы начинаем разговор с незнакомым человеком в первый раз, мы не просим его предоставить нам его персональные данные, как-то: полученное образование, уровень доходов или домашний адрес. Так просто не бывает.
Так почему мы — маркетологи и веб-дизайнеры, как и все человеческие существа, способные к эмпатии, — порой причиняем пользователю психологический дискомфорт, связанный с заполнением длинных регистрационных форм?
А ведь легко создать у посетителя положительный UX: оставляем самые необходимые поля, группируем их поблизости от заголовка формы, визуально уменьшая ее, и в результате меняем поведенческую реакцию с «О, боже! Какая огромная форма!» на «Так, сначала мое имя, затем — email, все просто». Простота — одно из главных правил проектирования пользовательского интерфейса.
Как ни странно, но веб-дизайнерам, кропотливо подбирающим шрифты и цвета для лид-формы, почему-то в голову не приходит максимально упростить жизнь пользователя, даже в ущерб красоте UI.
Вот наглядный пример знакомого всем устройства, создающего положительный пользовательский опыт при не самом великолепном UI. Не удивляйтесь, речь идет о… банкоматах.
Взаимодействие пользователей с ними предельно просто и в значительной степени сходно для любого географического пункта земного шара: вы вставляете банковскую карту, вводите пин-код, выбираете задачу (своего рода цель конверсии), положим, снятие наличных, выполняете задачу (получает наличные), извлекаете карту и уходите, довольный: в целом вы получили положительный UX. Проектирование интерфейса и дизайна банкомата представляется странной задачей: кто обращал на него внимание? Он функциональный, он позволяет выполнять желаемые интеракции, и пользователям дела нет до его красоты.
А когда речь заходит о дизайне UI банкомата, кто обращал на него внимание? Он функциональный, он позволяет выполнять желаемые интеракции, и пользователям дела нет до его красоты.
Теперь сделаем очень важное утверждение:
Веб-ресурс, обладающий хорошим UX и плохим пользовательским интерфейсом, всегда превосходит с маркетинговой точки зрения цифровой продукт с великолепным UI, но «награждающий» пользователя отрицательным опытом интеракции.
Рассмотрим несколько примеров, иллюстрирующих тот факт, что плохой пользовательский интерфейс позволяет получать положительный опыт взаимодействия с веб-ресурсом, и наоборот: роскошный дизайн UI интерфейсов может порождать чувство разочарования при выполнении конверсионной задачи.
UX Matters: плохой UI и хороший UX
Как ни странно, некоторые ресурсы, предоставляющие ценную информацию о проектировании интерфейсов UX, UI, обладают чуть ли не худшими интерфейсами, что мы когда-либо видели. Эти сайты не следуют актуальным трендам в разработке и создают впечатление, что их нисколько не коснулись все новейшие тенденции веб-дизайна. Они не радуют глаз: судя по всему, они прочно застряли в «Средневековье интернета».
Однако может ли посетитель легко найти то, что он ищет на этом сайте? Понятна ли навигация по веб-ресурсу? Полезен ли он в качестве источника ценного контента?
Ответ на все вопросы: да.
Пример из мобильного мира — интерфейс Emotion UI, оболочка для Android, разработанная Huawei. Он минималистичен, и основными принципами, которыми руководствовались его разработчики, были плоскость и простота.
Если любопытствующий дилетант (не маркетолог, не дизайнер) хочет воочию увидеть, что такое «Плохой UI, хороший UX», то ему нужно заглянут на веб-сайт банка. Почти любого банка. Веб-программисты и дизайнеры, разрабатывавшие эти веб-интерфейсы, похоже, не знали о существовании каскадных таблиц стилей (CSS, Cascading Style Sheets).
Рассмотрим UI сайта Bank Of India. Страницы неряшливо сверстаны, кнопки выполнены в виде графических элементов (а значит, поисковые роботы их не индексируют), попираются все базовые принципы типографики (даже после того, как Google подарил дизайнерам свои Google Fonts!), контент визуально не выровнен по «сетке» (нарушен один из основных подходов к верстке современных лендингов/сайтов), цвета подобраны странным образом (мы имеем ввиду — действительно странным ) и т. д.
Список ошибок индийских веб-дизайнеров можно продолжать и продолжать, но через этот непривлекательный UI пользователь довольно легко может осуществлять online транзакции, приобретая положительный пользовательский опыт. Сайт Банка Индии идеально подходит под формулировку «Плохой UI, хороший UX».
Glassdoor: хороший UI и плохой UX
Существуют веб-ресурсы, дающие посетителям некоторое представление о размещенном на них цифровом контенте (например, eBooks) с последующей просьбой о регистрации для просмотра всего содержимого электронной книги, журнала, статьи. Почему? Неужели по прочтении 5-6 строк из статьи, пользователю становится понятно, что данный контент будет ему полезен?
На некоторых таких целевых страницах действительно наличествует великолепный визуальный дизайн, следующий новейшим тенденциям разработки UI. Но опыт, который они предоставляют пользователю, иначе как негативным, отталкивающим, разочаровывающим не назвать.
Необходимость регистрации для чтения даже бесплатных электронных книг/статей выглядит как бесцеремонное принуждение. Подобный подход, игнорирующий свободную волю посетителя, практикуется, например, на Glassdoor: вы никогда не узнаете, что находится на второй странице eBook, не заведя аккаунт на этом ресурсе.
Еще один отличный пример хорошего UI и отвратительного UX: вот интернет-магазин с прекрасным интерфейсом (очевидно, и такими же товарами), однако посетителю придется нажимать визуальный блок определенных офферов, чтобы перейти на другую страницу и только там узнать цену заинтересовавшего УТП.
Нужно перейти на другю страницу, чтобы узнать цену понравившегося товара
Дополнительная насмешка кроется в том, что переход выполняется через кнопку «Купить сейчас»: выглядит так, будто потенциальному покупателю действительно предлагают приобрести «кота в мешке по неизвестной цене». Почему бы не разместить цены на эти определенные офферы на странице категории товаров, как это сделано со всеми остальными?
UI интерфейс и представление информации: краткое руководство по имплементации хорошего UX и UI
Ваш лендинг выделится на фоне конкурентов, отличаясь хорошим интерфейсом и формируя положительный пользовательский опыт. Вот несколько советов по имплементации этих двух важнейших элементов в информационную архитектуру вашего веб-ресурса:
- Предоставляйте информацию в соответствии с ее важностью, т. е. размещайте контент на целевой странице так, чтобы основная и более важная информация визуально выделялась. Пример : используйте всплывающие окна (pop-ups), чтобы отобразить сообщение об успешном завершении интерактивного действия («Удалено» или «Добавлено в корзину») поверх основного массива текста.
- Используйте визуально привлекательные графические элементы. Попробуйте применить анимированную графику (этот совет, как и все прочие, нуждается в проверке сплит-тестом). Пример : сделайте выпадающее меню на вашем сайте более привлекательным, придав ему эффекты ослабления/перехода.
- Уменьшите число кликов, требующихся для выполнения цели конверсии, до минимума. Пример : если вы продаете SaaS-решение для упрощения и облегчения какой-либо маркетинговой операции, например, почтовой рассылки, то и ваше предложение должно загружаться просто и быстро: положительные ассоциации способствуют созданию хорошего UX.
- Воспользуйтесь пробелами как средством ликвидации ненужной информации. Пример: всегда размещайте на странице только критически важный для конверсии контент (выгоды, описание, социальные свидетельства и т. д.). Не нужно размещать «портянки» текста, чтобы просто показать, что вы знаете много умных слов и технических терминов (хотя, конечно, бывают случаи, что только на длинном лендинге посредством подробных объяснений можно выразить суть оффера).
- Уменьшите число кликов, требующихся для выполнения цели конверсии до минимума. Пример : вы продаете SaaS-решение для упрощения и облегчения какой-либо маркетинговой операции, например, почтовой рассылки. Логично будет, что и ваше предложение можно загрузить просто и быстро — положительные ассоциации способствуют созданию хорошего UX.
- Упростите навигацию по контенту. Пример : используйте внутренние ссылки на веб-странице, чтобы показать больше информации по конкретной теме. Оптимизируйте информационную архитектуру вашего веб-ресурса.
- И всегда помните мудрые слова немецкого писателя Томаса Манна (Thomas Mann): «Человеческое поведение имеет смысл, если думать о нем с точки зрения целей, потребностей и мотивов». Эта фраза относится и к дизайну. Подходите к потребностям потенциальных лидов/клиентов с точки зрения технической осуществимости и экономической целесообразности дизайнерских решений. Помните: «дизайн для пользователя, а не пользователь для дизайна».
Проведите юзабилити-тестирование, отследите поведенческие реакции пользователей на каждый элемент информационной архитектуры вашего веб-решения и имплиментируйте в ее окончательный вариант только лучшие решения, способствующие формированию положительного UX.
Вместо заключения
Мы надеемся, что раскрыли подлинную природу таких сложных понятий, как пользовательский интерфейс и пользовательский опыт, и внесли свою лепту в разоблачение вредоносного мифа о том, что «UI = UX».
Проблема, которую должны решать веб-маркетологи и дизайнеры, — оптимизация UX. Оптимизация пользовательского интерфейса — занятие важное, но не ведущее напрямую к повышению коэффициента преобразования. Конечная цель — формирование положительного пользовательского опыта.
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows