В номере: как создать привычку у пользователя и как можно создать веб-сайт для пяти чувств
Ланч-тайм 275: краткий перевод свежих статей о digital
Сибирикс

Ланч-тайм 275: краткий
перевод свежих статей о digital

В номере: как создать привычку у пользователя и как можно создать веб-сайт для пяти чувств
869

Три ключевых совета по созданию функций, формирующих привычку

How we improved reader habit by 39%
эволюция шрифтов
Коронавирус вызвал радикальные изменения в повседневной жизни людей. Сейчас прекрасное время, чтобы узнать привычки пользователей: каким привычкам они не следуют, почему не следуют и хотят ли завести новые.

Перед авторами статьи стояла задача: повысить вовлеченность в myFT в приложении. MyFT — это функция FT (сокращение от названия новостного ресурса Financial Times), которая позволяет читателям выбирать интересующие темы для отслеживания, тем самым создавая локальную ленту новостей, которая настраивается с учетом их конкретных потребностей.
формирование привычки
Иконки быстрого доступа myFT на главной странице
Было предположение, что формат иконок, как у историй в Instagram, Snapchat и фотографиях Google, предоставляет более динамичный опыт. Кроме того, им легко управлять, он современным, ориентированный на темы и поэтому пользователи будут чаще взаимодействовать с myFT.

Работало потрясающе — A/B-тест показал, что частота посещений приложения увеличилась почти на 40%.

Ребята сделали несколько ключевых выводов:

1. Улучшить опыт, а не страницу

Было несколько вариантов того, как лучше отображать страницу канала myFT, пока идея использования иконок в стиле историй Instagram в верхней части главной страницы не получила наибольшего отклика при тестировании. Это перевернуло всю концепцию «новостной страницы» с ног на голову.

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

2. Создание динамичного опыта

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

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

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

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

Нельзя создавать привычки ради привычек.

3. Решение проблемы пользователя — ваш главный приоритет

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

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

Можете ли вы создать веб-сайт для пяти чувств?

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

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

Дизайн с учетом зрения

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

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

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


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

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

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

Дизайн на основе обоняния

За рубежом в начальной школе учителя награждают учеников хорошими оценками и наклейками с запахом (вы царапаете ногтем наклейку, и она пахнет тем, что показано на картинке). Например, как эти:
разработка сайта
Пакет стикеров Scratch 'N' Sniff 1970-х годов
Автор статьи рассказывает, что получал такие оценки и, глядя на это фото, все еще чувствует запах клубники, который напоминает ему о хорошей оценке, то есть — об успехе. Вот к чему вам нужно стремиться на своем сайте — изобразить какой-нибудь узнаваемый признак так, чтобы большинство (или все) посетителей сразу почувствовали себя хорошо.

Пример: Providence Athenaeum, веб-сайт магазина книг б/у и библиотеки с изображением рядов старых книг на главной.
разработка сайта
Главная страница Providence Athenaeum «пахнет» старыми книгами
А как насчет компании, известной своими чистящими средствами, как Tide? Даже если вы не пользуетесь Tide для стирки, вы точно знаете, как будет пахнуть первое изображение в этой карусели :) Свежее белье — это аромат чистоты и комфорта. Также это запах удовлетворения, потому что нет ничего лучше, чем закончить стирку.
разработка сайта
На домашней странице Tide есть несколько изображений свежевыстиранного и сложенного белья — чувствуете запах? :)
А вот Coffee Culture Cafe & Eatery сделали видео на домашней странице. Для ресторана или кафе нет ничего необычного в том, чтобы показывать фотографии еды или напитков. Однако это не готовый, а сырой продукт — кофейные зерна. И как может подтвердить любой любитель кофе, эта фотография пахнет восхитительно и обязательно пробудит нетерпение заказать первую чашечку кофе.

Дизайн на основе звука

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

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

К этому есть два подхода:

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

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

Второй способ приблизиться к звуку в дизайне — это полностью исключить его из восприятия.

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

Спокойствие лучше всего описывается отсутствием шума, движения и отвлечения внимания.

Дизайн на основе вкуса

Доктор Бенс Нанай написал о парадоксе кулинарного шоу в журнале Psychology Today, обсуждая, почему так много людей любят смотреть, как готовит кто-то другой.

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

Немного расширив аргументацию Наная: люди больше вкладываются в результат, когда видят, как он создается. Это не то, что нам, как потребителям, обычно позволяют сделать производители. Мы идем поесть, а еда лежит для нас на тарелке. Что-то есть в том, что вы наблюдаете за приготовлением еды или напитков :)

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

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

Дизайн на основе тактильного ощущения

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

Отличный пример — Anthropologie.
разработка сайта
Anthropologie позволяет покупателям увеличивать масштаб каждого товара в своем интернет-магазине. Источник
Для сайта увеличение масштаба картинки — это необходимый функционал. Однако осязание не используется для установления более тесной связи с посетителями. Нужно поиграть с более резкими тактильными ощущениями :)

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

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

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

Но есть способы запечатлеть ощутимый опыт, но при этом сделать его привлекательным для веб-сайта. Например, Bodhi Spa использует видео, чтобы познакомить посетителей с различными услугами, которые они могут испытать (в одиночку или с другими) в помещении.

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

Затем посетители видят пару, наслаждающуюся гидротерапией: женщина берет горсть соли и кладет ее в бассейн, в котором они находятся:
разработка сайта
Во вступительном видеоролике Bodhi Spa показана пара, принимающая солевую терапию. Источник
Копирайтер, безусловно, может передать много положительных эмоций, но также полезно позволить посетителям увидеть это своими глазами и испытать их.
Вывод: попытка внедрить в дизайн все пять чувств одновременно приведет к сенсорной перегрузке, но выбор одного особенно сильного чувства — отличная идея.Вы сэкономили… хм… пожалуй, час.
Наслаждайтесь пятницей! Мы сегодня наслаждаемся ею по-полной: виски, пицца, расшаренный опыт — виски-брейк :)