Я сделал свой сайт интерактивным. Вот что я узнал.
Пару недель назад я провел эксперимент на своем сайте. Я сделал это разговорным. Отзывы, отклики и освещение в СМИ были просто потрясающими. Я получил более 300 писем в течение первых 24 часов.
Спасибо всем, кто был достаточно любезен поговорить с моим сайтом. Это была отличная беседа. 🙌
Некоторые из вас просили меня поделиться своими мыслями. Поскольку все это началось как разговор, я хотел бы сохранить его как единое целое.
Итак, поехали. 💬
Моя мама всегда говорила мне, что из страха не выходит ничего хорошего, но, тем не менее, страх - невероятно мощный инструмент. Это заставляет нас меняться и расти, чтобы преодолеть это.
Идея сделать мой веб-сайт интерактивным пришла из простого вопроса, которым я поделился в Twitter и LinkedIn пару недель назад.
Что вы будете делать, когда боты возьмут верх и дизайнеры больше не будут нужны?
Это был немного шутливый вопрос, но я не ожидал такого простого и ясного ответа:
"Уволить тебя!" - Рафаэль Лейтериц, директор по управлению продуктами в Google.
Рафаэль - невероятно приятный человек. Он явно (надеюсь) пошутил, и все же его слова заставили меня задуматься:
Как дизайнеры вроде меня впишутся в эпоху разговоров?
Что еще более важно, какое влияние это окажет на UX-дизайн в целом? Все это движение предназначено только для крупных компаний или кто-нибудь может стать его частью? Был ли ажиотаж вокруг уведомлений, который мы наблюдали в течение последних двух лет, действительно был связан с разговорным интерфейсом с самого начала? Вопрос за вопросом…
Я решил побороть свой страх и получить практический опыт. Я превратил свой сайт в чат. Вы можете увидеть это в действии здесь.
Спойлер: если вы время от времени разговариваете с собой перед зеркалом, вы получите огромное удовольствие от создания собственного чат-бота.
Хорошо, приступим. Вот 9 советов, которые я получил в процессе…
1. Письмо становится все более важным в нашем ремесле.
Когда я начал этот эксперимент, я думал, что, вероятно, потрачу львиную долю времени на проектирование и программирование. Я был неправ.
Написание заняло значительно больше времени, чем дизайн и программирование вместе взятые.
Важнейшей частью создания разговорного опыта является сам разговор. Другими словами… слова. Так что неудивительно, что написание текста занимает больше всего времени, и все же это было так.
Я начал писать беседу в iA Writer.
Затем я разработал концепцию «путей разговора»: небольшая часть сообщений чата, которая может запускать другой набор сообщений. Пути разговора позволили мне спроектировать и смоделировать большинство разговоров, которые я хотел.
Это было хорошее начало. Но этого было недостаточно.
2. Изолированные сообщения не кажутся человеческими
При разговоре с человеком в реальной жизни результат разговора - в значительной степени - зависит от того, как он начался и как развивался. В большинстве случаев повторять тему неловко. После того, как вы заговорили о погоде, вы захотите перейти к более интересным темам и, вероятно, вообще избежать обсуждения погоды.
Чтобы избежать повторов и сообщений от роботов, мне пришлось изменить подход к тестированию.
Вместо того, чтобы просто убедиться, что все пути разговора будут работать с функциональной точки зрения, я просмотрел каждый из них, чтобы убедиться, что они также работают с точки зрения социальной.
Я был удивлен, насколько это изменилось. Я обнаружил множество сценариев, в которых разговор не казался естественным только из-за тонких повторений или немного странных соединительных предложений.
Мы не можем думать о разговорах как об отдельных сообщениях, которые можно складывать друг на друга. Нам нужно учитывать весь ход разговора, чтобы он казался естественным.
3. Восхитительные подробности
Восхитительные подробности о флирте с пользователями.
Письменные подробности и использование технологий могут иметь решающее значение между разговором, который кажется неуместным, и разговором, который пробуждает ваш интерес.
Например, обновление страницы меняет то, что говорит бот. Вместо того, чтобы просто сказать «Привет», теперь он скажет: «С возвращением! 🙌 ». Это даже слегка изменит путь разговора - о чем я расскажу более подробно в уроке разговорного контекста.
Итак, что здесь произошло?
Когда люди заметили это впервые, они поняли, что бот оказался умнее, чем они думали. Это изменило их представление об интерфейсе. Вдруг они задумались:
Что еще может эта штука?
При создании экспериментальных интерфейсов одно можно сказать наверняка: люди будут дурачиться с этим. Одна из моих целей состояла в том, чтобы легко интегрировать классическую форму контакта как часть разговора.
Нажав на «Свяжитесь с нами!», пользователь сможет ввести собственное сообщение:
И вот тут все запуталось. Мало того, что многие люди хотели грязно поговорить с моим ботом, многие также указали неправильный адрес электронной почты. Я сделал своего бота полезным, а не непослушным. Так что мне пришлось что-то придумать ...
Я начал добавлять подтверждение адреса электронной почты: «Ваш адрес электронной почты напоминает мне смайлики какашки. Что-то здесь не так ... »
Разговорная проверка заставляла людей улыбаться и писать об этом в Твиттере. Они чувствовали себя пойманными и, вероятно, подумали: «Черт, я думал, что мне сойдет с рук какая-то тарабарщина».
Урок?
Когда люди начинают возиться с вашим интерфейсом, вы начинаете возиться с людьми. Это естественно, восхитительно и является частью знакомства с пользователем.
Остальное я не испорчу. Может быть, ты найдешь другие скрытые жемчужины. 🤗
4. Разговорный контекст формирует темы
Представьте, что вы дизайнер, идущий на модную коктейльную вечеринку. Вы знаете, что большинство людей тоже являются дизайнерами. Повлияет ли это на то, как вы начинаете разговор?
Для большинства людей так и будет.
Вместо того, чтобы начать разговор с «Эй, как дела, вам нравится свежеприготовленный банановый коктейль?», вы можете сказать что-то вроде «Эй, ты тоже дизайнер или что ты делаешь? делать? ».
Второй способ начала разговора контекстуален для общей темы вечера, тогда как банановый более интересен и менее серьезен, особенно на модной коктейльной вечеринке.
Для большинства людей легче начать разговор с более рационального вопроса, даже если эмоциональный вопрос, вероятно, оставит более длительное впечатление. Я уверен, что у вас был подобный опыт на одном из тех мероприятий по «нетворкингу», где погода была темой номер один в тренде.
Поэтому я задался вопросом, как я могу интегрировать концепцию контекстного начала разговора в опыт?
Понимание контекста может значительно улучшить способ начала разговора. Когда человек заходит на мой сайт из Medium или Twitter, вероятность того, что он интересуется дизайном, намного выше. Они могли натолкнуться на твит, статью или другую ссылку на одной из этих платформ. Хотел добавить в беседу такую мысль:
Люди, которые заходили на мой сайт из Информационного бюллетеня UX Кенни Чена, также были удивлены, когда бот начал разговор со слов: Похоже, вы пришли сюда из классного информационного бюллетеня Кенни. Вы, наверное, тоже занимаетесь дизайном?
Это небольшое изменение не только улучшило ход разговора и сделало его более человечным, но и сделало некоторые его особенности более доступными.
Подробнее об этом в следующем разделе.
5. Скрытые «специальные предложения»
Мой сайт может предлагать статьи по UX в интерфейсе в стиле Quartz. Но если я не знаю наверняка, что пользователи интересуются UX, я, конечно, не стану им беспокоить.
Это было бы совершенно странно. Например, поговорить с совершенно незнакомым человеком на улице и начать дискуссию о том, почему мы должны отказаться от гамбургер-меню в мобильном дизайне.
Знание о том, что пользователь пришел с Medium, позволило мне легко изменить тему разговора, задав пользователю контекстный вопрос:
Возможно, вы тоже работаете в сфере UX?
Ответ «да» заставляет чат-бота говорить о последних статьях по UX, включая мои личные мысли. Однако он никогда не будет рекомендовать одну и ту же статью дважды, так как мы хотим избежать повторения, верно?
Более сложный аспект - снова отказаться от обсуждения статьи. Но это в другой раз. 🚶
6. Интерпретация изменений времени
В моем разговоре о осмысленном движении в дизайне я обсуждаю, как продолжительность может изменить то, как мы относимся к нашим действиям, окружающей среде и даже нашему восприятию.
Но время превосходит анимацию или любую другую тему. Время вездесущее. Неудивительно, что это также очень актуально в области социальной динамики.
Представьте, что вы только что встретили человека, который вам действительно нравится. Вы обмениваетесь номерами и не можете дождаться новой встречи с этим человеком. Когда нужно написать этому человеку? Сразу написать ей или подождать? Но как долго?
Время может работать как в нашу пользу, так и против нее. Он настолько тонкий и неуловимый, что трудно понять, как он может повлиять на значение наших слов и даже изменить его.
Представьте, что вы только что написали Анне:
Привет, Анна, было действительно приятно познакомиться! - Боб
Теперь ... Какой тип ответа вы цените больше: немедленный или ответ в течение следующих трех дней?
Независимо от ваших предпочтений, одно можно сказать наверняка: время отклика повлияет на вашу интерпретацию. Хотя мгновенный отклик вызовет немедленные положительные эмоции, отсроченный отклик будет включать волшебный дополнительный ингредиент: ожидание .
Не вдаваясь в подробности, предвкушение и задержка сильно влияют на нашу признательность и то, как мы общаемся. Я считаю, что существует четыре различных этапа временных интервалов, которые имеют отношение к разговору:
Мгновенно ‹10 секунд
Вы сразу получите ответ. Это значение по умолчанию в текущем разговоре, который происходит прямо сейчас.
Мышление ›30 секунд
Когда человеку требуется немного больше времени, чтобы ответить. Например, вы разговариваете со своим начальником, и он пишет вам: «Почему вы сегодня опаздываете?». Вам понадобится пара секунд, чтобы придумать творческое объяснение, прежде чем вы начнете печатать отклик.
Если разговорный опыт указывает на активность набора текста, добавляется множество дополнительных динамик, которые существуют в разговорах в реальном мире. Эта динамика часто теряется в цифровой коммуникации.
Более продолжительный перерыв ›1 час
Этот перерыв обычно означает, что человека прервали и он или она свяжется с вами позже. Он сообщает о занятости и является важным инструментом в сегодняшнем общении как в деловой, так и в личной жизни.
Догоня ›3 дня
Когда разговор теряется и вы либо возвращаетесь к человеку, извиняющемуся за задержку, либо начинаете совершенно новую тему.
Из-за простоты эксперимента я играл только с первой категорией. Я добавил анимацию набора текста с переменной задержкой в зависимости от…
- Длина сообщения
- Объем места, которое оно займет на экране.
Эти две переменные обеспечивают две вещи. Во-первых, опыт кажется более человечным, потому что для того, чтобы напечатать более длинное сообщение, требуется больше времени.
Во-вторых, это гарантирует, что собеседник сможет переварить каждое сообщение. Когда чат-бот отправляет видео, оно может занимать значительное пространство на экране. Если видео и длинный текст отправляются в короткой последовательности, сразу возникает ощущение, что вы разговариваете с ботом. Это кажется спамом.
Более сложный интерфейс чата с обработкой естественного языка может даже добавить к первой категории другие психологические элементы, такие как неуверенность.
«Привет, Сири, мы должны пойти сегодня вечером?»
…
перестает печатать
…
«Я не уверена… а нам? 🤔 ”
Время включает в себя многие из наиболее важных элементов риторики и является неотъемлемым активом разговорного опыта.
7. Анимация становится частью разговора.
Движение оказывает огромное влияние на то, как мы относимся к интерфейсу. Он может делать то, чего не может традиционная информационная архитектура: устанавливать отношения наблюдаемым интерактивным способом.
Я потратил некоторое время на уточнение кривых движения и того, как работает анимация. На самом деле, я считаю, что анимация была важной причиной того, что прием был таким положительным. Я бы даже пошел так далеко и сказал:
Без анимации нет разговора.
Посмотрим почему.
ПЕРВЫЙ, анимация добавляет динамику интерфейсу. Динамика, которая становится частью естественной характеристики самого разговора.
Легкая анимация возврата усиливает игривость того, как я представлял себе пузыри чата в комиксе (в зависимости от типа комикса анимация будет отличаться, но здесь это серьезный комикс).
ВТОРОЙ, внимание привлекает анимация. Как только чат-бот закончит говорить, снизу появятся две опции. Я продолжал уточнять задержку между последним сообщением и первой кнопкой, которая появляется внизу. В какой-то момент я обнаружил задержку, из-за которой пользователи сосредотачивались на кнопках сразу после того, как бот закончил печатать…
ТРЕТЬЕ, анимация усиливает идею интерактивности. Слегка игривая анимация кнопок привлекает внимание и предлагает пользователю поиграть с ней. И действительно, нажатие на кнопку превращает ее в само сообщение.
Эта анимация на самом деле одна из самых важных.
Почему?
Потому что это меняет отношение людей к разговору. Многие люди спрашивали меня, какую технологию обработки естественного языка я использую. Сначала я не понимала, почему меня спрашивают об этом, но потом меня осенило:
Тот факт, что люди могут наблюдать, как их выбор становится частью разговора, меняет их отношение к нему. Пользователи внезапно почувствовали, что это их собственные слова, их собственный выбор. А без анимации было отключение. Без анимации разговор казался неестественным и неестественным.
Анимация не только улучшила впечатления от моего эксперимента, но и была его неотъемлемой частью.
8. Чат может передать то, что не может передать сайт.
С помощью умных изюминок и тщательно продуманных заголовков рекламные и веб-агентства стараются отличаться друг от друга. Я делаю то же самое. Я называю себя любителем кофе. Насколько креативно, да? 🤗
Но попытки отличаться иногда могут иметь противоположный эффект. Мы либо заходим слишком далеко и становимся слишком разными, либо мы так стараемся отличаться от всех остальных, что в конечном итоге совсем не отличаемся.
Мой опыт общения находится в верхней части моего веб-сайта. Прокрутка вниз показывает мой традиционный веб-сайт. В первый раз, когда я пропустил разговор, я был шокирован.
Между этими двумя событиями был значительный разрыв.
Дизайн моего веб-сайта некоторые называют очень швейцарским. В нем много пробелов, он довольно минималистичный и почти не содержит цветов. Короче говоря, это не совсем эмоционально. 💩
С другой стороны, чат-бот отправляет смайлы, смеется и шутит. В нем есть эмоции. Другими словами: у него есть личность.
Оба этих подхода к дизайну передают разные аспекты моей личности. Более рациональная сторона, отраженная на традиционном веб-сайте; и более эмоциональный - разговор.
Дизайн всегда является отражением нас самих. Опыт общения добавляет более яркое и полное отражение того, кем я являюсь.
9. Разговор может уйти за пределы холста.
Когда мы думаем о диалоговых интерфейсах, мы часто думаем о пузырях чата на прямоугольном экране. Что, если разговорный опыт внезапно уйдет с того самого холста, для которого он был изначально разработан?
Был волшебный момент, когда я впервые посмотрела «Карточный домик». Внезапно со мной заговорил Фрэнк Андервуд. Он рассказал мне о своих планах и даже рассказал мне несколько пошлых шуток. Я впервые видел что-то подобное. Сначала это было немного неловко, но для меня вскоре это стало одним из самых знаковых элементов шоу. Я чувствовал себя частью сюжета.
В кинематографе эту концепцию называют разрушением четвертой стены.
Что происходит, когда мы применяем ту же идею к диалоговым интерфейсам?
Представим, я хочу отправлять вам push-уведомления. Исследования UX неоднократно показывали, что запрос разрешения у пользователей работает лучше, если они понимают причину, почему.
Мы можем взять эту идею и адаптировать ее для разговорного контекста. В моем случае интерфейс мог бы сказать что-то вроде:
- «Эй! Я только что заметил, что вы сюда часто бываете. Вы не хотите включать push-уведомления, чтобы я мог сразу же уведомлять вас, когда у меня есть что-то новое, чем я хочу поделиться? »
Пользователь либо выбирает «Да! Звучит хорошо! » или« Нет. Спасибо! ». Если пользователь выберет «да»… Разговор продолжается…
- «Замечательно! 🙌 В правом верхнем углу браузера есть всплывающее диалоговое окно. Нажмите "Разрешить", и все готово! »
Пользователь нажимает кнопку «Разрешить», и диалоговый интерфейс немедленно реагирует на действия пользователя.
- «Замечательно! Я чувствую, что это начало прекрасной дружбы 🙏 ».
Это всего лишь способ проиллюстрировать концепцию разрушения четвертой стены в диалоговом дизайне. Разговор может и, возможно, даже должен продолжаться за пределами холста.
Заключение
Создать разговорный опыт сложно, потому что концепция разговора связана с множеством ожиданий. Когда эти ожидания оправдываются, мы чувствуем, что интерфейс естественный, но как только они нарушаются, даже самым тонким образом, мы чувствуем, что что-то не так.
Добавление разговора на веб-сайт - слишком ограничивающий подход. Это забавный эксперимент, но он почти не использует возможности диалогового интерфейса.
По мере того, как службы обмена сообщениями, такие как Facebook Messenger, WhatsApp, Line и другие, начинают улучшать интеграцию со сторонними службами, они могут существенно повысить ценность нашего повседневного взаимодействия. Без необходимости устанавливать еще одно приложение.
Создание диалоговых интерфейсов связано не только с множеством технологических проблем, но и с множеством социальных. Как дизайнеры, мы обязаны решить эту часть проблемы.
Будущее диалоговых интерфейсов - это не пузыри чата. Это богатый опыт, который легко встраивает и интегрирует сторонние сервисы и контент в наши повседневные инструменты.
Итак, давайте начнем думать вне прямоугольника, вне сетки и даже… вне пузыря.
Спасибо за прочтение. Как всегда, этот разговор не заканчивается, пока вы его не скажете. Я с нетерпением жду ваших мыслей. Еще я твитнул о UX и анимации в Твиттере.
