94. Неидеальные состояния интерфейса

В этом выпуске: рассказ Вадика Мармеладова о своих проектах, статьи о том, как писать документацию, о законе Хика, формах записи в салоны красоты, разнице между Customer Development и Custdev, неидеальных состояниях интерфейса, а также пример заботы в приложении «Сбербанка».

Рассказ Вадика Мармеладова

Вадик Мармеладов рассказал о проектах Lapka и ЛОТ, работе с Канье Уэстом:

  • Хардверный проект Lapka. «Давайте сделаем что-то с сенсорами». Как не специалист будет использовать алкотестер или дозиметр? Получился модный аксессуар. Человек сначала хочет его купить, а уже потом думает о функциональности;
  • Работа с Канье Уэстом над Yeezy. Дизайн магазина Adidas&Yeezy, Канье сказал: «У меня дети, в магазине не должно быть никаких острых углов». Придумали место, похожее на психоделический экспириенс;
  • Канье: «Каждый элемент, который мы предлагаем, должен быть изобретён». Тарелка не может быть круглой, даже если это удобно. Мы обязаны попробовать другие версии. Треугольная тарелка появилась в контексте: в пространстве нет столов, и люди едят, положив тарелку себе на колени. Её свойства определены историей;
  • Делаем вещи такими, какими они должны быть. И оказывается, что так действительно можно сделать. Хотя раньше мы ограничивали себя и делали как нужно;
  • Единственный проект для Канье, который вышел за пределы концепта, — награды и прочие материалы для церемонии награждения PornHub;
  • Проект ЛОТ (сейчас): не прямолинейно в диалоге выясняет потребности клиента («любишь ли ты дождь», а не «нужен ли тебе зонт») и формирует персонально для него посылку с повседневными вещами;
  • Продукт создаётся через страдание. Создатель либо страдает до конца, либо передаёт его пользователю через недоделанный продукт;
  • Мы делаем дизайн не зубной щётки, а ритуала.

Проектная документация

Павел Шерер поделился советами, как писать для проектной команды и прививать ей любовь к чтению документации:

  1. Погружение в документацию должно быть плавным. Начните с основной информации о проекте: краткое описание, задачи, целевая аудитория, ключевая механика и так далее;
  2. Используйте современные инструменты, в которых есть интерактивные схемы, встраиваемые в страницы с текстом, перекрёстные ссылки на разделы, макросы и динамические содержания конкретных частей, краткие выжимки из разделов и прочее. Павел использует Confluence с плагинами, Axure и Figma;
  3. Чётко структурируйте все документы, чтобы пользователь мог быстро найти в них нужную информацию;
  4. Формат документации подстраивайте под особенности проекта и команды, которая его делает. Технологичные стартапы и типовые икомерс-проекты на Битриксе, инхаус-команды и фрилансеры-удалёнщики, разработчики сайтов и приложений требуют разной информации;
  5. Придерживайтесь одинаковых формулировок;
  6. Ведите словарь терминов. Особенно, если это проект в специфической отрасли;
  7. Пользователю должно быть удобно читать. Разбивайте текст на абзацы, выделяйте важные места, не пишите слишком длинных предложений, используйте списки и подзаголовки. Пишите простым языком;
  8. Используйте пасхалки, чтобы мотивировать читателей и определять, действительно ли они всё прочитали;
  9. Поддерживайте актуальность документации хотя бы до конца разработки. А лучше — на протяжении всего проекта.

Закон Хика

Вадим Шлячков написал о законе Хика.

В статьях (и даже в википедии) пишут, что закон Хика утверждает следующее: с увеличением количества вариантов увеличивается время принятия решения.

В своей работе Хик пишет не о «времени принятия решения», а о «времени реакции выбора», что не одно и то же.

  1. Время простой реакции (simple reaction time) — испытуемый даёт единственный ответ на единственный раздражитель;
  2. Время реакции выбора (choice reaction time) — от испытуемого требуется реагировать различным образом на разные типы раздражителей;
  3. Время реакции различения (discrimination reaction time) — предполагает единственный ответ на один из нескольких раздражителей.

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

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

