Коли поганий дизайн стає стандартом

Створювати сайти зараз стало простіше: якщо ви не знаєте, як вам оформити певний елемент дизайну сторінки, все що вам потрібно зробити, це зайти на двадцять найбільш відвідуваних сайтів в Інтернеті і подивитися, як цей елемент зробили вони.




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

Отже, я рекомендую дотримуватися прийнятих правил навіть у тих випадках, коли ваш дизайн, взятий окремо, виглядає краще, ніж загальноприйнятий. Суть в тому, що веб-сайти не живуть окремо один від одного: Відвідувачі, що приходять на ваш сайт, очікують, що він буде працювати так, як вони звикли.


Організація інформації та реалізація завдань: стандартів немає


Звичайно, насправді ремесло веб-дизайну надзвичайно важке тому, що пов'язане воно зі створенням інформаційної архітектури та порядком виконання завдань. Ніяких стандартів щодо цих предметів поки немає. Кожен сайт вирішує ці проблеми по своєму, так як кожен з сайтів пов'язаний з специфічною інформацією і своїми певними завданнями.

Деякі аспекти інформаційної архітектури вже почали приймати обриси загальноприйнятих правил: більшість корпоративних сайтів неодмінно мають розділи "Продукти / Products" та "Про компанію / About Company". Більш того, розділ "Про компанію" як правило містить інформацію для інвесторів і відвідувачів, що шукають роботу, а також загальну інформацію про історію компанії та її керівництво. Адреси офісів компанії та карти проїзду до них також розташовують у розділі "Про компанію", але це не вважається поки усталеним правилом, так як, наприклад, багато сайтів використовують іншу інформаційну архітектуру і поміщають ці дані в особливий розділ "Контакти". Оскільки користувачі часто очікують знайти адресу компанії в розділі "Про компанію", веб-сайтів, помістили ці дані в інший розділ, слід зробити перехресне посилання з розділу "Про компанію" на розділ "Контакти".


Приклади усталених правил дизайну


Найголовнішою помилкою в Web було рішення зробити гіперпосилання синіми. Інші кольори підходили б для цього набагато краще, і підвищили б швидкість читання тексту з посиланнями на кілька відсотків. На жаль найважливіший текст на сторінці оформляється кольором, який, як відомо, покращує читаність.

Якщо Web створювали з нуля зараз, я б порекомендував вибрати для посилань інший колір, але тільки не синій. Але так як ми створюємо сайти, коли Web вже давно існує, я настійно рекомендую залишити стандартні кольори посилань у спокої:





Дані для розділів


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

Дані призначені для того, щоб швидко перемикатися між альтернативними видами одного і того ж інформаційного об'єкта. Наприклад, на сайті може бути представлено опис продукту, де на одній сторінці виводиться загальний опис, на інший детальна характеристика, на третій збільшені фотографії і так далі. Ось тут якраз і було б доречно використовувати закладки для перемикання між різними видами перегляду інформації. При цьому користувач знаходиться як би в одному і тому ж контексті і місці сайту.

Коли відвідувачі розташовані глибоко всередині певного розділу сайту, закладки губляться свій сенс, бо вони переносять відвідувача в абсолютно інший розділ сайту, не зберігаючи при цьому будь-якої контекст. Подібні "стрибки" – стандартна навігаційна завдання, і для них слід використовувати звичайний список посилань, а не оформляти їх у вигляді закладок.

