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

В света на уеб дизайна обаче сме все още като че ли все още в първите и непреработени варианти на приказките. В гората наречена интернет, потребителите все още често се губят и отвсякъде ги дебнат куп опасности – огромното количество безполезни сайтове, агресивните рекламни банери, вдебилените SEO експерти.

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

Пътечките представляват хоризонтален списък от имена на страници, които описват всяко ниво от йерархията на сайта от най-горната (началната) страница на сайта до страницата, на която се намира потребителя. Всяко име в списъка е линк към съответната страница.

Бредкръмбовете са особено полезни, когато сайтът има повече нива в йерархията си и основната навигация не може адекватно да покаже на къде точно се намира някоя страница от по-долните нива в йерархията. Те могат да помогнат на потребителите да си отговорят на два от най-важните навигационни въпроси – „Къде съм?” и „Къде мога да отида от тук нататък?”.

Някои препоръки при оформянето на пътечката:

• Първият линк да не е просто “Начало”, а нещо по-специфично, например името на сайта, защото „Начало” или „Home” е прекалено общо и нищо незначещо понятие.
• Отделните имена се разделят със знак за по-голямо – „>”. Често се използват и други символи за разделяне като вертикална черта „|”, наклонена черта „/” или „\”, две точки и всякакви други варианти. Най-добре въпреки това е да се използва знакът за по-голямо, защото интуитивно подсказва значението на всяка страница в списъка и принадлежността и по-горното ниво. Т.е. началната страница е най-важна, следващата страница е по-малка и част от по-горното ниво и т.н. Всеки друг символ означава по-скоро разделение, а наклонените черти говорят нещо само на хора, които са виждали команден ред на операционна система.
• Името на страницата, на която си в момента се включва в пътечката. Ако пътечката и заглавието са разделени визуално потребителят може да не разбере, че представляват едно цяло и имат комбинирано значение – да показват къде се намираш в момента и принадлежността на настоящата страница към някаква по-сложна и многопластова структура.

В крайна сметка обаче е важно да се спомене, че пътечките рядко се използват от потребителите. За дизайнерите това означава, че не бива да разчитат прекалено много на тях и не е необходимо насочват прекалено много визуално внимание към тях. Вместо това е добре да се инвестира повече време в измислянето на по-добра структура и навигация.

Пример 1

Пример 2

Разбирам, че повечето уеб разработчици ползват Firefox или Safari за работа и ежедневно браузване. Но в същото време съм на мнение, че оптимизацията за браузър от сорта на IE7 не е кой знае колко трудна или отнемаща специални услилия.

Явно обаче тия хора са счели за излишно въобще да поглеждат страниците си с тоя все още популярен (в моя случай дифолтен) браузър. Лично мен би ме било срам да пускам такъв вид продукт.

Ако бях и на мястото на хилядите блогове и галерии, които слагат линкове към подобни сайтове също бих се засрамил от себе си. Защото показвам възхищението си и соча за пример очевидно неработещи решения.

То верно, че на обущаря децата ходят боси, но чак пък толкова…

Та мисълта ми е – не пренебрегвайте нищо мейнстрийм, просто защото не го одобрявате или не “вярвате” в него. Обикновено има доста добри причини да се е наложило в обществото и да се пренебрегва с лека ръка е дълбоко погрешно.

Сега е моментът да спомена очеркa за Пол Ренд, който написах преди време за Groove Manifesto.

На илюстрацията по-горе с червена пунктирана линия е отбелязана видимата площ преди човек да трябва да скролира при резолюция 1024х768. Първият пунктир указва каква част от съдържанието се вижда, когато го има огромният банер “За града”, който явно се показва само при първоначално зареждане на страницата. При повторно зареждане банерът го няма и видимата площ се разширява до втория пунктир.

Струва ми се, че основната промяна е в навигацията. Сега тя се простира на около една трета от първия екран преди скрола (при резолюция 1024х768). Този факт, заедно с разполагането на един голям и един огромен банери в това пространство измества смисленото съдържание чак след скрола.

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

Както се вижда тук смисленото съдържание не започва дори след първия скрол, а навигацията си остава абсолютно същата.

Както писа преди време Джарид Спуул от UIE, отделянето на значителни ресурси за глобална навигация в един сайт, защото през по-голяма част от времето на потребителите не им трябва глобална, а локална (контекстно-зависима) навигация. Подобни твърдения има и Джейкъб Нийлсен, който направо пита Полезна ли е навигацията въобще? Добро обобщение на изледванията посветени на навигацията е направил Хенрик Олсен в една статия, която преведох за Groove Manifesto.

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

Но да се върнем на началната страница на capital.bg. Освен с неефективното оформление преди първия скрол, сайтът впечатлява и със загубата на значително пространство чрез неефективния си grid и дизайна на анонсите за новините.

Всичко това води до значителното издължаване на началната страница и трудното ориентиране на човек. При по-ниски резолюции потреблитят трябва да скролва нагоре надолу, като при всеки скрол получава сравнително малко ценна информация, губи контекст и трудно сканира съдържанието на сайта, което в крайна сметка увеличава времето за работа със сайта и следователно раздразнението и неудволетвореността. 

Да се надяваме, че версия 5 на сайта ще отстрани тия проблеми, тъй като честно казано статиите в Капитал са интересни сами по себе си и ще е жалко да продължат да страдат от неадекватния дизайн.

Този дизайн е въплъщение на изискванията и представите за уеб сайт на всички най-претенциозни, нищо не разбиращи от интернет и най-вече от собствената си работа клиенти. И виждам това като решение на един от най-посещаваните български сайтове (4-ти по данните на alexa). Удивително!

ViewSofia. Днес се появи официално нов сайт, направен от Нетейдж, в който специално дизайна много ми харесва. Иначе е предназначен за богати жени.

Най-красивият и добре направен сайт от последните месеци.