Юзабилити: подчёркивание ссылок

Здравствуйте, мои хорошие. Сейчас дедушка поведует вам о смысле подчёркивания ссылок на ваших веб-страницах.

Обычное подчёркивание

text-decoration: underline;

Справочник BookHtml.ru: правильное и валидное оформление ссылок с помощью CSS

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

Подчёркивание пунктиром

display: inline-block;
border-bottom: 1px dashed #000;

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

Неподчёркнутые ссылки

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

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

За сим разрешите откланяться. Ваш дед-сеошник.

Задавайте вопросы.

Юзабилити: подчёркивание ссылок: 7 комментариев

  1. Carte

    Спасибо, с интересом прочитала Вашу статью! Даже не задумывалась, что подчеркнутые пунктиром ссылки — это действие на той же странице… Побродила по удобным сайтам и убедилась 🙂 А на моем сайте ссылки не подчеркнуты, выделены красным. Наверное, попробую переделать и посмотрю, что получится.

    1. Дед-сеошник Автор записи

      То, о чём я написал — это основы логики поведения людей на сайте. Так проще и понятнее, и отнюдь не панацея =)

  2. Михаил

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

  3. Сергей

    Про подчеркивание ссылок с автором полностью согласен. Это должна быть основа в перелинковке, что-бы человек зайдя на страницу видел, где, что находится. Мало мальски грамотные юзеры понимают, что если текст подчеркнут, значит там ссылка. И не старайтесь как-то по другому выделять ссылки в тексте, многие этого не поймут и будут игнорировать их. Ведь мы все-таки стараемся делать сайт для человека в первую очередь, а потом для поисковика. 🙂

  4. Андрей

    Сделал подчеркнутую пунктиром ссылку по вашему примеру. Потом захотел поменять цвет — не получается. В чем может быть причина?
    И еще: а как сделать так, чтобы при наведении на подчеркнутую пунктиром ссылку подчеркивание исчезало? (т.е. чтобы показать пользователю, что ссылка активна)

    1. Армен

      С помощью CSS пример для снятия подчеркивания при навидении:
      .a {
      text-decoration: underline;
      }
      .a:hover {
      text-decoration: none
      }

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *