text
Генеральный Директор

Как создать UX дизайн: пошаговая инструкция

  • 20 февраля 2018
  • 361
Фото © Shutterstock
Фото © Shutterstock

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

Понятие UI (как дизайна пользовательского интерфейса) определяют как UI = Дизайн взаимодействия + Визуальный дизайн

5 ужасных первых фраз, которые убивают e-mail-письмо

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

В нашей статье мы собрали 5 таких фраз, и способы исправить ошибки.

Активировать бесплатный доступ к статье >>>

Что такое визуальный дизайн? Образ сайта, то, как он выглядит; бренд. Дизайном взаимодействия называют коммуникации людей с вашим ресурсом. Если кто-то жмет на кнопку, меняется ли её вид, который подтверждает это нажатие?

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

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

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

Разница между UI и UX дизайном

Полезный интерфейс против красивого интерфейса.

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

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

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

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

Достижение целей против эмоциональной связи.

Посетители заходят на ваш сайт для совершения каких-то операций. Например, кто-то ищет щенка для небольшой квартиры.

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

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

Сначала UX дизайн, потом UI.

Каким образом UI и UX дизайнеры взаимодействуют в процессе проектирования?

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

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

Но этот подход не всегда прямолинеен и определяется множеством факторов:

  • Кто выполняет UX и UI?
  • Один дизайнер либо кто-то ещё, может, другая команда?

Использование во всех продуктах и услугах против использования только в интерфейсах.

Дизайн опыта взаимодействия (User eXperience) — широкая сфера, которая день ото дня набирает популярность. Сейчас не только организации, применяющие web, но и другие разработчики виртуальных продуктов или услуг начинают осознавать важность понимания своих посетителей и обоснования гипотез перед началом процесса создания.

Дизайн User eXperience предназначен исключительно для интерфейса пользователей (ПИ). Это вовсе не ограничивает его графическим ПИ компьютера, планшета или мобильного устройства. Сегодня интерфейсы можно обнаружить во множестве других продуктов. Это могут быть стиральные машины, часы, торговые автоматы, автомобильные панели приборов и многое другое.

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

5 удачных примеров UX дизайна

Пример 1. К2 

Как создать UX дизайн: пошаговая инструкция

Пример 2. Ronikco

Как создать UX дизайн: пошаговая инструкция

Пример 3. Raffer

Как создать UX дизайн: пошаговая инструкция

Пример 4. Venables Bell & Partners

Как создать UX дизайн: пошаговая инструкция

Пример 5. Herrlich Media 

Как создать UX дизайн: пошаговая инструкция

Как создать UX дизайн: пошаговая инструкция

Шаг 1. Проводим пользовательское исследование.

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

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

Шаг 2. Создаем обобщенную персону.

Итак, вы стали обладателем исходных сведений о своих пользователях, видите их нужды и ожидания. Дальнейший шаг — сведение их в пользовательскую персону. Полученные данные позволят вам создать 2-3 и более персон. Остановимся на том, что означает термин «персоны».

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

Так вкратце можно описать суть и назначение персон, которые и станут основой нашего продукта. Теперь мы будем созидать концепции для этих «личностей» — целевых пользователей нашего ресурса. Но когда персоны обрели свой статус в области UX дизайна (параллельно они используются в маркетинге), стало ясно, что отдельных дизайнеров волнует лишь создание ярких, фантазийных персон, и они наполняют их профили несоответствующей случаю информацией. Мы полагаем, что персона пользователя в UX дизайне намного отличается от подобного прообраза в маркетинге. У нас персона призвана осуществлять цели пользователей (шаблоны) и обычно символизирует группу людей с аналогичными целями. Её назначение — устранять преграды на пути к достижению этих целей. Это является важнейшей целью нашего продукта. Кроме того, мы дополняем её элементами пользователей, относящимися к его запросам. В результате этого мы создаем UX дизайн, подходящий для разнотипных пользователей. Поэтому не стоит брать из Сети первый попавшийся шаблон персоны. Нужно создать настоящий образ, основанный на полученных вами данных, на опросе (пользовательском исследовании), проведенном вами на первом этапе.

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

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

Шаг 3. Прорабатываем пользовательские истории, карту сценария, карту сайта.

Настало время подключать команду. Мы имеем персоны и ПИ (идеи пользователей). 

Причиной введения в строй команды (UI дизайнер; визуальный дизайнер; менеджер по продуктам; разработчики; специалист по качеству разработки и др.) является необходимость всем участникам изначально понять продукт. Наверняка вам кажется, что использовать команду рановато, и это потребует массу времени. Однако в действительности это как раз сэкономит ваше время, поскольку вам не придется в дальнейшем начинать пространные объяснения на вопрос какого-то продуктового менеджера «Почему мы решили остановиться именно на этом цвете?». Поэтому команда в полном составе должна узнать продукт в самом начале его подготовки.

Создание карты сценария.

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

