Правильні посилання

Думаю, що я не відкрию Америку, якщо скажу, що посилання (гіперпосилання) це основа вебу. І саме з посиланнями дуже часто пов'язано дуже багато проблем.

Кожен день я опиняюся на сайтах, де мені доводиться напружуватися і шукати, куди б клікнути, щоб перейти на потрібну мені сторінку. Або, знайшовши нарешті посилання, я клікаю і з завмиранням серця чекаю, що ж зробить мій браузер – відкриє нове вікно, викличе якусь функцію на поточній сторінці або ще що-небудь.


Коли людина відкриває якусь сторінку, він відразу ж хоче зрозуміти, чи є тут те, що він шукав, і куди він далі може піти. Наше завдання, як авторів сайту, в цьому йому допомогти.


Виділення посилань


Будь-яке посилання на сторінці має бути видно, і користувачеві має бути очевидно, що це дійсно посилання, по якому можна перейти.


Найкращий спосіб виділити посилання – це підкреслити її і виділити іншим контрастним кольором. Чому саме підкреслити? Тому, що користувачі до цього звикли – абсолютна більшість сайтів мають подчернуть посилання (і в більшості випадків – сині), їм відразу очевидно, що перед ними посилання, а не просто виділений шматок тексту.


Наведу простий приклад "погано – добре". Скажімо, у нас є два однакових шматка тексту з різним оформленням посилань. Де посилання видно відразу? Думаю, відповідь очевидна.



Оформлення посилань


Як ви знаєте, у посилання є чотири стану. Кожне з станів повідомляє користувачеві певну інформація, яка для нього вкрай корисна. На жаль, багато веб-майстра і дизайнери не приділяють належної уваги посиланнях, від чого страждають самі і мучать користувачів.


Проста посилання (a: link)

Таке посилання говорить користувачеві, що перейшовши по ній, він опиниться на сторінці, на якій ще не був до цього (принаймні, його браузер цього не пам'ятає).


Наведення (a: hover)

Основне завдання цього стану – показати користувачеві, що він навів курсор саме на ту посилання, на яку хотів. Колір наведенню повинен бути відмінний від кольором простого посилання, тоді ви не переплутаєте, на яку з посилань збираєтеся натиснути.


Активна (a: active)

Цей стан показує, що ви тільки що кликнули на обрану посилання і зараз ваш браузер вантажить документ з цієї адреси (чи виконує прив'язане до заслання подія).


Колір, бажано, інший, тоді буде видно, що щось відбувається після вашого кліка.


Відвідане (a: visited)

Тут все ясно – за адресою цього посилання ви вже були. Згадайте як нещодавно ви шукали чергове рішення за допомогою Гугла і у видачі у вас траплялися посилання, виділені фіолетовим кольором – відразу зрозуміло, там ви вже були. Просто і зручно, чи не так? Висновок – виділяємо відвідані посилання іншим кольором.


На картинці нижче видно, що лівий варіант абсолютно не інформативний. Користувач веде курсор над групою посилань і не бачить, на який засилаючи він зараз (куди може натиснути).


Крім того, якщо серед цих посилань є вже відвідані ним, цього він теж не зрозуміє і може повторно опинитися на сторінці, на якій вже був.



Так, є ще один момент. Ці правила, в основному, варто застосовувати до внутрітекстових посиланнями: наприклад, пункти меню не вимагають виділення відвіданого стану, так як в розділах вміст може змінюватися досить часто і користувач може знайти так щось нове при наступному заході.


Полуссилкі

Думаю, кожен їх вас хоч раз використовував такі посилання. Скажімо, ви зробили список якихось пунктів, і при натисканні на пункт відривається більш детальна інформація нижче. Ось такі посилання я і мав на увазі.


Можливо, ви помічали на деяких сайтах посилання, виділені переривчастою лінією або точками. Так ось, ряд студій і дизайнерів використовує такий варіант оформлення для виділення таких "полуссилок". Я вважаю, що це дуже гарний прийом і раджу вам його використовувати.


Що стосується кольорів станів, то, думаю, тут можна не виділяти відвідані стану (дії адже відбуваються всередині сторінки, так?).


Побудова посилань


Крім виділення та оформлення посилань, я хотів ще поговорити про побудову посилань. Давайте згадаємо, що є у посилання.


Адреса (href)

У кожної посилання є адреса, інакше це вже не заслання. Крім того, адреса повинна вказувати на місце в поточному документі або на адресу іншого документа. Зрозуміло? Зрозуміло. Але часто (надто часто) можна бачити щось зразок <a href="#">, <a href="alert(…); return false;"> або зовсім страх типу <a href="javascript: someFunc();">.


Останні два варіанти навіть не обговорюються, такого просто не повинно бути. Якщо ви хочете прив'язати до заслання виконав функції JavaScript, то й прив'язувати подія треба теж на JavaScript.


Що стосується якорів, то їх слід використовувати або строго за призначенням, або як індикатор поточного стану сторінки (як це зроблено в пошті Гугла і в нас у прикладі про гарний аякс).


Текст посилання (анкор)

Текст посилання повинен давати уявлення про те, що побачить користувач, коли клацне по посиланню (не залежно від того, чи буде це повноцінний перехід на іншу сторінку або дія цього). Самий кошмар це посилання типу "далі", "ще" і "детальніше".


Крім того, коли користувач переглядає тексти на вашому сайті (так-так, Мало хто читає великі цеглини тексту повністю), він, крім заголовків і картинок, зауважує виділені вами посилання. Якщо вони йому цікаві, він зупиниться і буде читати текст близько цього посилання.


З точки зору оптимізації сайту, тексти посилань (Анкор) дуже важливі. Про це Даня вже писав в одній зі своїх статей про сео.


Тайтл (title)

У тайтл посилання можна писати, що побачить користувач, коли клацне по ній. Скажімо, у нас на Тимчасово є ось такі тайтли:


Піктограми

Найвідоміший приклад піктограми у посилань – піктограма відкриття в новому вікні. Думаю, що мало кому з вас подобається, коли після кліка по посиланню, замість відкриття сторінки в поточному вікні, з'являється попап або нова вкладка в браузері. І користувачам це теж не подобається, так що закликаю вас інформувати своїх відвідувачів про відкриття нового вікна.


Крім того, дуже часто зустрічаються посилання, які ведуть на документ іншого формату, скаже док-файл або пдф. Часто браузер користувача не може відкрити такі формати сам, тому він або пропонує їх завантажити, або починає відкривати відповідну програму. Все це для рядового користувача не очевидно, так що ми може йому підказати, який документ перебувати по посиланню.



Висновок


Отже, я висловився. Чекаю ваших запитань, зауважень і доповнень. Усім спасибі.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*