Чек-лист идеального сайта


Оглавление (нажмите, чтобы открыть):

Составьте подробный чек-лист онлайн с Canva

Создайте собственный чек-лист онлайн на основе стильных образцов.

Планируйте покупки или путешествия, используя чек-листы

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

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

5 этапов создания вашего чек-листа онлайн:

  1. Создайте учетную запись Canva, чтобы приступить к дизайну чек-листа.
  2. Выберите понравившийся шаблон.
  3. Загрузите свои фотографии или тематические картинки из вкладки «Элементы».
  4. Адаптируйте графику, примените уникальные фильтры и отформатируйте текст.
  5. Скачайте файл в формате «PDF для печати», готовом для отправки в типографию.

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

  1. Измените изображения. Добавляйте ваши материалы, или воспользуйтесь стоковыми из хранилища.
  2. Подберите шрифты. Оформите текст в одном из сотен шрифтов для русского языка.
  3. Замените фон. Найдите в каталоге картинки-фон для объявления, которые будут лучше всего сочетаться с общей композицией.
  4. Откалибруйте палитру. Задайте цвет надписей и рисунков, чтобы внести завершающий штрих.

Настройте чек-лист, чтобы он соответствовал вашим вкусам и стилю

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

Создавайте шаблоны чек-листов на основе вашего дизайна

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

Чтобы копировать дизайн, войдите в аккаунт Canva, откройте оригинальный дизайн, нажмите кнопку «Файл» в строке меню и выберите команду «Сделать копию».

Сверяйтесь с чек-листом в любое время

В организации масштабных или значимых событий просто незаменим правильный чек-лист. Свадьба это или путешествие мечты, хочется уверенности, что все детали учтены, и все пройдет на отлично. Вы можете просмотреть чек-лист в поездку в удобный момент, и где бы ни находились. Все дизайны Canva сохраняются в облаке, чтобы их можно было открыть, изменить или скачать из любой точки мира, где есть подключение к Интернету. А чтобы получить доступ к своему дизайну на ПК или ноутбуке, вам не придется ничего устанавливать!

Распечатайте свой чек-лист или поделитесь им

Цифровой век позволяет всегда держать главное под рукой. Чек-лист продвижения в Instagram, полученный от экспертов с другого конца Земли, даст возможность задействовать его в режиме реального времени. А при необходимости, вы легко перенесете его на бумагу. Нажмите кнопку «Скачать» и пункт «PDF для печати». Хотите распространить свой чек-лист? Кликните «Поделиться» и выберите способ отправки: по электронной почте или в виде ссылки. Кнопка также позволяет опубликовать дизайн непосредственно на вашей странице в Facebook или Twitter.

Чек-лист: секреты успешного продвижения сайта

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

Вы планируете продвигать или уже продвигаете свой сайт в поиске? Обратите внимание на наш чек-лист, чтобы проверить, все ли параметры настроены верно. В этой статье мы поговорим о технических особенностях, остановимся на бизнес-параметрах и SEO-настройках.

1. CMS сайта

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

  • CMS, которые не подходят для SEO: большинство самописных CMS, MC3, Js.
  • «Движки», успешно продвигающиеся в поиске: WordPress, Битрикс и др.

Проверьте, чтобы в базовой версии CMS вашего сайта был блок для настройки title («заголовок страницы»), description («описание страницы»), keywords («ключевые слова»).

2. Метатеги

Заполнение этих параметров нужно для правильного и эффективного продвижения страниц сайта в поиске.

  • в заголовке или названии страницы (метатег title) укажите: товар или услугу, название региона, УТП. Например, «Окрашивание и стрижки в Смоленске от 300 руб.»;
  • подберите ключевые слова (метатег ): именно по ним пользователи будут искать ваш сайт в интернете. Они должны быть понятными, простыми и правильно подобранными (неверно: «парикмахерская в городе на семи холмах», «классная стрижка недорого», «стрижка своими руками»; лучше использовать: «парикмахерская Смоленск», «стрижка недорого»);
  • в описании (метатег description) коротко расскажите о том, какую информацию пользователь найдет на странице сайта. Например, «Салон красоты „Малинка“ — все виды парикмахерских услуг в Смоленске по низким ценам. У нас вы сможете заказать укладку, стрижку, окрашивание». Этот короткий текст появится в выдаче поисковых систем, и он первым сориентирует потенциального клиента в выборе подходящего сайта;
  • еще один важный метатег — alt, он добавляется к изображениям, в нем можно использовать ключевые слова. Таким образом, все изображения с вашего сайта будут выдаваться в поиске по изображениям вашей целевой аудитории. Но будьте осторожны — поисковая система может посчитать большее количество ключевых слов как переспам (особенно, если alt не будет отражать суть фото).

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

3. Robots.txt и Sitemap.xml

Первыми с вашим сайтом взаимодействуют поисковые роботы. Именно для них следует заняться техническое оптимизацией. За работу с роботами отвечает файл robots.txt — он указывает, на какие страницы сайта ему следуют обратить внимание: что отправить в поиск, а что оставить скрытым. Поэтому убедитесь, что у вас из поиска скрыты все служебные разделы (личный кабинет, страницы регистрации, корзина и т. д.).

Кроме указания, что смотреть, поисковый робот должен знать, где ему искать информацию в первую очередь для включения в поиск — в этом ему помогает файл sitemap.xml. Cформируйте этот файл и предварительно проверитьте в специальном валидаторе Яндекс.Вебмастера .

4. Дубли и склеенные доменные имена

Если сайт доступен по нескольким адресам в поиске (например, как по www.site.ru, так и по site.ru), то необходимо оставить один из адресов и провести так называемую «склейку доменного имени». Как проверить, выполнена настройка или нет? Попробуйте вбить в поисковую строку адрес вашего сайта по с www и без него. Если сайт доступен по двум адресам, то доменные имена не склеены. Если один из адресов, например, без www «исправлаяется» на адрес с www, то настройка была успешно проведена. Подробнее о склейке доменных имен написано в Яндекс.Вебмастер .

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

5. Скорость загрузки и url страниц сайта

Если после клика пользователя страница сайта загружается больше 3 секунд, то большинство потенциальных клиентов закрывают новую вкладку, а сайт из-за большого процента отказов теряет позиции в выдаче. Есть много способов того, как изменить этот показатель в лучшую сторону — от размещения CSS в конце страницы до уменьшения HTTP-запросов. Ресурс для быстрой проверки скорости сайта.

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

6. Битые ссылки и 404 ошибка на сайте

Первая реакция пользователя, когда вместо запрашиваемой страницы появилась 404 ошибка — закрыть вкладку и продолжить поиск товара или услуги в интернете. Вот почему владельцам сайтов надо не забывать следить за корректностью ссылок, вовремя настраивать редиректы (например, если раздел «Столы» был перенесен на сайте в раздел «Мебель», то укажите в настройках, куда должен попадать пользователь из поиска при запросе столов по старому url-адресу).

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

Создав страницу с «404 ошибкой» (она отображается при битых ссылках и неверном вбитом url в адресную строку сайта), вы перенаправите клиента в нужный раздел и даже сможете «уговорить» остаться на сайте, даже несмотря на отсутствие результата при переходе по битой ссылке или по определенному запросу.

Также вы сможете отследить число заходов на страницу с 404 ошибкой, и это скажет о наличии проблемы на сайте (большое число попаданий на 404 ошибку — повод проверить сайт на битые ссылки).

7. Структура и наполнение сайта

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

Правильная структура сайта выглядит примерно так:

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

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

Антипример для наглядности:

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

Как проверить, уникален ли контент сайта? Воспользуйтесь специальными сервисами. Например, text.ru, etxt, advego. Они укажут вам на процент уникального контента и орфографические недочеты.

8. Адаптивность

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

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

9. Юзабилити (удобство для пользователя) и соблюдение требований закона

Позаботьтесь о том, чтобы элементы были расположены на сайте в тех местах, где их ожидает увидеть пользователь. Оригинальная структура может развлечь, но продажа не состоится, если покупатель не найдет кнопки «Заказать».

Регулярно проверяйте, как работают на сайте формы обратной связи, есть ли на сайте политика конфеденциальности, размещена ли галочка о согласии на обработку персональных данных и т.д. Для соблюдения всех требования законодательства изучите ФЗ-152 и 54-ФЗ.

Пример корректной формы на сайте:

10. Внешняя оптимизация и репутационный маркетинг

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

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

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

Итоговый чек-лист для проверки сайта

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

  1. Сайт сделан на CMS, пригодной к дальнешему продвижению.
  2. Структура сайта разветвленная и создана с учетом ключевых слов и задач бизнеса, интуитивно понятна для пользователя.
  3. Сайт доступен в поиске по одному доменному имени, на нем правильно оформлены robots.txt и sitemap.xml.
  4. Отсутствуют дубли главной и внутренних страниц, контент не повторяется из раздела в раздел.
  5. Сайт быстро загружается и корректно отображается в различных браузерах.
  6. Адаптивный дизайн сайта позволяет одинаково удобно пользоваться им с телефона, компьютера и планшета.
  7. На сайте нет битых ссылок, и разделы имеют человекопонятные url.
  8. Ошибка 404 на сайте отображается и отрабатывает правильно.
  9. Метатеги title, description, keywords, alt прописаны правильно.
  10. Количество страниц сайта, проиндексированных Google и Яндекс, отличается незначительно.
  11. На сайте много входящих и мало исходящих ссылок.
  12. Корректно настроена региональная принадлежность, размещены системы статистики.
  13. Все тексты, новости и фотоматериалы уникальные.
  14. На сайте регулярно обновляются статьи, новости, каталог, добавляется новый функционал.
  15. Контактные данные компании размещены на сайте на видном месте: в шапке сайта, в подвале, в разделе «Контакты».
  16. На сайте имеются схемы проезда, формы обратной связи, системы стаститики Яндекс и Google.
  17. Платформа вашего сайта регулярно обновляется и дорабатывается разработчиками.
  18. Ваш сайт соответствует требованиям ФЗ-152 и 54-ФЗ.
  19. На сайте добавлена CRM-система для отслеживания источников заявок и работы с клиентами.
  20. Сайт выложен на отказоустойчивый хостинг, регулярно создаются копии сайта и отслеживается его доступность.

Если хотя бы несколько пунктов этого списка вызывают сомнения, изучите подробнее «хелпы» Яндекс и Google или обратитесь за помощью к специалистам.

Чек-лист по юзабилити сайта! Проверь себя!

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

1. Основное

  • По главной странице сразу понятно, чему посвящен сайт
  • Удобство для новичков: простота, подсказки, помощь
  • Удобство для опытных: упрощенные процедуры, сохранение данных
  • Информация представлена в соответствии с регионом пользователя (геолокация)
  • Нет лишней, отвлекающей информации (навязчивой рекламы, баннеров и т.д.)
  • В случае, если есть несколько этапов в процессе выполнения задачи, то показаны все шаги и текущее положение пользователя в этом процессе
  • Пользователю не приходится вводить одну и ту же информацию дважды

