Перевод статьи Якоба Нильсена от 2011 года.
Вкратце: Десять самых вопиющих преступлений против пользователей. Веб — дизайн бедствия и HTML ужасы неисчислимы, хотя многие юзабилити зверства являются менее распространенными, чем они имели обыкновение быть.
С моей первой попытки в 1996 году, я собрал много топ-10 списков самых больших ошибок в веб — дизайне. В данной статье представлены основные моменты: самые худшие ошибки веб — дизайна.
1. Неудобный поиск
Чрезмерно буквальные системы поиска снижают юзабилити в том смысле, что не могут справиться с опечатками, множественным числом, кавычками и прочими вариациями поисковых запросов. Такие поисковики особенно неудобны для пожилых людей, хотя навредить могут любому.
Схожая проблема — когда поисковик ставит выше те результаты поиска, которые просто содержат большее количество поисковых запросов, тогда как результаты стоит располагать в порядке их важности. Гораздо лучше, когда ваш поисковик лучшие предложения помещает вверху списка результатов — особенно по важным запросам, таким, как названия ваших товаров.
Поиск — последняя соломинка, за которую хватается посетитель сайта, когда навигация не справляется. Но, даже если расширенный поиск иногда помогает людям, быстрый поиск обычно работает лучше всего. Кроме того, поиск следует помещать в лаконично оформленном блоке, поскольку именно этого ожидают пользователи.
2. PDF-файлы для онлайн-чтения
Пользователи ненавидят натыкаться на PDF-файлы во время веб-серфинга, потому что это сбивает волну. Даже простые вещи, такие, как печать и сохранение документов, трудно сделать, потому что стандартные команды браузера не работают. Расположение элементов в PDF-файле оптимизировано под лист бумаги формата А4, а это редко совпадает с размерами окна браузера. Итак, прощай, плавная прокрутка. Здравствуйте, крошечные шрифты.
И, что хуже всего, PDF — это единый кусок контента, в котором трудно найти дорогу.
PDF хорош для печати, для раздачи инструкций и других объемных документов, которые нужно распечатывать. Так пусть он служит именно этой цели. А информацию, по которой нужно путешествовать, или просто читать её на экране, лучше превращать в настоящие веб-страницы.
3. Неменяющийся цвет посещенных ранее ссылок
Знание прошлых локаций помогает решить, куда двигаться дальше. Ссылки — ключевой фактор в процессе навигации. Пользователи могут исключить из своих путешествий ссылки, которые показали свою бесполезность во время предыдущих посещений. И наоборот, они могут вновь посещать те разделы, которые уже приносили им пользу ранее.
Что важнее всего, знание того, какие ссылки вы уже посещали, освобождает вас от непреднамеренных посещений одних и тех же страниц.
Все эти полезные знания возможны только при одном условии: когда пользователи могут различить посещавшиеся ссылки и новые, благодаря тому, что сайт показывает их в разных цветах. Когда посещенные ранее ссылки не выделены другим цветом, пользователи чаще бывают дезориентированы и нечаянно посещают одни и те же страницы.
4. Нечитаемый текст
Сплошная стена текста — ужасный опыт для посетителя сайта. Она озадачивает и отпугивает. Вгоняет в сон. Её буквально больно читать.
Пишите для Сети, а не для печати. Чтобы увлечь читателя текстами и сделать их более удобными для чтения, используйте хорошо зарекомендовавшие себя уловки:
- подзаголовки
- списки с буллитами
- выделенные жирным ключевые слова
- короткие параграфы
- чем дальше по тексту, тем короче параграфы
- простой стиль письма
- язык, свободный от профессионального жаргона
5. Фиксированный размер шрифта
К сожалению, таблицы стилей CSS позволяют сайтам отключать команду браузера «изменить размер шрифта» и задают фиксированный размер. Примерно в 95% случаев этот фиксированный размер очень мал, что существенно снижает читабельность текста хотя бы для всех тех, кому за 40.
Уважайте предпочтения пользователей и позволяйте им менять размер шрифта, когда им этого захочется. Кроме того, стоит указывать размеры шрифта в относительных величинах, а не в точных количествах пикселей.
6. Заголовки страниц, на которых сложно найти строку поиска
Поиск — основной способ, с помощью которого находят вебсайты. Это также один из главных способов ориентации среди вебсайтов. Простой заголовок страницы — ваш основной инструмент привлечения новых посетителей из результатов поиска. Он также помогает существующим пользователям определять местонахождение нужных страниц.
Заголовок страницы содержится внутри HTML-тега <title>. Он почти всегда используется в качестве кликабельного заголовка среди результатов выдачи поисковых систем (SERP). Поисковики обычно показывают первые 66 символов заголовка, поэтому заголовок — это настоящий микроконтент.
Заголовки страниц также используются в качестве текста, по умолчанию вводимого в закладки браузера, когда пользователь добавляет сайт в избранное. Например, заголовок главной страницы корпоративного сайта лучше начать с названия компании, а продолжить — кратким описанием сайта. Не начинайте заголовки с малозначимых слов или «Добро пожаловать» (кроме тех случаев, когда вы хотите, чтоб ваш сайт определенным образом сортировали по алфавиту.
Для внутренних страниц сайта, начинайте заголовок с некоторых из самых важных слов, которые опишут то, что пользователь найдет на этой странице. Поскольку заголовок страницы используется еще и как заголовок окна в браузере, он также используется пользователями Windows как название окошка на панели задач. Это значит, что более опытные пользователи будут передвигаться между окошками, ориентируясь на первые слова в их заголовках. Если все страницы вашего сайта начинаются с одних и тех же слов, вы значительно снижаете удобство пользования страницами сайта для таких пользователей.
7. Все, что похоже на рекламу
Выборочное внимание — очень мощная штука, и Интернет-пользователи научились не обращать внимание на любые виды рекламы, которая стоит на их целеустремленном пути. Главное исключение из этого правила — текстовые рекламные объявления в выдаче поисковиков.
К сожалению, пользователи также игнорируют те элементы веб-страниц, которые напоминают основные виды рекламы. Все-таки, когда вы что-то игнорируете, вы обычно не изучаете это подробно.
Поэтому, лучше всего избегать тех вариантов дизайна, которые делают элементы сайта похожими на рекламные блоки. В будущем частные случаи этого подраздела будут меняться, с появлением новых видов рекламы, а пока что следуйте этим правилам:
- баннерная слепота означает, что пользователь никогда не останавливает взгляд на элементах, похожих на баннер — формой, рисунком или расположением на странице;
- боязнь анимации приводит к тому, что пользователи игнорируют участки с мигающим текстом или другими видами агрессивной анимации;
- страх перед всплывающими окнами заставляет людей закрывать pop-up окна прежде, чем они полностью загрузятся.
8. Нарушение общепринятых правил дизайна
Постоянство — один из главных принципов юзабилити: если элементы всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что может произойти. Напротив, они знают, что произойдет дальше, так как им об этом говорит прошлый опыт. Каждый раз, когда вы отпустите яблоко над головой сэра Исаака Ньютона, оно упадёт ему на голову. И это здорово.
Чем чаще подтверждаются ожидания пользователей, тем больше они будут чувствовать контроль над системой, и тем больше она им будет нравиться. И чем чаще система обманывает людские ожидания, тем неувереннее они себя будут чувствовать. Ой, а вдруг, если я отпущу это яблоко, оно превратится в помидор и улетит в небо.
Закон Якоба гласит: «Большую часть времени пользователи проводят на других сайтах».
Это значит, что они формируют свои ожидания относительно вашего сайта, основываясь на том, как это обычно делается на других сайтах. Если вы уклоняетесь от этих правил, сайтом будет сложнее пользоваться, и люди начнут уходить.
9. Появление новых окон в браузере
Это можно сравнить с продавцом пылесосов, который начинает визит к покупателю с того, что опрокидывает пепельницу на его ковер. Не загрязняйте мой экран дополнительными окнами. Спасибо. (Это особенно актуально потому, что существующие операционные системы недостаточно хорошо умеют управлять этими окнами).
Дизайнеры открывают новые окна в браузере, исходя из теории, что это удерживает посетителей на их сайте. Но, даже если не принимать во внимание, что враждебное человеку сообщение появляется на экране и получает контроль над его системой, эта стратегия разрушает сама себя, поскольку отключает кнопку Назад — естественный способ вернуться к предыдущим страницам. Пользователи часто не замечают, что новое окно открылось, особенно, если у них маленькие мониторы, где окна браузера полностью раскрыты, чтобы заполнить экран. В этом случае пользователь, пожелавший вернуться, будет смущен видом серой и неактивной кнопки Назад.
Ссылки, которые ведут себя не так, как от них ожидали, нарушают понимание пользователем собственной системы. Ссылка должна быть простым гипертекстом, который наполняет открытую страницу новым содержимым. Юзеры ненавидят окна, всплывающие без предупреждения. Если они хотят, чтобы новая страница появилась в новом окне, они могут использовать соответствующую команду в браузере — конечно, если ссылка не является фрагментом кода, который противоречит стандартному поведению браузера.
10. Вопросы без ответов
Пользователи сети Интернет — очень целеустремленные люди. Они посещают сайты потому, что есть цель, которой они хотят достичь — возможно, даже купить ваш товар. Фактор полного поражения сайта — неумение предоставить ту информацию, которую ищут пользователи.
Иногда, ответа на сайте просто нет, и вы теряете прибыль потому, что пользователи вынуждены заключить, что ваш товар или услуга не отвечает их запросам, если вы не объясните им детали. Иногда эти детали погребены под толстым слоем профессионального жаргона и громких лозунгов. Поскольку у пользователей нет времени читать всё, такая скрытая информация — всё равно, что никакой информации.
Худший пример вопросов без ответов — не предоставлять цен на товары или услуги. Ни один B2C-сайт не допустит такой ошибки, но она распространена в B2B-сайтах. Цена — самый необходимый элемент информации, которой пользуются люди, чтобы понять суть предложения. Не показать цену — значит заставить людей чувствовать себя потерянными и помешать им понять природу товара.
Даже B2C-сайты часто допускают схожую ошибку, не включая цены в списки товаров, таких, как страницы категорий или результаты поиска. Знание цены является ключом в обеих ситуациях; это позволяет пользователям дифференцировать товары и добираться до самых нужных.
