Подробнее кнопка: Кнопка Подробнее (Показать больше/скрыть) на веб-странице с помощью JavaScript. Уроки для начинающих. W3Schools на русском

Содержание

Кнопка «Узнать больше»: оптимизируйте ее!

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

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

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

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

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

Какие проблемы могут возникнуть?

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

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

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

Такое решение имеет множество преимуществ:

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

Что написать на кнопке: три удачных варианта

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

Вариант №1: Использовать в описании ключевые слова и фразы

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

Вариант №2: Оставьте фразу «Узнать больше» и добавьте ключевые слова

Следование этому методу потребует от вас некоторых усилий. Если формат «Узнать больше» действительно подходит вам лучше всего — например, вы предлагаете подробнее ознакомиться с услугами, то вставьте ключевые слова после указанной фразы на кнопке. Обычно это выглядит так: «Узнать больше: как оптимизировать CTA-кнопки». Есть одновременно минус и плюс такого подхода: слишком длинный текст может быть трудно читать, но большая кнопка привлекает больше внимания. Решение за вами.

Вариант №3: Добавьте яркий заголовок к предшествующему кнопке тексту

Если заголовок написан качественно и действительно привлекает внимание, можете включить его и в «тело» кнопки.

В описании к CTA-кнопке используйте ключевые слова и фразы, соответствующие семантическому ядру сайта

 

Твитнуть цитату

Удачные примеры

Каждый из приведенных ниже примеров демонстрирует удачные альтернативы банальному «Узнать больше». Вдохновляйтесь и внедряйте оригинальные идеи на своих сайтах и лендингах!

На сайте Pugetsound.edu представлены три истории, и вместо привычного «Читать далее» авторы решили поместить под заголовком краткое содержание статьи:

Rei.com email: Текст ссылки дает пользователю понять, что его ждет дальше даже без чтения заголовка: «Больше советов по кэмпингу», «Читать блог», «Обучающие курсы по кэмпингу и походному туризму».

Пользователи могли и не знать, что скачивая приложение на сайте Barclays.co.uk, они участвуют в благотворительной акции. Кнопка «О приложении» позволяет лучше ознакомиться с сутью программы:

На сайте Mq.edu.au заголовки вообще сами являются гиперссылками, ведущими к подробному описанию:

Попробуйте сами!

Теперь, когда вы знаете, какими словами заменить банальное «Подробнее», попробуйте улучшить описание, предшествующее CTA-кнопкам.

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

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

Будьте всегда на связи!

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

ПОДРОБНЕЕ

…Продукты, перечисленные ниже, являются сертифицированными устройствами для взаимодействия в системе SmartThings                                                                                                                                                                                                                                                                         

Компания BCG (Build. Connect. Grow)

МЫ ПРИНОСИМ ПОЛЬЗУ НАШИМ КЛИЕНТАМ, ОБЩЕСТВУ И МИРУ

Подробнее 

…Карьера. Работа. Культура. Путь. Присоединяйся 

Подключите свое воображение

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

ПОДРОБНЕЕ 

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

Вместо заключения

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

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

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

24-02-2016

Устранение проблем с макетами и кнопками призыва к действию

Некоторые форматы рекламы на Facebook и в Instagram не поддерживают кнопки призыва к действию. Ниже перечислены форматы Креативного центра, поддерживающие кнопки призыва к действию, а также доступные кнопки.

Facebook

  1. Кольцевая галерея
  2. «Играть», «Предварительная регистрация», «Запросить время», «Сохранить», «Меню», «В магазин», «Зарегистрироваться», «Подписаться», «Смотреть ещё», «Отправить сообщение в WhatsApp», «Узнать цену», «Подать заявку», «Забронировать», «Позвонить», «Свяжитесь с нами», «Скачать», «Посмотреть мероприятие», «Как добраться», «Получить предложение», «Информация о сеансах», «Отправить сообщение», «Интересует», «Подробнее», «Слушать», «Открыть ссылку», «Заказать».
  3. Одно изображение или видео
  4. «Играть», «Предварительная регистрация», «Запросить время», «Сохранить», «Меню», «В магазин», «Зарегистрироваться», «Подписаться», «Смотреть ещё», «Отправить сообщение в WhatsApp», «Узнать цену», «Подать заявку», «Забронировать», «Позвонить», «Свяжитесь с нами», «Скачать», «Посмотреть мероприятие», «Получить предложение», «Информация о сеансах», «Отправить сообщение», «Интересует», «Подробнее», «Слушать», «Открыть ссылку», «Заказать».

Instagram

  1. Кольцевая галерея
  2. «Играть», «Предварительная регистрация», «Запросить время», «Сохранить», «Меню», «В магазин», «Зарегистрироваться», «Подписаться», «Смотреть ещё», «Отправить сообщение в WhatsApp», «Узнать цену», «Подать заявку», «Забронировать», «Позвонить», «Свяжитесь с нами», «Скачать», «Посмотреть мероприятие», «Как добраться», «Получить предложение», «Информация о сеансах», «Отправить сообщение», «Подробнее», «Слушать», «Открыть ссылку», «Заказать».

  3. Одно изображение или видео
  4. «Играть», «Предварительная регистрация», «Запросить время», «Меню», «В магазин», «Зарегистрироваться», «Подписаться», «Смотреть ещё», «Отправить сообщение в WhatsApp», «Узнать цену», «Подать заявку», «Забронировать», «Позвонить», «Свяжитесь с нами», «Скачать», «Посмотреть мероприятие», «Получить предложение», «Информация о сеансах», «Отправить сообщение», «Подробнее», «Слушать», «Открыть ссылку», «Заказать».

Перейти в Креативный центр

Как очистить капсульную кофемашину от накипи?

настало время для очистки вашей кофемашины!

Новая функция автоматического оповещения напомнит Вам, что пришло время для очистки кофемашины от накипи.

Удалить накипь очень легко!

Если кнопка включения / выключения на кофемашине стала оранжевой, необходимо удалить накипь, чтобы сохранить качество оригинальных вкусов кофе от NESCAFÉ® Dolce Gusto®.

ШАГ 1: ВКЛЮЧИТЕ РЕЖИМ УДАЛЕНИЯ НАКИПИ

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

ШАГ 2: ОЧИСТИТЕ СВОЮ КОФЕМАШИНУ ОТ НАКИПИ

  • Смешайте 0,5 литра свежей питьевой воды с содержимым пакета средства для удаления накипи в мерной емкости. Налейте данный раствор в емкость для воды и вставьте ее в машину.

  • Установите пустой держатель капсул. Вначале нажмите кнопку подачи горячей воды. Дождитесь прекращения подачи воды. Затем нажмите кнопку подачи холодной воды.

  • Машина удалит накипь в режиме «старт-стоп» в течение 2 минут. Дождитесь пока емкость для воды окажется пустой.

ШАГ 3: ПРОМОЙТЕ СВОЮ КОФЕМАШИНУ

  • Сполосните и промойте емкость для воды. Затем снова наполните свежей питьевой водой и установите в машину. Нажмите на символ горячей воды для запуска промывки. После завершения подачи горячей воды нажмите на символ холодной воды для запуска промывки.

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

Новое в WhatsApp: кнопки в чате, заголовки и подписи сообщений.

В последней версии нашего ComEx API мы сделали доступным обновленный функционал в WhatsApp: теперь наши клиенты могут использовать кнопки, заголовки и подписи в сообщениях

Какими могут быть кнопки

В кнопке можно разместить текст, номер телефона или гиперссылку.

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

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

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

В каких кейсах можно использовать кнопки

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

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

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

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

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

Пример шаблона с текстовыми кнопками

Пример шаблона с кнопкой-ссылкой и звонком

Ограничения

WhastApp разграничивает текстовые кнопки и кнопки-ссылки с URL или номером телефона. В одном шаблоне можно использовать до 3 кнопок, это будут либо текстовые кнопки, либо кнопки – ссылки с номером телефона или URL. 

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

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

 

 

Компактная и надежная коммутация от Omron – тактовые кнопки со склада Компэл

Стандартное исполнение

B3F

Конфигурация контактов SPST-NO
Количество циклов коммутации 100 000…10 000 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…24 В
Покрытие контактов золото
Резистивная нагрузка постоянного тока 0,1…50 мА, 3…24 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 4,3…9,5 мм)
12 x 12 мм (прямое: длина штока 4,3…7,3 мм)
7.3 x 6.25 мм (угловое: длина штока 3,15…6,15 мм)
Особенности Заземляющий контакт, квадратный плунжер, монтаж через сквозные отверстия

B3FS

Конфигурация контактов SPST-NO
Количество циклов коммутации 100 000…3 000 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…24 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 3,1…7,3 мм)
12 x 12 мм (прямое: длина штока 4,3…7,3 мм)
Особенности Квадратный плунжер, поверхностный монтаж

B3U

Конфигурация контактов SPST-NO
Количество циклов коммутации 100 000…200 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…12 В
Размеры/Исполнение 3 x 2,5 мм (прямое: длина штока 1,6 мм)
4 x 2,5 мм (угловое: длина штока 3,2 мм)
Особенности Пылезащитная конструкция, заземляющий контакт, поверхностный монтаж
Герметичное исполнение IP67

B3S

Конфигурация контактов SPST-NO
Количество циклов коммутации 300 000…500 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…24 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 4,3 мм)
Особенности Заземляющий контакт, поверхностный монтаж

B3SN

Конфигурация контактов SPST-NO
Количество циклов коммутации 100 000
Покрытие контактов серебро, золото
Резистивная нагрузка постоянного тока 1…50 мА, 3…24 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 3,1 мм)
Особенности Заземляющий контакт, поверхностный монтаж

B3SE

Конфигурация контактов SPST-NO
Количество циклов коммутации 1 000 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…12 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 2,0 мм)
Особенности Самая миниатюрная серия из линейки Omron, поверхностный монтаж

B3SL

Конфигурация контактов SPST-NO
Количество циклов коммутации 100 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…12 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 3,4…5,1 мм)
Особенности Расширенный диапазон рабочих температур (-25…90°С), кнопка с дополнительным ходом, поверхностный монтаж

B3W

Конфигурация контактов
Количество циклов коммутации 300 000…3 000 000
Покрытие контактов серебро
Резистивная нагрузка постоянного тока 1…50 мА, 3…24 В
Размеры/Исполнение 6 x 6 мм (прямое: длина штока 4,3…7,3 мм)
12 x 12 мм (прямое: длина штока 4,3…7,3 мм)
Особенности Заземляющий контакт, квадратный плунжер, монтаж через сквозные отверстия

ГБУДО г. Москвы «Детская школа искусств «Тутти»: Платные образовательные услуги

Государственное бюджетное учреждение дополнительного образования города Москвы  
«Детская школа искусств «Тутти»  
ведет набор  на платные образовательные услуги   
детей от 4 лет и взрослых 

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


РЕКЛАМНАЯ ИНФОРМАЦИЯ

ИНФОРМАЦИЯ О ПРИЕМЕ
НА ПЛАТНЫЕ ОБРАЗОВАТЕЛЬНЫЕ УСЛУГИ

   ДОСТУПНА ЭЛЕКТРОННАЯ ЗАПИСЬ!!!
ДЛЯ ЗАПИСИ ПЕРЕЙДИТЕ ПО ССЫЛКЕ:
https://docs.google.com/forms/d/e/1FAIpQLSds1qyKzDLUCNw6CgK0JwTIsY-4OudBQjIZGJA5tHwqP6UQtQ/viewform

Справки по телефону (495) 314 – 60 – 24

ССЫЛКА НА РАСПИСАНИЕ ПЛАТНЫХ ОБРАЗОВАТЕЛЬНЫХ УСЛУГ


ФОРТЕПИАНО

 


СТРУННЫЕ ИНСТРУМЕНТЫ


 


НАРОДНЫЕ ИНСТРУМЕНТЫ 



ДУХОВЫЕ ИНСТРУМЕНТЫ


БАС-ГИТАРА



ГИТАРА


УДАРНАЯ УСТАНОВКА


ВОКАЛ



РАННЕЕ МУЗЫКАЛЬНОЕ РАЗВИТИЕ


ИЗОБРАЗИТЕЛЬНОЕ ИСКУССТВО



РАННЕЕ РАЗВИТИЕ ДЕТЕЙ


 


 КЛАССИЧЕСКАЯ ХОРЕОГРАФИЯ



КОЛЛЕКТИВ СОВРЕМЕННОГО ТАНЦА «ТУТТИ»


КОЛЛЕКТИВ СОВРЕМЕННОГО ЭСТРАДНОГО ТАНЦА «ANGEL»


ТЕАТРАЛЬНОЕ ИСКУССТВО

 



ДОКУМЕНТЫ:

-Доп. соглашение к договору об оказании ПОУ (дистанционное обучение)
-Положение о порядке оказания ПОУ
-Бланк заявления на прием для обучения по ПОУ
-Договор об оказании ПОУ
-Доп. соглашение к договору ПОУ мат. капитал
-Договор об оказании ПОУ (ОБРАЗЕЦ ДЛЯ ЗАПОЛНЕНИЯ)
-Порядок предоставления льгот по оплате ПОУ
-Бланк квитанции об оплате ПОУ
-Бланк заявления на перерасчет по оплате ПОУ
-Бланк заявления на предоставление льгот по оплате ПОУ
-Прейскурант платных услуг, предоставляемых ГБУДО г.Москвы ДШИ «Тутти»
-Перечень льгот для отдельных категорий граждан на платные услуги
-Перечень ПОУ, предоставляемых ГБУДО г. Москвы ДШИ «Тутти»

 


    

Создание кнопки «Поделиться в Teams» — Teams

  • Статья
  • Чтение занимает 2 мин
  • 1 участник

Были ли сведения на этой странице полезными?

Да Нет

Хотите оставить дополнительный отзыв?

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

Отправить

В этой статье

Сторонние веб-сайты могут использовать сценарий запуска для встраив кнопки Share-to-Teams на своих веб-сайтах. При выборе в всплывающее окно запускается Teams share-to-Teams. Это позволяет обмениваться ссылками напрямую с любым Microsoft Teams каналом без переключения контекста. В этом документе вы можете узнать, как создать и встраить кнопку Share-to-Teams для веб-сайта, создать предварительный просмотр веб-сайта и расширить возможности share-to-Teams для образования.

Примечание

  • Поддерживаются только настольные версии MicrosoftEdge  и Google Chrome.
  • Использование учетных записей Freemium или гостевой не поддерживается.

На следующем изображении отображается всплывающее Teams share-to-Teams:

