10 принципов, о которых должен знать каждый дизайнер

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

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

1. Компромисс между гибкостью и юзабилити

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

Гибкость — 7-я из 10 эвристик юзабилити говорит, что мы должны отдавать приоритет гибкости и эффективности использования за счет использования ярлыков и ускорителей, невидимых начинающему пользователю, которые ускоряют взаимодействие для опытных пользователей

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

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

Пример

Adobe Photoshop широко используется дизайнерами, художниками-графиками, фотографами и другими творческими специалистами. С каждой новой версией функционал Photoshop расширяется, чтобы предложить аудитории все больше вариантов использования. Результат — очень гибкий, но сложный интерфейс.

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

Что делать:

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

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

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

2. Эффект эстетики-юзабилити

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

В 1995 году, после тестирования 26 вариантов интерфейса банкомата, 252 участников исследования просили оценить каждый дизайн с точки зрения простоты использования, а также эстетической привлекательности. Исследователи Масааки Куросу и Каори Кашимура обнаружили, что эстетика интерфейса оказывает на людей сильное влияние, и именно от нее во многом зависит восприятие простоты использования.

Страница ошибки бренда GAP достаточно удобна — здесь отсутствуют непонятные коды ошибок типа «404» и перечислены возможные причины возникновения ошибки. Кроме того, на странице есть четкий призыв к действию и контакты службы поддержки. 

В противоположность скучной странице Gap, страница 404 компании Pixar спроектирована таким образом, чтобы вызвать у людей положительные эмоции и отвлечь их от стрессовой ситуации. Используя гораздо более интересные визуальные детали и игривого персонажа из своей вселенной, они пытаются заставить вас улыбнуться.

Что делать:

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

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

• В своих проектах используйте принцип золотого сечения, когнитивные искажения (предвзятость в отношении привлекательности, контура), правило третей.

3. Прощение

Хороший дизайн помогает пользователям избежать ошибок и минимизировать негативные последствия, если они все же были сделаны.

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

Поиск на сайте Amazon «прощает» ошибки, что позволяет покупателям получать релевантные результаты, даже если они поторопились и ввели запрос неправильно. При обнаружении опечаток система выдает результаты по исправленному поисковому запросу.

Gmail также использует множество методов, чтобы сделать свой интерфейс более «снисходительным». Приложение создает небольшую искусственную задержку при отправке письма, давая пользователю возможность отменить действие, если он передумал. А в случае, если в тексте письма упоминается «вложение», Gmail проверит, не забыли ли вы его прикрепить, и напомнит о нем в случае необходимости.

Что делать:

• Лучший способ избежать ошибок — создавать дизайн с продуманными аффордансами (свойства и функции дизайна, которые показывают, как с ним можно взаимодействовать).

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

• Требовать подтверждения только для важных и необратимых действий.

4. Дефицит

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

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

Причина такого успеха лежит в нашей физиологии. Синдром упущенной выгоды (Fear of missing out — FOMO) — страх, что вы упускаете какую-то важную информацию, опыт или события, которые могли бы сделать вашу жизнь лучше.

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

На большинстве сайтов бронирования, таких как KAYAK или Booking, вы увидите предложения с пометкой «осталось всего несколько мест/номеров по этой цене».

Часы HYT, выпущенные в количестве всего 5 штук, — классический пример «вебленовского товара», который продается лучше по цене в 2–3 раза выше благодаря ощущению эксклюзивности.

Что делать:

• В зависимости от характера товара/услуги использовать различные тактики создания дефицита:

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

— Ограниченный доступ для «привилегированной» группы пользователей,

— Ограниченное количество товаров,

— Внезапное сокращение поставок,

— Четкое указание на высокий спрос.

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

5. Отношение сигнал/шум

Сигнал/шум — это соотношение релевантной и нерелевантной информации в интерфейсе или канале коммуникации (релевантная информация — это «сигнал», а нерелевантная информация — «шум»).

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

Ухудшение сигнала происходит по многим причинам: отсутствие иерархии, информационная перегрузка, излишне стилизованная типографика, непонятные иконки, неуместные визуальные эффекты и т.д.

Ниже вы видите 3 домашние страницы интернет-магазинов с разным уровнем шума. Страница Aliexpress вмещает массу информации, ссылок и призывов к действию. К сожалению, в сочетании с ярким UI и броским фоном это создает чрезмерный шум, из-за которого практически невозможно сосредоточиться на чем-то конкретном.

Что делать:

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

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

6. Правило 80/20

