Блог онлайн-университета Code breakers

Основы UX/UI дизайна для ноукодеров

Объясняем простыми словами, что такое UX и UI и в чём разница, как много нужно знать ноукодеру и как всему этому научиться.
Время чтения: 15 минут

В чём разница UX и UI

Вы наверняка встречали профессию «UX/UI дизайнер». UX и UI действительно в качестве специализации и навыка часто идут рядом. Но нередко за эти области отвечают разные дизайнеры. UX и UI справедливо связаны, потому что одно без другого не работает — но это разные области!
UI — от английского user interface — это всё, что видит пользователь при работе с сайтом или приложением. Это то, что делает цифровой продукт красивым и эстетически приятным. Эта часть отвечает за визуальное восприятие продукта и за его воздействие на эмоции.
UX — от английского user experience — это то, как работает цифровой продукт. Это то, что делает цифровой продукт действующим и эффективным. Это опыт пользователя, но не какой-то абстрактный, а конкретный, именно опыт взаимодействия с UI.
Иными словами, UX отвечает за то, чтобы, к примеру, при нажатии кнопки «Положить в корзину» товар добавлялся в корзину, пользователь получать подтверждающий поп-ап, а на иконке корзины появился маркер «1». А UI отвечает за то, чтобы кнопка «Положить в корзину» была привлекательная, заметная и понятная.
UX пошагово ведёт пользователя к его цели, а UI интуитивно показывает, как это сделать.
UI — это использование визуальных приёмов для создания связи между пользователем и продуктом. UX — использование в проектировании результатов аналитики привычек и ожиданий пользователей
Одно без другого не работает, потому что UX один без UI будет лишь каркасом без красоты и смысла — как голые стены дома без обоев. А UI один без UX будет лишь красотой без каркаса и смысла — как гора рулонов обоев без стен, на которые нужно их поклеить.
Почему всё это важно? Мы ведь не хотим покупать некрасивую одежду или есть неаппетитную еду. На некрасивом сайте тоже не возникает желания приобретать что-либо. Значит, над дизайном надо работать. Но если всё просто выглядит красиво, но не работает, или работает криво, или не так, как ожидаете, то это тоже вызывает раздражение — вкладка или приложение закрывается.

Как много нужно знать ноукодеру

Тонкости UX и UI изучают в университете годами, на них построены профессии. Это действительно объёмные области.

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

UX дизайн для ноукодера

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

Всё начинается с вопроса: что хочет пользователь? Записаться на консультацию к тренеру, забронировать столик или найти жильё, купить что-либо в онлайн-магазине или, наоборот, продать, если у вас маркетплейс — и так далее.

А дальше надо развивать это «Что хочет пользователь?» пошагово — и продумывать, какие «хлебные крошки» приведут юзера к его цели, а какие будет отвлекать.
Поняли, да? Чтобы стать сильным ноукодером в части UX вам нужно качать логическое мышление и практиковаться в проектировании пользовательского пути.
Как учиться UX дизайну? Задавать вопросы «Как пользователь найдёт в моём приложении … ? (подставить нужное)», «Что будет, если…? (нажмёт эту кнопку, перейдёт по гиперлинку и тд.)», «Как пользователь поймёт, что ….?».
Давайте потренируемся развивать логику при размышлении над проектом.

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

  • Что должен видеть менеджер на платформе?
  • Какие детали ему нужны о каждом сотруднике?
  • Как менеджеру быстро найти нужного сотрудника?
  • Как менеджер сможет добавлять/удалять сотрудника из списка работников компании?
  • Что будет, если запись на одного сотрудника будут просматривать и изменять два менеджера?
  • Как предупредить менеджера, что он заполнил данные о сотруднике с ошибкой?
  • Как менеджер сможет отслеживать текущее положение дел с нанятыми кандидатами и недостающими кадрами?
  • Какие нужны функции менеджеру, чтобы он мог связаться с потенциальным кандидатом?
