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

Опубликовано От Sergey

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Панель приложения находится в отдельном контейнере. Таким образом сразу понятно, что меню, поиск и другие элементы относятся к странице в целом, а не к конкретному видео.
  • Элементы управления накладываются на само видео, что еще больше усиливает их близость и связь с ним.
  • Элементы, такие как «Нравится» и «Поделиться», расположены в контейнере заголовка. Это указывает на то, что они относятся непосредственно к самому видео.
  • Кнопка «Подписаться» находится напротив названия канала, что дает понять, что вы подписываетесь на этот конкретный канал.
  • Похожие видео расположены близко друг к другу, что визуально подчеркивает их связность.
  • «Близкое расположение элементов упрощает дизайн и усиливает их взаимосвязь. И наоборот, расположенные далеко друг от друга элементы воспринимаются разрозненно», — Лидвелл и др.

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

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

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

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

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

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

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

    Сравнивайте результаты и не бойтесь заходить слишком далеко.

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

    Источник.

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

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

    Источник: https://rb.ru/

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *