Контраст

Хорошего дизайнера отличает способность чувствовать контраст. Другими словами умение отделять суть от фона. Другими словами навык управления вниманием.

Представим, например, скрин переписки. Один дизайнер выкладывает картинку, на которой имена собеседников замазаны пикселями, а другой постит скрин, на котором имена вырезаны так аккуратно, будто их там никогда и не было.

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

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

Наталья Стурза рассказала, что на сайтах российских банков мешает клиентам (предпринимателям) выбрать оптимальный тариф.

Тёмные паттерны и просто плохой дизайн:

  1. Важные условия и ограничения написаны мелко и малоконтрастно, чтобы человек не обратил на них внимания.
  2. Тарифам даны эмоциональные названия. Например, тариф «Успех» (подороже) и «Лоукост» (самый дешёвый).
  3. Некоторые важные условия тарифа есть только в огромном документе со всеми условиями. Например, показаны только лимиты, но не показано, что будет после их превышения.
  4. Сломана привычная логика отображения информации. Например, показаны сначала свойства тарифа, а потом стоимость. Или показаны тарифы слева направо от большей стоимости к меньшей.
  5. Общие формулировки и канцеляризмы.
  6. Все тарифы показаны на отдельных страницах без единой сводной таблицы.

Как делать:

  1. Расположите тарифы по возрастанию цены и предложения.
  2. Выделите приоритетный тариф с помощью дизайна.
  3. Дайте сравнить, но не больше 4 тарифов в таблице.
  4. Называйте тарифы осмысленно, без манипуляций и оценок.
  5. Чётко прописывайте 4 главных критерия: абонентскую плату, количество бесплатных платежей, комиссии за снятие и пополнение наличных, лимиты и комиссии на переводы физлицам.
  6. Давайте ссылку на подробное описание тарифов.
  7. Отдельно выносите скидки, они интересны только продвинутым пользователям.
  8. Прописывайте пункты на языке пользователя: вместо «платежи» — «платежи юрлицам и ИП».
  9. Расскажите про превышение лимитов.
  10. Дайте посмотреть цены при ежемесячной оплате и оплате за год вперёд.

https://vc.ru/design/90038

Иногда нужно обойти дерево узлов

Например, чтобы найти родительский элемент и заменить его содержимое, или найти соседний элемент и переключить на него фокус.

Для этого есть набор методов:

let el = document.querySelector(".someClass")
el.childNodes // дочерние элементы
el.nextSibling // сосед справа
el.parentNode // родительский элемент

Подробнее в видео: https://youtu.be/MoEWUWIDFDs

И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO


✨Домашнее задание ✨

Взять пример из урока: https://codepen.io/detepr/pen/rQYYbx
1. Посчитать сумму цен всех подарков и вывести её в консоль
2. Отсортировать подарки по цене

Сила комментария

Сила комментария

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

— На карточке клиента: за что предоставили скидку 20%
— На форме заказа: что в дверь звонить не надо
— В тикете техподдержки: ссылка на обсуждение в багтрекинге

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

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

Например, на «Дадате» мы используем систему защиты от сетевых атак. У нее есть интерфейс, где можно заблокировать конкретный IP-адрес. Указываешь IP, жмешь «добавить в черный список», злодей получает бан. Что может быть проще?

Проблема в том, что непонятно, кто заблокировал IP и почему. В большинстве случаев это и неважно, но иногда пригодилось бы для разбора. Решить проблему элементарно — добавить поле «комментарий».

Но постойте, можно же сделать нормальные поля «сотрудник» и «причина блокировки»? Да, можно, но непонятно:

— точно ли нужны именно эти поля?
— действительно ли они нужны?

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

Комментарий — элемент хаоса. Но с ним система устойчивее.

Почему мы предпочитаем делать юзабилити-тесты финсервисов вживую?

Почему мы предпочитаем делать юзабилити-тесты финсервисов вживую?

Есть три группы ограничений, которые уводят в общение тет-а-тет.

1. Технические.
– Мы тестируем интерфейсы и важно видеть, как именно люди держат телефоны. Поэтому для удалённых тестов нужны камера и штатив.
– Надо рассылать инструкции, просить пользователя установить необходимое оборудование и подключить наушники. Уходит минут 20 на настройку и технические неполадки.
– Многие респонденты просто технически не продвинуты и не могут всё подготовить.
Эта возня отъедает время общения и терпение респондента.

2. Коммуникация.
– Часто люди волнуются перед тестом, стесняются. Когда разговариваешь с респондентом лично, представляешься и завязываешь беседу, располагаешь человека к себе.
– Люди быстрее доверят важную или личную информацию живому человеку, а не голосу в наушниках и картинке на экране.
– Важно и эмоциональное состояние — показатель отклика и реакции на удобство интерфейса: качественно такое можно считать только в офлайне.
– Кроме того, во время удалённого разговора респондента могут отвлечь: когда вы общаетесь лично, человек посвящает около часа тестированию один на один.
– Вы видите ситуацию целиком, считываете эмоции, реакцию, поведение и позу пользователя — это даёт контекст, который теряется при удалённом тесте.

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

Иногда от этого приходится отходить, например, когда респонденты из Европы или США. Всё это грозит двойной потерей качества — из-за онлайна и языковых барьеров.

Денис Бесков написал о Customer Development (в том виде, в котором подход разработал Стив Бланк).

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

  1. Поиск клиентов. Разработка и проверка гипотез о своих клиентах и их проблемах.
  2. Верификация. Проверка, что клиенты готовы платить за избавление от найденых проблем и что команда способна предложить решение.
  3. Масштабирование.
  4. Построение компании.

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

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

Если появилась идея продукта:

  1. Предварительно оцените объём рынка. Он должен быть достаточно большим для будущей компании.
  2. Сформируйте гипотезы о целевой аудитории продукта, в ходе какой деятельности у людей возникают проблемы, которые может решить продукт, что это за проблемы.
  3. Проведите глубинные интервью с представителями целевой аудитории, чтобы подтвердить гипотезы.
  4. По результатам интервью уточните гипотезы.
  5. Проведите количественные исследования, чтобы уточнить объём рынка для каждого сочетания проблемы и сегмента целевой аудитории.
  6. Выберите проблему с самым большим рынком.
  7. Создайте ценностное предложение и проверьте его «решенческим интервью» и последующей продажей.
  8. Создайте решение, с помощью которого вы в ручном или полуавтоматическом режиме сдержите данное клиенту обещание. На этом шаге оказание услуги может быть нерентабельным, это нормально.
  9. Окажите некоторый объём услуг в ручном режиме, чтобы проверить, получается ли сделать клиентов довольными, и заодно узнать о сложностях и подводных камнях.
  10. Если клиенты недовольны, ищите другие решения. Если попробовали все возможные решения, возвращайтесь к ценностному предложению и выбору проблемы.
  11. Если клиенты довольны, проанализируйте алгоритм выполнения услуги и определите, что можно автоматизировать.
  12. Оцените затраты на оказание услуги с учётом будущей автоматизации и стоимость привлечения клиентов в разных рекламных каналах. Поймите, получается ли зарабатывать на отдельной услуге. Это сейчас называют юнит-экономикой.
  13. Если экономика не сходится, ищите способ изменить проблемный показатель. Если не получается, пересматривайте решение или возвращайтесь на более ранние этапы.
  14. Если экономика сходится, можно разрабатывать первую версию продукта и далее переходить к построению компании.

На основе Customer Development Эрик Рис придумал Lean Startup — упрощённый подход к созданию стартапов.