Впечатления от станции

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

Самое главное отличие Яндекс Станции от конкурентов — её можно подключить к телевизору, и если опыт общения с голосовым помощником у нас уже есть (Siri, Google Assistant), то как будет выглядеть взаимодействие с голосовым ассистентом, который в тоже время имеет визуальный интерфейс? Очень интересно.

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

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

Во время демонстрации мне особенно интересно было узнать, как Алиса обрабатывает ошибки, ведь если по голосу она меня не поняла, то ввести более точный запрос у меня никак не получится. Парень, проводящий демонстрацию, показал это на примере вопроса о погоде на марсе — Алиса просто не смогла ответить, сказала, что не знает. Тогда я спросил у неё «а в москве?» и она поняла контекст — дала прогноз погоды по Москве. Это здорово.

Дальше, я хотел выяснить как она понимает, где показывать мой запрос — на ютубе, на кинопоиске или амедиатеке. Парень попросил Алису показать котиков, и она открыла ютуб. Но я решил дать запрос посложнее и попросил показать мне видео Усачева — Алиса также открыла ютуб, но выборка была не самой очевидной — какие-то рандомные видео из ютуба с непонятными людьми (хотя по идее канал Руслана Усачева один из топовых). А если я имел в виду писателя? По итогу, мне было не очень понятно, как Алиса выбирает место поиска, и как мне уточнить какой-нибудь сложный запрос.

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

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

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

А как вам Яндекс Станция?

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

let el = document.querySelector(".someClass");
el.innerText // текстовое содержимое
el.innerHTML // HTML-разметка содержимого
el.outerHTML // полная HTML-разметка
el.offsetWidth // ширина, аналогично Height
el.offsetLeft // координата левого угла
// и так далее

Назначенные узлу стили можно узнать через свойство sytle:

el.style.color // цвет текста

Но в нём содержатся только те CSS-свойства, которые назначены непосредственно узлу. Чтобы узнать все свойства, которые получил узел из CSS-стилей, потребуется более сложная конструкция:

getComputedStyle(el).color // цвет текста

Если захотите узнать более сложные свойства, то не забудьте преобразовать их названия в camelCase. Например: background-color → backgroundColor;

Подробнее в видео: https://youtu.be/kM8YAhsaHfE
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

Заметки на полях. Из психологии.

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

Общая формула: событие → [автоматическая мысль] → эмоция

П Р И М Е Р

Событие:
прилетает внезапная срочная задача

Автоматическая мысль, которую не замечаем:
«Я не справлюсь» (или «Я могу не справиться»)

Эмоция:
тревога

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

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

То есть ты получил новую задачу, еще даже не узнал детали, не погрузился, но уже испытываешь тревогу. И все из-за автоматической мысли «Я не справлюсь» (или «Я могу не справиться»), которая не основана вообще ни на чем.

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

И понятно, что будет полезно уметь замечать и работать с автоматическими мыслями в обычной жизни. Если вам интересно чуть подробнее покопать для себя эту тему, то можете просто начать хотя бы со статьи на Википедии (https://ru.wikipedia.org/wiki/%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BC%D1%8B%D1%81%D0%BB%D0%B8), чтобы как-то сориентироваться. Понимаю, что источник не самый глубокий, но для старта может подойти.

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

1. Каковы доказательства, поддерживающие эту идею? Каковы доказательства, противоречащие этой идее?
2. Существует ли альтернативное объяснение?
3. Что самое плохое может произойти? Смогу ли я пережить это? Что самое лучшее может произойти? Каков самый реалистичный исход?
4. Каковы последствия моей веры в автоматическую мысль? Каковы могут быть последствия изменения моего мышления?
5. Что я должен делать в связи с этим?
6. Что я мог бы посоветовать ___ (другу), который находится в такой же ситуации?

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

Шпаргалка продакта: жизненный цикл задачи

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

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

Как это работает

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

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

Необратимые действия

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

  • отправка e-mail, СМС и прочего;
  • удаление чата;
  • удаление профиля и т.п.

Обычно перед таким действием система спрашивает: Вы уверены?
Но люди не читают, не думают наперёд, торопятся и всё равно делают необратимое действие, а потом ищут способ восстановить.
На одном b2b проекте представитель заказчика просил добавить в систему двойной вопрос на удаление:
- Вы уверены?
<Да>
- Вы точно уверены?

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

Но есть действия, которые пользователь выполняет часто и "задалбывать" его вопросами про уверенность — лишний шаг.
Приличные продукты для таких необратимых действий делают возможность оперативной отмены по горячим следам.
Например, при отправке письма в gmail можно отменить отправку по-быстрому (временем отмены можно управлять).
Или при удалении чата в Телеге можно отменить удаление в течение 5 секунд.

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

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

2. Если действие необратимо и вы решили спрашивать подтверждение — спрашивайте максимально чётко с донесением последствий действий. У меня есть отдельная мини-заметка (https://telegra.ph/UX-neobratimyh-processov--pro-udalenie-04-17) про это.

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

Денис Невожай о доме будущего и дизайне интерфейсов для часов.

Старший UX-дизайнер в Essential
http://dnevozhai.com/

— Привет Денис. Чем ты занимаешься в Essential?

UX Design для Home продукта. Если точнее, то работаю над архитектурой и логикой для таких систем как домашняя безопасность, управление IoT устройствами в доме и т.д.

— Почему ты решил заниматься только UX? У тебя же и UI отлично получается)

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

— Как будет работать дом будущего?

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

— Ты занимался интерфейсами для Alcatel One Touch и Amazfit. Что нужно в первую очередь учитывать, рисуя дизайн для часов?

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

— Как ты проверял свои решения?

На телефоне с маленьким, кругленьким экраном внутри )

— Как делать UI для круглых экранов?

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

— Что смогут делать носимые устройства через 5 лет?

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

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

— Какие устройства станут популярными через 5 лет?

Штука, которая взорвет мир — дополненная реальность. Но это произойдет только когда эти устройства смогут быть достаточно незаметными и не «странными» как Google Glass. Был слух от знакомого, который работает в Magic Leap, о том, что люди на закрытом демо не могли отличить искусственные объекты от реальных. Это впечатляет, обнадеживает и пугает.

— Ты много путешествуешь. Какое место нужно посетить каждому дизайнеру?

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

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

— Apple или Google?

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