Ссылки, возможно, самый важный элемент в любом документе. Без них Всемирная паутина — это просто коллекция файлов, хранящихся в Интернете. Идеальная ссылка проста, честна и пригодна к использованию. Вот как ее создавать.
1. Хорошая ссылка — это не кнопка
… и хорошая кнопка — не ссылка.
Мы часто неправильно понимаем роль ссылок в интернете. Ссылка описывает связь между двумя частями данных, обеспечивая контекст и часто обеспечивая смысл.
Кнопки выполняют действия, ссылки формируют контекстные связи.
Ссылка не выполняет действие. К примеру, ссылка на скачивание драйвера принтера, как показано ниже, не должна быть ссылкой, это должна быть кнопка; кнопки не ссылаются на данные, они выполняют действие.
Это совершенно верно, что подавляющее большинство элементов графического интерфейса позволяют нажимать или кликать ссылку, чтобы получить доступ к связанным с ней данным, но это просто ярлык. Основная роль ссылки заключается в установлении связи между частями данных.
2. Хорошая ссылка объясняет ее назначение
Основной проблемой использования ссылки является тот факт, что якорный элемент достаточно гибкий, чтобы его можно было использовать несколькими способами без разрыва. Например, ссылка mailto: не должна быть ссылкой (это действие, а не соединение между частями данных), которая избежала устаревания, будучи действительно очень полезной.
У нас есть целая иерархия заголовков — включая относительно бесполезные <h5></h5> и <h6></h6> — но у нас только один якорный элемент. В идеальном мире у нас было бы несколько якорных элементов для придания семантического значения ссылкам, возможно, элемент <ae>< / ae> для внешних ссылок (данные в другом домене) и элемент <ai></ai> для внутренних ссылок (данные в том же домене). В настоящее время наиболее близким к семантическому значению ссылок является использование абсолютных путей для внешних ссылок и относительных путей для внутренних ссылок.
Конечно, мы можем применять различные стили к различным классам привязки с помощью CSS. Вполне разумно, чтобы уточнить цель, внутренние ссылки должны быть оформлены в соответствии с брендом сайта, но внешние ссылки должны быть чем-то иным.
В размышлениях Тима Бернерса-Ли 1997 года о природе UI он заявляет, что:
«Интерфейс должен иметь определенную универсальную согласованность по отношению к универсальному пространству»
Конечно, понимание пользователями того, как пользоваться Интернетом, стало развиваться с тех пор, как эти слова были написаны, но существенный момент верен; пользователи предпочитают интерфейс, который отражает их более широкий опыт. Хотя существует аргумент в пользу того, что внутренние ссылки должны поддерживать бренд сайта, чтобы уточнить, чтобы разъяснить, на что они ссылаются, не менее веским аргументом считает и то, что придерживаясь стилей по умолчанию — синий, подчеркнутый, системный шрифт — для внешних ссылок, вы не только упрощаете интерфейс, но и уточняете, что данные не связаны с текущим сайтом.
Вопрос о том, приводит ли несогласованность ссылок к большей путанице, чем облегчает, следует решать в каждом конкретном случае. Но в тех случаях, когда внутренние ссылки и внешние ссылки стилизованы одинаково, в интересах удобства использования, это знакомый синий, подчеркнутый, системный шрифт, который лучше всего удовлетворяет пользователей.
3. Хорошая ссылка посещается
Благодаря метафорам Уильяма Гибсона у нас есть тенденция концептуализировать серфинг в интернете как путешествие в разные места. Ссылки рассматриваются как шлюз в другое место, когда на самом деле они являются шлюзом для чего-то еще. Взгляните на историю браузера. Это не карта местности, а хронологическая запись событий. Ссылки — это точки на временной шкале потребления данных.
Не менее важными, чем ссылки на будущие данные, являются ссылки на прошлые данные: посещенные ссылки. Посещенные ссылки важны, потому что это посещенные ссылки, которые контекстуализируют наше потребление данных и выделяют (путем их исключения) те данные, которые мы еще не использовали.
Посещенные ссылки могут быть немного грубыми — в идеале ссылка будет сопоставлена с историей браузера пользователя, чтобы определить не только, если документ был посещен, но и если документ был обновлен с момента последнего посещения пользователя. Несмотря на это, посещаемые ссылки – это низкопробные плоды дизайна пользовательского интерфейса, слегка стилизованные как ненасыщенная, менее срочная версия активной ссылки, и предоставляют пользователю неоценимую информацию об их опыте.
4a. Хорошая ссылка всегда синяя
Принцип, формализованный психологией как «Эффект простого экспонирования», учит нас, что чем более знакомо что-то, тем более привлекательным оно является.
Цвет гиперссылки в браузере по умолчанию — синий. Гиперссылки, по-видимому, были сделаны синими по чистой случайности (предположительно, чьи-то личные предпочтения). Случайное решение принесло пользу юзабилити, потому что почти ни у кого нет дефицита «синего зрения»: в отличие от красного и зеленого, мы почти все видим синий.
Независимо от того, изучено ли поведение людей или по своей сути более это используемый цвет, синие ссылки нажимаются чаще.
Из-за этой глубокой ассоциации ни один текст не должен быть синим, если это не ссылка.
4б. Хорошая ссылка редко бывает синей
Синий — самый популярный цвет по всем направлениям. Синий также является наиболее распространенным цветом в дизайне пользовательского интерфейса, особенно среди технологических и новостных сайтов.
Вездесущность синего цвета создает проблему для дизайнеров: если основной цвет бренда синий, должны ли ссылки в документе также быть синими, или использование синего в общем дизайне запутывает расположение ссылок?
Со временем было обнаружено, что пользователи предпочитают дополнительные цвета для ссылок — оранжевый или зеленый, например. Тем не менее, с доказанной эффективностью синих ссылок, стоит все же приблизиться к синему спектру: красные должны граничить с фиолетовым, зеленые с бирюзовым.
5. Хорошая ссылка подчеркнута
Аргумент для подчеркивания заключается в том, что, как и в примере с драйвером принтера выше, подчеркивание усиливает цветовой индикатор; если человек дальтоник, он все еще может видеть подчеркивание.
Аргумент против подчеркивания заключается в том, что подчеркивание прерывает поток текста. Google удалил подчеркнутые ссылки несколько лет назад, считая их разрушительными для пользовательского опыта.
Если подчеркивание текста действительно слишком разрушительно, есть две простые альтернативы: вы можете либо стилизовать псевдо-подчеркивание, применив пунктирную нижнюю границу к ссылке, которая будет визуально менее впечатляющей, или вы можете выделить по-другому, например, создавая на ссылке цветной фон.
Как и во избежание синего текста, никогда не подчеркивайте текст, который не является ссылкой, пользователи сделают вывод, что ваша ссылка битая задолго до того, как они осознают, что вы просто приняли плохое дизайнерское решение.
6. Хорошая ссылка выделяется
Ссылки должны быть легко идентифицируемыми. Взаимодействие на разных устройствах непоследовательно, и полагаться на изучение страницы для раскрытия ссылок — это верный рецепт разочарования пользователя.
Исследование по отслеживанию глаз предполагает, что пользователи просматривают ссылки сразу после заголовков, чтобы определить части страницы, наиболее интересные для них. Эта возможность еще более важна для пользователей, читающих с экрана, которые не могут визуально сканировать страницу на предмет релевантного контента, но могут (и делают) сканировать ссылки для идентификации интересного контента.
Когда ссылки рассматриваются как маркированные точки, они описывают не только данные, на которые они ссылаются, но и контент, в котором они находятся. Вы не будете ссылаться на информацию о духах из абзаца о горных велосипедах, поэтому здравый смысл заключается в том, что если есть ссылка на горные велосипеды, то абзац, в котором он находится, также будет о горных велосипедах.
7. Хорошая ссылка использует хорошие микрокопии
Если возможно, держите ссылки в конце предложений или в конце блоков текста: это ограничивает прерывание мыслительного процесса и создает менее разобщенный опыт. Однако никогда не используйте подход " больше информации...".
Если ввести в поисковике Google запрос для “нажать здесь”, вам выдаст 5,090,000,000 результатов. Аналогичный поиск для “подробнее" выдаст 17,090,000,000 результатов. Какая потеря!
Помимо очевидных сбоев SEO “подробнее", «узнать больше”, „нажмите здесь “ и им подобные, плохо написанные ссылки создают впечатление, что текущий контент отказывается от своего авторитета. Вы, по сути, говорите «Эта информация поверхностная, есть более полезная информация в другом месте”.
Если ссылка разработана достаточно хорошо, то с первого взгляда ясно, что это ссылка, и инструкции в стиле ”нажмите здесь» излишни.
8. Хорошая ссылка способствует хорошему UX
Очень важно, чтобы ссылки могли быть легко запущены, независимо от устройства доставки.
Ссылки должны следовать аргументированному подходу большинства вариантов использования. Это означает, что внутренние ссылки открываются в том же окне, а внешние ссылки открываются в новой вкладке. Однако, есть исключения, ссылка на политику конфиденциальности, например, является внутренней ссылкой, но должна быть открыта в новой вкладке. Всякий раз, делая этот выбор, спросите себя, может ли пользователь нуждаться в кнопке «назад». Если это так, используйте новую вкладку, чтобы ее можно было легко закрыть, возвращая пользователю предыдущую информацию.
Никакая ссылка не должна удивлять пользователя, и это включает в себя тип контента, на который вы ссылаетесь. Если вы ссылаетесь на контент, который является NSFW, или находится за брандмауэром, рассмотрите возможность использования псевдо-элементов :before или :after, чтобы вставить значок рядом со ссылкой, предупреждая пользователя о том, что происходит.
Ссылка должна всегда держать свое обещание. Это означает, что когда пользователь нажимает, кликает, выбирает или иным образом запускает ссылку, он получает именно то, что они ожидал. И это включает в себя обеспечение того, что ссылки никогда не должны быть битыми и неактивными.
Всем успешной работы!
0 комментариев