10 юзабилити преступлений, которых вы не должны совершать

юзабилити

На стадии дизайна и разработки мы должны учитывать прописные истины и основные концепции для улучшения юзабилити сайта. В этой статье описываются классические, но непростительные ошибки в области веб-дизайна и способы их решения.

Преступление #1: В формах метки не связаны с полями ввода

юзабилити

Использование атрибута «for» позволит пользователям кликать по метке, для выбора соответствующего поля формы. Это особенно важно для чекбоксов и радиокнопок — увеличить область клика.

Преступление #2: Логотип не ведёт на главную страницу

юзабилити

Создание такой ссылки является хорошим тоном, ведь большинство пользователей ожидают перехода в корень сайта при клике на логотип.

Преступление #3: Не помечены посещённые ссылки

юзабилити

Об этом забывают очень часто, но посетителям нужно знать по каким ссылкам они уже кликали.

Преступление #4: Не подсвечено в форме активное поле

юзабилити

Используйте псевдо-класс «:focus» для добавления к полям ввода рамки или смены фона.

Преступление #5: Изображения без описания

юзабилити

В атрибуте «alt» укажите описание изображения. А если картинка носит оформительно-декоративный характер, то оставьте его пустым (но не удаляйте!). Если же это кнопка-ссылка, то укажите в описании куда она ведёт.

Преступление #6: Фоновые изображения без фонового цвета

юзабилити

Если у пользователя будут отключены картинки, то текст может стать нечитаемым. Используйте схожий с картинкой фоновый цвет.

Преступление #7: Использование длинных скучных абзацев текста

юзабилити

Нет ничего хуже, чем монотонный и непрерывный текст. Вставляйте в контент картинки, заголовки и отступы для боле комфортного чтения.

Преступление #8: Подчёркивание того, что не является ссылкой

юзабилити

Не подчёркивайте текст где ни попадя! Пользователи привыкли видеть в таком стиле ссылки — не сбивайте их с толку. Лучше оформите необходимые слова курсивом или жирным.

Преступление #9: Призывать посетителей «кликнуть здесь»

юзабилити

Использование слов «перейти по ссылке», «кликните здесь» и прочих подобных «шедевров» недопустимо. Т.к. заставляет посетителя вчитываться в предложение для понимания того, куда же ведёт ссылка. Вместо этого в тексте ссылки используйте её описание.

Преступление #10: Выравнивать текст по ширине

юзабилити

Старайтесь не использовать «text-align: justify». Текст может красиво выглядеть, но на самом деле становится трудночитаемым (особенно для людей с ограниченными возможностями) из-за разного расстояния между словами.

Перевод: Юрий Пискун

Редакция: Рог Виктор и Андрей Бернацкий

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (19)

  1. Сергей

    Спасибо за совет. Если вдуматься, то многим неприятно видеть призывы » Кликай Сюда » . А с другой стороны многие советуют побольше таких ярких фраз и призывов.
    Сергей.

  2. yasam

    Очень благодарен за действительно полезные советы.

  3. Елена

    Спасибо за ценные советы по оформлению текста: название ссылок, выравнивание текста, подчеркивание, длинные абзацы. Ваши рекомендации имеют большое значение для посетителей сайтов. Спасибо!!!

  4. Виктор Катковский

    Мда, со всем согласен как дизайнер. Но вот с выравниванием и посещенными ссылками не могу согласиться. Разница между словами при выравнивании на самом деле не так уж и заметна. Однако текст читается лучше выравненный чем нет. По поводу ссылок. Если у вас продающий сайт, то это очень хороший маркетинговый ход, когда посетитель пройдя много ссылок снова вернется на уже посещенную, и что-то найдет для себя новое. Разве у вас так не бывает? Вы можете много раз перечитывать одну и ту же книгу и каждый раз находить в ней что-то новое. С уважением Виктор. Из солнечного Израиля, но бывший житель Гомеля. Привет вам земляки!!!

    • Rohviktor

      По поводу продающего скажу так: заставить потенциального клиента вернуться в начало продающего должен «по классике жанра» сделать постскриптум. Разве Вы не согласны?

      Вы передавайте привет солнечному Израилю! Мы там хоть и не разу не были, но все, думаю, впереди.

      Рады для Вас всех стараться.

      Ждите новогодних подарков!

  5. Владимир

    Отлично, хоть все знакомо, но часто мы это забываем — в спешке или в забывчивости.

  6. Станислав

    Статья классная, советы действительно хорошие, правильные. Спасибо. И это правильно, а то некоторые делают из своего сайта, чёрт знает что.

  7. Александер

    интересно

  8. Nataliya

    Очень полезная статья для новичка в области сайтостроения. Большое спасибо! Ждем побольше полезных советов!

  9. Георгий

    Как постоянный посетитель электронных библиотек , подтверждаю , что преступление №7 самое тяжкое ! А статья весьма полезная , спасибо .

  10. Максим

    Еще раз спасибо за интересные уроки.

  11. Мария

    Спасибо!

  12. Сергей

    Хотел сохранить вашу страницу, чтобы обратиться позднее и на своём сайте позже кое-что подправить а, нет У вашей страницы слишком длинное название из кучей диакритических знаков, что пришлось переименовывать, это специально сделано, чтоб меньше копировали?

  13. Виталий

    Спорный момент по поводу выравнивания текста «text-align: justify». На мой взгляд, красота здесь важнее.

  14. Аннушка

    Очень познавательно и интересно!Спасибо!

  15. Андрей

    Спасибо за советы! Интересная и познавательная статья.

  16. Дарья

    Да очень хорошая статья! Примеры наглядные, читать интересно!

  17. Tanuxa

    Мне до сайта ещё о-о-очень далеко-о-о, буду стараться не допускать этих ошибок. Лучше сразу при обучении усвоить эти 10 заповедей и взять это за правило. Спасибо, было интересно!!! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree