16 октября 2018

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

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

8. Предотвращение сравнения цен

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

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

А есть авиакомпания, которая вообще не показывает цен: British Airways.

british-airways-price
British Airways заставляет вас выбрать время полета прежде, чем показывает цены (Источник: British Airways)

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

Благодаря этому покупка билетов на сайте British Airways невероятно раздражает, если не сказать больше. В принципе можно сравнить и цены, но для этого нужно несколько раз возвращаться туда-сюда. И высока вероятность, что когда вы нажмете кнопку “Назад”, все введенные данные сотрутся, и вам нужно будет вводить информацию о вашем путешествии заново.

Конечно, со стороны UX-дизайнеров этого мобильного сайта очень мило, что они предупреждают посетителей о невозможности увидеть цены на этом этапе. Но сам по себе этот принцип — плохой выбор British Airways.

9. Выцукривание личной информации

Суть этого темного паттерна в следующем: когда дизайн или часть контента не говорят четко о том, что ввод данных не обязателен, или не предоставляют простого способа отменить его (ввод), это и есть случай “выцукривания”.

Уверена, Марк Цукерберг был бы не в восторге, узнав, что Бригналл назвал этот паттерн в честь него, но всем известно, что Фейсбук искушает пользователей сообщить о себе больше информации, чем на самом деле нужно — так что этот паттерн назван вполне уместно.

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

buzzfeed-quiz-1
Пример забавного квиза на BuzzFeed (Источник: BuzzFeed)

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

buzzfeed-quiz-2
BuzzFeed подсовывает дополнительные вопросы (Источник: BuzzFeed)

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

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

10. Ловушка для тараканов

Фирменный продукт “Roach Motel” компании Black Flag — ловушка для тараканов и других насекомых-вредителей. Она привлекает насекомых, а, забравшись внутрь, они прилипают на клей и уже не могут выбраться наружу. Некоторые веб-сайты имеют тот же принцип действия.

Можно говорить о ловушке, если веб-сайт или приложение намеренно усложняют процесс удаления своего аккаунта или отписки от рассылки. Чаще всего вы можете с этим столкнуться, когда заканчивается пробный период у продуктов модели SaaS (software as a service, ПО как услуга).

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

А бывают еще ловушки вроде той, что представлена на сайте Wells Fargo Center:

wells-fargo-tix-1
Форма покупки билетов на сайте Wells Fargo Center (Источник: Wells Fargo Center)

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

wells-fargo-tix-2
Wells Fargo Center автоматически выбирает мои билеты и добавляет их к моему счету (Источник: Wells Fargo Center)

Однако вместо этого Wells Fargo Center автоматически выбирает мои билеты и добавляет их стоимость в мой счет. У меня нет права выбрать места, где я хотела бы сидеть. Зато к моему счету добавляются самые дорогие билеты — за $1,250.

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

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

wells-fargo-tix-3
Пользователь не может выйти из системы Wells Fargo Center (Источник: Wells Fargo Center)

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

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

11. Проникновение в корзину

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

Иллюстрация: зоопарк Central Park Zoo.

central-park-zoo-cart-1
Покупка билетов в Central Park Zoo онлайн (Источник: Central Park Zoo)

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

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

central-park-zoo-cart-2
Первый призыв к действию в форме покупок Central Park Zoo — не о покупке (Источник: Central Park Zoo)

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

Но, приглядевшись, вы заметите, что вам предлагают “Да, добавить $5 к моему заказу”. И если кто-то бегло проглядывал надпись, он мог прочесть ее как “Да, добавить к моему заказу”, думая, что речь идет о билетах.

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

central-park-zoo-cart-3
Настоящая кнопка оплаты скрыта за тремя полноценными переходами на странице Central Park Zoo (Источник: Central Park Zoo)

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

  • заполнить нужные поля.
  • Нажать на кнопку, чтобы завершить покупку.

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

12. Хитрые вопросы

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

Хитрые формулировки также могут быть использованы, чтобы увеличить стоимость товара. Вот с чем я столкнулась при попытке заказать цветы на сайте 1-800-Flowers:

1800flowers-fakeout-1
Заказ цветов на 1-800-Flowers (Источник: 1-800-Flowers)

