Дизайн списков ссылок

06.11.2009

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

Приведу несколько приемов, используемых при дизайне списков.

1. Межстрочные интервалы

2. Маркеры списка

3. Разделительные линии

4. Зебра

Пример с drupal.ru

5. Разбавление ссылок картинками или текстом

Примеры с designformasters.info

Должны ли ссылки быть всегда подчеркнутыми?

Несколько цитат с хабрахабра.

dubr: если некоторый блок состоит из ссылок чуть менее, чем полностью, подчеркивание каждой ссылки ощутимо усложняет восприятие. Подчеркивание можно убрать, если есть уверенность, что пользователь не растеряется (список ссылок — это то, что он ждет увидеть).

Sabiko: подчёркивать ссылку или нет — зависит от контекста. Я считаю, что в плейн тексте всегда нужно и подчёркивать, и выделять цветом. В остальном — списках ссылок, меню, повторяющихся элементах интерфейса, табах — опционально и по ситуации. В большинстве случаев оптимально выделять цветом/шрифтом и подчёркивать при наведении.

dubr: мнение знаменитого Якоба «Usability Nazi» Нильсена: можно не подчеркивать, когда речь идет о менюшках-навигациях и прочих списках ссылок, но 1) помним о дальтонизме, не используем зеленый-красный для выделения 2) подчеркивание важно для слабовидящих.

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

Комментарии

Роман Настенко, 06.11.2009 15:52

Кстати, тут еще есть вопрос в реакции ссылки на наведение курсора. ИМХО, пропадание подчеркивания в таком случае — глюк, всегда. Мы как бы убираем признак ссылки главный при наведении — меня это всегда из себя выводило :)

Дмитрий Сергеев, 06.11.2009 16:34

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

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

Роман Настенко, 06.11.2009 17:21

Я же не спорю, что этого достаточно для распознания.

Вопрос тут именно в реакции ссылки на действие пользователь. А именно в исчезании главного признака ссылки. Даже если остальные не оставляют сомнений в ее сути — исчезание главного признака ставит в тупик.

Поэтому лично я никогда так не сделаю.

Зимин Дмитрий, 09.11.2009 23:02

Поддерживаю чуть более чем полностью. Это все, мне кажется, по причине "ну я уже на 10 сайтах делал подчеркнутым, мне уже обрыдло, тут я сделаю неподчеркнутым при наведении" :)

Дмитрий Сергеев, 09.11.2009 23:11

Просто я одно время на всех сайтах стабильно убирал подчеркивание при наведении. Очень гордился, что знаю псевдоселектор hover. Вот и защищаю по привычке :)

Роман Настенко, 09.11.2009 23:15

А разве изменение цвета ссылки хуже показывает знание hover? :)

Дмитрий Сергеев, 09.11.2009 23:45

Истинная причина, о которой не хотел говорить, - это знание свойства text-decoration.

Дмитрий Агафонов, 07.11.2009 13:36

Насчет подчеркивания. Флеймить на эту тему можно много, однако тут обязательно одно: сразу должно быть понятно что это ссылка. Некоторые умудряются так оформить что ходить по сайту огромная проблема, совершенно непонятно где вообще ссылка!
И еще. Я против подчеркивания обычных ссылок курсивом и прочими "изысками", это годится только для ссылок с JS.

Олег Михайлович Нефёдов, 07.11.2009 17:32

Спасибо! Как всегда очень познавательно и полезно!
Успехов!