Лекция 1: въведение за понятието Web дизайн някои митове за Web дизайна



страница5/7
Дата06.09.2016
Размер1.56 Mb.
#8371
ТипЛекция
1   2   3   4   5   6   7

1.4.3. Главни вътрешни нива

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



1.4.4. Вътрешни страници

Докато началната страница трябва да грабне посетителя, задачата на вътрешните страници е да го задържат, да го накарат да се върне отново и да включи сайта в списъка с предпочитани места в мрежата Favorites.



Вътрешните страници също трябва да са в единство са предходните нива, да са еднотипни като стил. Добре е от всяка вътрешна страница да има минимум един линк. Желателно е също от всяко вътрешна страница да има връзка към заглавната, с оглед добрата ориентация на посетителите, както и към допълнителните страници. Дизайнът на вътрешните страници следва да е изчистен, единен за целия сайт, логически и интуитивен, естествено съобразен с вътрешната аудитория. Първата страница трябва да хармонира с дизайна на останалите страници навътре в сайта. Желателно е определени, цветове, икони да се използват във всички страници от сайта, за да бъде той единен, потребителя да не губи ориентация, да не се създава у него чувството, че е на непознато място. Така се изгражда определен стил на сайта. Централните елементи на всяка страница са логото на сайта или фирмата, основната навигация към основните нива, допълнителната навигация към допълнителните нива, различни графични елементи. Така те образуват вида на всяка страница и повторяемостта им създава усещането за цялост и комфорт у посетителя. Към тях се добавя конкретното и различното за всяка страница съдържание. Вътрешните страници позволяват предвижване чрез скролбар, която от своя страна става отегчително, ако е на повече от три екрана. Налагащата се тенденция е това да се избягва напълно, като информацията се свежда до най-важното и се разделя на малки порции, които се поднасят на отделни екрани. Разбира се това решение не е невъзможно особено за новинарските и порталните сайтове. След като се уточни структурата на страниците, основните елементи, които присъстват в нея и навигациите, се пристъпва към създаване на статичен модел, макет, така наречия темплейт, на чиято база се създават след това всички страници независимо динамични или статични. Към разработването на темплейт за вътрешни страници се преминава след утвърждаването на първата страница, тъй като е добре те да имат еднакво излъчване, въпреки различната структура. Работа с темплейт позволява хомогенно, едностилно и улеснено създаване на вътрешните страници.

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

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

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



1.4.5. Допълнителни страници

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

Едно проучване на хипертекста през осемдесетте години на миналия век показва, че структурата помага на потребителите да навигират. В Мрежата, обаче структурата се подценява поради четири причини:



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

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

  • всички уеб браузъри пренебрегват нуждата да се визуализира информацията относно структурата. Хипертекстовите системи от преди появата на Мрежата често са правили точно това, а проучванията показваха, че добрата визуализация на структурата помага значително.

  • потребителите са толкова нетърпеливи в Мрежата, че не отделят време да изучават някой отделен сайт и неговата структура - вместо това, те преминават на следващия сайт.

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


Лекция 4
Web дизайн
Проектиране елементите на сайта

доц. д-р Йордан Николаев
1. Навигация
1.1. Общи изисквания към навигацията

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

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

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

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

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

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

Според последните тенденции в разработването на сайтове и търсенето на максимална функционалност и удобство за потребителя към допълнителната навигация се поставя бутона Print –разпечатай, който води към съответното действие, но не се отнася за цялата страница, а до отпечатване на само текстовата част от страницата. Това е така наречената Print friendly version - версия за отпечатване, която не е натоварена с излишни графични елементи и се събира идеално на стандартен лист А4.

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

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

Тенденциите в последните години е навигацията да е графична, с типичните за второ поколение уеб сайтове бутони, или трето поколение – динамични и обемни елементи, да се решава в чисто текстов или комбиниран вариант. За някои сайтове допълнителните страници се решават в графични линкове като малки икони или бутони. Решенията относно навигацията на сайта трябва да бъдат прецизно разгледани и подбрани, с оглед постигане на максимална функционалност на сайта и успешно, удобно, ненатрапчиво водене на посетителя.

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

Понякога се прилага техника, при която линк се отваря в нов прозорец на браузъра, вместо в текущия или така наречената техника “open in new window”, реализиран с помощта на параметъра Target. По този начин се дава възможност на потребителя да ползва съдържанието и на двата екрана. Но от друга страна ако потребителя отвори повече връзки той може да загуби връзката между тях и да се отегчи. Ето защо опцията “open in new window” не бива да се прилага за връзките на вътрешните нива на сайта, а що се отнася до външните линкове “open in new window” е правилното решение за тях, за да може потребителя едновременно да отвори предлагания му линк и да остане на сайта, с който работи.

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

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

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

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