Таким образом, исходя из продукта, особенностей и целей, проектируется путь пользователя внутри цифрового продукта. Продумывается всё, что направит его к достижению целевого действия и оценивается то, что может ему помешать — то есть учитываются позитивные и негативные сценарии. Одновременно на этом же этапе надо уметь анализировать и конкурентов, чтобы понимать, к каким паттернам привыкли пользователи.
Вывод. Вам надо учиться понимать задачи и анализировать процессы. И помогает в этом визуализация.
Уделяйте внимание изучению поведения пользователей (customer development), составляйте флоу (flow) и Customer Journey Map — или карту пути пользователя 👇🏻
  • Flow в нашем случае может выглядеть как архитектура проекта, позволяющий составить представление о нужных экранах и целевых действиях, которые на них выполняются. Ниже представлен пример, как это может выглядеть.
  • Customer Journey Map чуть более сложный инструмент. Это визуализация пути пользователя с учётом успешных шагов и проблем, которые встречаются пользователю на его пути, и сопутствующих эмоций. CJM особенно эффективен, когда у вас уже есть пул юзеров и данные по ним. Но если приложение только в стадии проектирования, то придётся фантазировать или опираться на собственные ощущения.
Составить пользовательский путь можно в гугл-документе или в таблицах, но лучше всё же воспользоваться какой-нибудь программой для визуализации — Miro, Figma, Sketch, Canva, Canvanizer, FlowMapp, MindMeister, Procreate.

UI дизайн для ноукодера

Для создания дизайна приложений ноукодеру достаточно кратко изучить основные моменты:
  • теорию цвета;
  • основы типографики;
  • законы Гештальта.
Разберём всё по порядку 👉🏻

Теория цвета

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

И снова хорошая новость — вам не нужно полагаться на свой визуальный вкус или теоретические знания. В наши дни есть множество готовых решений, приёмов и программ, которые помогут решить, какие цвета вам нужны.
  • В подборе цветов хорошо помогает цветовой круг. Надо только разобраться, как он работает и знать, что такое первичные, вторичные, третичные цвета и как подбирать цветовые сочетания по цветовому кругу.
Ещё помогут специальные сервисы. Вот лишь часть таких инструментов:
Учитывать важно и контрастность цветов — чтобы один цвет хорошо был виден и хорошо читался на другом. Вновь для этого есть специальные сервисы.
  • Упомянутый Coolors.co помогает подобрать контрастное сочетание цветов и даёт оценку, насколько удачно это сочетание.
  • Color Contrast Cheker показывает сочетание оттенков в шестнадцатеричном коде.
Как использовать цвета?
Например, принято, чтобы основной цвет был связан с главными элементами (вот и сошлись UX и UI). То есть, главные кнопки, привлекающие внимание баннеры, главные по смыслу карточки должны быть основного цвета. Дополнительные цвета в этом случае будут поддерживать интерфейс, выделяя второстепенные элементы. Элементы, вроде неактивных кнопок и чекбоксов, можно делать в оттенках основного цвета — например, если основной у вас салатовый, то неактивная кнопка может быть бледно-зелёного цвета.

Типографика

Вот главные принципы и советы по работе с типографикой в цифровом проекте 👉🏻
  • Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-тракетории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.
  • Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.
  • Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно на:

  • Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

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

  • Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

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

  • В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

  • Предпочтительный минимальный кегль для веба и приложений 16рх, минимальный 12рх для Android и 11рх для iOS.

Законы Гештальта

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

21 закон UX дизайна

Эти законы собраны и сформулированы на сайте lawsofux.com Законы очень ёмко излагают паттерны поведения пользователей и привычные схемы работы цифровых продуктов. Настоятельно рекомендуем прочитать их хотя бы раз, а потом временами возвращаться и освежать в памяти эту информацию. Используйте накопленный дизайнерами опытами в своей работе!
Хотите освоить все тонкости цифрового дизайна? Мечтаете научиться делать красивые и эффективные цифровые проекты в любых форматах? Ждём на курсе Профессия No-code разработчик!
2023-02-03 12:33 Что такое Как делать