Опубликованы видео с Avito Design Talk:

1. Настя Ларкина, Авито — Точки роста для дизайнера в крупной компании
youtube.com/watch?v=4qBiY4XkPmE

2. Алексей Кандауров, Циан — Значимость дизайнера на разных скоростях разработки
youtube.com/watch?v=1YjKkbaMekU

3. Владимир Погорелов, Тинькофф — Дизайн в краудсорсинге и краудсорсинг в дизайне
youtube.com/watch?v=wpol2li9NPM

4. Круглый стол «Личные проекты дизайнеров»
youtube.com/watch?v=Da76M0gkUM0

— Все видео и презентации: habr.com/ru/company/avito/blog/533620/
— Все видео в альбоме ВК: vk.com/videos-50773057?section=album_45

Павел Шерер написал об этапах создания информационной архитектуры.

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

Основные этапы создания:

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

2. Декомпозиция. Разделение проекта на отдельные информационные сущности со своими свойствами. Сущности могут быть вложенными.

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

4. Выявление связей. От одного ко многим, от многих ко многим, плоские, иерархические и так далее.

5. Фиксация свойств сущностей.

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

#information_architecture

Максим Жуков написал, как упростить аутентификацию и регистрацию в интернет-магазине.

Аутентификация:
— Разместите кнопку входа в привычном месте (правый верхний угол);
— Если пользователь неправильно ввёл логин или пароль, сообщите, в чём именно ошибка;
— Если пользователь вошёл, запомните его (до 7 дней). Для безопасности можно спросить пароль потом при выполнении значимого действия;
— Внедрите вход по номеру телефона. Так можно не запоминать пароль и входить по коду из смс. Люди всё реже пользуются почтой;
— После того как пользователь вошёл, система должна возвращать его на страницу, с которой он перешёл к форме входа.

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

https://vc.ru/design/195503

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

На этапе сбора требований и определения функциональности стоит обсуждать только список пользовательских сценариев.

При создании первых концептов (на бумаге, маркерной доске или в Фигме) надо обсуждать:
— Связность показанной истории;
— Отвечает ли она портретам целевой аудитории;
— Детали истории;
— Стартовые точки ключевых сценариев;
— Чем пожертвовали в концепте.

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

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

Быть заказчиком — это тоже работа.

https://vc.ru/design/197039

Опубликованы видео с Fintech Design Conf 2020:

1. Команда Райффайзенбанка — Общая дизайн- и бренд-стратегия, устройство дизайн-команды и дизайн-системы, история работы над гайдлайнами
youtube.com/watch?v=4Hni1ySWLXQ

2. Команда Тинькофф Инвестиций — История создания мобильного приложения, соцсети Пульс для инвесторов, профессионального терминала
youtube.com/watch?v=0cL1KebEi4Y

3. Команда Home Credit Bank — Баланс навыков продуктового дизайнера, унификация дизайна, лучшие практики обработки ошибок и краевых состояний, профессионально-эмоциональная гигиена дизайнера
youtube.com/watch?v=mPi8Y0uL47E

4. Валерия Курмак из Сбера и Евгений Кузнецов из AIC — Обзор проблем поддержки инклюзивного дизайна в банковских продуктах
youtube.com/watch?v=pq9dYUGl2EA

5. Команда Открытие Брокера — Специфика работы инвесторов и трейдеров, структура и формат работы дизайн-команды, история изменений интерфейса, формат съёмок обучающих видео
youtube.com/watch?v=_uq0ZX9mg4c

6. Команда N26 — Работа бренд- и дизайн-команды в общем и на примере проекта по стандартизации цветовой палитры
youtube.com/watch?v=ptrnV4nCrxE

7. Лена Махно и Эмилия Городовых, Контур — Работа команды UX-исследователей
youtube.com/watch?v=Pfh9QyJ-TNc

8. Ирина Волошина и Виталий Шитов, Альфа-Банк — Работа бренд-команды
youtube.com/watch?v=UuOU_dI0Ne0

9. Команды БКС и AIC — Свежий редизайн и ребрендинг
youtube.com/watch?v=fd2ziu307HU

Все видео в одном месте: jvetrau.com/fintechdesign-2020/

Михаил Ярошук написал, как Booking.com манипулирует пользователями.

Эффект дефицита:
— Сайт показывает в результатах поиска недоступные варианты с надписью «Вы не успели»;
— Что таких номеров осталось мало (1−2);
— Сколько раз номер бронировали за последние 12 часов;
— Процент (количество) отелей в этом городе (похожих отелей в городе), в которых уже нет свободных номеров;
— Сколько людей просматривают страницу номера прямо сейчас;
— Сколько часов назад было последнее бронирование номера;
— Текст «Вам улыбнулась удача — здесь обычно нет мест!».

Жадность:
— Бесплатное повышение категории номера;
— Скидки на бронирование автомобиля или самого номера.

