В процессе проектирования некоторые недостатки в вашем продукте останутся незамеченными.
Эти мелкие (а иногда и большие) вещи могут препятствовать тому опыту, который получает пользователь при использовании вашего программного обеспечения.
Мы собрали список пунктов, чтобы вы могли все проверить, прежде чем проект будет завершен.
Пожалуйста, обратите внимание, что не все эти пункты применимы ко всем продуктам. Но, в целом, они являются наиболее значимыми.
Проектирование взаимодействия
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пт. Видя результат, можете ли вы с легкостью сказать, что находится на переднем плане, и что находится на заднем плане?
Поздравляем с прочтением списка!
… Однако это не конец.
Теперь ваш продукт стал серьезнее, и вы могли бы улучшить его в нескольких областях – возможно, это более доступно в настоящее время. Но не забывайте всегда тестировать, собирать отзывы пользователей и продолжать процесс итерации.