Улучшаем юзабилити за 5 минут

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

1. Отображайте нажатия кнопок и кнопкоподобных ссылок

Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)

Этот совет сработает только в вебкитах, но, как я и сказала, это только «глазурь на тортике», так что не всё ли равно? Конечно, если плавный переход важен для вашего дизайна, то лучше напишите скрипт или используйте готовую библиотеку. Если же замышляли в любом случае ограничиться CSS, то он послужит заметному росту удобства пользователей вебкитов.

Предположим, что ссылки у вас на странице обычно синие, но становятся красными при наведении на них. Чтобы переход от синего цвета к красному стал плавным для пользователей вебкитов, достаточно добавить в CSS всего две -webkit-строчки:

a {
   color:blue;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
}

a:hover {
   color:red;
}

Первая строчка (-webkit-transition-property) сообщает браузеру, какое CSS-свойство подвергать плавному изменению, а вторая (-webkit-transition-duration) сообщает желаемую длительность этого эффекта. Важно поместить их в обычное свойство CSS, но не под псевдоклассом :hover, а не то плавного перехода не будет, когда пользователь уберёт мышь с элемента.

Примечание переводчика. Lea Verou написала эти строки 10 апреля 2009 года. С тех пор плавное изменение свойств CSS начало, к счастью, поддерживаться и многими невебкитными браузерами (начиная от версий Firefox 4, Opera 10.5, Opera Mobile 10, Internet Explorer 10), так что этот совет стал много более кроссплатформенным. Чтобы невозбранно достигнуть желаемого, вам достаточно записать свойства CSS со всеми необходимыми префиксами:

a {
   color:blue;

   -webkit-transition-property: color;
      -moz-transition-property: color;
        -o-transition-property: color;
       -ms-transition-property: color;
           transition-property: color;

   -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
       -ms-transition-duration: 1s;
           transition-duration: 1s;
}

a:hover {
   color:red;
}

Понимая, что увеличение числа свойств впятеро может подзадолбать, Lea Verou сочинила скрипт -prefix-free, о котором я ужé сообщал на Хабрахабре.

3. Снабжайте кнопки спецсимволами, означающими их функции

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



Для ряда таких символов существуют ключевые слова (named HTML entities), а другие придётся вызывать по их номерам в Unicode (наподобие &#xABCD;) — их придётся тестировать усерднее, так как не все они достаточно распространены в шрифтах.

Многие такие спецсимволы и их юникодовые шестнадцатеричные номера вы можете найти на сайтах http://www.copypastecharacter.com/ и http://www.alanwood.net/unicode/dingbats.html.

Конечно, если у вас есть время — пожалуйста, используйте графические значки на кнопках. Но когда времени нет, то спецсимволы представляются мне сподручною альтернативою. Подчас я также помещаю их на место значков в черновиках до тех пор, пока не представится время нарисовать настоящие значки.

4. Полосатые таблицы

Этот совет не сработает в IE (кроме IE9 и новее — caniuse) и в Firefox 3. Удобство чтения таблиц (а также некоторых списков) можно улучшить, слегка изменяя цвет фона от ряда к ряду. Вероятно, вы не раз видели этот эффект, и обычно он достигается либо джаваскриптом, либо на сервере при создании таблицы. Однако же его можно быстро устроить и на простом CSS3, если работоспособность в IE и старых браузерах вас не заботит, или когда нет времени на полностью кросс-браузерное решение:

table.stats tr {
   background: white;
}

table.stats tr:nth-child(odd) {
   background: #f4f4f4;
}

5. Подсветите целевой элемент внутренней ссылки

Этот совет не сработает в IE (кроме IE9 и новее — quirksmode.org) и в старых версиях браузеров. Если на одной из страниц много контента, достижимого по внутренним ссылкам (например, в FAQ), то можно использовать псевдокласс CSS3 «:target», чтобы показать читателю, куда конкретно он перешёл по ссылке:

h3:target {
   background: #FFFBCC;
}

Элемент h3 приобретёт фон #FFFBCC только тогда, когда читатель на нём приземлится по ссылке. Например, если у элемента задан id «foo», то тогда фон #FFFBCC он получит после перехода читателя к #foo.

Вот и всё

Ну разве это длилось дольше пяти минут?