Накратко:
Текстовите връзки трябва да са оцветени и подчертани, за да са очевидно кликаеми, макар и да има някои изключения от това правило.

За да максимизирате възприемания афордънс (бел. ред. афордънс - англ. affordance, характеристика, която прави начинът на употреба на нещата очевиден. "Възприеман афордънс на кликаемостта" — доколко дадена връзка се възприема като нещо, което очевидно може да се кликне.) на кликаемостта, оцветявайте и подчертавайте текста на връзката. Потребителите не трябва да налучкват или да претърсват из страница, за да намерят къде да кликнат.

Ако текстът на връзката е оцветен, не винаги е абсолютно необходимо да го подчертаваме.

• Съществуват два основни случая, при които можете безопасно да премахнете подчертаването: навигационните менюта и другите списъци с връзки. Това, обаче, е вярно само, когато дизайнът на страницата ясно обозначава функцията на пространство. (Помнете: вашият дизайн може да не е толкова очевидно разбираем за външен човек, колкото е за членовете на екипа.) Потребителите обикновено разбират предназначението на разположена в ляво навигационна лента със списък от връзки на цветен фон, приемайки, че тя е подобна на навигационните зони в повечето останали сайтове.
• Изключение: подчертаването е особено важно, когато използвате червени и сини цветове на връзките, което създава проблеми за потребители с различни форми на цветна слепота.
• Изключение: подчертаните връзки са важни за достъпността на информацията за потребители с увредено зрение, така че запазете подчертаването ако достъпността е приоритет за вашия сайт или пък имате много потребители със слабо зрение.

Не подчертавайте текст, който не е връзка, дори ако връзките ви не са подчертани. Запазете подчертаването за връзките. Понеже подчертаването увеличава възприемания афордънс на кликаемост, потребителите ще бъдат объркани и разочаровани ако подчертаният текст всъщност не действа по очаквания от тях начин.

Използвайте различни цветове за посетените и непосетени връзки.

• Цветът на непосетените връзки трябва да е по-жизнен, светъл и наситен от цвета на посетените връзки, които трябва да изглеждат като нещо "използвано" (скучно и размито).
• Двата цвята трябва да са варианти или оттенъци на един и същи цвят, така че да могат лесно да бъдат свързани един с друг. Използването на драстично различни цветове (да речем оранжево и зелено) затруднява потребителите при установяването на взаимоотношението между двата вида връзки и идентифицирането на цвета, който е "използваната" версия на другия.
• Оттенъците на синьото най-ясно обозначават връзките, но другите цветове вършат почти същата работа.
• Както винаги, когато използвате цветове, за да предадете информация, трябва да предоставите достатъчно други следи за цветно-слепите потребители. Ще постигнете тази цел като направите непосетените връзки по-ярки и по-светли от посетените.

Никога не показвайте текст със същия цвят като цвета на връзките, освен ако не е връзка.

• В повечето случаи трябва да избягвате оцветяването на текст, освен ако не е връзка. Ако, обаче, цветът се различава от цвета на връзките, понякога можете да използвате оцветен текст без да предизвикате големи проблеми с ползваемостта. Например, в списък с резултати от проверка можете да покажете думата "окей" в зелено, а думата "грешка" в червено. (Фактът, че значението на думите е очевидно различно предоставя онази допълнителна следа за цветно-слепите потребители.)
• Не използвайте синьо за текст, който не е връзка, дори когато не използвате синьо за връзките. Синьото все още е цветът с най-голям възприеман афордънс на кликаемостта.

Няма нужда да използвате специални цветове или друг начин за визуализиране, когато курсорът преминава върху връзката. Ако ги използвате, страницата само ще изглежда по-неподредена докато потребителят движи мишката из екрана.

• Изключение: ако представяте връзките по начин, осигуряващ по-нисък възприеман афордънс на кликаемоста, можете да възстановите част от изгубената ползваемост като обозначите кликаемостта при преминаване на курсора върху връзката. Например, ако връзките не са подчертани, можете да ги направите подчертани, когато курсорът минава върху тях.
• Един полезен hover ефект е използването на заглавия на връзките (бел. прев. атрибутът title), за да помогнете на потребителите да предвидят накъде води връзката преди да са я кликнали. (Ако използвате някой от широкоразпространените браузъри, можете да наблюдавате този ефект при връзките на тази страница.)

Не използвайте дребен шрифт за връзките. Не поставяйте връзките прекалено близо една до друга, така че потребителите с двигателни проблеми да изпитат трудност при избирането им. Тези указания са особено важни, когато трябва да се осигури ползваемост за по-възрастни потребители.

• Изключение: Няма проблем да използвате дребен шрифт за връзки, които ще са необходими на малко потребители (като информацията за запазените права), когато ги поставите на второстепенно място (като футър) така, че потребителите да не се чувстват задължени да ги четат.
• Ако в целевата група на сайта влизат предимно възрастни хора или по друг повод имате множество по-възрастни потребители, трябва да се уверите, че връзките се показват с голям размер шрифт (16 пиксела или повече) и че връзките съдържат достатъчно текст, който да ги направи по-лесно кликаеми.

Всички тези препоръки се отнасят до външния вид на текстовите връзки. Още по-важно е да изберете внимателно съдържанието на връзките (думите), но това е друга тема. Графичните връзки са още една тема, но и без това обикновено е най-добре да се използва текст за повечето връзки.

Следването на препоръките за ползваемост при оформяне на връзките на вашия сайт ще улесни много потребителите, когато се опитват да разберат какво могат да направят на всяка страница и ще намали вероятността да пропуснат важни връзки.

Да поговорим за това

Ако изпитвате нужда да поговорите за тази статия с някой, да кажете колко (не) ви харесва или въобще - форумът е отворен непрекъснато. Заповядайте »