Темные паттерны: раскрытие теневой стороны Интернета

Мы любим сеть. Нам всем пришлось бы искать разные профессии, если бы не удивительное изобретение сэра Тима Бернерса Ли! Однако, несмотря на нашу страсть, Интернет может быть неприятным местом.

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

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

Это наши любимые мозоли.

Неинтуитивные пользовательские интерфейсы

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

«Установи наше приложение!»

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

1. Огромная кнопка «Использовать наше приложение». Нажав на нее, вы попадете в AppStore, где вы должны одобрить, загрузить, установить, а затем запустить собственное приложение сайта (при условии, что оно поддерживается на вашем телефоне). Затем вы должны войти в систему, ввести неправильный пароль, запросить сброс, открыть ссылку, создать новый пароль и получить доступ к системе. Возможно, вы забыли, почему вы были там, поэтому вернитесь к исходному предупреждению и начните заново.
2. Микроскопическая ссылка «Продолжить в мобильной сети» для выполнения действия.

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

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

«Хотите получать уведомления?»

Одним словом: Нет.

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

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

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

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

Причудливая навигация

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

Пожалуйста, пересмотрите свой дизайн, если вам нужно подсказывать пользователям всплывающие подсказки «нажмите здесь» или другие методы помощи. Хорошие интерфейсы не нуждаются в объяснении.

Ненужный прокрутки

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

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

Анимация также может вызывать укачивание и головокружение, поэтому рассмотрите возможность использования медиа-запроса CSS prefers-reduced-motion для отключения эффектов.

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

Ненужные многостраничные статьи

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

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

Манипулятивный маркетинг

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

Проблемы с подпиской

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

Замаскированная реклама

На многих сайтах часто используется реклама, но худшие примеры:

1. Выглядеть как меню или опция;
2. Притворяться новостями или информационными статьями с исходного сайта; или
3. Показывать элементы управления пользовательского интерфейса, такие как большая кнопка «СКАЧАТЬ», на странице о программном продукте.

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

Автоматическое добавление товаров в корзину

Просмотр списка связанных или рекомендуемых продуктов может быть полезен. Другое дело — добавить их в корзину пользователя без его согласия. Сколько людей найдут это полезным?

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

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

Скрытые расходы на покупки

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

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

Таймеры искусственного дефицита и доступности запасов

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

"КУПИ СЕЙЧАС! 2 товара в наличии, 15 были куплены за последние 3 минуты, и эту страницу просматривают 597 человек».

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

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

Отказ от позора

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

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

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

Сложная отмена файлов cookie

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

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

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

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

Ужасная технология

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

Нарушение функциональности браузера

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

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

Другие проблемы, которых следует избегать:

1. Не отключайте контекстное меню или меню длительного касания.
2. Не отключайте копирование и не добавляйте дополнительный «полезный» текст.
3. Не нарушайте закладку в своем одностраничном приложении, не обновляя URL-адрес.

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

Отключение вставки в поля пароля

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

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

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

Глупые ограничения пароля

«Ваш пароль должен содержать от 8 до 12 символов и требует по крайней мере один символ верхнего регистра, цифру и символ — но, пожалуйста, не используйте ` ' » / \ или ;»

Нет веских причин для введения строгих ограничений пароля. Спроси себя:

1. Сохраняет ли система пароль в виде простого текста в базе данных, а не хэширует его?
2. Предлагал ли эксперт по безопасности запретить людям использовать простые пароли, такие как пароль , qwerty или 123456 ? Это правда, но это также не позволяет людям использовать более сложные пароли и предоставляет удобный шаблон для взлома методом грубой силы.

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

Скачок мобильного контента

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

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

Метрика Google Cumulative Layout Shift (CLS) измеряет скачки контента и соответственно наказывает сайты. Это была сложная проблема, но теперь доступно несколько технических решений:

• Добавьте атрибуты ширины и высоты к элементам HTML img и iframe или используйте свойство aspect-ratio CSS, чтобы зарезервировать место на странице перед загрузкой ресурса.
• Установите размеры для элементов-контейнеров, содержащих медленно загружаемые ресурсы, такие как реклама, изображения и виджеты социальных сетей.
• Запрашивайте изображения большего размера как можно раньше и рассмотрите возможность использования ссылок предварительной загрузки в head HTML.
• Оптимизируйте использование веб-шрифтов и используйте запасные варианты аналогичного размера, чтобы свести к минимуму сдвиги макета.
• Избегайте вставки элементов вверху страницы, если только это не обновление модели DOM, вызванное действием пользователя, например щелчком мыши.
• Используйте сдерживание CSS для оптимизации рендеринга блоков контента. Можно определить элементы, которые не будут влиять на размер или положение других.

Когда вход через социальные сети отстой

Такие технологии, как OAuth, позволяют пользователям быстро регистрироваться на сайте, используя другую учетную запись, такую ​​как Google, Facebook, Twitter, LinkedIn или Github. Хорошо реализованный, это практичный вариант, который обеспечивает более гладкий процесс регистрации, экономит время и приводит к более высоким конверсиям.

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

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

Плохая веб-производительность

Согласно HTTP-архиву, средняя загрузка веб-страницы на настольном устройстве занимает семь секунд, а на мобильном — двадцать секунд. Один просмотр страницы делает 70 HTTP-запросов, загружает более 2 МБ данных и выбрасывает в атмосферу 1,3 г CO² (см. Калькулятор углерода на веб-сайте). Это средний показатель — многие сайты хуже.

Никто не ставит перед собой цель сделать сайт медленным, но добавление функций часто важнее улучшения производительности. Учитывая, что можно создать играбельный клон Quake размером 13 КБ, вы должны задаться вопросом, почему два абзаца маркетинговой болтовни на странице «О нас» требуют загрузки в 154 раза больше!

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

Подлые виджеты социальных сетей

Виджеты социальных сетей, такие как кнопки «Нравится», выглядят невинно, но:

1. Каждый из них добавляет сотни килобайт кода JavaScript, что влияет на производительность страницы.
2. Код представляет собой угрозу безопасности, поскольку он работает с теми же разрешениями, что и JavaScript сайта.
3. Виджеты реализуют отслеживание пользователей, даже если они не активированы. Это может привести к юридическим проблемам на некоторых территориях.
4. Их почти никто не использует: вам повезет, если вы увидите 1% вовлеченности пользователей.

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

• Электронная почта: mailto:?subject=[title]&body=[url]
• Фейсбук: https://www.facebook.com/sharer.php?u=[url]
• Твиттер: https://twitter.com/share?url=[url]&text=[title]
• LinkedIn: https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Реддит: https://reddit.com/submit?url=[url]&title=[title]

Где [url] — URL текущей страницы, а [title] — основной заголовок. Стандартная ссылка <a> работает нормально, но вы можете улучшить ее, чтобы открывать страницу во всплывающем окне, если вы хотите, чтобы они вели себя идентично стандартным кнопкам.

CAPTCHA

CAPTCHA — это сокращение от «Полностью автоматизированный публичный тест Тьюринга, чтобы отличить компьютеры от людей». Это помогает предотвратить доступ ботов или других машин к веб-системам. Вас часто просят ввести текст, показанный на неразборчивом изображении, или щелкнуть квадраты, на которых изображены велосипеды. (Велосипед, закрепленный на машине, считается? А что насчет трехколесного велосипеда? За этой стеной есть велосипед!?)

У CAPTCHA есть три фундаментальные проблемы:

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

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

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

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

Резюме

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

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

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

Есть ли какие-нибудь другие мысли о темных паттернах, с которыми вы столкнулись? Пожалуйста, поделитесь ими в разделе комментариев ниже!