Шари та usability

А. Cавельев

Робота & Зарплата

“Таблички не використовувати – текст всередині таблички view’ерне показує до тих пір, поки всятабличка не приїде цілком. Прималенькій швидкості зв’язку юзер будекілька хвилин витріщатися в порожній екран … “М. Мошков. Правилахорошого тону в WWW

Винесена в епіграф цитата датується 1996/98 роком,проте до цих пір сайтів, побудованих завказаною правилу, практично немає. За 6 років ситуаціяне змінилася – як тоді, так і заразшаблон сторінки укладений в таблицю. І наперший погляд альтернативине видно. Але це тільки на перший погляд. Заостанні 2 роки змінилося дуже багато. Погано це чи добре, але війнаброузерів закінчилася. 95% користувачів вибралиMSIE. Це дало передумовудо широкого впровадження Одинадцяте правилоМошкова – “Таблички не використовувати”.Стандарт HTML4.0 і монопольне становищеєдиного броузера дозволяє піти відвикористання таблиць і перейти допобудови шаблону на шарах.

Аскетичний дизайн в стилі Бібліотеки Мошкова длябільшості сайтів неприйнятний. По-перше,на екранах розміром більше 800х600 пікселівчитати довгі рядки вкрай незручно. По-друге,багато сайтів змушені розміщувативеликі рекламні блоки, а мультіпорталам складно обійтисябез обширного навігаційного блоку. Тому широкепоширення набула структурасайту, що складається з двох-трьохколонок і шапки.

Шапка (Логотипи, банери)

Навігаційнаколонка (Навігація /
анонсиновин / “голосувалка” / банери)
Контент -основна інформація сторінки

У першомунаближенні код традиційного табличного шаблонувиглядає так:

<table width="600">
 <tr>
	<td colspan="3" height=20>Шапка</td>
 </tr>
 <tr>
	<td width="150">Ліва навігаційна колонка</td>
	<td width="450">Контент</td>
 </tr>
</table>

Контент з’явиться на екранітільки після того, як завантажиться цілкомвесь вміст таблиці: шапка з логотипами,банерами і горизонтальної навігаційної лінійкою, ліванавігаційна колонка і власне контент.При цьому завантаження сторінки істотно (на25-50%) сповільнюєтьсяпаралельної підкачкою графічнихелементів дизайну та реклами.

Код шаблону виконаного за допомогою шаріввиглядає так:

<div id="Right" style="position:absolute; width:300px; left: 150px; top: 21px">
	Контент
</div>
<div id="Left" style="position:absolute; width:150px; left: 450px; top: 21px">
	Права навігаційна колонка
</div>
<div id="Top" style="position:absolute; width:300px;height:20px; left: 0px; top: 0px">
	Шапка 
</div>

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

Сумарний час завантаження шаблонуна шарах трохи більше, ніж у табличного, томуобробка шарів вимагає великих ресурсів. Алетут спрацьовує психологічний фактор.Контент, через якого користувач прийшовна сайт, у разі шаблону на шарах будевідображатися на екрані з максимальноюшвидкістю, яку дозволяє канал зв’язку. Ау випадку з таблицями, доведеться чекатизавантаження практично всієї сторінки цілком.Відомий фахівець з usability Я.Нільсенвважає, Що “якщо користувач неотримує необхідну інформацію на сайті впротягом 10 секунд, він шукає її в іншому місці “(Раніше наводилося значення 20 секунд). Природно,для сайту надаєунікальну інформацію, наприклад проособливості застосування гомеопатії вхірургії, і 10 хвилин – час некритичне. Алеякщо два різних сервераможуть видати однакову інформацію за 3секунди і за 10 секунд, навіть розпещенийвиділеним каналом користувач вибере більш швидкий.Говорити про вибір тих, хто платить за кожнусекунду модемного з’єднання і говорити недоводиться.

Вказати точно, який виграш отримає сайтвід впровадження шарів неможливо. Це залежитьвід його структури, співвідношення обсягуконтенту та обсягу реклами, провайдера інавіть від аудиторії. Наприклад, поcетітелі РБКвбільшою мірою оснащені хорошими каналамизв’язку особливої ​​різниці вони не помітять. А ось читачки
Календаря вагітності користуються більшою мірою dial-up’ом, томузайві секунди завантаження для них дуже важливі.Тобто для різних сайтів час завантаженняконтенту буде різнитися. Методика жпідрахунку однакова для всіх. У різнихточках шаблону встановлюються картинкирозміром 1х1 px, які за допомогою Java-скриптапередаютьна сервер час їх завантаження у користувача (аналогічнотого, як працюють лічильники типу SpyLog, HotLog іін.)Ці дані дозволяють у першому наближенніоцінити різницю в швидкості відображенняконтенту для обох варіантів шаблону. Нижче наведені результати тестуванняна двох різних серверах

Таблиця 1. Розподілчасу завантаження контенту впершому екрані http://mama.ru

