Основи на уеб дизайна - връзки и навигация

[sofie]

Основи на уеб дизайна:
връзки и навигация

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

Навигацията на сайта ви има 2 основни цели:
1. Да каже на посетителите какво могат да намерят на сайта
2. Да им помогне да стигнат до необходимата информация бързо

Навигацията прекалено често се пренебрегва като важност. Всъщност обаче тя е изключително важна – тя позволява на посетителите бързо и лесно да достигат до информацията, която им е нужна. Редовните посетители често навигират през сайта ви без реално да четат заглавията на секцията, а по силата на навика натискат връзките по разположението им, а не по имена. Затова е от ключово значение да не сменяте навигацията на сайта си през 2 седмици – ако връзката към секцията новини е била на второ място преди една година, и сега трябва да е на второ място. Това включва подребда, вид, размер на връзките. Освен това, навигационната ви лента придава допълнителна сила на интернет марката ви – едно е да имате собствено лого, но в комбинация с навигационната лента то може да подпомогне за отличаването на сайта ви от милионите други в интернет.

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

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

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

Например, при хоризонтална навигационна лента от главните секции може да се отварят падащи менюта с връзки към третото ниво информация. При вертикална навигационна лента подсекциите може да се появяват под връзката за главната секция в самата лента, но подравнени по-навътре, напр:
Начало
Продукти
Бързооборотни
Дълготрайни
За нас
Доста сайтове избират фреймовете (рамки) като практичен начин за организиране на навигацията, тъй като този вариант позволява навигационната лента да се зареди само веднъж, а съдържанието да се сменя – удачен вариант, ако навигацията е по-тежка графично, т.е. отнема повече време за зареждане. Като се изключи неудобството с непрекъснатото следене информацията да се отваря на правилното място, фреймовете дават възможност за бързо отваряне на под-менюта за навигация вътре в секцията при информацията (еквивалентно на самостоятелен сайт с отделна навигационна лента).

След като решите по какъв начин да устроите навигацията на сайта си технически, следва въпросът какви секции ще включите в основната навигационна лента. Отговорът зависи от това колко и каква информация имате, какви са целите ви с този сайт, и кой ще го посещава – което има особено значение за подредбата на линковете. Дали посетителите ви се интересуват повече от историята на фирмата или от продуктите й? Дали да сложите конктактите си преди или след новините? За тези неща няма готови отговори – всичко зависи. Преценете сами. Ако нещо не работи, променете го. Както и да е, повечето корпоративни страници включват следната информация (съответно категории): За нас, Новини (понякога се включват в За нас), Продукти/Услуги, Контакти. Дали ще има допълнителни категории, или няма да използвате тези а други такива, зависи изцяло от това, което искате да постигнете със страницата си.

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

Но какво става, ако потребителят не намери нужната му информация въпреки добре измислената навигация и картата на сайта? Всеки сайт трябва да включва контактна информация – адрес, телефон, e-mail. Предоставянето само на форма със задължителни полета (с цел улесняване на обработката на запитванията) не води до нищо добро – непрекъснато попадам на такива форми, които обикновено нямат нищо общо с въпроса, който искам да задам – и накрая или си тръгвам от сайта раздразнена, или съм принудена да пиша глупости по задължителните полета, за да мога да пратя въпроса си. Като пример, формата на М-тел под заглавие “Вашето мнение” (http://www.mobiltel.bg/index.php?url=gsm_net&selected=001&lang=bg&) се отнася само и единствено за проблеми с покритие и връзка. А ако искам да питам за нещо друго, например разширяване на мрежата? Така че винаги предоставяйте контактите си – така вдъхвате доверие на посетителите си. Със нежеланата поща (спам) все някак ще се справите.

И така, подредили сте навигацията, картата, търсенето. Сега остава да свържете страниците една с друга. Когато правите линкове вътре в текста, има няколко правила:
1. Никога не правете връзката с прекалено много текст. (По-добре връзката да е една дума, вместо цяло изречение).
2. Не слагайте прекалено много връзки в един параграф (по-добре една, максимум две връзки, вместо 50).
3. Връзките в текста трябва да са ясно различими – цвят, подчертаване – използвайте поне единия начин.
4. Следете връзките да се отварят на правилното място (при фреймове), а външните връзки да се отварят в нови прозорци (като съответните връзки е добре да бъдат обозначени по някакъв начин).

За допълнително улеснение на клиентите, особено когато имате връзки в текста между страниците, е добре да включите информация за това, къде точно се намират те в момента. Пътеката от камъчета обикновено е във вида, да кажем Фирма: Продукти: Бързооборотни стоки: Шоколади, като всяка част от пътеката е връзка, т.е. посетителят освен за ориентация може да я използва за бързо преминаване към друга страница.

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

Основното, което трябва да помните при разработването на навигацията на сайта ви е:
1. Навигацията е с ключово значение за въздействието на сайта ви върху посетителите
2. Посетителите ви не познават вас и вашите продукти – правете навигацията логична и последователна
3. Подреждайте страниците си (и съответно връзките към тях) според нуждите на посетителите ви, а не според вашите разбирания какво искате да знаят за вас.

[iDesign-er]

QUOTE

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

Моето лично мнение е, че сайтове, който изплозват фреймове, не са по-практични и навигацията не се зарежда много по-бързо от един сайт, направен само с таблици. Мисля, че дори и сайтът да не е с фреймове, навигацията няма да се зарежда наново всеки път, когато се отваря нова страница, защото тя (навигацията) се пази в кеша на браузъра. Друг е въпросът за това, че фреймовете създават доста проблеми не само на "паяците" като Google (поне така съм чувал :wink:), а и при контрола в кой фрейм да се отвори всяка страница, виждал съм дори и случаи, в които външен сайт се отваря в основния фрейм (сигурно поради невнимание) и се получава пълна боза.

[NIKITA]

Почти категорично ПРОТИВ фреймовете. Този "лукс" може да си позволят само сайтове, които не разчитат на посетители от търсачки. Примерно btv.bg, mtel.bg, globul.bg. Тези сайтове са си просто известни сред хората по една или друга причина.

Значи основно съм против, понеже сайтовете с фреймове трудно се индексират от търсачките (главен пример: Google) и се губят наистина много посетители !.
Навигацията не се зарежда по бързо, понеже всички графики се кешират на компютъра на user-а и не се теглят повторно.
При фреймове, резултат от търсачка може да води до страница, която да е вътрешна за сайта или пък до навигацията. Това се оправя с JavaScript, проверява се дали страницата е част от фреймовата конструкция и я слага, където и е мястото. НО има user-и, които си изключват JavaScript-а (малко са, но ги има ...) и тогава ... миш-маш
Навигацията може да се сложи в един "header file" и просто хората да не се занимават с frames

[sved]

вече фреймовете отпадат... pulen_lamer е прав ... аз силно се боря против фреймовете... css rulzzz


Edited by NIKITA

[vallentin]

Мда и аз съм срещу фреймовете, а то напоследък и срещу таблизите и вложените таблици се надигнаха много коментари, натискат всичко да се прави с css ама аз тоя css като не го разбирам :roll:

[NIKITA]

Какво им има на таблиците пък ??

[sved]

кво им е на таблиците ли??? ами нищо освен, че ако направиш дизайн с таблици:
1. ще е 50-60% по тежък отколкото с css
2. ще е много трудно да преместиш примерно даден елемент (зависи колко вложени таблици използваш )
3. различните броузери различно си бачкат с тях

за друго за сега не се сещам.. :wink:

[vallentin]

Ей тука има много добро инфо за таблиците и за css алтернартивите:

http://forums.flashbg.org/viewtopic.php?t=2251

[NIKITA]

само некой лумпен ще слага 10 вложени таблици една в друга

[d-phrag]

QUOTE

1. ще е 50-60% по тежък отколкото с css 2. ще е много трудно да преместиш примерно даден елемент (зависи колко вложени таблици използваш  :D ) 3. различните броузери различно си бачкат с тях

Мога да те подхвана по всички точки да ти обясня колко не си прав...Какво значи "50-60% по тежък отколкото с css" - нали не мислиш че с CSS си решаваш целия дизай на страницата в 5 реда сорс? Колко по малък мислиш ще ти е сорса за един layer с текстове отколкото същия, направен с таблица? Toя CSS нали и той трябва да се зареди.

"ще е много трудно да преместиш примерно даден елемент (зависи колко вложени таблици използваш"

къде ще го местиш тоя елемент не разбрах

"различните броузери различно си бачкат с тях" - оооооо, щото всички броузъри работят еднакво с CSS...най-вече старите версии на Netscape...който се е занимавал с webdesign от началото на 1996, ще разбере какво имам предвид.

Без лоши чувства. PEACE