Правило 80/20, также известное как принцип Парето, гласит, что в любой большой системе 20% переменных дают 80% результатов.

Этот принцип действует практически везде. Хотя концепция 80/20 часто используется в экономике, вы можете применить ее к интерфейсам, контролю качества, разработке.

Вот несколько примеров:

• 80% процентов результата приносят 20% функций продукта
• 80% ошибок вызваны 20% компонентов
• 80% доходов компании поступает от 20% ее клиентов
• 80% прогресса достигается за счет 20% усилий
• 80% идей исходят от 20% людей

Приложение iOS «Калькулятор» — прекрасный пример применения правила 80/20. Ключевые функции калькулятора, покрывающие львиную долю задач пользователей, доступны в портретном режиме по умолчанию. Функции, к которым люди прибегают намного реже, ненавязчиво отображаются в горизонтальном режиме.

Что делать:

• Использовать аналитику для оптимизации своих усилий по проектированию.

Если 20% ваших клиентов обеспечивают 80% выручки и используют 20% функций продукта 80% времени, значит команда должна тратить большую часть времени на исследование, дизайн и тестирование именно этих функций.

• Всегда учитывать окупаемость инвестиций (ROI) — времени и денег, потраченных на исследования и привлечение аудитории.

7. Самый продвинутый, но приемлемый (принцип MAYA)

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

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

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

— Раймонд Лоуи, известный американский промышленный дизайнер французского происхождения, создатель бутылки Coca-Cola, логотипа Shell Oil и т.д.

Google Glass — смелая попытка сделать шаг в будущее. Маркетинговые кампании наделали много шума, но сам продукт подвергся критике, в том числе из-за цены, проблем с безопасностью и конфиденциальностью.

Журнал Fortune включил Nokia 7280 в список лучших продуктов 2004 года. Несмотря на то, что многие по достоинству оценили дизайн телефона, и у него даже появилось несколько последователей, продажи в целом оказались неудовлетворительными.

Что делать:

• Если вам приходится объяснять свой дизайн либо взаимодействие с ним требует длительного обучения и «помощи», значит, он получился слишком сложным/продвинутым. Стремитесь создавать понятные продукты.

• Узнать, каковы навыки вашей целевой аудитории, скорость обучения и способность к переменам.

• Усложнять дизайн постепенно, используя поэтапный подход.

8. Погружение

Погружение — состояние, когда осознание «реального» мира теряется, и опыт полностью поглощает пользователя.

Подобное может происходить во время игры, работы над увлекательной задачей, танца. Чувство времени теряется, мозг «отключается», человек ощущает положительные эмоции. Эти элементы могут возникать независимо друг от друга, но только в сочетании они дают так называемое состояние потока.

Pokemon Go, приложение, захватившее мир в 2019 году, — один из лучших примеров того, как можно создать захватывающий опыт с помощью геймификации, сторителлинга и AR. Причем настолько захватывающий, что пользователи бессознательно подвергали себя опасности, пытаясь «поймать их всех». За 200 дней игроки потратили на обновления игры рекордный миллиард долларов.

IKEA Place позволяет виртуально размещать реалистичные 3D-модели товаров в своей комнате. Сочетание новейших AR-технологий и продуманных интерьерных решений IKEA обеспечивает интересный иммерсивный опыт.

Что делать:

• Создать среду, которая сводит к минимуму отвлекающие факторы, обеспечивает ощущение контроля и дает обратную связь.

• Четко сформулировать цели и задачи, которые можно решить.

• Использовать VR/AR/MR/XR для размещения контента и упрощения взаимодействий в виртуальном мире.

9. Мусор на входе, мусор на выходе (принцип GIGO)

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

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

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

Что делать:

• Проектировать продуманные аффордансы и ограничения, чтобы избежать ошибок.

• Добавить предварительный просмотр, подтверждения и автокоррекцию, чтобы свести к минимуму проблемы с качеством данных.

• Тщательно отбирать пользователей для исследований и интервью. Задавать правильные вопросы. Убедиться, что вопросы не сбивают с толку и не содержат предположений.

10. Затраты–выгоды

Выгоды от действий должны быть равны или превышать затраты.

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

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

Приложение Nuri, как и многие другие стартапы, предоставляет пользователям денежные вознаграждения за привлечение рефералов. Другие инвестиционные продукты, например Robinhood, дарят акции за открытие счета.

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

Что делать:

• Сосредоточиться на оптимизации сценариев и подумать, как можно минимизировать усилия для каждой задачи.

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

Заключение

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