Веб-дизайн
20 февраля 2021
1156

UX-дизайн — что это такое и почему так важен для пользователя

Разбираем базовые принципы и основы UX-дизайна на конкретных примерах
Содержание:

UX-дизайн (от англ. user experience — «опыт пользователя») — это изучение потребностей и задач пользователей, когда мы говорим про их опыт взаимодействия с сайтом или приложением.

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

Фокус на целевой аудитории

Сайты делаются не для поисковых роботов Google & Yandex, а для людей.

Самый первый шаг перед созданием сайта — определить аватар клиента, который будет покупать продукт, и для этого вам необходимо провести анализ целевой аудитории. Задайте себе следующие вопросы:

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

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

  • Если мы продаем услуги по химчистке ковров, то наши клиенты хотят узнать точную стоимость услуги. А следовательно — мы можем внедрить калькулятор расчета услуги на сайте;
  • Если у нас интернет-магазин теннисных ракеток, то изучив целевую аудиторию, будет логично использовать фильтры для выбора товара по бренду, цене и стране производителя;
  • Если мы хотим создать сайт по продаже услуг СТО, ошибкой будет использовать розовый цвет в стилистике сайта, а синий с белым вполне подойдут для такой тематики.
Пример калькулятора расчета уборки квартирыПример калькулятора расчета уборки квартиры

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

Освойте UX/UI веб-дизайн и зарабатывайте удаленно

Поведенческие факторы пользователя

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

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

Почему так происходит, что пользователи прекращают взаимодействие с сайтом на каком-то определенном этапе?

Например, положив товар в корзину, клиент нажал на кнопку заказать и для оформления заказа ему предлагается заполнить 20 полей. Это сразу отталкивает и человеку не хочется тратить время на заполнение полей. Ему проще найти другой сайт, где заказать товар можно в 1 клик.

Кнопка «Купить в один клик»Кнопка «Купить в один клик»

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

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

Удобная навигация и иерархия

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

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

Обычно используются в интернет-магазинах такие списки подкатегорий товаров.

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

А если пользователю интересны топ книг определенного жанра? Мы можем это выделить отдельно.

Выпадающее меню со списком жанров литературыВыпадающее меню со списком жанров литературы

Принцип подобия

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

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

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

На нашем блоге тоже есть такая кнопка. Посмотрите в правый угол снизу.

Кнопка прокрутки наверх сайтаКнопка прокрутки наверх сайта

Контекст

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

Логично, что мы можем указать на тексте кнопки отправки заявки контекстную фразу «Получить каталог и прайс», как в примере ниже:

Лучше меньше, или «Дизайн без дизайна»

Для UX основная цель — снижение операционных действий пользователей.

Подход «меньше значит больше» подчеркивает простоту и чистоты, а не чрезмерное творчество в дизайне. В результате этого принципа появился знаменитый дизайн iPhone и iPod.

В 2007 году Apple модернизировала клавиатуру телефона, следуя философии «меньше — значит больше», и родился iPhone. Сайт Apple также следует тому же принципу дизайна.

Чистый дизайн сайта Apple.comЧистый дизайн сайта Apple.com

Типографика

Типографика — это искусство насыщать текст визуальной формой.

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

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

Типографика бизнес-издания ForbesТипографика бизнес-издания Forbes

Подтверждение перед действием

Одна из распространенных ситуаций: пользователь может непреднамеренно разместить заказ. Родителям часто приходится требовать возврата денег после того, как их маленькие дети случайно делали покупку в интернет-магазине.

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

Очистка истории и кэша на iPadОчистка истории и кэша на iPad

Правильная атмосфера

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

Яркий пример — сайт компании, которая доставляет обеды строителям:

Обеды Смайл — доставка сытных обедов строителям от 130 руб. / деньОбеды Смайл — доставка сытных обедов строителям от 130 руб. / день

Если вы работали на стройке или рабочим на заводе, то вам знакомо: грязная спецодежда и рукавицы, запотевшие волосы и кожа от 4 часовой работы в каске и желание съесть порцию домашней еды — горячие макароны с котлеткой.

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

Освойте UX/UI веб-дизайн и зарабатывайте удаленно

Визуальная грамматика

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

  • значки;
  • иллюстрации;
  • узоры и многое другое.

Разбейте их на части, и вы получите основные элементы плоскостей, точек и линий, как показано ниже.

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

Повествовательный дизайн

Еще один из принципов UX-дизайна — это повествовательный дизайн, или сторителлинг (рассказ истории). 2 важных элемента повествования — это время и ритм:

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

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

В заключение

Если вы хотите знать больше основ UX, ознакомьтесь с нашим онлайн-курсом «Дизайн-маркетолог». Это учебный курс для самостоятельного обучения под руководством наставников, который проведет вас от новичка до профи в веб-дизайне и маркетинге с готовым портфолио и заработком от 1000$/мес. в удаленном формате.

На курсе вы научитесь:

  • Придумывать и проектировать удобные для пользователя интерфейсы сайтов;
  • Прорабатывать маркетинговую упаковку сайтов;
  • Создавать продающие сайты на конструкторе сайтов Tilda и продавать заказчикам;
  • Оформлять свое портфолио и продавать услуги на рынке по чеку выше среднего.

Бонус

Мы для вас подготовили подарок — 2-часовой бесплатный вебинар «UX/UI-дизайн для чайников»↓↓↓

Как стать веб-дизайнером с нуля и работать удаленно на фрилансе
Регистрируйтесь на бесплатный онлайн-курс
Рекомендуемые статьи:
Веб-дизайн
6.03.2021
Что такое брендбук и как он может помочь бизнесу?
Задумывались ли вы о том, хороша ли визуальная идентичность вашего бренда в интернете? Суть брендинга в его уникальности, что делает узнаваемым продукт среди конкурентов, но владельцы малого и среднего бизнеса в потоке рутинных дел забывают про внешний вид своей компании, откладывая создание брендбука на потом. Наличие брендбука позволит вам: сэкономить деньги; повысить вовлеченность; привлечь больше […]
750
Читать статью
Веб-дизайн
24.10.2021
Меню сайта — что это и зачем нужно
Когда мы приходим в ресторан или кафе, официант кладет список блюд, напитков, десертов, соусов. Во многих магазинах ассортимент предлагается по каталогам, особенно если это не супермаркет, в котором человек сам должен сориентироваться и выбрать, что ему купить, а формат мини-маркета. Меню сайта, как в ресторане и магазине, помогает посетителю выбирать «блюдо»: переходить из одного раздела […]
220
Читать статью
Веб-дизайн
14.03.2021
Figma — что это за программа и как она работает
Что такое Figma и для чего используется? Figma — это инструмент веб-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию. Веб-разработчики используют Figma в качестве библиотеки компонентов системы дизайна. Figma контролирует актуальность рабочих версий макета, поддерживает функцию совместной работы, режим демонстрации и генерации кода. Figma — это редактор векторной графики для совместного проектирования интерфейсов, используемых в веб-разработке […]
1537
Читать статью
Веб-дизайн
19.07.2021
Пагинация страниц сайта — что это и как ее сделать
Когда мы читаем книгу, информация в ней подается постранично. Прочитывая одну страницу, всегда можно перевернуть, чтобы перейти к следующей, поставить закладку на самом важном или интересном месте, открыть сразу на трехсотой или четыреста двадцать шестой. Это принцип не только «бумажных» книг — электронные работают аналогично, потому что подобный формат привычен и удобен всем людям. Что […]
1123
Читать статью
Веб-дизайн
19.03.2021
Zero Block на Tilda — что это и как работает
Можно ли создать собственный дизайн на Tilda? Сервис Tilda многими воспринимается только в качестве обычного конструктора сайтов, на котором по-быстрому можно сложить сайт-визитку или незамысловатый лендинг. Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез. Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то […]
1286
Читать статью
Веб-дизайн
1.03.2021
Сколько зарабатывает веб-дизайнер в штате и на фрилансе
Профессия веб-дизайнера будет востребована до тех пор, пока людям будут нужны сайты. Основными этапами процесса создания любого сайта являются: веб-дизайн; вёрстка страниц; программирование; наполнение контентом; тестирование. Веб-дизайнер приступает к работе практически первым, сразу после определения концепции и структуры сайта сайта. Что делает веб-дизайнер Веб-дизайнер отвечает за внешний вид сайта. Он заботится о том, чтобы сайт […]
701
Читать статью
Веб-дизайн
30.06.2021
Что такое favicon и зачем он нужен вашему сайту
Внешний вид вашего сайта может сыграть важную роль в повышении узнаваемости бренда и того, как пользователи воспринимают ваш бизнес. Хороший сайт — это сочетание множества элементов веб-дизайна, которые вместе создают профессиональный внешний вид. Каждый день появляются десятки и сотни тысяч сайтов, есть все тематики и направления, поэтому необходимо не просто рекламировать себя и использовать различные […]
448
Читать статью
Веб-дизайн
17.10.2021
Футер сайта — что это и зачем нужен
Сайты строятся по определенной логике и структуре. Это удобно и пользователям, которые привыкают к стандартной «логике» — например, большинство станет искать разделы меню вверху справа или слева, информацию о товарах в корзине на сайте интернет-магазина — справа в углу. Программистам тоже подобная стандартизация облегчает задачу создания сайта, верстки, а поисковые роботы и другие «искусственные интеллекты», […]
488
Читать статью
Веб-дизайн
4.03.2021
10 основных правил типографики в веб-дизайне
Что такое типографика Типографика является одним из важных элементов веб-дизайна. Она делает контент читаемым с помощью визуальной иерархии, правильно подобранных шрифтов и верстки текста. Плохая типографика может испортить впечатление пользователя о сайте, а с ростом популярности CSS и HTML она стала еще более важной. Как правильно отметил директор дизайнерского агентства Information Architects Оливер Райхенштайн: Веб-дизайн […]
1467
Читать статью
Веб-дизайн
9.04.2021
Что такое референсы и для чего они нужны
Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]
594
Читать статью
Веб-дизайн
11.07.2021
HEX-код что это и как работает для обозначения цветов
Работа с цветом — это основной инструмент графического и веб-дизайнера. Каждое приложение и сайт подразумевает использование собственных оттенков, даже если выбран максимально лаконичный стиль. На этапе создания макетов подсказки по выбору цветовой гаммы есть во многих редакторах, та же компания Adobe предлагает для своих продуктов основные виды гармоний: колесо; комплементарность; контраст; оттеночные «гибриды» и многое […]
3311
Читать статью
Веб-дизайн
5.04.2021
Мокап – что это и зачем нужен в дизайне
Что такое мокап Мокап – это макет, с помощью которого заказчик может увидеть свой продукт в трехмерном изображении, то есть визуально представить и понять, как будет выглядеть готовый продукт в реальности. Обычно это файл в формате PSD, который заказчик может открыть у себя на компьютере либо телефоне и посмотреть, как будет выглядеть: логотип; дизайн фирменного […]
1668
Читать статью
Оставьте ваш комментарий