Сделал конспект книги Майкла Джанда «Сожги своё портфолио» о самоорганизации и работе с клиентами.

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

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

https://vandergrav.ru/burn-your-portfolio-book-summary/

Пранава Тандра написала об автоматических подсказках в полях поиска.

8 тезисов с примерами из реальных продуктов.

— Позволяйте фокусировать поиск, указывая, где именно искать (если это возможно и необходимо);
— Группируйте варианты подсказок, если они неоднородны;
— Если есть прямое совпадение и можно предоставить информацию прямо в подсказке, сделайте это;
— Не перегружайте список подсказок, 7−9 вариантов вполне достаточно;
— Добавьте продвинутый поиск с параметрами, если в продукте много информации (или функциональности) и есть отдельная страница для результатов поиска;
— Запоминайте, что пользователь искал раньше. Показывайте этот запрос по активации поля поиска, когда оно ещё пустое и подсказывать нечего;
— Сортируйте список подсказок по релевантности, но и популярность сгодится на худой конец;
— Пробуйте угадать, что пользователь имеет в виду, и исправляйте ошибки. Но только оставьте возможность отменить коррекцию и искать с ошибками.

[English] https://blog.prototypr.io/9c3394774519

Заметка подготовлена совместно с @vanillatime.

Ира Моторина написала, как планировать и писать пуш-уведомления.

Это агрессивный формат коммуникации. Чтобы пуши не раздражали, они должны приходить не слишком часто и быть полезными. Если приложение при установке обещает «приятные новости по заказам и скидкам», нельзя потом заваливать пользователя нерелевантными скидками.

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

По этапам взаимодействия:
— Онбординг: подталкивание пользователя к выполнению целевого действия, например, первому заказу;
— Вовлечение и удержание: формирование привычки, подталкивание к повторению целевого действия. Можно предложить скидку, напомнить о себе в связи с праздником или новостью;
— Реактивация пользователя, который перестал выполнять целевое действие. Если причина в негативном опыте, маркетинговые пуши не помогут. В остальных случаях можно просто напомнить о себе или сделать спецпредложение.

Если пользователь не выполняет целевое действие и не реагирует на уведомления, можно написать, что больше не будете их отправлять (Duolingo).

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

Если приложение работает на старых телефонах, текст уведомления лучше уместить в 40 символов. Если работает только на новых, можно использовать 120.

#writing #push

Вадим Митякин опубликовал 6-ю главу книги «Метод параноика». Глава посвящена принципу динамических команд.

— Для работы над сложным цифровым продуктом команда должна соответствовать конкретным требованиям (тип проекта) и представлять собой уникальное сочетание специалистов;
— Участники фиксированной команды успевают притереться, эффективно работают, накапливают знания о продукте и могут пренебрегать документированием. Изменение в команде приводит к потере знаний. Сложно принимать решения, касающиеся разных аспектов продукта;
— Развитие бизнеса приводит к череде проектов разных типов, проектная команда не может зафиксироваться надолго;
— «Проклятие инструмента»: когда есть несколько инструментов, велико искушение воспользоваться каждым, не важно, требует того задача или нет. Участники сработавшейся команды, переброшенной на новый проект, — инструменты;
— Понимание, какие специалисты потребуются для реализации, появляется по мере создания модели продукта;
— Если проект не укладывается в сроки, добавление рабочей силы задержит его ещё больше (Брукс);
— Несколько человек, долго работающих друг с другом, могут рассматриваться как самостоятельная проектная единица;
— «Железобетонное» правило: с самого начала формировать команду вокруг «несущих конструкций», то есть специалистов, ориентированных на техническое лидерство и координацию работы группы;
— Требования к ролям участников проекта определяются природой тех частей, из которых состоит система, над созданием которой они работают;
— Если у участника проекта есть возможность принимать решения без последствий для себя, это негативно отразится на качестве проекта;
— Можно рассматривать ограничения бюджета в качестве такого же фактора как функциональные или технические требования, которые нужно учитывать при принятии проектных решений;
— Кризис управления: руководителю не хватает знаний для принятия решений, а специалистам — полномочий. Управление вырождается в администрирование;
— Специалисты в инженерных и креативных компаниях не должны быть «подчинёнными» по отношению управленцам, выступая в роли исполнителей;
— Артефакты проектирования (проектная документация) — модель будущего продукта и способ коммуникации между участниками проекта.

