Даже у опытных дизайнеров я часто вижу банальные ошибки. Недостаток контраста, нарушение правила близости, слишком маленькие отступы между элементами и тд.
На днях, я нашёл статью, в которой дизайнер Марк Эндрю подготовил юбилейный выпуск своих микросоветов по улучшению дизайна. И это прям всё то, что я обычно проговариваю в своей практике.
Это перевод статьи
UI & UX micro-tips: 8-bit anniversary edition. A collection of 36 powerful tips to help improve your designs instantly
Автор: Marc Andrew
Источник: medium
В честь 5-летия моей сверхпопулярной серии UI & UX микро-советов я собрал самые актуальные рекомендации и оформил их в 8-битном стиле. Почему? Просто так!:)
При создании эффективных, доступных и красивых интерфейсов для вашего SaaS-продукта иногда достаточно небольших правок, чтобы значительно повысить конверсию и удовлетворённость пользователей.
В этой статье я собрал проверенные микро-советы, которые помогут быстро улучшить качество дизайна и пользовательский опыт — без масштабных редизайнов.
Надеюсь, вам понравятся советы!
1. Негативное пространство — ваш друг. Используйте его для мгновенного улучшения UI.
Негативное пространство создаёт визуальную иерархию и улучшает читаемость. Достаточное количество «воздуха» превращает перегруженные макеты в аккуратные и понятные.
2. Убедитесь, что у ваш текст достаточно контрастен. Дизайн — это не только красота, но и доступность.
Плохой контраст делает текст нечитаемым для части пользователей и вреден для глаз. Стремитесь к правильному соотношению контрастности, чтобы ваш контент оставался читабельным для всех.
3. Использование только одного шрифта в дизайне — это хорошо.
Последовательная типографика выглядит консистентной и профессиональной. Одна хорошая гарнитура с вариативными начертаниями часто выглядит чище, чем несколько разных шрифтов.
4. Выберите основной цвет и используйте его оттенки для единообразия.
Цветовая консистентность создаётся через вариации одного оттенка, а не случайным выбором цветов.
5. Используйте один цвет для призыва к действию (СТА)
Визуальная последовательность помогает пользователям интуитивно ориентироваться в интерфейсе. Использование определённого цвета только для кликабельных элементов создаёт чёткие визуальные подсказки и повышает конверсию.
6. Не заставляйте пользователя думать о следующем шаге. Держите его в курсе на каждом этапе взаимодействия.
Неопределённость создаёт трудности и раздражает пользователей. Простые подписи, такие как «Не переживайте. С вашей карты пока ничего не будет списано», вызывают доверие и помогают пользователям двигаться дальше.
7. Выделите наиболее важные элементы на экране.
Визуальная иерархия акцентирует внимание на важном. Приоритетное расположение и размер ключевых элементов, таких как цены и кнопки действий, улучшают восприятие и ускоряют принятие решений.
8. Добавьте подписи к иконкам для лучшего понимания.
Даже «очевидные» иконки могут быть непонятны без текста. Подписи устраняют догадки и делают навигацию интуитивно понятной для всех пользователей.
9. Близость. Ключевой принцип дизайна. Используйте его регулярно и эффективно.
Связанные элементы должны находиться рядом. Группировка контента помогает пользователям быстрее считывать эти связи и ускоряет обработку информации.
10. У вас на сайте много контента? Не прячьте поиск.
Разница между маленькой иконкой поиска и полноценной строкой может существенно повлиять на пользовательский опыт, особенно на сайтах с большим количеством контента. Сделайте поиск доступным и заметным.
11. Предупреждайте пользователя о том, что произойдёт при каком‑либо действии.
Ясность предотвращает ошибки и повышает доверие. Знание будущего помогает пользователям уверенно принимать решения, не опасаясь непредвиденных последствий.
12. Убедитесь, что пользователь знает, что что‑то происходит во время загрузки.
Индикаторы загрузки уменьшают неопределённость и восприятие времени ожидания. Маленькие визуальные подсказки дают пользователю понять, что его запрос обрабатывается.
13. Уменьшение высоты строки в заголовках — это хорошо.
Уменьшенный межстрочный интервал в заголовках создаёт визуальную целостность. Интервал заголовков должен быть меньше, чем у основного текста, чтобы он выглядел целостно.
14. Чтобы улучшить оптический баланс заголовков, уменьшите межбуквенное расстояние.
Индивидуальная настройка трекинга улучшит типографику. Слегка увеличенный интервал между буквами в заголовках часто улучшает читабельность и визуальную гармонию.
15. Текст «капсом» следует использовать только для коротких заголовков, таких как «Кикеры» (они располагаются над заголовками).
Текст, написанный заглавными буквами, снижает скорость чтения и его понимание. Используйте заглавные буквы для очень коротких элементов, например, кикеров, ярлыков или кнопок, а не для основных заголовков.
16. Используйте начертание, размер и цвет для указания иерархии внутри текста.
Типографическая иерархия помогает пользователям быстро считывать контент в нужном порядке. Чередование этих элементов помогает читателям быстро найти самое важное.
17. Побуждайте пользователя к действиям с помощью полезных «пустых состояний».
Пустые состояния — это возможность направить и обучить новых пользователей. Дружелюбные сообщения и понятные кнопки действий превращают потенциально неприятные моменты в полезное знакомство.
Текст справа: «У тебя пока нет друзей:(Добавить друзей»
18. Чем меньше размер шрифта, тем больше должна быть высота строки.
Мелкий текст требует дополнительного «воздуха» для лучшего считывания. Увеличение межстрочного интервала по мере уменьшения размера шрифта делает контент более доступным и лёгким для восприятия.
19. Пишите коротко и по‑существу. Убирайте лишние слова.
Лаконичные сообщения снижают когнитивную нагрузку на пользователей. Простой текст легче считать и понять, чем длинные разъяснения.
Текст снизу: «Заказ создан»
20. Подумайте о доступности и не полагайтесь только на цвет, чтобы показать состояние ошибки.
Инклюзивный дизайн учитывает пользователей с нарушениями цветового восприятия. Добавление иконок и текста ошибок помогает всем понять, что нужно исправить.
21. Не прячьте важные действия внутри выпадающего списка. Покажите их сразу!
Ключевые действия должны быть в приоритете на экране. Перемещение кнопок регистрации и входа из выпадающего меню в основную навигацию повышает их заметность и конверсию.
22. Улучшите процесс онбординга. Размещайте элементы в зоне лёгкой досягаемости — большие пальцы решают!
Мобильные интерфейсы должны учитывать, как люди держат свои устройства. Размещение ключевых действий в нижней правой части экрана делает их доступными для пользователей без необходимости тянуться к ним.
23. Убедитесь, что тени исходят от одного источника света. У нас не тысячи солнц.
Последовательные тени делают интерфейс реалистичным. Единый источник света добавляет глубину элементам UI и сохраняет визуальную целостность.
24. Всегда делайте свой «Призыв к действию» самым заметным элементом на экране.
Основные действия должны быть визуально выделены, чтобы акцентировать внимание пользователей. На примере справа, заметная и хорошо расположенная кнопка более понятна и привлекает внимание.
25. Сделайте хлебные крошки заметными и удобными. Отнеситесь к ним с заботой.
Хлебные крошки помогают пользователям ориентироваться на сайте и видеть структуру навигации. Улучшение их видимости и кликабельности повышает удобство использования и снижает раздражение.
26. Уменьшите визуальный шум. Уберите лишнее и сделайте интерфейс чище.
Чистота контента помогает пользователям быстрее находить нужную информацию. Правильный подход — убрать ненужный текст, сохранив суть и понятные призывы к действию.
27. Работайте с межбуквенным интервалом для улучшения читаемости текста, набранного «капсом». Заглавные буквы + увеличенный трекинг = лучшая читаемость.
Текст, набранный заглавными буквами трудно читать без правильного трекинга. Увеличение межбуквенного интервала помогает лучше различать символы и повышает удобочитаемость.
28. При работе с длинным текстом, стилизуйте первый абзац, чтобы привлечь внимание.
Первое впечатление о текстовом контенте важно. Правильно оформленный первый абзац помогает читателю быстрее погрузиться в материал и устанавливает иерархию.
29. Старайтесь создавать большие области нажатия на мобильных устройствах. Пальцы разные по размерам, им должно хватать места.
Мобильные интерфейсы требуют более крупных областей нажатия, чем десктопные. Крупные кнопки уменьшают количество случайных нажатий, особенно для пользователей с большими пальцами или с нарушениями.
30. Описывая цель и действия, необходимые для её достижения, начинайте предложение с цели.
Инструкции легче воспринимаются, когда они правильно структурированы. Если начать описание с цели, это поможет понять её суть, делая инструкцию более понятной.
Текст снизу: «Добавьте песню в плейлист, перетащив её в нужную папку»
31. Поддерживайте контраст текста и фона с помощью затемнения.
Разборчивость текста требует правильного контраста с фоновыми изображениями. Добавление тёмной подложки под навигацию гарантирует, что текст останется читаемым независимо от фона страницы.
32. Настройте отступы, чтобы добиться идеального вертикального ритма между блоками с текстом.
Последовательные отступы создают визуальную гармонию в типографике. Хорошо сбалансированные вертикальные отступы между заголовками и абзацами улучшают читаемость и восприятие структуры.
33. Всегда делайте элементы легко отличимыми друг от друга.
Визуальное различие предотвращает путаницу и ускоряет сканирование интерфейса. Чёткие стили кнопок, иконки и визуальные элементы помогают пользователям быстрее идентифицировать различные элементы интерфейса.
34. Уменьшите контрастность текста и избегайте чистого чёрного в тёмных темах. Поберегите глаза пользователей.
Текст на чистых чёрных фонах утомляет глаза. Снижение контраста фона сделает интерфейс более комфортными для длительного использования.
35. Используйте оттенки серого, чтобы эффективно показывать слои интерфейса в тёмной теме.
Слои помогают создавать глубину в тёмных интерфейсах. Разные оттенки серого формируют чёткое восприятие размеров и помогают пользователям лучше понимать пространственные отношения между элементами.
36. Используйте логичную вложенность скруглений. Избегайте визульных ошибок.
Последовательное скругление углов создаёт визуальную гармонию. Последовательные скругления делают интерфейс более аккуратным и продуманным.
Надеюсь, эта подборка микросоветов показала вам, как незначительные на первый взгляд изменения в дизайне могут дать ощутимые результаты для вашего SaaS-продукта — от повышения вовлеченности пользователей до увеличения конверсии.до увеличения конверсии.
Я тоже надеюсь, что вам было приятно читать перевод. Внимание к деталям и постоянное использование этих советов в работе — это большой шаг к вашему порфессиональному росту 🔥
Что ещё помогает в работе, какие фреймворки использовать и как не сойти с ума в рутине я пишу в своём тг-канале Альфа-Панк, буду рад видеть ❤️
