Дизайн пользовательского опыта — для идеального пользовательского опыта

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

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

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

Римский архитектор Марк Витрувий Поллио знал, какие компоненты должен иметь продукт, чтобы обеспечить хороший пользовательский опыт, еще в 1-й^1-й веке до нашей эры. В то время он описал три понятия «Firmitas» (прочность), «Utilitas» (полезность) и «Venustas» (красота) как основы хорошего дизайна пользовательского опыта — разумеется, не используя сам термин. Этот принцип применим и спустя более 2000 лет — независимо от того, хотите ли вы запустить веб-сайт, создать приложение или запрограммировать видеоигру.

Три фактора для хорошего пользовательского опыта

1. На первом месте стоит «прочность», или, выражаясь более современным языком, «функциональность». Проще говоря, это означает, что ваш продукт должен работать. Аварии, простои и долгое время загрузки не являются частью хорошего пользовательского опыта! Пользователь должен иметь возможность положиться на ваш продукт. Если вы не можете выполнить эти требования, пользователь будет искать другое место, и найти альтернативу не составит труда благодаря широкому спектру возможностей, предоставляемых современным Интернетом. Если ваш продукт не работает или работает не так, как задумано, целевая группа не получит рекомендаций из уст в уста или положительных отзывов в соответствующем App Store, а значит, вашим сайтом не будут делиться или ссылаться на него.

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

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

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

UX против UI: в чем разница?

Иногда пользовательский опыт (UX) путают с пользовательским интерфейсом (UI). Несмотря на то, что оба термина тесно связаны, между ними есть существенные различия: в то время как пользовательский опыт относится к внутреннему опыту пользователя при взаимодействии с продуктами и услугами компании, термин пользовательский интерфейс относится к визуальным элементам, таким как кнопки и иконки. Последний охватывает пользовательский интерфейс, на котором взаимодействуют пользователь и машина, и является более техническим термином, в то время как UX — более стратегический термин. Дизайн пользовательского опыта является результатом хорошего пользовательского интерфейса, но также включает такие области, как информационная архитектура, юзабилити или чисто эстетические аспекты. Таким образом, пользовательский опыт является всеобъемлющим термином, в то время как пользовательский интерфейс, с другой стороны, является дисциплиной.

Если на время отложить теорию в сторону, как выглядит хороший дизайн пользовательского опыта на практике? Во-первых, спросите себя, что представляет собой ваша компания или предложение: есть ли у вас уже фирменный стиль или важные рекомендации по дизайну в руководстве по стилю? Если да, то используйте это как основу для дальнейших шагов. Скорее всего, вы извлечете пользу из уже проделанной ранее работы. Это обеспечит последовательный и профессиональный внешний вид во всех ваших каналах коммуникации. Это позволит вам быть узнаваемым пользователями и исключит риск ошибок в дизайне в дальнейшем.

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

Сконцентрируйтесь на главном: перегруженный дизайн не принесет пользы и в конечном итоге будет отвлекать и раздражать. Хороший дизайн пользовательского опыта, напротив, минимален, прост и понятен. Когда речь идет о веб-сайтах, важно регулярно включать пустые пространства, чтобы дать пользователю время на обработку контента. Если дизайн будет слишком интенсивным, пользователь быстро перегрузится. Между текстом, изображением и любыми навигационными элементами должен быть достаточный промежуток, но при этом необходимо следить за тем, чтобы пространство не пропадало зря.

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

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

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

Цель дизайна пользовательского опыта заключается в том, чтобы обеспечить целевой группе наилучший возможный опыт в любое время. Это означает, что веб-сайт или программное обеспечение должны постоянно совершенствоваться, чтобы соответствовать прогрессирующим требованиям целевой группы. Простой пример: несколько лет назад классического дизайна сайта было достаточно. Но сегодня ваш сайт потеряет важных пользователей и, возможно, не принесет прибыли, если у него не будет отзывчивого дизайна для мобильных устройств или нативных приложений для устройств на базе iOS и Android. Пользователи могут решить использовать сайт ваших конкурентов, если их пользовательский опыт лучше. В этой статье мы расскажем, как сделать ваш сайт мобильным.