https://paranoidmethod.org/paranoid-method-book-06

Рассказал о своём подходе к прототипированию, который позволяет быстро создавать прототипы и вносить правки:
— Почему это важно для проектов с высокой долей неопределённости (стартапов);
— Где заканчивается прототипирование и начинается проработка дизайна;
— Что показывать в прототипе, а что уже лучше описывать в функциональной спецификации;
— Какие состояния системы показывать;
— Какие визуальные средства использовать для компоновки страниц;
— Насколько интерактивным делать прототип;
— Что с текстом.

https://www.youtube.com/watch?v=82AoEza1EvU

В KISLOROD написали о навигации в мобильной версии интернет-магазина:

— В шапке обычно размещают логотип и ссылки на избранное, сравнение, корзину и личный кабинет;
— Меню можно закрепить у нижней грани экрана (Ozon);
— Показывайте товарные категории на главной странице (Audiomania). Если их много, покажите 30−40% основных категорий;
— Дайте возможность искать по темам, например, «зимняя куртка», «подарок к 8 марта»;
— Не скрывайте хлебные крошки, но не занимайте ими больше одной строки. В них может быть ссылка на родительскую категорию (Ozon) или ссылки на всю цепочку вышележащих категорий (Mvideo). Во втором случае будет горизонтальная прокрутка;
— Для просмотра категорий каталога можно использовать аккордеон (Lamoda), последовательное меню (Letoflowers) и их комбинацию (Mvideo);
— В последовательном меню отображайте текущее положение пользователя, давайте не только перейти в подраздел, но и посмотреть общий список товаров раздела;
— Показывайте дополнительные, совместимые и альтернативные товары (Eldorado). На мобильном устройстве поиск товаров, совместимых с тем, что у пользователя уже есть, ещё сложнее;
— Дублируйте навигацию в подвале;
— Показывайте в правом нижнем углу кнопку возвращения в начало страницы.

https://vc.ru/design/219560

Джастин Вин написала о заблокированных кнопках. Они показывают, что действие пользователю почему-то недоступно (нет прав, не введены обязательные данные, не выполнены какие-либо условия).

— Если человеку не важно знать, что есть какое-то недоступное ему действие, заблокированную кнопку лучше скрыть. Например, кнопку добавления комментария, если комментирование пользователю недоступно;
— Добавьте объяснение, почему действие недоступно (рядом или во всплывающей подсказке);
— Если условия, при которых кнопка окажется заблокированной, маловероятны, можно её не блокировать и показывать сообщение об ошибке при необходимости.

https://ux.pub/reshenie-problem-neaktivnyh-knopok/

Мариана Варгас привела примеры тёмных паттернов из популярных сервисов.

1. Замаскированная реклама — имитирует контент или навигацию. Например: реклама в ленте Ютуба, похожая на видео;
2. Тараканья ловушка — упрощение попадания в определённую ситуацию и затруднение выхода из неё. Например: создание и удаление профиля в Спотифае и Инстаграме;
3. Заманить и подменить — пользователь хочет сделать одно, но вместо этого делает что-то другое. Например: в ленте Реддита нажатие на картинку в рекламном посте открывает рекламируемый сайт, а не увеличивает картинку, как обычно;
4. Принудительное продолжение — списание денег с карты без предупреждений после окончания пробного периода. Например: Skillshare;
5. Подтверждение с укором — пользователя стыдят за выбор, который он собирается сделать. Например: подтверждение отключения уведомлений в Wish;
6. Предотвращение сравнения цен. Например: в АлиЭкспрессе конкретные цены видны в результатах поиска, а в карточке товара отображается ценовой диапазон. Чтобы узнать цену, надо выбрать количество, цвет и способ доставки;
7. Скрытые затраты — неожиданное увеличение цены на последнем этапе оформления заказа из-за налогов, доставки и прочего. Например: broadway.com.

