Как избежать темных паттернов при разработке дизайна сайта
Подавляющее большинство современных компаний, занимающихся разработкой сайтов, стараются честно предоставить безупречный пользовательский опыт. Некоторые, напротив, идут на все, чтобы повысить конверсию. Вплоть до обмана клиентов с целью заставить их совершать определенные действия.
Киберпреступники представляют угрозу во всех формах цифровых взаимодействий. Ряд неэтичных методов разработки сайтов также граничит с преступностью. Узнав, что такое «темные паттерны» и как их устранить, вы сможете помочь своему бренду избежать этого невероятно вредного для репутации явления.
Темные паттерны
Пользовательский интерфейс (UI) – один из важнейших элементов веб-дизайна. Сайты и приложения используют темные UI/UX-паттерны, чтобы обмануть посетителей и заставить их ошибочно подписаться или приобрести что-либо. Использование подобных приемов при создании пользовательского интерфейса скрывает реальные цели сайта и/или корпорации до тех пор, пока не становится слишком поздно.
Google начал штрафовать сайты, использующие «навязчивые межстраничные объявления» наподобие всплывающей рекламы или диалоговых окон для сбора адресов электронной почты. Эти грязные методы уже давно надоели пользователям, и поисковые системы это заметили.
Давайте рассмотрим самые распространенные темные паттерны.
1. Кликбейт
Кликбейт – один из самых старых приемов, но пользователи продолжают на него попадаться. Это веб-контент (как правило, ссылки), призванный вызвать у читателя интерес и побудить его нажать на кнопку, чтобы перейти на страницу с гораздо менее интересным или и вовсе нерелевантным содержанием.
Многие люди овладели искусством создания контента, вводящего в заблуждение. Он используется для того, чтобы обмануть, одурачить или запутать пользователей, а в конце концов заставить их совершить определенные действия. Чаще всего мы сталкиваемся с подобным контентом во время процедуры отписки от рассылки новостей и маркетинговых материалов. Многие сайты перенаправляют читателей на страницу отказа от подписки, чтобы запутать их многоэтапной процедурой и/или кнопками с названиями, которые вводят в заблуждение.
Кликбейт использует интригующий контент и ключевые слова в качестве наживки для привлечения аудитории. Когда читатель клюет на нее, компания затягивает его в ловушку – обычно с помощью всплывающей рекламы и форм для ввода адресов электронной почты. Кликбейтные статьи не оправдывают своих обещаний. В некотором смысле они обманчивы. Такие материалы привлекают пользователя громкими заголовками, чтобы заставить его перейти по ссылке.
2. Конфермшейминг (confirm shaming)
Конфермшейминг (с англ. confirm – подтверждение, shaming – стыдить) – один из наиболее очевидных темных паттернов современных сайтов. Он проявляется в виде формы для получения адреса электронной почты (всплывающее окно, запрашивающее e-mail перед открытием страницы) с сообщением, которое должно вызвать стыд у отказавшихся пользователей.
Confirm shaming заставляет читателей почувствовать себя ужасно из-за того, что они не ввели свой адрес электронной почты – иначе говоря, не подчинились маркетинговой стратегии компании.
Конфермшейминг может показаться вполне невинной техникой передачи сообщения, но на самом деле он вызывает у клиентов разочарование, недовольство и обиду. Такие всплывающие окна вредят продажам и в современном веб-дизайне считаются недопустимыми.
3. Тараканьи ловушки (roach motels)
Еще один распространенный темный паттерн в интернете – тараканьи ловушки. Этот прием веб-дизайна агрессивно призывает посетителей присоединиться или подписаться, но впоследствии отменить это действие невероятно трудно. Такой подход называют «roach motel» в честь ловушки для тараканов, из которой нельзя выбраться. Человек может с легкостью подписаться на рассылку, но если он передумает, то вряд ли сможет отписаться от нее.
4. Вопросы с подвохом
«Вопросы с подвохом» – распространенный среди веб-дизайнеров прием, который вынуждает клиента снимать галочки, чтобы отказаться от получения маркетинговых материалов.
Маркетологи намеренно добавляют непоследовательные поля для ввода данных, чтобы ввести пользователей в заблуждение.
Так они повышают вероятность того, что человек непреднамеренно даст согласие на получение дополнительных электронных писем или рекламных материалов. После того, как пользователь поймет, что он сделал, ему придется потрудиться, чтобы найти кнопку отказа от подписки. Кроме того, в качестве единственного способа исправить ситуацию компания может заставить клиента позвонить в службу поддержки.
5. Скрытые платежи
Это скрытые сборы, которые добавляются в корзину вместе с основными продуктами и не отображаются до тех пор, пока пользователь не достигнет стадии оформления заказа.
6. Принудительное продолжение
Этот темный паттерн возникает, когда человека заставляют платить за принадлежность к определенной группе без его согласия.
Например, пользователь решает воспользоваться бесплатной пробной версией продукта, а после ее окончания ему автоматически выставляется счет за платную услугу. Вместо предупреждения ему сразу приходит уведомление о списании средств со счета.
Действительно неэтично.
Этот метод аморален и его следует избегать при предоставлении пробных услуг.
Заключение
Темные паттерны обманывают людей, затрудняя отключение услуг или и вовсе не давая возможности отказаться от них. Они вызывают у клиентов недоумение, злобу и сводят с толку. При разработке веб-дизайна настоятельно рекомендуется полностью отказаться от использования темных паттернов.
Выберите другой путь, если считаете, что ваша маркетинговая стратегия неэтична. Темные паттерны в пользовательском интерфейсе плохо встречаются пользователями, поисковыми системами и самыми популярными социальными сетями. В итоге сомнительные методы приводят к негативным последствиям.
Каталог готовых паттернов WordPress для создания сайта
Больше результатов…
Создавая свой веб-сайт с нуля, можно взгромоздить на себя непосильную ношу, пытаясь разработать визуальный макет. А можно создать свой сайт, используя код, но этот метод довольно сложный для не разработчиков.
С помощью каталога макетов блоков WordPress можно получить доступ к пользовательским примерам, быстро создавать страницы и записи сайта. Эта функция имеет подкатегории, что упрощает поиск столбцов, галерей, текстовых полей и других элементов.
Что такое паттерны WordPress
Каталог паттернов – это набор готовых макетов, которые можно бесплатно добавить на любой сайт WordPress:
Эти готовые макеты состоят из блоков содержимого, таких как заголовки, абзацы и изображения, добавляемых в блочном редакторе. Сгруппированные вместе, они называются паттернами, определяющими основные компоненты и внешний вид страниц или записей сайта.
Каталог стал доступен для всех пользователей с обновлением WordPress 5.8, теперь в их распоряжении будут разные категории, включая кнопки, заголовки, галереи и изображения. Готовые варианты гибкие и настраиваемые: можно настроить параметры под дизайн сайта, т.е. создать структуру, а затем изменять небольшие настройки.
Кроме того, каталог позволяет делиться своими паттернами – можете создать разные варианты и загрузить их в общий депозитарий.
Если хотите разрабатывать шаблоны и делать их доступными для других пользователей, применяйте Block API.
Как использовать паттерны WordPress (2 способа)
Есть два простых способа получить доступ к этому каталогу и использовать его готовые элементы. Рассмотрим каждый метод более подробно.
1. Скопируйте и вставьте элементы
Один из самых простых способов получить доступ к паттернам – скопировать их из каталога и вставить на свои страницы или записи. Этот метод полезен тем, кто ищет вдохновение и идеи перед выбором конкретных решений.
В каталоге можно искать элементы по категориям или ключевым словам. Например, нажав «Галерея», увидите все связанные паттерны:
Аналогично можно щелкнуть нужный образец. Это действие приведет вас на новый экран, где выберите Копировать паттерн:
В качестве альтернативы можете сохранить понравившейся вариант и применить его позже.
Для этого необходимо войти в свою учетную запись WordPress или создать новую. Затем нажмите «Добавить в избранное», и образец блока сохранится в личной библиотеке:Чтобы успешно скопированный вариант, вернитесь в свою панель управления WordPress и откройте новую страницу или публикацию, перейдя в «
Теперь можете вставить новый паттерн, щелкнув страницу правой кнопкой мыши и выбрав «Вставить». Также можете использовать клавиши ctrl + v, после чего он появится на странице или в записи сайта, как показано ниже:
По необходимости можете отредактировать сохраненный вариант, изменив настройки в верхней части макета. Например, с помощью готового паттерна галереи можно изменить выравнивание столбцов, изображения и написанного текста. Не забудьте сохранить изменения, когда будете готовы.
Смотрите также:
Multicollab – Google Doc-Style Editorial Commenting для Гутенберга.
2. Выберите паттерны WordPress на панели вставки блоков
Как вариант, можно выбрать готовые блоки в редакторе WordPress. Возможно, вы предпочтете этот метод, если уже работаете над публикацией или страницей. Таким образом, можно добавлять новые элементы, не покидая рабочего пространства.
Начните с нажатия на знак плюса (+), чтобы добавить новый элемент:
Чтобы открыть панель вставки, выберите «Просмотреть все». Отсюда щелкните Паттерны, и вам откроются доступные параметры:
По умолчанию на панели отображаются блоки, соответствующие теме вашего сайта, например Twenty Twenty. Используя раскрывающееся меню, выберите одну из представленных категорий:
Выберите элемент, щелкнув по нему или перетащив вправо:
Как упоминалось ранее, можно редактировать любую часть паттерна WordPress. Например, если вы используете опцию «Цитата», то смело изменяйте изображение, текст и выравнивание этого элемента.
При создании страниц и записей веб-сайта WordPress необходимо определить размещение различных элементов, таких как заголовки и текст. С помощью каталога паттернов можно выбирать подходящие готовые варианты, что позволит создать свой уникальный сайт в кратчайшие сроки.
Источник: torquemag.io
Смотрите также:
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/
Подпишитесь на еженедельный дайджест про WordPress
шаблонов сайтов | Адаптивные шаблоны дизайна
Вдохновитесь набором дизайнерских шаблонов веб-сайтов.
шаблоны
каркасы
Бланк. / Ретранслятор / Лайтбокс / Видеобокс
Link in Bio
Interactions / One Pager / Layouter
Design Collection
Form / Stack / Sticky Position
Fashion Store
Интернет-магазин / Repeater / Sticky Position
Cyber Security Company
Blog / Forms / Repeater Sticky Position / Transparent Video
Компания по планированию мероприятий
Forms / Sticky Position
Artist
Sticky Position
Gaming Startup
Sticky Position / Transparent Video / Gallery / Form / Lightbox
Fintech Company
Блог / Лайтбокс / Sticky Position / Transparent Video / Repeater
Tech Company
Sticky Position / Form / Transparent Video / Repeater
Interior Design Firm
Sticky Position / Lightbox
3
Tech Company Видео / Sticky Position / Lightbox
Запуск продукта
One pager / Lightbox / VideoBox
Студия йоги и медитации
Бронирование / События / Платные планы / Sticky Position / Repeater / Gallery
Компания SAAS
Sticky Position / Lightbox / Transparent Video
Магазин цветов
Интернет-магазин / блог / Sticky Position
Креативное агентство
Sticky Position / Lightbox / Form
Финансовая компания / Lightbox Sticky
9000Агентство недвижимости
Ретранслятор / Лайтбокс / Sticky Position
Брендинговое агентство
Галерея / Форма
Магазин электроники
Формы / Интернет-магазин / Repeater / Sticky Position
Фирма ландшафтной архитектуры
Галерея/Лайтбокс/Видеобокс
Магазин красоты
Интернет-магазин/Блог/Лайтбокс
Портфолио дизайна
Sticky Position/Lightbox/VideoBox
Digital Agency
Lightbox/VideoBox 3 900
Product Landing Page
One Pager / Transparent Video
Ювелирный магазин
Интернет-магазин / Sticky Position / Lightbox
Fitness Studio
Бронирование / липкая позиция / Lightbox
Artist Showcase
Интернет -магазин / Lightbox
Food Tech Company
Sticky Position / Blog / Lightbox / Form / Repeater
Photography Portfoli Галерея / Лайтбокс / Видеобокс
Модельное агентство
Прилепленная позиция / Галерея / Форма
Скоро появится целевая страница
Прозрачное видео / One Pager / Лайтбокс
в ближайшее время целевой страница
Липкое положение / одно пейджер / прозрачное видео
Spa & Beauty Salon
Бронирование / липкое положение / галерея
Запуск продукта
Lightbox / Form
Visual Portfolio
/ Stack
Fashion Store
Интернет-магазин / Sticky Position / Lightbox
Музыкальный фестиваль
События / Transparent Video / Sticky Position
Кулинарный консультант
Блог / Форма
Магазин аксессуаров
Интернет-магазин / Блог / Sticky Position / Lightbox
Скоро появятся другие шаблоны веб-сайтов.
