UX
FDВступление
Всем привет! Меня зовут Алексей и я кое что знаю о UX.
На самом деле, я даже не думал что на эту лекцию вообще кто-то придет.
Спасибо огромное за проявленный интерес к данной теме я постараюсь сделать этот час максимально продуктивных и полезным для каждого.
Уже несколько лет я набираю опыт о опыте. Сегодня мы поговорим как раз об этом. Я расскажу что такое UX и почему он так важен.
UX для самых маленьких
Начнем с того, что такое UX.
Как многие уже знают дословная расшифровка UX это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом или продуктом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.
Многие считают что за взаимодействие и опыт пользователя отвечает
UX/UI дизайнеры которые проектируют эти самые интерфейсы, но это далеко не так. UI дизайнер может нарисовать действительно хороший и красивый интерфейс. Но логика самого проекта будет грубо нарушена и такой итог повлечет за собой потерю конверсии. Вы просто потеряете своего пользователя. Чтобы разбираться UX необязательно быть дизайнером и иметь опыт проектирования интерфейсов. Ну и сам UX это не всегда интерфейс, но об этом позже.
Зачем же вам этот UX?
Если вам не безразличны ваши идеи, рано или поздно вы придете к тому, что вы хотите создать нечто новое, сделать вещи вокруг вас удобнее и практичнее. Это самое главное в UX— обыграть обыденность дать новую жизнь столь обычным предметам и вещам сделать что-то очень удобным для каждого. Финиш это вызвать восторг пользователя от вашего продукта.
Как же прийти к финишу? Стоит начать с простых вещей, каждый день мы встречаем неудобства в том или ином проявлении. И каждый день сотни людей по всему миру упрощают нам жизнь, новыми технологиями и продуктами. Вы просыпаетесь и готовите кофе, но вы можете сделать так кофемашина будет готовить кофе по вашему будильнику. Удобно. Но кофе очень горячий и крепкий для вас, тут и пошел процесс тестирования и улучшения взаимодействия продукта. Это глобальный UX.
Рассказать о хороших примерах приложений/продуктов.
Так же это работает в IT сфере, каждое приложение или программа должна быть интуитивно понятной и простой в использовании иначе кто-то сделает это за вас. Ваш продукт должен выполнять поставленные задачи максимально быстро и удобно. Важно построить логическую архитектуру вашего продукта.
Давайте я перейду сразу к полезным приемам в UX которые сегодня можно использовать.
Разберем первый UX на примере проектирования обычного сайта.
Точка входа в UX.
При запуске каждого продукта/приложения или сайта. Очень важную роль играет первый экран. Первое что видит пользователь. Важно уделять этому особое внимания как со стороны проектирования логики так и со стороны визуальной части то бишь дизайна.
Управляйте вниманием при первом контакте пользователя с интерфейсом.
Сделайте точку входа очевидной. К хорошему примеру можно отнести особый акцент в заголовке страницы сайта.
Направляйте пользователя по визуальной иерархии. Избегайте бессмысленных элементов в интерфейсе. Визуальные иррархии строяться на принципах F и Z паттернов.
Что это такое?
У многих UX дизайнеров/проектировщиков выстроилось представление о типичном пользователе в таком клише, что он будет рассматривать каждый пиксель. Смиритесь — пользователи этого не делают. Они сканируют. Это означает, что они останавливают взгляд только на том, что цепляет взгляд.
Кажется, что мы по-разному взаимодействуем с каждым сайтом и приложением, но на самом деле наше восприятие достаточно предсказуемо.
Z-паттерн:
Давайте начнем с самого скучного решения, которое приходит в голову: газетной страницы со сплошным текстом. Все на одну тему. Без заголовков. Без картинок. Без пробелов и цитат. Просто текст, ровными колонками, от начала до конца.
Когда пользователи видят такой дизайн (надеюсь, что такого вы никогда не создаете), их взгляд обычно движется по букве “Z”, как показано на рисунке.
Скукота! Zzzzzzzz … (видите, что произошло?)
Ага!
Если добавить заголовок получше (визуальный вес), оставить только одну колонку для удобства чтения (линейное натяжение), и разбить текст на небольшие секции (повторение), мы приблизимся к другому популярному виду сканирования:
F-паттерну.
На цветной картинке сверху мы видим так называемые “тепловые карты” — результаты отслеживания взгляда пользователя. На такой карте фиксируется, куда люди смотрят. И чем больше они смотрят в какую-либо точку, тем она “горячее” на тепловой карте.
Похожие лэйауты = похожие результаты.
F-паттерн работает примерно так:
взгляд пользователя движется из левого верхнего угла, как при Z-паттерне
пользователь читает первую строчку текста (или заголовок)
сканирует вниз по левой стороне колонки, пока не наткнется на что-то интересное читает интересную информацию более внимательно
продолжает сканировать вниз.
Если повторять этот процесс снова и снова, тепловая карта будет выглядеть как буква “F” или “E”, отсюда и название.
Почему это так важно?
Как вы, наверное, заметили, на некоторые области страницы люди “автоматически” обращают больше внимания, а на другие зоны практически не смотрят. Это я и имею в виду под “сильными” и “слабыми” зонами лэйаута.
На кнопку, расположенную в левом верхнем углу, кликнут чаще, чем на ту, что расположена в правом верхнем, а на нее, в свою очередь, чаще, чем на левую нижнюю, а на нее чаще, чем на правую нижнюю. И на все эти кнопку кликнут чаще, чем на ту, которая случайно расположена где-то в центре… если вы что-нибудь не предпримете.
Также важно иметь в виду, для каждого “блока” контента и для каждой колонки есть свой F-паттерн. На странице не обязательно должен быть только один F-паттерн.
Визуальная иерархия:
Когда вы последовательно используете типографику для обозначения важных моментов в тексте, а цвет — для выделения кнопок, а также когда вы придаете значимым вещам больший визуальный вес — это называется визуальной иерархией, т.е. дизайном, который достаточно просто сканировать. Наш взгляд перескакивает с одной важной вещи на другую, а не сканирует равномерно, как машина.
Некоторые дизайнеры считают, что визуальная иерархия нужна, потому что с ней страница лучше выглядит. На самом деле, такая страница лучше воспринимается, так как ее проще сканировать.
Вернемся к нашему примеру — сайту.
Что еще нужно для неплохого UX? Точки соприкосновения.
Чтобы пользователь не потерялся на вашем сайте, важно воспитать себе чувства компоновки элементов. Комбинируйте элементы на сайте, так пользователь автоматически будет захвачен принципами визуальных паттернов.
Проектируйте интерфейс с учётом гештальт-принципов
Мы буквально завалены раздражителями в интерфейсах. Согласно гештальт-психологии, мы постоянно стараемся преодолеть этот хаос, упрощая наше восприятие. Мы группируем объекты, разбиваем элементы на категории, пытаемся увидеть картину целиком.
«Сумма частей не то же самое, что целое»
Приведенная цитата кратко описывает суть гештальта. Люди видят группу объектов, как нечто целое, прежде чем воспринимают эту же группу, как состоящую из элементов. Мы видим целое, как что-то большее, чем сумма частей, и даже тогда, когда детали являются отдельными субъектами, мы визуально группируем их в целое.
Идем дальше.
Близкий смысл.
Вы можете расположить близкие по смыслу функции или пункты меню ближе друг к другу. Таким образом пользователю будем удобней ориентироваться.
Переместите заголовки ближе к релевантному тексту.
Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство
Иногда интерфейс видоизменяется прямо на глазах у пользователя.
Сделайте эти изменения заметными, но не вводящими в замешательство.
Хороший интерфейс никогда не забывает давать пользователю обратную связь. Отправляются данные — нам об этом говорит анимированная иконка, товар добавился в корзину — значок корзины видоизменился заметным образом (изменились цвет и состав), удалили пункт в списке — остальные элементы поползли вверх, нажали на якорную ссылку — страница плавно и быстро скроллится к нужному месту, а не мгновенно переносится в нужные координаты. И так далее и тому подобное.
Уберите или снимите акцент с ненужной информации
Наша способность фокусироваться не безгранична. Ненужные элементы будут истощать этот ресурс. Поэтому удерживайте внимание пользователей на важных сведениях и функциях.
Сообщайте о текущем положении пользователя в интерфейсе
Интерфейсы чем-то похожи на аэропорты. Без указателя «вы находитесь здесь» пользователи могут заблудиться. Поэтому создавайте такие указатели.
В сложных интерфейсах используйте «хлебные крошки» и пошаговые карты.
Важно сделать так, что пользователь должен добраться до желаемого максимум за два клика. Так важно учитывать правило 5 секунд.
Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
Привычные элементы управления. В любом современном интерфейсе есть много элементов управления, будет лучше использовать привычные элементы и визуальные образы.
Люди не читают, люди просматривают. Пользователи не любят читать большие массивы текстов, не заставляйте их это делать.
Принцип умного заимствования. Не стоит изобретать велосипед для стандартных вещей.
Кошелек Миллера. В одном функциональном блоке не может быть больше 5-7 элементов, иначе пользователь не сможет удерживать информацию в кратковременной памяти.
Принцип группировки. Информацию на странице желательно разбивать на логические блоки (группы), так пользователю легче ориентироваться.
Интуитивная понятность. Понимание лучше запоминания.
Все полезное на виду. Все важные элементы интерфейса должны быть на виду и соответствующим образом выделены.
Принцип 3х кликов. Должно быть не более 3х кликов для перехода из одного раздела в другой. Это же правило применимо к главной странице: любая важная информация должна быть доступна не более чем в 3 клика.
Однородность. В больших проектах часто встречается однородный функционал в разных частях сайта (например, комментарии), он не должен отличаться. Это же касается и стиля.
Способы решения задачи. Пользователям нужно предлагать способы решения их задач с помощью интерфейса, и эти способы должны быть очевидны.
Принцип мостовых перил. Этот принцип еще называют «защита от дурака», пользователей нужно защищать от случайных действий.
Правильный копирайтинг. Проектирование интерфейса – это во многом копирайтинг, важна каждая буква, особенно заголовки.
Принцип единства. Настройки и элементы управления нужно стараться не прятать в отдельные разделы, а дать возможность управлять из одного места, если это уместно.
Тренды. Стоит учитывать современные тенденции, чтобы интерфейс не устарел еще до выхода проекта, но подходить к этому вдумчиво.
Это был краткий экскурс по проектированию интерфейсов.
Теперь разберем дальнейшие ваши действия, перед тем как ваш продукт выйдет в люди. Вы должны все протестировать и знать возможные ошибки и по возможности их устранить.
Приемы тестирования.
Три причины тестировать.
Вам нужно юзабилити-тестирование, если:
Ваш проект не приносит прибыли несмотря на высокую посещаемость ресурса;
Вы хотите узнать как реально пользователи взаимодействуют с вашим продуктом, выявить их проблемы и потребности;
Вы планируете перепроектирование сайта;
Ваш проект находится в процессе разработки и требуется протестировать работоспособность основных идей на ранней стадии.
Юзабилити-тестирование позволяет
Проверить насколько ваш продукт соответствует ожиданиям пользователей;
Получить точные данные о работе пользователя с продуктом;
Выявить слабые места в интерфейсе вашего продукта (в навигации, дизайне, заголовках, функциональных элементах и т.д.);
Найти оптимальные решения для устранения проблем.
Рабочий процесс
1 Определение целей продукта и ключевых показателей эффективности (KPI)
В самом начале очень важно определить главные цели и задачи, решаемые продуктом, а также ключевые показатели эффективности вашего продукта (количество заказов, регистраций, звонков, время на сайте и т.д.). Все это позволяет выбрать верное направление в исследовании.
2 Определение проблемных страниц и функций
Определяем проблемные страницы и функции с помощью инструментов веб-аналитики.
3 Составление заданий для респондентов
Для составления заданий мы определяем сценарии поведения пользователей, в которых задействовано как можно больше проблемных зон, и придумываем соответствующие задания для респондента.
4 Выбор респондентов
Крайне важно привлекать к тестированию пользователей из вашей целевой аудитории. Если у вас нет четкого представления о целевых пользователях, мы составляем несколько типичных портретов и на их основе подбираем подходящих респондентов.
Достаточное количество респондентов – 5-8 человек
5 Заполнение анкеты респондентом
Перед самим тестированием мы даем респонденту заполнить анкету, чтобы проверить насколько он соответствует типичному пользователю вашего продукта.
6 Проведение юзабилити-тестирования
Во время самого тестирования наш специалист дает задание респонденту, просит его выполнить задания и комментировать все свои действия и эмоции. С помощью специальных программ записываются все действия респондента для последующего подробного анализа. После завершения тестирования мы проводим небольшой опрос – впечатление от продукта, с какими трудностями столкнулись, что показалось неудобным.
Все респонденты проходят тестирование в разное время.
7 Анализ результатов и составление отчета
В отчете мы описываем все возникшие у респондентов проблемы. Исходя из частоты их возникновения у разных респондентов определяем степень их критичности и даем рекомендации по их решению.
Результаты
Детальный отчет с описанием обнаруженных проблем, степенью их критичности и рекомендациями по улучшению вашего продукта.
Если будет обнаружено большое количество проблем и вам не обойтись без глобальных изменений, вам может потребоваться перепроектирование вашего продукта.
Тут показывай видосик и пикчи.
Что такое CX?
UX (опыт взаимодействия) и CX (клиентский опыт) — концепции схожие, но не взаимозаменяемые. UX — это отдельный компонент клиентского опыта (CX), который характеризует юзабилити вашего продукта или сайта. C другой стороны, клиентский опыт (CX) — это весь цикл взаимодействий и процессов, которые осуществляет клиент. В рамках клиентского опыта можно выделить множество “контрольных точек”: веб-сайт, мобильное приложение, брошюры, личный контакт (тех.поддержка и дополнительные услуги).
Клиентский опыт (CX) подразумевает проектирование взаимодействия с продуктом (включая обратную связь), и направлен на то, чтобы оправдать или превзойти ожидания клиента. Таким образом, цель CX — повысить степень удовлетворенности клиентов, чтобы они снова использовали продукт/сервис и рассказывали о нем другим. А это зависит в том числе и от того, насколько полезным и приятным будет их опыт общения с организацией в целом.
Позитивный или негативный клиентский опыт способен повлиять на желание клиента продолжать взаимодействие с компанией. Это особенно важно, если ваши клиенты технически подкованы и имеют возможность выбирать среди множества конкурентных предложений. Отличный клиентский опыт — это не только способ повысить продажи и выручку, но и прекрасное конкурентное преимущество. В конце концов, исследования показывают, что 86% клиентов готовы платить больше, если клиентский опыт будет лучше.
Ошибки в CX
Ошибка #1: Проектирование для себя
Эта ошибка противоречит принципу о проведения исследования.
Слишком часто вы разрабатываете дизайн для себя. Так же, как вам надо иметь список потребностей вашей аудитории, вам необходимо разработать пользовательский опыт, нужный вашей аудитории. Всегда проектируйте для тех, кто действительно использует ваш сайт. Велики шансы, что люди не хотят или не нуждаются в тех же вещах что и вы.
Решение:
Проведите количественный анализ, чтобы идентифицировать проблемные области. В какой момент пользователи уходят? Где они проводят больше времени? На каких страницах они нажимают «назад»?
Проведите качественный анализ, чтобы определить почему. Почему пользователи уходят? Почему они останавливаются на определенных страницах? Зачем им нужна кнопка «назад»?
Расположите проблемы по приоритетам, основываясь на их влиянии и простоте исправления. Потребуется ли тестирование (например, улучшение результатов поиска) или проблемы можно будет сразу исправить (например, сделать кнопку больше контрастной)?
Создайте гипотезы для проблем, которые необходимо проверить, и начните тестирование.
Ошибка #2: Искусность за счет ясности
Эта ошибка противоречит принципу ясности.
Вы хотите, чтобы ваш сайт был красивым и инновационным. К сожалению, это не всегда хорошо для конверсий. Почему? Многие разработчики (и маркетологи) жертвуют ясностью ради оригинальности.
«Креативность — это очень хорошо. Но когда вы креативны ради креативности, вы рискуете запутать ваших пользователей вместо того, чтобы направлять их.
Это может быть очень креативно. Но пользователи не поймут».
Разница между ожиданиями и реальностью велика. Ваши пользователи нажимают на кнопку, ожидая одного, но получают совсем другое. Они ожидают, что значок сделает X, но он делает Y.
Ясность убирает эту разницу.
Решение:
Используя модель ResearchXL, Вы проводите эвристический анализ. Окиньте объективным взглядом свой сайт и определите то, что неясно.
При проведении пользовательского тестирования, попросите, чтобы юзеры выполняли ключевые задачи в вашей области конверсий (например, залогиньтесь, найдите продукт Х, добавьте продукт Х в корзину) Какой путь они берут? Насколько он отличается от намеченного вами пути? Почему?
Где пользователи колеблются? Это указывает на то, что могут быть проблемы, связанные с ясностью. Есть определенный комфорт в точном понимании того, что произойдет, когда определенные меры будут приняты. Если пользователи не будут уверены, то они вероятно будут колебаться.
Ошибка #3: Ограничение кликов и скролинга
Эта ошибка противоречит принципу интуитивности.
Попадали ли вы когда-либо на сайт, навигация на котором практически была невозможна или вы не могли с него выйти? Это происходит чаще, чем вы думаете. В попытке заставить пользователей выполнять желаемые действия, оптимизаторы бомбардируют их призывами к действию.
Всплывающие окна занимают весь экран. Больше ничего не видно. И это находится в центре статьи.
Нечто подобное происходит, когда сайт использует автоматический или плавный скролинг. Это действительно делает навигацию на сайте проще или это только выглядит круто? Так ли это хорошо работает на практике, как работает в теории?
Решение:
Если вы планируете выстраивать свой бренд и долговременные отношения с клиентами (а вам так и следует делать), не жертвуйте опытом ради email или применения чего-то «крутого».
Хороший UX означает, что пользователь осведомлен о наиболее желаемых действиях без того, чтобы вы наседали на них.
Если вы зайдете слишком далеко в обратном направлении, вы также не добьетесь ничего хорошего. Сделайте ваши наиболее желаемые действия яснее, а возможность скролинга — очевиднее… но не жертвуйте ради этого пользовательским опытом.
Ошибка #4: Игнорирование прототипов
Эта ошибка противоречит принципу интуитивности.
Вероятно, вы уже сталкивались с определенными прототипами. Например, вот три сайта от Landingfolio:
Прототип очень понятен. Навигация сверху, кнопки призыва к действию контрастируют по цвету, заголовки и подзаголовки распределены по важности и прочее. Хотя проекты очень разные, все три сайта следуют одному очень специфичному прототипу.
Если это сайты электронной коммерции. вы ожидаете увидеть корзину в правом верхнем углу. Если это мобильной приложение — четыре опции навигации внизу экрана.
Прототипы делают пользовательский интерфейс проще. Заходя на ваш лендинг или сайт пользователи ожидают увидеть то, что они раньше видели на других сайтах.
Пример: Дверь Нормана
Дверь Нормана определяется как «дверь, которая заставляет вас делать обратное тому, что на самом деле вы собирались сделать; дверь, дающая неверный сигнал и требующая сигнала для корректировки этого».
Каждый раз, когда вы попадаете в неудобное положение, врезаясь в дверь, которую вы должны открывать на себя, или тяните дверь к себе, в то время как она открывается от себя, вы сталкиваетесь с Дверью Нормана.
Ошибка #5: Считать, что на мобильных устройствах действуют те же правила
Эта ошибка противоречит принципу релевантности.
Несомненно, потребление медиа на мобильных устройствах сейчас находится на подъеме:
Вам не понадобится отдельная статья о том, что трафик на мобильных устройств функционирует отлично от трафика на ПК, или о том что длинные формы являются плохой идеей. или что маленькие ссылки/кнопки убивают конверсию.
Но есть, однако, несколько вещей, которые вам необходимо знать о мобильных устройствах:
Кроссплатформенное тестирование обязательно. Убедитесь в том, что ваш сайт работает корректно и загружается быстро на всех устройствах. У вас может не быть устройства с AndroidOS, но можно быть уверенным. что такие устройства есть у некоторых ваших пользователей. Гарантия качества крайне необходима.
Тестируйте версии для ПК и мобильных устройств отдельно. Ваш мобильный UX и десктопный UX — совершенно разные. Поэтому их надо тестировать по-разному.
Чем меньше нажатий, тем лучше. Как ранее отметил Люк, иногда лучший UI — это его отсутствие. Чем меньше нажатий вы требуете от пользователей, тем лучше. Зачем проводить пользователей через множество окон (например, onboarding-поток), если вы можете собрать все в одно?
Ошибка #6: Забыть о производительности
Эта ошибка противоречит принципу проведения исследования.
Когда вы думаете о UX, можно поспорить, что последняя вещь, о которой вы думаете — это производительность вашего сайта. Это весьма плохо, поскольку, как объясняет Бред Фрост из Brad Frost Web, это может иметь очень серьезные последствия: