Кнопка ок юзабилити

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

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

Основное

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

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

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

5. Каждому устройству – свое юзабилити. То, что удобно на мобильных устройствах, не всегда оправдано на версии сайта для десктопов – например, скрытое главное меню, которое разворачивается по кнопке в верхнем левом углу. На десктопе она заставляет пользователя совершать лишний клик.
6. Скрытие ненужных полос скролла. На сайте при разрешении 1024×768 во всех стандартных браузерах горизонтальная полоса скролла не появляется.
7. Быстрый доступ к кнопкам CTA. Возможность купить товар/заказать услугу/заказать обратный звонок есть на каждой странице сайта.
8. Наличие интуитивно понятных иконок. Везде, где это уместно и возможно, текстовые пункты дополнены иконками.
9.

trong>Единообразие интерфейса. Структура сайта – шапка, подвал, главное меню и т. д. – одинакова на всех страницах, исключение могут составлять страницы корзины и оформления заказа.
10. Однозначность и понятность. Попав на любую страницу сайта, пользователь за 3 секунды понимает, что это за сайт, какой тематики: благодаря слогану и изображениям в шапке, заголовку страницы и т. п.
11. Предсказуемое местонахождение ключевых элементов. Все стандартные элементы посетитель находит на привычных местах (принцип «Не заставляйте меня думать»):

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

12. Минимально необходимое количество контактов. Слишком много вариантов выбора контактного лица могут привести к нежеланию посетителя делать этот выбор вообще.
13. Удобство взаимодействия с лого сайта. Логотип кликабелен и ведет на главную страницу, а на самóй главной – не перезагружает страницу.
14. Карта сайта. На сайте есть ссылка на карту сайта, и она сквозная (оптимальное расположение – в футере).
15. Уникальный фавикон. У сайта есть фавикон, желательно соответствующий вашему логотипу. Благодаря запоминающемуся фавикону пользователь легко найдет вкладку с вашим сайтом среди множества открытых вкладок браузера.
16.

trong>Заметные 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.
trong>Соблюдение F-паттерна сканирования. Более продвинутый уровень – расположение наиболее важных элементов сайта (УТП, строка поиска, контакты, подзаголовки статей) на странице по схеме в виде буквы F. Именно так скользит взгляд пользователя, согласно многочисленным исследованиям. Самое заметное место – верхний левый угол страницы.
34. Продуманное расположение блоков. Их располагаем на первом экране таким образом, чтобы посетитель видел, что ниже тоже есть что-то интересное. В этом случае посетитель прокрутит страницу вниз. Если же, к примеру, разместить по краю первого экрана пустую полосу, посетитель решит, что ниже ничего нет.
35. Отсутствие широких горизонтальных полос в дизайне. Они могут быть восприняты как барьер, и пользователь не станет прокручивать страницу ниже.

Кнопки

36. «Честные» кнопки. Стандартный функционал любой кнопки – выполнение какого-либо действия, а не переход на другую страницу, если кнопка явно этого не подразумевает.
37. Удобство клика по кнопке. Кликабельна сама кнопка, а не надпись на ней. Можно также сделать кликабельной небольшое пространство вплотную к ней (но не в том случае, если рядом расположена другая кнопка).
38. Четкий однозначный CTA. Текст на кнопке говорит о действии, которое будет совершено при клике. Оптимально это глагол в инфинитивной форме (купить, заказать, скачать, продолжить оформление). Он конкретен, информативен и не допускает различных толкований. Плохо – кнопки с названиями:

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

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

Ссылки

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

ылка на скачивание файла тоже отличается от обычной ссылки – в ней есть слово «скачать»; указаны размер скачиваемого файла и его формат.
43. Анкорная или хотя бы человекопонятная ссылка. В тексте ссылки явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке.
44. Удобство клика по ссылке. Текст ссылки достаточно длинный, чтобы посетитель мог легко по ней кликнуть (к примеру, ссылка с анкором «тут» не слишком удобна).

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

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

trong>Кнопка возврата. На всех страницах сайта работает кнопка «Назад» браузера. Пункт 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 вариант: ссылка на оформление заказа появляется на иконке мини-корзины (которая сама по себе достаточно заметна), после того, как в нее добавляется товар.