2. Структура сайта, навигация

  • Контент разделён и структурирован
  • Пользователю всегда понятно, в каком разделе сайта он находится (подсветка активного пункта меню, хлебные крошки)
  • Важные пути по сайту (такие как покупка, подписка и пр. в зависимости от бизнес-целей сайта) предельно просты
  • Важная информация легко доступна со всех страниц сайта
  • По заголовку категории, страницы, блока можно понять их содержимое
  • Логотип является ссылкой на главную на всех страницах
  • Главное меню есть на всех страницах, в одном и том же месте (исключение может составлять процесс покупки)
  • Пункты меню расположены в порядке убывания их значимости
  • Используется не более двух подуровней меню
  • Пункты, содержащие подменю, отличаются от остальных пунктов
  • Названия пунктов меню начинаются с заглавной буквы

    3. Структура страниц сайта

    • Логотип расположен в одном и том же месте на всех страницах сайта
    • Слоган четко описывает цели сайта (он краткий и расположен рядом с логотипом)
    • Самые важные блоки расположены на первом экране (в любом случае выше менее важных)
    • Соблюдается баланс между информационными блоками и пустым пространством, что способствует восприятию сайта пользователями
    • Понятные и заметные заголовки, правильное использование цветов фона, рамок и пустого пространства позволяет визуально разделять страницу на заметные и логичные информационные блоки
    • Каждый блок можно охватить одним взглядом
    • Все кликабельные элементы выглядят очевидно кликабельными, а курсор мыши видоизменяется при наведении на них
    • Все некликабельные элементы выглядят некликабельными и курсор мыши не видоизменяется при наведении на них
    • «Цена — рядом с товаром»: все связанные элементы находятся рядом друг с другом
    • Значение иконок и графических элементов интуитивно понятно
    • Элементов, привлекающих внимание, мало (анимация, крупные, цветные тексты и прочее)

    4. Поиск (при необходимости)

    • Поле поиска доступно на любой странице сайта
    • Поле поиска находится в ожидаемом месте
    • На странице одно поле поиска
    • В поле поиска работает подсказка
    • Поиск проверяет орфографические ошибки и ищет синонимы
    • Результаты поиска легко воспринимаются, отсортированы по релевантности\дате\алфавиту
    • Если поиск дал нулевой результат, то пользователю подсказываются
      идеи о том, как можно отредактировать запрос
    • Пользователю показывается количество результатов поиска
    • Поиск охватывает весь сайт целиком, если не предусмотрен
      поиск по определенным разделам сайта
    • В результатах поиска выводится основная информация о найденных объектах

    5. Текст

    • Изложение соответствует принципу перевернутой пирамиды: сначала важное, потом остальное
    • Текст лаконичен, без «воды»
    • Текст структурирован: заголовки, подзаголовки, абзацы, таблицы
    • Кегль основного текста для чтения — 16px (достаточно крупный)
    • Выравнивание крупного абзаца — только по левому краю
    • Заголовок ближе к «своему» абзацу, чем к предыдущему
    • Заголовки — подсказывают «о чем дальше»
    • Кегль заголовка тоже больше кегля подзаголовка в

    1,5 раза
    Кегль подзаголовка больше кегля текста в

    1,5 раза

  • Верхний регистр используется по минимуму или не используется
  • Шрифты единообразны на всех страницах, читабельны и контрастны
  • Ссылки легко различимы среди текста по цвету или форме (подчеркиванием)
  • Разнообразие цветов должно быть оправданным
  • Для улучшения восприятия длинные числа разбиваются на разряды неразрывным пробелом (или точкой)
  • 6. Ссылки и кнопки (речь идет не о реализации в HTML, а о восприятии пользователем)

    • Текст ссылки (анкор) или около ссылочный текст обозначает объект, к которому она ведёт
    • Все ссылки визуально отличаются от остального текста
    • Скриптовые ссылки (которые не перезагружают страницу) подчеркнуты пунктиром
    • Ссылки достаточно длинные, чтобы по ним было легко кликнуть
    • Ссылки для скачивания файлов визуально отличаются от ссылок на другие страницы (например, иконками)
    • Кнопки используются для действий (заказать, купить, войти, положить в корзину и т.д.)
    • Кнопки похожи на кнопки: форма, цвет, текст, реакция на курсор
    • Кнопка с целевым действием только одна на странице или она очень явно выделена по сравнению с другими (т. н. call-to-action)

    • Текст на кнопке — призыв к действию: текст в инфинитивной форме глагола (пример: найти), а не другую часть речи либо форму глагола (пример: готово)
    • Активная область кнопки совпадает с ее видимым размером или больше
    • Между кнопками, стоящими рядом, есть пустое пространство, щелчок по которому не вызывает действий
    • По наведению на кнопку меняется ее отображение, это призывает пользователя сделать клик
    • Недоступные кнопки и ссылки не исчезают с экрана, а становятся заблокированными

    7. Формы

    • Формы максимально лаконичны
    • В целевых формах (таких как регистрация, оформление заказа) есть только обязательные поля
    • Если полей много, они группируются по смыслу; у групп есть подзаголовки
    • При открытии страницы с формой, курсор перемещается в первое поле
    • Поле, в котором находится фокус, визуально выделено
    • Если заполнение формы разделено на несколько шагов, показано на каком шаге он находится сейчас и сколько осталось шагов
    • Данные сохраняются в полях до того, как пользователь окончил процесс заполнения формы (если пользователь случайно ушел со страницы)
    • Текст результирующей кнопки соответствует цели заполнения (например “Зарегистрироваться”, “Получить бонус” и пр.)
    • Поля, заполнение которых может вызвать вопросы, снабжены подсказками (например, даты, номера телефонов и пр.)
    • Обязательные поля явно отличаются от необязательных
    • Подписи полей соответствуют смыслу полей
    • Наиболее вероятные значения некоторых полей формы по умолчанию заполнены
    • Подписи полей и других элементов единообразны (либо все с двоеточием в конце, либо все без двоеточия)
    • У пользователя есть возможность вернуться на шаг назад, чтобы откорректировать введенные данные
    • Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных
    • Сообщения об ошибках информативны (плохо: “Вы не заполнили все обязательные поля”; хорошо: “Укажите, пожалуйста, электронную почту”)
    • Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка

    8. Адаптация по устройства

    • Внешний вид сайта адаптируется под разные устройства
    • Если мобильная версия сайта имеет ограниченный функционал, то имеется возможность перейти на полную версию
    • Клик по номеру телефона должен начинаться звонок
    • Телефон, режим работы, адрес в шапке сайта
    • Все блоки сайта расположены и перегруппированы таким образом, чтобы пользователь мог прочесть текст и выполнить все действия без дополнительного увеличения зон

    Тестирование

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

    Чек-лист по юзабилити: 200+ пунктов на проверку

    Время чтения: 45 минут Нет времени читать? Нет времени?

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

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

    Основное

    1. Скорость загрузки. Сайт быстро грузится (1–2 секунды). Если ваш сайт грузится более 3-х секунд – около 40 % посетителей, скорее всего, уйдут, не став ждать.

    2. Подстройка под географию ЦА. Сайт оптимизирован для представления в том регионе, для которого предназначен: информация изложена на соответствующем языке (или есть выбор языка), данные представлены в привычной посетителю метрической системе.

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

    4. Наличие адаптивной верстки. Сайт должен быть оптимизирован:

    • a. для корректного показа на мобильных устройствах;
    • b. для корректного показа в различных браузерах, на устройствах с разным разрешением экрана.

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

    6. Скрытие ненужных полос скролла. На сайте при разрешении 1024×768 во всех стандартных браузерах горизонтальная полоса скролла не появляется.

    7. Быстрый доступ к кнопкам CTA. Возможность купить товар/заказать услугу/заказать обратный звонок есть на каждой странице сайта.

    8. Наличие интуитивно понятных иконок. Везде, где это уместно и возможно, текстовые пункты дополнены иконками.

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

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

    11. Предсказуемое местонахождение ключевых элементов. Все стандартные элементы посетитель находит на привычных местах (принцип «Не заставляйте меня думать»):

    • a. логотип компании – слева вверху,
    • b. контакты – справа вверху,
    • c. строка поиска – вверху слева или вверху по центру.

    12. Минимально необходимое количество контактов. Слишком много вариантов выбора контактного лица могут привести к нежеланию посетителя делать этот выбор вообще.

    13. Удобство взаимодействия с лого сайта. Логотип кликабелен и ведет на главную страницу, а на самóй главной – не перезагружает страницу.

    14. Карта сайта. На сайте есть ссылка на карту сайта, и она сквозная (оптимальное расположение – в футере).

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

    16. Заметные CTA. Все призывы к действию на страницах – визуально заметны и очевидны: кнопки крупные и понятно подписаны, ссылки выделены.

    17. Основной CTA – самый заметный. Главный призыв к действию на каждой странице (кнопка «Купить», кнопка перехода к следующей стадии оформления заказа и т. д.) – всегда выделен ярче, заметнее остальных и расположен наиболее удобным для пользователя образом.

    18. Ясная терминология. В пунктах меню, кнопках и ссылках не используются непонятные посетителю термины или формулировки.

    19. Возможность увидеть лица компании. На сайте есть страница «О компании», с подробной информацией о вас, желательно – с фото офиса внутри и снаружи, с фото персонала, работающего с клиентами, с фотографиями производственного/рабочего процесса.

    20. Проработанный функционал страницы 404. На сайте есть информативная страница с ошибкой 404. Она сообщает посетителю, что произошло, и содержит ссылки на основные разделы сайта, на строку поиска, а также контакты: телефоны, мессенджеры, электронную почту.

    21. «Принцип ненасилия».

    • a. На сайте нет медиаконтента (музыки или видео), запускающегося без ведома пользователя. В подавляющем большинстве случаев это раздражает посетителя и заставляет его сразу же покинуть сайт. Если вы все же по какой-то причине используете это, позаботьтесь о том, чтобы кнопка остановки воспроизведения была на видном месте.
    • b. Если используются всплывающие окна (pop-up), то они имеют заметную кнопку для их закрытия (именно закрытия, а не перехода на другую страницу). Посетитель не будет тратить время на ее поиски – раздраженный самим фактом появления окна, он просто вообще закроет вкладку с вашим сайтом.

    22. Мгновенный скроллинг. На длинных страницах, которые занимают несколько экранов, предусмотрена плавающая кнопка «Наверх», «В начало», которая перебрасывает пользователя на первый экран.

    23. Минимум трудностей для пользователя. Посетителю сайта предлагается выполнять только действительно необходимые действия:

    • a. все, что можно сделать программно – делается программно (например, подставляется город доставки, исходя из местоположения пользователя);
    • b. запросы действий посетителя сайта и варианты выбора динамически изменяются в зависимости от параметров товара, данных посетителя и т. д. Например, если платье доступно только в одном цвете, пользователя не заставляют выбирать цвет. Если он проживает в Туле, ему не предлагается вариант доставки в пределах МКАД.

    Дизайн и элементы сайта

    24. Умеренность. Яркие цвета, крупный цветной текст, анимация – используются минимально или вовсе не используются.

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

    26. Отсутствие лишней анимации. Flash используется по минимуму или вовсе не используется.

    27. Отсутствие нагромождения элементов. Элементы и их блоки чередуются с пустым пространством; нет чувства нагромождения, пестроты на страницах.

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

    29. Подстройка курсора под «кликабельное/некликабельное». При наведении на кликабельные элементы иконка курсора «стрелка» меняется на иконку «рука». При наведении на некликабельные элементы курсор не меняется.

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

    31. Пояснения для деактивированных элементов. При наведении на неактивную кнопку или ссылку появляется краткое пояснение, почему кнопка/ссылка неактивна.

    32. Подстройка под паттерны сканирования. Наиболее значимый контент размещается слева, так как наш взгляд скользит слева направо.

    33. Соблюдение F-паттерна сканирования. Более продвинутый уровень – расположение наиболее важных элементов сайта (УТП, строка поиска, контакты, подзаголовки статей) на странице по схеме в виде буквы F. Именно так скользит взгляд пользователя, согласно многочисленным исследованиям. Самое заметное место – верхний левый угол страницы.

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

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

    Кнопки

    36. «Честные» кнопки. Стандартный функционал любой кнопки – выполнение какого-либо действия, а не переход на другую страницу, если кнопка явно этого не подразумевает.

    37. Удобство клика по кнопке. Кликабельна сама кнопка, а не надпись на ней. Можно также сделать кликабельной небольшое пространство вплотную к ней (но не в том случае, если рядом расположена другая кнопка).

    38. Четкий однозначный CTA. Текст на кнопке говорит о действии, которое будет совершено при клике. Оптимально это глагол в инфинитивной форме (купить, заказать, скачать, продолжить оформление). Он конкретен, информативен и не допускает различных толкований. Плохо – кнопки с названиями:

    • a. «Продолжить» (Что подразумевается под «Продолжить»? Что произойдет по нажатию кнопки?).
    • b. «Назад» (Куда именно назад? Пользователь уже может не помнить, что было на предыдущей странице).
    • c. «Дальше», «Готово» и тому подобными.

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

    Ссылки

    40. «Честные» ссылки. Стандартный функционал обычной ссылки – переход на другую страницу или открытие другой страницы в новой вкладке, но не запуск какого-либо действия.

    41. Стандартизация взаимодействия. Все ссылки оформлены в привычном посетителю стиле – синим цветом, подчеркнутые, курсор при наведении на ссылку меняет свой вид на кликабельный (иконка руки). После клика ссылка меняет свой цвет (стандарт – фиолетовый).

    42. Заметные отличия «особых» ссылок. Если ссылка предусматривает разворачивание скрытого контента, а не переход на другую страницу/перезагрузку существующей, она оформлена пунктирным подчеркиванием, дополнительно можно рядом можно добавить иконку треугольника. Ссылка на скачивание файла тоже отличается от обычной ссылки – в ней есть слово «скачать»; указаны размер скачиваемого файла и его формат.

    43. Анкорная или хотя бы человекопонятная ссылка. В тексте ссылки явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке.

    44. Удобство клика по ссылке. Текст ссылки достаточно длинный, чтобы посетитель мог легко по ней кликнуть (к примеру, ссылка с анкором «тут» не слишком удобна).

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

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

    Мастер Йода рекомендует:  СРА партнерки как извлечь максимальную прибыль

    46. Кликабельные «хлебные крошки». Благодаря им посетитель всегда понимает, в каком подразделе сайта он находится, и может в один клик перейти в вышестоящие разделы.

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

    48. Кнопка возврата. На всех страницах сайта работает кнопка «Назад» браузера. Пункт 38 b говорит нам о нежелательности такой кнопки на самом сайте, но в браузере она есть, и сайт должен корректно с ней взаимодействовать: возвращать пользователя на предыдущую просмотренную им страницу, с теми пользовательскими параметрами сортировки или фильтрации, которые там были.

    49. Раздел «Недавно вы смотрели». Он доступен на любой странице сайта, чтобы пользователь мог легко найти просмотренный ранее товар.

    50. Продуманная сеть внутренних ссылок. Все страницы на сайте имеют ссылки на другие страницы – ни одна их них не должна быть «тупиковой».

    Главное меню

    51. Сквозное главное меню сайта. Разделы контактов, доставки и оплаты, каталога товаров, услуг или другие основные разделы должны быть в главном меню сайта. Так посетитель, попав на любую страницу, за 2 секунды найдет основную интересующую его информацию.

    52. Доступность главного меню. Главное меню располагается в шапке сайта или сразу под ней, а также дублируется в футере.

    53. Стандартизация. Пункты меню названы привычным для посетителя образом (и снова принцип «Не заставляйте меня думать») – «Контакты», «О компании», «Доставка» и т. д., без лишнего креатива.

    54. Выделение пункта, где находится пользователь. Такой пункт всегда выделен и неактивен (не перезагружает страницу при нажатии).

    55. Простая структура главного меню. В главном меню не более двух подуровней.

    56. Заметность подуровней. Пункты меню, в которых есть подуровни, визуально отличаются от остальных пунктов.

    Поиск

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

    58. Единственное поле поиска. Не заставляйте пользователя думать: «Зачем второе? Какое из них важнее?» и застревать на этом моменте.

    59. Удобное взаимодействие с поиском. Он запускается как нажатием кнопки рядом с полем ввода запроса, так и нажатием клавиши Enter. В запросах пользователя автоматически исправляются опечатки, орфографические ошибки, неправильная раскладка клавиатуры (или предлагаются исправления), в результаты поиска подбираются синонимы. Визуальная длина поля поиска — не менее 30 символов, фактическая длина запроса при этом не ограничивается. Предусмотрено простое редактирование запроса в поле поиска (без необходимости перехода куда-то и дополнительных кликов).

    60. Использование «живого» поиска. По мере набора запроса в поле поиска, под ним выдается релевантный список результатов. Список меняется «на лету», по мере набора. Если при донаборе пользователем запроса живой поиск уже не находит подходящих вариантов, список не очищается, а остаются последние подобранные релевантные значения.

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

    • a. количество найденных результатов;
    • b. как были отсортированы результаты поиска (с возможностью изменить эту сортировку);
    • c. основную краткую информацию о каждом найденном товаре/статье.

    62. Помощь при отсутствии результатов. В том случае, если ничего не найдено, мы не показываем посетителю малоутешительную пустую страницу «По вашему запросу ничего не найдено». На странице результатов:

    • a. клиенту предлагается несколько ближайших к его запросу вариантов товаров или разделов сайта, где, возможно, есть то, что он ищет;
    • b. клиенту рекомендуется, как можно отредактировать запрос, чтобы он был более релевантным;
    • c. опционально: предлагается воспользоваться расширенным поиском.

    63. Расширенный поиск (опционально). Дополнительно предоставляется возможность расширенного поиска, с выбором нескольких параметров.

    Коммуникация с клиентом на сайте, контакты, обратная связь

    64. Текстовый формат. Все контакты на сайте, в том числе в шапке, представлены текстом, а не картинками, чтобы посетитель мог их скопировать.

    65. Отсутствие защиты от копирования. Если на сайте таковая есть, она не распространяется на копирование контактов.

    66. Закрепление места за контактами. Телефоны и другие основные контакты расположены в одном и том же месте на всех страницах сайта.

    67. Форма обратной связи. Можно заменить формой «Написать директору».

    68. Возможность сделать быстрый заказ («заказ в 1 клик», заказ обратного звонка и т. п.)

    Страница контактов

    69. Отдельное отображение контактов для каждой точки. Если у вас несколько офисов, информация отображается отдельно по каждому из них (используются вкладки, скриптовая подгрузка после выбора офиса из списка и т. д.). Никто не захочет листать огромный список адресов на странице (не все пользователи настолько продвинуты, чтобы пользоваться Ctrl F).

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

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

    72. Полная информация о каждой точке. Она включает:

    • a. точный адрес, включая номер корпуса, номер офиса, а также почтовый индекс;
    • b. график работы офиса, а также информацию, как связаться с вами/сделать заказ в нерабочее время;
    • c. телефоны всех отделов и менеджеров, работающих с покупателями, если нужно – телефоны рекламного отдела, бухгалтерии и отдела по работе с поставщиками;
    • d. все адреса электронной почты, по которым вы принимаете заказы;
    • e. номера Viber, Skype, Telegram, WhatsApp и других мессенджеров, актуальных для вашей целевой аудитории;
    • f. адреса ваших пабликов в социальных сетях – если вы общаетесь с клиентами и там;
    • g. интерактивную карту Google или Яндекс с отмеченным местоположением вашей компании;
    • h. информацию о том, в скольких минутах ходьбы расположена ближайшая станция метро или остановка общественного транспорта;
    • i. схему проезда к вашему офису – и для тех, кто добирается на авто, и для тех, кто перемещается на общественном транспорте;
    • j. информацию о наличии парковки рядом;
    • k. фото входа в ваше офисное здание, фото местности рядом – для того, чтобы клиент мог легко сориентироваться, как вас найти;
    • l. схему, как добраться к вашему офису внутри здания – если это достаточно сложно.

    73. Отправка данных на принтер. Сделайте так, чтобы страницу контактов, или карту/схему проезда можно было отправить на печать одним кликом.

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

    Отзывы и комментарии

    75. Возможность быстро и легко взаимодействовать. К товару, услугам, статьям есть возможность оставлять отзывы (комментарии), лучше всего – без регистрации. Текст сохраняется, если пользователь неправильно ввел капчу перед его отправкой, или случайно закрыл страницу.

    76. Авторизация через социальные сети. Тех, кто не стал бы регистрироваться в отдельной форме, это подтолкнет все-таки отметиться на вашем сайте.

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

    Форма обратной связи

    78. Стандартизация. Форму обратной связи для вопроса, жалобы, заказа в свободной форме на сайте легко найти (привычное расположение – на странице контактов).

    79. Удобство. Форма обратной связи доступна без регистрации, от посетителя требуется только оставить свой контакт (email, телефон) для ответа на его обращение. Текст сообщения не теряется, если посетитель неверно ввел капчу или случайно закрыл страницу.

    80. Объемные сообщения. Форма позволяет посетителю оставить развернутое сообщение. При вводе большого объема текста форма позволяет быстро посмотреть весь введенный текст – например, справа появляется скроллбар для прокрутки.

    81. Обратная связь. После отправки сообщения на email посетителя приходит письмо о том, что его сообщение получено, указаны сведения о примерном времени ожидании ответа. Если посетитель оставил в качестве контакта телефон – он получает аналогичное SMS.

    Онлайн-консультант (чат поддержки)

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

    83. Круглосуточный прием вопросов. Написать вопрос в чат поддержки можно как в рабочее время компании, так и в нерабочее.

    84. Информация о времени ожидания ответа. Функционал онлайн-консультанта (чата поддержки) предусматривает информирование посетителя – сколько примерно времени ему нужно ждать ответа.

    85. Обратная связь. При отправке сообщения, если операторов нет онлайн, посетителю предлагается оставить контакт (электронная почта, соцсеть, номер мессенджера), чтобы компания могла связаться с ним в рабочее время.

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

    Страницы категорий товара (разделы каталога)

    87. Оптимальное количество товара. По умолчанию на странице категории отображается 10–15 товаров.

    88. Удобство представления. Пользователь может изменить количество отображаемых товаров на странице, а также выбрать показ всех позиций сразу, на одной странице. Также на странице категории есть выбор формата представления товаров: расширенный (витрина, таблица, плитка), оптимальный (список), минимальный (прайс). Расширенный подойдет пользователям, которые хотят видеть как можно больше информации о товаре прямо на странице каталога, минимальный – когда посетителя интересует в основном, только цена и наличие. Оптимальный – «золотая середина».

    89. Фокус на реальную (а не формальную) ситуацию. Если посетитель может искать какой-то тип товара в разных категориях, добавлена возможность показа ее в разных категориях. К примеру, посетители часто путают понятия «точка доступа» и «Wi-Fi роутер», поэтому можно поместить одну и ту же модель в обе категории.

    90. Интересные предложения. В каталоге предусмотрены такие категории, как «Распродажа», «Акции», «Новинки», «Популярное» и т. д.

    91. Дополнительные категории. На страницах разделов каталога есть ссылки на типы, серии товара, которые ваши покупатели ищут чаще всего, но для которых не выделен отдельный раздел. Например, в категории роутеры есть ссылки на «Роутеры для дома», «Роутеры с Wi-Fi», «Роутеры TP-Link» и т. д.

    92. Отсутствие пустых разделов. Если на данный момент в этом разделе (категории) каталога товаров нет, он временно скрывается.

    93. Полная информация о товаре. Каждый товар на странице каталога минимально содержит следующую информацию:

    • a. фото;
    • b. наименование;
    • c. цену;
    • d. ярлык акции, распродажи, новинки, хита продаж и т. п. – если он входит в эти категории;
    • e. кнопку «купить».

    94. Расширенный список характеристик. Опционально: на странице категории также дается информация об основных характеристиках – для экономии места их можно показывать только при наведении курсора на товар, во всплывающем окне, разворачивая по клику на ссылке «Показать больше» и т. п. Можно предусмотреть данный функционал для расширенного представления товаров в каталоге (витрина).


    95. Наличие и актуальное количество товара. Опционально: на странице категории показывается точное или примерное количество данного товара на складе.

    Фильтры

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

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

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

    99. Отсутствие «пустых» результатов.

    • a. Фильтры, которые изначально не содержат данных для выборки, скрываются совсем.
    • b. Зависимые фильтры, которые после синхронизации при выборе покажут 0 позиций, делаются неактивными, либо скрываются (менее предпочтительно).

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

    101. Количество отфильтрованных позиций. После выбора фильтра пользователю показывается количество позиций, которое будет отобрано с помощью этой фильтрации. Это же сообщение можно использовать и как кнопку/ссылку применения фильтра.

    102. Готовый УРЛ для результатов фильтрации. УРЛ страницы динамически меняется при выборе параметров фильтрации – в этом случае посетитель сайта сможет поделиться страницей с друзьями или сохранить ее себе в закладки.

    103. Быстрая очистка фильтра. После сброса фильтра страница каталога полностью возвращается в исходное состояние.

    Сравнение товаров

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

    105. Динамичность. Текст ссылки добавления к сравнению после этого изменяется («товар добавлен к сравнению»), чтобы посетитель видел, какие товары он уже выбрал для сравнения. Кроме этого, возможность добавить товар к сравнению есть как на страницах каталога, так и на странице товара, а убрать товар из сравнения – здесь же, в каталоге. На странице сравнения товаров есть быстрая кнопка (ссылка) удаления товара из списка.

    106. Заметность. Ссылка на сравнение товаров располагается на заметном месте сайта, к примеру, возле корзины.

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

    Сортировка товара

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

    109. Пользовательская сортировка. Если есть необходимость, предусмотрены свои варианты сортировки, исходя из потребностей ЦА и особенностей товара; возможные стандартные варианты:

    • a. от дешевых к дорогим,
    • b. от дорогих к дешевым,
    • c. по алфавиту,
    • d. по рейтингу,
    • e. по наличию скидок,
    • f. по наличию на складе.

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

    Страница товара (карточка товара)

    111. Заметность ценника. Цена хорошо заметна, написана крупным кеглем или выделена иначе.

    112. Указание валюты цены.

    113. Указание причин отсутствия цены. Если цена не указывается, то на месте ее расположения сообщается причина отсутствия цены («Товар снят с производства», «Цена пока неизвестна») или рекомендация уточнить стоимость у менеджера. В этом случае здесь же размещены контакты менеджера или ссылка на них.

    Фото и видео

    114. Разные ракурсы. На страницах с товаром есть несколько фото товара, с различного ракурса – так, чтобы были видны все особенности конструкции (если это техника), пошива (если это одежда) и т. д.

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

    116. Ярлык с интересным предложением. Если для товара есть скидка, или он входит в категории «Новинка» «Топ продаж» и т. д. изображение товара дополнено соответствующим ярлыком-иконкой.

    117. Видео анпакинга/обзора. Чем подробнее – тем лучше; желательно – в хорошем разрешении.

    Характеристики

    118. Списки и таблицы. Все характеристики, которые можно представить списком или таблицей, оформляются именно так.

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

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

    121. Подсказки к неочевидным характеристикам/терминам и т.д. Во всплывающем окошке при наведении курсора на название параметра или по клику на иконку вопросительного знака рядом с ним.

    122. Информация о гарантийном сроке на товар. Также есть развернутая информация о возможности вернуть товар (опционально).

    123. Информация о комплектации товара.

    124. Информация о стране-производителе товара. Это опциональная характеристика.

    Другое

    125. Только нужные данные. На странице товара (в карточке товара) нет информации и рекламы, отвлекающей посетителя от изучения товара.

    126. Заметная кнопка CTA. Призыв к действию (кнопка «Купить», «Заказать», «Перезвоните мне») – крупная, выделена контрастным основной гамме сайта цветом и кликабельна, находится на первом экране.

    127. Динамичная кнопка CTA. Опционально: кнопка призыва к действию плавающая, остается всегда на виду при прокрутке страницы пользователем. Кнопка призыва к действию меняет свой цвет и форму при наведении курсора, а также при клике – пользователь видит, что он нажал кнопку.

    128. Дополнительная информация. На странице товара, кроме его характеристик, есть описание – понятное и полезное для покупателя, – отзывы, кнопки социальных сетей (актуально не для всех тематик), рейтинг (оценка) товара, предусмотрена возможность поставить оценку одним кликом.

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

    130. Похожие предложения. Если товар снят с производства или отсутствует, есть ссылки на аналоги этой модели.

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

    132. «Список желаний». Это опциональная возможность.

    133. Сопутствующие товары. Если к товару предусмотрены аксессуары, насадки, комплектующие, которые можно приобрести отдельно, они выводятся в блоке «Сопутствующие товары» или «С этим товаром покупают»

    134. Никакой надуманности! Блоки «Сопутствующие товары» и «Аналогичные товары» заполнены действительно подходящими товарами, а не беспощадным рандомом.

    135. Сигнал о том, что товар уже в корзине. После добавления товара в корзину кнопка «Купить» меняет свой цвет и надпись (например, «Товар уже в корзине» или «Купить еще»), или же рядом с ней появляется информация, что товар добавлен в корзину. Цель – чтобы покупатель видел, что товар уже добавлен в корзину и в то же время имел возможность добавить еще одну или несколько единиц.

    136. Простой переход покупателя к оформлению заказа. Варианты:

    • a. 1 вариант: после добавления товара в корзину появляется всплывающее окно с двумя кнопками (ссылками) выбора – «Перейти к оформлению заказа» и «Продолжить покупки». Это избавит пользователя от необходимости искать корзину.
    • b. 2 вариант: на кнопке «Купить» или рядом с ней после добавления товара в корзину появляется ссылка на оформление заказа.
    • c. 3 вариант: ссылка на оформление заказа появляется на иконке мини-корзины (которая сама по себе достаточно заметна), после того, как в нее добавляется товар.

    Регистрация на сайте, оформление заказа, корзина

    Общие принципы заполнения полей форм регистрации и заказа

    137. Необходимый минимум полей. При регистрации и оформлении заказа количество обязательных полей минимально, в идеале – имя и контакт: email и/или телефон. Каждое дополнительное обязательное поле снабжено пояснением – зачем нам нужна эта информация. Если полей в форме регистрации много, они визуально объединены в группы, группы имеют заголовки.

    138. Заметность обязательных к заполнению полей. Они отмечены или выделены привычным пользователю образом (звездочкой).

    139. Возможность видеть вводимые символы пароля. Особенно это актуально для мобильных устройств, где делается много опечаток, но удобно и на ПК.

    140. Одна колонка полей. Поля во второй колонке пользователи часто не замечают вовсе.

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

    142. Использование подсказок и автозаполнения. Примеры:

    • a. все поля имеют не только наименование, но и понятное описание;
    • b. рядом с полем или прямо в поле (плейсхолдер) приводится пример корректного заполнения;
    • c. если какие-то поля возможно по умолчанию заполнить наиболее часто встречающимся вариантом – заполняем;
    • d. при вводе текста в поле пользователю выдается формирующийся на лету список подходящих значений, предлагается автозаполнение строк;
    • e. поля, которые могут вызвать сложности при заполнении, снабжаются подробными всплывающими подсказками, если уместно – графическими (например, показывается, где именно на карте располагается CVV код, и что делать, если его в этом месте нет).

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

    144. Отсутствие проверки корректности ввода номера телефона. От этого рекомендуется отказаться: ограничение форматов ввода создает неудобства пользователю с нестандартным номером (например, заграничным, в котором есть буквы). Примечание: если номер телефона используется программным обеспечением без предварительной ручной обработки, например, для отправки SMS – используем программное приведение его к требуемому формату и отбраковку номеров нестандартного формата.

    145. Помощь при введении телефона. Предыдущий пункт обязывает нас помочь пользователю ввести номер телефона:

    • a. снабжаем это поле интуитивными подсказками;
    • b. предусматриваем выбор из списка код страны, региона;
    • c. предлагаем альтернативный вариант для пользователей с нестандартными номерами.

    146. Мгновенная проверка. Каждое поле проверяется на правильность заполнения сразу после ввода данных, страница при этом не перезагружается.

    147. Поощрение пользователя. Правильно заполненное поле выделяется, к примеру, зеленым цветом.

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

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

    150. Удобная корректировка информации. В процессе регистрации или оформления заказа посетитель всегда может вернуться на шаг назад и откорректировать данные.

    Регистрация

    151. Убеждение в пользе регистрации. Она дает пользователю какие-то выгоды, и информацию об этом стоит расположить рядом с кнопкой регистрации.

    152. Минимум полей. В качестве логина автоматически используем электронный адрес пользователя, чтобы не плодить сущности, а поле «логин» убираем совсем.

    153. Упрощение регистрации. Дополнительно к стандартной регистрации пользователю предлагается авторизация через социальные сети.

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

    155. «Фоновая» регистрация. Она предлагается автоматически, и для нее клиенту не нужно ничего заполнять дополнительно: используются данные из заказа (ФИО, электронный адрес), которые он будет заполнять в любом случае, а пароль генерируется автоматически.

    156. Подтверждение регистрации. После завершения регистрации посетитель получает письмо с данными регистрации; это касается также «фоновой» регистрации.

    Корзина

    157. Стандартный алгоритм отправки в корзину. При добавлении товара в корзину:

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

    158. Отсутствие лишней информации. В корзине нет отвлекающих элементов:

    • a. каталога товаров, витрины;
    • b. рекламы, анимации;
    • c. новостей или ссылок на статьи блога.

    159. Мгновенная связь с менеджерами. В корзине предусмотрена возможность связаться с менеджерами и получить помощь, если что-то стало непонятно в ходе покупки:

    • a. есть иконка онлайн-консультанта;
    • b. указаны телефоны и контакты менеджеров;
    • c. есть форма для обратного звонка.

    160. Полная информация о собранном заказе. В корзине отображаются:

    • a. достаточно крупное изображение товаров, чтобы пользователь понимал – что это;
    • b. наименование товаров;
    • c. опционально – краткое описание товара;
    • d. количество позиций каждого товара;
    • e. общая сумма товара;
    • f. общая сумма с учетом доставки (опционально).

    161. Кликабельность позиций. Изображение и наименование товара кликабельны и ведут на страницу товара.

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

    163. Удобные операции прямо в корзине.

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

    164.Простая, понятная и наглядная очистка корзины.

    • a. После удаления всех товаров из корзины появляется сообщение, что корзина пуста.
    • b. После завершения оформления товара корзина очищается.

    Оформление заказа

    165. Быстрый доступ к помощи. На всех этапах оформления заказа клиенту явным образом предлагается помощь в оформлении:

    • a. заголовок чата поддержки/онлайн консультанта меняет свой заголовок на, к примеру, «Нужна помощь в оформлении заказа?»;
    • b. на видном месте располагаются контакты менеджера и предложение позвонить/связаться для получения помощи.

    166. Закрепленный список товаров. Список виден на всех этапах оформления заказа.

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

    168. Наглядность. Если заказ оформляется в несколько этапов, пользователь сразу видит, сколько всего этапов заказа предусмотрено, и на каком из них он находится.

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

    170. Подтверждение заказа. После завершения заказа пользователь:

    • a. видит страницу благодарности и пояснениями дальнейших действий с его стороны и со стороны компании;
    • b. получает ссылку на страницу, где он сможет отслеживать состояние заказа, или сразу перенаправляется на нее. Посетитель, данные заказа которого после завершения оформления просто исчезли с сайта, может засомневаться, все ли он правильно сделал, и видят ли его заказ;
    • c. получает информацию о заказе по всем указанным им контактам: SMS на номер телефона, письмо на почту, сообщение в мессенджер. Это удобно, если сейчас клиенту доступен только какой-то один вид связи. Опционально: клиенту предоставляется выбор канала, по которому он хочет получить такое уведомление.

    171. Личный кабинет. Если пользователь зарегистрирован, все заказы, в том числе завершенные, сохраняются в его личном кабинете, и он может их просмотреть в любой момент.

    Оплата

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

    173. Динамичность. Если существует взаимосвязь вариантов оплаты и доставки, варианты оплаты меняются в зависимости от того, какой способ доставки выбрал покупатель. К примеру, если выбран самовывоз, то к чему предлагать вариант оплаты наложенным платежом?

    174. Информативные примечания.

    • a. По каждому варианту оплаты указываются все расходы, которые клиент понесет при оплате этим способом («комиссия – 1 %,») и другие важные примечания («для оплаты необходима карта Сбербанка»).
    • b. Перед процессом оплаты пользователь информируется о том, что сейчас произойдет – к примеру, он будет перенаправлен на страницу платежной системы, где от него потребуется ввести данные платежной карты, а после он сможет вернуться на сайт по ссылке.

    175. Открытие в новой вкладке. Опционально – на текущей странице остается подробная инструкция по оплате, а страница платежной системы открывается в новой вкладке. Таким образом, клиент не остается один на один с, возможно, незнакомой ему платежной системой.

    176. Подтверждение оплаты. Если оплата пошла успешно, посетителю демонстрируется соответствующее сообщение и ссылка для возврата на сайт.

    177. Помощь при ошибке. Если во время оплаты произошла ошибка – указывается возможная причина неудачи и предлагается попробовать еще раз.

    Доставка

    178. Минимум полей. Соблюсти эту старую, но всегда актуальную рекомендацию позволит инструмент Geo IP – он определит местоположение пользователя, а сайт автоматически заполнит соответствующее поле.

    179. Минимум действий пользователя. Данные доставки для зарегистрированного пользователя сохраняются, и при следующей покупке ему не нужно их вводить заново.

    180. Калькулятор расчета стоимости доставки. Если на сайте такого нет, должна быть ссылка на такой калькулятор на сайте перевозчика.

    181. Автоматический расчет суммы доставки. Она включается в общую сумму заказа.

    Тексты на сайте

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

    183. Лаконичные и короткие тексты. Отсутствует «вода», длинные вступления, ненужная информация, перегруженные предложения.

    184. Фокус на целевой аудитории. В тексте используются простые, привычные и понятные для ЦА фразы и слова.

    185. Простота представления чисел. В основном они представлены цифрами, а не словами, для облегчения восприятия текста. Разряды в цифрах отделены пробелами (пример: 1 560 000).

    186. Форматирование текста, облегчающее чтение. Используются следующие приемы:

    • a. подзаголовки разбивают текст на смысловые блоки;
    • b. расстояние между абзацами устанавливается в 1,5–2 раза больше, чем между строками абзаца;
    • c. формируются списки – нумерованные и маркированные;
    • d. выделяются ключевые слова и фразы (ключевых не с точки зрения SEO, а с точки зрения смысла);
    • e. текст чередуется с изображениями, графиками, таблицами;
    • f. отдельные, особо важные моменты выделяются курсивом;
    • g. для выделения части фразы или целого предложения используется жирный шрифт;
    • h. подчеркивание применяется, в основном, только для ссылок;
    • i. все виды выделения текста используются в меру, чтобы текст не казался пестрым;
    • j. текст выравнивается на всех страницах одинаково, предпочтительно – по левому краю;
    • k. строки занимают примерно 70–80 символов;
    • l. больше «воздуха» (пробелов и полей) в тексте увеличивает привлекательность текста и его «понятность», восприятие;
    • m. верхний регистр не используется ни для заголовков, ни для текста – он сложен для восприятия;
    • n. расстояние между подзаголовком и предыдущим абзацем больше, чем между подзаголовком и абзацем сразу за ним.

    Шрифт

    187. Единообразие. На всех страницах используются единообразные шрифты. Для элементов (заголовков и т.д.) одного уровня – одинаковый шрифт.

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

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

    190. Правильный подбор шрифта. При масштабировании страницы в браузере шрифт не теряет свою читабельность.

    Заголовки и подзаголовки

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

    192. Визуальная иерархия заголовков. К примеру, с помощью величины шрифта: заголовок 1 уровня крупнее, чем заголовок 2 уровня, подзаголовок последнего уровня крупнее и/или жирнее, чем основной текст.

    193. Отсутствие точки в заголовках и подзаголовках. Допускаются только вопросительный, восклицательный знак и многоточие.

    Изображения и видео на сайте

    194. Качество изображений. Все изображения на сайте – качественные, четкие, без дефектов и сторонних водяных знаков.

    195. Оправданность использования изображений. Все изображения несут или подтверждают какую-либо информацию, не предназначены «просто для красоты» и не создают впечатления утомляющей пестроты на сайте.

    196. Единообразие. Размеры превью и больших фото товара соответственно одинаковы для всех страниц товара; размеры превью-фото товара в каталоге одинаковы для всех каталогов/категорий товара.

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

    198. Возможность настроить показ видео. Сюда относится масштабирование видео, возможность отрегулировать или совсем отключить звук, поставить видео на паузу.

    Блог сайта

    199. Разбивка статей на тематические категории.

    200. Простановка тематических тегов. Статьи блога имеют теги, благодаря которым посетитель может найти еще материалы по этой теме.

    201. Блок со ссылками на статьи. На страницы товаров и товарных категорий добавлены ссылки на полезные материалы, которые помогут клиенту с выбором товара.

    202. Блок со ссылками на товары. Обратный случай: если по ходу статьи говорится о товаре или услуге, которая есть на сайте – добавлена ссылка на страницу этого товара/услуги. В этом случае клиенту не придется тратить время на ее самостоятельный поиск.

    203. Использование рубрики «Читайте также». Если по ходу статьи вскользь затрагиваются другие темы – дана ссылка на статью блога, где эта тема освещена более подробно.

    Мастер Йода рекомендует:  Поиск вместо алгоритма – живые люди

    Постоянное совершенствование юзабилити

    Большинство пунктов этого чек листа универсальны. Но часть советов могут быть неприменимы, или частично применимы – из-за особенностей тематики конкретного сайта и потребностей вашей целевой аудитории. Поэтому неотъемлемой частью работы над юзабилити сайта является его постоянное совершенствование.

    Итак, несколько последних рекомендаций.

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

    Разработка нового веб-сайта: 10 позиций в ваш чек-лист

    Как не ошибиться и не упустить важные детали в процессе создания веб-сайта или приложения?

    Начинаем новое дело, планируем пивот или создаем новую ветку успешного растущего бизнеса. В любом случае, в современных условиях веб-сайт, как “окно” в глобальную сеть, будет неотъемлемой частью плана стратегического развития.


    Создавая новое, мы не ограничиваемся рамками уже существующего продукта (как, например, в случае с редизайном). У нас есть возможность начать с чистого листа и создать, не побоимся этого слова, идеальный продукт. Либо продукт, близкий к идеальному.

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

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

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

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

    • архитектор решений;
    • веб-дизайнер / UX/UI дизайнер / дизайнер — продуктолог;
    • верстальщик;
    • программист;
    • тестировщик;
    • SEO специалист;
    • PM (Project Manager — лицо, отвечающее за организацию работы команды).

    Чем масштабнее проект, и чем более сжатые сроки установлены, тем больше специалистов привлекается к процессу.

    Для всех этих специалистов нужно обеспечить соответствующие условия:

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

    Непросто? Но выполнимо.

    Нужен только грамотный подход и современные методы и инструменты.

    Самым простым и эффективным инструментом для контроля и организации работ (причем в любой сфере) является чек-лист.

    Чек-лист — это перечень пунктов/вопросов/позиций, на основании которых проверяется правильно ли выполнена работа/задача/процедура.

    • упорядочить и привести к единой системе действия;
    • наглядно отобразить процесс и статус;
    • отсеять ненужные позиции;
    • закрепить проверенный на практике процесс и предупредить повторные ошибки.

    Чек-листы давно подтвердили свою эффективность на практике:

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

    В сети предлагаются шаблоны чек-листов и даже инструменты для их создания на все случаи жизни.

    Мы также используем этот удобный метод в работе (и общие по проекту, и отдельные чек-листы у каждого исполнителя) для того, чтобы:

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

    У нас уже выработан свой чек-лист, отражающий базовый процесс разработки веб-сайтов и приложений, который:

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

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

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

    1. ПОСТАНОВКА ЦЕЛИ

    Начните с определения целей и формулировки конкретных задач.

    На самом деле, это очень непросто — учесть изначально все тонкости будущего процесса, особенно если он вам совершенно незнаком.

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

    Но решение принимаете вы:

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

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

    2. ПЕРВАЯ КОММУНИКАЦИЯ

    В процессе выбора команды для работы над вашим проектом назначается время первого созвона/встречи.

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

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

    Окончательный результат работы во многом зависит именно от вашего выбора на данном этапе. Поэтому будьте максимально внимательны к информации о команде и всему связанному с ней.

    Обратите внимание на:

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

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

    Хотите достичь успешных результатов? Свяжитесь с нами прямо сейчас.

    3. ПОДГОТОВКА К РАЗРАБОТКЕ

    Когда вы определились с выбором исполнителя, начинается непосредственно процесс подготовки к разработке (predevelopment).

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

    В ходе работы мы сформировали свой predevelopment чек-лист и предлагаем его вам в помощь:

    • Какие бизнес цели преследует проект?
    • На основании каких показателей измеряется успешность проекта?
    • Что случится, если эти бизнес цели не будут достигнуты в срок?
    • Насколько успех или провал этого проекта может повлиять на финансовое положение (репутацию компании на рынке и т.д.)?
    • Хотите ли использовать готовые решения для реализации целей проекта?
    • Связан ли это проект с другими вашими проектами? Если да, то как?
    • Существуют ли какие-то ограничения для данного проекта (сроки, бюджет, технологии, страны использования и т.д.)?
    • Собрана ли команда для работы над проектом с вашей стороны? Кто в нее входит?
    • Кто принимает решения (подписание договорной документации, бюджет, приемка работ, переход к новой фазе работ и т.д.)?
    • Существуют ли у вас внутренние процедуры, которых команда должна придерживаться?
    • Существуют ли подробные требования по проекту (отдельно по дизайну, в области SEO, по распределению ролей и т.д.)? В каком виде вам удобно их оформить?
    • Потребуется ли в дальнейшем разработка мобильного приложения?
    • Имеются ли требования к технологиям?

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

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

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

    ФУНКЦИОНАЛЬНАЯ КАРТА (MIND MAP)

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

    Получив готовую карту, вы сопоставляете ее со своим видением проекта и при необходимости вносите корректировки.

    Не бойтесь задавать вопросы. Чем больше обсуждается на начальном этапе, тем проще будет работать дальше и тем ниже вероятность ошибок и переделок

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

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

    ПРОТОТИП ИНТЕРФЕЙСА (WIREFRAME)

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

    Будут ли разработаны прототипы интерфейса или нет и на каком именно этапе (до подписания контракта или после) — это зависит от того, что именно будет оптимальным для вашего проекта.

    После того, как с вами согласована оценка и объем функционала, можно переходить к этапу подписания контракта.

    4. ПОДПИСАНИЕ КОНТРАКТА

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

    Но есть моменты, на которые рекомендуется обратить особое внимание:

    • закрепить сроки и основные требования в приложении к договору;
    • заранее оговорить, за кем остаются права на продукт;
    • оговорить подписание NDA (либо NDA может быть частью основного договора);
    • зафиксировать процедуру передачи работ, периодичность и форму оплаты, а также штрафные санкции.

    В остальном, руководствуйтесь общепринятыми практиками, к которым вы привыкли.

    5. ДИЗАЙН

    Есть несколько вариантов работы над дизайном:

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

    В зависимости от ситуации действия по разработке, согласованию, координации дизайна вписываются в общий план работ над проектом.

    Более подробно о том, что происходит в мастерской дизайнера, вы можете прочитать здесь .

    6. РАЗРАБОТКА

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

    ПЕРЕДАЧА В РАЗРАБОТКУ

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

    ДЕТАЛЬНАЯ СХЕМА РАБОТ (ROADMAP)

    PM представляет вам детальный график всех запланированных работ (roadmap).

    В таком документе указывается:

    • разбивка проекта на фазы (то есть этапы проекта, в рамках которых выполняется определенный объем работ);
    • разбивка фаз на спринты (короткие промежутки времени, около недели);
    • дата начала работ;
    • количество разработчиков;
    • количество человеко-часов;
    • стоимость;
    • статус работ (по мере выполнения статус меняется: запланировано, в процессе, готово к проверке, проверено, выполнено).

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

    ОТСЛЕЖИВАНИЕ ВЫПОЛНЕНИЯ ЗАДАЧ

    Параллельно настраиваются и конфигурируются инструменты для отслеживания выполнения задач (мы используем Trello ). На основании графика работ PM распределяет задачи среди исполнителей, переносит их в систему и осуществляет постоянный контроль их исполнения.

    Сам процесс написания и проверки кода разворачивается в трех окружениях:

    • development (разработчик пишет код и предварительно проверяет его работу);
    • staging (здесь клиент может посмотреть уже протестированные блоки);
    • production (как только принято решение о том, что функционал готов к работе, настраивается сервер, доменное имя на нем, и приложение заливается на сервер production, где запускается. В некоторых случаях предоставляется не глобальный доступ для всех пользователей, а только для определенной группы лиц — с целью проверить их реакцию и собрать результаты, при необходимости внести коррективы).

    По мере готовности после фазы production подключаются различные сервисы, которые позволяют оценить показатели работы созданного продукта:

    • New Relic — сервис, который позволяет оценивать технологическую составляющую — performance (производительность);
    • сервисы типа Google Analytics , которые позволяют отслеживать поведение пользователей на сайте, анализировать конверсию.

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

    8. ПОИСКОВАЯ ОПТИМИЗАЦИЯ

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

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

    • структуре страниц;
    • правильно оформленным url;
    • наличию ключевых слов;
    • корректной sitemap;
    • чистоте кода.

    Когда проект переходит в среду production, проверяется скорость загрузки страниц, индексы. После таких тестов при необходимости выполняется перенастройка.

    Почему это важно?

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

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

    9. ЗАВЕРШЕНИЕ ПРОЕКТА

    Завершение проекта — еще одна серьезная веха, к которой следует подготовиться обеим сторонам, участвующим в процессе:

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

    10. ПОДДЕРЖКА

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

    • заключение SLA ( англ . service license agreement). В рамках этого соглашения команда берет на себя техническую поддержку серверов заказчика с целью своевременного устранения возможных ошибок или сбоев.

    Таким образом, у вас всегда будут под рукой “помощники”. Нужны ли вам такие услуги или нет — решайте сами.

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

    А сейчас вас ждет традиционный бонус от Umbrella — мы всегда даем нашим клиентам больше, чем обещаем.

    Еще один, одиннадцатый пункт в ваш чек-лист.

    11. ПРОДУМЫВАНИЕ МОБИЛЬНОЙ ВЕРСИИ

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

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

    18 правил идеального psd-макета — полезный чек-лист для дизайнеров

    Общий принцип — Не делай брак.
    Не бери брак. Не передавай брак.
    Тойота.

    Мы редко берём в разработку проекты с уже реализованным дизайном, но такое случается. Когда макеты создаются внутри студии, на любом проблемном этапе вёрстки разработчик может уточнить у менеджера проекта или самого дизайнера, что имелось ввиду и как это должно выглядеть. Но в ситуации, когда заказчик уже кому-то отдал деньги за макеты и после пришёл к тебе за разработкой, так не получится: вести коммуникацию между дизайнером и разработчиком становится невозможным, а исправлять огрехи в макетах некому. Из этой статьи вы узнаете, где лажают горе-дизайнеры и что стоит проверить перед тем, как отдавать макеты на вёрстку.

    «Почти» по сетке

    Сетка призвана упрощать вёрстку и определять местоположение ключевых элементов. В некоторых случаях дизайнеры намеренно отходят от 12-колоночного грида для создания неординарного дизайна.

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

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

    Сергей, разработчик в студии Сибирикс:
    «Наверное, самая главная проблема в том, что далеко не все дизайнеры знают хотя бы основы html и css, поэтому и макеты делаются без оглядки на вёрстку. Например, частенько встречается, когда на адаптиве блоки перекомпануются таким образом, что без дублирования контента для мобильной и десктопной версии не обойтись — это замедляет работу над вёрсткой».

    Владимир, руководитель студии:
    «Есть миллион случаев, когда программист говорит «это невозможно», а потом берет и делает, как нужно. Значит-таки возможно. И большинство ограничений, неудобных для программиста, но интересных с точки зрения дизайна — искусственные. Чёткую границу провести невозможно. Работает только итерационное обсуждение и попытки реализовать задуманное. Пробовать, смотреть, обсуждать, делать, экспериментировать. Иначе всё скатится к унылым шаблонам. Для части проектов это ОК. А для части — нет. Делаете ли вы в духе конвейера или делаете фестивальные работы? Мы писали про это подробнее в бегунке креативности».

    Копипаст слоёв

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

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

    Непонятные отступы

    В идеальном макете все отступы и размеры у блоков должны быть унифицированы. Там на один пиксель больше, тут — на один меньше, а верстальщику потом сидеть и выбирать, как правильно. Возможно, это не слишком повлияет на внешний вид страницы, хотя клиенты бывают разные: кому-то каждый лишний пиксель бросается в глаза. А возможно, тестировщик наложит готовую верстку на макет-исходник через плагин Pixel Perfect и напишет список из миллиона багов, сочтя такие несоответствия ошибкой. Проследите, чтобы отступы контентной области от шапки и подвала были одинаковыми на всех ваших страницах.

    Объекты тоже таят скрытые опасности — иногда при создании форм в Фотошопе, даже если дизайнер использовал сетку, случаются вот такие погрешности:

    Верстальщик вряд ли станет учитывать эти тонкости и, скорее всего, обрежет размеры объекта, чтобы тот точно вписался в сетку. Поэтому правило — ВСЕ объекты должны иметь целочисленные размеры, иначе результат может очень отличаться от первоначального макета.

    Цвета «на глаз»

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

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

    Негласное правило не рекомендует использовать чёрный под номером #000000 — он слишком контрастный на фоне белого. Глядите на разницу:

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

    Растрированные элементы

    Текст

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

    Тени и градиенты

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

    Если поверх изображения накладывается темный фон (например, ховер), его нельзя склеивать с самим изображением — это должен быть отдельный полупрозрачный либо градиентный слой, чтобы можно было заглянуть в его параметры.

    Эффекты наложения

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

    Эффекты наложения в разных браузерах

    Проблемы со шрифтом

    Дробные размеры

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

    Множество шрифтов

    Андрей, разработчик:
    «Сейчас большинство браузеров отошли от шрифтов в форматах TTF, OTF — и если разработчик будет использовать их по-старинке, не везде они будут отображаться корректно. Мы в студии давно перешли на формат WOFF или WOFF2, чтобы не было проблем. Перевести шрифт в него можно здесь или здесь».

    Использование нестандартных шрифтов

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

    Корявая типографика

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

    Евгений, разработчик:
    «По возможности не стоит использовать сложные эффекты на типовых текстовых страницах, если предполагается, что заказчик сам сможет их менять из админ-панели. Скорее всего, у него получится «обернуть» такие элементы в div. Иногда это решается сниппетами или иными приемами, но всё равно вызывает сложность при наполнении контентом».

    Обязательно стоит показать на макете оформление параграфа, абзаца, заголовков 1-4 уровня (h1, h2, h3, h4), маркированных и нумерованных списков. А ещё лучше собрать всё это в отдельный документ — гайдлайн или UI-kit. Сюда же можно добавить поведение ссылок (активная, при наведении, посещенная).

    Непонятная анимация

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

    Проверьте, что объекты, участвующие в анимациях и интерактивных взаимодействиях, разбиты послойно. Например: вид при наведении на объект — один слой, вид при клике по нему — другой, вид в статике — третий. Те же правила работают и для баннеров.

    Желательно пометить слои с анимациями и интерактивами цветами и сопроводить их комментариями. Также очень желательно в комментариях прописать, как именно это должно работать и привести примеры.


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

    Иконки в PNG

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

    Но бывает, что дизайнеры используют иконки в формате PNG — в нём при масштабировании на экранах с большим разрешением (а сейчас даже на мобилках плотность пикселей бешеная) края изображения расплываются. Отсюда правило: все иконки должны быть в формате SVG — так они остаются чёткими, каким бы ни был их размер.

    Некоторые верстальщики предпочитают, чтобы иконки были собраны в одном месте — в отдельной папке — и чтобы их названия были идентичны слоям в макете. Другим удобнее, чтобы SVG-изображения были встроены в основной файл, поскольку так гораздо проще и быстрее вырезать svg из макета, чем искать нужную иконку в другой папке.

    Чек-лист

    В творческом порыве сложно уследить за тем, чтобы всё было сделано правильно. Там слой скопировался и остался без названия, там объект немножко вылез за край колонки, тут шрифт случайно «зажирнился» встроенными фотошопными настройками вместо выбора нужного начертания — с кем не бывает? А с тем, у кого есть наш чек-лист!

    Юзабилити коммерческого сайта : чек-лист самопроверки в 2020 году

    В условиях жесткой конкуренции в е-commerce главным критерием успеха стали вовсе не цены — комфорт.

    Пользователи коммерческих сайтов особо придирчивы к этому показателю.

    Если человек сочтет Ваш сайт неудобным — он попросту уйдет.

    В чем секрет высокой конверсии древних сайтов, оформление которых не менялось с 2010-го?

    Как обновленный «модный» дизайн убивает продажи?

    Все ответы — в юзабилити, о чем мы подробно расскажем далее.

    СОДЕРЖАНИЕ

    Надоел устаревший сайт? Скорее всего, у Вас уже есть свое видение стиля его интерфейса.

    Но не спешите. Самое время — проверить, насколько удобный для посетителей нынешний вариант лендинга.

    Какие его элементы работают, а какие — раздражают.

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

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

    Узнайте, какие недочеты юзабилити сайта могут лишить Вас части прибыли, и избавьтесь от них.

    Хорошо бы начать с общих ошибок юзабилити, над исправлением которых уже работают Ваши конкуренты:

    Что такое юзабилити сайта

    Из чего состоит понятие “usability”?

    О любви поисковиков к веб-ресурсам с интуитивно-понятным дизайном читайте далее.

    Web usability (юзабилити) — это параметр удобства работы с интерфейсом сайта, простоты его структуры, дизайна и контента.

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

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

    Не стоит сводить суть юзабилити сайта только к навигации.

    Это понятие намного шире и помимо этого включает в себя:

    • структуру сайта;
    • скорость загрузки страниц;
    • дизайн (цвет, шрифт, анимация);
    • практичность контента (описания карточек, размер текста и др.).

    В чем измеряется юзабилити сайта

    Это не абстрактная характеристика, ее можно посчитать количеством кликов и времени, затраченного посетителем на решение своего вопроса.

    Чем это число ниже, тем лучше. Согласно международным стандартам эта величина называется «стоимость взаимодействия».

    Почему удобный интерфейс сайта это так важно

    • Интуитивно понятный дизайн — это высокая конверсия и продажи. Все просто: чем легче найти товар, тем больше заявок на его покупку Вы получите.
    • Хорошее юзабилити оценят не только клиенты, но и поисковые системы. По результатам оценки поведенческих факторов аудитории сайта (отказы, время на сайте, глубина просмотра и др.) они повышают или понижают позиции его ранжирования в поисковой выдаче.

    Теоретические основы. Принципы юзабилити

    Или обновить дизайн или вовсе создать новый лендинг?

    Прежде чем начать, учтите главное правило дизайна коммерческих лендингов:

    если пользователь не найдет товар, он не сможет его купить.

    Как мудрый маркетолог Вы избежите этих проблем еще на этапе создания или проверки макета сайта.

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

    • Простота использования. Оцените, насколько легко новому пользователю будет ориентироваться на сайте. Особое внимание уделите отвлекающим факторам: анимации, баннерам, всплывающим окнам. Не раздражают ли они?
    • Эффективность. Чаще всего это касается меню навигации. Как быстро посетитель выполнит нужное ему действие: закажет товар, доберется к статье или получит консультацию. Идеальное «расстояние» — три-четыре клика.
    • Запоминаемость. Или насколько сайт соответствует стандартам структуры онлайн-магазина, блога и т.д. Исходя из этого, даже через некоторое время посетитель, который вернулся на сайт, сможет легко по нему ориентироваться.
    • Удовлетворенность. Довольно субъективный параметр оценки, ибо состоит не только из общего впечатления пользователя от качества контента сайта, его навигации, но и внешнего вида. Последнее уже дело вкуса.
    • Ошибки. А именно — число ошибок и неправильных действий пользователя при навигации по сайту и возможность их отмены. Точного числа нет, но логично, что чем оно больше, тем выше шансы упустить клиента.

    Да, этого мало для полноценной подготовки идеального сайта.

    Поэтому далее в деталях покажем и расскажем о плохом и хорошем юзабилити каждого элемента интерфейса сайта.

    Строение шапки сайта

    Почему так важно придерживаться их традиционного расположения?

    И чем грозит пренебрежение общими правилами?

    Как плохо оформленная шапка запутывает посетителя и лишает Вас продаж — читайте далее.

    Можно много говорить о ее дизайне, но главная задача хедера коммерческого сайта — навигация.

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

    Таким образом, логотип и меню — главные элементы этой части лендинга.

    Дополняют их строка поиска, смена языка, СТА-кнопки и др.

    Путем проб и ошибок гуру UX-дизайна пришли к выводу, что лучше:

    • Делать шапку фиксированной. Как вариант, позаботиться о том, чтобы она автоматически показывалась при наведении на верхнюю часть страницы. Все для того, чтобы меню сайта всегда было под рукой пользователя.
    • Придерживаться среднего размера в 40 × 70 px., максимум 250 px.

    Грамотно составленная шапка сайта способна повысить его конверсию.

    Мы изучили архитектуру лучших магазинов и определили структуру идеального хедера 2020 года.

    Проверьте, насколько элементы Вашего веб-сайта соответствуют этим требованиям.

    Логотип

    Обычно он занимает почетное место в верхнем левом углу лендинга.

    Его задача — узнаваемость бренда. Высота — не более 40-60 px.

    • На главной странице логотип должен быть не кликабельным, на остальных — возвращать на главную при нажатии.
    • Иногда возле лого можно встретить краткое описание компании:

    Однако все чаще эту функцию выполняет следующий блок:

    Но дублировать информацию не стоит:

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

    • Их должно быть не более 7, именно столько единиц может удержать обычный человек в краткосрочной памяти. И это не мы придумали.
    • Лучше всего работает горизонтальная форма меню.
    • Выпадающий список уместен, если Ваш товар разбит по категориям.
    • Вертикальное меню используют для навигации по продукции/услугам сайта. Оно выносится отдельно и располагается слева.
    • «Гамбургер» ☰ лучше всего работает в мобильной версии. В десктопной — это лишний клик, который отдаляет пользователя от покупки.

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

    Тем не менее «гамбургер» прекрасно работает в качестве дополнения для второстепенных элементов, которые не поместились в основное меню:

    • Называя элементы списка меню, лучше использовать описание, функцию продукта, а не его название. Например, не «Email Verifier», а «программа для проверки email». Как не нужно делать:

    Подобрать часто употребляемые слова поможет Google Keyword Planner.

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

    Контакты

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

    Корзина

    Кнопка со ссылкой на нее должна всегда быть перед глазами клиента.

    Поэтому на коммерческих сайтах ее также размещают в правой части шапки.

    Лучше всего сделать ее большой и заметной.

    Личный кабинет

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

    Для этого в правой части хедера размещают соответствующую ссылку «Вход», «Регистрация» и т.д.

    Плашки акции

    Элемент, от которого стоит отказаться в этой части сайта.

    Предложение покупки в шапке понизит ее юзабилити.

    Это раздражает и отвлекает посетителя от основной функции хедера ー навигации.

    К примеру, как делать не надо:

    Строка поиска

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

    • Время ー деньги: чем быстрее посетитель найдет товар, тем выше шансы, что он его купит. Ускорьте процесс ввода запроса, показав список релевантных результатов.
    • Не бросайте пользователя, если по его запросу не нашлось результатов. Предложите расширить поиск, укажите дополнительные фильтры, категории, которые помогут ему определиться с товаром.

    Первый экран сайта

    Тот самый фантик, оценивая который посетитель решает, кушать ли ему эту конфету.

    Мастер Йода рекомендует:  Работа по набору текста на дому – мифы и реальность

    Именно главный экран отвечает на вопрос «Куда я попал».

    Будь то магазин, сервис или агентство, предназначение этого элемента ─ завлечь клиента или продать.

    Соответственно, варьируется и его наполнение.

    Посетители коммерческих сайтов привыкли видеть следующую структуру первого блока:

    1. Заголовок о компании, продукте/услуге + кнопка «Узнать больше».
    1. Описание акции, продукта/услуги + призыв купить.

    Именно здесь акцентируют внимание на уникальном торговом предложении компании.

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

    Юзабилити контента

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

    Текст, изображения, видео, а особенно анимация.

    Узнаем подробнее о том, как должен работать хороший контент.

    • Текст. Оптимальный размер основного текста в десктопной версии лендинга должен быть 12-16 px. Хорошую читабельность обеспечит контраст оттенка шрифта и фона.

    Цифры лучше писать знаками, не словами.

    При этом старайтесь разделять большие числа пробелами или запятыми.

    Так человеку будет проще их воспринимать.

    Полотна текста актуальны в художественной литературе, но не на продающем лендинге.

    Поэтому используйте списки, размером отображайте визуальную иерархию текста, а не как это сделали в описании велосипеда:

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

    Следите за размером изображений, «тяжелые» элементы могут увеличить время загрузки сайта.

    Лучше всего использовать файлы формата JPEG, так как они самые «легкие».

    Фон и цвета картинок для сайта не должны идти врозь с общей концепцией дизайна.

    • Анимация. Любимица дизайнеров, которые иногда ею злоупотребляют. На практике это превращает сайт в парк развлечений, в котором все одновременно движется, мигает и отвлекает от конечной цели.

    Секрет в том, чтобы все происходило поочередно.

    На коммерческих сайтах используют анимацию для:

    1. Демонстрации товара
    1. Привлечения внимания. Подсветка кнопок, текста, появление элементов, блоков сайта.

    Идеальная скорость анимации элементов сайта в мобильной версии 0,2-0,3 сек., в десктопной версии — 0,5 сек.

    Длительность движения однотипного контента, тех же карточек товара, должна составлять примерно 0,25 сек.

    1. Развлечения, узнаваемости. Это может быть милый элемент блока лендинга.

    Или единая концепция дизайна, которая объединяет весь сайт и выделяет Вас среди конкурентов.

    В обоих случаях это оставляет приятное впечатление и повышает лояльность потенциального клиента.

    ВАЖНО: Не используйте технологию flash для анимации, ибо она работает далеко не у всех и вызывает дополнительное окно уведомления при входе на сайт.

    • Видео. Его продолжительность должна быть не более двух минут. Этого времени вполне достаточно, чтобы у посетителя сформировалось мнение о товаре.


    Вставляя ссылку с YouTube, Вы рискуете потерять клиента.

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

    Включать видео автоматически да еще и со звуком — «лучшая» из пыток, которой мучают посетителей.

    Не делайте так. Позаботьтесь о том, чтобы видео запускалось по клику и его можно было поставить на паузу.

    Всплывающие окна

    Мы вкратце расскажем об основных правилах оформления и функционирования этих элементов.

    О том, как создать идеальное всплывающее окно — далее.

    Еще один метод пытки посетителей сайта.

    Этот элемент прекрасно конвертит, приносит лиды и занимает первое место в топе рекламы, которую ненавидят.

    Что уж говорить, если сам Google разработал блокировщик назойливой рекламы для браузера Chrome.

    Крайне внимательно отнеситесь к разработке идеи этого элемента, чтобы не повторить этот «шедевр»:

    Конечно же это шутка, но увы, она вполне актуальна.

    В оформлении всплывающих окон существует 3 главных «нельзя»:

    • делать поп-апы с таймером обратного отсчета без возможности его немедленного закрытия;
    • фиксировать элемент внизу страницы так, чтобы он занимал более 30% экрана;
    • запускать агрессивные эффекты, например, мигание.

    Помимо раздражения клиентов, это может привлечь внимание Google.

    Система оповестит Вас о проблеме и даст время на ее исправление, после чего заблокирует этот элемент.

    Методом проб и ошибок UX-дизайнеры и маркетологи мира искали решение дилеммы поп-апов.

    Вот к чему они пришли:

    • Время и частота показа. 1 пользователь — 1 показ элемента через 10-15 секунд после входа на страницу.
    • Количество. Оптимальный вариант 3 поп-апа: приветствие — на главной, подписка — на блоге, скроллинговая — любая страница сайта, если на ней нет другого окна.
    • Обратная связь. Не молчите, напишите небольшой текст-реакцию на действие человека:

    Юзабилити заказа товара

    Каждый элемент презентации продукта формирует впечатление о нем.

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

    Страница товара

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

    Удобство оформления страницы услуг

    Дизайн лендинга онлайн-сервисов и агентств имеет особую структуру.

    Максимальную конверсию имеют блоки, которые состоят из:

    • описания и иллюстрации услуги;
    • ее преимуществ;
    • примеров работ, портфолио;
    • отзывов других покупателей;
    • формы заявки на покупку.

    Основные принципы юзабилити «Корзины» интернет-магазинов

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

    Цена = стоимость единицы х количество + варианты доставки.

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

    Юзабилити подвала сайта

    Предназначен показать дальнейшие пути изучения сайта.

    А еще он может рассказать о компании и призвать к действию.

    О том, что в нем должно быть, далее.

    Правильная структура этого элемента способна не только удержать посетителя, но и превратить его в клиента.

    • Иконки социальных сетей. Они могут быть и в боковом меню, но лучше всего оставить их на конец пути клиента.

    Многие пренебрегают этим советом и размещают их в шапке.

    Тем самым Вы предлагаете пользователю уйти с порога Вашего магазина в черную дыру бесконечной ленты новостей.

    Учтите, оттуда мало кто возвращается.

    • Контакты. Это может быть вариативный список телефонов, e-mail, адрес компании или ее размещение на карте. К примеру, как это сделали мы:
    • Кнопка «наверх». Если длина Вашего сайта — более трех скроллов мышкой, то человеку будет довольно сложно вернуться к шапке сайта. Поэтому он будет благодарен за возможность мгновенно попасть туда в один клик.
    • Карта сайта. Аналогично меню этот путеводитель показывает полный список всех страниц и категорий Вашего сайта. Или наиболее популярных из них.
    • Ссылки на документацию. Политика конфиденциальности, куки, антиспам и другая юридически важная информация.

    Тестирование юзабилити

    Важно суметь быстро оценить, насколько удобен Ваш сайт для покупателя.

    Сделать это можно как с помощью привлеченных профессионалов, так и самостоятельно.

    Оценка степени удобства ресурса для посетителей поможет Вам эффективно:

    • создать коммерческий сайт;
    • увеличить конверсию уже существующего лендинга;
    • добавить новый функционал.

    Существует несколько способов понять, насколько хорошо работает Ваш сайт:

    • Анализ статистики посещения сайта
    • в Google Analytics ➝ вкладка «Аудитория» ➝ «Обзор»
    • в Яндекс.Метрике ➝ вкладка «Отчеты» ➝ «Стандартные отчеты» ➝ «Посетители»

    Если контент сайта не соответствует ожиданиям посетителя, это отразится в графе «отказы».

    Показатель выше 20% говорит о том, что Ваш сайт далек от идеала и пора заняться анализом удобства работы с его элементами.

    • Глубина просмотра. Чем больше страниц посетит пользователь за один визит, тем лучше.
    • Время на странице. Косвенный показатель заинтересованности клиента товаром. Человек может провести на сайте 12 минут, читая описания, или открыть страницу, уйти на соседнюю вкладку и вернуться назад. Учитывайте этот показатель только в сочетании с другими характеристиками.
      Если Вы заметили явные проблемы, стоит получить отзыв реальных людей о юзабилити Вашего сайта.
    • Узнать мнение аудитории. Только не подчиненных. Близкие люди вряд ли объективно оценят удобство сайта. Для этой цели используют онлайн-опросы, интервью, создают фокус-группу или привлекают тестировщиков.
    • Провести тестирование юзабилити

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

    Чтобы помочь Вам сориентироваться в критериях, мы создали подробный чек-лист проверки юзабилити лендинга:

    Оценить техническую составляющую лендинга можно с помощью следующих инструментов:

    • Сервисы, в которых можно напрямую общаться с группой людей, которые будут оценивать сайт:
      1. AskUsers.
      2. Five seconds test.
    • Проверка скорости загрузки страниц — Google PageSpeed Insights.
    • Анализ поведения посетителей сайта:
      1. Clixpy — предоставляет детальный отчет по движениям мышки, кликам, прокрутке сайта и вводу данных пользователем.
      2. ClickTale — сервис для анализа поведения пользователя на сайте по видеозаписи его действий.

    Последний вариант — обратиться к профессионалам, специализированным агентствам.

    Итоги: как быстро убедиться, что Ваш сайт удобный

    1. Проверьте скорость загрузки. Она должна быть не более 3 секунд.
    2. Убедитесь, что с любой страницы Вашего сайта можно сделать покупку или заказ продукта в 3-4 клика. Максимум в 12.
    3. Просмотрите оформление контента (цвета, шрифты, кнопки, картинки, анимация лендинга). Он должен быть читабельным и фокусировать внимание на главном предложении. Чем проще, тем лучше.
    4. Проследите за классическим расположением ключевых элементов интерфейса: форм заказа, кнопок, контактов, фильтров, меню и т.д. Привычный дизайн сократит процесс изучения продукта и ускорит момент покупки.

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

    И его запомнят как впечатляющий, но непонятный.

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

    Да, лендинг — лицо компании, но прежде всего — это инструмент заработка.

    Соответственно, он должен приносить продажи, а значит быть удобным, и только потом красивым.

    Чеклист: 217 пунктов для отличного интернет-магазина

    Каким должен быть современный интернет-магазин? Как удержать в голове все необходимые функции? Для проекта “E-cats”, который направлен на быструю разработку интернет-магазинов, мы собрали основные элементы главного инструмента онлайн-продаж в чеклист и рады поделиться им с читателями vc.ru.

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

    Чтобы облегчить жизнь себе и заказчикам, мы собрали все важные элементы интернет-магазина в один список, которым теперь можете пользоваться и вы.

    Сначала поговорим о разделах и структуре.

    Обязательный минимум выглядит так:

    • главная
    • корзина
    • личный кабинет пользователя
    • контакты и адреса магазинов или пунктов выдачи
    • о компании
    • каталог
    • оплата и доставка
    • гарантии и возврат

    В зависимости от специфики ниши вам могут пригодиться следующие разделы:

    • отзывы (не путать с отзывами в карточке товара)
    • команда
    • новости, блог
    • FAQ (вопрос-ответ)
    • сертификаты, лицензии
    • публикации
    • видео/фото
    • клиенты/партнеры
    • кредит/лизинг
    • награды
    • вакансии
    • проекты/кейсы
    • помощь

    У хорошего каталога почти всегда есть:

    • фильтры (цена, производитель, важные характеристики товара, например, размер и цвет, возможность выбрать товары со скидкой)
    • умный фильтр с ссылками для seo или “часто ищут”
    • сортировка (по рейтингу, дате поступления, цене, алфавиту, размеру скидки)
    • быстрый просмотр карточек товаров
    • возможность добавить в избранное
    • добавление товара к сравнению
    • возможность формировать отдельные страницы для брендов
    • возможность показывать товар в нескольких категориях

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

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

    А теперь давайте посмотрим, какие блоки можно разместить в общих элементах:

    • телефон (желательно располагать в шапке и футере)
    • поиск по сайту
    • кнопки/виджеты социальных сетей
    • форма заказа обратного звонка
    • выбор города
    • адреса и режимы работы магазинов/складов
    • ссылки на рейтинги на сторонних сервисах
    • способы оплаты
    • кнопка “наверх” для длинных страниц
    • виджет онлайн-консультанта
    • заметная ссылка на корзину и личный кабинет (желательно располагать в шапке)
    • дублирование основных пунктов навигации в футере; для интернет-магазинов это, как правило, разделы “каталог”, “оплата и доставка” и “ гарантии и возврат”

    Что можно разместить на главной странице?

    • рекламные баннеры со специальными предложениями
    • почему мы/инфографика преимуществ
    • ссылки на популярные разделы каталога
    • товары из категорий “Популярные”/”Со скидкой” и т.д.
    • новости/статьи
    • бренды/партнеры
    • видео
    • текст о компании для SEO-продвижения
    • “живой” блок соц. сетей: посты из Instagram, последние видео на Youtube, виджеты ВК и т.д.

    Что может включать в себя карточка товара помимо цены, наименования и артикула?

    • цена по акции + зачеркнутая старая цена
    • кнопки “в корзину” и “заказать в 1 клик”
    • крупное изображение товара
    • несколько дополнительных фото товара
    • лупа для увеличения фотографии
    • видеообзор
    • кнопка “360”, чтобы посмотреть на товар со всех сторон
    • вывод кратких характеристик в превью карточки
    • выбор цвета/размера/комплектации/других важных характеристик
    • связь фото с комплектацией (на фото отображается товар того цвета, который выбран в характеристиках)
    • таблица размеров или другая важная информация, помогающая сделать выбор
    • рейтинг+отзывы о товарах
    • лейблы у карточек товаров (например, размер скидки или надпись “акция”)
    • информер наличия товара (в наличии/нет в наличии, остаток числом, много/мало/достаточно)
    • отображение наличия и количества на складах для каждого товара
    • возможность предзаказа товара, которого нет в наличии
    • водяной знак на фото
    • иконки преимуществ (например, бесплатная доставка)
    • блок “нашли дешевле?”
    • подробная информация о товаре на вкладках “описание”, “характеристики”, “отзывы”
    • возможность поделиться ссылкой на товар в социальных сетях и мессенджерах
    • блок “ранее вы смотрели”
    • аналоги “похожие товары”, “рекомендуем”
    • комплекты “с этим товаром покупают”
    • возможность прикреплять файлы для скачивания (инструкции, руководства, сертификаты и т.д.)

    Какие функции могут понадобиться в личном кабинете?

    • авторизация через соц. сети и Google
    • персональный лицевой счет пользователя
    • несколько аккаунтов – один личный кабинет
    • техническая поддержка от администрации магазина
    • отслеживание стадии выполнения заказа по статусу
    • история заказов
    • возможность повторить заказ
    • возможность изменения личных данных/пароля
    • управление подписками
    • оповещения на E-mail или SMS о событиях
    • программы лояльности — специальные цены/скидки для зарегистрированных пользователей

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

    • возможность онлайн-оплаты
    • кассовый чек согласно ФЗ-54 при оплате онлайн
    • печать заказа из корзины
    • возможность активировать промокоды/скидочные купоны
    • возможность сразу распечатать счет или квитанцию на оплату
    • возможность оформить заказ без регистрации
    • автоматический расчет стоимости доставки
    • поиск и добавление товара по артикулу (для постоянных покупателей)
    • допродажи с помощью блоков “Вы смотрели” и “Рекомендуем”

    Вам совершенно точно пригодятся формы обратной связи:

    • форма отправки заказа
    • подписка на новости
    • лид-магнит (полезность в обмен на контакты)
    • обратный звонок
    • заявка на кредит
    • задать вопрос
    • напишите нам

    Поиск должен быть удобным, перед запуском обязательно протестируйте сами:

    • поиск по заголовкам, торговым предложениям, артикулу и другим свойствам товаров
    • скрывать в строке поиска отсутствующие товары
    • “живой поиск» — предлагает подходящие варианты товаров

    Не забываем о служебных страницах:

    • страница благодарности при отправке заказа/сообщения
    • 404 страница
    • правила использования сайта
    • политика обработки персональных данных
    • карта сайта

    Шаблоны триггерных писем сократят ваши временные затраты на административные и маркетинговые рассылки:

    • письмо с информацией о заказе
    • для забытой корзины (с промокодом на скидку и без него)
    • запрос отзыва на Яндекс.Маркет
    • реактивация пользователей
    • шаблон для акций и распродаж с привязкой к соответствующему разделу
    • общий шаблон для менеджеров

    На что еще обратить внимание?

    • автоподмена контактов для регионов по IP
    • всплывающее окно с выбором города на мобильных устройствах
    • передача региональных переменных в почтовые шаблоны
    • отдельная страница с персональной контактной информацией по регионам для поисковиков
    • возможность автономной корректировки на поддоменах каталогов, цен, наличия
    • индивидуальные robots и sitemap для доменов в автоматическом режиме
    • автогенерация тегов для региона с его наименованием
    • мультивалютность
    • конструктор посадочных страниц для рекламных кампаний
    • всплывающие окна pop-up
    • push-уведомления
    • подмена номеров для колл-трекинга
    • модуль внутренней статистики посещаемости и продаж
    • виджеты для связи через мессенджеры
    • бонусная программа для покупателей
    • подарочные карты
    • A/B тестирование
    • динамический контент на основе поведения пользователей/сегментов/истории покупок

    Интеграция с внешними системами

    • Поддержка интеграции с 1С

    ❏ результаты обработанных заказов

    • Интеграция с товарными системам

    ❏ выгрузка файла в спец формате

    • Возможность выгрузки товаров в магазины в соц. сетях
    • CRM-системы
    • Сервисы доставки

    ❏ Бесплатная доставка при определенной сумме заказа

    • Сервисы оплаты

    ❏ с мобильного телефона

    • Мой Склад
    • Интеграция с системами контекстной рекламы
    • Яндекс.Метрика и Google Analytics

    ❏ Общие и отдельные цели для веб-форм «Товар под заказ», «Задать вопрос», «Обратная связь», «Заказать услугу» и «Заказать звонок»

    ❏ Цели корзины, покупки в 1 клик, быстрого и полного заказа

    • вывод данных Google analytics / метрики в административной панели сайта
    • Парсеры
    • контроль целостности
    • анализ запросов на предмет наличия в них вредоносных конструкций
    • антивирус
    • visa PCI Certificate для зарубежных рынков
    • защита от DDos атак
    • проверка работы системы и вывод информации на панель и т.д.
    • ФЗ-152 (о персональных данных): страница соглашения, чек-бокс в формах/блок внизу страницы с правилами
    • соответствие ФЗ-54 (О применении ККТ)
    • модуль интеграции с сервисом АТОЛ.ONLINE
    • Хлебные крошки
    • ЧПУ-урлы
    • ЧПУ и отдельные метатеги для страниц с SEO-фильтрами
    • Склейка адресов www и без
    • Автоматическая генерация XML и HTML карты сайта
    • Микроразметка
    • Разметка SCHEMA.ORG для поисковых систем
    • Разметка OpenGraph для социальных сетей
    • Разметка Dublin Core
    • Автогенерация мета-тегов в карточках товаров по маске
    • Автогенерация описаний в карточки товаров по маске
    • Автогенерация alt и title картинок
    • Защита текста от копирования
    • Для товаров с SKU название торгового предложения подставляется в заголовок
    • Поддержка микроформата Yandex.hProduct
    • Last-Modified и If-Modified-Since
    • Автоматический 301 редирект при смене урла товара
    • Автоматически robots.txt с закрытием служебных страниц
    • Rel-canonical

    И на сладкое, дополнительно:

    • SSL-сертификат
    • Кеширование, оптимизация изображений и загрузка страницы
    • Автоматическая цена по формуле
    • Персональные цены по типам пользователей
    • Настраиваемые цены для разных каналов трафика, регионов и т.д.
    • Адаптивность под все устройства (соответствует стандартам Google Mobile Friendly)
    • Оповещения об отзывах, заказах, на телефон, в мессенджеры и т.д.
    • Мобильное приложение для администратора
    • Мобильное приложение-магазин

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

    Материал опубликован пользователем.
    Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

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

    Спасибо) Всегда приятно помочь людям!

    прекрасный набор))) только реально, кроме хорошего товара и правильно оформленного ФИДА с картинками вам это совершенно не понадобится, если вы не магазин уровня МВИДЕО . не заморачивайтесь, подключайтесь к любому доступному базовому магазину для тестов и начинайте торговать. и расширять сеть на маркетплэйсы..а то пока вы заполните 217 пунктов — зубы на полку положите. кстати, если по 2 тысячи за пункт , то как раз получится пол-ляма для хорошего подрядчика

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

    написал от седены в голове от всех требований ))) хорошая подборка у Вас . Лучше это сразу предусмотреть)))

    Товары@Mail.ru уже всё

    люди не в тренде

    Спасибо! Действительно, упустили, что дата завершения работы сервиса уже назначена )

    Крутой список, спасибо! Осталось понять, что пригодится нашему магазину.

    Спасибо, классный чеклист. Хочу добавить, если кому-то будет интересно, что для создания различных форм и всплывающих окон, и интеграции их с сервисами смс и email рассылок, CRM системами и т.д., отлично подойдет вот этот сервис — FormDesigner.ru. Отлично экономит время!

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

    Сколько времени вы потратили на составление этого чек-листа?

    1) кнопки “в корзину” и “заказать в 1 клик” — если с корзиной все понятно, то «заказать в 1 клик» абсолютно вредительская кнопка, которая только вводит в заблуждение, уменьшает средний чек. На просторах интернета уже много раз объясняли почему это плохо. Основная проблема это уменьшение среднего чека и отказ более 80% от быстрых заказов.

    2) водяной знак на фото — опять же большое заблуждение. Поисковики достаточны умны, чтобы распознать оригинал от скопированной фотографии. Поэтому при копировании фотографий конкурентов вы делаете хуже только себе. Так же можно зарегистрировать фотографии авторским правом и создавать проблемы. (Это рабочая практика, даже для России). Водяной знак в свою очередь портит общую картину и авторитет интернет-магазина.

    3) блок “нашли дешевле?” — бессмысленный блок, который только рушит всю экономическую стратегию. Означает он только то, что у вас может быть дороже, чем у конкурентов и заставляет найти дешевле.

    В целом, чек-лист неплохой. Удобно для начинающих.

    Чек-лист «идеального» Landing Page

    Особенность наиболее конкурентных ниш Директа заключается в том, что зачастую у всех конкурентов рекламные кампании настроены примерно одинаково.

    Здесь имеются ввиду не столько ключевые слова, по которым транслируется реклама, сколько «качество» самих рекламных кампаний. К примеру, в Москве, где средняя стоимость клика в «серьёзных» нишах составляет 300-1000 рублей, а месячные рекламные бюджеты зачастую превышают 100 тысяч в месяц, некачественно настроенная реклама очень быстро «выкидывает» участника торгов за борт.

    Поэтому в крупных городах рекламные кампании, как правило, настраиваются более-менее грамотно. По крайней мере, так обстоят дела в «серьёзных» нишах вроде строительства.

    Однако даже несмотря на то, что рекламная кампания в общем и целом настроена неплохо, иногда случается такое, что она не окупается (работает «в ноль») или даже приносит убытки.

    И основные причины здесь могут быть две:

    1. Некачественная посадочная страница (Раздел сайта, на который попадает пользователь после клика, не «вдохновляет» потенциального клиента.)

    2. Неумелая обработка лидов (Непрофессиональная работа колл-центра, отсутствие товара на складе, информация на сайте не соответствует действительности – вводит пользователя в заблуждение и т.д.)

    Сегодня я хочу подробнее поговорить о первом пункте, т.е. о том, как (по моему мнению) должна выглядеть «идеальная» посадочная страница.

    Ниже приведен «чек-лист» по которому в общих чертах можно оценить качество своей посадочной страницы и понять, в чём состоят причины низкой конверсии и раннего ухода пользователей с сайта.

    Ну что, готовы проверить насколько в действительности хорош ваш «Landing Page»?

    Тогда «пробегитесь» по своей посадочной странице и сравните, насколько она соответствует пунктам (условиям) изложенным ниже.

    Чек-лист «идеальной» посадочной страницы

    Бекграунд (задний фон)

    Логотип

    • Качественный (профессиональный) дизайн
    • Содержит дескрипт (Лозунг, слоган, либо словосочетание, которое кратко характеризует (описывает) ваш бизнес или предлагаемый продукт.)

    * «social media marketing» в данном примере и есть пример дескрипта

    Заголовок

    • Содержит до 9 слов
    • Соответствует рекламной кампании (Не забываем основное правило соответствия: запрос = объявление = сайт. Т.е. поисковый запрос должен быть релевантным рекламному объявлению, а рекламное объявление, в свою очередь, должно быть релевантным заголовку на посадочной странице.)
    • Содержит УТП (Уникальное Торговое Предложение. Пример простейшего УТП для клининговой компании: Не понравится уборка? Вернём деньги!)
    • Выделен в h1, добавлен в title
    • Находится под логотипом
    • «Вы» ориентирован (Говорит о ВЫГОДЕ клиента, о том, что получит клиент.)

    Изображение

    • Коррелирует с заголовком и содержанием страницы («Дополняет» ваше предложение.)
    • Демонстрирует продукт в действии или результат действия
    • Ценность продукта четко видна
    • Профессиональное, высокого качества
    • Уникальное (не из фотостока)

    Форма

    • Обведена в контур с закругленными краями
    • Имеет уникальный однотонный светлый фон
    • Содержит до 7 полей (желательно 2-3)
    • Не очень широкая
    • Содержит «призрачные» подсказки (Как вариант, +7 (xxx) xxx-xx-xx в поле «номер телефона».)
    • Имеет валидацию (Если форма заполнена неверно, — появляется сообщение об ошибке.)
    • Текст полей в активном залоге (Пример предложения в пассивном залоге: Большой пирог былиспечен Сэмом. Пример предложения в активном залоге: Сэм испек большой пирог. Т.е. активный залог (active voice) показывает, что лицо или предмет, выраженное подлежащим, самопроизводит действие. Пассивный залог (passive voice) показывает, что лицо или предмет, выраженное подлежащим, испытывает действие на себе.)
    • Текст хорошо читается
    • Текст выравнен по левому краю

    Кнопка

    • Яркая
    • Рельефная (Эффект 3D)
    • Большая
    • С однозначным CTA (Призывом к действию)
    • Уникального цвета
    • Находится на 1 экране

    CTA (Call-to-action, «призыв к действию»)

    • Однозначный
    • Содержит временное ограничение либо какую-то выгоду (скидку, подарок), т.е. дополнительно мотивирует пользователя заполнить форму заявки. (Пример хорошего CTA: «Оставьте заявку и получите скидку в 1000 рублей».)

    * В примере выше есть небольшая опечатка, но в целом, думаю, суть ясна.

    • Повторяется каждые 2-3 экрана
    • Заметен на расстоянии 2 метра от экрана
    • Есть альтернативный CTA («Заказать бесплатный замер» — > «Получить консультацию специалиста».)

    Текст

    • Содержит выгоды для клиента («Вы» ориентирован.)
    • Отсутствуют лишние слова и лингвистические конструкции («может», «если вы хотите», т.д. и т.п.)
    • Текст в активном залоге
    • Контрастный
    • Размер текста не менее 12 px
    • В абзаце не более 3-5 строк
    • Нет грамматических и орфографических ошибок
    • Визуально оформлен (Галочки, иконки, подзаголовки, выделение главного.)
    • Свойство-выгода начинается с выгоды клиента (Т.е. сначала клиенту «предъявляется» выгода от приобретения продукта, а уже потом описывается свойство товара. Касательно примера ниже: сначала клиенту говорят о том, что портмоне «подчеркнет его статус» и только после сообщают о «тиснении на коже».)

    Отзывы

    • Графически выделены (Фон, стиль, вынос кавычек.)
    • Реальные (Желательно, записанные на видео. Отзывам заказанным «на стороне» уже давно никто не верит, — клиент очень хорошо чувствует фальшь.)
    • Разного типа (Эмоциональные, отзывы о результате и т.п.)
    • Содержат конкретику (Например: купил франшизу X и за Y дней заработал ZZZ ZZZ руб.)
    • Закрывают потенциальные сомнения клиента, «обрабатывают возражения»
    • Содержат информацию об авторе отзыва или логотип компании (В идеале, — реальный номер телефона или хотя бы профиль в социальной сети.)

    Оффер (непосредственно само предложение)

    • Четкая выгода с одновременной отстройкой от конкурентов (УТП)
    • «Вы» ориентирован
    • Имеет ограничения
    • Имеет гарантии

    Социальные элементы (если есть)

    • Находятся на первом экране
    • Не мешают кнопке действия (Не отвлекают пользователя от рекламного предложения.)
    • Имеют серьезный социальный багаж (К примеру, если на вашей посадочной странице расположен виджет группы «вконтакте», то в самой группе должно быть (хотя бы) 5.000-10.000 человек.)

    Дополнительные элементы (опционально)

    • Наличие поддерживающего видео (Например, если вы продаёте услугу, то неплохо бы записать коротенькое видео и ненавязчиво рассказать в этом видео о том, почему клиент должен заказать данную услугу у вас, а не у конкурентов. Как правило, при наличии видео пользователь гораздо охотнее вовлекается в процесс взаимодействия с сайтом.)
    • Стрелочки к CTA

    Чек-лист по юзабилити сайта! Проверь себя!

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

    1. Основное

    • По главной странице сразу понятно, чему посвящен сайт
    • Удобство для новичков: простота, подсказки, помощь
    • Удобство для опытных: упрощенные процедуры, сохранение данных
    • Информация представлена в соответствии с регионом пользователя (геолокация)
    • Нет лишней, отвлекающей информации (навязчивой рекламы, баннеров и т.д.)
    • В случае, если есть несколько этапов в процессе выполнения задачи, то показаны все шаги и текущее положение пользователя в этом процессе
    • Пользователю не приходится вводить одну и ту же информацию дважды

    2. Структура сайта, навигация

  • Контент разделён и структурирован
  • Пользователю всегда понятно, в каком разделе сайта он находится (подсветка активного пункта меню, хлебные крошки)
  • Важные пути по сайту (такие как покупка, подписка и пр. в зависимости от бизнес-целей сайта) предельно просты
  • Важная информация легко доступна со всех страниц сайта
  • По заголовку категории, страницы, блока можно понять их содержимое
  • Логотип является ссылкой на главную на всех страницах
  • Главное меню есть на всех страницах, в одном и том же месте (исключение может составлять процесс покупки)
  • Пункты меню расположены в порядке убывания их значимости
  • Используется не более двух подуровней меню
  • Пункты, содержащие подменю, отличаются от остальных пунктов
  • Названия пунктов меню начинаются с заглавной буквы

    3. Структура страниц сайта

    • Логотип расположен в одном и том же месте на всех страницах сайта
    • Слоган четко описывает цели сайта (он краткий и расположен рядом с логотипом)
    • Самые важные блоки расположены на первом экране (в любом случае выше менее важных)
    • Соблюдается баланс между информационными блоками и пустым пространством, что способствует восприятию сайта пользователями
    • Понятные и заметные заголовки, правильное использование цветов фона, рамок и пустого пространства позволяет визуально разделять страницу на заметные и логичные информационные блоки
    • Каждый блок можно охватить одним взглядом
    • Все кликабельные элементы выглядят очевидно кликабельными, а курсор мыши видоизменяется при наведении на них
    • Все некликабельные элементы выглядят некликабельными и курсор мыши не видоизменяется при наведении на них
    • «Цена — рядом с товаром»: все связанные элементы находятся рядом друг с другом
    • Значение иконок и графических элементов интуитивно понятно
    • Элементов, привлекающих внимание, мало (анимация, крупные, цветные тексты и прочее)

    4. Поиск (при необходимости)

    • Поле поиска доступно на любой странице сайта
    • Поле поиска находится в ожидаемом месте
    • На странице одно поле поиска
    • В поле поиска работает подсказка
    • Поиск проверяет орфографические ошибки и ищет синонимы
    • Результаты поиска легко воспринимаются, отсортированы по релевантности\дате\алфавиту
    • Если поиск дал нулевой результат, то пользователю подсказываются
      идеи о том, как можно отредактировать запрос
    • Пользователю показывается количество результатов поиска
    • Поиск охватывает весь сайт целиком, если не предусмотрен
      поиск по определенным разделам сайта
    • В результатах поиска выводится основная информация о найденных объектах

    5. Текст

    • Изложение соответствует принципу перевернутой пирамиды: сначала важное, потом остальное
    • Текст лаконичен, без «воды»
    • Текст структурирован: заголовки, подзаголовки, абзацы, таблицы
    • Кегль основного текста для чтения — 16px (достаточно крупный)
    • Выравнивание крупного абзаца — только по левому краю
    • Заголовок ближе к «своему» абзацу, чем к предыдущему
    • Заголовки — подсказывают «о чем дальше»
    • Кегль заголовка тоже больше кегля подзаголовка в

    1,5 раза
    Кегль подзаголовка больше кегля текста в

    1,5 раза

  • Верхний регистр используется по минимуму или не используется
  • Шрифты единообразны на всех страницах, читабельны и контрастны
  • Ссылки легко различимы среди текста по цвету или форме (подчеркиванием)
  • Разнообразие цветов должно быть оправданным
  • Для улучшения восприятия длинные числа разбиваются на разряды неразрывным пробелом (или точкой)
  • 6. Ссылки и кнопки (речь идет не о реализации в HTML, а о восприятии пользователем)

    • Текст ссылки (анкор) или около ссылочный текст обозначает объект, к которому она ведёт
    • Все ссылки визуально отличаются от остального текста
    • Скриптовые ссылки (которые не перезагружают страницу) подчеркнуты пунктиром
    • Ссылки достаточно длинные, чтобы по ним было легко кликнуть
    • Ссылки для скачивания файлов визуально отличаются от ссылок на другие страницы (например, иконками)
    • Кнопки используются для действий (заказать, купить, войти, положить в корзину и т.д.)
    • Кнопки похожи на кнопки: форма, цвет, текст, реакция на курсор
    • Кнопка с целевым действием только одна на странице или она очень явно выделена по сравнению с другими (т. н. call-to-action)
    • Текст на кнопке — призыв к действию: текст в инфинитивной форме глагола (пример: найти), а не другую часть речи либо форму глагола (пример: готово)
    • Активная область кнопки совпадает с ее видимым размером или больше
    • Между кнопками, стоящими рядом, есть пустое пространство, щелчок по которому не вызывает действий
    • По наведению на кнопку меняется ее отображение, это призывает пользователя сделать клик
    • Недоступные кнопки и ссылки не исчезают с экрана, а становятся заблокированными

    7. Формы

    • Формы максимально лаконичны
    • В целевых формах (таких как регистрация, оформление заказа) есть только обязательные поля
    • Если полей много, они группируются по смыслу; у групп есть подзаголовки
    • При открытии страницы с формой, курсор перемещается в первое поле
    • Поле, в котором находится фокус, визуально выделено
    • Если заполнение формы разделено на несколько шагов, показано на каком шаге он находится сейчас и сколько осталось шагов
    • Данные сохраняются в полях до того, как пользователь окончил процесс заполнения формы (если пользователь случайно ушел со страницы)
    • Текст результирующей кнопки соответствует цели заполнения (например “Зарегистрироваться”, “Получить бонус” и пр.)
    • Поля, заполнение которых может вызвать вопросы, снабжены подсказками (например, даты, номера телефонов и пр.)
    • Обязательные поля явно отличаются от необязательных
    • Подписи полей соответствуют смыслу полей
    • Наиболее вероятные значения некоторых полей формы по умолчанию заполнены
    • Подписи полей и других элементов единообразны (либо все с двоеточием в конце, либо все без двоеточия)
    • У пользователя есть возможность вернуться на шаг назад, чтобы откорректировать введенные данные
    • Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных
    • Сообщения об ошибках информативны (плохо: “Вы не заполнили все обязательные поля”; хорошо: “Укажите, пожалуйста, электронную почту”)
    • Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка

    8. Адаптация по устройства

    • Внешний вид сайта адаптируется под разные устройства
    • Если мобильная версия сайта имеет ограниченный функционал, то имеется возможность перейти на полную версию
    • Клик по номеру телефона должен начинаться звонок
    • Телефон, режим работы, адрес в шапке сайта
    • Все блоки сайта расположены и перегруппированы таким образом, чтобы пользователь мог прочесть текст и выполнить все действия без дополнительного увеличения зон

    Тестирование

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

    Добавить комментарий