Главное — прикрепить эти идеи к персонам пользователей и разместить их рядом. Придерживайтесь простоты, так как доска не должна смотреться круто.

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

 Создание пользовательского потока.

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

 Создание карты сайта.

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

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

Шаг 4. Приступаем к созданию ваерфрэйма и интерактивных прототипов.

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

Большинство дизайнеров предпочитает создавать высокоточные ваерфрэймы (скелеты будущего UX дизайна), однако в нашем процессе будем пользоваться ваерфрэймами небольшой точности. Почему? Просто лучше потратить время на изучение дизайна, а не рисование. Не обращайте внимания на пиксели, насколько крупным или мелким окажется текст. Вам нужно опробовать различные подходы, чтобы понять, какой из них лучше. Можете воспользоваться «design sprint» — отличный способ получения быстрого и качественного результата. Назначение ваерфрэймов — возможность для каждого предложить свои идеи, изучить различные возможности. А когда все выберут единственный финальный вариант, можно приступать к обработке этого дизайна, избегая дальнейшей путаницы и поправок.

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

Для генерации идей хватает карандаша и бумаги. Чтобы детализировать и прототипировать проект, можно воспользоваться Sketch (в качестве главного инструмента) либо программой Adobe Experience Design (Adobe XD). Все это поможет при составлении эскизов для UI дизайна.

На данном этапе появляется большое поле для обсуждений, но фактически все будет зависеть от стиля работы вашей команды. Для быстрого результата можно применить «design sprint», а потом доработать то, что получится. После этого создайте прототип, чтобы увидеть, работает ли должным образом ваш дизайн, как вы планировали изначально. Можете показать его реальным пользователям и организовать тестирование, отметить реакцию посетителей. Затем откорректировать имеющийся или сделать следующий прототип, чтобы опять продемонстрировать его клиентам.

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

Шаг 5. Разрабатываем UI, визуальный дизайн.

После создания ваерфрэймов и прототипов в процесс вступают UI дизайнеры. Но с UI всё непросто. Потому что отдельные стартапы не очень усердствуют над начальной или бета-версией программы. Однако в дальнейшем UI и UX дизайны должны будут идти бок о бок. UI отвечает за красоту, UХ временами применяет иной подход, но в результате они всегда должны быть согласованы. Четко соблюдайте выбранную гамму цветов, величину шрифтов и наполнение. Можно подготовить инструкцию по стилю UI — отличный способ выдерживать последовательность проектирования.

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

Шаг 6. Передаем проект разработчикам.

Для объединения разработчиков с дизайнерами мы советуем использовать Zeplin. Данный инструмент поможет создателям освоить элементы дизайна, не вникая в дизайнерские файлы и упрощая им жизнь. Последним необходимо лишь все тщательно подготовить согласно рекомендациям и перенести в Zeplin, который поддерживает iOS, Android и web-дизайн. А главное, что для небольших проектов он предоставляется бесплатно.

Шаг 7. Анализируем метрики.

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

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

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

