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

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

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.

Вот и всё


Ну разве это длилось дольше пяти минут? ;)
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 45

    +4
    До некоторой степени перед вами плоды WWW-археологии: как я и сказал в своём примечании, Lea Verou сочинила эту блогозапись почти три года тому назад, с тех пор вышли многие новые браузеры. Тем не менее, насколько я мог судить, все пять советов в настоящее время актуальны, причём совет о плавных цветовых переходах даже перестал быть исключительно вебкитовым и работает в последних версиях всех популярных браузеров, кроме, разве что, Opera Mini. А совет о спецсимволах заставляет сожалеть о том, что коллекция Google Web Fonts не принимает спецсимвольные шрифты — не то можно было бы вырезáть отдельные символы и подгружать их со страшной, радующей душу, скоростью.
      +16
      Я вот не люблю использовать спецсимволы из шрифтов, потому что сглаживание.
      Из-за него, например, красивая стрелочка (слева) часто превращается в какое-то кособокое уебище (справа):

      Поэтому я предпочитаю все отрисовывать самому. Или я просто очень люблю пиксель-арт :)
        +6
        Хорошо захинтованный шрифт в этом отношении превосходит пиксель-артовые возможности. Ибо масштабируется невозбранно.
          –2
          Может быть. Но ведь возможны случаи, когда сглаживание отключено (на домашнем мониторе, например, оно мне просто выжигает глаза). Да и не раз было замечено, что шрифты выглядят по разному на разных дисплеях и ос. Ну а масштабируемость, в данном случае, не столь важна, хотя в более общем случае, пожалуй, сыграет не последнюю роль.
      +2
      На счет иконок скажу, не важно символьные они или нет, с ними удобнее это факт, возьми интерфейс в телефоне или, например, навигацию по сайту. Даже скорее не удобнее, а приятнее.
      Спасибо за перевод.
        +2
        Да и удобнее. Достаточно беглого взгляда, чтобы понять, что иконка делает, а не читать текст целиком. Ещё помогает цветовое кодирование кнопок типа зелёный — да/красный — нет. А бесят больше всего кнопки, начинающиеся с одних слов вроде: «Выйти и сохранить»/«Выйти и не сохранить», — пока найдёшь значащее слово — расхочется пользоваться.
        –9
        Честно говоря, меньше всего здесь ожидал увидеть слова «браузер» и «кросс-браузерный», учитывая автора перевода.
          +6
          Но почему? Разве я когда-нибудь употреблял вместо слóва «браузер» какое-нибудь другое слово?
            +4
            Я не следил за вашими статьями настолько серьезно, чтобы знать это точно. Просто у меня было впечатление, что вы стараетесь обходиться без заимствованных (с помощью транслитерации) слов, когда это возможно.

            А обратил внимание только потому, что пару лет назад в дипломе всерьез хотел заменить слово «кроссбраузерный» на что-то более удобчитаемое. Но кроме «всеобозреваемый» ничего не придумал и оставил как было.

            Словом, не обращайте внимания.
              +8
              «межобозревательный» :)
                +4
                Как вариант, но смысл потерялся окончательно :)

                Вспомнился Язык Предельной Ясности у классика:
                — Откроюсь тебе, что я — как составное яйцо. Во мне — девять сфер.
                — Сфера — птичье слово!
                — Виноват. Видишь, как я неизобретателен. Во мне — девять… ошарий.
                  +1
                  вовсехбраузерахправильноотображаемый
                    0
                    может слово браузер упустить, раз речь идет о css?
                    Тогда получится просто «всеподдерживаемый»
                      0
                      Если бы браузер сделали первым в россии, то врятли бы его назвали «Обозревателем». Это все таки человеческое слово.
                      Была бы какая-нибудь аббревиатура типа Интерпретатор Активного Рассширенного Текста.
                      … просто, к слову

                  0
                  когда-то, в эпоху fido7.ru.html.chainik, бытовало прекрасное слово «бродилка»
                    +1
                    Сейчас оно почти всецело прилипло к играм жанра platformer, где игрок, натурально, бродит.
                0
                Плавные переходы юзабилити не улучшат — дизайн, да, но пользоваться удобнее не станет. А всё остальное, полезно :)
                  0
                  Главное, чтобы не надо было ждать окончания анимации для взаимодействия. А то как раздражали флешевые меню, которые по несколько секунд разъезжаются.
                    0
                    Воспринимаемость — составная часть юзабилити (Aesthetic and minimalist)
                    Резкая смена цвета вызывает большее раздражение и большую вероятность эпилептического припадка :)
                    Плавная смена будет комфортнее даже на 40мс.
                      0
                      Вы перепутали дизайн и юзабилити между собой.
                      Плавные переходы очень даже могут улучшить последнее, если грамотно их применить.
                      А дизайн интерфейса это не рисование картинок, это именно эффективность и общее удобство.
                      А рисование картинок это рисование картинок.

                      Просто у нас по неизвестной мне причине маляров в интернете называют веб-дизайнерами, а тех, кто на самом деле занимается дизайном сайтов вообще почти нет. Рисуют одинаковые сайты в N колонок, отличающиеся только названиями и цветом и считают себя дизайнерами.
                      –3
                      Я иногда небольшую тень ставлю тексту.
                        +2
                        Для ряда таких символов существуют ключевые слова (named HTML entities), а другие придётся вызывать по их номерам в Unicode (наподобие ꯍ) — их придётся тестировать усерднее, так как не все они достаточно распространены в шрифтах.
                        Зачем это всё, если есть Юникод?
                          –2
                          Бывает так, что символа нет именно в том моноширинном шрифте, который является основным в текстовом редакторе, которым набирают сайт.

                          Если сайт набирают вебоинтерфейсом, то проблемы нет, конечно.
                            +2
                            Кажется, это достаточно веский повод для смены шрифта по умолчанию.
                          +5
                          Transition можно писать и так:
                          -prefix-transition: color 1s;
                            +3
                            Для выбора символов: www.sciweavers.org/i2symbol
                              +7
                              ←(ಠ_ಠ)→
                                –21
                                ОМФГ, Мицгол!
                                  +7
                                  Это, похоже, никогда не закончится…
                                    –1
                                    Мицгол, зе уебастер? Не, никогда.
                                    –2
                                    ЗОМФГБГГ, он у меня во френдлисте =)
                                  • UFO just landed and posted this here
                                    0
                                    Плавные переход

                                    Вот раньше, в первой половине двухтысчяных и ранее баловались подобной ерундой на Яваскрипте. Потом подобные «классные» эффекты люди стали ненавидеть. А теперь тенденции опять меняются что ли только делать всё предлагаем на CSS?

                                      +1
                                      > В этой блогозаписи я намерена…

                                      Первая мысль — Мицгол сменил пол? Вторая мысль — пишет его фанатка? Третья мысль — надо автора глянуть.
                                        +3
                                        Добавлю немного пожеланий цсс-кодерам:
                                        Если используете плавные переходы — не делайте их до нудного долгими. Особенно там, где этого не надо. Ну вот совершенно незачем анимацию смены цвета растягивать на секунду, полсекунды там выше крыши. А в некоторых элементах дизайна медленные интерфейсы бесят просто адово. Скорость анимации должна быстрее, чем человек успевает среагировать, но медленней, чем успевает заметить (иначе она вообще не нужна) — чтобы она проходила раньше, чем я поведу мышь к другому элементу, и успевала открутиться за то время, пока мышь ещё не уехала (особенно касается ссылок)

                                        Кстати отображать имеет смысл не только нажатия кнопок, но и наведение на оные. Чтобы было сразу понятно, что это кнопка. И стоит в любом случает писать правильный тег a или указывать alt, чтобы можно было понять без нажатия, куда оно на самом деле ведёт. И в случае яваскрипта или попапа нужно всё-равно писать тег a с нормальным человеческим путём просто потому, что: я могу отключить яваскрипт; я могу открыть ссылку в новой вкладке (очень неприятно открывать новую вкладку колесом мыши и обнаруживать в ней «javascript:popup» вместо вкладки, особенно когда вкладка-родитель давно закрыта или пролистана мимо); я могу быть гуглём. И хоть это очень старый совет, но всё-же если элемент никуда не ведёт, то вешать onclick на тег a не стоит.

                                        Статья хорошая, хотелось бы побольше чтобы к ней прислушивались.
                                          0
                                          ИМХО, анимации 40мс (1/25 секунды) вполне достаточно.
                                            +1
                                            ИМнсХО, это зависит от конкретной анимации. Иногда 40мс может быть и маловато.
                                          +4
                                          Тем кто хочет нереально улучшить юзабилити своего сайта — идите на офигенский ресурс — http://9lessons.info
                                          Есть разбор элементов Google+, Facebook, Twiter.
                                          Может и баян, но я оттуда не вылезаю уже неделю. Это супер.
                                            +1
                                            Хочу добавить на счет спецсимволов и иконок к кнопкам — не все так однозначно. Тут самое важное — контекст. Где-то это хорошо смотрится, а где-то будет «каша». С таким же успехом можно было бы порекомендовать цветовое кодирование или размещение кнопок в соответствующих функциональных местах в зависимости от их назначения (пейджинг — возле текста, кнопка «купить» — возле товара и т. п.).
                                              –2
                                              «Вот какоЙ простоЙ уловкою» vs. «представляются мне сподручноЮ альтернативою»

                                              o_O
                                                +1
                                                В первом методе будьте аккуратней с маленькими элементами. Элемент получит мертвую зону 1px в левой и верхней части. Соответственно вероятность несрабатывания клика зависит от размера элемента. Кажется это паранойя :)
                                                  0
                                                  Чтобы этого не произошло — можно вешать ссылку на прозрачный контейнер, а двигать его фон.
                                                  0
                                                  Интересный ресурс, спасибо. Жена как раз на днях о чём-то подобном говорила.
                                                  Помимо безопасности, Вам очень надо позаботиться о сохранности информации (резервирование и пр.), а то если данные накроятся лет через несколько — будет ну очень пользователям обидно.

                                                  Only users with full accounts can post comments. Log in, please.