Эффект социального одобрения:
— «Хороший вариант для пар — они оценили удобства для поездки вдвоем на 9,1»;
— «Этот вариант оправдал или превысил ожидания 97% гостей, оставивших отзыв»;
— «Хит продаж в городе Неаполь!».

Боязнь ошибиться в выборе:
— Бесплатная отмена бронирования;
— Возможность оформить бронь без кредитной карты.

https://vc.ru/marketing/89272

Станислав Хрусталёв написал об ошибках при сборе обратной связи. Некоторые из них:

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

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

Переход к опросу:
— Срок действия приглашения ограничен;
— Терминал для оценки находится рядом со специалистом, которого надо оценить.

Прохождение опроса:
— Опрос собирает контактные данные. Это значит, что он не персонализирован;
— На уточняющий вопрос можно ответить только в свободной форме. Узнавая о причине негатива, выделите ключевые факторы и добавьте поле для свободного ввода;
— Все вопросы обязательные. Если клиент не захочет отвечать на конкретный вопрос, он закроет опрос;
— Не используется ветвление. Если клиент в первом ответе низко оценил сервис, на втором вопросе можно написать «Очень сожалеем, что огорчили вас. Что мы могли бы исправить?».

https://hardclient.com/feedback-acquisition-pitfalls

Марк Херст написал о тёмных паттернах и «возрождении» UX-дизайна.

Если до 2018 года UX-дизайн терял влияние, то потом он полностью изменился. Сейчас пользовательскому опыту можно дать новое определение — эксплуатация пользователей.

Например: отписка от Amazon Prime. То, что должно быть одной страницей с кнопкой «Отменить подписку», стало шестью страницами с тёмными паттернами, которые вводят пользователей в заблуждение и отвлекают.

В Amazon есть хороший UX-отдел, который обманывает, эксплуатирует и вредит клиентам. UX-дизайн полностью изменился: ранее он защищал интересы пользователя, а теперь работает против него.

Такое «возрождение» дорого обошлось: превратило дизайн во вредную сферу и привело к оттоку хороших специалистов. Как следствие, например, во время крупнейшего кризиса здравоохранения Нью-Йорк не может создать понятный сайт о вакцинах.

https://vc.ru/design/202669

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

— Человек, который получил уведомление о новом сообщении, хуже выполняет задачи на внимание, так как факт получения этого сообщения занимает часть его внимания;
— Даже счётчик новых уведомлений мешает. Человек открывает приложение с определённой целью, но этот счётчик немедленно привлекает его внимание;
— Красный цвет, которым обычно обозначают уведомления, заметен, и люди приучены с особым вниманием относиться к тому, что отмечено красным;
— Уведомления часто ведут к задачам, которыми пользователь не собирался заниматься прямо сейчас. И часто они сообщают о вещах, неважных для конкретного человека;
— Чтобы создать хорошее уведомление, надо учитывать, когда сообщаемая пользователю информация требует внимания;
— Факторы полезного уведомления: срочность (встреча через 10 минут), важность (налоговая декларация через месяц), контекст (номер места и вагона в поезде, который отходит через час);
— Полезность одного и того же уведомления может быть разной для разных людей, поэтому должна быть возможность настройки: по теме сообщения, способу, частоте и времени доставки;
— Полезна возможность отключать все подобные уведомления прямо из списка уведомлений;
— Полезен режим «Не беспокоить» в рамках отдельного продукта;
— Хороший вопрос для самопроверки: «Допустили бы мы такое поведение, если бы оно исходило не от цифрового посредника, а от человека?»

https://ux.pub/kak-sozdat-produmannyy-dizayn-push-uvedomleniya/

Джозеф Мюллер написал о проблемах вложенных модальных окон.

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

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

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

— Перевод (не работают анимации с вайрфреймами решений): https://ux.pub/problema-vlozhennyh-modalnyh-okon-v-tsifrovyh-produktah/
— Оригинал [English]: https://uxplanet.org/6762351cf6de

Сергей Алексеев написал о пользовательском тестировании ещё не работающего голосового интерфейса.

Подход «Волшебник страны Оз»: кто-то из исследователей становится «волшебником», который выступает в роли голосового помощника или запускает аудиофайлы в ответ на запросы пользователя.

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

Избегайте слов-подсказок в заданиях вроде «Попросите голосового помощника включить фильм „Любовь и голуби“». Скорее всего, респондент так и скажет «Включи фильм „Любовь и голуби“», и вы ничего нового не узнаете.

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

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

https://vc.ru/design/198986

Кейт Моран из Nielsen Norman Group написала о тестировании контента.

«Сценарий, который вы даёте людям, должен соответствовать проблеме, которую они должны решить в реальной жизни. В отличие от исследований, ориентированных на пользовательский интерфейс, исследования, ориентированные на контент, не должны просить участников тестирования «притворяться» или «представлять», что они находятся в той или иной ситуации.

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

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

https://teletype.in/@marfitsin/content-research

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

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

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

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

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

