Принципы и инструменты дизайна интерфейса

Интерфейс — это среда. Среда взаимодействия. Задавая различные условия среды, мы определяем правила существования пользователей в создаваемой среде. Какие-то области могут комфортны, какие-то нет. Какие-то доступны для всех пользователей, какие-то для избранных.

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

Забота

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

Примеры:

• Напомни о том, что нужно оплатить подписку.
• Подскажи пользователю на какие элементы интерфейса ему нужно обратить внимание в первую очередь, на какие во вторую.
• Намекни, как выгодней поступить.
• Предупреди о важном событии.
• Упрости ввод данных: объедини поля формы, удали лишние поля.
• Сделай выводы на основе данных, которые будут полезны пользователю.
• Предоставь нужную информацию в нужный момент.
• Донеси мысль понятно: используй понятные и однозначные формулировки в тексте, не создавай визуальную и смысловую грязь.

Каждый принцип далее в какой-то мере реализует принцип заботы.

Представление информации: вёрстка, структура, иерархия, контраст, последовательность, информативность, формулировки

• Для простоты восприятия интерфейса пользователем, необходимо грамотно изобразить информацию и элементы управления.
• Нужно думать как изобразить информацию так, чтобы она легко (или сложно) воспринималась.
• Нужно думать о том, как выделить более важные элементы и более важную информацию.
• В проектируемых взаимодействиях и представлении информации нужно быть последовательным, однородным. Это позволяет выработать у пользователя привычку.
• Интерфейс передаёт какую-то информацию. Нужно следить, какая часть изображённой информации полезна в рамках пользовательских сценариев.

Пример:

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

Бритва Оккама

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

Примеры:

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

Интуитивность, культура, привычки и паттерны.

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

Эстетика

Иногда эстетика интерфейса определяется айдентикой продукта, компании. Иногда эстетика интерфейса следует из самих функций интерфейса.

Пример:

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

Погружение в предметную область

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

Преодоление и учёт ограничений

При создании продукта могут быть различные ограничения:

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

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

Обратная связь

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

Инструменты дизайна интерфейса

• Сценарии. В начале работы имеет смысл составить сценарии («работы» во фреймворке JTBD) использования продукта, а затем реализовать их в виде макетов и комментариев к ним.
• Минимизация действий. Чем меньше пользователю нужно совершить действий и мысленных усилий для достижения цели сценария, тем лучше.
• Группировка макетов, комментарии рядом с макетами на основании сценариев. Макеты показывают основные сценарии, комментарии помогают понять что происходит на макете.
• Грамотная проработка макетов. Чтобы «дизайн-богатство» накапливалось, нужно сохранять полезные материалы-примеры, следить за структурой, оставлять осмысленные комментарии.
• Фрейм с вопросами, которые надо обсудить с клиентом. Имеет смысл прямо в Фигме составить фрейм с вопросами, которые нужно задать клиенту. Так у всех участников проекта есть точки фиксации информации о проекте. Задал вопрос — записал полезную инфу в общий фрейм.
• Использование дизайн-принципов в процессе дизайна.
• Погружение в область. Изучение конкурентов. Здравый смысл.
• Хорошая коммуникация с клиентом. Важно собирать данные и делать на их основании выводы, нужно задавать вопросы клиенту.
• Наблюдение за собой, эмпатия.

Tags: дизайн, интерфейс, принципы