Встраить кнопку Share в Teams

  1. Добавьте скрипт launcher.js на веб-страницу.

    <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
    
  2. Добавьте элемент HTML на веб-страницу teams-share-button с атрибутом класса и ссылкой, которая будет делиться в атрибуте data-href .

    <div
     
      data-href="https://<link-to-be-shared>">
    </div>
    

    После этого значок Microsoft Teams на ваш веб-сайт. На следующем изображении показан значок Share-to-Teams:

  3. Кроме того, если для кнопки Share-to-Teams нужен другой размер значка, используйте атрибутdata-icon-px-size.

    <div
     
      data-href="https://<link-to-be-shared>"
      data-icon-px-size="64">
    </div>
    
  4. Если общая ссылка требует проверки подлинности пользователя, а предварительный просмотр URL-адреса из общего доступного url-адреса не будет хорошо отрисовки в Teams, data-preview falseто можно отключить предварительный просмотр URL-адреса, добавив набор атрибутов в .

    <div
     
      data-href="https://<link-to-be-shared>"
      data-preview="false">
    </div>
    
  5. Если страница динамически отрисовки контента, shareToMicrosoftTeams.renderButtons() вы можете использовать метод, чтобы заставить Share отрисовки в соответствующем месте в конвейере.

Создайте предварительный просмотр веб-сайта

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

Отображение предварительного просмотра

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

В следующей таблице описаны необходимые теги:

Значение Метатег Откройте Graph
Title <meta name="title" content="Example Page Title"> <meta property="og:title" content="Example Page Title">
Description <meta name="description" content="Example Page Description"> <meta property="og:description" content="Example Page Description">
Эскиз изображения нет. <meta property="og:image" content="http://example.com/image.jpg">

Вы можете использовать версии по умолчанию HTML или open Graph версии.

Share to Teams для образования

Для учителей, использующих кнопку Share Teams, существует дополнительный параметр Create an Assignment. Это позволяет быстро создавать назначение в выбранной команде на основе общей ссылки. На следующем изображении отображается раздел share-to-Teams для образования:

Полное launcher.js определение

Свойство Атрибут HTML Type По умолчанию Описание
href data-href string н/д Href контента для обмена.
preview data-preview boolean (как строка) true Следует ли показывать предварительный просмотр контента для обмена.
iconPxSize data-icon-px-size номер (в качестве строки) 32 Размер пикселей кнопки share-to-Teams для отрисовки.
msgText data-msg-text string н/д Текст по умолчанию должен быть вставлен перед ссылкой в поле составить сообщение. Максимальное число символов — 200.
assignInstr data-assign-instr string н/д Текст по умолчанию, который будет вставлен в поле «Инструкции». Максимальное число символов — 200.
assignTitle data-assign-title string н/д Текст по умолчанию, который будет вставлен в поле «Title». Максимальное число символов — 50.

Methods

shareToMicrosoftTeams.renderButtons(options)

options (необязательный): { elements?: HTMLElement[] }

В настоящее время все кнопки обмена отрисовка на странице. Если необязательный options объект снабжен списком элементов, эти элементы отрисовыются в кнопки share.

Настройка значений форм по умолчанию

Вы можете выбрать для набора значений по умолчанию для следующих полей в share Teams форме:

  • Скажите что-нибудь об этом: msgText
  • Инструкции по назначению: assignInstr
  • Название назначения: assignTitle
Пример

Значения форм по умолчанию даются в следующем примере:

<span
   
    data-href="https://www.microsoft.com/education/products/teams"
    data-msg-text="Default Message"
    data-assign-title="Default Assignment Title"
    data-assign-instr="Default Assignment Instructions"
></span>

Дополнительные ресурсы

Интеграция веб-приложений

кнопок «Показать больше» — AcceDe Web

Резюме

Принцип

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

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

Основная база HTML

До активации кнопки

  
[Содержимое по умолчанию]

После активации кнопки

  
[Содержимое по умолчанию отображается перед активацией]
[Дополнительная информация, которая добавляется с помощью кнопки]

роли, состояния и свойства ARIA

После активации кнопки в контейнер нового контента необходимо добавить tabindex="-1" .

Взаимодействие с клавиатурой

Введите и Пробел

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

Ожидаемое поведение

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

Примечания

Если кнопка добавляет только интерактивные элементы, атрибут tabindex="-1" можно опустить, а фокус можно просто переместить на первый интерактивный элемент, который появляется после активации кнопки.

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

  <ул>
  
  • Новости 1
  • Новость 2
  • Новость 3
  • Когда кнопка активирована, фокус клавиатуры отправляется на ссылку «Новости 4», которая будет новой отображаемой ссылкой.

    Нет необходимости в tabindex="-1" , поскольку элемент может получать фокус клавиатуры по умолчанию.

      <ул>
      
  • Новости 1
  • Новость 2
  • Новость 3
  • Новость 4
  • Новость 5
  • Новости 6
  • Комментарии

    Back to top

    кнопок бесконечной прокрутки, нумерации страниц или «Загрузить еще»? Выводы об удобстве использования в электронной коммерции — Smashing Magazine

    Краткий обзор ↬ Какой шаблон UX лучше всего подходит для отображения продуктов на веб-сайте электронной коммерции: нумерация страниц, кнопка «Загрузить еще» или бесконечная прокрутка? В Baymard Institute мы провели несколько годовых крупномасштабных исследований юзабилити более чем 50 ведущих веб-сайтов электронной коммерции.Мы протестировали (среди прочего) эти три шаблона дизайна для загрузки продуктов как на настольных компьютерах, так и на мобильных устройствах.

    Какой шаблон UX лучше всего подходит для отображения продуктов на веб-сайте электронной коммерции: нумерация страниц, кнопка «Загрузить еще» или бесконечная прокрутка? В Baymard Institute мы провели несколько годовых крупномасштабных исследований юзабилити более чем 50 ведущих веб-сайтов электронной коммерции.Мы протестировали (среди прочего) эти три шаблона дизайна для загрузки продуктов как на настольных компьютерах, так и на мобильных устройствах.

    Дополнительная литература по Smashing:

    Разбивка на страницы по-прежнему является самым популярным способом загрузки новых элементов на веб-сайт, поскольку она поставляется по умолчанию почти на каждой платформе электронной коммерции. Тем не менее, наши сеансы тестирования юзабилити показали, что кнопки «Загрузить еще» в сочетании с отложенной загрузкой являются превосходной реализацией , что приводит к более плавному взаимодействию с пользователем. Мы обнаружили, что бесконечная прокрутка может быть совершенно вредной для удобства использования — в частности, для результатов поиска и на мобильных устройствах.Однако это не черно-белое, потому что производительность каждого метода зависит от контекста страницы.

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

    Еще после прыжка! Продолжить чтение ниже ↓

    Результаты испытаний

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

    Многие испытуемые использовали количество ссылок на страницы, показанные здесь на Macy’s, для оценки общего количества результатов. Хотя ссылки на страницы предлагают больше контроля для перехода к определенному набору результатов, очень немногие испытуемые фактически использовали их во время тестирования. Вместо этого они почти исключительно использовали кнопки «Далее» и «Назад». (Просмотреть большую версию)

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

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

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

    Только несколько протестированных веб-сайтов использовали кнопку «Загрузить еще», но они были хорошо восприняты испытуемыми. На самом деле, при сравнении 50 лучших веб-сайтов электронной коммерции США мы обнаружили, что только 8% используют подход «Загрузить больше». «Загрузить еще» — это очень простой дизайн, который не обременяет пользователя необходимостью выяснить, на какую страницу перейти, а просто спрашивает: «Хотите увидеть больше результатов?» Это обеспечивает очень простой интерфейс и, вероятно, наименьшую когнитивную нагрузку, возможную для загрузки дополнительных элементов по требованию.Испытуемые обычно просматривали больше продуктов на веб-сайтах с кнопкой «Загрузить еще», чем на веб-сайтах со ссылками на страницы, но поскольку для загрузки дополнительных продуктов по-прежнему требовался активный выбор и щелчок, испытуемые, как правило, читали отображаемые элементы гораздо более внимательно, чем на веб-сайтах с бесконечным прокрутка.

    На веб-сайтах с кнопками «Загрузить еще», таких как American Eagle Outfitters, пользователи просматривали больше товаров, чем на веб-сайтах с нумерацией страниц, но они не сканировали так быстро, как с бесконечной прокруткой.Кроме того, было замечено, что изучение продуктов стало значительно проще, поскольку пользователи могли добавлять дополнительные продукты в текущий список. (Показать большую версию)Urban Outfitters (Показать большую версию)

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

    Итак, какой метод загрузки следует использовать? В идеале вы должны использовать несколько вариантов «Загрузить еще», как оказалось. Тестирование показало, что ни один метод не был идеальным во всех случаях; разные контексты требовали одной из трех разных реализаций подхода «Загрузить больше». Мы рассмотрим эти три варианта в оставшейся части этой статьи:

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

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

    «Загрузить еще» для категорий

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

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

    (Для ленивой загрузки в качестве отправной точки доступна куча кода и плагинов, только два из которых — Lazy Load для jQuery и LazyLoad XT Мики Тууполы.)

    Crutchfield реализует кнопку «Загрузить еще» в сочетании с отложенной загрузкой. Во-первых, по умолчанию загружаются 20 товаров; как только пользователи прокручивают до 10-го продукта, Crutchfield лениво загружает еще 20 продуктов. После 40-го товара пользователю предоставляется кнопка «Загрузить еще». (Просмотреть большую версию)

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

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

    «Загрузить еще» для результатов поиска

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

    Кроме того, при поиске результаты сортируются по релевантности. Таким образом, пятый результат, как правило, гораздо более важен для пользователя, чем сотый результат.Это означает, что пользователям не нужно сканировать более сотни продуктов при поиске — скорее, их следует поощрять к тщательному изучению первых элементов. Таким образом, результаты поиска должны по умолчанию загружать только от 25 до 75 продуктов, и никогда не следует использовать бесконечную прокрутку для результатов поиска. (Интересно, что знаменитый A/B-тест бесконечной прокрутки, проведенный Etsy, также зафиксировал значительный удар по поиску.) Разбивка на страницы или кнопка «Загрузить еще» были бы лучше для результатов поиска, потому что они не поощряют быстрое сканирование большое количество продуктов, но вместо этого побуждают пользователя больше сосредоточиться на изучении первого набора результатов.Действительно, из-за меньшего количества результатов ленивая загрузка не является обязательным требованием (но, если она будет реализована для навигации по категориям, ее с тем же успехом можно использовать здесь повторно).

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

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

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

    Кнопки «Загрузить еще» для мобильных устройств

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

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

    Кнопка «Загрузить больше результатов», используемая в Lowe’s, предлагает множество преимуществ бесконечной прокрутки, сохраняя при этом доступ к нижнему колонтитулу. (Просмотреть увеличенную версию)

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

    .
    • Меньше экранного пространства
      Поскольку мобильный экран намного меньше, элементы списка будут занимать относительно большую часть экрана, при этом обычно в макете представления списка отображаются только два-три элемента. Таким образом, 50 элементов занимают гораздо больше высоты области просмотра на мобильном устройстве, чем на настольном компьютере. Другими словами, пользователю придется взаимодействовать (т.е. прокручивать) намного больше на мобильном устройстве, чем для сопоставимого списка продуктов на рабочем столе.
    • Ограничения прокрутки
      На сенсорном устройстве пользователь обычно может прокручивать, только перетаскивая и проводя пальцем. Сравните это с настольным компьютером, где у пользователя обычно есть множество входных данных для прокрутки, таких как колесо прокрутки мыши (или прокрутка трекпада), перетаскиваемая полоса прокрутки пользовательского интерфейса и различные вводы с клавиатуры (стрелки вверх и вниз, страница вверх и вниз). клавиши, пробел и др.).
    • Медленная прокрутка
      Кроме того, в наших тестах испытуемые продемонстрировали меньший контроль над непрерывной прокруткой списка продуктов.С одной стороны, некоторые будут слишком медленно прокручивать страницу, постоянно водя пальцем по экрану; в этом случае просмотр списка даже из 50 товаров займет много времени. С другой стороны, некоторые прокручивали список слишком быстро, потому что они непреднамеренно вызывали прокрутку по импульсу, быстро проводя пальцем; в этом случае они упустят множество продуктов, которые проносятся мимо них.
    • События JavaScript
      Наконец, то, как события JavaScript запускаются на большинстве сенсорных устройств, означает, что метод динамической ленивой загрузки часто также не может быть реализован.События JavaScript запускаются только после завершения прокрутки пользователем; поэтому продукты не могут быть получены, пока пользователь прокручивает страницу, только после того, как прокрутка остановится.

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

    Ключевая деталь: поддержка кнопки «Назад» через history.pushState

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

    Метод «Загрузить еще» требует внимательного изучения поведения кнопки «Назад». Крайне важно, чтобы после того, как пользователь посетил определенную страницу продукта из списка продуктов, он вернулся на то же место в этом списке после нажатия кнопки «Назад» в браузере.Из проверенных нами сайтов электронной коммерции, у которых есть кнопка «Загрузить еще», более 90% ошибаются. Это обязательно мешает пользователю переключаться между списком продуктов и страницами продуктов, используя одну и ту же вкладку браузера — серьезное навигационное ограничение.

    Skechers активно решает проблему кнопки «Назад», переписывая URL-адрес каждый раз, когда пользователь нажимает кнопку «Загрузить еще». Следовательно, когда пользователь щелкает, чтобы вернуться со страницы продукта, он перемещается на правильную позицию в списке продуктов.(Просмотреть большую версию)Skechers (Просмотреть большую версию)Skechers (Просмотреть большую версию)

    API истории HTML5 позволяет нам оправдать ожидания пользователя. В частности, функция history.pushState() позволяет нам вызывать изменение URL-адреса без перезагрузки страницы, тем самым приводя в соответствие поведение кнопки «Назад» в браузере с ожиданиями пользователя. Браузер запомнит положение прокрутки пользователя, но нам нужно убедиться, что любые клики «Загрузить еще» загружаются по умолчанию, когда пользователь возвращается.

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

    «Загрузить больше» не должно быть вашим главным приоритетом

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

    За последние семь лет мы зафиксировали множество серьезных проблем с UX на подавляющем большинстве веб-сайтов электронной коммерции. Некоторые из этих вопросов были рассмотрены в наших прошлых статьях здесь, в Smashing Magazine, в том числе о поиске в электронной коммерции, навигации по категориям, фильтрации, оформлении заказа и мобильном опыте.Многие из этих проблем, которые столь же важны, требуют значительно меньше проектных и технических ресурсов для решения, чем разработка надежной реализации «Загрузить больше».

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

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

    Однако кнопки «Загрузить еще» работают лучше, только когда проблема с кнопкой «Назад» в браузере решена — например, через историю .pushState() — и, в идеале, когда реализация корректируется в зависимости от контекста пользователя. В частности, следующие три контекстные корректировки оказались ключевыми для производительности:

    • Для навигации по категориям используйте комбинацию кнопки «Загрузить еще» и отложенную загрузку . Установите порог для кнопки «Загрузить еще» от 50 до 100 элементов.
    • Для результатов поиска используйте кнопку «Загрузить еще», но установите порог от 25 до 75 результатов. В идеале вы должны динамически корректировать пороговое значение для каждого уникального списка результатов поиска в зависимости от снижения показателей релевантности результатов.
    • На мобильных устройствах используйте кнопку «Загрузить еще», но установите порог на значение от 15 до 30 продуктов из-за проблем с прокруткой и размером экрана. Кроме того, из-за того, как запускаются события JavaScript, и из-за более низкого порога загружайте все продукты сразу, а не отложенную загрузку.

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

    (аль)

    Вставка кнопки «Подробнее» (Joomla 3)

    Функция «Подробнее» доступна только для типов элементов меню «Блог категории» и «Избранная статья».Иногда клиент включает функцию «Подробнее», а затем спрашивает, почему она не отображается в элементе меню «Одна статья». Это потому, что он доступен только для блога категории/избранной статьи. В этой статье дается небольшое представление о функции «Подробнее», о том, как ее включить, как она работает и как вставить кнопку «Подробнее».

    Включение функции «Подробнее»

    Вставка и настройка кнопки «Подробнее»

    Включение функции «Подробнее»

    После входа в админку вашего сайта перейдите в Менеджер статей.

    В Менеджере статей нажмите кнопку «Параметры» на панели инструментов.

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

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

    Обязательно сохраните и закройте окно «Параметры статьи».

    Наверх

    Вставка и настройка кнопки «Подробнее»

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

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

    В разделе «Параметры статьи» в области параметров есть несколько дополнительных параметров, относящихся к кнопке «Подробнее». Например, вы можете выбрать «Показать» или «Скрыть» вступительный текст отдельных статей.

     

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

     

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

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

    Наверх

    40 примеров призыва к действию, которые нельзя не нажать

    Вспомните, сколько раз в жизни вы подписывались на разные вещи.Вы когда-нибудь скачивали Evernote? Дропбокс? Спотифай? Может быть, вы даже посещали занятия по Генеральной Ассамблее.

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

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

    Очень важно направлять посетителей на пути к покупке с помощью стратегических CTA.

    Что такое призыв к действию (CTA)?

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

    Что означает CTA в маркетинге

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

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

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

    Ниже приведены несколько примеров типов CTA, которые вы можете использовать в маркетинге:

    Зарегистрироваться.

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

    Подписаться.

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

    Попробуйте бесплатно.

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

    Начать.

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

    Узнать больше.

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

    Присоединяйтесь к нам.

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

    Узнайте больше о целях CTA в этой записи блога.

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

    Чтобы помочь вам определить, что эффективно, а что нет, мы составили список из 31 примера CTA, которые просто потрясающие. Эти примеры призыва к действию разбиты на три категории:

    • Простые и эффективные призывы к действию
    • призыва к действию с призывом к действию
    • CTA, которые уравновешивают несколько кнопок на одной странице

    Примеры призыва к действию

    1. СТА HubSpot
    2. Эверноут
    3. Дропбокс
    4. OfficeVibe
    5. Нетфликс
    6. Квадрат
    7. Прези
    8. Полный комплект
    9. Пантера
    10. ЭПИК
    11. Аквапрессо
    12. Быстрый росток
    13. Серый гусь
    14. Дом на дереве
    15. OKКупидон
    16. Ведение блога.орг
    17. ИМПАКТ Брендинг и дизайн
    18. Хьюмор
    19. Брукс Бег
    20. Округ Гумбольдт
    21. Убер
    22. Спотифай
    23. Угмонк
    24. Пинтерест
    25. Мадвелл
    26. Инстаграм
    27. Баркбокс
    28. т.к. фармацевтика
    29. Генеральная Ассамблея
    30. благотворительность: вода
    31. Хипманк
    32. MakeMyPersona
    33. TeuxDeux
    34. Бетабренд
    35. Фаблетика
    36. Эшли Стюарт
    37. Амазонка
    38. Барнс и Ноубл
    39. Слабый
    40. Нинтендо

    1.HubSpot CTA [бесплатные шаблоны]

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

    2. Эверноут

    CTA: зарегистрироваться

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

    3. Дропбокс

    CTA: зарегистрируйтесь бесплатно

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

    Благодаря простому дизайну и пустому пространству синяя кнопка призыва к действию «Зарегистрироваться бесплатно» выделяется среди всего остального на странице.Поскольку CTA и логотип Dropbox имеют одинаковый цвет, посетитель может легко интерпретировать этот CTA как «Зарегистрироваться в Dropbox». Это один из эффективных призывов к действию.

    4. OfficeVibe

    CTA: подписаться

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

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

    5. Нетфликс

    CTA: присоединяйтесь бесплатно на месяц

    Какой большой страх испытывают пользователи перед тем, как подписаться на что-либо? Что будет очень сложно отменить подписку, если она им не понравится.Netflix подавляет этот страх в зародыше с текстом «Отменить в любое время» прямо над призывом к действию «Присоединяйтесь бесплатно на месяц». Я рискну предположить, что само по себе заверение увеличило количество регистраций. Кроме того, вы снова заметите, что красный цвет основного и дополнительного CTA здесь соответствует цвету логотипа Netflix.

    6. Квадрат

    CTA: Начало работы

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

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

    7. Прези

    CTA: попробуйте Prezi

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

    8. Полный комплект

    CTA: наша работа

    Full Bundle — еще одна компания, которая использует пустое пространство, чтобы сделать свой основной CTA популярным.Белый призыв к действию «Наша работа» выделяется на фоне темно-серого фона. Их выбор CTA также является стратегическим. Учитывая, что они в первую очередь существуют для создания онлайн-присутствия клиентов, для них важно продемонстрировать свою работу — и именно для этого большинство людей заходят на их веб-сайт.

    9. Пантера

    CTA: присоединиться к

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

    10. ЭПИК

    CTA: Давайте начнем новый проект вместе

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

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

    11. Аквапрессо

    CTA: Отправить мне специальные предложения прямо сейчас!

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

    Здесь желательно, чтобы читатели их блогов проверяли, что они на самом деле продают (и, надеюсь, покупали у них). Есть много способов сделать это, в том числе разместить призыв к действию, призывающий людей: «Познакомьтесь с нашими самыми популярными продуктами!» или что-то очень прямое. Но нам нравится то, что они сделали вместо этого: их CTA предлагает читателям блога нечто гораздо более полезное и тонкое — предложение «сегодняшнего специального предложения» в обмен на адрес электронной почты читателя.

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

    (Призыв к действию выше был создан с помощью бесплатного инструмента конверсии HubSpot, Leadin. Нажмите здесь, чтобы узнать, как легко создавать CTA, подобные этому, с помощью Leadin.)

    12. QuickSprout

    CTA: вы делаете SEO неправильно? Введите свой URL, чтобы узнать

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

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

    13. Серый гусь

    CTA: откройте коктейль на свой вкус

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

    14. Домик на дереве

    CTA: получите бесплатную пробную версию

    Многие веб-сайты компаний предлагают пользователям возможность начать бесплатную пробную версию. Но CTA на веб-сайте Treehouse не просто говорит «Начать бесплатную пробную версию»; он говорит: «Получите бесплатную пробную версию.

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

    15. ОККупидон

    CTA: продолжить

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

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

    16. Блоггинг.орг

    CTA: часы обратного отсчета

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

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

    Любопытно, что происходит, когда время истекает? Я тоже. Как ни странно, ничего не происходит. Всплывающий CTA остается на странице, когда таймер доходит до нуля.

    17. ВЛИЯНИЕ Брендинг и дизайн

    CTA: что мы делаем

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

    18. Хьюмор

    CTA: запуск (не нажимать)

    Если вы зашли на веб-сайт и увидели призыв к действию «Запустить», сопровождаемый копией «Не нажимать»… что бы вы сделали? Давайте будем честными: вы бы умирали, если бы нажали на нее. Безобидная реверсивная психология здесь используется в игровой форме, что очень соответствует фирменному стилю Huemor.

    19. Брукс Бег

    CTA: Узнайте, когда у нас будет больше

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

    Brooks Running использует продуманный призыв к действию, чтобы клиенты не уходили с веб-сайта только потому, что их любимой обуви нет в наличии. На скриншоте ниже вы можете увидеть, как Брукс рекламирует потрясающую обувь с призывом к действию: «Узнайте, когда у нас будет больше». Мне нравится, как эта кнопка превращает плохие новости в возможность удержать клиентов. Без него покупатели Brooks, скорее всего, забыли бы об обуви и стали искать что-то другое.

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

    20. Округ Гумбольдт

    CTA: Следуй за волшебством
    Веб-сайт

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

    Усиливает ощущение фантастичности отснятого материала, создавая ощущение, что вы вот-вот попадете в сказку.

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

    21. Убер

    CTA: Зарегистрируйтесь для вождения | Начните ездить с Uber

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

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

    22. Спотифай

    CTA: Премиум | Играть бесплатно

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

    Это выдает не только заголовок; это также цвет их кнопок CTA.CTA «Go Premium» светло-зеленого цвета, поэтому он выделяется на странице, в то время как CTA «Play Free» просто белый и сливается с остальной частью текста на странице. Этот контраст гарантирует, что посетители будут привлечены к премиальному призыву к действию.

    23. Угмонк

    CTA: пришлите мне купоны | мне не интересно

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

    У Ugmonk есть отличный CTA для выхода, предлагающий пользователям два варианта в качестве последней возможности перед тем, как они покинут сайт. Сначала они предлагают 15% скидку на свою продукцию, а затем два варианта: «Да, пожалуйста: пришлите мне купон» и «Нет, спасибо: мне это не интересно». Очень полезно, что каждый CTA поясняет, что на самом деле означают «Да» и «Нет», и мне также нравится, что они не используют язык, вызывающий чувство вины, например «Нет, спасибо: я ненавижу природу», как я видел на других веб-сайтах.Наконец, обратите внимание, что кнопка «Да, пожалуйста» намного ярче и привлекательнее по цвету, чем другая кнопка.

    24. Пинтерест

    CTA: Продолжить через Facebook | Зарегистрироваться

    Хотите зарегистрироваться в Pinterest? У вас есть несколько вариантов: зарегистрироваться через Facebook или по электронной почте. Если у вас есть учетная запись Facebook, Pinterest хочет, чтобы вы сделали это в первую очередь. Откуда я знаю? С эстетической точки зрения я знаю, потому что синий CTA Facebook стоит на первом месте и гораздо более заметен, красочен и узнаваем благодаря фирменному логотипу и цвету.Логически я знаю, потому что, если вы входите через Facebook, Pinterest может получить данные API Facebook и получить больше информации о вас, чем если бы вы вошли через свой адрес электронной почты.

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

    25. Мадуэлл

    CTA: Отведи меня туда | Что дальше?

    Madewell (принадлежит J.Crew) всегда отличался выдающимся дизайном веб-сайта, поднимая то, что могло бы быть типичным веб-сайтом электронной коммерции, на новый уровень.Их использование CTA на своей домашней странице не является исключением.

    Когда вы впервые попадаете на страницу, вас приветствует заголовок «Я ищу…», за которым следует категория, например «Одежда, которая будет путешествовать где угодно». Под этой копией есть два варианта: «Да, возьми меня туда» или «Хм… Что дальше?» Пользователь может выбирать между двумя CTA, чтобы либо просмотреть одежду, подходящую для путешествий, либо перейти к следующему типу одежды, где он может снова играть.

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

    26. Инстаграм

    CTA: загрузите в App Store | Получить в Google Play

    Поскольку Instagram — это в основном мобильное приложение, вы увидите два черных CTA одинакового размера: один для загрузки Instagram в Apple App Store, а другой — для загрузки в Google Play. Причина, по которой эти CTA имеют одинаковый калибр, заключается в том, что не имеет значения, загружает ли кто-то приложение в App Store или в Google Play… загрузка есть загрузка, и именно для этого Instagram оптимизирует.Если у вас уже есть Instagram, вы также можете щелкнуть CTA, чтобы «Войти», если вы тоже предпочитаете этот вариант.

    27. Баркбокс

    CTA: Начало работы | сделать подарок

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

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

    28. т.к. фармацевтика

    CTA: Узнайте больше | Просмотр продуктов

    Оказывается, Red Bull не является собственной материнской компанией: она принадлежит таиландскому t.в. pharma, компания, производящая популярные энергетические напитки, напитки с электролитами, а также функциональные напитки и закуски.

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

    29. Общее собрание

    CTA: Посмотреть очные курсы | Подписаться

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

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

    30. благотворительность: вода

    CTA: Подарите с помощью кредитной карты | Подарить через PayPal

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

    CTA, размещенные на их домашней странице, используют действительно уникальный подход к предложению различных способов оплаты, предварительно заполняя 60 долларов США в однострочной форме и включая два одинаково важных CTA для оплаты с помощью кредитной карты или PayPal.Обратите внимание, что оба CTA имеют одинаковый размер и дизайн — это потому, что благотворительность: воде, вероятно, все равно, как вы жертвуете, пока вы жертвуете.

    31. Хипманк

    CTA: Авиабилеты | Отели | Автомобили | Пакеты

    Когда вы приземлитесь на сайте Hipmunk, ваш основной вариант — поиск рейсов. Но обратите внимание, что есть четыре вкладки, которые вы можете пролистать: рейсы, отели, автомобили и посылки.

    Когда вы выбираете один из этих параметров, форма изменяется, и вы можете заполнить дополнительную информацию.Чтобы быть на 100% уверенным, что вы знаете, что ищете, Hipmunk поместил ярко-оранжевый CTA в крайнюю правую часть формы. В этом CTA вы увидите узнаваемый значок самолета рядом со словом «Поиск», чтобы вы точно знали, что ищете авиабилеты, а не отели. Когда вы находитесь на вкладке отелей, этот значок меняется на значок отеля. То же самое с автомобилями и пакетами.

    32. MakeMyPersona

    CTA: Хватай шаблон! | Нет, спасибо

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

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

    33. TeuxDeux

    CTA: Начните бесплатно | Попробуйте бесплатно

    Еще один пример упрощенного дизайна. Главный веб-сайт TeuxDeux содержит одну фразу и две кнопки CTA.

    Вот и все.

    Использованы цвета компании, фон — это просто всплеск красного и немного черного.

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

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

    34. Бетабренд

    CTA: Присоединяйтесь

    Betabrand — компания по производству одежды, которая продает женские брюки для занятий йогой. Обычно бренды одежды склонны использовать похожие CTA, такие как «Купить сейчас».

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

    Это интересный способ вовлечь аудиторию и сделать что-то новое.

    35.Фаблетика

    CTA: ограниченная серия

    Этот CTA Fabletics использует несколько маркетинговых тактик: дефицит и праздник.

    На главной странице бренд анонсирует лимитированную коллекцию, приуроченную к празднику (Дню матери).

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

    36. Эшли Стюарт

    CTA: магазин лукбука

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

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

    37. Амазон Музыка

    CTA: 3 месяца бесплатно

    Это отличный пример нескольких элементов, о которых мы говорили в одном CTA.

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

    С помощью этого CTA Amazon продвигает один из своих продуктов и услуг на своей домашней странице вместо других продуктов, выставленных на продажу на сайте.

    Единственное сообщение, которое они хотят донести? Что вы можете попробовать их продукт, Amazon Music, бесплатно в течение целых трех месяцев. Этот CTA достигает этой цели благодаря простому дизайну.

    38. Барнс и Ноубл

    CTA: Купить сейчас

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

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

    Кроме того, графика и шрифты интересны и соответствуют посылу бренда.

    39. Провисание

    CTA: Узнать больше | Свяжитесь с нами

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

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

    Это отличный пример обслуживания двух аудиторий с помощью CTA на главной странице.

    40. Нинтендо

    CTA: сравнение функций

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

    На самом деле, одним из основных CTA является «Сравнить функции».» Этим CTA Nintendo отвечает на один из своих самых популярных вопросов, потому что понимает, что многие посетители все еще изучают информацию, прежде чем покупать продукт.

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

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

    Хотите больше вдохновения для дизайна CTA? Ознакомьтесь с некоторыми из наших любимых примеров призыва к действию HubSpot.

    Примечание редактора: этот пост был первоначально опубликован в июне 2014 года и обновлен для полноты.

    Почему мы выбираем кнопку «Просмотреть больше» вместо разбиения на страницы

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

    Проблемы с нумерацией страниц:

    1. Очень немногие пользователи когда-либо используют ссылки на страницы — хотя каждое исследование зависит от своего собственного уникального контекста, я обычно вижу цифры около 5%. Даже если пользователи знают, что есть еще результаты, большинство просто предполагает, что если то, что им нужно, не находится среди первых нескольких результатов, им следует попробовать в другом месте (или изменить параметры поиска).
    2. Ссылки на страницы требуют перезагрузки всей страницы, прежде чем предлагать следующий набор вариантов.
    3. Ссылки на страницы обычно предлагают пользователю запутанную серию вариантов: «<< 1 2 3 >>».Хочу ли я увидеть следующую страницу, страницу 2 или перейти на страницу 3? И сколько там страниц точно?
    4. Большинство ссылок на страницы имеют кнопку «Просмотреть все» для пользователей, которые хотят видеть все на странице сразу; с большим количеством результатов (и часто вы не можете контролировать результаты, например, если кто-то ищет что-то очень обычное), страдает время загрузки, и страница может легко сломаться.
    5. Ссылки на страницы имеют конфликтующую визуальную проблему: они создают беспорядок (как правило, они должны идти вверху и внизу страницы; отдельные элементы страницы состоят из множества разных ссылок) и труднодоступны (обычно болтаются на дальнем конце страницы). правильно и может легко смешиваться с другими элементами страницы).

    Преимущества кнопки «Подробнее»

    1. Использует AJAX для быстрой загрузки дополнительных результатов. Остальная часть страницы остается на месте.
    2. Предлагает единственный однозначный выбор.
    3. Позволяет пользователю просматривать все варианты одновременно, не напрягая загрузку страницы; просто требует нажатия на кнопку несколько раз (если вы беспокоитесь о том, чтобы заставить пользователя нажимать кнопку десять раз, спросите себя, почему пользователь хочет видеть более 100 вариантов одновременно; у вас, вероятно, другая проблема с удобством использования).
    4. Ненавязчивый визуально (одна кнопка внизу страницы), который легко найти (когда пользователь доходит до конца списка, кнопка — это следующее, что он видит). Пользователи, которым интересны только первые несколько результатов (большинство из них), никогда не увидят кнопку. (Кстати, это хорошо — в идеале пользователь видит только нужный ему функционал, в тот момент, когда он этого хочет.)

    Предостережения и предупреждения (моя любимая часть)

    1. Ничто не является универсальным решением, и есть случаи, когда нумерация страниц работает лучше.Например, при отображении карты Google (и результаты не могут растягиваться вниз по странице).
    2. Разбивка на страницы позволяет пользователям ссылаться на определенный набор результатов («Вот третья страница моих результатов!»), а кнопка «Просмотреть больше» — нет. Но это маловероятное действие пользователя (если вашему пользователю нужно отправить 3-ю страницу своих результатов другу, возможно, вы делаете что-то еще неправильно).
    3. Кнопки «Просмотреть больше» следует использовать только в тех случаях, когда заголовок дает понять, сколько результатов/элементов на странице («804 ресторана»).Не уподобляйтесь 37 Signals и не оставляйте своих пользователей в догадках, когда у них закончатся результаты. (Но динамические счетчики, которые обновляются при каждом нажатии кнопки «Просмотреть больше», вероятно, являются излишними; мне не нужно точно знать, сколько еще есть результатов или где я нахожусь в списке — общее представление обычно больше, чем отлично.)

    Обратная связь

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

    Кнопка «Загрузить больше» и бесконечная прокрутка в Gatsby

    21 декабря 2020 г. • 3 мин.

    Кнопки «Загрузить больше» и бесконечная прокрутка — распространенные шаблоны пользовательского интерфейса на веб-сайтах с большим объемом контента.Это повышает производительность загрузки страниц и позволяет пользователям динамически просматривать больше контента по мере необходимости.

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

    Возможно, что-то подобное покажется вам знакомым.

     

    {posts.map((post) => (

    ))}

    Если на вашем сайте 10, 20 или даже 50 сообщений, это не проблема, которую стоит решать. Но в конце концов вы начнете сталкиваться с проблемами производительности по мере увеличения размера и сложности рендеринга DOM. Я начал замечать это примерно после 100 «постов» в проекте, над которым работал. Один из способов решить эту проблему — реализовать кнопку «Загрузить больше» или бесконечную прокрутку (есть и другие решения, которые вы могли бы рассмотреть, например, разбиение на страницы или окно реакции).

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

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

    Поехали!

    Кнопка «Загрузить больше»

    Вот рабочий код для версии нашей новостной ленты с кнопкой «Загрузить больше».

     

    import React, { useState, useEffect } from "react"

    import { useStaticQuery, graphql } from "gatsby"

    import Article from "../components/article"

    const Page = () => {

    const data = usestaticquery (graphql`

    {

    {

    allnewsjson {

    ID

    ID

    Дата

    Автор

    Summary

    }

    }

    }

    `)

    const allNews = данные.allNewsJson.nodes

    const [список, setList] = useState([...allNews.slice(0, 10)])

    const [loadMore, setLoadMore] = useState(false)

    const [hasMore, setHasMore] = useState(allNews.length > 10)

    const handleLoadMore = () => {

    setLoadMore(true)

    }

    useEffect(() => {

    if (loadMore & currentLengthength) =

    7 const list.length

    const isMore = currentLength < allNews.длина

    const nextResults = isMore

    ? allNews.slice(currentLength, currentLength + 10)

    : []

    setList([...list, ...nextResults])

    setLoadMore(false)

    }

    }, [loadMore, hasMore])

    useEffect(() => {

    const isMore = list.length < allNews.length

    setHasMore(isMore)

    }, [список])

    return (

    Load

    7

    7 больше демо

    {список.map((article) => (

    ))}

    {hasMore ? (

    ) : (

    Больше результатов нет

    )}

    )

    07

    экспорт по умолчанию Страница

    Давайте рассмотрим, что здесь происходит.Для начала данные берутся из GraphQL, а затем назначаются переменной allNews . Это массив всех новостных статей, и обычно в Гэтсби вы останавливаетесь здесь и просто сопоставляете этот массив для отображения ваших данных.

    Дальше идет дополнительная реализация.

    Есть три хука useState для управления состоянием — list , loadMore и hasMore . Список представляет собой массив статей, отображаемых в DOM.loadMore — это логический флаг, запускающий загрузку новых новостных статей в наш список. hasMore — это логический флаг для отслеживания того, есть ли еще статьи для загрузки.

    Далее идет простая функция handleLoadMore , которая устанавливает логическое значение loadMore в значение true при нажатии кнопки.

    Есть два хука useEffect. Наш первый хук запускается при изменении логического значения loadMore. Он добавляет еще 10 новостных статей в отображаемый список. Второй хук запускается каждый раз, когда отображаемый список изменяется, и проверяет, есть ли еще статьи для отображения.Работая вместе, эти два хука контролируют основную логику этой кнопки «Загрузить больше».

    Наконец, логическое значение useMore используется в качестве тернарного оператора в JSX для условного отображения либо кнопки «Загрузить больше», либо предупреждения пользователя о том, что статей больше нет.

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

     

    импортировать React, {useState, useEffect, useRef} из "реакции"

    импортировать {useStaticQuery, graphql} из "гэтсби"

    импортировать статью из "../components/article "

    const page = () => {

    const data = usesticaticquery (graphql`

    allnewsjson {

    allnewsjson {

    all {

    ID

    Название

    Дата

    Автор

    сводка

    }

    }

    }

    `)

    const allNews = data.allNewsJson.nodes

    const [list, setList] = useState([...allNews.slice(0, 10)])

    const [loadMore, setLoadMore] = useState(false)

    const [hasMore, setHasMore] = useState(allNews.length > 10)

    const loadRef = useRef()

    const handleObserver = (entities) => {

    const target = entity[0]

    if (target.isIntersecting) {

    setLoadMore(true)

    }

    = {ffect() >

    use()

    var options = {

    root: null,

    rootMargin: "20px",

    порог: 1.0,

    }

    constObserver = новый IntersectionObserver(handleObserver, options)

    if (loadRef.current) {

    Observer.observe(loadRef.current)

    }

    use

    6 () => {

    if (loadMore && hasMore) {

    const currentLength = list.length

    const isMore = currentLength < allNews.length

    const nextResults = isMore

    ? allNews.slice(currentLength, currentLength + 10)

    : []

    setList([...list, ...nextResults])

    setLoadMore(false)

    }

    }, [loadMore, hasMore])

    67 useEffect(() => {

    const isMore = list.length < allNews.length

    setHasMore(isMore)

    }, [list])

    return (

    Загрузить еще демо

    {список.map((article) => (

    ))}

    { имеет больше ?

    Загружается...

    :

    Нет результатов

    }

    )

    }

    экспорт по умолчанию Страница

    Наш Код очень похож на кнопку «Загрузить больше» с несколькими ключевыми отличиями.Мы заменили кнопку на

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

    Вот оно. Простая и эффективная кнопка загрузки и бесконечная прокрутка для вашего сайта Gatsby.

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

    Удачного кодирования!

    Шпаргалка пользовательского интерфейса: нумерация страниц, бесконечная прокрутка и кнопка «Загрузить еще» | Тесс Гэдд

    Из-за того, что я много часов занимаюсь покупками в Интернете (я подозреваю, что в одиночку поддерживаю работу местного малого бизнеса во время блокировки COVID-19), я могу с уверенностью сказать, что разбиение на страницы по-прежнему остается самым популярным способом отображения продуктов.И если вы мне не верите, Smashing Magazine тоже так говорит.

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

    2.1. Информационный бюллетень

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

    Плюсы:

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

    Минусы:

    • Люди считают, что это медленно и долго загружается. (ссылка)
    • Если судить по результатам поиска Google, ничего на странице 2 может и не быть. При этом, если я что-то покупаю, я буду кликать по каждому. Проклятие. Страница.
    • Будучи довольно «старым» шаблоном, я подозреваю, что большинство людей считают его немного старомодным по сравнению с бесконечной прокруткой и отложенной загрузкой.
    • Элементы навигации на мобильных устройствах должны быть проще из-за толстых пальцев (а может это только у меня? *быстро прячет руки*).

    Интересно:

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

    Популярно у:

    • Электронная коммерция
    • Результаты поиска
    • Справочные каталоги

    2.2. Сколько элементов должно быть на странице

    Итак, сколько элементов должно быть на вашей странице? Что ж, это будет зависеть от нескольких факторов: а) вы используете сетку или список, б) есть ли у вас компонент «элементов на странице»? c) Насколько велики ваши предметы?

    Ниже приведен список того, сколько элементов загружается на страницу на следующих сайтах:

    Представление в виде сетки
    Sears: 50
    Toy’s R Us: 100
    Shutterstock: 27
    Amazon: 48

    Представление в виде списка : 20
    Alibaba: 48
    CNN: 10
    Поиск Google: +/- 10 элементов (в зависимости от того, считаете ли вы рекламу)
    Amazon: 16

    Представление в виде сетки с компонентом «элементов на странице»
    Macy’s: 60 ( по умолчанию) или 120
    Superbalist: 24 (4 по горизонтали) (по умолчанию) или 72 (6 по горизонтали) или 72 (8 по горизонтали)
    Newegg: 36 (по умолчанию) или 60 или 90
    Currys PC World: 20 (по умолчанию) или 30 или все
    Wondery: 10 или 20 (по умолчанию) или 50 или 100
    Foyles: 10 или 20 (по умолчанию) или 50 или 100 или 200
    Barns & Noble: 20 (по умолчанию) или 40 page» компонент
    eBay: 25 или 50 (по умолчанию) или 100 или 200

    Приведенные выше подсчеты «элементов на странице» были собраны 14 мая 2020 года.

    Вопрос: Итак, каково идеальное количество элементов для отображения на странице?

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

    2.3. Компонент: Навигация

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

    Пример навигации по страницам

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

    Пример навигации по страницам на мобильных устройствах

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

    Пример компонентов навигации по пагинации на первой странице: на верхней отключена кнопка «Назад», на нижней кнопка скрыта.

    ВАМ НУЖНО ЭТО ДЛЯ РАЗБИВКИ НА СТРАНИЦЫ? Да.Без него вы не сможете перемещаться по страницам.

    2.4. Компонент: Фильтры

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

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

    Пример верхних фильтров

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

    Пример боковых фильтров

    ВАМ НУЖЕН ЭТО ДЛЯ РАЗБИВКИ НА СТРАНИЦЫ? Это ожидаемый элемент, но не обязательный.

    2.5. Компонент: Сортировка

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

    Пример сортировки

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

    • Самые актуальные
    • Самые популярные
    • Большинство посмотрели
    • Большинство отзыв
    • Самый рейтинг
    • Большинство погашено
    • Новейшие
    • Самая низкая цена
    • Высшая цена
    • Алфавитный Алфавит: AZ
    • Алфавит по имени: AZ
    • Алфавит по фамилии : AZ
    • Самый высокий балл
    • Самый низкий балл

    И т.д.

    ВАМ НУЖЕН ЭТО ДЛЯ РАЗБИВКИ НА СТРАНИЦЫ? Это ожидаемый элемент, но не обязательный.

    2.6. Компонент: Элементов на странице

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

    2.7. Компонент: Отображение результатов

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

    Пример отображения компонента результатов

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

    Пример комбинации показа результатов и элементов на странице компонента

    ВАМ НУЖНО ЭТО ДЛЯ РАЗБИВКИ НА ПАГИНАЦИИ? Ожидается, но не требуется.

    2.8. Компонент: Переключатель сетки в список

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

    Пример компонента переключения сетки или списка

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

    Пример компонента ширины сетки

    НУЖЕН ЛИ ВАМ ЭТО ДЛЯ РАЗБИВКИ НА СТРАНИЦЫ ? Приятно иметь, но определенно не обязательно.

    2.9. Компонент: Алфавитный указатель

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

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

    Ваш адрес email не будет опубликован.