Як створювати гіперпосилання

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

Правила

1. Текстові гіперпосилання повинні добре виділятися на фоні решти тексту.
2. Наведення мишки на посилання повинно викликати ефект підсвічування.
3. Текст посилання повинен бути, по можливості коротким, але досить довгим, щоб чітко описати наступне:
• куди ви потрапите.
• що побачите
• що відбудеться
4. Гіперпосилання на різні документи повинні чітко розрізнятися.
5. Гіперпосилання, що викликають несподівані для користувача дії, повинні про це попереджати, наприклад:
• посилання на файли
• посилання, що відкривають або закривають вікна.

Як не потрібно робити посилання?

Сайт призначений для пошуку доступних AstonMartin по всьому світу. На скріншоті приклад результатів пошуку. Здогадайтеся, як можна отримати більш детальну інформацію про кожний автомобіль? Посилання тут тільки модель автомобіля (у колонці Vehiclesummary).

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

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

Натискаю на «AstonMartin DB7 GT» я очікую побачити опис цього автомобіля, порушено правило 3, тому що посилання не відповідає на питання, що я побачу, якщо натисну на неї.

Як потрібно було зробити?

Ви хочете отримати інформацію про конкретний автомобіль, а в даному випадку об’єктом, який описує кожен автомобіль, є весь рядок таблиці, тому саме він повинен бути посиланням. Підсвічування рядка при наведенні миші може додатково підкреслювати цей факт.

Точний розмір в гіперпосиланнях

Досить поширена практика вказувати точний розмір у посиланні на файл:

PDF (46,764 байт)

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

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

Найчитабельніший спосіб – при використанні чорного тексту на білому фоні виділяти посилання синім кольором. При такому оформленні вони добре помітні в тексті, і досить контрастні, щоб не погіршувати читабельність.

Чи повинні гіперпосилання використовувати підкреслення?

Підкреслення добре працює для посилань у тексті, вони виділяються сильніше, ніж при використанні тільки кольору.

Цей приклад демонструє, як добре працює підкреслення, позначаючи посилання і розділяючи заголовок і вступну частину статті.

Але в міру зростання кількості посилань підкреслення втрачає свої переваги, найгірше, якщо воно використовується для списків посилань.

Ось кілька прикладів, колекцій посилань в оригінальному оформленні, і без підкреслення.

Зверніть увагу, що читати список посилань без підкреслення швидше і простіше.

Логічність

Дуже важливо, щоб гіперпосилання вели себе досить послідовно.

Очевидно, що деякі посилання, наприклад, у блоці навігації, вимагають спеціального колірного оформлення або особливої ??поведінки.

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

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

Висновок

На мою думку, збалансованим рішенням є слідувати стандарту де-факто і використовувати для посилань колір # 00f або # 00c, і червоний з підкресленням при наведенні на них мишки, в цьому випадку досить функціональні як окремі посилання в тексті, так і великі групи посилань.