UX дизайн

Что такое UX дизайн

UX (User Experience) — означает «опыт взаимодействия» или «опыт использования».

Опыт взаимодействия — это процесс использования человеком какой-то вещи.

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

Каким будет опыт взаимодействия зависит от многих факторов:

• Понятного интерфейса

• Графического дизайна

• Разборчивого текста

• Достоверной информации

• Архитектуры сайта

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

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

В чем разница между UX и UI дизайном

UX и UI — не одно и то же, у них есть и свои отличия. По факту UX — это абстрактная информация о пользовательском опыте. А UI — то как это выглядит визуально.

UI (User Interface) — расшифровывается как «пользовательский интерфейс», сразу понятно, что речь идет о визуальном оформлении. От UI дизайна зависит то, как выглядят элементы на страницах блогов, приложений и сайтов: цвета, размеры и стили иконок, кнопок, шрифтов и форм.

Хоть у UI и UX много общего, эти понятия отличны друг от друга, их нужно различать.

UI — работает над тем, как будет выглядеть продукт. UX — над тем, как его использовать. В качестве простого примера могу привести такую ассоциацию: UI — это материальная (видимая) часть, а UX — духовная, нематериальная (невидимая).

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

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

Принципы UX дизайна

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

Адаптивность

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

Также всем владельцам интернет-ресурсов стоит отслеживать источники трафика и статистику, с каких устройств и браузеров их сайт посещают чаще. 

Навигация

Должна быть простой. Зайдя на сайт или в приложение, человек должен легко ориентироваться. Он не захочет долго искать нужную вкладку или раздел. Никогда не прячьте разделы и подразделы вглубь сайта, пусть они будут как на ладони. Чем проще и короче путь пользователя, тем выше вероятность, что его пользовательский опыт будет положительным.

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

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

Свобода

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

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

Последовательность

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

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

Нововведения

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

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

Визуальная иерархия

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

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

Простота

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

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

Инструменты в UX дизайне

Расскажу о некоторых сервисах, которые помогут в работе UX дизайнеру. Многие из них — бесплатные.

Wireframe

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

Balsamiq

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

UXPin

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

Optimizely

Это инструмент для A/B тестирования. Чтобы запустить тест, не нужно обладать специальными навыками и разбираться в коде и технических деталях. Подойдет даже новичкам.

Crazy Egg

Полезный сервис для UX дизайнеров. Здесь каждый может разместить свой дизайн и получить обратную связь и комментарии от профессионалов. Это поможет сделать ресурс более удобным и положительно повлиять на пользовательский опыт.

Usability Tools

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

UserVoice

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

FileSquare

Позволяет создавать прототипы сайтов вместе со своей командой в режиме онлайн. 

Red Pen

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

Trello

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

UX Archive

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

UX Companion

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

Инструменты для подбора цветов

В принципе можно использовать любые сервисы-палитры, которые подберут несколько цветов для создания дизайна в едином стиле. Часто используют цветовой круг Adobe Color, генератор цветовых схем Coolors.co, Paletton — сервис для создания палитр и цветовых комбинаций.

Pendo

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

Как стать UX дизайнером

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

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

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

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

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

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

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

Материалы для изучения UX дизайна

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

Книги:

1. «Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать!» — Стив Круг

2. «Дизайн пользовательского интерфейса 2. Искусство мыть слона» — Влад Головач

3. «Дизайн для НЕдизайнеров» — Робин Вильямс

4. «UX-стратегия. Чего хотят пользователи и как им это дать» — Джейми Леви

5. «Дизайн привычных вещей» — Дональд Норман

6. «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия» — Расс Унгер и Кэролайн Чендлер

7. «Умный дизайн. Простые приёмы разработки пользовательских интерфейсов» — Джеффа Джонсона

Сайты и блоги:

1. Блог Usabilla

2. UX Mastery — сайт с материалами по UX дизайну

3. Сайт UX Magazine

4. Блог DT Telepathy

Ресурсы для вдохновения:

1. Pinterest

2. Behance

3. Awwwards

4. Dribbble

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

Что нужно знать UX дизайнеру

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

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

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

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

• Внимательность к деталям. Профессия UX дизайнера требует точности и внимательного отношения к мельчайшим деталям.

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

А вот какими знаниями и навыками должен обладать UX дизайнер.

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

• Графические редакторы. Любой дизайнер должен разбираться с популярными инструментами типа Adobe Photoshop, Figma и Adobe Illustrator.

• Основы цветовых сочетаний. Основополагающие знания для дизайнера.

• Типографика. Нужно знать, как правильно размещать текст на интернет-ресурсах, какой шрифт выбрать и т.д.

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

• Языки программирования. Стоит выучить хотя бы основы HTML и CSS, они пригодятся каждому дизайнеру.

• Аналитика. UX дизайнер должен уметь провести анализ приложения или сайта. Например, с помощью Google Analytics.

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

• Английский язык. Некоторые считают, что это необязательный навык — UX дизайнер может работать и без английского. Однако знание языка значительно упрощает работу: практически все инструменты и сервисы на английском, забивать каждую фразу в переводчик долго и нудно.

Выводы

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

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

Если остались вопросы, пишите в комментариях! Удачи!