Истории

Четыре универсальных принципа дизайна для создания хорошего интерфейса

Истории
Дарья Сидорова
Дарья Сидорова

Редактор отдела «Истории».

Дарья Сидорова

Чтобы интерфейс был понятен и интересен пользователю, нужно знать основные психологические принципы и техники, лежащие в основе хорошего UX-дизайна. Рассмотрим четыре проверенных временем концепции из книги Уильяма Лидвелла, Кристины Холден и Джил Батлер «Универсальные принципы дизайна», которые пригодятся любому начинающему специалисту.

Четыре универсальных принципа дизайна для создания хорошего интерфейса

Сделайте информацию доступной для восприятия

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

«Это соотношение релевантной и нерелевантной информации на дисплее. Максимальное отношение сигнал/шум — желательный показатель для дизайна», — Лидвелл и др.

Таблицы ниже содержат одни и те же данные. Однако информацию во втором варианте гораздо легче читать и воспринимать.

«Каждый лишний элемент, график, линия или символ отвлекает внимание от важных деталей», — Лидвелл и др.

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

Контролируйте функциональную нагрузку

Хороший дизайн должен упрощать выполнение задач и освобождать пользователя от лишних действий.

Расскажи, как цифровая трансформация изменила твой бизнес

Стань лауреатом RB Digital Awards 2022

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

Функциональная нагрузка делится на два типа: когнитивная и кинематическая.

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

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

Располагайте связанные элементы близко друг к другу

Это один из самых недооцененных принципов юзабилити.

«Элементы, которые расположены близко друг к другу, воспринимаются как более связанные, чем те, что лежат разрозненно», — Лидвелл и др.

Самые удобные для использования продукты придерживаются этой концепции. Для примера рассмотрим скриншот страницы YouTube.

  1. Панель приложения находится в отдельном контейнере. Таким образом сразу понятно, что меню, поиск и другие элементы относятся к странице в целом, а не к конкретному видео.
  2. Элементы управления накладываются на само видео, что еще больше усиливает их близость и связь с ним.
  3. Элементы, такие как «Нравится» и «Поделиться», расположены в контейнере заголовка. Это указывает на то, что они относятся непосредственно к самому видео.
  4. Кнопка «Подписаться» находится напротив названия канала, что дает понять, что вы подписываетесь на этот конкретный канал.
  5. Похожие видео расположены близко друг к другу, что визуально подчеркивает их связность.

«Близкое расположение элементов упрощает дизайн и усиливает их взаимосвязь. И наоборот, расположенные далеко друг от друга элементы воспринимаются разрозненно», — Лидвелл и др.

Используйте метод итерации при создании продукта

Итерация — процесс повторения набора различных практик до достижения определенного результата.

«Итерация позволяет создавать сложные структуры путем постепенного изучения, тестирования и внесения улучшений», — Лидвелл и др.

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

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

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

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

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

Источник.

Фото на обложке: baranq / Shutterstock

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Дизайн презентации: как выбрать шрифт, цвет и оформление для слайдов
  2. 2 Впервые слышу, чтобы UX/UI-дизайнер сам выбирал клиентов
  3. 3 Творчество и инженерный подход: как работает дизайнер интерфейсов
  4. 4 «Я делаю игры для себя»: геймдизайнер Angry Birds рассказывает, как удержать игроков и сделать крутой продукт
ArtTech — карта разработчиков арт-технологий
Все игроки российского рынка технологий для искусства
Перейти

ВОЗМОЖНОСТИ

05 декабря 2021

05 декабря 2021