https://habr.com/ru/company/alconost/blog/548600/

Пора начинать в этом разбираться, так как рано или поздно такие приёмы запретят на законодательном уровне: https://vc.ru/design/221548

Кирилл Шерстобитов написал о тестировании User Flow продукта.

Если продукт уже работает:

— Можно дать респондентам задание и по итогам прохождения задать вопросы из анкеты оценки юзабилити (System Usability Scale). Полезно таким же способом проверить конкурентов и сравнить результаты. Опрос даёт количественные оценки и прямую речь респондентов;
— Провести удалённое немодерируемое тестирование. Респонденты выполняют задание под запись экрана, а потом дают обратную связь. Тестирование помогает увидеть, с какими проблемами сталкиваются люди, но не позволяет уточнить у них непонятные моменты;
— Провести модерируемое тестирование. Интервьюер очно или удалённо наблюдает за респондентом и может задать уточняющие вопросы. Более трудоёмкий способ, требующий определённой квалификации.

Если продукт ещё в разработке, для каждого шага сценария можно провести First Click Test: показать дизайн или эскизы респондентам, дать задание и посмотреть, куда они нажмут. Тест даёт количественные данные, можно понять, какой шаг вызывает затруднения.

https://vc.ru/design/200804

Михаил Руденко написал о сложностях стартапов-маркетплейсов.

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

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

https://blog.buro.cx/nie-nachinaitie-startap-s-markietplieisa/

Леван Джамелашвили проанализировал тёмные паттерны в интерфейсе отмены подписки на «Яндекс Плюс».

1. На всех шагах мастера отмены подписки есть манипуляция с помощью визуальной иерархии и акцентного цвета.

Обычно интерфейсы облегчают пользовательский путь в рамках конкретного сценария, делая акцентными кнопки, которые скорее всего пользователь нажмёт. Люди к этому привыкли. Пользователь, который отменяет подписку, скорее всего подтвердит отмену на каждом шаге мастера. Но в интерфейсе Яндекса выделена кнопка «Оставить подписку».

2. На третьем шаге нельзя продолжить, не указав причину отписки.

3. На пятом шаге пользователя обманывают текстом «Ваша подписка закончится прямо сейчас». На самом деле, подписка сохранится до момента следующей оплаты. Конкретно в этом случае подписка сохранялась ещё на месяц.

От себя добавлю, что само по себе разделение процесса отписки на 5 шагов — тоже тёмный паттерн.

https://designpub.ru/630a057c60dd

Антонина Хисаметдинова рассказала, как сообщать пользователям об ошибках.

Хорошее сообщение об ошибке:
— Снижает нагрузку на техническую поддержку и персонал;
— Помогает пользователю пройти по воронке конверсии;
— Обучает работе с сервисом;
— Позволяет сохранить доверие к сервису в трудную минуту.

Если ошибка связана с глобальным сбоем:
— Сообщите, когда примерно устраните сбой: 15 минут, час, 5 часов, сутки;
— Сообщите, работают ли другие важные сервисы компании. Например, при сбое в личном кабинете банка полезно понимать, работают ли его карточки;
— Подскажите альтернативные способы выполнить целевое действие. Например, если не работает ЛК банка, баланс можно проверить с помощью смс;
— Если это профессиональный инструмент, с которым пользователь работает каждый день, сообщите о сбое.

Если ошибся пользователь:
— Разместите сообщение об ошибке в фокусе его внимания. Например, рядом с кнопкой «Войти» в форме входа;
— Сократите текст сообщения, переместите суть в самое начало;
— Подскажите, как исправить ошибку;
— Сохраните данные, которые пользователь ввёл.

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