Час [c]

<1

<3

>10

>20

http://www.mama.ru/index.htm

таблиці

9% 37% 35% 15%

шари

45% 78% 2.3% 0%

Примітка.  Мама.Ру. Обсягкоду 38К. Обсяг графіки: 52K
Кількість переглядів: 13949. Дата:
2.12.2001

Що в даному випадку дало застосування шаблону на шарах?Якщо прийняти в розрахунок зазначені вище оцінкимаксимально допустимого часу відгуку, вийде, щона сайті вдалося утримативід 15% до 35% користувачів. Зауважу також, що виграш чи втрати трафіку потрібно враховувати не тільки по одній сторінці. Якщо вважати, що 15% користувачів йдуть з першої сторінки, то другу не дочекаються вже 27% і т.д.Але це ще не все. Відомі оцінкимінімального часу взаємодіїлюдини з машиною. Згідно з дослідженнями Роберта Б. Міллера 1968р.(Дані наводяться за книгою Нільсена “Веб-дизайн”),час очікування інформації рівне однієїсекунді – граничний проміжок часу, впротягом якого користувач не помічаєзатримку і працює в інтерактивному режиміз максимальним комфортом. У цьому випадкушари забезпечують виграш для 37%користувачів. Якщо припустити, що 3секунди – час, за який користувач невстигне відкрити нове вікно і перейти в ньому наінший сервер, вийде, що в разішаблону на шарах 78% користувачів залишатьсяна сайті. А при традиційному табличномушаблоні ймовірність цього зменшуєтьсявдвічі.

Треба відзначити, що такі вражаючірезультати можна отримати лише за двохумовах: чи дуже великому обсязі головноїсторінки або при слабкому каналі у провайдера(Або аудиторії). У розглянутому прикладіобсяг головної сторінки вдвічі перевищуєрекомендовані всіма посібниками 15-20К. І дляданого ресурсу це, швидше за все,неминуче. Це диктується великимкількістю реклами і новин. Але навіть длясайтів, у яких головна сторінки неперевантажена, шари дають помітнеполіпшення якості взаємодії зкористувачем. В якості прикладу можнапривести Світ гомеопатії 

Таблиця 2. Розподілчасу завантаження контенту впершому екрані http://homeopatica.ru

Час [c]

<1

<3

>10

>20

http://homeopatica.ru/index.htm

таблиці

23% 42% 9% 2%

шари

55% 78% 4% 1%

Примітка.  Світ гомеопатії. Обсяг коду 17К. Обсяг графіки 36K
Кількість переглядів: 1259. Дата: 2.06.02

Звичайно, в наведеній методиці оцінкипідвищення швидкості взаємодіїкористувача з сервером багатонеточностей. У ній не враховується часз’єднання з провайдером, час минувз часу завантаження лічильників довідображення інформації на екрані ікількість користувачів, які залишили сайтдо появи хоча б частини контенту ібагато іншого. Але якісні оцінкиметоду цілком прийнятні і переконливопоказують перевагу шарів. Ценастільки очевидно, що відразу ж виникаєпитання. Чому використанняцієї технології досі практично незастосовується? Чому шари якщо івикористовуються, то тільки для побудови меню,банерів затуляють екран, іграшок та ін?

Поширення шарів значноюступеня стримуються двома чинниками. По-перше, інерцією іздоровим скептицизмом щодовідношенню до нових технологій. Хоча назватистандарт HTML4 новим дуже складно. І по-друге,наявністю 5-7% користувачів Netscape, Opera, LYNX, MacOSMSIE та ін Всі зазначені броузери в тій чи іншій мірінесумісні з обіймаютьмонопольне становище Windows MSIE.А правила хорошого тону Інтернет вимагають, щоб сторінки були доступнідля всіх мислимих і немислимихброузерів, навіть якщо це йде на шкоду для 95%користувачів.

У порівнянні з традиційним табличним підходом,виготовлення сумісного з усімаброузерами шаблону на шарах – заняття більштрудомістке (точніше взагалі не реалізовуються,враховуючи наявність броузерів старшечетвертих версій). І хоча FrontPage або DreamWeaverдозволяють без особливих проблем зробитипростий стійкий шаблон, повністю цяпроблема сумісності не знімається. На стадії проектування сайт, якправило, проглядається у всіхбільш або меншпоширених браузерах. А ось на стадії експлуатації це незавжди буває можливо. Добре, якщо всіматеріали готуються до публікації придопомоги першокласного движка (механізмупідтримки сайту) за $ 1500 під наглядомкваліфікованого web-майстра, і всі статті не містять складних елементівформатування. А якщо ні? Шарикапризні, і будь некоректний стиль аботег (наприклад незакритий

) при перегляді в Operaможе перетворити сторінку вгору сміття, Netscape буде завішувати комп’ютер.MSIE, набагато більш лояльний до помилокверстки, не завжди їх прощає.

Які з усього цього можна зробити висновки?

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*