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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давно хотел сам написать подобную подборку, но всё не было времени (((
Так что держите очередной перевод – «10 Usability Crimes You Really Shouldn’t Commit» )))
И кликайте сюда!!!

Похожие статьи:

1. Открытие ссылок в новом или всплывающём окне
2. WordPress: добавляем в комментарии ссылку на Twitter
3. Меняем рабочую папку в Symfony

После того, как Microsoft объявила (опять же), что они изменили способ обработки плагинов в Internet Explorer у веб-разработчиков добавилось проблем. Заключается она в том, что при вставке applet, object, или embed в HTML документ плагин не допустит взаимодействия с пользователем до тех пор, пока пользователь не нажмёт на него :(.

В случае с флеш плагином, это означает, что ваш ролик не будет проигрываться до тех пор, пока пользователь его не активизирует, кликнув на нём. К счастью, Micosoft предлагает довольно простой способ обойти это проблему – вставлять флеш, используя Javascript.

Итак…

SWFObject это небольшой Javascript файл, используемый для максимально лёгкой и валидной вставки флеш. Он помогает обойти дурацкую «защиту» в IE, работает во всех основных браузерах, дружит с поисковиками, вобщем мастхэв! Взгляните на демо-страничку скрипта.

В использовании предельно прост – подключаем файл swfobject.js и добавляем в код странички примерно такое:

<script type="text/javascript" src="swfobject.js"></script>
 
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>
 
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

Рассмотрим подробней каждую строчку кода:

Именно этот блок, будет заменён на ваш флеш контент, а текстовое содердимое ([...]) увидят поисковики(!!!).

Создаём флеш обьект:

var so = new SWFObject(swf, id, width, height, version, 
background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Где параметры:

• swf – путь к вашему swf файлу.
• id – ID тега object или embed
• width -ширина.
• height – высота.
• version – необходимая для проигрывания установленная версия флеш плагина.
• background-color – шестнадцатиричное значение цвета фона.
• quality – качество ролика, по умолчанию «high».

Непосредственно сама вставка флеш контента:
so.write("flashcontent");

Рассмотрим пример с дополнительными параметрами и использованием переменных:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", getQueryParamValue("variable3"));
   so.addVariable("variable4", getQueryParamValue("variable4"));
   so.write("flashcontent");
</script>

Указываем «низкое» качество проигрывания:

so.addParam("quality", "low");

Обязательно используйте для избежания проблем при наложении флеш поверх выпадающего меню:

so.addParam("wmode", "transparent");


Указываем значения нужных переменных:

so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");

Передаём переменные из строки запроса (http://www.example.com/page.html?variable3=value3&variable4=value4):

so.addVariable("variable3", getQueryParamValue("variable3"));
so.addVariable("variable4", getQueryParamValue("variable4"));

Вот и всё! Пользуйтесь на здоровье!

Похожие статьи:

1. Вставляем простой flash mp3 плеер на сайт
2. Отношения заказчик-исполнитель в виде бытовых сценок
3. Смотрим ролики на Youtube в улучшенном качестве!

Вы наверное не раз замечали, что при использовании тега PRE или CODE для отображения какого-то куска кода получается весьма некрасивая картина. А именно: строки отображаюся без переносов, растягивая и портя дизайн сайта. До того как я написал прошлую заметку я особо не заморачивался данной проблемой. Сегодня же пришлось погуглить и найти красивое CSS решение проблемы:

1
2
3
4
5
6
7

pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Похожие статьи:

1. Facebox IE6 png transparency fix!
2. PNG-прозрачность в IE 5.5-6-7
3. CSS-debug

В былые времена, когда ещё не было возможности открывать страницу в новой закладке, клик по ссылке уводил пользователя с целевого сайта. Естественно это не нравилось шефу или клиенту и они хотели использовать открытие внутренних или внешних ссылок в новых окнах.

В наши дни вместо того, чтобы пользователям самим позволять выбирать поведение – открыть ссылку в отдельном окне или нет – до сих пор хотят данного функционала. Всё бы хорошо, но в XHTML strict использование атрибута ‘target=»_blank»‘ не является валидным :(

Употребление кода типа href="javascript:" или href="#" onclick= для всплывающих окон нам не подходит изначально – т.к. протокола javascript: нет, а # вообще никуда не ведёт – в любом случае при отключенном javascript пользователь окажется в неприятном положении :(

Итак, усовершенствуем ссылки…

XHTML Всплывающие окна (popups)

<a href="popup.html" rel="popup|400|200">Всплывающее окно</a>

где указываем нужные размеры – (‘popup|высота|ширина’)

Внешние ссылки (в новом окне)

<a href="http://en.wikipedia.org/wiki/City_Road" rel="external">Внешняя ссылка</a>

Ну вот – так немного красивее! Мы получили реальные ссылки, вот только появился незнакомый атрибут «rel» – сокращение от ‘relationship’, который определяет отношения документа в ссылке с текущей страницей (W3C). Его-то мы и можем применить с пользой для себя.

Конечно же браузер не знает что делать с атрибутом, поэтому нам потребуется JavaScript. Он будет представлять собой вариант из двух отдельных скриптов (Kevin’s XHTML Compliant Target, Mike Rainey’s Dynamic Popups) с добавлением иконок.

Описывать каждую его сточку я не буду, т.к. скрипт открытия в новом окне хорошо прокомментирован, а лучше расскажу о самом принципе работы.

Что же делает скрипт?

1. Функция — windowLinks() — помещает все ссылки на странице в рабочий массив
2. Начинает искать в массиве ссылки с атрибутом rel
3. Если находит rel со значением ‘external’, то используя DOM меняет значение атрибута target на ‘_blank’ (зачем? а затем, что в отличие от XHTML – в спецификации DOM он не запрещён!).
4. Добавляется всплывающая подсказка, информирующая пользователя о поведении ссылки
5. Также добавляется CSS класс (.external), который позволяет визуально определить по иконке внешнюю ссылку

1. Если же скрипт находит ‘|’ внутри rel, он использует разделитель для разбиения строки на три части – ‘popup‘, ширина и высота нашего всплывающего окна.
2. …помещает эти данные в стандартную функцию acpopup();
3. Добавляется всплывающая подсказка
4. Также добавляется CSS класс .popup, который позволяет визуально определить по иконке внешнюю ссылку
5. и сам запуск функции windowLinks().

CSS:

.external {
	font-weight:bold;
	background :transparent url(ext.gif) no-repeat right center;
	padding-right:12px;
}
.popup {
	font-weight:bold;
	background :transparent url(pop.gif) no-repeat right center;
	padding-right:12px;
}

В итоге получим:

Пример »

Скачать »

(перевод статьи New Windows and Usability: the Theory of ‘REL-ativity’)

Похожие статьи:

1. Submit формы в новом окне
2. Facebox IE6 png transparency fix!
3. Cufon или Typeface.js – что лучше?

Вебдевелоперская общественность довольна! :)

Нет похожих статей.