Автор: Лилия Голикова
Источник: https://texterra.ru/blog/chek-list-po-yuzabiliti-200-punktov-na-proverku.html

См. продолжение: http://marketologi.forumbook.ru/t771-topic#815

marketologi.forumbook.ru

Что вы должны знать и помнить oб CTA-кнопках

Для посадочной страницы призыв к действию олицетворяет собой переломный момент между конверсией (Conversion) и отказом от нее (Bounce). Если вы просите пользователя сделать что-либо на вашем лендинге, то дабы выполнить желаемое действие, он должен воспользоваться вашим CTA-элементом — независимо от того, что вы конкретно предлагаете: загрузить eBook, заполнить лид-форму, купить товар/услугу или просто перейти на другую страницу.

CTA: Переломный момент между конверсией и отказом от нее

Кнопки призыва к действию состоят из двух основных элементов: собственно дизайна (цвет, форма, шрифт) и текста. Они оба имеют непосредственное влияние на конверсию, однако играют разные роли в процессе преобразования: 

• Дизайн кнопки посылает визуальный сигнал, помогающий привлечь внимание потенциальных клиентов к действию. Другими словами, дизайн (внешний вид) отвечает на вопрос: «Куда я должен нажать?».
• Текст, со своей стороны, помогает пользователю увидеть перспективу его действий и отвечает на вопрос: «Почему я должен нажать на эту кнопку?».

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

Начнем с примера из реальной жизни

Сейчас речь пойдет о крупном европейском сайте электронной торговли, продающем фарфор, расписанный вручную (по материалам сайта contentverve.com). Изменяя цвет и форму кнопки призыва к действию, маркетологам удалось повысить продажи продукта – не только рейтинг кликабельности (CTR) – на 35,81%.

Это пример прекрасно иллюстрирует, какое влияние на конверсию может оказывать дизайн CTA-кнопок.

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

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

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

Главное – выделить кнопку

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

Миллионов цветов на выбор, и с какого мне начать?

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

Еще пример из реальной практики

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

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

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

Визуальные эффекты

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

Рассмотрим несколько примеров

В предыдущем примере (сайт для торговли недвижимостью) оранжевая кнопка с зеленой стрелкой конвертировала значительно лучше, чем скучный коричневатый оригинал. Дизайнеру не понравилась новая кнопка, несмотря на положительное влияние, оказанное ей на конверсию – его главное возражение сводилось к тому, что сочетание оранжевой кнопки с зеленой стрелкой кажется ему «уродливым». Специалист по оптимизации приводил свой довод: зеленая стрелка делает кнопку более заметной, а следовательно – более активно взаимодействующей с пользователем.

Спор разрешило простое А/Б-тестирование. Дизайнер оказался неправ: кнопка без стрелки понизила конверсию на 12,29%.

А вот противоположный пример: эксперт по оптимизации предположил, что, изменив цвет надписи на зеленой кнопке с черного на желтый, он еще больше выделит кнопку на странице и увеличит CTR. Увы, последствия были самыми неприятными: изменение цвета надписи снизило кликабельность 18,01%.

Так что в этом случае визуальный эффект оказал негативное влияние на конверсию – выяснилось, что менее контрастное решение работает много лучше. Вообще, в большинстве случаев можно быть уверенным, что простые кнопки (которые пользователь легко распознает как именно «кнопки») с конкретными текстами, описывающими действие, будут работать лучше, чем различные «креативные» варианты.

Простая зеленая кнопка с описательным текстом превзошла «креативную» на 10,94%.

Размер имеет значение, но «больше» не всегда значит «лучше»

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

Вот пример, в котором увеличение размера графического элемента привело к снижению конверсии на 10%:

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

Уважайте текст на CTA-кнопке!

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

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

Что вы должны сделать прямо сейчас

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

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

Высоких вам конверсий!

По материалам: unbounce.com

lpgenerator.ru

Всем привет!

Сегодня хочу рассмотреть работу кнопки «OK» на формах редактирования. Как всегда, передо мной коробочный вариант Terrasoft XRM 3.3.2

Честно говоря, первый раз открыв приложение, меня удивило «огромное» количество кнопок на формах редактирования… целых 2: «OK» и «Отмена»…. если где-то есть больше, значит я что-то до сих пор упустил из виду

