{"id":13465,"url":"\/distributions\/13465\/click?bit=1&hash=1e6228dc4e5e22730d5108e1c30ee96b3462205737e7a3fe7ce4c965aaacfe57","title":"\u041a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f Ozon \u2014 \u043a\u043e\u043c\u0443, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0440\u0438\u0437\u0438\u0441","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6b1e0c55-41d3-56c2-84e2-fe6f447e3825","isPaidAndBannersEnabled":false}
Дизайн
Lena Nexman

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

Как заказчики представляют себе идеальную работу по дизайну сайта? Вот приходят они к дизайнеру и говорят: «Хочу, мол, сайт себе новый – чтобы современный, и анимация была, бабочки там по фону летали, а курсор в виде цветочка. И корзину давайте не корзиной сделаем, а лейкой. Классно же?» Дизайнер радостно берется за работу, выгружает сайт – клиенты довольны, и продажи идут на взлет. Но, к сожалению, такого не будет, потому что есть страшное слово – юзабилити.

Наглядно - чем UX отличается от дизайна интерфейса. UX - это проработка взаимодействий и создание прототипов. А сам дизайн (UI) - это визуалы и цвета.

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

Почему этот сайт так дорого стоит? В нем же ничего особенного?

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

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

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

Создавая сайт, начни с UX

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

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

Базовые UX-шаблоны проектирования интерфейса. Они привычны для пользователя и удобны для восприятия.

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

С чего же начать?

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

Затем приступаем к самому сложному – аналитике. Мы должны четко прописать, какими путями должен пройти пользователь от первой заинтересованности вашим товаром или услугой до конечной цели – покупки. Или от регистрации до выполнения определенной задачи, если мы работаем над дашбордом.

Каждый сценарий пользовательского поведения прописывается отдельно. Например, сценарии могут быть такими:

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

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

Воплощаем пользовательские сценарии в прототипы

Приступаем к самому сложному – проработав нашу тонну инфы с пользовательскими сценариями и проблемными местами, о которых мы говорили вначале, мы составляем прототипы наших страниц.

На каждом прототипе должно быть учтено:

– Каким образом пользователь переходит к тому или иному шагу;

– Какие варианты развития событий у него есть;

– Какие сложности могут его ожидать (например, что делать, если пользователь хочет приобрести обувь определенного цвета, а ее нет в наличии).

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

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

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

При составлении прототипов используются базовые и не очень базовые принципы UX. Они касаются всех элементов сайта – от расположения заголовков до подсказок в полях для заполнения. Например, если пользователь неправильно заполнил поле, оно должно подсвечиваться красным + там должен появиться значок (на случай, если пользователь не различает цвета) и – в идеале – пояснение, как именно правильно указать информацию.

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

Тестируем прототипы на кроликах… то есть, потенциальных потребителях

Дальше наступает самое интересное – мы отдаем наши прототипы на тестирование представителям целевой аудитории. Ни один, даже самый опытный дизайнер не сможет продумать все механизмы взаимодействия пользователя с интерфейсом, поэтому тесты очень важны.

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

Результаты тестирований тоже упаковываются в документ, и уже по ним делаются правки в прототипах. После этого можно повторить тестирование – и повторять до тех пор, пока результаты не будут удовлетворительными.

А когда уже дизайн?

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

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

Говоря о качественной визуальной проработке интерфейса, всегда хочется поставить в пример Apple. Как бы мы ни относились к «яблочной» технике, все-таки их лендинги остаются эталонными. Каждый элемент визуального интерфейса продуман и стоит на своем месте, дополняя идеально проработанный UX. И все это тоже закладывается в план ДО отрисовки основного дизайна.

А вот теперь уже дизайн

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

А от вас хочу услышать – как вы строите работу над сайтом? Тоже проходите все эти шаги, или все гораздо проще? Жду ваших комментариев!

Почитать больше о дизайне и UX

Я - Лена, UX/UI дизайнер, делаю осмысленный дизайн стартапов, сложных продуктов (ERP/CRM/BPM), работаю с банками, застройщиками, фармой. От 2000₽/час, от 100.000₽ за проект. Некоторые работы можно посмотреть тут, заказать тут.

Недавно создала свой ТГ-канал, где буду делиться своим опытом и полезными фишками. Подписывайтесь, будет интересно!

Elena Nexman
UX/UI дизайнер
0
Комментарии
Читать все 0 комментариев
null