Я была вполне довольна этим соотношением количества цветов и цены и решила, что большой букет будет лучше смотреться на столе моих друзей. Промотав вниз, я увидела окошко “Бесплатная доставка”. Мне и в голову не пришло кликнуть на иконку “i”, поскольку я подумала: “Что непонятного в бесплатной доставке и отсутствии платы за услуги? Звучит как выгодная покупка.”

1800flowers-fakeout-2
Бесплатная доставка, обещанная сайтом 1-800-Flowers, не то, чем кажется (Источник: 1-800-Flowers)

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

1800flowers-fakeout-3
1-800-Flowers пытается навязать вам дополнительные услуги (Источник: 1-800-Flowers)

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

1800flowers-fakeout-4
Сюрприз от 1-800-Flowers в моей корзине (Источник: 1-800-Flowers)

Наконец я дошла до корзины и обнаружила, что “12 месяцев использования поздравительного паспорта” также были добавлены к моим покупкам. К счастью, я сделала скриншоты, поскольку писала эту статью. Иначе я бы даже не догадалась, откуда взялось это дополнение. А ведь получается, что я на него согласилась, не прочитав повнимательнее.

Но серьезно, когда вы предлагаете что-то типа “БЕСПЛАТНОЙ доставки”, как вы думаете, сколько клиентов будут тратить время на внимательное изучение этой опции? Мы все понимаем, что эта фраза значит в большинстве случаев. Без явного уточнения, что речь идет об улучшенной версии сервиса 1-800-Flowers, наверняка много пользователей поставят в этом окошке галочку и в итоге обнаружат на этапе оплаты неожиданную услугу.

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

13. Неоправданно глубокая навигация

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

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

Вот хороший пример с сайта MagiQuiz:

magiquiz-questions-1
Типичный квиз с мобильного сайта MagiQuiz (Источник: MagiQuiz)

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

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

magiquiz-questions-2
Реклама переполняет страницы сайта MagiQuiz (Источник: MagiQuiz)

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

magiquiz-questions-3
Кнопка “Продолжить” спрятана среди рекламных объявлений и указывает, что это не конец квиза (Источник: MagiQuiz)

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

К сожалению, этим страдают не только квизы вроде MagiQuiz. Крупные издания, такие как Forbes, также виновны в подобном, разбивая короткие истории (не больше 800 или 1000 слов) на несколько страниц. Если бы это был способ сохранить производительность сервера, в этом был бы смысл, но мне кажется, что этот темный паттерн используется в основном из корыстных соображений.

14. Нотификации “Загляни, посмотри!”

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

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

Все тот же сайт 1-800-Flowers уличен в использовании этого паттерна:

1800flowers-notification-1
1-800-Flowers говорит мне, что я получила сообщение (Источник: 1-800-Flowers)

Видите зеленую иконку с единичкой на моем почтовом ящике? Выглядит совсем как напоминания от Gmail или Outlook, правда?

Но вот в чем проблема: до сегодняшнего дня я ни разу не заходила на сайт 1-800-Flowers и уж тем более не регистрировала там аккаунт. Тем не менее я не могу оторвать глаз от этого сообщения в почтовом ящике. Это чисто инстинктивная реакция. Сообщения, которые я получаю, обычно от клиентов, и я стараюсь как можно скорее дать им обратную связь. Это ощущение срочности заставляет меня сразу же кликнуть на иконку и узнать, что нужно сделать. В итоге я прочла следующее:

1800flowers-notification-2
-800-Flowers вводит пользователей в заблуждение нотификациями о входящих сообщениях (Источник: 1-800-Flowers)

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

Как вы догадываетесь, ожидающая меня бесполезная реклама, подобная этой, меня не порадовала. 1-800-Flowers даже не потрудились предложить мне цветы для особого повода (встречи выпускников, например, или приближающихся каникул). Они в первую очередь просто хотели отвлечь меня от того, что я была намерена сделать.

Если честно, я не уверена, что понимаю, чего именно 1-800-Flowers (и другие компании, делающие так же) хотели достичь этим темным паттерном. Когда люди идут на сайт доставки цветов, они обычно знают, зачем они там. Позвольте им следовать по пути, который вы все равно уже тщательно продумали для них, и оставьте эти срочные уведомления для сайтов или приложений, где пользователи оставляют свои данные и получают личные сообщения.

Подводя итоги

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

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

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

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

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

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

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

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

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

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

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