Очень часто, просматривая веб-страницы, я вижу множество самых простых и, на мой взгляд, очевиднейших ошибок
Данный пост, Скорее всего, не даст ничего нового «акулам» в web-области, но будет интересен новичкам. Вся информация является «выжимкой» из книг Стивена Круга, Якоба Нильсена, ководства Артемия Лебедева, моего личного мнения и опыта в юзабилити. Пост я старался разбить на логические текстовые блоки/теги. Хочется подчеркнуть, что SEO без необходимого юзабилити на сайте попросту невозможно, не те нынче времена.
Общие положения
Любая страница сайта должна быть простой и самоочевидной. Пользователь не должен «включать мозг», чтобы понять, как ему найти то, что он ищет. Если ему придется сначала просмотреть всю(!) страницу, потом обдумать и кликнуть – ваш дизайн неправильный. Пользователь, вопреки вашему мнению, не будет читать весь текст и разбираться структуре сайта. Согласно исследованиям, пользователь не разбирается в структуре сайта, на который он зашел, а сразу, не думая, кликает на то, что, по его мнению, приведёт его к нужному результату. Если он его не находит, то он расстраивается и уходит. Количество сайтов в интернете не менее 600 000 000. Вы действительно думаете, что кроме вас, он не найдет источника нужного результата? Вот и пользователь думает так же. Элементы, связанные между собой логически (текст и фотографии к нему, навигационное меню со ссылками, блок регистрации и пр.) должны быть визуально выделены (цветом, общим оформлением). Таким образом, интуитивно сайт должен быть «разбиваем» на отдельные логические блоки. Чтобы этого добиться, удобно на этапе дизайна спроектировать дизайн прямоугольными и квадратными областями, а лишь затем начинать визуальное оформление. Не допускать «болтологию» в виде фраз «Добро пожаловать на наш сайт», «Рады приветствовать на сайте, посвящённом …». Пользователь мгновенно фильтрует такие вещи и есть вероятность, что он прокрутит текст и не увидит нужный смысл, который был после или внутри этой «болтологии». Переходите сразу к делу – будь то каталог, текст об услугах или преимущества.
Логотип на сайте должен располагаться сверху либо слева, либо по центру. Не допускается размещение справа, снизу и в любом другом месте. Это не прихоть, а уже довольно давно принятый принцип-условность. Раз есть условность, значит нужно стараться придерживаться её. Заходя в магазин, мы привыкли, что его название пишется над входом, а не слева и справа. Пользователь же заходит на сайту «вслепую» (из поисковиков или по прямому адресу) и он должен сходу увидеть куда и зачем он попал и первым делом его взгляд будет искать логотип. Пользователь, зайдя на сайт, не задумываясь должен ответить на 4 вопроса:
Что это за сайт? Какие возможности он мне даёт и какую информацию я могу с него получить?
На какой странице я нахожусь?
Какие главные/ключевые разделы сайта, на которые я обратил бы внимание в первую очередь?
Каким образом я смогу найти то, что мне нужно?
Нет понятия «средний пользователь», следовательно, нет понятия «нравится дизайн или нет». Дизайнеры определяют сайт по внешнему виду (может быть, именно поэтому они и выбрали для себя эту профессию), программисты ценят функционал и т.д. Правильный вопрос должен ставиться как «а понравится ли конкретному пользователю какой-то элемент сайта?». Следовательно, необходимо точно знать, на какую аудиторию будет нацелен сайт и думать исходя из этого, а не ориентироваться на мнение того, кто «Я же вам плачу» (заказчик).
Очень очевидное правило – не утомляйте пользователя «красивыми» флеш-заставками перед входом на сайт. Не используйте звуковое сопровождение и пр. Пользователь огромное количество времени проводит в интернете и не хочет тратить время/нервы на какой-то конкретный сайт. Он просто его закроет.
Навигация
Название гиперссылки обязательно должно повторять название-заголовок раздела. Неправильна ситуация, когда при клике на ссылку «Вакансии», пользователь попадает на страницу с большим заголовком «Наша компания ищет». Пользователь не должен тратить бессознательные миллисекунды на осознание того, куда же он попал. Способ, с помощью которого можно это допустить (например, не всегда можно сделать длинную ссылку как «Наша компания ищет») – ответить на его вопрос. Если ссылка выглядит так – «Вакансии», то в разделе заголовок можно сделать «Ищите работу? Наша компания ищет …»
Учитывая, что человек не может хорошо ориентироваться на незнакомом сайте (для него, понятная вам структура, — это неизведанное место и понять логику сразу зайдя на сайт, невозможно), всегда указывайте, в каком разделе он находится. Сделать это можно подсветкой раздела, изменением цвета, шрифта, добавления иконки стрелки в том разделе, где находится пользователь и т.д.
Используйте «хлебные крошки» во всех ситуациях, где на сайте имеется вложенность более трёх уровней (Главная > Каталог > Фены > Фен Samsung). Это уменьшит количество использования кнопки «Назад» в браузере и даст пользователю представление о том, где он находится. При этом, согласно исследованиям, большинству пользователей более понятны символы “>” и “/”, нежели двоеточия, точки, пробелы и другие символы в крошках.
Ссылки
В тексте не допускается использование ссылок «щёлкните здесь», «тут» и пр. Например, «для получения полной информации перейдите сюда». Пользователь должен понимать куда и зачем он переходит. Сравните два варианта:
Чтобы узнать про монитор Samsung SyncMaster 940N, нажмите сюда
Информацию о мониторе Samsung SyncMaster 940N вы можете прочитать на сайте производителя
Во втором случае пользователь изначально понимает, куда и зачем он переходит для получения информации о мониторе.
Если клик по ссылке подразумевает открытие окна, заранее уведомите об этом пользователя! Открытие окна без ведома пользователя будет раздражать его и, следовательно, сократит «шкалу лояльности». Предупредить пользователя об открытии окна можно либо надписью в скобках справа от ссылки – «(в новом окне)», либо всплывающей подсказкой при наведении на ссылку.
Нравится вам это или нет, ссылки должны быть подчеркнуты! Это одно из самых очевидных правил, которое почему-то в последнее время постоянно нарушается. Причем, необходимо учесть две вещи:
Есть два типа подчеркивания – линия и пунктир. Линия используется в том случае, если при клике на ссылку, пользователь перейдёт на какую-то другую страницу. Пунктир – в том случае, когда действие, производимое ссылкой, выполнится без перезагрузки страницы и результат будет отображен в этом же окне. Большинству пользователей, исторически, более привычны синие ссылки. Цвет ссылки, конечно, определяется дизайном, но в тексте всё-таки желательно использовать стандартный — синий — цвет.
Еще одно очевидное, но постоянно нарушаемое правило, — НЕ ИСПОЛЬЗОВАТЬ ПРОПИСНЫЕ БУКВЫ В ССЫЛКАХ И ЗАГОЛОВКАХ. ТАКОЕ ПРАВИЛО ВОЗНИКЛО НЕ СЛУЧАЙНО. В СТРОЧНЫХ БУКВАХ ЕСТЬ ВЕРХНИЕ И НИЖНИЕ ВЫНОСНЫЕ ЭЛЕМЕНТЫ, КОТОРЫЕ УВЕЛИЧИВАЮТ КОНТРАСТ МЕЖДУ БУКВАМИ (ГЛАЗ ЗА НИХ «ЦЕПЛЯЕТСЯ»), СЛЕДОВАТЕЛЬНО, УЛУЧШАЕТСЯ ЧИТАБЕЛЬНОСТЬ. ЕСЛИ ВЫ ВСЁ-ТАКИ НАСТАИВАЕТЕ НА ПРИМЕНЕНИЕ ПРОПИСНЫХ БУКВ, УВЕЛИЧИВАЙТЕ РАЗРЯДКУ МЕЖДУ НИМИ. ИСПОЛЬЗОВАНИЕ ПРОПИСНЫХ БУКВ БЕЗ РАЗРЯДКИ УМЕНЬШАЕТ СКОРОСТЬ ЧТЕНИЯ ТЕКСТА ПРИМЕРНО НА 25%.
Самое очевидное правило – проверяйте все тексты своего сайта на орфографию. Самое простое и очевидное правило очень часто нарушается и это мгновенно замечается грамотным пользователем и снижает доверие к сайту. Потратьте 3 минуты на проверку текста в каком-нибудь Word’е и спите спокойно. Абзацы могут отделяться ИЛИ отступом слева, ИЛИ пропуском строки. Совмещать одновременно эти два понятия не допускается. Длина строки не должна быть очень большой, это утомляет пользователя и заставляет его «пролистывать» весь текст. Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30, получим 300px или, приблизительно, 65 символов в строке. Это актуально для английского языка (из-за наличия «узких» букв – f, i, j и пр.). В русском алфавите есть буквы ш, щ, м и другие «широкие». Для себя я вывел цифры в 75-90 символов в строке (в качестве примера: ~75 используется на таких небезызвестных ресурсах, как bash.im и lenta.ru) Нельзя допускать огромной «портянки» текста. Люди читают примерно на 25% медленнее с мониторов из-за постоянной нагрузки на глаза и большого количества постоянно просматриваемых сайтов. Времена поисковой оптимизации, когда решал объем текста, давно прошли, поэтому позаботьтесь о пользователях и максимально сокращайте объём писанины. Слово «интернет» пишется с маленькой буквы. Откуда вообще пошло писать его с большой? При этом, оно еще и склоняется! Не «я увидел в интернет», а «я увидел в интернете, не интернетом единым, я ударил по интернету» и пр. В русских текстах нужно использовать или кавычки «ёлочки» (« / »), или „лапки“ (в html можете использовать «шифры» — „ / “). В английских текстах — “английские лапки” (“ / ”). «Не минусом единым ограничен текст». Так любимый многим значок «-» все используют везде, где только можно. А ведь бывает минус, тире, дефис… Есть статьи на Хабре, где рассказывают о 9 (!!!) различных видах «черточки». Обычно, выделяют три вида:
Дефис. Используется в таких словах, как «во-первых», «как-то», «кто-то», «физ-ра», «ковер-самолет» и пр.
Короткое тире – диапазон дат («1941–1945»), телефоны (99–99–99).
Тире. Используется между подлежащим и сказуемым («Ты — козёл»), прямая речь («—А она спросила у него…»).
Лично я считаю анахронизмом использовать последний тип – тире. Я использую или дефис, или короткое тире во всех случаях. Артемий Лебедев, если верить его ководству, разделяет эти понятия.
Местоимение «вы» пишется с маленькой буквы. Откуда взялось такое уважение к пользователям – опять-таки непонятно. Процитирую Лебедева по этому поводу: «В качестве особого исключения можно писать Вы при личном обращении к невероятно уважаемому человеку (у каждого таких адресатов в жизни наберется человека три)»
В интернете крайне не рекомендуется выравнивание по ширине, т.к. до сих пор нет инструментария для автоматической простановки переносов, поэтому выровненный таким образом текст смотрится неряшливо (огромные пробелы между словами, растянутый текст и пр.)
Формы обратной связи
Располагать названия полей НАД полями для ввода, а не слева.
Автоматически устанавливайте курсор в первое поле для заполнения.
Не используйте капчу. Лучше очистить пару писем от спама, чем потерять пользователя, который не любит капчи.
Выделяйте поля, которые заполняет пользователь (фокусные поля) – внутренним цветом, например.
Никогда не нужно использовать текст «Отправить» на кнопках формы. Создавайте такие понятные призывы к действию как «Зарегистрироваться», «Создать аккаунт», «Оформить заказ», «Купить»
После заполнения формы необходимо обязательно выдать ему сообщение об успешной отправке данных, о том, что они приняты и что произойдет дальше – «заявка будет рассмотрена», «заказ будет оформлен», «пользователь зарегистрирован» и т.д. Еще одним важным моментом является информация о том, что пользователю делать дальше. Вот он заполнил форму, и.… Сколько ему ждать звонка? Когда с ним свяжутся и свяжутся ли вообще? Все это необходимо указать в сообщении об успешном заполнении формы.
Пользователь не должен думать о форматировании вводимых данных!
Если у вас предусмотрено поле «Введите телефон», то разграничьте поля для ввода, чтобы пользователь не думал в каком виде его ввести: ХХ-ХХ-ХХ или ХХ ХХ ХХ, или (ХХХХ)ХХ-ХХ-ХХ и т.д. Предусмотрите отдельное поле для кода города и отдельные поля для самого телефона по маске.
Если это поле – адрес, то сделайте отдельные поля для города, улицы, дома и т.д.
Пользователь не хочет отвечать на лишние вопросы, если он пользуется формой обратной связи. Если он просто пишет запрос, то не нужно спрашивать его о поле, адресе, кличке собаки и пр. Имени, телефона и окна сообщения будет вполне достаточно.