Как создать лучший UX дизайн

  1. Цвет делает страницу визуально выразительной, но выгоднее опираться на людей с нетипичным цветовосприятием, чтобы убедиться: контент запросто видят и читают все.
  2. Симметричное размещение объектов сайта вызывает у посетителя положительные эмоции.
  3. Последовательно компонуйте объекты, направляя пользователя в нужное место.
  4. Выдерживайте согласованность навигации в пределах вашего сайта. Посетителям некомфортно переходить на новые виды навигации при каждом переходе между страницами.
  5. Выбирайте простой и интуитивный дизайн.
  6. Применяйте одинаковый цвет для мотивации к действию, но не пользуйтесь им для других элементов содержимого.
  7. Если текст вашей страницы загружается раньше изображений, посетитель начнет чтение раньше просмотра остального контента.
  8. Намекните пользователю, что внизу страницы имеется полезная информация, чтобы он захотел пройти по ней дальше.
  9. Пользуйтесь синим шрифтом лишь для ссылок. Посетители сайтов привыкли воспринимать такой текст в качестве ссылки, поскольку это является настройкой по умолчанию.
  10. Сокращайте web-страницы как можно больше. Хотя некоторые люди читают интересный контент полностью, но в основном пользователи этого не делают.
  11. Если вам необходима страница с большой прокруткой, лучше создать фиксированное меню, не движущееся при проворачивании и создающее навигацию без возврата вверх.
  12. Не делите контент на страницы. Как правило, это воспринимается в виде приема для повышения числа просмотров, когда отсутствует необходимость в образовании отдельных страниц.
  13. Удостоверьтесь, что все страницы загружаются не более двух секунд. Результаты исследований показали, что при долгой загрузке пользователь уходит на другие ресурсы, где нужное содержимое отображается моментально.
  14. Текст кнопок меню навигации должен быть коротким (до трех-четырех слов) и начинаться ключевыми фразами.
  15. Сообщения об ошибках должны быть достаточно полными. Объясните пользователю причину сбоя и покажите, как ее устранить либо вернуться по прежнему адресу.
  16. Цель любой страницы вашего сайта должна быть очевидной. Если необходима рубрика «Помощь», советы нужно формулировать коротко и ясно. В основном люди не посещают данный раздел, поэтому нужно сделать структуру и навигацию сайта максимально простой.
  17. Опции «Назад» и «Отмена» должны быть легкодоступными для посетителя.
  18. Все иконки должны иметь простой и понятный UX дизайн. Не пользуйтесь ими, чтобы просто заполнить страницу элементами графики, не перегружайте ресурс.
  19. Не применяйте для мобильного контента элементы, активируемые с помощью двойного щелчка.
  20. Текстовка ссылок должна прямо указывать пользователю, куда он попадет. Не применяйте туманные фразы, вроде «смотрите здесь».
  21. Создавайте ссылки в виде ссылок, не прячьте их под «привлекательным» дизайном.
  22. Размещайте главную информацию вверху сайта. Можно, конечно, расположить её ниже, но с точки зрения нужд посетителя, сверху она сразу привлечет внимание того, кто её ищет.
  23. Обязательно создавайте форму «Поиска по сайту», если он состоит из нескольких страниц. Это поле должно напоминать привычный «Поиск», но вмещать весь запрос целиком.
  24. Воздержитесь от слайдеров. Только 1 % посетителей просматривает слайды, поскольку каждый из них нуждается в загрузочном времени (в особенности, если каждый последующий кадр перезагружает страницу).
  25. Избегайте курсива и слов, полностью состоящих из заглавных букв. Все это усложняет восприятие.
  26. Следите за контрастностью при разработке мобильного контента. На слишком ярком экране отдельные элементы могут быть невидимы для глаз.
  27. Не пользуйтесь всплывающими окнами, возникающими без активных действий пользователя. При их появлении, независимо от содержания, многие люди тут же покидают сайт.
  28. Большинство посетителей перед чтением просматривают текст. Для выделения самой важной информации применяйте заголовки, жирный шрифт, маркированные списки и прочие элементы UX дизайна.
  29. Создавайте кнопки, комфортные для мобильного контента. Они должны иметь минимальный размер 1×1 см, а пространство вокруг каждой должно быть достаточным для свободного нажатия.
  30. Не пользуйтесь техническими терминами и профессиональным сленгом, когда без них легко обойтись.
  31. Большинство посетителей, нуждающихся в информации, не знают предмета, поэтому делайте контент доступным рядовому читателю.
  32. Устанавливайте удобные для чтения шрифты, поскольку красивые буквы выглядят оригинально, но воспринимаются с трудом, отталкивая пользователей.
  33. Воздерживайтесь от мелкого шрифта, когда страница загружена текстом.
  34. Не ставьте на свой ресурс баннеры, за исключением тех, которые явно отличаются от элементов стандартной рекламы. В основном, посетители не обращают на них внимания, думая, что это раскрутка.
  35. Всегда публикуйте правдивую информацию о своих возможностях, знаниях, услугах, разработках или доставках. Если вы размещаете лживую рекламу (данные) для привлечения посетителей, обман в дальнейшем вскроется, а люди навсегда покинут ресурс.
  36. Используйте повторно то, что приносит успех. Если одна из ваших статей повышает трафик вашего сайта, публикуйте её снова. Но не просто копируйте текст, так как системы поиска это увидят. Обновите информацию, переработайте материалы, дополните их свежими данными.
  37. Обдумайте имидж бренда и внедряйте его на всех сетевых ресурсах. Узнаваемый бренд привлекает больше внимания и вызывает благосклонность потребителя. Создайте свой уникальный образ, звучание и стиль, интегрируя его во весь свой сетевой контент.

Подписка на статьи

Чтобы не пропустить ни одной важной или интересной статьи, подпишитесь на рассылку. Это бесплатно.

Рекомендации по теме

Школа руководителя

Школа руководителя

Проверьте свои знания и приобретите новые

Записаться

Самое выгодное предложение

Самое выгодное предложение

Станьте читателем уже сейчас

Мы в соцсетях
А еще:
Простите, что прерываем Ваше чтение

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

Предлагаем вам зарегистрироваться и продолжить чтение. Это займет всего 2 минуты.

У меня есть пароль
напомнить
Пароль отправлен на почту
Ввести
Я тут впервые
2 минуты, и Вы продолжите читать
Введите эл. почту или логин
Неверный логин или пароль
Неверный пароль
Введите пароль
вконтакте
одноклассники
Простите, что прерываем Вас...

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

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

У меня есть пароль
напомнить
Пароль отправлен на почту
Ввести
Я тут впервые
и скачать все файлы
Введите эл. почту или логин
Неверный логин или пароль
Неверный пароль
Введите пароль
вконтакте
одноклассники
Простите, что прерываем Ваше чтение

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

Предлагаем вам зарегистрироваться и продолжить чтение. Это займет всего 2 минуты.

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