Контрольный список UX-дизайна

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

Обратите внимание, что не все эти пункты применимы ко всем продуктам, но, как правило, это наиболее важные из них.

Интерактивный дизайн

01 — Повторяющиеся действия или частые действия кажутся легкими

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

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

02 — Пользователи могут легко восстановиться после ошибок

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

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

03 — Пользователи получают адекватную поддержку в соответствии с их уровнем знаний

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

Как это проверить: во- первых, проверьте, есть ли у вас инструменты для обеих аудиторий. Затем проведите юзабилити-тесты с новичками и опытными пользователями, чтобы увидеть, правильно ли используются эти инструменты.

04 — доступ к справке не мешает прогрессу пользователя

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

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

Визуальный дизайн

05 — Не более трех основных цветов

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

Как это проверить: Убедитесь, что цветовая палитра, которую вы использовали при разработке продукта, содержит не более трех основных цветов.

06 — Цвет сам по себе не используется для передачи иерархии, содержания или функциональности.

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

Как это проверить: colorfilter.wickline.org позволит вам разместить цветной фильтр поверх вашей веб-страницы и протестировать его на различные виды дальтонизма. Вы также можете сделать снимок экрана своего продукта и преобразовать его в оттенки серого в редакторе изображений и посмотреть, сможете ли вы легко различать цвета.

07 – Визуальная иерархия направляет пользователя к нужному действию

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

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

08. Элементы, находящиеся на вершине визуальной иерархии, являются наиболее важными.

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

Как это проверить: сделайте снимок экрана вашего цифрового продукта, затем размойте этот скриншот по Гауссу до радиуса около 5 пикселей. Глядя на результат, вы сразу визуализируете иерархию и замечаете, какие элементы выделяются. Являются ли они наиболее важными для бизнеса и пользователя?

09 — Основное действие визуально отличается от второстепенных действий

Почему это важно: наличие отдельных основных и второстепенных действий означает, что пользователь не будет сбит с толку при взаимодействии с вашим продуктом и будет менее склонен к ошибкам. Например, «Отправить» и «Отменить» должны быть четко различимы.

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

10 — Интерактивные элементы не абстрагируются

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

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

11 – Отправка формы подтверждается визуально отличным способом

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

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

12 — Предупреждающие сообщения согласованы

Что это такое: Предупреждающие сообщения имеют одинаковый визуальный стиль и отображаются в одном и том же месте одинаковым образом.

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

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

13 — Предупреждающие сообщения визуально различимы

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

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

Информационная архитектура

14 — навигация последовательная

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

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

15 – Место для роста

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

Как протестировать: спросите всех заинтересованных лиц о том, как со временем содержимое продукта может расти. Будете ли вы поддерживать больше статического контента? Должна ли архитектура поддерживать видео?

Типография

16 — используется не более двух различных семейств типов.

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

Как это проверить: убедитесь, что ваш дизайн не смешивает более двух семейств шрифтов. Было бы полезно, если бы вы также убедились, что выбранные вами семейства правильно подобраны (узнайте больше здесь).

17. Шрифты, используемые для текстового содержимого, имеют размер не менее 12 пикселей.

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

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

18 – Зарезервируйте слова в верхнем регистре для меток, заголовков или аббревиатур.

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

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

19 — Для отделения контента от элементов управления используются разные стили или семейства шрифтов.

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

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

20. Размер/жирность шрифта различаются между типами контента.

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

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

Пользовательский интерфейс

21 – Близость и выравнивание

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

Как это проверить: Найдите элементы, похожие по функциональности, и проверьте, не сгруппированы ли они (по возможности) вместе.

22 — Индикатор выполнения для многоэтапных рабочих процессов

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

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

23. Элементы переднего плана (например, контент и элементы управления) легко отличить от фона.

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

Как это проверить: сделайте снимок экрана вашего продукта и размойте его по Гауссу с радиусом от 3 до 5 пикселей. Глядя на результат, можете ли вы легко сказать, что находится на переднем плане, а что на заднем?

Поздравляю с прохождением списка! Однако это еще не конец.

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