(Web Usability) Уеб ползваемост – част четвърта

Използвайте CSS за да минимализирате времето за зареждане на страниците си

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

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

Флашът е зло!

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

• Потребителите, които биват посрещани непрекъснато от едно и също флаш интро, при влизането си в даден сайт, обикновено съвсем скоро го намразват и все по-малко сред тях проявяват необходимото търпение, за да го „изглеждат” при всяко свое посещение, особено ако няма опция за skip intro;
• Разработването на флаш-базиран уеб сайт е разход, който за съжаление рядко е оправдан, а още по-рядко е фокусиран върху нуждите на посетителите си. Някои флаш програмисти използват специални похвати, за да предпазят съдържанието си от посегателство, което значи, че ако не разполагате с такъв специалист на щат, ще ви се наложи да наемете някой, всеки път, когато сте решили да правите промени по сайта си или при появили се грешки в някой от флаш файловете;
• Търсачките все още изпитват сериозни затруднения при индексирането, класифицирането и навигацията из Флаш-базираните приложения. По принцип, Флаш предлага доста малко описателен контент, така че дори търсачките да успеят да го индексират, повечето от тях няма да го направят;
• Флаш файловете са тежки (зареждат много бавно), като през това време потребителите могат да решат да цъкнат върху bask бутона и да потърсят друг сайт, който да отговаря на нуждите и интересите им;
• Дори в редките случаи, когато търсещите машини все пак успеят да индексират съдържанието на един флаш сайт, повечето флаш програмисти го поставят в една програма, което прави почти невъзможно за търсачките да пренасочат потребители към такъв уеб сайт;
• Някои хора използват т.нар. мета рифреши (от англ. meta refreshes) и други технологии за откриване на Флаш (Flash detection technologies), които да блокират достъпа до back бутона на браузърите. Google AdWords забранява рекламирането на сайтове, при които достъпът до този бутон е забранен.

Ето една истинска случка от живота на Аарон Уол. Превеждам в цитат:

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

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

<noembed>Какво представлява флашът</noembed>

за да опишете за какво съдържание иде реч във флаш сайта ви. SWFObject е може би най-добрият и изпитан начин за XHTML валидация на флаш сайтове (макар да не съм експерт в областта).

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

(Web Usability) Уеб ползваемост – част трета

Придържайте се към стандартите, когато е възможно

Хората са свикнали, че „синьо подчертано” означава хиперлинк. Винаги, когато е възможно, е добре да се придържате към утвърдените уеб стандарти. Понякога отклоненията могат да се налагат от уеб дизайна, но ги използвайте с мярка. Така ще улесните престоя на потребителите в сайта, без да ги принуждавате да се лутат излишно.

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

JavaScript & Active Client Side (браузър базирано) скриптиране

Приблизително 3-5 % от уеб браузърите не поддържат JavaScript по една или друга причина. Съветвам ви да сведете до минимум броят на страниците базирани на JavaScript, когато това е възможно. В добавка към това, е силно препоръчително да изнесете JavaScript в отделен външен файл с разширение .js, който да е линкнат от вътрешните ви страници. Това ще доведе до минимализиране на времето за зареждане на отделните части на сайта ви и ще увеличи ползваемостта му. Можете да сложите линк към този външен .js файл като поставите следния код в хедъра на страницата си:

<script language=”JavaScript” src=”filename.js”></script>

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

Noscript таговете изглеждат по следния начин:

<noscript>javascript description and related links</noscript>

Хакове

Има начини да използвате CSS (каскадни стилови таблици) и други технологии, за да направите голяма част от нещата, които иначе се постигат чрез JavaScript. В добавка към това, има и начини да се избегнат недостатъците при употребата на този програмен език, когато става дума за индексиране от търсещите машини. Пример за такава алтернатива, е употребата на неподредени списъци (unordered lists), чрез DHTML менюта.

Придържайте се към файлове с малки размери

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

Уточнете снимковите детайли

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

<img src=”/images/blah.gif” alt=”Blah picture.”

title=”Picture of Blah.” height=”300″ width=”200″>

Ако дадена снимка е просто част от дизайна или навигацията, можете просто да използвате blank алт таг, тъй като снимката не допринася към основата на страницата. Също така, натъпкването на 100 ключови думи в алт тага няма изобщо да допринесе с нещо към вашите SEO усилия, а само ще направи страниците ви да изглеждат спамерски. Ако не сте сигурни дали в една страница има снимков или текстов материал, използвайте командата Ctrl + A, с която ще оцветите всички такива елементи.

(Web Usability) Уеб ползваемост – част втора

Какво означава добра уеб ползваемост?

Продължава от предишната статия…

Превод в цитат:

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

- Позволете на потребителите да имат пълен контрол върху преживяванията си, докато се намират във вашия уеб сайт;
– Не слагайте прекалено дълги alt текстове към снимките в сайта си;
– Придържайте се към един и същ уеб дизайн на страниците си;
– Стремете се навигацията ви да е максимално опростена;
– Винаги слагайте alt текстове към снимките и тагове (етикети) в статиите на сайта си;
– Придържайте към установените стандарти, когато това е възможно;
– Стремете се да поддържате големината на файловете си колкото е възможно по-малка;
– Добре е да имате интегрирана търсачка към сайта, до която да има достъп от всяка страница на сайта ви (за по-малки сайтове, където търсачката би била по-скоро излишна, за предпочитане е по-скоро да сложите карта на сайта (sitemap), която би била значително по-полезна на потребителите ).

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

Позволете на потребителите да контролират изцяло своите желания

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

Когато установявате размера на текста или неговия шрифт, е най-добре да използвате относителни (relative), а не абсолютни (exact) стойности. Ако зададете текста на 8 пиксела, а читателят си е включил опцията „уголемен текст“ (large text), той ще разглежда сайта ви на 8 пиксела, което ще го направи адски труден за разчитане. А за хората с проблеми със зрението – направо неразчитаем. От друга страна, страница с ширина от 800 пиксела би накарала потребител, разглеждащ сайта ви през PDA, да излезе от него на момента.

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

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

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