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

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

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

Плавные переходы юзабилити не улучшат — дизайн, да, но пользоваться удобнее не станет. А всё остальное, полезно :)

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

Зачем это всё, если есть Юникод?

Transition можно писать и так:

-prefix-transition: color 1s;

Для выбора символов: www.sciweavers.org/i2symbol

←(ಠ_ಠ)→

Плавные переход

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

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

Первая мысль — Мицгол сменил пол? Вторая мысль — пишет его фанатка? Третья мысль — надо автора глянуть.

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

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

Статья хорошая, хотелось бы побольше чтобы к ней прислушивались.

Тем кто хочет нереально улучшить юзабилити своего сайта — идите на офигенский ресурс — http://9lessons.info
Есть разбор элементов Google+, Facebook, Twiter.
Может и баян, но я оттуда не вылезаю уже неделю. Это супер.

Хочу добавить на счет спецсимволов и иконок к кнопкам — не все так однозначно. Тут самое важное — контекст. Где-то это хорошо смотрится, а где-то будет «каша». С таким же успехом можно было бы порекомендовать цветовое кодирование или размещение кнопок в соответствующих функциональных местах в зависимости от их назначения (пейджинг — возле текста, кнопка «купить» — возле товара и т. п.).

В первом методе будьте аккуратней с маленькими элементами. Элемент получит мертвую зону 1px в левой и верхней части. Соответственно вероятность несрабатывания клика зависит от размера элемента. Кажется это паранойя :)

Интересный ресурс, спасибо. Жена как раз на днях о чём-то подобном говорила.
Помимо безопасности, Вам очень надо позаботиться о сохранности информации (резервирование и пр.), а то если данные накроятся лет через несколько — будет ну очень пользователям обидно.