Поведението на потребителите и навигацията

Няколко други фактора отнасящи се до външния вид на връзката могат да накарат потребителите да правят предположение за нейното значение. Визуалното оформление на връзката може да предаде доста информация за нейното съдържание. Използване на сходно визуално оформление за различни връзки създава впечатление за концептуална сходност. Може би визуалното оформление е предназначено да съобщи нещо на потребителя; може би е просто избор, продиктуван от стила. Какъвто и да е случаят, потребителите ще се опитат да извлекат от визуалното оформление цялата информация, която могат.



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

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

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

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

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

Целият този опит - и общ, и конкретен - служи като филтър, чрез който те прекарват информацията предоставена им от страницата относно съдържанието, което се крие зад всяка връзка. Като резултат от тези процес, те ще оформят картинката в съзнанието си, едно очакване за съответната страница. Тази картинка ще бъде оценена според критериите, които правят страницата заслужаваща си посещението.

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

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

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

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

Тази обща картина на потребителско поведение остава постоянна докато доминиращи браузъри бяха последователно Mosaic; Netscape 1, 2 и 3, и IE 4 и 5. Ясно е, че това е фундаментален феномен. Години изследвания с потребители, шест браузъра, три производителя на софтуер, едно и също поведение на потребителите.

Това е наистина всеобщ феномен, който характеризира поведението на потребителите на различни сайтове и в различни изследвания. Изледванията на потребителите обикновено показват, че:



  • Потребителите първо коментират съдържанието; ако съдържанието не е от практическо значение, те не се обръщат внимание и на другите аспекти от дизайна.

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

  • Потребителите не разбират къде се намират в информационната архитектура на сайта.

  • Потребителите са изключително движени от целта си - те не губят много време за други неща.

  • В преследване на целта си, потребителите често разчитат на търсенето като своя основна стратегия.

  • Потребителите рядко гледат логото, заявленията за мисията, слоганите или различните други елементи, които считат за излишни (в частност, те пренебрегват рекламата или всичко, което прилича на реклама).

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

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

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

В много сайтове на навигацията е обърнато прекалено много внимание. В частност, т. нар. spoke дизайн, при който всяка страница е свързана с всяка друга страница, води до влошаване на ползваемостта. Аналогично, много сайтове имат претрупани footers, в които има връзки към прекалено много мета-възможности (да речем, "за компанията" или заявление за личните данни).

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

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

Breadcrumb trails (“следи от трохички” в уеб дизайна означава поредица от връзки, обозначаващи точното място на потребителя в сайта, премерно Главна > За нас > Шефът) служат по-два начина:


  • Контекстът на настоящата страница (как се вписва страницата в него) позволява на потребителите да си обяснят страницата по-добре.

  • Връзките позволяват на потребителите да отидат директно на по-високо ниво в сайта в случай, че настоящата страница не е това, което са търсели, но те искат нещо подобно

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

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

  • Подобни продукти, които са малко по-евтини или малко по-скъпи от настоящия продукт.

  • Свързани продукти, които се връзват добре с настоящия.

  • Продукти, които се различават от настоящия продукт по някоя важна характеристика .

  • Различни версии на настоящия продукт.

  • Биографии на авторите или списъци с други статии от същия автор

  • Дискусионен форум или друга дискусия по настоящата тема

  • Новини относно настоящата тема (но не всички новини).

Едно проучване на хипертекста през осемдесетте години на миналия век показва, че структурата помага на потребителите да навигират. В Мрежата структурата се подценява поради четири причини:

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

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

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

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

През 1956 година психологът Джордж Милър публикува оригиналното изследване. От тогава правилото (7±2 или, че навигацията трябва да се състои от 5 до 9 връзки) се цитира често от дизайнерите на интерфейс. По-внимателен прочит показва, че Милър не прави никакви изводи, който могат да бъдат свързани директно с уеб навигацията.



Първо, Милър изучавал ограниченията на краткосрочната памет. Той заключава, че има лимит от неща, които краткосрочната памет може да задържи: (7±2). Той не е изучавал броя на нещата, които хората могат да възприемат, който, той признава, можел да достигне хиляди. Навигацията на уеб сайта, обаче, няма отношение към краткосрочната памет. Рядко от потребителите се изисква да запаметят елементите на едно меню. Всъщност, много от навигациите на сайтовете са представени на всички страници, по всяко време за постоянна справка. Механичната памет не играе значителна роля.

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

За много сайтове наистина могат да са седем елемента. Изборът, обаче, не трябва да се основава на магичното правило "7±2". Големите блокове информация ще изискват много повече от седем елемента в едно меню, за да се постигне баланс между широчина и дълбочина. В края на краищата, нека потребителите кажат какво е най-добро.


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

1) дълбочина или широчина (вертиклана или плоска структура) и

2) начина за показване на информацията.

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

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

Усилието необходимо за постоянен избор на категории из многото нива на една дълбока йерархия е по-голямо от усилието необходимо за преглеждането на многото елементи от една широка навигация. По-вероятно е потребителите да се изгубят в по-дълбоки структури. Една по-широка структура представя цялото информационно пространство заето от един уеб сайт. Чрез една по-широка структура новите посетители или потребителите с неясни цели ще имат възможността да придобият по-широк поглед върху това, което предлага сайта. Тогава те ще могат по-лесно да разгледат внимателно категориите и да направят по-информирани решения.

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

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

Но в нашата епоха, в която информацията сама по себе си е стока с ценност, влошаването на достъпа изглежда противопоказно. Всъщност, целта на повечето сайтове е да представят информация. Въпросът не е в това колко информация има, а как тя може да се представи най-добре. Както казва известният дизайнер на информацията и професор в Йейл Едуард Тъфт: "Суматохата и объркването са провали на дизайна, не атрибути на информацията" (Envisioning Information, Graphics Press 1990).

Вече се появиха много жизнеспособни решения за представяне на широка навигация. Ето няколко примера:

Подреждане по важност на видовете навигация. Често сайтовете имат основна, вторична и третична навигации. Разделянето на различните видове менюта може да се осъществи чрез разположението им по страницата, чрез размерите на шрифта и използването на различен шрифт, а и чрез цвета.

Пример: PayPal използва добре различните дебелини и размери на шрифта, за да подреди по важност връзките, като същевременно избягва визуалния хаос. Чрез менюта разпределени правилно в пространството, 40-те връзки на главната страница не са проблем. Сравнение: Fleet Homebanking има около 35 връзки, без да броим падащите менюта и търсенето.



Групиране на подобните елементи. Когато има много елементи с еднаква важност се препоръчва групиране. Това позволява на потребителите да преглеждат на ниво отделни групи и след това да се съсредоточат върху подкатегориите.

Пример: Верикалната навигация в ляво на All Recipes има повече от 25 елемента, които са групирани. Вместо имена на групите, между тях просто има празно място.



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

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



Скриване на елементите във второто ниво на менютата. Вече често се срещат навигационни менюта, имащи скрити подменюта, които се появяват при кликване или посочване с мишката. Елементите на менюто са винаги достъпни, но не винаги видими. Внимание: този метод може да предизавика проблеми с ползваемостта.

Пример: Главните секции на International Herald Tribune онлайн са достъпни от всяка страница с едно кликване. В резултат се получава една много чиста страница, така че можете да се съсредоточите върху четенето на новините. Сравение: MSNBC е не само зашеметяващ, но и има сериозни проблеми с ползваемостта заради използването на многопластови менюта.



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

Пример: В BMWUSA (кликнете "Virtual Center," после "Choose a Model"), можете бързо да видите ценовите разлики между наличните кабриолети, например. Макар не без проблеми, има и уместна визуализация.

Разбира се са възможни и комбинации между горните решения, а съществуват и други, които не са споменати тук. Разгледайте Art and Culture като добър пример за подреждане по важност на навигацията и за техники за визуализация. Този сайт предлага смес от различни видове навигация, които улесняват браузването, директното търсене и способността за случайно откриване на ценни/интересни неща и същесвремнно предлага едно позитивно преживяване за потребителя.
1.2. Видове навигация

1.2.1. Текстова навигация.

Още с появата на уеб страниците, с тяхната основна характеристика – хипервръзките, се появяват и първите менюта, които на този етап са под формата на текстови връзки в началото или в края страницата.Идеята е заимствана от съдържанието на книгите и по тази причина в ранния етап от развитието си навигацията силно го наподобява. Когато се говори за първо поколение уеб сайт се подразбират предимно текстови страници, свързани с подобни текстови линкове. Текстовата навигация е удобна по няколко причини:

Прави се много лесно и също толкова лесно се поддържа.

Достъпна е за всички потребители, независимо от версията на бразъра им.

Пълното зареждане на страницата от мрежата става изключително бързо.
1.2.2. Графична навигация.

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

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

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


1.2.3 Flash навигация

С появата на Flash технологията, която предлага голяма степен на интерактивност, позволи на уеб дизайнерите да правят менютата много по-атрактивни и функционални. Появиха се дори цели сайтове само с Flash, но се появи един основен проблем бавното им зареждане. Това се дължи на факта, че цялата информация се намира в един единствен файл, който въпреки Flash – оптимизацията става много голям. За определени сайтове като артистични или лични страници това е допустимо, но при фирмени и информационни Flash - решенията се използват рядко. Flash-навигацията крие известен риск да направи сайта неизползваем за някой потребители, ако техните браузъри не е поддържат. По тази причина обикновенно се разработват две версии на сайта и едната от тях е с обикновена текстова или графична навигация. Избора между версиите може да става ръчно или автоматично с помощта на Java Script, който проверява възможностите на браузъра.


1.2.4 Навигация с форми
Става дума за така наречените падащи менюта, реализирани с форми и по-точно с употреба на тага < SELECT >. Тяхното предимство е че заемат много малка част от екрана и в същото време са атрактивни като начин на действие. Техния основен недостатък се крие в това, че дизайна на този тип менюта не може да се управлява, те винаги изглеждат по един и същ начин, характерен за обекта Select. Новите версии на браузъра Internet Explorer дават възможност с помощта на CSS да се внасят известни промени, но тъй като това не важи за другия основен браузър Netscape Navigator, използването им в различните от стандартите изгледи изглежда почти не се практикува. Като цяло падащите менюта, реализирани с форми, се използват рядко от една страна поради грубоватия дизайн, а от друга поради по-трудното им създаване, което изисква JavaScript.
1.2.5 Навигация с фреймове.

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

Ползването на фреймове има някои предимства, но също така и доста недостатъци.

Основните недостатъци са следните:



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

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

  3. поради това, че фреймовата структура придава точно определен външен вид на страницата, това води след себе си до еднообразие.

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

  5. проблем е обработката на страниците съдържащи фреймове от различните версии на браузерите.

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

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




1.2.6 DHTML – ново поколение текстова навигация

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



С развитието си уебдизайна се оказва отново там, от където е тръгнал, но този път обогатен с нови технологии, съчетаващи в себе си добрите страни на всички предхождащи ги. Оформянето на навигацията в уебсайта е една от най-отговорните дейности, а избора между текстовата или графичната версия изглежда по-труден от всякога. Но така е само на пръв поглед, понеже в действителност няма значение дали са използвани графика или текст, ако това е направено както трябва и с усет за естеството на Интернет.
С помощта на DHTML се създава много гъвкава навигация тя отново е текстово базирана, но този път може да реагира по всевъзможен начин на действията на потребителя, като да се появява и изчезва с движение, да имитира падащо меню, да се пренарежда според избраното, да се появяват нови менюта за избор в рамките на същата уеб страница, без тя да се презарежда.


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

  • Отделните елементи да са балансирано разположени един спрямо друг.

  • Запълването на празното пространство с background image вече отдавна не се прилага.

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

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


  • Централно разположение на съдържанието с празни пространства от двете страни.

  • Подравнено горе вляво и с празно поле вдясно.

  • Ако си използват фреймове, Flash или друга технология, може да се разтяга да съответния размер екран за сметка на едно или друго поле.


При създаването на сайтове все още се среща надпис: Best viewed on 800x600 или респективно 1024х768, като явно разчитат посетителя да превключи резолюцията си. Цитирането на резолюция, за която е подготвен сайтът, бе често срещано и дори общоприето до преди няколко години. Днес уеб дизайнерите разполагат с подробни статистики, правят проучване на аудиторията си преди да започнат изграждането на сайта и след направения анализ решават на каква резолюция ще го правят.


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

Уеб пространството, разглеждано като медия, има своите специфични характеристики, които трябва да бъдат отчетени дори при създаването на текстовото съдържание.



Какво е по-специфичното за текстовете в Интернет. На първо място е ограниченото пространство на екрана на монитора, което при това е различно при различните потребители и зависи от големината на монитора и неговите настройки. За разлика от печатните издания, при които е ясно каква част от текста стои винаги заедно на една страница, тук единственото сигурно нещо е, че само най-горната част от текста ще бъде достъпна без вертикално предвижване. Според изследване7 върху потребителите на Интернет авторите доказват твърдението, че хората не обичат да се предвижват по екрана и обикновено интересът им към определена уеб страница се ограничава едва до видимата без скролиране част от нея. Това е причината досадните в много случаи рекламни банери да се намират най-отгоре. Но ограниченото пространство води до необходимостта основната и важна част от информацията да бъде събрана в началото на страницата. Това от пък обезсмисля останалото съдържание след като потребителя е научил вече, това което му е необходимо, тъй като прескача несъществената информация по-надолу.

