Читаю дизайнерский блог и натыкаюсь на очень созвучные темы, ведь большая часть из этого применяется при проектировании дашбордов (так что чувствую себя вольно заменяя слово продукт на слово дашборд).
Так что выкладываю для вас краткое содержание статьи от Fabio Muniz (UXPin), некоторые пункты я упущу, но вы сможете найти их в полной версии.
В процессе проектирования некоторые недостатки вашего продукта могут остаться незамеченными. Эти мелочи могут значительно повредить пользователю, вызывая у него маленькие, но постоянные затруднения при использовании вашего дашборда.
Мы собрали список пунктов, которые вы должны проверить, прежде чем макет дашборда будет согласован.
Интерактивный дизайн
1. Повторяющиеся действия или частые действия не должны требовать усилий.
Почему это важно: Это важно, потому что повторяющиеся действия для одного и того же результата - это сложная задача, которая не помогает пользователю быстрее или лучше достичь своих целей. Пользователь, вероятно, также попытается найти способ обойти это: например, будет высчитывать нужные ему “Итоги” на бумажке, если вы их ему не отобразили. Если пользователь делает что-то часто, пусть делает это легко и быстро, или пусть ему не приходится делать это вовсе благодаря вашему продукту.
Как это проверить: начать с анализа всех потоков вашего продукта и наблюдения за поведением пользователя. Вы хотите убедиться, что при наличии повторяющихся действий существует способ их облегчения: например, возможность использовать ранее введенную информацию.
2. Пользователи могут легко вернуться в исходное состояние.
Почему это важно: часто пользователи выполняют непреднамеренные действия или действия, которые не приводят к желаемым результатам - и если они позволят им вернуться и повторить попытку, они не будут разочарованы, виноваты, легко восстановятся и продолжат движение по течению.
Как проверить это: во-первых, убедитесь, что ваша навигационная система позволяет вернуться назад и что действия могут быть отменены. Затем при тестирвоании создайте сценарии, в которых пользователь, скорее всего, выполнит неправильное действие, и проверьте, может ли он легко справиться с этим.
3. Пользователи получают адекватную поддержку в соответствии с их уровнем знаний.
Почему это важно: важно убедиться, что начинающие пользователи вашего продукта имеют смогут легко понять, что от них требуется. Однако, как только они станут хорошо знакомы с продуктом, то “обучающие блоки” не должны им мешать. Как это реализуется: например, ярлыки для опытных пользователей, подсказки для начинающих пользователей и т. д.
Как проверить это: во-первых, проверьте, есть ли у вас инструменты для обеих аудиторий. Затем проведите тестирование с начинающими и опытными пользователями, чтобы проверить, правильно ли используются эти инструменты.
Визуальный дизайн
5. Не более трех основных цветов.
Почему это важно : это не фиксированное правило - и иногда, для определенных случаев, можно использовать более трех основных цветов. Имейте в виду, однако, что объединение трех цветов уже сложно, поэтому в большинстве случаев следует избегать большего.
Как это проверить : убедитесь, что цветовая палитра, которую вы использовали при разработке продукта, имеет не более трех основных цветов.
7. Визуальная иерархия направляет пользователя к требуемому действию.
Почему это важно : пользователи полагаются на иерархию продукта и подсказки, чтобы знать, что делать и куда идти - важно понимать это и правильно направлять их, используя эту иерархию.
Как это проверить : понять, как работают потоки внутри вашего продукта и стимулируются ли его ключевые действия визуальной иерархией.
8. Элементы в верхней части визуальной иерархии являются наиболее важными.
Почему это важно : Визуальная иерархия позволяет пользователям быстро сканировать информацию, расставляя приоритеты в зависимости от их непосредственных потребностей. Элементы в верхней части визуальной иерархии должны быть наиболее важными для бизнеса и наиболее актуальными для пользователей.
Как это проверить : сделайте снимок экрана с вашим цифровым продуктом, затем снимите гауссово размытие этого снимка экрана с радиусом около 5 пикселей. Посмотрев на результат, вы мгновенно визуализируете иерархию и заметите, какие элементы выделяются. Являются ли они наиболее важными для бизнеса и пользователей?
9. Первичное действие визуально отличается от вторичного действия.
Почему это важно : Наличие четких первичных и вторичных действий означает, что пользователь не будет смущен при взаимодействии с вашим продуктом и будет менее подвержен ошибкам. Например, «Отправить» и «Отмена» должны быть четко различимы.
Как это проверить : при проведении юзабилити-тестирования наблюдайте за распространенными ошибками, которые возникают не из-за намерений пользователя, а из-за плохо различимых первичных и вторичных действий. Кроме того, при рассмотрении дизайна, убедитесь, что цвет, размер, расположение и другие элементы дифференцируют действия.
10. Интерактивные элементы не являются абстрагированными.
Почему это важно : при использовании нового продукта пользователи приходят с набором ожиданий, основанных на его / ее предыдущем опыте использования других цифровых продуктов - например, как должны выглядеть кнопки и как они должны работать. Выполнение этих ожиданий означает, что вы не создаете ненужных трений.
Как это проверить : Сначала просмотрите ваш продукт, чтобы найти области, в которых не используются общие шаблоны. Например, ссылки, которые не похожи на ссылки.
11. Форма подачи подтверждается визуально отличным способом.
Почему это важно : важно дать пользователю подтверждение того, было ли действие успешно выполнено или нет. Например, после отправки формы четкое подтверждающее сообщение в виде цветного баннера будет означать, что пользователь может перейти к следующей задаче.
Как проверить это : Проверьте все области вашего продукта, где пользователь вводит информацию. После того, как пользовательский ввод завершен, вызовите подтверждение относительно того, было ли это действие успешным или нет. Убедитесь, что обратная связь кристально чистая относительно конечного состояния.
12. Предупреждения соответствуют.
Что это такое : Предупреждающие сообщения имеют одинаковый визуальный стиль и отображаются в одном и том же месте одинаковым образом.
Почему это важно : Наличие последовательных предупреждающих сообщений означает, что пользователь всегда поймет, что сразу заслуживает внимания. Несогласованность с предупреждениями будет означать дополнительную умственную нагрузку каждый раз, когда появляется новое предупреждение.
Как это проверить : Убедитесь, что предупреждающие сообщения имеют одинаковый визуальный стиль и их расположение одинаково или идентично.
13. Предупреждения визуально различимы.
Почему это важно : убедившись, что предупреждающие сообщения четко отделены от других элементов экрана, пользователь может реально заметить их и / или действовать в соответствии с ними.
Как это проверить : После проверки на визуальное различие, посмотрите, как пользователи реагируют на предупреждающие сообщения в юзабилити-тестировании.
Информационная архитектура
14. Навигация соответствует.
Почему это важно : то, как пользователи ориентируются, а затем перемещаются по вашему продукту, напрямую влияет на то, смогут ли они выполнить свои цели независимо от их текущей страницы.
Как это проверить : проверьте документацию по информационной архитектуре и убедитесь, что навигация доступна на каждой странице, а также что она не изменяется и не исчезает. Прежде чем углубиться в визуальный дизайн, попробуйте сортировку карточек или древовидное тестирование, чтобы убедиться, что пути вашей информационной архитектуры интуитивно понятны.
15. Пространство для роста
Почему это важно : Вы не можете переделывать навигационную и информационную систему продукта каждый раз, когда появляются новые функции или контент. Навигационные меню и общий макет должны поддерживать больше категорий / тем без прерывания. Проектирование с возможностью роста означает, что основные усилия по проектированию и разработке легко масштабируются по всему интерфейсу.
Как это проверить : Спросите всех заинтересованных лиц о том, как контент может со временем расти в продукте. Будете ли вы поддерживать больше статического контента? Будет ли архитектура поддерживать видео?
Типография
16. Используется не более двух разных семейств шрифтов.
Почему это важно : это не фиксированное правило: иногда можно выполнить более двух. Но, вообще говоря, сопоставление более двух не легкая работа. Для удобства использования и наглядности, придерживаться двух упрощает вашу типографскую иерархию, что улучшает понимание.
Как это проверить : просто убедитесь, что ваш дизайн не смешивает более двух семейств шрифтов. Вы также должны убедиться, что выбранные вами семьи соответствуют друг другу ( узнайте больше здесь ).
17. Шрифты, используемые для текстового содержимого, имеют размер не менее 12 пикселей.
Почему это важно : Опять же, это не фиксированное правило - теоретически вы можете использовать меньшие размеры для очень специфических целей - но, вообще говоря, читаемость значительно снижается для размеров ниже 12 пикселей.
Как проверить это : проверьте весь ваш контент и убедитесь, что шрифты, используемые для них, имеют размер не менее 12 пикселей.
18. Зарезервируйте заглавные слова для меток, заголовков или аббревиатур.
Почему это важно : ограничение использования заглавных слов, как известно, облегчает понимание - это менее визуально тяжело и легче для пользователя, чтобы переварить. Его следует использовать специально для акцентирования или очень ограниченных случаев - например, аббревиатур.
Как это проверить : Запустите тщательную проверку содержимого и убедитесь, что прописные слова ограничены только заголовками, метками или аббревиатурами.
19. Различные стили шрифтов или семейства используются для отделения содержимого от элементов управления.
Почему это важно : должны быть четкие индикаторы относительно того, что такое контент и что такое элементы управления, то есть то, с чем пользователь может взаимодействовать. Этими показателями могут быть размер, цвет, расположение, шрифт и т. Д. Шрифт важен: использование разных стилей или семейств означает, что пользователь не будет сбит с толку и легко определит, с чем можно взаимодействовать.
Как это проверить : Определите все элементы управления в вашем продукте и убедитесь, что они выделяются из содержимого. При запуске юзабилити-тестов обращайте внимание на то, испытывают ли пользователи трудности при взаимодействии с элементами управления.
20. Размер / вес шрифта различает типы контента.
Почему это важно : это сильно влияет на читабельность и понимание. Проведение четкого различия между заголовками, подзаголовками и абзацами уменьшает умственную перегрузку при усвоении этого содержимого. У этого также есть визуальные преимущества - это выглядит и чувствует себя лучше.
Как это проверить : при просмотре содержимого внутри вашего продукта убедитесь, что заголовки, подзаголовки и абзацы используют разные размеры и вес шрифта.
Пользовательский интерфейс
21. Близость и выравнивание.
Почему это важно : пользователь имеет тенденцию группировать - функционально или контекстуально - элементы, которые находятся близко друг к другу. Навигационная панель является хорошим примером этого. Следование этому шаблону и группировка элементов, которые связаны, означает, что пользователь мгновенно понимает ваш интерфейс.
Как проверить это : найдите элементы, которые похожи по функциональности, и проверьте, если (если это возможно) они сгруппированы вместе.
22. Индикатор прогресса для многошаговых рабочих процессов.
Почему это важно : Специально для многоэтапных рабочих процессов пользователь может легко чувствовать себя подавленным или задаться вопросом, как долго это будет сделано. Индикатор прогресса помогает ему / ей определить местонахождение себя, но, что более важно, он создает чувство выполненного долга и снижает вероятность выпадения.
Как это проверить : Проверьте все потоки внутри вашего продукта, где есть разные шаги, чтобы чего-то добиться, затем убедитесь, что прогресс отображается с помощью индикатора.
23. Элементы переднего плана (такие как контент и элементы управления) легко отличить от фона.
Почему это важно : важно для людей с нарушениями зрения. Это также улучшает кривую обучения и понимания пользователя. Четкое разграничение облегчает навигацию, привлекает больше внимания к кнопкам и повышает удобство использования в целом.
Как это проверить : Снимок экрана - снимок вашего продукта и размытие по Гауссу на снимке экрана с радиусом от 3 до 5 пикселей. Когда вы смотрите на результат, можете ли вы легко определить, что находится на переднем плане, а что на заднем плане?
24. Поздравляем с просмотром списка!
... Однако это еще не конец.
Ваш продукт стал более надежным, и вы могли бы улучшить его в нескольких областях - возможно, он стал более доступным, например, - но не забывайте всегда тестировать, собирать отзывы пользователей и продолжать итерировать.
