За підтримки: красивые подарки для вашей семьи, кондиционеры остудят жару вашего дома

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

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

1. Відкриття посилань у нових вікнах. Користувач має право сам вирішувати, як відкривати йому конкретне посилання – у новому вікні чи в тому самому. Це право можна вважати аксіомою, адже свобода взаємодії – це те, що відрізняє інтернет як середовище від усього іншого. Відкриваючи посилання в новому вікні ви не лише позбавляєте відвідувача цієї свободи, а й нав”язуєте йому власні “правила гри”, змушуючи браузер поводити себе інакше.

Це саме, але з ще більшою категоричністю, стосується так званих pop-up вікон (тих, які відкриваються взагалі без згоди користувача і зазвичай містять рекламу). Завдяки сучасним браузерам можна заблокувати їх поширення. Однак поп-апи завжди залишаться ознакою брудного сайта-невігласа, який нехтує своєю аудиторією.

Вирішення: встановіть у опціях свого текстового редактора або в настройках CMS відкривання посилань у тому ж вікні (<a target="_self">). За умовчанням цей параметр є саме таким.

2. Дрібний текст. Шановні розробники сайтів, от скажіть, вам дійсно зручно читати тексти ось таким ось дрібнесеньким шрифтом?

Такі тексти – пережиток веб-дизайну дев”яностих, коли монітори мали роздільну здатність не більше 800х600. Вже десять років пройшло, у половини людей монітори з діагоналями більше 20 дюймів, …а кляті мікроскопічні шрифти залишились! Знову ж таки, сучасні браузери дозволяють відмасштабувати текст і картинки до потрібного рівня читабельності, але потрібно боротися з причиною, а не наслідком!

Встановлюйте базовий розмір тексту на вашому сайті не менше 1em. Не бійтесь використовувати “великокаліберні” шрифти для заголовків – це насправді виглядає круто та зручно. Для цього є всі необхідні технології та інструменти, досить їздити на паровозах!

Вирішення: всього один рядок в стилях CSS дає можливість змінити базовий розмір шрифта на сайті:

* { font-size: 1em; }

3. Pop unders, flash, та інша набридлива реклама. Ще одна ознака “брудного” сайту, який не гребує використовувати найжахливіші технології задля власної вигоди. На жаль, такі набридливі банери час від часу можна зустріти і на провідних “білих” сайтах – у вигляді флеш-банеру, який можна безпечно закрити, однак враження (UX) все одно залишиться неприємне. Найбільш проблемні випадки – це коли при натисканні кнопки “закрити” (зазвичай у вигляді хрестика) вас нагло дурять, відкриваючи рекламу у вспливаючому вікні. Не знаю, наскільки прибутковим є розміщення такого банера, але прокляття в сторону сайту гарантовані.

Поглянемо на кілька зразків такої реклами:

Вирішення: притримуйтесь моральних правил реклами – не обманюйте відвідувачів після того, як вони вирішать закрити рекламний банер. Набагато ефективнішим буде використання так званого рекламного “кутика”, який користувач може відкрити, коли сам захоче.

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

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

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

Після цього випадку я назавжди видалив інформер RedTram з свого блогу.

Вирішення: Уважно слідкуйте за графічним наповненням власного сайту. Не допускайте розміщення там неадекватних зображень чи “брудних” інформерів – бережіть свою репутацію.

5. Музика або відео на бекграунді. Чи бувало у вас таке: заходиш на сайт, а тут тобі як бабахне музика з колонок! Ось і я про що – цей випадок чистий приклад поганого UX. Ви знову позбавили користувача свободи вибору, знову порушили аксіому інтернету.

Те саме стосується відео – воно не має починати програватись саме по собі. І навіть завантажуватись не має права при відкритті сторінки – хіба користувач знає про це? Уявіть що б було, якби всі вставлені відео з Youtube автоматично починали вантажитись. Особливо у відвідувачів з повільним з”єднанням.

Поганий приклад – сайт Руслани, при заході на який починає одразу грати музика.

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

6. Капча – це зло! Британські вчені встановили Шкідливість використання капч (засобів захисту від спаму) для вашого бізнесу доведена на практиці. Тому не варто тішити себе думками, що, поклавши капчу, ви назавжди позбудетесь спаму. Так, можливо спам дійсно перестане турбувати вас, але разом з ним можуть зникнути і ваші відвідувачі, яким набридне вдивлятися у перекреслені цифри та букви, щоразу, коли вони захочуть залишити відгук про ваш товар чи послугу. Для боротьби зі спамом існують десятки успішних інструментів, які не створюють ніяких додаткових вимог для ваших клієнтів (наприклад, Akismet). Тому замість того, щоб боротися з вашими відвідувачами, полегшіть їм життя на вашому сайті.

Ось, наприклад, один з таких феєричних прикладів:

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

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

Негативний приклад: інтернет-магазин Інтератлетика. Вгадайте, де на наступному скріншоті є посилання:

Ну як? Зрозуміли щось? А посиланнями були ті елементи, які обведено червоним:

Ось так. Цікаво би дізнатись статистику, скільки відвідувачів цього магазину клацали не на те що треба, та на жаль, таку статистику ніхто не веде.

Вирішення: зробіть всі посилання на своєму сайті як мінімум підкресленими і як максимум з hover-ефектом, коли посилання міняє свій колір чи стиль при наведенні курсора на нього.

a { text-decoration: underline; }

8. Подробнее… Подробнее… Подробнее… Мабуть, кожен другий сайт уанету не нехтує таким поширеним прийомом, як супроводження кожної новини лінком Подробнее (або Детальніше), і таких слів може бути підряд штук 10 або 20, в залежності від величини і щільності інформаційного потоку. Не повторюйте цієї помилки – це також один з пережитків дизайну 90-х. В сучасному веб-дизайні такому прийому не місце.

Вирішення: приберіть посилання Подробнее з вашого шаблону. Натомість нехай кожен заголовок, виділений тегом <h1>, <h2> і буде цим самим посиланням на новину.

9. Текст без абзаців. З цього приводу в інтернеті вже існує спеціальний мем – “многабукв”. Тексти, які подаються без розбиття на абзаци, не те що важко, їх просто не хочеться читати взагалі. Людина сканує інформацію частинами, і такий великий шматок просто “застрягає в горлі”, і відвідувач покидає сторінку, щойно побачить її.

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

10. Дикі кольори. Деякі розробники люблять особливий вид знущань над своїми відвідувачами – дизайн несумісних, диких кольорів, від яких очі вилазять на лоба, а текст прочитати більше одного рядка просто неможливо. Ось яскравий приклад такого сайту, де на чорному фоні салатовим та голубим кольором набраний текст:

Вирішення: Найбільш читабельним залишається чорний текст на білому фоні – і лише так, а не навпаки. Білий текст на чорному фоні шкідливий для зору, спробуйте зменшити контраст, надавши такому дизайну світло-сірий колір тексту. У будь-якому випадку не завадять базові знання з сумісності кольорів.

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

Сергій Пішковцій, ексклюзивно для Блогорідера.

Схожі матеріали:

• Збільшення онлайнових продажів: вирішуємо проблеми юзабіліті