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

Создайте ясную структуру и иерархию всех визуальных элементов. Поддерживайте визуальное сканирование интерфейса. Минимизируйте визуальный шум.

Визуальная ясность текстов:

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

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

Визуальная ясность графики:

• Используйте принципы гештальта
• Используйте законы композиции
• Учитывайте эффект «баннерной слепоты»
• Используйте простые фоны

Уже проведено достаточное количество исследований (в частности с использованием метода eye-tracking), которые говорят нам о том, что пользователи не смотрят на объекты, которые напоминают им рекламные баннеры. Это называется эффектом “баннерной слепоты”. Поэтому старайтесь не создавать таких объектов у себя на страницах.

Визуальная ясность навигации:

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

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

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

Визуальная ясность форм ввода данных:

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

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

Длина полей ввода должна соответствовать количеству символов запрашиваемой информации. Бывает, что вам необходимо ввести 20 цифр – например 20-значный номер вашего счета, а вам поле дают на 5 цифр. Или наоборот, обратная ситуация – поле ввода большое, а вам туда нужно ввести две цифры. У человека есть психологические ожидания – если ширина поля не соответствует количеству цифр вводимой информации пользователь начинает сомневаться и думать, что может я чего-то не знаю или не понимаю, они же вот столько просят, а я вот столько даю.

Надеюсь на вашем сайте присутствует визуальная ясность. Если не уверены, проверьте прямо сегодня!