Трябва да отбележим също, че много често се допуска грешката печатните и рекламни материали на дадена фирма или организация да бъдат пресъздавани под формата на уеб страници. Те очакват че след като те “работят” добре в традиционната си форма, това ще се повтори и в Интернет. Когато искаме да използваме тези материали се препоръчва да се запази основното послание, но то да бъде съкратено и преработено с оглед спецификата на Мрежата. Това преработване на материалите се основава от желанието основната информация да се събере в “първия екран” и води до оформянето на текста в колони от две, три и в някой случаи до пет. Тази идея е заимствана от вестниците, при които организирания в колони текст се оказва по-лесно четен и достъпен. При уеб страниците тези две идеи се съчетават по един естествен начин и оформянето на текстови колони се оказва почти задължително, особено в случаите, когато текстовата информация е с по-голям обем. Самото форматиране на текста се формира на базата на тага , тоест използва се форматиране с таблици. Структурата на таблицата се оказва единствения инструмент, с помощта на който може да се овладее хоризонталната и да се прецизира разположението на отделните елементи. Самата таблица е невидима, тъй като тя няма рамка (BORDER=”0”) и служи единствено за придаване на структура на разпределени по нейните полета информация. Таблицата обикновено има един ред, с няколко полета в него. И ако все пак текстовото съдържание бъде оформено в една единствена колона, е желателно тя да не се разпростира по цялата ширина на екрана.Защото ако имаме 17 или 19 инчов монитор и разделителна способност 1024 х 768 забелязваме колко трудно се чете такъв текст. Редове са твърде дълги и човек трябва да си помага с пръст, за да следи текста. А ако ползваме лаптоп с разделителна способност 800х600 ще попаднем на сайтове, при които се появява хоризонтален скролбар, и за да прочетем текста се налага да се предвижваме за всеки един ред надясно и обратно наляво. Този проблем обаче може да се реши чрез допълнително задаване на размер в таблицата с което се игнорира влиянието на разделителната способност на монитора. Например, ако цялото съдържание на уеб страницата е поставена в таблица само с единствено едно поле, на което е определен размер 750 пиксела по широчина (WIDTH=”750”), то на екрана на браузъра ще се оформи колона от текст, която ще стои непроменена независимо дали потребителя използва разделителна способност от 640х800 или 1024х768. В първия случай екрана ще е запълнен изцяло и ще има хоризонтален скрол бар, а във втория – ще остане неизползвано празно пространство.

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

Друг проблем, който възниква при текстовете е кирилицата. Много потребители се оплакват, че не могат да прочетат някой сайт, независимо как превключват настройките на своя браузър. Това става, когато в уеб страницата е указано да се използва определен шрифт като , който на компютъра на конкретния потребител не е кирилизиран. В по-новите браузъри има заложени алгоритми за избягване на този проблем, но като цяло не трябва да се разчита на това. Решението на проблема е при страниците със съдържание на кирилица да не се използва параметъра FACE. Информацията ще бъде максимално достъпна единствено в случаите, когато браузера бъде оставен сам да избере шрифта.


Характеристики на шрифта8
Терминология

Семейство — съвкупност от шрифтове, обединени под общи признаци (font-family);

Начертание — комплект символи от дадена гарнитура, които се различават по цветова наситеност, пропорции, контраст и наклон (typeface).

Тежест — определя се от дебелината на основните и съединителни контури в различни начертания.

Пропорции — показател за промяна на ширината.

Контраст — отношение на дебелината на съединителните контури към дебелината на основните контури.

Видове шрифтове