https://habr.com/ru/company/jugru/blog/353668/

В Usethics написали о клик-тесте скриншотов (First Click Test).

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

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

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

Такое исследование проще организовать: не нужен прототип, меньше требования к респондентам и инструменту тестирования.

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

Ограничения:
— Не всегда можно увидеть клик каждого пользователя;
— Трудно понять, почему пользователь совершил то или иное действие (спрашивать после каждого клика так себе способ);
— Разные инструменты тестирования по-разному отрабатывают клик и не дают это настроить. Например, в Фабузе респондент после клика переходит на следующий шаг.

#user_testing

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

Для кардиомониторов, систем вентиляции лёгких и подобного есть стандарт по звукам. В мелодиях зашифрованы конкретные фразы, например, Car-di-ac A-larm звучит как C4 E4 G4 — G4 C5 (музыканты поймут), количество слогов и нот совпадает.

Проблема в том, что мелодии никто не тестировал. Звук раздражает пациентов, особенно, если работает несколько аппаратов (дьявольский тритон). Медикам в целом всё равно — они привыкли.

Исследователи предложили набор мелодий с метафорами и звуками из обычной жизни, например:
— Звук сердцебиения — сердечно-сосудистая система;
— Звук встряхиваемых в коробочке таблеток — для приёма лекарств;
— Непрерывный звук выключаемого двигателя — выключение питания;
— Звук аэрозоля — кислород.

Тесты показали:
— Респонденты быстрее определяют смысл таких мелодий и меньше ошибаются;
— Проще определяют направление звука. Актуально, когда врач находится в палате с несколькими пациентами.

https://habr.com/ru/post/537434/

Фейфей Лиу из Nielsen Norman Group написала об изменении дизайна для глобальной аудитории:

— Иногда простого перевода недостаточно, нужна локализация;
— Даже люди, говорящие на одном языке, могут сильно отличаться. Например, у сайта Apple есть отдельные франкоязычные версии для пользователей из Франции и из канадской провинции Квебек;
— Культурные отличия можно оценить по шкалам Хофстеде: 1) Степень принятия неравномерного распределения власти; 2) Индивидуализм — коллективизм; 3) Мужественность — женственность; 4) Степень страха перед неопределённостью; 5) Долгосрочная — краткосрочная ориентация; 6) Потакание желаниям — сдержанность;
— На сайте Hofstede Insights можно сравнить страны по этим шкалам. Например, США схожи с Австралией и отличаются от Японии. Если отличия заметны, стоит задуматься о локализации;
— Тем больше нужна локализация, чем чаще люди пользуются продуктом, чем сложнее контекст использования (на ходу, в мобильном), если продукт создан для взаимодействия групп людей, если локальные конкуренты в чём-то сильно отличаются (например, в Индии и Китае предпочитают одноразовые пароли в интернет-магазинах);
— Но объём локального рынка должен окупить инвестиции в локализацию, так как она дороже перевода;
— Вы можете сильно отличаться от пользователей на локальном рынке, исследуйте аудиторию, тестируйте на ней продукт.

https://ux.pub/izmenite-svoy-dizayn-dlya-globalnoy-auditorii-issledovanie-kross-kulturnogo-ux-dizayn/

Брет Виктор в 2011-м написал о взаимодействии с тачскринами, а Константин Рисков перевёл (с сокращениями и дополнениями).

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

Мы живём в трёхмерном мире. Наши руки предназначены для перемещения и вращения предметов в трёх измерениях, чтобы брать их и размещать над, под, рядом и внутри друг друга. На Земле нет более ловких существ, чем мы.

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

«Имея в своём распоряжении всё тело, неужели вы всерьёз полагаете, что будущее взаимодействия заключается в одном пальце?»

https://habr.com/ru/company/dododev/blog/551474/

Пейдж Лаубхаймер из Nielsen Norman Group написал о прилипающих шапках.

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

1. Размеры такой шапки должны быть минимально возможными, особенно на мобильных. Конечно, текст в ней должен оставаться читаемым, а области нажатия быть достаточно большими.

2. Делайте её непрозрачной и отделяйте от остального содержимого страницы (фоном или рамкой). В том числе отображающиеся в ней подменю.

3. Минимум анимации. Анимировать можно замену большой шапки на более компактную прилипающую. Она должна происходить со скоростью прокрутки страницы. Также шапка должна оставаться в определённом месте экрана, а не прилетать туда с задержкой вслед за прокруткой страницы (Stalker Menu).

4. В идеале при появлении непостоянно отображающейся шапки у пользователя должно быть ощущение, будто она появляется синхронно с содержимым страницы. При прокрутке наверх для верхней шапки можно использовать анимацию Slide In длительностью примерно 300−400 мс.

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

https://ux.pub/5-sposobov-uluchsheniya-lipkoy-shapki-sticky-header-ot-nielsen-norman-group/

В «Собаке Павловой» написали об аудите интерфейса.

Пирамида требований к интерфейсу: выполнимость → надёжность → удобство → восприятие. Она помогает спланировать исследование и приоритизировать найденные недоработки.

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

Далее надо пройтись по сценариям и проверить, соответствует ли интерфейс требованиям:

1. Выполнимость. Интерфейс позволяет пользователю выполнить базовые задачи в рамках экрана и сценария в целом. Это касается даже профессиональных интерфейсов. Кажется, что там точно всё работает (если бы что-то сломалось, кто-то рассказал бы), но нет.

2. Надёжность. Интерфейс позволяет пройти сценарии альтернативными способами, предусматривает редкие сценарии, готов к ошибкам, даёт выполнить сценарии, не заложенные в систему.

3. Удобство. В интерфейс заложены эффективные паттерны взаимодействия.

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

#audit

Николай Крылов сделал подробный конспект книги Роберта Фитцпатрика «Спроси маму».

— Мнения бесполезны;
— Любые прогнозы — ложь, причём чересчур оптимистичная;
— Некоторые проблемы не являются проблемами;
— Идеи и запросы функций надо анализировать, а не слепо реализовывать;
— Если вы рассказали о своей идее, окружающие постараются пощадить ваши чувства;
— Если вы будете настойчиво говорить о своей идее, любой скажет, что она великолепна;
— В любом разговоре задавайте хотя бы один вопрос, который приводит вас в ужас;
— «Ну да…» и «Да ну…» звучат надёжнее, чем «Вау». Нельзя построить бизнес, опираясь на восторженные отклики;
— Двигайтесь от общего к частному и углубляйтесь в детали, пока не получите мощный сигнал;
— У вас всегда должны быть готовы 3 самых важных вопроса;
— Знакомиться с клиентами и их проблемами лучше в коротких беседах, чем в долгих формальных переговорах;
— Если кажется, что собеседник делает одолжение, разговаривая с вами, возможно, беседа слишком формальна;
— Говорите об идее как можно меньше, но направляйте беседу в нужное русло;
— Если после встречи непонятно, что будет дальше, встреча была бесполезной;
— Проводите встречи до тех пор, пока слышите на них новое;
— Пока не настроитесь на поиск чётко сформулированных, непротиворечивых проблем и целей, ваш клиентский сегмент останется размытым;
— Если не понимаете, где искать собеседников, продолжайте делить выбранный сегмент на меньшие подгруппы, пока не поймёте;
— Если неясно, что вы хотите узнать, не стоит заводить разговор;
— Заметки бесполезны, если ими не пользоваться.

https://vc.ru/books/95793

Джон Анкарстрем раскритиковал, как сейчас работает адаптивный дизайн.

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

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

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

Можно отключить медиазапросы в браузере, но чаще всего по умолчанию будет отображаться мобильная версия (подход Mobile First).

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

https://habr.com/ru/company/macloud/blog/554650/