12 октября 2018

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

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

UX design Noveo translation

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

Когда речь идет о прибыли, некоторые компании готовы на все, чтобы завлечь людей в свои сети. Но работает ли вообще такого рода бизнес-тактика?

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

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

Что такое темные паттерны?

Авторство термина принадлежит Гарри Бригналлу (Harry Brignull), UX-исследователю. Согласно Бригналлу, “темные паттерны — это уловки, используемые на веб-сайтах и в приложениях, заставляющие вас купить или подписаться на что-то незапланированное”.

Гарри Бригналл разработал целый веб-сайт, посвященный худшим из худших темных паттернов:

harry-brignull-dark-patterns
Пример темного паттерна “Заманить и подменить” у Microsoft (Источник: Dark Patterns)

Как вы видите, Бригналл определил один из типов темных паттернов, используемых в веб-пространстве. Конкретно этот пример — используемый в компании Microsoft поп-ап “Заманить и подменить” (“bait-and-switch”), который ведет себя не так, как следует. Ниже я поясню, почему это обернулось огромной проблемой для пользователей Microsoft.

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

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

1. Заманить и подменить

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

В Microsoft использовали эту тактику пару лет назад, пытаясь убедить пользователей обновить версию системы до рекомендованной Windows 10 (скриншот с сайта Бригналла иллюстрирует именно это). Пользователи жаловались, что при нажатии на “Х” в углу поп-апа система обновлялась автоматически, без их согласия. Кнопка “Х” должна была означать, что пользователь не хотел делать следующий шаг, а на самом деле означала противоположное.

Вообще-то для того, чтобы все системы работали быстро и надежно, обновлять ПО не обязательно. Однако, обманом заставляя пользователей сделать обновление, которого они не хотят или к которому не готовы, вы можете столкнуться с серьезными последствиями, если что-то пойдет не так. Одна женщина отсудила 10000$ в качестве компенсации ущерба, причиненного обновлением Windows ее системе.

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

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

joinme-live-chat-1
Join.me спрашивает, хочу ли я пообщаться с кем-то в живом чате (Источник: join.me)

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

joinme-live-chat-2
Join.me стартует живой чат при клике на “X” (Источник: join.me)

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

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

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

2. Подтверждение-унижение (Confirmshaming)

Confirmshaming довольно широко использовался в модальных окнах около года или двух назад. Пользователи видели поп-ап с двумя опциями:

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

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

Но вот, например, компания Social Media Examiner до сих пор использует этот поп-ап с двумя кнопками в мобильной версии своего сайта:

social-media-examiner-shaming
Social Media Examiner “стыдит” пользователя, желающего нажать “нет” (Источник: Social Media Examiner)

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

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

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

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

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

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

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

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

Согласно Федеральной торговой комиссии США, “если между рекомендателем и рекламодателем есть “материальная связь”, — иными словами, связь, которая может повлиять на восприятие пользователями взвешенности или объективности отзыва, — эта связь должна быть отражена четко и ясно, за исключением тех случаев, когда это понятно из контекста коммуникации”.

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

Пример, которым я хочу поделиться, взят с сайта Travel & Leisure.

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

travelleisure-ad-1
Travel & Leisure включает в статью привлекательные фотографии (Источник: Travel & Leisure)

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

travelleisure-ad-2
Travel & Leisure вставляют в свой пост рекламу, которая выглядит как статья (Источник: Travel & Leisure)

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

  • я проскроллила слишком далеко? А остальные рекомендации по путешествиям в места осеннего листопада были выше?
  • Почему отпуск летом на Бермудах включен в список мест осеннего листопада?

Я решила продолжить скроллить текст про Бермуды, оформленный идентично предыдущему, и посмотреть, что будет дальше; потом я заметила комментарий под ним: “От Туристического управления Бермудских островов”.

travelleisure-ad-3
Travel & Leisure комбинирует свой контент с рекламой, вводя пользователя в заблуждение (Источник: Travel & Leisure)

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

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

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

4. Вынужденное постоянство

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

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

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

Я еще раз обращусь к сайту join.me, чтобы привести следующий пример.

joinme-plans
Join.me предлагает три тарифных плана (Источник: join.me)

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

joinme-plan-comparison
Join.me скрывает детали тарифных планов за труднонаходимой кнопкой (Источник: join.me)

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

joinme-tricky-terms
Join.me упоминает бесплатный тарифный план, только если пользователь захотел получить больше информации (Источник: join.me)

Я была рада узнать, что у join.me есть бесплатная опция. Но для того, чтобы получить к ней доступ, вам нужно подписаться на план PRO. В пробный период включено следующее:

joinme-forced-pay
Join.me спрашивает данные кредитной карты при оформлении пробного периода плана PRO. (Источник: join.me)

Когда вы ввели информацию о пользователе и о покупке, вы получаете доступ к бесплатному 14-дневному пробному периоду. И только если вы решаете отказаться от плана PRO, вы получаете доступ к бесплатному тарифному плану, который join.me не афиширует.

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

5. Дружественный спам

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

Кстати, один крупный бренд был уличен именно в этом — и в результате сейчас должен заплатить 13 млн. $: LinkedIn.

Выяснилось, что LinkedIn использовал контакты пользователей для своей выгоды. Функциональность “добавить связи” появилась на сайте еще в начале 2010-х годов. Она позволила пользователям быстро установить связь со знакомыми: отправить им сообщение и предложить добавиться во взаимные контакты на LinkedIn. И хотя сама опция кажется вполне достойной (в конце концов, самому бывает довольно сложно найти бывших коллег и давно утерянных из виду знакомых), LinkedIn все же зашел слишком далеко.

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

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

6. Скрытые расходы

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

Вы можете не верить, что вы как аналитик имеете возможность повлиять на это; чтобы переубедить вас, приведу вам пример этого темного паттерна со страницы Southwest Airlines:

southwest-airlines-price-1
Общая сумма к оплате на сайте Southwest Airlines кажется независимой от стоимости отдельных рейсов (Источник: Southwest Airlines)

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

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

Только тогда я осознала, что есть микроскопические надписи “Включая налоги и сборы” и “Показать расчет стоимости” под линией “Итого”. Когда я их развернула, я увидела следующее:

southwest-airlines-price-2
Скрытые расходы компании Southwest Airlines можно обнаружить (Источник: Southwest Airlines)

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

7. Введение в заблуждение

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

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

Вот, например, форма подписки на новостную рассылку Eater:

eater-signup
Казалось бы, традиционная форма подписки на дайджест Eater (Источник: Eater)

И вовсе не странно, что форма расположена в начале страницы. Ну, или не было бы странно, если бы подписка предлагалась только одна.

Но когда вы скроллите ниже, вы можете заметить, что на рассылку дайджеста Today уже автоматически дано согласие:

eater-autocheck
Eater автоматически подписывает меня на ежедневную рассылку (Источник: Eater)

И все бы ничего, если бы я не была на странице Eater Philly. Я не хотела общих новостей от Eater. Меня интересовали новости, относящиеся именно к той области США, где я живу. И была бы я счастлива, получая ежедневную рассылку, я тоже не уверена.

Если бы я проскроллила эту страницу еще дальше, я бы увидела еще больше опций рассылки:

eater-newsletters
Больше рассылок от Eater (Источник: Eater)

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

eater-cities
Eater также предлагает подписку на новости конкретного города (Источник: Eater)

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

О том, какие еще бывают темные паттерны, читайте во второй части поста!

Оригинал: https://www.smashingmagazine.com/2018/09/dark-patterns-and-other-design-no-nos-for-mobile/

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: