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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Станьте 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-дизайна.

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

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

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

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

В заключение

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

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

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

Бонус

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

Как стать веб-дизайнером с нуля и работать удаленно на фрилансе
Регистрируйтесь на бесплатный 3-дневный онлайн-интенсив
Рекомендуемые статьи:
Веб-дизайн
15.02.2021
Краткое руководство, как стать веб-дизайнером с нуля
Часто ли вы задумываетесь о том, что могли бы улучшить дизайн посещаемых вами сайтов? Или, возможно, у вас уже есть личный блог, который вы активно ведете и заметили, что процесс проектирования и создания сайта вам очень импонирует. Если это так, и вы хорошо разбираетесь в деталях, обладаете талантом к креативу и творчеству, не боитесь технических […]
1289
Читать статью
Веб-дизайн
18.02.2021
Что такое веб-дизайн и чем занимается веб-дизайнер?
Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]
512
Читать статью
Веб-дизайн
8.07.2021
Айдентика бренда — что это такое и как ее создать
«Выделиться из толпы» — то, что необходимо и человеку, чтобы его узнавали, и компании. Даже применительно к людям говорят о «личном бренде», и это означает не только черты лица, прическу, манеру одеваться, но и многое другое — от «тона голоса» в соцсетях и в жизни, до каких-либо поступков, например, участия в благотворительных фестивалях для поддержки […]
143
Читать статью
Веб-дизайн
25.02.2021
Что такое модульная сетка в дизайне и зачем она нужна
Секрет успеха в любом виде дизайна зависит от того, как расположены все элементы друго относительно друга. В этом и есть смысл создания дизайн-макета сайта или приложения. Важной составляющей дизайна являются сетки. Они — основа всех макетов, инфографики и презентаций. Дизайн макета предполагает использование одной сетки или группы сеток, в зависимости от того, какая у вас […]
743
Читать статью
Веб-дизайн
30.06.2021
Что такое favicon и зачем он нужен вашему сайту
Внешний вид вашего сайта может сыграть важную роль в повышении узнаваемости бренда и того, как пользователи воспринимают ваш бизнес. Хороший сайт — это сочетание множества элементов веб-дизайна, которые вместе создают профессиональный внешний вид. Каждый день появляются десятки и сотни тысяч сайтов, есть все тематики и направления, поэтому необходимо не просто рекламировать себя и использовать различные […]
172
Читать статью
Веб-дизайн
7.06.2021
Адаптивный веб-дизайн сайта: что это и зачем нужен
В этой статье мы собираемся разобрать, что такое адаптивность сайта и ее важность в веб-дизайне и интернет-маркетинге. С ростом популярности Интернета многие компании начинают заявлять о своем онлайн-присутствии с помощью сайта или блога. Ежедневно запускается около тысячи интернет-ресурсов. И если раньше пользователи, чтобы заходить на сайты, использовали только настольные компьютеры со стандартным размером экрана, а […]
95
Читать статью
Веб-дизайн
4.03.2021
10 основных правил типографики в веб-дизайне
Что такое типографика Типографика является одним из важных элементов веб-дизайна. Она делает контент читаемым с помощью визуальной иерархии, правильно подобранных шрифтов и верстки текста. Плохая типографика может испортить впечатление пользователя о сайте, а с ростом популярности CSS и HTML она стала еще более важной. Как правильно отметил директор дизайнерского агентства Information Architects Оливер Райхенштайн: Веб-дизайн […]
649
Читать статью
Веб-дизайн
26.05.2021
Лучшие бесплатные и платные фотостоки (фотобанки)
Идеи для контента или готовые изображения и видео легко найти на фотостоках, а уникальные фото и видео с высоким качеством — в фотобанках. Среди сайтов нет четкого разделения, что такое фотобанк, а что такое фотосток. В этой статье примем их за синонимы. В фотобанке можно найти бесплатное изображение, в фотостоке — платное и наоборот. Одни […]
180
Читать статью
Веб-дизайн
14.07.2021
Прототип сайта — что это и зачем нужен
Каждый сайт должен продавать. Даже если речь идет о некоммерческом проекте, где нет прямого предложения «купи что-то», все равно посетитель «расплачивается» своим вниманием и временем, а приобретает необходимую информацию, развлечение, общение. Поэтому дизайн ресурса должен быть не просто «красивым» или «гармоничным», а еще и продающим. Прототип сайта — это «основа», на которой потом будет держаться […]
206
Читать статью
Веб-дизайн
6.03.2021
Что такое брендбук и как он может помочь бизнесу?
Задумывались ли вы о том, хороша ли визуальная идентичность вашего бренда в интернете? Суть брендинга в его уникальности, что делает узнаваемым продукт среди конкурентов, но владельцы малого и среднего бизнеса в потоке рутинных дел забывают про внешний вид своей компании, откладывая создание брендбука на потом. Наличие брендбука позволит вам: сэкономить деньги; повысить вовлеченность; привлечь больше […]
295
Читать статью
Веб-дизайн
1.03.2021
Сколько зарабатывает веб-дизайнер в штате и на фрилансе
Профессия веб-дизайнера будет востребована до тех пор, пока людям будут нужны сайты. Основными этапами процесса создания любого сайта являются: веб-дизайн; вёрстка страниц; программирование; наполнение контентом; тестирование. Веб-дизайнер приступает к работе практически первым, сразу после определения концепции и структуры сайта сайта. Что делает веб-дизайнер Веб-дизайнер отвечает за внешний вид сайта. Он заботится о том, чтобы сайт […]
210
Читать статью
Веб-дизайн
14.03.2021
Figma — что это за программа и как она работает
Что такое Figma и для чего используется? Figma — это инструмент веб-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию. Веб-разработчики используют Figma в качестве библиотеки компонентов системы дизайна. Figma контролирует актуальность рабочих версий макета, поддерживает функцию совместной работы, режим демонстрации и генерации кода. Figma — это редактор векторной графики для совместного проектирования интерфейсов, используемых в веб-разработке […]
260
Читать статью
Оставьте ваш комментарий