Я переконаний, що закладки найкраще було б використовувати для перемикання між різними (але пов'язаними один з одним) видами однієї і тієї ж інформації, але не для навігації по різним не пов'язаних один з одним розділів сайту. Але на жаль, користувачі Web дуже скоро втратять всі ті уявлення про закладках, які у них склалися до цього, якщо все більше і більше сайтів будуть ними зловживати.

Я все ще вважаю, що менше 50% сайтів використовують елемент закладок (помилково) як засіб навігації між різними розділами сайту. Отже, я вважаю, що краще за все дотримуватися правильного методу використання закладок, а для перемикання між розділами сайту використовувати інші візуальні елементи дизайну. Але може так статися, що правильний підхід програє, і мені доведеться переглянути свою рекомендацію приблизно через рік. Якщо все більше і більше сайтів будуть використовувати закладки не для тієї мети, для якої вони призначені.



Ліва смуга навігації


Першим "Жовту Лихоманку" у веб-дизайні підхопив веб-сайт CNET (десь у 1996 році), і з тих пір ця хвороба заразила таку кількість сайтів, що перетворилася практично в непорушне правило: у кожного сайту тепер уздовж лівого краю сторінки тягнеться зверху вниз кольорова смужка, на якій розташовуються головні посилання навігації.

Мені ніколи не подобався цей підхід у дизайні, так як ця кольорова смужка займає приблизно 20% площі екрану навіть після того, як користувач прокрутить сторінку вниз і посилання навігації сховаються за верхнім краєм сторінки. Для користувачів Web навігація – вторинне, головне для них – зміст, інформація.

Найцікавіше, що сам сайт CNET оговтався від жовтої лихоманки в 1999 році, і тепер використовує дизайн, в якому посилання навігації сконцентровані вгорі сторінки. Завдяки цьому все залишився на екрані віддано під матеріали сайту. Їх новий дизайн мені подобається значно більше.

Проте як і раніше в мережі ще багато сайтів, які використовують кольорову смужку навігації. І я розглядаю цю смужку як усталену традицію: користувачі знають, що потрібно робити з смужкою, яка простягається знизу вгору вздовж лівого краю сторінку. Можливо вона і витрачає даремно дорогоцінні пікселі екрану, але користувачам вона можливо допомагає.

Абсолютно зрозумілі два моменти: лінійка навігації повинна мати якийсь фоновий колір, щоб виділятися від решти контенту, і що вона повинна бути на лівій стороні сторінки. Існує кілька причин, по яких краще було б, якби лінійка навігації була на правій стороні сторінки:




Якби Web розроблявся з нуля сьогодні, ми могли б підвищити зручність роботи з сайтом приблизно на 1%, поміщаючи лінійку навігації праворуч на сторінці, а не зліва. Однак відхилення від прийнятого тепер стандарту майже завжди приведе до погіршення зручності роботи з сайтом, так як такий дизайн буде незвичним, що утруднить навігацію.


Посилання-ланцюжка


Багато веб-сайти в даний час починають використовувати в дизайні посилання-ланцюжка, які йдуть вздовж верхньої частини сторінки і показує поточний стан поточної сторінки відносно її батьківських сторінок, що також дозволяє користувачеві швидко перейти на кілька рівнів вгору одним клацанням миші.

Посилання-ланцюжка працюю тільки на тих сайтах, де інформація організована ієрархічно. Але тим не менш і на звичайних сайтах посилання-ланцюжка дуже допомагають переміщатися між сторінками. Вони були б ще більш корисними, якщо б все більше сайтів стали їх використовувати і люди б краще звикли б до роботи з ними.

Поки не існує стандарту щодо того, як позначати перехід від одного рівня ієрархії до іншого в посиланнях-ланцюгах. На своєму сайті я вже чотири роки користуюся стрілками. А до цього я користувався двокрапками, так, як це зараз робить CNET. Yahoo і ZDNet використовують символ>, а інші сайти використовують косу риску "/". Стандарту поки немає, і поки немає ніяких причин вважати, що один символ чимось кращий за інший.

Якщо який-небудь з цих символів отримає найбільшу популярність хоча б на 60% сайтів, тоді я порекомендую і вам його використовувати. Сьогодні ж, я б сказав, що всі символи хороші – ":", ">". "/" І стрілки. Але тільки не намагайтеся придумати ще який-небудь інший символ. Наприклад, символом "вертикальна риса" ("/") прийнято позначати два рівних варіанти вибору, і він не може використовуватися для позначення переміщення.

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


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

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

Ваш отзыв

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

*

*