На стадії дизайну і розробки ми повинні враховувати прописні істини та основні концепції для поліпшення юзабіліті сайту. У цій статті описано класичні, але непрощенні помилки в області веб-дизайну і способи їх вирішення.
Злочин #1: У формах мітки не пов’язані з полями вводу
Використання атрибуту «for» дозволить користувачам клікати по мітці, для вибору відповідного поля форми. Це особливо важливо для чекбоксов і радіокнопок — збільшити область кліка.
Злочин #2: Логотип не веде на головну сторінку
Створення такої посилання є хорошим тоном, адже більшість користувачів очікують переходу в корінь сайту при натисканні на логотип.
Злочин #3: Не помічені відвідані посилання
Про це забувають дуже часто, але відвідувачам потрібно знати, за якими посиланнями вони вже кликали.
Злочин #4: Не підсвічується у формі активне поле
Використовуйте псевдо-клас «:focus» для додавання до полів вводу рамки або зміни фону.
Злочин #5: Зображення без опису
В атрибуті alt вкажіть опис зображення. А якщо картинка має оформительно-декоративний характер, то залишіть його порожнім (але не видаляйте!). Якщо ж це кнопка-посилання, то вкажіть в описі куди вона веде.
Злочин #6: Фонові зображення без фонового кольору
Якщо у користувача будуть відключені картинки, текст може стати нечитабельним. Використовуйте схожий з картинкою фоновий колір.
Злочин #7: Використання довгих нудних абзаців тексту
Немає нічого гірше, ніж монотонний і безперервний текст. Вставляйте в контент малюнки, заголовки і відступи для більш комфортного читання.
Злочин #8: Підкреслення того, що не є посиланням
Не підкреслюйте текст, де заманеться! Користувачі звикли бачити в такому стилі посилання — не збивайте з пантелику. Краще оформіть необхідні слова курсивом або жирним.
Злочин #9: Закликати відвідувачів «клікнути тут»
Використання слів «перейти за посиланням», «клікніть тут» та інших подібних «шедеврів» неприпустимо. Т. к. змушує відвідувача вчитуватися в пропозицію для розуміння того, куди ж веде посилання. Замість цього в тексті посилання використовуйте її опис.
Злочин #10: Вирівнювати текст по ширині
Намагайтеся не використовувати «text-align: justify». Текст може гарно виглядати, але насправді стає важко читати (особливо для людей з обмеженими можливостями) з-за різного відстані між словами.
Переклад: Юрій Піскун
E-mail:[email protected]
Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування
