Основное:
· Как только сайт загрузился, сразу должно быть сразу понятно, чему он посвящен. На первом экране оставляем самую суть. Проверяем сегментирование и позиционирование
· Удобство ставим на первое место: простота использования сайта, подсказки, помощь. Любите заботу? Ваши посетители — тоже!
· Пора уже сказать нет отвлекающей и бесполезной информации: всплывающим баннерам, прыгающей и бегающей за посетителями рекламе на страницах
· Есть несколько этапов в процессе выполнения задачи или отправки данных? Показывайте все шаги и текущее положение пользователя в этом процессе
Структура сайта, навигация:
· Контент принято делить на разделы и блоки по смыслу не просто так, а потому что так удобнее посетителям сайта
· Пользователю всегда должно быть понятно, в каком разделе сайта он находится. Используйте подсветку активного пункта меню, хлебные крошки
· Важные пути по сайту: покупка, подписка и пр. — не делайте их сложными. Сложные действия лень выполнять
· Важная информация не должна теряться: телефон и адрес, например. Сделайте так, чтобы она была легко доступна на всех страницах сайта
· Поставьте на логотип ссылку на главную страницу. Для вас это недолго, а для посетителя — удобно
· Главное меню нужно посетителям на всех страницах, в одном и том же месте, исключение может составлять процесс покупки
· Удобно, когда пункты меню расположены в порядке убывания их значимости
· Удобно, когда пункты, содержащие подменю, отличаются от остальных пунктов
Структура страниц сайта:
· Если самые важные блоки расположены на первом экране и выше менее важных, вы экономите время посетителя
· Соблюдайте баланс между информационными блоками и пустым пространством
· Понятные и заметные заголовки, правильное использование цветов фона, рамок и пустого пространства поможет визуально разделять страницу на заметные и логичные информационные блоки
· Удобно, когда каждый блок можно охватить одним взглядом
· Кликабельные элементы стоит сделать очевидно кликабельными, а на некликабельных курсор мыши не должен меняться
· «Цена — рядом с товаром» — это правило. Да и другие связанные элементы лучше разместить рядом друг с другом
· Значение иконок и графических элементов должно быть интуитивно понятно
Текст:
· Сначала пишите про самое важное важное, потом про все остальное
· Текст без «воды» — отличный текст
· Структурируйте текст: заголовки, подзаголовки, абзацы, таблицы
· Кегль основного текста для чтения — от 16px. Мелкий трудно читать
· Если абзац большой, то выравнивайте его только по левому краю
· Ставьте заголовок ближе к «своему» абзацу, чем к предыдущему
· По заголовку категории, страницы или блока должно быть понятно про что пойдет речь
· Текст красиво смотрится когда кегль заголовка больше кегля подзаголовка в ~1,5 раза, а кегль подзаголовка больше кегля текста в ~1,5 раза
· Верхний регистр используется по минимуму или не используется — это правило
· Используйте минимум одинаковых шрифтов, один или пару
· Разнообразие цветов хорошо только тогда, когда оно приятно смотрится
Цвета:
Задайте себе следующие вопросы:
· Подходящий ли выбор цветов для сайта?
· Используется ли слишком много цветов?
· Цвета используются логично и последовательно?
Если все в порядке — отлично!
· Контрастность должна быть достаточной для того, чтобы можно было отличить контента от фона, но при этом она не должна резать глаза
Ссылки и кнопки:
· Сделайте ссылки не похожими на остальной текст, так их наверняка заметят
· Кнопки стоит использовать для действий: заказать, купить, позвонить, в корзину и т.д. Они для этого придуманы
· Кнопки стоит сделать похожими на кнопки
· Если кнопок с целевым действием много — теряется смысл. Купить, позвонить, отправить, написать. А сделать-то в итоге что? Совет: оставьте одно - два действия
Формы:
· Не делайте сильно сложные формы. Если надо узнать у посетителя больше информации — пообщайтесь с ним
· Но если полей все-таки много — группируйте их по смыслу, так удобнее
· Если заполнение формы разделено на несколько шагов — покажите человеку, на каком шаге он находится сейчас и сколько еще осталось
· Снабдите поля формы подсказками. Например, форматы даты, номера телефона и пр.
· Отмечайте обязательные поля
· Если у пользователя есть возможность вернуться назад, чтобы откорректировать введенные данные — вы не потеряете посетителя
· В сообщениях об ошибках напишите что не так. Например: «Укажите, пожалуйста, как вас зовут»)
Кроссдевайс-адаптация:
· Внешний вид сайта должен быть настроен для показа на разных устройствах. Это уже даже не обсуждается — все смотрят сайты с телефона. Проверить можно тут: http://quirktools.com/screenfly/
· Если мобильная версия сайта содержит неполную информацию — сделайте возможность перейти на полную версию сайта
· Клик по телефону вызывает звонок? Отлично! Вам раньше позвонят с мобильного, чем конкуренту, который этого не сделал
· Блоки сайта расположите и перегруппируйте таким образом, чтобы пользователь мог прочесть текст и выполнить все действия без дополнительных прокруток экрана вбок