Основные принципы визуализации ссылок

Разделы: Web, Юзабилити

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

Основные принципы юзабилити для отображения текстовой ссылки.

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

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

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

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

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

Используйте различные цвета для посещенной и не посещенной ссылки.

• Цвет не посещенной ссылки должен быть более заметным, ярким и насыщенным, чем цвет посещенной ссылки, который должен выглядеть "использованным" (матовым и размытым).
• Эти два цвета должны быть вариантами или оттенками одного цвета, чтобы они смотрелись четко связанными между собой. Использование резко отличающихся цветов (например, оранжевый и зеленый) затрудняет восприятие для пользователей, понимание связи между этими двумя типами ссылок.
• Оттенки синего обеспечивают сильный сигнал для ссылок, но и другие цвета могут работать почти так же хорошо.
• Как всегда, при использовании цвета для сигнальной информации, нужно обеспечить избыточные сигналы для пользователей с дальтонизмом. Установка не посещенной ссылке цвета ярче и светлее, чем посещенной, как правило, позволяет достичь этой цели.

Никогда не делайте цвет обычного текста похожим на цвет ссылок.

• Обычно следует избегать выделять текст цветом, если это не ссылка. Однако, предполагая, такой цвет отличается от цвета ссылок, иногда можно использовать цветной текст, не вызывая серьезных проблем в юзабилити. Например, в итоговом списке проверок, можно показать слово "хорошо" зеленым, а слово "ошибка" красным цветом. (Тот факт, что значения слов явно отличаются обеспечивает необходимую избыточность для пользователей дальтоников.)
• Не используйте синий текст вне ссылки, даже если вы нигде его не используете для ссылок. Синий по-прежнему цвет с сильной воспринимаемостью, что это цвет ссылки.

Нет необходимости использовать специальные цвета и другие способы визуализации при наведении курсора на ссылку. Это только может вызвать замешательство у пользователя при перемещении указателя мышки по странице.

• Исключение: если делаете ссылку с меньшей воспринимаемостью, чем максимальная для доступности, то можно вернуть часть юзабилити, сигнализируя о «кликабельности» ссылки, когда пользователь наводит на нее курсор. Например, если ссылки не подчеркнуты, вы можете подчеркнуть их при наведении на них указателя.
• В любом случае, не используйте полужирный шрифт при наведении, поскольку это делает шрифт шире и может вызвать смещение остального текста.
• Одним из полезных эффектов при наведении указателя на ссылку — это заголовок (название) ссылки, что поможет пользователю узнать, куда приведет его ссылка, прежде чем он щелкнет по ней.

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

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

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

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

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