Существует заблуждение, что дизайн — это вопрос вкуса, и у него нет объективных критериев оценки. Но не стоит забывать об условиях использования приложения. Например, таких факторах, как шум, низкое качество, старое тормозное оборудование или программное обеспечение, ограничение доступа в интернет из-за безопасности. Если копнуть поглубже можно найти много критериев. Поэтому давайте наконец развенчаем этот миф!
Привет, Хабр! Меня зовут Кирилл Голубовский. И сегодня хочу поделиться информацией, которая пригодится всем, кто хочет понять, насколько удобным является их решение. Вы разберётесь, что нужно учесть при логическом проектировании сложных систем с запутанными сценариями.
Сейчас я возглавляю дизайн Bimeister. Мы с командой занимаемся разработкой BIM и ERP-систем, способных эффективно цифровизировать предприятия.
Дизайн — объективно измеряем и существует в рамках своих парадигм. Они позволяют проектировать внешний вид и логику приложения так, чтобы пользователю было удобно и легко им пользоваться. Эти парадигмы мы и обсудим в статье:
5 уровней сложного приложения. Эти факторы могут повлиять на финальное решение.
10 эвристик Нормана-Нильсена. Это хрестоматийные постулаты, о которых должен знать каждый UX-специалист.
Применение психологических законов в дизайне. Поговорим о работе мозга и восприятии информации.
Profit. Закончим фреймворком, который можно использовать на практике для быстрого тестирования решений внутри команды.
Пять уровней сложного приложения
Всего существует пять уровней — интеграция, информация, назначение, окружение и организация, которые выстроены в пирамиду:
Уровень 1: Интеграция
Интеграция включает различные связанные системы, подсистемы, сторонние приложения, серверное оборудование, БД, архитектуру.
Интеграция — то, как приложение будет сообщаться со всей существующей в организации инфраструктурой, с какой скоростью мы сможем отдавать пользователю данные, и главное, в каких количествах. Нужно в полной мере представлять, что мы создаём. Понимание того, как разные части системы соотносятся друг с другом позволяет создать адекватный пользовательский опыт, который отвечает потребностям пользователя и техническим возможностям.
Не заложив явных правил такого взаимодействия, невозможно понять, как всё устроено в идеальной картине мира. Без этого понимания, ваше решение скорее всего придётся переделывать. Такие изменения всегда выражаются в нежелательном увеличении стоимости разработки.
Рассмотрим типичную архитектурную схему, которая включает множество обращений к различным источникам данных и системам:
Разобраться в схеме как на изображении выше — задачка не из лёгких. Попробуйте после беглого просмотра объяснить, что здесь вообще происходит. Запутаться в деталях довольно легко, что-то не учесть — тоже. Но такая ошибка может дорого стоить не только на стратегическом, но даже на тактическом уровне. Задача дизайнера — разобраться в этой сложной структуре самому, учесть все взаимосвязи и помочь максимально упростить схему для восприятия пользователя.
Уровень 2: Информация
Информация — то, как пользователь видит данные в интерфейсе, которые вывели из БД. Речь идёт о таблицах, графиках, формах и дашбордах. Основная задача — определить, как представить информацию так, чтобы пользователь легко мог её воспринимать, анализировать и принимать взвешенные решения.
Проектировщики сложных систем уже на этой стадии должны понимать, где и как эти данные представлены и в каком объёме будут выводиться на экран пользователя. Придётся разобраться в иерархии и подсветить самое важное, чтобы пользователь не запутался. Для этого можно поговорить с аналитиками, пользователями, получить опыт от собственного взаимодействия с данными.
В примере выше мы видим множество разных полей ввода (input), перемешанных между собой. Вероятнее всего, пользователь потратит немало времени, чтобы разобраться, что они означают. Это увеличивает когнитивную нагрузку, расходы на обучение и снижает производительность.
Уровень 3: Назначение
Назначение — цель создания системы, а также задачи и решения которые в неё закладываем.
В обычных B2C приложениях одну задачу чаще всего можно решить только одним способом. Профессиональные системы позволяют пользователям достигать успеха несколькими путями, каждый из которых может быть завязан на роли других пользователей в системе.
Вот пример обычного пользовательского пути в рамках небольшого функционала, который включает множество выборов, разветвлений и возможных путей возврата.
Непонимание, как и для чего пользователи решают свои задачи на рабочем месте, как устроена корпоративная иерархия в индустрии, для которой создали продукт, приводит к решениям, не имеющим ничего общего с реальным миром.
Уровень 4: Окружение
Мой любимый уровень, как дизайнера — ведь он о реальном контексте жизни пользователя.
Важно учитывать, где и в каких условиях люди используют ваше приложение: например, на буровой установке, или в цеху, дома или в офисе. Нужно учитывать факторы окружения, например: шумы, низкое качество освещения или мониторов, древнее тормозное оборудование или ПО, запрет доступов от безопасников, медленный интернет.
Давайте рассмотрим пример из нашего исследования. На одном из предприятий мы тестировали систему нарядов-допусков. Пообщавшись с пользователями, увидели их самописное приложение, поддерживаемое ещё с 90-х годов.
У приложения одна функция — оно генерирует бумажный шаблон наряда-допуска. Пользователь вручную подписывает этот шаблон и несёт начальнику на подпись. Для специалистов по цифровизации такой подход покажется неэффективным, ведь обесценивает сам смысл цифровизации — уменьшение ручного физического труда. Но пользователи не видят проблемы.
Этот пример подчёркивает: внедрение новой системы может встретиться с неприятием. Разработанная цифровая форма может быть менее понятна пользователям, чем формат бумажного шаблона, который они использовали десятилетиями. Слишком резкие изменения могут отпугнуть пользователей от решений, даже если они кратно эффективнее принятых. Хорошее понимание контекста окружающей действительности пользователей даст вам ясное осознание, когда можно и когда нельзя использовать прорывные инновации и на чём необходимо сделать особый акцент.
Уровень 5: Организация
Уровень организации — это компании, в которых мы работаем. Согласно закону Конвея, структура организации отражается в системах, которые она создает. Проще говоря, чем запутаннее и сложнее коммуникация в организации, тем запутаннее её приложение или сервис. Эта сложность может проявляться в несогласованности команд, излишних перегибах в принятии решений и даже в медленной реализации функционала.
На MineMaps ролевой модели видно, какие роли пользователи выполняют и как влияют друг на друга:
Проще говоря, вы должны хорошо понимать как устроены процессы внутри вашей организации. Ведь даже хорошие и светлые инициативы могут быть перемелены жерновами корпорации и её институтов. Это позволит заранее предсказывать узкие и проблемные места и предпринимать действия для исправления ситуации. Чем свободнее и легче распространяется информация внутри организации, тем выше уровень понимания, почему было принято то или иное решение. То есть, чем проще и прозрачнее коммуникация внутри вашей компании, тем легче будет использовать продукт, который вы создаете.
Помните, что несмотря на то, что у вас могут быть разные цели и KPI — вы работаете над одним продуктом. Вывод: общайтесь и не скрывайте ничего от коллег. Общение и взаимодействие с разными уровнями сложности на каждом этапе проектирования сделают процесс разработки более прозрачным и улучшат конечный результат. Работа в согласовании с пользователями и командой, а также непрерывная проверка и адаптация, станут ключевыми элементами успешной разработки приложений.
Мы поговорили о сложностях, которые стоят перед нами в разработке, дизайне и проектировании. Теперь перейдём к тому, как с ними проще справиться визуальными методами.
10 эвристик Нормана-Нильсена
Дон Норман и Джейкоб Нильсен, наряду со Стивом Кругом, считаются «отцами» UX. В 80-х годах они задумали стандартизировать компьютерные системы, сделать их более дружелюбными к пользователям. Мир уже тогда начал цифровизироваться, компьютеров становилось больше и они становились всё доступнее. Норман и Нильсен сформулировали набор из десяти постулатов эвристики, который впоследствии разросся до двадцати. Но в этой статье мы поговорим о классических, сформулированных изначально.
№ 1. Видимость системного статуса
Хороший дизайн должен всегда информировать пользователей о текущем состоянии системы, предоставляя соответствующую обратную связь в разумные сроки. Проще говоря, система должна быть отзывчивой на действия пользователя.
Самый простой пример — это прогресс-бары, которые отображают статус загрузки.
Слева — старый диспетчер, который показывал различные бэкграундные процессы, происходящие в системе. Это загрузка больших 3D файлов, весом в десятки гигабайт, или формирование сложных отчетов с сотнями тысяч данных. Эти операции могли занимать от нескольких часов до нескольких дней. Было непонятно, через какой промежуток времени процесс перейдёт из статуса «В работе» в следующий статус.
Мы обновили диспетчер (справа), добавили в него прогресс-бар, показывающий процент завершения и время до конца операции. Теперь мы видим, что осталось ждать 2 часа, а значит можно расслабиться, сходить на обед, выпить чашечку кофе и вернуться к работе.
№ 2. Соответствие между системой и реальным миром
Эффективный дизайн, будь то текст, символы или интерфейс, должен быть понятен пользователям. Используйте язык, знаки и понятия, близкие пользователю, избегая внутреннего жаргона. Соблюдайте знакомые правила, чтобы представленная информация имела естественный и логичный порядок.
В реальном мире мы часто взаимодействуем с узнаваемой системой символов. Например, светофор: красный — стоп, желтый — внимание, зелёный — можно ехать. Таких знаков в нашей жизни множество, но иногда проектировщики пытаются заменить их собственными. Например, на профессиональный сленг, используемый только внутри компании. Это ведёт к недопониманию.
Пример из физического мира:
На изображении мы видим «0», который обозначает совсем не то, к чему привыкли в обществе. Даже в странах, в которых есть понятие нулевого этажа (например, Америка, Германия), он обозначается либо G (Ground floor), либо E (Erdgeschoss). Использование стандартных обозначений помогает избежать путаницы и обеспечивает более ясное восприятие для пользователей.
№ 3. Контроль и свобода пользователя
Пользователи часто допускают ошибки. Им нужен чётко обозначить возможность «аварийного выхода», чтобы выйти из нежелательного действия без необходимости проходить через сложные процессы.
Часто ошибки пользователей связаны с парадоксом активного пользователя, который предпочитает не читать инструкций, а сразу принимается за работу. Парадокс в том, что пользователь сам знает, что прочтение руководства позволит справиться с работой гораздо быстрее и эффективней. Но несмотря на это всё равно предпочитает сразу отправляться в бой.
Зная это, проектировщики должны всегда предоставлять пользователю «аварийные» пути выхода, такие как кнопки undo, redo, назад на сложных flow. Это нужно, чтобы усилия пользователя, пусть даже сделанные с ошибкой, не пропали даром, он не потерял кучу времени и не выкинул монитор в окно.
Одно из направлений Bimeister — Building Information Modeling (BIM). Пользователям таких систем, особенно тем, кто занимается нормативно-справочной информацией, часто приходится загружать большое количество файлов внутрь системы.
Пример из нашей системы выглядит так:
Раньше пользователь нажимал кнопку «ДОБАВИТЬ ФАЙЛЫ» и у него открывался проводник операционный системы. Там он добавлял сколько угодно файлов, нажимал «OК», а дальше ничего не происходило. Было непонятно, загружаются ли файлы. Это нарушение первой эвристики! Нет видимости системного статуса. Например, если хотя бы один файл вызывал проблемы, весь процесс обрывался, и пользователю приходилось начинать сначала: выбрать файлы в проводнике и т.д.
Теперь пользователь имеет полный контроль: он видит, какие файлы загружены, статус загрузки, и, если что-то идёт не так, он получает информацию о причинах. В случае проблем с некоторыми файлами, пользователь может продолжить загрузку остальных, а проблемные файлы загрузить позже.
№ 4. Консистентность и стандарты
В интерфейсе не должно возникать недопонимания, что означают различные термины, ситуации или действия. Важно следовать установленным в отрасли и платформенным соглашениям.
Пример из физического мира — если у вас на кухне выключателем включается/выключается только свет, то в другой комнате он не должен открывать окно, запускать вентилятор или открывать люк в бассейн с крокодилами. Нужно помнить об этом.
Ещё один пример:
На приведенном примере, слева мы видим старую кнопку с иконкой облачка и текстом «ЗАГРУЗИТЬ», которая часто вызывала недопонимание у пользователей — было непонятно, что и куда загрузить, скачиваем ли мы файлы или загружаем в систему. Новая иконка в виде скрепки и текст «ПРИКРЕПИТЬ» справа более понятно передают суть действия. Пользователь понимает: он прикрепляет файл к определенному объекту в системе.
№ 5. Предотвращение ошибок
Хороший дизайн в первую очередь предотвращает возникновение проблем. Он либо устраняет условия, подверженные ошибкам, либо проверяет их, предоставляя пользователям возможность подтверждения, прежде чем они предпримут какое-то действие.
В физическом мире это называется «защитой от дурака». Проще говоря, не давайте пользователю оказаться в ситуации, когда он может сделать что-то не так. Например, если у вас есть ограничение на объем загружаемых файлов, то лучше, чтобы пользователь узнал об этом заранее, а не через сообщение об ошибке после попытки загрузить файл, не соответствующий критериям.
Другой пример:
Раньше наши поля ввода обладали обширным зоопарком валидаций, которые сначала проверяли пользовательский ввод на соответствие правилам, а в случае отклонения выдавали ошибку.
В итоге мы убрали возможность ввода подверженного ошибке значения: в цифровой инпут нельзя ввести буквы, пробелы обрезаются на фронтенде и т.д. Это позволило избавиться от более чем 15 лишних валидаций, которые перекладывали труд следить за целостность базы данных на пользователя. Теперь мы точно знаем, что данные, которые введёт пользователь, будут на 99% валидными.
№ 6. Узнавать, а не вспоминать
Эффективный дизайн стремится снизить нагрузку на память пользователя, обеспечив видимость элементов, действий и параметров. Пользователь не должен тратить усилия на запоминание, как работает интерфейс в различных частях системы. Все необходимые данные для использования (например, лейблы полей или элементы меню) должны быть видны или легко доступны.
Одна из главных задач UX-специалистов — снижение когнитивной нагрузки на пользователя. Внимание пользователя — ограниченный ресурс, и чем меньше он затрачивает его на ненужные детали, тем лучше.
Необходимо строить последовательную логику, не заставляя пользователя много думать о том, как совершить действие. Это особенно важно, учитывая человеческую тенденцию к забывчивости.
Пример:
Раньше в нашей системе каждый раздел считал, что он особенный и располагал основные кнопки действия в разных частях экрана. Зачастую такие действия прятались под мультибаттон, основное действие которого могло не соответствовать вложенностям. Теперь пользователю не нужно запоминать различия между разделами — интерфейс унифицирован во всех разделах.
№ 7. Гибкость и эффективность использования
Хороший дизайн учитывает различный опыт пользователей. Например, обеспечивают быстрые действия, скрытые от начинающих и ускоряющих взаимодействие для опытных пользователей. Такой дизайн становится удобным как для новичков, так и для экспертов, позволяя пользователям настраивать частые действия под свои потребности.
Как гласит мудрость ездового спорта, упряжка бежит со скоростью самой медленной собаки. Так и интерфейс движется со скоростью самого медленного и неопытного пользователя. Но в отличие от собак, у пользователей должна быть возможность эффективно работать независимо от технической грамотности. А значит нужно предоставить разные сценарии проведения операций — медленные для менее опытных, и быстрые для гуру, которые всё знают и могут сделать двумя клавишами. Часто используемые приёмы включают быстрые действия (quick actions) и сочетания клавиш (shortcuts).
Пример с панелью инструментов просмотра документов иллюстрирует этот принцип. Новичок, который печатает одним пальцем и пользуется мышью для изменения масштаба, может выбрать более медленные методы взаимодействия. В то время как опытный пользователь может использовать быстрые действия, минимизируя отвлечение от текущей работы и повышая её эффективность.
№ 8. Эстетичный и минималистичный дизайн
Эффективный дизайн интерфейса исключает неактуальную или редко используемую информацию. Каждая дополнительная деталь в интерфейсе соревнуется за внимание пользователя, уменьшая относительную видимость соответствующих элементов информации. Эстетичность и минимализм в дизайне играют ключевую роль в достижении эффективности пользователя.
Основная цель UX — снижение когнитивной нагрузки. Если дизайн лишён эстетики и минимализма, значит, содержит много лишнего. Это приводит к неструктурированности данных, обилию отвлекающих элементов и, в конечном итоге, затрудненному восприятию для пользователя.
В примере ниже слева представлена старая карточка задачи, которую сложно назвать эстетичной и минималистичной. Интерфейс заполнен множеством конфликтующих между собой элементов, отсутствует иерархия шрифтов, а расстояния между элементами не согласованы. Всё это создает визуальный хаос. Понять содержание такой карточки требует значительных усилий глаз и мозга.
Справа представлена обновленная карточка задачи, выполненная с учетом концепции эстетичности и минимализма. Лишние цвета устранены, выделено только важное. Этот подход обеспечивает структурированность информации, что делает карточку приятной для восприятия и работы, а, главное, семантическую точность.
№ 9. Помогайте пользователям узнавать, диагностировать и устранять ошибки
Сообщения об ошибках должны быть сформулированы простым языком (без кодов ошибок), точно указывать на проблему и конструктивно предлагать решение.
Важно помогать пользователям устранять ошибки. Часто сообщения об ошибках пишут так: «Неудача, попробуйте завтра», «Что-то пошло не так, обратитесь к администратору». Или же они написаны сложным языком и содержат коды, значение которых нужно дополнительно искать в поисковиках. Но мы хотим, чтобы пользователь не тратил своё время и время специалистов техподдержки, а мог самостоятельно продиагностировать, что пошло не так, и решить эту проблему.
Пример:
Обновленный текст сообщает, что действительно может предпринять пользователь для решения проблемы. А обращение в саппорт — последняя инстанция. Здесь нет никаких кодов ошибок, потому что они ничего не скажут пользователю — только разработке и QA. А пользователь, прочитав «ОШИБКА 0011415», ничего не поймёт, а останется фрустрировать перед неработающей системой.
Текст ошибки предоставляет конкретную информацию и стимулирует пользователя самостоятельно диагностировать и устранять проблему. Это снижает время, затрачиваемое пользователями и специалистами техподдержки, на решение проблем и повышает удовлетворенность пользователя.
№ 10 Помощь и документация
Лучше всего, если система интуитивно понятна и не нуждается в дополнительных пояснениях. Однако пользователям может потребоваться предоставить документацию или помощью
Хороший интерфейс — как шутка: если его надо объяснять — он плохой. Однако лишняя помощь и семантика не помешают, особенно в профессиональных системах, которые решают большие сложные задачи. Мы можем делать дополнительные подсказки в интерфейсе, что идёт не так, или что означают те или иные действия.
Пример:
Слева мы видим сообщение, что пользователь деактивирован, поэтому редактирование недоступно. В результате не возникает вопросов, почему функция неактивна. Также указано, что все поля обязательны для заполнения. Так мы поддерживаем эвристику, минималистичный дизайн и не грузим пользователя пятнадцатью формами с красной звездочкой, которые зашумляют общее пространство. Вместо этого просто просим заполнить все обязательные поля, ознакомившись с подсказками (которые можно скрыть).
Психологические принципы UX
Эвристики Нормана Нильсона работают потому, что так работает наш мозг. Это не особо выбивается из постулатов здравого смысла. Посмотрим дизайнерские законы, которые помогут сделать интерфейс чище и понятней.
Эффект Эстетики Usability
Пользователи воспринимают эстетически приятный дизайн как более удобный.
Эстетически приятный дизайн вызывает положительную реакцию в мозгу и заставляет людей поверить, что дизайн на самом деле работает лучше.
Люди более терпимы к незначительным проблемам с юзабилити, когда дизайн продукта или услуги эстетически приятен.
Визуально приятный дизайн может замаскировать проблемы пользовательского взаимодействия и предотвратить их обнаружение во время юзабилити-тестирования.
Красивое всегда воспринимается как более удобное. Это касается не только интерфейса, но и физических вещей. Стандарт золотого сечения и ряд Фибоначчи вывели, потому что людям они нравятся. Все мы любим гармонию, эстетику, и считаем, что красивое лучше уродливого.
Закон Фиттса
Время попадания в цель зависит от расстояния до цели и её размера.
Интерактивные элементы должны быть достаточно крупными, чтобы пользователи могли их выбрать.
Между интерактивными элементами должно быть достаточно места.
Интерактивные элементы следует размещать в тех областях интерфейса, где их легко обнаружить.
Чтобы разозлить дизайнера, достаточно сказать ему «поиграйся со шрифтами» или «сделай кнопку побольше». Но загвоздка в том, что предложение сделать кнопку побольше — не всегда плохое. Куда легче попасть — в большие футбольные ворота или в маленькие хоккейные? Это значит, что все значимые элементы в интерфейсе должны быть соответствующего размера. У разных брендов есть гайды, которые регулируют размеры. Например, какие значки должны быть у Apple и какое между ними должно быть расстояние, чтобы нельзя было промахнуться. Я советую всегда отделять важные действия. И никогда не делайте кнопку «СОЗДАТЬ» рядом с «УДАЛИТЬ». Тогда пользователю будет сложнее случайно её нажать.
Пример Checkout:
В первом примере кнопку «КУПИТЬ» сложно найти, во втором она — большая, жирная, сочная, палец так и хочет её нажать.
Закон Хика
Время, затраченное на выбор, увеличивается пропорционально количеству вариантов.
Минимизируйте выбор, когда время ответа имеет решающее значение.
Разбивайте сложные задачи на мелкие шаги, чтобы снизить когнитивную нагрузку.
Не перегружайте пользователей выбором, а самостоятельно выделяйте рекомендуемые варианты.
Будьте осторожны, не упрощайте всё до уровня абстракции.
Есть формула и график, как высчитывать время выбора. Суть в том, что чем больше перед человеком вариантов, тем медленнее он принимает решение. Знаю не понаслышке, что в нашей сфере часто требуют, чтоб всё было на одном экране, никаких скроллов. Но это миф, что пользователи хотят именно так. Они хотят хорошо структурированную информацию, в поисках которой не нужно рыскать в миллионах карманов жилетки Вассермана. А должно ли при этом всё находиться на одном экране — не так важно.
Пример, как не надо делать:
Большое меню, множество однотипных item в виде списка рядом, в которых сам чёрт ногу сломит. Слишком долго вникать, чтобы найти то, что действительно нужно.
Закон близости
Объекты, находящиеся рядом, кажутся сгруппированными.
Близость помогает установить взаимоотношения с близлежащими объектами.
Элементы, находящиеся в непосредственной близости, воспринимаются как схожие по функциям или характеристикам.
Близость помогает пользователям быстрее и эффективнее воспринимать и систематизировать информацию.
Да, на странице всё должно быть расположено плотно, но наш мозг воспринимает близко стоящие друг к другу элементы как родственные. Скорее всего, если все элементы стоят рядом, пользователь воспримет, что они выполняют одну и ту же функцию. Поэтому разделяйте формы в логические блоки — это необязательно полоски или рамки. Просто разнесите их подальше и всё сразу станет чисто и понятно.
Закон Миллера
Среднестатистический человек может хранить в рабочей памяти только 7 (± 2) объектов.
Человеческий глаз любит находить простоту и порядок в сложных формах. Так он не позволяет перегрузить нас информацией.
Исследования подтверждают, что люди лучше визуально обрабатывают и запоминают простые формы, чем сложные.
Человеческий глаз упрощает сложные формы, превращая их в единую и простую.
Среднестатистический человек может хранить в своей памяти 7 (± 2) объектов. Но сделаю ремарку: это исследование проводилось в академических кругах, в университете. Естественно, часто профессора в университетах ставят опыты на других профессорах или студентах. Поэтому можно предположить, что реальное значение, которое обычный человек может удержать в своей кратковременной памяти — это 5 (± 2) объектов. Если их больше, вероятно, он даже не вспомнит, что было в начале и в середине.
На этом примере мы видим множество разных объектов. Попробуйте вспомнить, какой вы увидели первым.
Закон схожести
Человеческий глаз воспринимает похожие элементы как единое изображение, форму или группу, даже если эти элементы разделены.
Элементы, которые визуально похожи, будут восприниматься как связанные.
Цвет, форма и размер, ориентация и движение могут свидетельствовать, что элементы принадлежат к одной группе и имеют одинаковое значение или функциональность.
Убедитесь, что ссылки и навигации визуально отличаются от обычного текста.
Этот закон схож с законом близости, только говорит о том, что похожие элементы, воспринимаются как единое целое, обладающее единой функцией, назначением, смыслом, даже если находятся в разных местах. Поэтому если вы используете повторяющиеся паттерны (карточки, что-то ещё), убедитесь, что они не вводят пользователей в заблуждение. Ведь если они будут слишком похожи, то даже находясь в другом конце интерфейса, пользователь их спутает и расстроится.
Пример:
Сразу предупреждаю — постарайтесь не вызвать демона, не читайте это вслух. Есть другой психологический закон, который называется закон общего региона. Он гласит, что то, что объединено в одну рамку — связано. Так и на изображении выше — нам сразу кажется, что заглавные буквы связаны, и мы читаем сначала их. На самом деле здесь написано carbonara, spaghetti и pannetone. Я потратил время, чтобы это понять.
Эффект фон Ресторффа, или эффект изоляции
При наличии нескольких похожих объектов с наибольшей вероятностью запомнится тот, который отличается от остальных.
Визуально выделяйте важную информацию или ключевые действия.
Будьте сдержанны, делая акцент на визуальных элементах. Они не должны конкурировать друг с другом, чтобы важные элементы не были ошибочно идентифицированы как совсем другие.
На изображении мы видим ад (HELL) со скидкой 70% и весну (spring), а не HELLO. Ведь среди одинаковых элементов запоминается тот, который выделяется — как здесь, на примере квадратиков и кружка. Мы сразу замечаем кружок, потому что он не такой, как окружающие его квадратики. В интерфейсе мы говорим о primary-кнопках, то есть выделяем основные действия. Поэтому не стоит ставить рядом две primary-кнопки, или даже просто на одну страницу. Тогда она перестаёт быть особенной и растворяется в общем информационном шуме, который вы сами и создали.
Вывод
Мы, как UX специалисты, рекомендуем использовать эвристическую оценку. Просто возьмите все эвристики из этой статьи и проверьте, соответствует ли им созданный вами интерфейс. Практика показывает, что такой анализ способен выявить до 75% проблем. А ещё это быстро и бесплатно.
