Шари і 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. Розподіл часу завантаження контента в першому екрані mama.ru

Час [c]

<1

<3

>10

>20

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. Розподіл часу завантаження контента в першому екрані homeopatica.ru

Час [c]

<1

<3

>10

>20

homeopatica.ru/index.htm

таблиці

23% 42% 9% 2%

шари

55% 78% 4% 1%

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

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

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

*

*