Всички шрифтове могат да се класифицират в три основни групи - серифни (serif), несерифни (sans-serif) и шрифтове свободен стил (декоративни, ръкописни и т.н.


Удобство на четене

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


Изисквания и фактори за удобна четаемост

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

Garamond–Light, Garamond–Iitalic, Garamond–Condensed…

Скоростта зависи от анатомията на буквите. Шрифтът написан с главни букви (А, Б, В…) се чете 12 пъти по-бавно от шрифта написан с малки букви (а, б, в…). Курсивният шрифт (а, б, в…) се чете също толкова добре както нормалния, но само в «среден по дължина» текст. Буквите трябва да са достатъчно контрастни и тъмни на бял или слабо наситен сив фон. Всички други варианти от гледна точка на удобочетимостта са губещи.Това не значи, че не можем да пишем зелени букви върху кафяв фон, в случая това би намалило удобочетимостта.Големината на шрифта (кегел) зависи от типа на текста. Най-разпространен е вариантът от 12-14px. Дребният текст (9-10px) ще бъде прочетен тогава, когато не е обемист и се намира във фокуса на вниманието.
Пробели (бели полета)

Ще изясним общите изисквания:



Абзац (Paragraph) — Определя темпа на четене. Разстоянието, което отделя абзаците един от друг, по подразбиране е 1em (16px). Увеличаването на това разстояние създава впечатление, че абзацът е самостоятелна единица;

CSS — p {margin:1em}



Отстъп (Text Indent) - Разстоянието в началото на първия ред в абзаца; CSS — text-indent {}

Междуредов пробел (Leading) - Разстоянието между базовите линии в два съседни реда. Междуредовото разстояние е приблизително 120% от използвания кегел на шрифта. Заглавията и дребния текст се четат по-добре ако leading-ът е около 100–110% ; CSS — line-height {}

Tracking и Kerning - Тези функции определят разстоянията между думите и буквите. Малкият кернинг е подходящ за заглавия, той придава сбит вид на текста, което помага за неговото възприемане като едно цяло.

CSS — letter-spacing {} word-spacing {}


Подравняване

Както знаем от MS Word, съществуват четири вида подравняване на текста: ляво, дясно, централно и двустранно.

· Ляво подравняване — Подравняването в ляво е най-актуално, тъй като процеса на четене се осъществява отляво надясно. Поради отсъствието на сричкопренасяне, от дясната страна се образуват твърде назъбени краища;

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

· Централно подравняване — Преди време беше актуално заглавията да се центрират, но сега, като че ли това излезе от мода. Използването му като основен текст разрушава визуалната тежест;

· Двустранно подравняване — При обемист текст, двустранното подравняване е най-удачно, стига ширината на колоната да не е прекалено тясна, за да не остават зеещи дупки.
Текстът като част от web дизайна

За по-голяма яснота, най-напред ще отделим стандартните разбирания за функциите на шрифта използвани в интернет от тези в предпечата:



Размер (кегел) — Приблизителната разделителна способност на един 17" монитор при резолюция 1024х768px е 96dpi. В офсетовия печат стандартната разделителна способност е 2400dpi. Измервателната единица е пункт (1pt=0,352mm). При компютрите пикселът е най-малкият размер, който може да бъде изобразен на екрана. В интернет приложенията се препоръчва кегелът да се задава в проценти:

16px = 12pt = 100%

Семейство шрифтове (font family) — Типографското разнообразие в интернет не е голямо. То се ограничава с наличието на разпространените стандартни шрифтове. Благодарение на политиката на Microsoft, съществува неголям набор от TrueType шрифтове, наречени «Core Fonts for Web», които са безплатни и са достъпни за масовата интернет аудитория. Това са:

Те са оптимизирани за ниско екранна резолюция и са предназначени специално за използване в WEB. Освен тях популярни са:

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

Особености при използване на шрифтовете във web (или какво може и какво не шрифтът в web)
Поради ниската си екранна резолюция, мониторът не е в състояние да изобразява твърде малки детайли. Ако на хартия може да се напечата текст от порядъка на 1–2pt, то на един стандартен дисплей минимумът е 7–8pt.

За четлив се смята шрифтът, не по-малък от 9px (минимум), в най-добрия случай той трябва да е несерифен9, поради отсъствието на допълнителни елементи (засечки). Шрифтовете с кегел над 17px (удебелени - наклонени) използват функцията Anti-Alias за заглаждане на контурите (italic bold). Шрифтът ще изгуби уникалността на начертанията си, ако намалим кегела под допустимия размер на мащабиране (italic bold). Можем да използваме максимално гъвкаво CSS за да нагласим текста както ни хрумне, но с оглед на това, че старите браузъри няма да покажат това, което сме имали предвид. В сравнение със списанията, които използват множество цветови съчетания между текст и фон, компютрите са много по-напред със своите True Colors (24bit).

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

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



Arial е твърде изрязан и стеснен шрифт. Той е по-подходящ за писане на цифри отколкото на текст; Tahoma е удачен за текст с малък и голям кегел; Verdana е най-често срещания шрифт в интернет, понеже изглежда добре във всички свои вариации.

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

Courier е монохромен шрифт, всички негови символи имат една и съща ширина, поради което е удобен за дефиниции на отделни думи в текста; Georgia е визуално красив и приятен шрифт, той подхожда повече за дълъг текст. Неговите букви са закръглени и широки, което допринася за лесното му възприемане; Times New Roman е шрифтът, който се среща най-често, както в книгите, така и в интернет. Той гарантирано има ефект въху дълги и къси пасажи, в заглавия, цифри.

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

Поради проблемите с достъпността, които бяха разгледани по-горе се налага в уеб дизайна да се използват 2 начина за относително определяне на размерите на шрифта - проценти и em (1 em е равно на 100%). Все пак често се препоръчва използването на проценти заради проблемите, които има Internet Explorer 3.x (IE3) за Windows с em-размерите. Em не се поддържат правилно. IE3 ги интерпретира като пиксели. Ето защо големина на шрифта от 1.25 ems ще бъде показана като 1.25 пиксела.

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

заглавието е два пъти (200%) по-голямо от стандартния текст, и в същото време се зададе

тага да бъде с големина на шрифта 200%, то общо ще се получат 400% за

.

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

Относителните размери на шрифта теоретично са добро решение, но на практика се оказват проблематични. Използването на стилове за определяне на размерите на шрифта, изисква особено внимание при структурирането на страницата. Наследствеността (отношението между родителски тагове и "деца") може да се окаже проблем. Ако текст с големина на шрифта 80% от големината на елемент, който от своя страна също е 80% от друг елемент, в края на краищата ще има шрифт с 80% от размера, който се желае. Дори и с тези главоболия, положителните страни на шрифтовете с относителни размери далеч превъзхождат отрицателните такива.

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

Всеки модерен компютър разполага с необятно количество шрифтове. Използвани от тях са доста малка част (Times New Roman, Courier, Palatino и т.н.

Повечето комерсиално разпространени шрифтове са обединени във фамилии, съгласно приликите си във физическите характеристики или историческия произход. Например, т. нар. Old Style шрифтове, като Palatino и Garamond, са били създадени в дванадесети век, но се използват и в металните шрифтови набори създавани през Ренесанса; модерните шрифтове като Helvetica и Gill Sans са едно съвременно отражение на рисуваните на ръка шрифтови форми. Ако се разгледа някой каталог на шрифтове, като онлайн библиотеката на Adobe, ще може да се придобие добра представа какво е общото между членовете на тези фамилии.

За целите на дизайна шрифтовете биха могли да се разделят на две категории: със серифи (serifs) и без серифи (sans serif).



Серифните знаци имат малки "кукички", или серифи, по върховете си, които свързват една буква със следващата. Интересен е факта, че когато се чете обикновен текст на някои от Западните азбуки, очите се плъзгат по върховете на буквите. Колкото по-различими, колкото по-тясно свързани са те към съседните си, толкова по-бързо могат да се четат.

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



Шрифта се избира според целите на съдържанието. За дълги текстове се предпочита серифен шрифт; за заглавия, цитати и за всякакъв друг материал, върху който се желае да се привлече вниманието на читателя, съответно се използвай без серифен шрифт. Някои съвременни без-серифни шрифтове - Arial, Optima, Verdana и Helvetica - също имат заоблените и лесно различими форми на серифните шрифтове и затова те подхождат идеално за представяне върху екран на всякакви видове текст.

Колкото по-дълги са текстовете, обаче, толкова по-важно да се улесни тяхното възприемане от читателите. И тук шрифтове като Times New Roman и Garamond, както и по-нови шрифтове като Minion Web, който изчезна от пакета шрифтове на Microsoft, доказват своята огромна стойност.

След като бъде избран шрифт, който отговаря на нуждите, е важно да се отбележи една закономерност при използването на който и да е шрифт, а именно че почти всички от видимите му достойнства ще изчезнат с намаляването на размерите му. Повечето серифни шрифтове са създадени така, че да се четат най-лесно при размер 10 до 14 точки (points); повечето без серифни шрифтове могат да бъдат намалени с още точка-две и да останат четливи.

Без значение колко сериозно е съобщението което се прави, то няма да бъде прието насериозно, ако е оформено с някой по нетрадиционен шрифт като Chilada или Comic Sans. Шрифт, създаден специално за Интернет трябва задължително да има пълен набор от дигитални символи.



Текстови блокове
Ширината на текстовите блокове има голямо значение, както за дизайна на сайта, така и за удобството на читателя. Тя е свързана с движението на погледа при четене, който се движи от единия до другия край на всеки абзац. Вземете за пример вестник, където редовете не са ограничени с колони, а са написани от единия до другия край. Текстът се възприема най-добре, когато не надвишава 60–90 символа на ред.

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

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

Проблемът при дългия по обем текст е, че се увеличава вертикалната дължина на страницата, което е свързано с две ограничения: (1) Превъртане на вертикалния scroll; (2) превишаване на оптималния размер на страницата - 30KB. Има един изход - разпределяне на съдържанието в отделни страници. Това решение не е идеално, защото откъсва читателя от основната тема, като изисква от него допълнителни действия. Неудобство в случая е и изчакването на повторно зареждане на съдържанието.

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

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

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

Човешкото око е еволюирало така, че когато хората четат, то отива първо на белите полета, независимо дали са на екрана или на хартия; след това то различава тъмните форми, които са върху тях.

В следствие от това дизайнерите оставят много бели пространства и в полетата около текста, и между редовете на текста. Това разстояние между редовете (наречено "leading" - разредка, междуредие) помага на шрифта да се открои от фона. Друго правило е разредката да е поне 25 процента от широчината на шрифта - това означава, че при шрифт с размер 10 точки, разредката трябва да е поне 2.5 точки, а при 12 - поне 3 точки.

Ето и примери за това как разстоянието между редовете се отразява върху цялостния вид на един абзац текст:




Пример 1 се чете доста лесно и на екран, и на хартия. Пример 2, без разстояния е доста по-труден за четене, а в Пример 3 - 50 процента увеличение на междуредието вероятно е малко повече от необходимото.


Гъвкавост

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



Шрифт и графика

Заглавията и навигацията, които са приоритет на текста, са почти напълно отнети от графиката.

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

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

От примера се разбира следното — шрифт 1 е нарисуван, шрифт 2 е Lozen с изключен Anti-Alias, шрифт 3 също е Lozen, но с включен Anti-Alias. Ясно е, че за да бъде четим дребения шрифт е по-добре той да се нарисува на ръка. Разликата се състои в това, че конструкцията на TrueType и PostScript шрифтовете е векторна, което значи, че те могат да бъдат мащабирани в големи граници, като запазват максимално идентичността си, а стандартния екран, който е с резолюция 72dpi не може да отрази точно прекалено малките мащаби.Забележете, че качествените списания използват резолюция над 2400dpi, където е възможно използването дори на микроскопични шрифтове.


За допълнителните ефекти

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

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

4. Търсенето във УЕБ

Потребителите обичат да използват търсенето по две причини:


  • Търсенето позволява на потребителите сами да контролират хода си и да защитят независимостта си от опитите на уеб-сайтовете да насочват начина, по който сърфират из Мрежата. Често тестовете потвърждават това. Обичаен коментар е: “Не искам да разглеждам сайта по начина, по който искат те. Просто искам да намеря онова, което търся.” Ето защо много потребители първо се възползват от възможността за търсене на главната страница.

  • Освен това търсенето е авариен изход за потребителите, закъсали с навигацията. Когато не могат да намерят смислено място, на което да отидат, те често се обръщат към възможността за търсене. Ето защо трябва да направите тази възможност достъпна от всяка страница в сайта; не можете да предскажете къде ще са потребителите, когато решат, че са се изгубили.

Често, когато искат да намерят възможността за търсене, потребителите се движат бързо и стихийно. Обикновено те преглеждат страницата за “малката кутийка, в която мога да пиша”. Отдавна се знае, че потребителите само преглеждат и усложненията свързани с това са ясни:

  • На Главните страници, търсенето трябва да е поле за въвеждане на данни, а не връзка.

  • Полето за търсене трябва да бъде достатъчно широко, за да побере типично запитване; ако е прекалено малко, част от запитването ще се скрие и ползваемостта намалява.

Типичните потребители трудно преформулират запитването си: ако не получат добри резултати с първия опит, повторните запитвания рядко носят успех. Всъщност, те често се отказват. Едно изследване показва как голяма група хора пазаруват в електронните магазини. Успехът на техните запитвания е следният:


Първо запитване

51%

Второ запитване:

32%

Трето запитване:

18%


Каталог: referats
referats -> Специализирани микропроцесорни системи (курс лекции) Учебна година 2008/2009
referats -> Програмата Internet Explorer
referats -> Високоскоростни компютърни мрежи. Високоскоростни км-класификация
referats -> Бройни системи основни бройни системи
referats -> Морфология и расология съдържание
referats -> 1 Строеж на атомите – модели Ръдърфор, Бор, квантово механични представи основни принципи, атомни орбитали, квантови числа
referats -> Международно наказателно право понятие за международното наказателно право
referats -> Тема 11. Връзка на асемблер с езиците от високо ниво
referats -> Въведение в операционите системи
referats -> Тема първа


Сподели с приятели:
1   2   3   4   5   6   7




©obuch.info 2024
отнасят до администрацията

    Начална страница