Рассуждения о том, как сделать не только красиво, а и удобно

Вступление

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

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

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

Многие руководители вообще не понимают, что такое юзабилити и зачем его нужно улучшать. Особенно те, у которых есть большой опыт руководства советскими предприятиями, государственными или, не дай бог, военными структурами. Понятие дизайна в то время не существовало. Конечно, и тогда были образцы прекрасных логотипов, агитационных и рекламных плакатов и, тем более, архитектурных объектов, но все это не дизайн как система, а единичные художественные творения, чаще всего авторские.

Тогда ни о каком юзабилити речь не шла, ведь в условиях полного отсутствия конкуренции нет смысла каким-то образом облегчать жизнь пользователям – у них все равно нет выбора, чем пользоваться. Табурет – доска и три ножки, крючок для одежды – гвоздь в стене, люстра – лампочка Ильича на проводе. Работает хорошо, предельно надежно, что еще надо? Удобство? – причем тут вообще удобство? Скажите спасибо, что и это есть.

Такой совковый подход во многом сохраняется и сейчас. Косность мышления руководителей и, что намного хуже, веб-разработчиков процветает. Считается, что затраты на юзабилити не приносят непосредственного дохода, а еще эти затраты могут быть как финансовыми, так и временными. И, действительно, просчитать прямой эффект от таких действий невозможно – но он будет однозначно.

Дизайн

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

Дизайн ради дизайна – главное зло многих проектов. В подавляющем случае он является лишь средством, а не самоцелью проектирования сайта. А цель – привлечение и удержание посетителей; им в первую очередь информация нужна, а не картинки. И информация должна быть доступной без лишних телодвижений, элементы дизайна не должны мешать. Они должны помогать. Вот тут и начинается грань, когда начинает быть применимым юзабилити.

Ссылки

Ссылки – основа всего интернета. Банальная фраза, но это так. Следовательно, посетитель, придя на сайт, должен видеть, какие элементы сайта являются ссылками, а какие нет. Как ни странно, это далеко не всегда очевидно.

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

Сложнее дело обстоит с изображениями. Вариант с рамкой не всегда подходит. Можно предложить несколько вариантов указания на то, что картинка является ссылкой:

- размещение рядом поясняющей текстовой ссылки; - явным образом написать или представить пиктограммой на изображении действие, которое будет совершено при нажатии на него; - поместить на изображение стрелку и т. п.

Если используется навигация по сайту, состоящая из картинок, ее необходимо продублировать в текстовом виде для облегчения работы роботов поисковых систем и, как следствие, улучшения индексации сайта.

Ссылки на внутренние страницы сайта, в общем случае, должны открываться в том же окне, внешние – в новом. Исключением можно считать контекстные ссылки в тексте статьи, которые ведут на материалы сайта, непосредственно не относящиеся к данному. Их лучше открывать в новой вкладке.

Цветовая гамма

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

Если посмотреть на популярные интернет-магазины, то можно заметить, что цветовая гамма у них очень простая. Белый, черный, синий – и все. Остальные цвета используются для привлечения внимания к определенным местам страниц и встречаются довольно редко. Вся гамма приглушенная.

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

Регистрация и форма авторизации

Еще с 90-х годов пошла тенденция создания длинных и обстоятельных формы регистрации. Требуют ввести ФИО, дату рождения, адрес и много другой бесполезной информации. Это, конечно, отпугивает многих посетителей; действительно, зачем оставлять все данные о себе, если нужно просто скачать файл или оставить комментарий.

В большинстве случаев регистрация вообще не нужна – особенно такая, без которой невозможно пользоваться основным функционалом сайта. Иногда доходит до маразма, когда цены в интернет-магазине можно увидеть, только зарегистрировавшись. Естественно, большая часть клиентов уйдет к конкурентам. Регистрация в интернет-магазинах нужна только для постоянных клиентов; для совершения покупки нужно добавить ее в корзину и заполнить форму для доставки.

Если без регистрации не обойтись, то количество заполняемых полей в форме нужно свести к минимуму. В идеале – логин и пароль. Некоторые сайты упрощают еще сильнее, форма состоит только из поля ввода электронной почты. Но как быть, если я не хочу вводить свою почту на какой-то непонятный сайт? Ведь наверняка ж мне будут слать письма с новостями и т. п. Логина и пароля достаточно, все остальное можно ввести добровольно в настройках. Или не вводить, если сайтом пользуешься один раз. Такая лаконичная регистрация никого не отпугнет – ведь не вводится никакой личной информации, ни мыла, зато получается доступ к функционалу сайта.

При ошибках заполнения формы не должны сбрасываться никакие уже заполненные поля, даже пароль.

Форму авторизации многие прячут за ссылками "Вход" или, что еще хуже, "Зайдите, чтобы авторизоваться". Особо одаренные вебмастера заставляют вводить капчу перед входом, но об этом ниже. Если авторизация на сайте обязательна, то и форма надо разместить на видном месте главной страницы. В идеале, сразу при загрузке страницы установить курсор на поле "Логин".

Пароль пользователь должен выбирать себе сам. Если хочет, поставит "111", если хочет "dfFG334&*%%^%Dl". Не нужно навязывать свои представления о сложности паролей, заставлять вводить обязательно цифры и буквы, символы в разных регистрах и т. п. Бывают случаи, когда пароль удается придумать только с пятой попытки, и чтобы не забыть его, приходится записывать; следовательно, уровень безопасности понижается.

Капча

Капча – главное зло современного интернета, это первый признак беспомощности вебмастера перед нашествием ботов. Война со спамом, безжалостная и беспощадная, не жалеет и простых добросовестных потребителей. Иногда бывает проще уйти с сайта, чем разбирать закарлючки на капче или решать какие-то ребусы. Всякие "заменители капчи" в виде задач, перемещения картинок, выбора нужны объектов – по сути, то же неуважение к пользователю. Я уж не говорю о том, что большинство подобных методов легко обходятся роботами или системами типа антигейт, основанных на массовом распознавании капч людьми.

Есть более современные методы "определения человека", однако они требуют наличия фантазии у вебмастера и приложения определенных усилий. Попробуйте и сразу увидите увеличение количества реальных комментариев.

Например:

- замена названий (name) полей формы на нестандартные. Можно использовать динамическую генерацию этих названий;
- размещение невидимой формы для комментариев, ведущей в никуда, перед основной. В нее и будут спамить программы;
- использование скрытых полей в форме;
- проверка действий мыши (клики, прокрутка и т. п.);
- в конце концов, качественная модерация.

Реклама на сайте

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

Реклама не должна занимать место контента. Это и пользователей отпугнет, и может, в крайнем случае, привести к санкциям поисковых систем. К такой рекламе однозначно относятся:

- всплывающие окна в любом виде – попап, попандер, кликандер и т. п.;
- некоторые тизерные сети, рекламирующие мошенников и распространяющие вирусы;
- аудио- и видеореклама;
- невидимые вставки iframe, в которых показываются другие сайты;
- всплывающие рекламные блоки, появляющиеся при простом наведении мышки на какой-то из элементов сайта.

При чрезмерном количестве рекламы сайт может также быть зафильтрован поисковиками, которые решат, что это просто дорвей.

Оптимальным вариантом рекламы с точки зрения посетителя является контекстная реклама (Google Adsense и Yandex Direct). Она оптимально вписывается в любой дизайн и структуру сайта, объявления могут хорошо дополнять содержимое сайта и быть полезными для посетителей.

Верстка контента на странице

Как показывают многие исследования, взгляд посетителя чаще всего задерживается на информации, размещенной в левой верхней четверти экрана. А что там обычно размещают? – логотип. Вместо того, чтобы разместить контактный телефон, например. Или краткое, но емкое, описание услуг.

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

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

Часто бывает необходимость разместить длинный текст (больше 5000 символов), при этом требуется, чтобы посетители его читали полностью. Вот тут нужно использовать весь арсенал методов удержания внимания читателя. Например:

- разбивка текста на короткие абзацы;
- вставка между абзацами блоков типа "А знаете ли вы?", "Nota bene", "Важно!" и т. п.;
- вставка информативных изображений. Они не должны быть просто украшением, они должны дополнять текст, при этом быть наглядными, а не сугубо научными;
- выделение некоторых ключевых фраз текста разными цветами и шрифтами. Впрочем, увлекаться этим не стоит;
- использование списков;
- в конце концов, если текст будет уникальным и написан интересно, его будут читать в любом случае.

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

Навигация и поиск

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

Правило "3 клика", несмотря на то, что многими отрицается, все еще действует. Конечно, это все условно, и цифра может быть большей, но через навигационные цепочки типа "Главная – Бытовая техника – Кухня – Стиральные машины – С фронтальной загрузкой – 800 оборотов – Белые – С отжимом" мало кто пройдет, не ругнувшись и не уйдя к конкуренту. Если же есть строгая необходимость в большом уровне вложенности разделов, используйте так называемые "хлебные крошки" - четкое указание того, как каком уровне находится посетитель.

Правило относится не только главной страницы. Вообще роль ее давно уже не такая принципиальная; многие люди переходят на сайт из поисковых систем, и страница, на которую они перешли, чаще всего не является главной. Поэтому с любой страницы на другую переход должен быть тоже по самому короткому маршруту. Последовательная навигация осталась в прошлом; такая, используя которую, чтобы перейти на другую страницу, нужно вернуться на главную, где есть меню.

Выпадающие меню, особенно многоуровневые, крайне неудобны, особенно если пункты выпадают без нажатия, просто после наведения мыши. Одно неверное движение, и приходится опять проходить "лабиринт" заново. Куда удобнее разворачивающиеся списки, которые раскрываются при нажатии на подзаголовок или значок "+".

В интернет-магазине вся навигация должна приводить к покупке, это очевидно. И шагов от выбора товара до оформления заказа должно быть минимум. Естественно, на каждой странице должна быть ссылка на оформление заказа.

Официальная информация

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

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

Скидки и акции

Скидками и подарками давно уже никого не удивишь. Сложно найти магазин, в котором не было бы "постоянного" дисконта. Но никто им не верит – ведь чаще всего это фикции, а не скидки. Возле всех акций стоят сноски, в которых нечитаемым шрифтом написаны невыполнимые условия. Человек пришел в магазин, привлеченный скидкой – и ушел разочарованным; скорее всего, он и не вернется.

Все акции должны быть честными. Сложно сейчас что-то скрыть в интернете... например, поднять цену, а потом снизить, назвав это "скидкой" можно, но информация о старых версиях страниц останется в кэше поисковых систем, в веб-архиве, и обман всплывет.

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