Если с кнопкой «Отмена» все более-менее понятно, то с кнопкой «OK» не очень. ОК = Хорошо, так? Когда мы открываем форму контрагента, и что-то меняем, нам нужно нажать кнопку «Хорошо» или все же лучше иметь кнопку «Сохранить»? Какое из 2-х названий более всего отражает смысл того, что будет происходить в дальнейшем? К счастью, поменять Caption кнопки базового окна редактирования с «OK» на «Сохранить» довольно просто. Сделать это можно в сервисе wnd_BaseDBEdit.

Но это еще не все…
Часто пользователи открывают форму чтобы просто посмотреть какую-то информацию, которой нет в гриде. После просмотра, 99,9% пользователей нажимают какую кнопку? Правильно — «ОК».
А теперь посмотрим, что при этом происходит: а происходит то, что запись сохраняется в БД. И мы видим, что поменялась дата изменения, а так же поле «Изменил». Но ведь никто ничего не менял — просто посмотрел! Тем не менее, запись сохранилась в базе, упали новые записи в логи, сработала интеграция и пакет с апдейтом полетел в другую систему… А Вася не поймет, почему Петя редактировал запись его контрагента, например, и что он в итоге поменял, когда в истории никаких изменений 🙂

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

2) А теперь нужно проверку «А было ли что-то изменено?» вставить перед вызовом метода Dataset.Post() Для этого берем скрипт scr_BaseDBEditUtils и добавляем в функцию сохранения наш функционал:

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

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

community.terrasoft.ru

Атрибуты ссылок

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

2. Следующая подсказка может заключаться в виде какого-то символа, означающего переход, например стрелочка, или просто значок >>

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

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

5. Сделать текстовую ссылку с фоном, так что она будет немного похоже на кнопку.

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

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

 

Ссылки и кнопки

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

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

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

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

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

Поэтому важные кнопки должны отличаться от других. Например, кнопка РЕГИСТРАЦИЯ должна быть больше и ярче, чем кнопка Очистить форму.

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

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

 

Кнопки призыва к действию

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

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

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

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

Сделайте ее большой, но не очень большой
Цвет не единственный параметр, который обращает на себя внимание. Размер так же имеет значение. Чем больше ваша кнопка, тем легче ее заметить. Кроме того, когда вы увеличиваете размер кнопки, вы так же должны увеличить и текст внутри нее. Это не только сделает ее более заметной, но и упростит чтение. Тем ни менее, не делайте ее слишком большой. Если она затмит собой контент, пользователь потеряет нить и не поймет, зачем де ему что-то покупать.

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

 

Смягчайте ваши призывы к действию

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

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

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

Поместите кнопку в верхней части страницы и во втором экране

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

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