— Книга: https://www.alpinabook.ru/catalog/book-684019/
— Больше тезисов и цитаты: https://vandergrav.ru/this-button-needs-text/

Опубликовал конспект курса «Типографика и вёрстка» Игоря Штанга, который прошёл в 2016 году в Санкт-Петербурге:

1. Бегство от «серого прямоугольника» — текста произвольного размера, который прислал заказчик. Он не похож на дизайн. Игорь предложил 6 приёмов, как превратить серый прямоугольник во что-то, похожее на дизайн.
https://vandergrav.ru/typeschool-1/

2. Конструкция — пространственное отношение элементов, текстовый скелет макета. Не путаем её с сеткой (это лишь один из инструментов) и композицией (это ещё и цвет с фактурой). Статья о создании конструкции.
https://vandergrav.ru/typeschool-2/

3. Выключка, абзац, заголовок, отступ — о разных вариантах выравнивания текста, вёрстке абзацев и заголовков.
https://vandergrav.ru/typeschool-3/

4. Список, таблица, иллюстрация, линейка — о вёрстке списков, таблиц и иллюстраций, а также использовании в макете линеек, рамок и плашек.
https://vandergrav.ru/typeschool-4/

5. Дополнительные материалы — рекомендации книг, ссылки на статьи, коллекции и инструменты.
https://vandergrav.ru/typeschool-5/

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

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

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

Опубликовал конспект доклада Ильи Бирмана «Фак юикс» с Дизайн-просмотра 2020 года.

«Главная беда: исследованиями подменяют экспертизу.

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

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

https://vandergrav.ru/ilya-birman-about-ux-design/

Дейв Акин сформулировал законы проектирования космических кораблей. Некоторые из них:

3. Проектирование — итеративный процесс. Необходимое количество итераций всегда на единицу больше, чем то, которое вы сделали в данный момент. Это верно в любой момент времени.

4. Ваши лучшие конструкторские разработки неизбежно окажутся невостребованными в итоговом проекте. Научитесь жить с разочарованием.

12. Не существует единственно правильного решения. Но всегда есть несколько неправильных.

13. Проектирование основано на технических требованиях. Нет никаких оснований делать что-то хоть немного «лучше», чем предписывают эти требования.

15. (Закон Ши) Талант к конструктивным улучшениям проявляется в первую очередь в интерфейсах. И это также лучшее место для того, чтобы всё испортить.

16. У людей, которые проводили аналогичные исследования до вас, не было прямого доступа к извечной мудрости. Следовательно, нет никаких оснований доверять их расчётам больше, чем своим. И в особенности нет никаких оснований представлять их как свои.

20. Плохой проект при хорошей подаче в конце концов обречён. Хороший проект при плохой подаче — обречён сразу.

31. (Закон эволюционного развития Мо) Вы не сможете добраться до Луны, взбираясь на всё более высокие деревья.

36. Любой рядовой инженер может спроектировать что-то изящное. Хороший инженер проектирует работоспособные системы. Опытный инженер — эффективные.

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

41. (Закон Макбрайана) Вы не сможете сделать лучше, пока не сделаете, чтобы работало.

https://zamesin.me/akins-laws-of-spacecraft-design/

Шейла Шейх и Кирилл Улитин написали о новой панели инструментов в редакторе документов МойОфис.

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

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

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

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

В итоге отказались от вкладок, перегруппировали и разместили все инструменты на одной панели, проработали её поведение при изменении ширины окна. Скорость работы выросла.

Ещё интересно, что все свойства панели собраны в Airtable и могут быть экспортированы в XML. Дизайнеры правят конфигурацию панели инструментов независимо от разработки, и корректировки автоматически применяются при сборке продукта. Это позволило удешевить процесс внесения изменений и исключить человеческий фактор.

https://habr.com/ru/company/ncloudtech/blog/541970/

В лаборатории дизайна Pragmatica запустили новую рубрику видеоблога — «Артефакты». Минус: срачи, хейт и оружие второго удара. Плюс: темы, которые формируют насмотренность, кругозор и креативность дизайнеров.

Уже есть 3 выпуска:

1. Дизайн в Российской империи, музей дизайна в Хельсинки (Финляндия), премии в целом и премия D&AD, виниловые пластинки
youtube.com/watch?v=DXuMMWXAwxc

2. Итоги 2020 года (важность шрифта и «Доброшрифт», скорость создания сайтов, национальный флаг РБ), тренды на будущий год, артефакты из бананового бункера, пост-интернет искусство Кати Новиковой, концепция и дизайн iMac G4, история Snapchat
youtube.com/watch?v=W61iC5OuIUk

3. Приложение «Помощь» Никиты Кукушкина, ажиотаж вокруг Clubhouse, выставки самоизоляции, Malofiej Awards, цифровые образы Данилы Криворучко, соковыжималка Филипа Старка
youtube.com/watch?v=2B7lqEXSjGM