Если вы когда-либо отчаянно искали вкладку меню на веб-странице, если вам не удалось настроить приложение или вы провели несколько минут перед автоматом, пытаясь купить правильный билет на метро, то вы уже испытали противоположное хороший пользовательский интерфейс, также известный как UX. Теперь можно ли его улучшить? Что такое UX и почему это так важно ? А в чем разница между UX и UI (дизайном интерфейса)?
В этом руководстве мы даем ответы и базовую информацию о дизайне UX, а также показываем примеры хорошего дизайна взаимодействия с пользователем.
Что такое пользовательский опыт и что такое дизайн пользовательского опыта?
Хотя у термина «пользовательский опыт» нет точного определения, в течение некоторого времени это было ключевой проблемой для дизайнеров веб-страниц. Тем не менее, чтобы у пользователей был хороший опыт работы с программным обеспечением или веб-страницей, первым шагом является понимание того, что именно представляет собой пользовательский опыт, и изучение тех элементов, которые характеризуют хороший UX-дизайн. UX относится к совокупности эмоциональных переживаний пользователя на веб-странице, в приложении или любом другом продукте. . UX-дизайн в основном характеризуется знанием целевой аудитории веб-страницы, приложения или продукта и их потребностей. Другими словами: речь идет о сочетание привлекательного пользовательского интерфейса с функциональностью, убедительной и адаптированной к своей аудитории, приложения или веб-сайта.
Уже в первом веке до нашей эры римский архитектор Марко Витрувио определил компоненты, которые должны быть у продукта для обеспечения хорошего пользовательского опыта, описав основные концепции и характеристики хорошего дизайна пользовательского интерфейса для строительства: «firmitas» (сила или стойкость), «utilitas» (полезность) и «cuteness» (красота) . Сегодня, более 2000 лет спустя, три витрувианских принципа все еще действуют, независимо от того, идет ли речь о веб-странице, дизайне приложения или программировании видеоигры.
Три фактора хорошего пользовательского опыта
1. На первом месте находится «сила» или «твердость», которые в переносе на современность были бы эквивалентны функциональности: продукт просто должен работать . Сбои, простои и медленная загрузка нельзя для хорошего пользовательского опыта. Пользователи должны иметь возможность доверять вашему продукту, иначе они попытаются найти альтернативу; задача, которая, особенно в эпоху Интернета, выполняется практически мгновенно благодаря поисковым системам. Не секрет, что почти каждому приложению или веб-странице и ее функциям можно найти замену. Кроме того, если продукт не работает или, по крайней мере, не соответствует ожиданиям публики, он не получит никакой оценки или рекомендации в App Store, а веб-страница не будет опубликована или на нее не будут даны ссылки.
2. Второй полезность . Ваш сайт или приложение должны предлагать пользователю дополнительную ценность, например, товары интернет-магазина, которые вам необходимо приобрести тем или иным способом. На других веб-сайтах спрос связан с хорошим контентом, информативным или развлекательным, к которому применяются общие правила качественного контента. Посетите наше руководство, если это ваш случай, и вы хотите узнать, как оптимизировать свой контент. Здесь простота использования очевиднее: навигация должна быть интуитивно понятной, логичной, простой и легко запоминающейся. Функционал должен соответствовать требованиям целевой аудитории, быть актуальным и уметь адаптироваться к привычкам пользователей.
Оба примера как нельзя более очевидны : графическая программа, которая скрывает функцию обрезки изображения в трех подменю и не предлагает ярлыков, не подходит для своей целевой аудитории. Программа для письма, в которой, например, кнопки жирного шрифта, курсива и подчеркивания не видны на первый взгляд, не обеспечивает хорошего пользовательского опыта.
3. Что-то, что нельзя оставлять в стороне, заботясь о пользовательском опыте, — это красота, то есть эстетика, с которой вы представляете свое предложение . Это область, где часто встречаются некоторые препятствия, главным образом потому, что эстетические стандарты могут значительно различаться в зависимости от культуры, сцены или аудитории. Несоответствия и перегруженность отпугивают пользователей точно так же, как дизайн, который упускает из виду вашу целевую аудиторию. Поэтому дизайн должен быть не только функциональным, но и ориентированным на аудиторию.
Разница между UX и UI
UX-дизайн часто путают с дизайн интерфейса (UI) . Хотя оба термина тесно связаны между собой, между ними есть существенные различия, которые можно свести к простому эмпирическому правилу: в то время как пользовательский опыт объединяет все, что чувствуют пользователи, пользовательский интерфейс включает в себя все, что пользователи воспринимают (особенно визуальное). Этот термин охватывает поверхность, на которой взаимодействуют пользователи, то есть место, где происходит обмен между человеком и машиной. Таким образом, в то время как пользовательский интерфейс фокусируется на техническом аспекте, UX — более стратегическая концепция . Дизайн пользовательского опыта является результатом хорошего пользовательского интерфейса, но он также касается таких областей, как информационная архитектура, простота использования или чисто эстетические соображения. При этом UX-дизайн — это общий термин, а дизайн интерфейса — это субдисциплина.
Дизайн пользовательского опыта на практике: создайте реальный пользовательский опыт
Мы уже рассмотрели теорию, но как выглядит хороший UX дизайн на практике? Начните с вопроса, что характеризует вашу компанию или ваше предложение. Вы определились со своим фирменным стилем или у вас есть руководство по стилю, включающее рекомендации по дизайну вашей компании? Обе стратегии служат фундаментальной основой для реализации новых мер. Таким образом, вы извлекаете выгоду из ранее проделанной работы и гарантируете, что все ваши каналы связи будут работать. унифицированный и формальный внешний вид . Это поможет вашим пользователям узнать и запомнить вас, а также предотвратит ошибки в дизайне ваших проектов.
Затем вы должны спросить себя, чего вы хотите достичь с помощью своего веб-сайта или приложения. Каковы желания и потребности вашей целевой аудитории? Чего ваша аудитория ожидает от вашего продукта? Хороший UX-дизайн всегда подходит определенной группе . Это то, что позволяет вашим посетителям получить идеальный опыт. Например, веб-сайт готической хэви-металлической группы должен быть оформлен совсем иначе, чем веб-сайт фарфоровой фабрики. Следовательно, дизайн пользовательского опыта работает только для определенной аудитории, вкусы которой вы должны знать заранее. Для этого вам нужно будет проводить тесты, опросы или даже масштабные исследования аудитории, на основе которых вы сможете создавать портреты покупателей.
Сосредоточьтесь на главном : чрезмерный и экстравагантный дизайн неэффективен, отвлекает и может раздражать. С другой стороны, хороший дизайн взаимодействия с пользователем трезв, прост и ясен. Веб-страница также должна иметь пустые места, которые позволяют человеческому глазу обрабатывать содержимое. Перегруженный дизайн быстро перегружает пользователя. Рекомендуется спланировать и обеспечить достаточное пространство между текстом, изображениями и элементами навигации, особенно для того, чтобы не тратить драгоценное пространство впустую из-за плохого управления пространством.
Научитесь согласовывать цвета, шрифты и макет вашего контента друг с другом. UX-дизайн должен избегать несоответствие стиля . Пользователи могут быстро устать, если они будут постоянно сталкиваться с новыми цветовыми схемами или разными шрифтами. Кроме того, непоследовательный дизайн взаимодействия с пользователем всегда выглядит ненадежным. В этом случае также уместно учитывать интересы целевой аудитории.
Как только все эстетические аспекты будут прояснены, следующим шагом будет для оптимизации доступности и удобства использования . Хороший пользовательский интерфейс игнорирует медленную загрузку, быстро доставляет пользователя к месту назначения и делает наиболее важные функции доступными для него быстро и напрямую. Вместо того, чтобы размещать вложенные меню, которые в настоящее время являются табу, стоит разработать интуитивно понятный путь, который позволит пользователям легко ознакомиться с вашим программным обеспечением или веб-страницей.
Помните, что, несмотря на ваши усилия по оптимизации для достижения гладкого дизайна UX, неопытные пользователи часто терпят неудачу в фундаментальных вопросах. Как следствие, важно, чтобы вы не только концентрировались на концепции наиболее важных функций, но и предлагали комплексная служба поддержки . Для этой цели вы можете создать центральную кнопку справки, с помощью которой пользователи могли бы шаг за шагом ориентироваться в различных функциях приложения или перенаправляться в энциклопедию, где они могут искать и находить наиболее важные термины и функции. Форум, контактная форма или даже телефонная линия для запросов будут способствовать хорошему пользовательскому опыту.
Дизайн пользовательского опыта: необходимость постоянной оптимизации
Цель UX-дизайна — предложить аудитории наилучшие впечатления в любое время. Это означает, что вы должны работать над постоянным улучшением своего веб-сайта или программного обеспечения, чтобы не отставать от растущих требований вашей целевой аудитории. Пример: несколько лет назад классических веб-страниц было более чем достаточно, но сегодня, кто не предлагает своим пользователям адаптивный дизайн для мобильных устройств или нативное приложение для iOS или Android, теряет потенциальных клиентов и, в случае чего, конкуренты обеспечивают лучший пользовательский опыт, а также доход. Посетите наше руководство, если вы хотите оптимизировать свой веб-сайт для мобильных устройств.
Получите обратную связь от ваших пользователей и проанализируйте свою аудиторию
Чтобы достичь и поддерживать обновленный UX, необходимо быть в курсе мнения ваших пользователей . Хотя можно выявить и устранить несоответствия с помощью собственных тестов, это всегда подразумевает выполнение внутренних процедур, поэтому существует риск слепоты к самим рабочим ошибкам. Поэтому настоятельно рекомендуется проводить опросы пользователей или тесты, чтобы получить независимые мнения. Чтобы получить отзывы от своих пользователей, вы можете, например, создавать поощрения, проводить конкурсы, предлагать бесплатные пробные версии вашего предложения Premium или предметы из одной из ваших видеоигр.
Независимо от того, находится ли ваше приложение в Google Play Store или Apple App Store, вы сталкиваетесь с определенными проблемами, когда дело доходит до общения с вашими пользователями. Недовольные пользователи быстрее всего оставляют отзывы, немедленно сообщая вам, если что-то не так, что может быть как благословением, так и проклятием. Выяснение мнения ваших клиентов важно, с одной стороны, чтобы иметь возможность постоянно улучшать пользовательский опыт, но, с другой стороны, получение большого количества негативных реакций может быстро повредить вашей репутации. Если возможно, оперативно реагировать на критику и предлагать поддержку своим пользователям . Более того, благодаря обширному (и независимому) тестированию UX вашего продукта во время запуска этот риск сводится к минимуму. Кроме того, общедоступные сообщения, объясняющие, что ошибки были исправлены, обычно успокаивают пользователей.
Если у вашего бизнеса есть форум и социальные сети, вы можете использовать их, чтобы держать своих пользователей и потенциальных клиентов в курсе. Новости об изменениях в разработке, исправлениях ошибок или улучшениях дизайна UX часто хорошо воспринимаются, укрепляют лояльность клиентов и дают им возможность реагировать на изменения. Не менее важным для UX является обеспечение прозрачной и качественной информационной политики.
UX-дизайн и айтрекинг
Такие измерения, как анализ тепловой карты, визуализирующий удобство использования веб-страницы, могут быть дорогостоящими, но во многих случаях могут быть очень многообещающими. Проверенный метод создания тепловой карты отслеживание взгляда . С помощью специальных очков, веб-камер или внешних удаленных айтрекеров записывается частота и продолжительность моргания пользователя.
Полученные данные используются для оптимизации дизайна взаимодействия с пользователем, например, для аннотации, когда пользователь кажется сбитым с толку или потерянным при поиске определенной функции в меню. Таким образом вы получаете важные подсказки, которые позволяют оптимизировать взаимодействие с пользователем и адаптировать дизайн.
Почему стоит инвестировать в хороший UX-дизайн?
На этом этапе возникает вопрос, действительно ли необходимо вкладывать столько усилий и брать на себя затраты, возникающие в результате оптимизации пользовательского опыта проекта, особенно когда интенсивные (и дорогостоящие) этапы тестирования, требующие больших инвестиций времени они необязательны перед запуском веб-страницы или программного обеспечения. Причины вложения времени и сил в UX веб-проекта очень разнообразны и в то же время достаточно очевидны:
- UX ставит пользователей на передний план.
- Дизайн веб-страницы/приложения имеет измеримую основу: удовлетворенность пользователей.
- Произвол и капризы не являются частью творческого процесса.
- Способствует объектно-ориентированной командной работе.
- Внедрение современного и функционального дизайна UX экономит будущие затраты на разработку с точки зрения исправления ошибок, поддержки и обслуживания клиентов.
- Постоянное тестирование и оптимизация пользовательского опыта приводит к инновациям и привлекательному современному дизайну; оба аспекта выделяют ваше предложение среди конкурентов.
- Эстетически привлекательный дизайн привлекает внимание и побуждает пользователей дольше оставаться на вашем сайте или продолжать использовать ваше приложение.
- Если у пользователей есть большой опыт работы с вашим продуктом, это дольше остается в их памяти, тем самым укрепляя имидж вашего бренда.
- Высокий уровень удовлетворенности ваших клиентов и пользователей повышает лояльность клиентов, генерирует лайки и рекомендации и, в конечном итоге, увеличивает коэффициент конверсии.
Примеры передовой практики в UX-дизайне
Чтобы предоставить пользователям отличный опыт при посещении веб-сайта или использовании программного обеспечения, помимо технологии (ключевое слово: функциональность), необходимо сосредоточиться на креативность (ключевые слова: эстетика и удобство использования). В противном случае ваш проект рискует исчезнуть. Если долгое время загрузки неизбежно, почему бы не воспользоваться им, чтобы сделать его частью вашей UX-стратегии? Пользовательский опыт улучшается, даже если что-то кратко объясняется о тех элементах, которые загружаются. Таким образом, пользователи знают, что происходит и какому процессу следует следовать. Следующие примеры показывают, как создать реальный опыт, проявляя творческий подход и новаторство.
Веб-страница ParaNorman: когда время загрузки приносит удовольствие
официальный сайт анимационного фильма Паранорман — это пример отличного дизайна взаимодействия с пользователем, который решает именно ту проблему, о которой мы упоминали выше. Нетерпеливое барабанение пальцами скелета по экрану и, особенно, фразы: «Loading Images» (загрузка изображений) и «Loading Audio» (загрузка звука), вот что сделать ожидание более приятным и избежать плохих лиц пользователей. Главная страница также аккуратно оформлена. Там пользователь находит творческий и динамичный веб-сайт, где он может получить больше информации о главном герое фильма.
Wikiwand: полное обновление Википедии
Википедия фантастическая. Предлагая миллионы статей на более чем 280 языках, эта онлайн-энциклопедия является уникальным веб-проектом. Премия Webby 2015 года за лучший пользовательский опыт ясно показала, что платформа с таким статусом также может быть улучшен за счет современного пользовательского дизайна . Программное обеспечение Wikiwand можно загрузить на планшеты и смартфоны или использовать в качестве расширения для любого настольного браузера, придав Википедии свежий вид.
Теперь, почему так много усилий? Википедия всегда работала отлично и подавала информацию в изобилии, хотя, в зависимости от статьи и при определенных обстоятельствах, не выходит за рамки энергичного текста без крупных визуальных эффектов. Таким образом, Викимедиа не изменила основной из Википедии, а скорее изменил свою информационную архитектуру . С левой стороны каждой статьи есть небольшой указатель, который позволяет пользователю быстро ориентироваться и ориентироваться. Кроме того, тот факт, что индекс остается видимым при прокрутке вниз, особенно для длинных и сложных статей, очень помогает пользователям следить за содержанием.
Дизайн макета влияет на заметную роль изображений внутри поля. На заднем плане часто можно встретить особо значимые изображения. В английской версии, например, в статье о красоте используется известное «Рождение Венеры» Сандро Боттичелли.
На исходной странице Википедии такое же изображение появляется внизу и намного меньше по размеру. При этом важность изображения автоматически снижается, а фоном статьи, сразу вызывает интерес у читателя и заставляет его хотеть прочитать это. Не следует упускать из виду и воспитательную ценность этого типа изображения, поскольку, просто взглянув на статью, картина уже вызывает современный западный идеал красоты; все благодаря тому, как изображение было размещено, то есть на заднем плане.
Это справедливо и для других статей. Независимо от того, идет ли речь о «белом тигре» с фоновой фотографией животного или об «океане» с его фотографией, тема для обсуждения очевидна для пользователей. Таким образом, избитый девиз «картинка стоит тысячи слов» актуален как никогда.