Получение отзывов пользователей и изучение целевой группы

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

Даже если ваше приложение находится в Google Play Store или Apple App Store, не всегда легко поделиться им с пользователями. Недовольные пользователи чаще оставляют отзывы, чем довольные, и сразу же дадут вам знать, если что-то не так с вашим продуктом или услугой — это может быть проклятием и благословением одновременно. С одной стороны, отзывы важны для дальнейшей оптимизации пользовательского опыта; с другой стороны, большое количество негативных отзывов может быстро повредить вашей репутации. Если возможно, быстро реагируйте на критику и предлагайте помощь. Желательно, чтобы вы уже провели обширные (и независимые) UX-тесты в преддверии запуска и уже свели риск к минимуму. Неплохо также разослать публичные сообщения, объясняющие, что ошибки были исправлены, так как это успокоит многих пользователей.

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

UX-дизайн: измерения с помощью трекинга глаз

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

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

Вы задаетесь вопросом, действительно ли все усилия и затраты на оптимизацию пользовательского опыта стоят того? Эти требующие времени и затрат этапы тестирования необходимы перед запуском программного обеспечения или веб-сайтов. Причины инвестирования времени и денег в успешное проектирование пользовательского опыта многочисленны и очевидны:

• UX-дизайн ставит пользователя на первое место.

• Это означает, что дизайн веб-сайта/приложения имеет объективно измеряемую основу: удовлетворение пользователя.

• Это способствует целеустремленной работе в команде.

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

• Постоянное тестирование и оптимизация пользовательского опыта приводит к созданию инновационных и современных дизайнов. Это позволяет вам опережать конкурентов.

• Эстетически привлекательный дизайн привлекает внимание и побуждает пользователей продолжать взаимодействие с вашим сайтом или приложением.

• Если пользователи знакомы с приложением, ваше предложение останется в их памяти дольше — это укрепит ваш бренд.

• Высокий уровень удовлетворенности клиентов и пользователей объединяет пользователей, вызывает «лайки» и/или рекомендации и в конечном итоге повышает коэффициент конверсии.

Для того чтобы предоставить пользователям подлинный опыт работы на сайте или с программным обеспечением, требуется не только функциональность, но и творческий подход: в противном случае ваш проект не будет процветать. Если долгое время загрузки приложения или сложного веб-сайта неизбежно, почему бы не сделать его частью дизайна пользовательского опыта? Держите пользователя в курсе событий, объясняя, почему сайт долго загружается: это улучшает пользовательский опыт. Следующие примеры показывают, как можно создать реальный опыт с помощью инноваций и творчества:

Сайт фильма «ПараНорман» — время загрузки становится веселым

Сайт анимационного фильма ParaNorman — пример отличного дизайна пользовательского опыта, который решает эту проблему изобретательным способом. Можно увидеть руку скелета, нетерпеливо барабанящую пальцами, чтобы саркастически продемонстрировать, что изображения на сайте загружаются долго. Это должно поднять настроение пользователя и сделать ожидание менее раздражающим. Фактический сайт также устроен аналогичным образом: пользователь прокручивает интерактивный сайт и знакомится с главным героем и фильмом.

Википедия — это здорово: онлайн-энциклопедия содержит несколько миллионов статей на более чем 280 языках — совершенно уникальный веб-проект. Даже платформы с такой популярностью и репутацией можно улучшить за счет современного дизайна пользовательского опыта, что и доказал победитель Webby в 2015 году за лучший пользовательский опыт: программное обеспечение, Wikiwand, можно загрузить как приложение на смартфоны и планшеты или установить как плагин для браузера на стационарные устройства. Своим современным дизайном он значительно превосходит обычный сайт Википедии.

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

Если сделать изображения более заметными, макет становится более спокойным. Некоторые особенно выразительные иллюстрации используются в качестве фона, например, на этой странице фоном служит картина Сандро Боттичелли «Рождение Венеры».

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

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