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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Как сделать дизайн стартапа и не спустить деньги в трубу;
• Как проверить сайт перед запуском рекламы;
• Как бороться с перфекционизмом;
• Как выбрать дизайнера на проект;
• Как сделать дизайн сайта через призму UX.