Optimizator Field – блог веб разработчика
Вёрстка. Оптимизация сайтов. Шаманство с CMS. Личная продуктивность. Софт.
Вёрстка. Оптимизация сайтов. Шаманство с CMS. Личная продуктивность. Софт.
На стадии дизайна и разработки мы должны учитывать прописные истины и основные концепции для улучшения юзабилити вашего сайта. В этой статье описываются классические, но непростительные ошибки в области веб-дизайна и способы их решения.

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

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

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

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

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

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

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

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

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

Старайтесь не использовать «text-align: justify». Текст может красиво выглядеть, но на самом деле становится трудночитаемым (особенно для людей с ограниченными возможностями) из-за разного расстояния между словами.
Давно хотел сам написать подобную подборку, но всё не было времени (((
Так что держите очередной перевод – «» )))
И кликайте сюда!!!
Вторник, 1 Декабрь 2009 - 12:25
Читай пункт 8, пока не проникнешься ;)
Касается последнего абзаца
Вторник, 1 Декабрь 2009 - 12:32
Вообще-то ещё и пункт 9.
Я это специально ))
Follow
Среда, 2 Декабрь 2009 - 06:36
в конце это же стёб
Четверг, 3 Декабрь 2009 - 01:16
Понравилось =)
Часто встречаются сайты с дебильной разметкой.
А можно скопипистить статью себе в блог? (с указанием источника в виде сцылки)
PS
кстати, у тебя в меню под самой панелькой выглядывает иконка RSS, я по ней тыкать пытался)))
Четверг, 3 Декабрь 2009 - 20:54
Привет, я хабраэффект! (:
Вторник, 16 Март 2010 - 11:19
Интересная статья, где-то помойму уже читал. Придерживаюсь всего кроме 3 и 10 пункта.
По поводу последнего пункта можно поспорить. Лично мне нравится, когда все выровнено по ширине.
Кстати у Вас поля формы не выделяются при наведении ;) (пункт 4)
Вторник, 16 Март 2010 - 11:38
Да она разошлась по инету неслабо ))
А вообще я на хабре постил её…
Follow
Вторник, 16 Март 2010 - 11:43
Как раз на Хабре вроде и читал. Кстати не поделитесь инвайтом? ;)