Кнопки «ОК»
Изначально, когда графические пользовательские интерфейсы только появились, по стандарту на любое действие пользователя, система требовала подтверждение. Кнопка ОК – выполнение, кнопка ОТМЕНА – возврат в предыдущее состояние. Сейчас системы стали более умными и сложными. А потому, ОК больше ничего не означает (особенно, когда в диалоговом окне несколько кнопок.
Делайте кнопку более понятной, помещая надпись, полностью раскрывающую смысл. Что конкретно произойдет после того, как пользователь нажмет на кнопку? Вместо ОК поставьте: КУПИТЬ, СОХРАНИТЬ ИЗМЕНЕНИЯ, ПОЛОЖИТЬ В КОРЗИНУ и т.п.

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

 

marketnotes.ru

Когда использовать кнопки, а когда – ссылки?

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

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

Как понять, важное действие или нет? Сами задайте себе вопрос: «Влияет ли действие на мой сайт или бизнес?» Важные действия чаще всего требуют от пользователей приложения некоторых усилий. Он должен оформлять заказ, комментировать записи, регистрироваться в системе, восстанавливать пароль, подтверждать вход на сайт и тому подобное. Менее важные действия не требуют от пользователя активных усилий. В таких случаях посетители просто потребляют информацию и переходят от одной страницы к другой.

Правильное использование градиентов

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

Создавая кнопку для сайта, необходимо помнить:

• Человек воспринимает кнопку, которая затемнена в нижней части и освещена в верхней, как выпуклую.

• Человек воспринимает кнопку, которая затемнена в верхней части и освещена в нижней, как нажатую или вогнутую.

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

Убеждающая кнопка

У кнопок практически всегда есть СТА, но посетители не всегда на них нажимают. Для того чтобы повысить показатель кликабельности, вам нужно сделать саму кнопку убеждающей. Что это означает с точки зрения юзабилити сайта?

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

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

• Используйте контрастные цвета.

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

• Кнопка должна быть большой, но естественной.

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

• Используйте слова, придающие кнопке эффект срочности.

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

• Смягчайте CTA.

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

• Правильно используйте буквы на кнопках.

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

• Иллюстрируйте призывы к действию.

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

• Используйте эффекты при наведении.

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

Почему OK теперь не о’кей?

Разработчики приложений часто используют кнопки типа «Нет», «Да», «Cancel» и «OK» и тому подобное. Если у Вас есть компьютер, то Вы их часто видите каждый день.

Эти кнопки не связаны с действием, которое совершает посетитель, и вряд ли помогут Вам в оптимизации конверсии сайта. Для того, чтобы Ваш сигнал был более убедительным и ясным, связывайте свой СТА с планируемым/желаемым действием посетителя.

Почему конверсионные кнопки необходимо располагать в правой нижней части страницы? Ответ на этот вопрос Вы получите после изучения диаграммы Гутенберга. На диаграмме страница разделена на четыре части. Стрелками указано движение взгляда посетителя. Больше всего внимания посетителя получают верхний левый и нижний правый квадранты. Меньше всего внимания получает нижний левый квадрант. Исходя из этого, кнопку лучше расположить в правой нижней части Интернет-страницы.

Обращайтесь к группе профессионалов компании Гамбит, и все работы по продвижению сайта будут выполнены качественно и в срок!

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

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

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

Когда кнопка находится справа, то конверсионный путь сокращается на шаг:

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

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

Как выделить кнопку необходимого действия?

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

• Кнопку желаемого действия можно выделить насыщенным цветом, а кнопку альтернативного действия выделить ненасыщенным цветом.

• Использовать цвет фона для альтернативной кнопки.

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

• Кнопка «Выйти» сливается с фоном.

• Можно использовать эффект прозрачности. Это придаст кнопке альтернативного действия неактивный вид.

Почему у кнопок должен быть прозрачный фон?

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

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

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

Как использовать многоточия и стрелки?

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

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

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

Многоточия и стрелки делают меню и кнопки лучше и интуитивно понятными.

Кнопки должны быть убедительными и заметными

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

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

При создании кнопки необходимо также учитывать:

1. Соответствие бренду. Кнопки должны соответствовать контексту. Это может означать как использование дизайна логотипа компании при создании кнопки, так и продуманный выбор графического стиля и цветовой гаммы.
2. Соответствие содержанию. Необходимо отталкиваться не только от логотипа компании, но и от интерфейса в целом.
3. Контраст. Экспериментируйте с размерами, цветами, шрифтами и отступами, чтобы кнопки были заметными.
4. Форменные или закругленные кнопки. Если в интерфейсе много кнопок с закругленными уголками, возможно, следует изменить их форму, сделав их, например, круглой формы. Это придаст кнопкам контраста.
5. Скрываем второстепенные элементы. Подобные элементы не должны заметно выделяться из общего интерфейса.
6. Граница и обводка. Если кнопка темнее фона, то обводка должна быть темнее кнопки. Если фон темный, то цвет обводки должен быть темнее цвета фона.
7. Размытые тени. Руководствуйтесь «Законом теней».
8. Иконки. Небольшие иконки помогут посетителям предугадать, что произойдет в дальнейшем.
9. Помните об элементах. Сохраните за первичными кнопками сильные цвета, а слабые используйте по мере снижения значимости кнопки. Размер кнопки также следует уменьшать.
10. Указывайте состояние кнопки. Это можно сделать при помощи теней, градиентов и границ.

Хотите узнать, как сделать кнопки на Вашем сайте идеальными? Спросите у специалистов нашей компании, просто позвонив по номеру +7 499-322-04-89!

reklamapoumu.ru