Также исследования показали, что закон:

  • Перестаёт работать после практики. После 6000 попыток время реакции на 8 вариантов раздражителей приблизилось ко времени реакции на 2 варианта;
  • Не работает, когда раздражитель и способ реакции взаимосвязаны. Надо указать стилусом на подсвечиваемую область;
  • Не распространяется на реакцию зрачков;
  • Не учитывает эффект последовательностей;
  • Ограничен количеством вариантов. Время реакции в эксперименте с 1023 вариантами отличалось всего на 20−30 мс от эксперимента с 31 вариантом;
  • Не всегда хорошо описывает ситуацию, когда пользователь может связать предлагаемые варианты ассоциациями.

Формы записи

Артём Полтавцев написал о формах записи в салоны красоты.

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

Сервис GBooking можно связать с сайтом по API. Логика заказа: выбор первой услуги → выбор студии → добавление услуг → выбор мастера и времени. Выбор первой услуги ограничивает выбор студий, так как не везде может быть одинаковый набор специалистов и оборудования.

Рекомендации:

  • Не отвлекайте пользователя. Предлагайте подписаться на ваши соцсети только после того, как он записался. И предусмотрите за это вознаграждение;
  • Покажите, какие шаги надо сделать для записи;
  • Сообщите время, которое займёт услуга;
  • Дайте возможность записаться по телефону или через мессенджеры. У таких услуг есть много нюансов, которые клиент может захотеть уточнить;
  • Дайте возможность записаться, не выбирая услуги. Пусть клиент сообщит желаемое время и свои контакты, чтобы остальное уточнить по телефону;
  • Добавьте опции, например, выбор молчаливого мастера;
  • Дайте удобный способ отменить или перенести запись без звонка в салон;
  • Расскажите о сотрудниках и дайте начать запись с конкретного мастера. Постоянным клиентам будет проще записываться к любимым мастерам;
  • Напоминайте клиентам о записи.

Customer Development и Custdev

Олег Якубенков написал о разнице между Customer Development и Custdev.

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

Изначально Customer Development — методология создания новых продуктов и стартапов, где через взаимодействие с потенциальными клиентами проверяются гипотезы о проблеме, решении, рынке, каналах привлечения. Состоит из этапов:

  1. Обнаружение клиентов;
  2. Подтверждение клиентов;
  3. Создание клиентов;
  4. Построение компании.

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

В русскоязычном IT методология сузилась до конкретного метода проверки гипотез — глубинных интервью. То, что мы называем кастдев, англоязычные коллеги называют User Research.

Неидеальные состояния интерфейса

Шейн Дойл написал о неидеальных состояниях интерфейса.

Многие дизайнеры проектируют только идеальное состояние, когда всё отображается корректно и контент идеален. Но есть ещё состояния:

  1. Пустое: контент ещё не добавлен, нулевые результаты поиска, пользователь удалил контент;
  2. Загрузка: когда загружается контент или выполняется какое-то действие. Важно донести до пользователя, что программа не зависла;
  3. Частичная наполненность: когда есть только часть контента. Подумайте, как помочь пользователю сделать так, чтобы получить идеальное состояние;
  4. Неидеальное: слишком длинный или короткий текст, изображения в неправильном формате или отсутствуют, нет части контента. Пользователь не должен думать, что программа сломалась;
  5. Интерактивное: фокус на элементе, заполнение поля и другие изменения интерфейса после взаимодействия с пользователем;
  6. Ошибка: нет подключения к сети, пользователь сделал что-то не то, системная ошибка. Важно, чтобы пользователь понимал суть ошибки и что ему делать;
  7. Выполнение действия: когда пользователь справился со своей задачей. Состояние может отличаться для разных пользовательских задач.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)

Защита от ошибки

Александр Караваев нашёл, если попробуете в приложении «Сбербанка» пополнить баланс телефона, номер которого отличается от вашего на 1−2 цифры, приложение обратит на это внимание.

Нашёл Александр Караваев