Меня зовут Алексей Кулаков, я генеральный директор digital-продакшена JetStyle. Больше 15 лет я занимаюсь дизайном взаимодействия — проектирую привлекательные для пользователя интерфейсы с удобной структурой.
За это время сменилось немало трендов и предметом внимания дизайнера наконец стал опыт, который он создает. Это особенно заметно в среде, где для коммуникации используют множество каналов: сайты, мессенджеры, видео, аудио, почту, опыт в оффлайне и т.д. Но создавать дизайн только как набор экранов больше нельзя — получается всё хуже. Поэтому всё чаще мы концентрируемся на создании клиентского опыта (CX) и опыта пользователя (UX) внутри него.
В этой статье я расскажу о том, как устроен дружественный для пользователя сайт. Разберёмся, какие сценарии пользовательского поведения существуют, а также поговорим про то, чем UX отличается от UI и и задачах навигации на сайте.
User friendly сайт — что это
Во-первых, это сайт, который хорошо вписан в сценарий клиента и выполняет цели человека. Во-вторых, у него хорошее юзабилити — другими словами, им удобно пользоваться.
Что значит «вписывается в цели пользователя» и почему это важно? Например, школьник из 8-го класса по пути домой увидел баннер с Бэтменом и Суперменом и надписью «супергерои программирования». Он не знает, что это такое, и может только зайти на указанный сайт и посмотреть информацию, если его зацепит сообщение. Что он должен понять и сделать, чтобы мы могли считать этот опыт успешным? Что это крутой конкурс для ребят 12-17 лет, которые умеют программировать, что есть смысл в нем участвовать — и зарегистрироваться. Для этого он должен увидеть на сайте главное: почему конкурс крутой, что ценного он ему даст. А ещё должен быть легкий путь к регистрации. На выходе нам нужно, чтобы школьник выложил свой проект — это и для него тоже должно быть понятно и просто.
Если сайт никак не встроен в сценарий человека, не помогает ему достичь цели — решить задачу, с которой он пришел сюда, то как бы мы ни бились над юзабилити, никто не оценит удобство интерфейса.
Задайте себе вопрос: какую работу выполняет сайт для пользователя? Как изменится поведение или жизнь человека после взаимодействия с интерфейсом? В рамках любой коммерческой задачи мы всегда действуем только в целях бизнеса и клиента. И исходим из аксиомы, что нам нужно найти то место, в котором достигаются цели и тех, и других. Так вот, юзерфрендли — это, в первую очередь, про цели клиента.
Цели человека и сценарии пользовательского поведения
Цель — это то, ради чего человек вообще действует: представление о том, как изменится жизнь после взаимодействия с продуктом. Цель пользователя — не обязательно приобретение товара, но она обязательно изменяет его поведение, так как он хочет.
В жизни цели обычно вложены друг в друга как матрёшки, и к помощи интернета человек может обратится за любым из уровней. Например:
Я хочу узнать как проехать к офису,
потому что я хочу убедиться, что меня не кинут (а я доверяю только взгляду в глаза),
чтобы на месте окончательно определиться с выбором модели велосипеда,
и уже наконец его купить,
потому что я хочу ездить в город на велосипеде, а не на машине,
потому что я надеюсь, что так я увеличу норму движения и сброшу наконец вес,
стану лучше себя чувствовать,
и буду нравиться себе в зеркале.
В конечном итоге тут цель человека — «нравиться себе в зеркале». Но для проектирования интерфейсов нас интересует цель в тех терминах, в которых пользователь её перед собой ставит, открывая браузер для «вот этой вот задачи». Если он идет к цели «я хочу попасть в офис», надо сначала ему помочь в этом. Понять, какие ему предстоят задачи (в данном случае: найти адреса офисов, соотнести их с местами, где он регулярно бывает, решить когда он поедет и откуда — из дома или с работы, выбрать транспорт, прикинуть маршрут и не забыть это всё до момента визита).
Эти задачи сложатся в сценарий, который должен помочь прочти интерфейс. После того, как мы помогли ему решить ту задачу, ради которой он к нам пришел, мы можем продолжить сценарий, перейдя к следующей цели, предложить ему продолжить диалог с нашим сайтом. Например, о том какие у нас есть модели велосипедов.
Примеры целей:
Я куплю Новый телефон Huawei. В этот раз у нормального продавца, и наконец смогу делать снимки достойного качества (я уже определился с моделью, и мне надо помочь выбрать продавца).
Я определюсь с тем, хочу ли я покупать беговую дорожку. Если да, то пойму, какую и сколько денег надо отложить из бюджета (еще не понимаю, хочу ли я вообще покупать товар, мне надо помочь сделать выбор).
Выбрать компанию, которая будет делать ремонт полов в моей квартире (уже начал ремонт стен, мне срочно требуется другая бригада вместо этой — нужна помочь со сменой исполнителя на более надежного).
В это же время у бизнеса есть свои задачи для сайта:
получить оплату заказа,
зарегистрировать пользователя,
добиться заполнения формы,
получить данные опроса,
получить разрешение на подписку,
продать новый тарифный план.
Прежде, чем ставить задачи на сайт, нужно описать, какой сценарий развивается в жизни человека:
Как возникла проблема у человека.
Как он перешел к ее решению.
Какие шаги ему надо предпринять без вашего сайта или приложения.
Как он получил профит, или почему у него не получилось.
Куда он пошел после завершения сценария.
А затем при проектировании сайта предложить некоторые изменения: чтобы ситуация стала лучше для человека, и его сценарий изменился относительно текущего. Поменяются третий и четвертый пункты нашего списка:
Какие шаги ему надо предпринять, с помощью нашего приложения/сайта.
Как он получил профит, и чем ситуация стала лучше.
Чтобы это изменение в его жизни произошло, надо понять, какие барьеры ему мешают сейчас, и снять их в процессе коммуникации. Пример: человек ищет в интернете, где смотреть любимые сериалы? Какие у него барьеры?
«я не знаю, как выбрать стриминговый сервис, большая ли там библиотека»;
«я не понимаю, сколько это должно стоить»;
«у меня нет доверия к этому сервису, действительно ли он подойдет мне и моей семье? сможет ли им безопасно пользоваться мой ребёнок?».
В конечном итоге, задача на проектирование интерфейса выглядит так:Примеры:Закрепим наш путь:
Сперва описываем сценарии — как пользователь продвигается к цели своего визита.
Фиксируем моменты, которые должны быть в сценарии решения задач.
Компонуем их по экранам. Даем экранам названия, чтобы было понятно, что там происходит.
Рисуем карту переходов по страницам.
Пример карты переходов для образовательного проекта
Метрики юзабилити сайта
Мы убедились, что на нашем сайте есть какая-то польза для человека — это база. Следующий уровень — уровень комфорта. Теперь нам нужно удостовериться, что сайт удобен, эргономичен и соответствует нормам юзабилити .
В юзабилити я обычно пользуюсь следующими метриками:
Обучаемость. Вам сразу понятно, где вы находитесь, что здесь можно делать, как ведет себя интерфейс — ни про что не нужно догадываться. С обучаемостью всё в порядке, если вы пришли на сайт и с самого начала быстро в нем разобрались.
Запоминаемость. Например, вам было сложно первый раз разобраться в интерфейсе, но вы возвращаетесь через три недели и знаете, что нужно делать.
Процент пользовательских ошибок — негативная метрика. Ошибки бывают минорные и критические. Критические — когда пользователь не смог выполнить свою задачу: пришел на сайт, тыкался-тыкался, с задачей не справился, зашел в тупик. Есть ошибки некритические: когда представление пользователя о том, как себя будет вести интерфейс расходится с тем, как он ведет себя на самом деле, но сценарий всё-таки выполняется, пользователь доходит до своей цели.
Эффективность. Пользователь тратит сколько-то усилий для достижения своих целей: эти усилия можно измерять во времени, которое пользователь тратит, чтобы достигнуть своей цели, или в количестве кликов. Высокая эффективность — это когда человеку нужно приложить мало усилий для достижения задачи. В идеале задача должна решаться вообще без усилий.
Субъективная удовлетворенность. Если предыдущие метрики можно измерить, глядя на пользователя снаружи, — просто смотреть, что он делает — то уровень субъективной удовлетворенности мы не поймем без разговора с пользователем. На удовлетворенность влияют не только эти 4 метрики, но и имиджевое соответствие: насколько представление пользователя о том, как этот сайт выглядит, совпадает с реальностью, какой tone of voice у контента. Насколько его впечатление совпадает с тем, что сайт для таких как он, в его актуальном контексте. В конечном итоге, клиенту или приятно, или неприятно пользоваться интерфейсом.
Для разных сайтов иерархия этих метрик будет отличаться. Вот несколько примеров:
Например, если мы говорим о сценарии покупки в один клик, когда пользователь впервые столкнулся с лендингом, купил, и больше мы с ним не взаимодействуем — то основные метрики, которые нам важны — обучаемость и процент пользовательских ошибок. И мы оптимизируем сайт под них. Но в 2021 году кейс, когда клиент пришел, увидел и купил — не основной.
Работа с повторной продажей. Если пользователь уже ответил на многие вопросы, не заставляйте его повторять ненужные операции. Важно, чтобы он быстро вспомнил логику навигации и повторил заказ. Также хорошо бы проявить заботу и благодарность — например, предложить скидку за повторную покупку.
Длительная продажа. Часто пользователи не покупают при первом посещении — помогите им и покажите, что они смотрели в прошлый раз, предложите подписаться на рассылку. Сайт должен помогать в телефонной продаже: очень важно иметь простую для объяснения в разговоре навигацию (простые адреса, внятную структуру отдельной страницы, четкое зонирование).
Отличие UX от UI
Нам нужно понимать, какую пользу мы приносим клиенту, попасть в его контекст, иметь предположение, что для этого человека является привычным и сделать интерфейс, предложив ему хороший контент или сервис. Мы занимаемся user experience — созданием ценного опыта пользователя, улучшением конверсии, проектированием сценариев и содержания. UX — это про то, как пользователь себя ведет, как это поведение измерять, проектировать, про что говорить.
User Interface, в свою очередь, отвечает на вопрос «как выглядит интерфейс». К UI относятся:
как выглядят сервисные функции — визуальная примерка платья с помощью дополненной реальности, возможность положить товар в корзину или избранное, сравнение параметров товаров;
модули — это визуальные «фразы», например, форма регистрации, лид статьи
и т.д. Чтобы пользователю было комфортно, нужно заниматься и UX, и UI, но UI должен быть подчинен UX.
Рекомендации по UI:
Главное внимание — главным действиям. Когда вы находитесь на каком-то экране, нужно четко понимать, какому сценарию экран посвящен. Элементы интерфейса, связанные с главным сценарием, должны быть на самом заметном месте. Не должно быть такого, что самая главная ценность, которая есть в интерфейсе, находится за какой-нибудь плашкой в третьем экране сверху — её никто не увидит.
Когда вы располагаете элементы по экрану, должна быть явная иерархия заметности элементов. Вы что-то хотите показать клиенту в первую очередь, что-то — во вторую. Это похоже на планы восприятия в изобразительном искусстве: то, что на первом плане и в центре композиции — крупное, то, что на среднем — оттеняет его и вступает с ним в диалог, то, что на фоне — не выпячивает своих деталей. Это правило применяется для выбора контраста между размерами и оформлением элементов. Контраст должен быть явным.
Необходимый минимум стилей оформления. Стили оформления — это слова и правила визуального языка, которым вы пользуетесь. На освоение закономерностей пользователь тратит умственные усилия, поэтому правил надо вводить мало и придерживаться их во всех интерфейсах. Так пользователь быстрее поймет, как тут всё устроено, и будет меньше ошибаться. Кроме того, когда мы считываем визуальные закономерности и понимаем, что всё аккуратно организовано, пространство воспринимается как более приятное.
Навигация должна отвечать на вопрос «где я нахожусь»:
это страница товара,
это результаты поиска,
это главная страница сайта,
я сейчас на странице корзины и т.д.
А также пользователь должен понимать, где он находится относительно других страниц сайта: как ему вернуться туда, откуда он пришел, где он находится по отношению к главной и т. д. Третья задача навигации — отвечать на вопрос «что я могу здесь делать?».
Мобильный экспириенс стоит проектировать первым. В 21-году почти во всех сценариях больше половины опыта человек получает через мобильный интерфейс. Кроме того, проектируя мобильный интерфейс, вам придется сконцентрироваться на главном — после этого будет проще организовать десктоп.
Быстрая загрузка элементов — еще один важный фактор, который прямо влияет почти на все метрики юзабилити. А еще сильно влияет на ранжирование в поисковых системах.
Поддержка нативных элементов управления. Когда кто-то говорит «интуитивно понятный», по факту это означает «привычный». Поэтому, если вы можете обойтись стандартным интерфейсным элементом, с которым пользователь часто сталкивается (именно они и содержатся в гайдлайнах операционных систем), такой элемент будет удобнее. Потому что уже присутствует в опыте. Нужно иметь очень, очень сильные аргументы, чтобы вводить оригинальные символы управления.
Продолжая тему нативных элементов управления, надо сказать об инклюзивности. Если вы потратите усилия на то, чтобы ваш сайт был доступен для людей с ограниченными возможностями здоровья, вы убьёте сразу много зайцев. Во-первых, таких пользователей десятки процентов — это не только люди, которые совсем не видят экран (и нуждаются в интерфейсах озвучивания), но и просто слабовидящие, люди с дальтонизмом, расстройствами внимания и т.д. Почти для любой клиентской группы — это серьёзная часть аудитории, и о ней стоит заботится. Во-вторых, если вы позаботитесь о них, вам придется придерживаться более строгой информационной архитектуры и нормального аксессибилити (доступности интерфейса). Это приведет к тому, что вам придется использовать стандартизованные практики, которые сделают удобным работу с вашим сайтом из всех распространенных агентов — не только самых распространенных парсеров, но и голосовых интерфейсов, агрегаторов, чтения специальных средств.
Вместо итогов
Самый главный совет будет примерно такой:
интерфейс должен быть привычным, чтобы быть комфортным. Выделяться нужно контентом и ценностью, которую создает сервис.
Для этого проводите анализ референсов — очень простая практика, которой часто пренебрегают. Повторите путь пользователя, пройдите его сценарий: зайдите в интернет, откройте первую десятку ссылок по запросу, с которыми пользователи столкнутся. Постарайтесь посмотреть его глазами и, пока делаете это, делайте скриншоты всех экранов которые вам встретились. Вычленяйте удачные формы и не стесняйтесь их использовать.
Если вы хотите более подробно поговорить про юзерфрендли интерфейсы и механики, которые я использую при проектировании, пишите на почту kulakov@jetstyle.ru
У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.
11
0
Отправить в
Опубликуйте статью в блоге Callibri
Подойдут материалы про маркетинг, продажи и клиентский сервис
