Игорь Штанг написал о стыковке плашек и линеек (с примерами).

1. Если две линейки оказались рядом, можно превратить их в одну. Даже если это часть стиля, стоит подумать о сокращении количества линеек.

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

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

4. Плашки разного цвета или фактуры стыкуются вплотную.

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

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

https://awdee.ru/matching-rulers-and-dies/

Опубликованы видео с World Usability Day 2020 (секция Альфа-Банка):

1. Якоб Нильсен, Nielsen Norman Group — UX 2050
worldusabilityday.ru/alfabank/ (2-е видео в плеере)

2. Джордж Хелд, Билайн — Как AI/UX спасает физическую жизнь
youtube.com/watch?v=G7Dg5pGkd2Q

3. Юрий Ветров, Райффайзенбанк — Связь бренда с интерфейсом
youtube.com/watch?v=l_utXHNr3Wc

4. Алексей Овчаров, Sense Machine — Измерение эмоционального отклика на интерфейс или как узнать, пахнет ли ваше приложение булочками с корицей
youtube.com/watch?v=tkh5l_iTxdM

5. Алена Свергуненко, Альфа-Банк — UX-технологии в пути клиента
youtube.com/watch?v=YWItYKH055s

6. Анна Пилютик, Альфа-Банк — Тренды в UX
youtube.com/watch?v=ALP3r0SrJuU

7. Дмитрий Соловьев, Qiwi — Как на интервью говорить про деньги: практические приёмы
youtube.com/watch?v=fj_6amKqJ-A

8. Алексей Копылов — Обработка финальной CJM в Airtable
youtube.com/watch?v=AXymzHWS5Sk

9. Роман Черных, РШСД — Сервисный UXD: дорожная карта изучения
youtube.com/watch?v=vkBwvpP73yQ

Все видео на одном сайте: worldusabilityday.ru/alfabank/

Видео без Якоба Нильсена:
— В плейлисте YouTube: youtube.com/playlist?list=PLBo8MRRVVqLPiPxP-UE4AnXGsjaNbbD5L
— Альбоме ВК: vk.com/videos-50773057?section=album_44

Киннерет Ифра написала о тексте в диалоговых окнах подтверждения.

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

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

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

Заголовок:
— В заголовке сообщите о действии, которое надо подтвердить. «Вы уверены?» → «Удалить проект?»;
— Сделайте его вопросом, на который можно дать 2 взаимоисключающих ответа;
— Удалите лишние вступления: «Вы уверены…», «Это действие приведет к…», «Вы действительно…»;
— Особое внимание обратите на диалоги, связанные с отменой чего-либо. Примеров таких диалогов с кнопками «Отменить · Отмена» много, ещё один будет лишним.

Пояснение (текст под заголовком):
— Если к заголовку добавить нечего, текст пояснения не нужен;
— Добавьте его, если действие влияет на связанные элементы и настройки, другие учётные записи и устройства. Чем важнее действие и сложнее отмена, тем нужнее пояснение;
— Если опасаетесь, что пользователь пропустит пояснение, вынесите важные детали в заголовок: «Удалить папку и всё её содержимое?»;
— Сообщите, если действие необратимо: «Удалить папку и всё её содержимое без возможности восстановления?»;
— Если кроме удаления есть другое решение проблемы, расскажите о нём в пояснении.

Кнопки:
— Можно добавить название действия в надписи на кнопках: «Да, отправить», «Всё равно выйти»;
— Используйте в заголовке и на кнопках одни и те же слова: «Деактивировать ключ лицензии? · Да, деактивировать · Отмена».

https://habr.com/ru/company/directum/blog/530770/

Константин Ефимов написал об ошибках при проведении глубинного интервью. Например:

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

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

https://vc.ru/marketing/178315

Эдуард Христусь написал об объектно-ориентированном дизайне.

ООД помогает:
1. Понять, с чего начать. Если проектируете приложение для заказа котиков с доставкой, в нём наверняка будут сущности: «пользователь», «заказ» и «котик». С ними будут связаны определённые параметры и способы взаимодействия;
2. Сэкономить. Прототипирование — дорогой и сложный подпроцесс проектирования. Генерировать и отметать идеи в прототипе не эффективно;
3. Создать MVP;
4. Всей команде равномерно двигаться при декомпозиции проекта. Сначала объекты, потом способы взаимодействия с ними.

Процесс:
1. Выявите все объекты системы. Помогут пользовательские истории;
2. Определите параметры объектов и их связи. Помогут: брейншторм внутри команды и с заказчиком, профили пользователей (их сценарии и цели). Надо понять, чего от объекта хотел бы пользователь: какую информацию узнать, какие действия совершить;
3. Определите способы взаимодействия с объектами (функции);
4. Укажите свойства параметров. Например: автоматический параметр (проставляется системой автоматически), фильтруемый (используется для фильтрации списка объектов), ручной (задаётся вручную пользователем или администратором) и так далее;
5. Укажите свойства функций. Например: доступные без ограничений, доступные с ограничениями;
6. Покажите наборы параметров и функций для разных состояний объекта. Например: закрытую вакансию можно только посмотреть.

Не стоит применять ООД для небольших корпоративных сайтов из нескольких страниц.

#ooux

В Canvs Editorial написали, как мотивировать пользователя завершить начатое.

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

Например:
— На карточке накопления 10 штампов для получения бесплатной услуги 2 штампа поставлены по умолчанию;
— Пользователь только зарегистрировался, но уже на 20% заполнил свой профиль.

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

https://ux.pub/kak-motivirovat-polzovatelya-zakonchit-progress-effekt-obespechennogo-progressa/

Джон Сайто написал о метафорах в интерфейсе.

Метафора — употребление слова или выражения в переносном смысле на основе аналогии, сходства или сравнения.

Шестерёнка — метафора настроек. Продуктовая корзина — метафора заказа. В сравнении сайтов с книгами работают метафоры «Добавить в закладки», «Опубликовать», в сравнении с домами — «Войти как гость», «Домашняя страница». Уже сложился набор понятных всем метафор для взаимодействия в интернете.

Есть необычные метафоры. Например, на Медиуме статьи сравнивают с шоу: читатели реагируют на статьи аплодисментами и хлопками, у авторов появляются фанаты.

Хорошо, если при выборе метафоры можно провести параллели с реальным миром. Чем метафора абстрактнее, тем сложнее её понять.

Есть тяжёлые метафоры, когда за одним элементом скрывается много разных смыслов. Например, кнопка Share в iOS.

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

https://ux-journal.ru/metafory-i-analogii-v-produktovom-dizajne.html

Олег Биргер написал о развитии клиентского опыта (на примере «Газпромнефти»).

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

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

https://habr.com/ru/company/gazpromneft/blog/531232/

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

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

#filter

Екатерина Авакова написала, что делать в сложных ситуациях на глубинном интервью.

1. Респондент говорит обо всём, кроме того, что нужно;
2. Респондент отвечает односложно, не раскрывая подробностей;
3. В рассказе постепенно появляются детали, в которых теряется и интервьюер, и респондент;
4. Придуманный на ходу вопрос уводит обсуждение в сторону;
5. Структура вопросника задаёт рамки беседы, которые мешают рассуждениям респондента.

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

Респондент может:
— Решить, что вы невнимательны, и потерять интерес к интервью;
— Запутаться в должностях, компаниях и продуктах, и вы придёте к неправильным выводам при разборе интервью.

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

https://medium.com/userhouse/e72ec6a64b1d

Собрал самые популярные публикации UX Notes по числу лайков и репостов в ВК за прошедший год.

В топ-20 попали:
— 8 подборок записей докладов с мероприятий: UX-марафон, World Usability Day, митап «Инклюзивный дизайн», митап «Гибридный дизайнер», G8, ProfsoUX, митап «Сила взаимодействия;
— 6 переводов статей: Майтрик Катария, Дэнни Сапио, Тарас Бакусевич, Гаррет Кролл, Том Кенни, Джордж Кейв;
— 5 оригинальных статей: Павел Шерер, Павел Голюдов, Евгений Игнашов, Максим Жуков, Дарья Дундукова;
— 1 видео: Пабло Стэнли.

Спасибо, что читаете и рекомендуете @uxnotes знакомым дизайнерам и проектировщикам. Спасибо авторам полезных и интересных материалов.

https://vandergrav.ru/popular-ux-notes-2020/

В Mojo написали, как сделать удобный интерфейс для пожилых.

К 2050 году каждый 6-й человек в мире будет старше 65 лет. Да и все мы когда-нибудь состаримся. С какими проблемами сталкиваются пожилые:

1. Мелкий текст. Используйте кегль от 14 pt, гарнитуры с крупными буквами (14 кегль Futura PT выглядит как 10 кегль Roboto), позвольте регулировать размер текста; избегайте шрифтов с необычным начертанием.

2. Низкая контрастность. Размещайте текст на чистом фоне без изображений; проверяйте контрастность и сохраняйте её на высоком уровне; вместо серого текста на сером фоне ищите другие способы управлять пользовательским вниманием.

3. Непонятные иконки. Добавляйте текстовые метки, которые видны без наведения курсора; их дизайн должен быть простым и схематичным; тестируйте иконки на узнаваемость и запоминаемость.

4. Отсутствие гибкости: поля, принимающие данные только в определённом формате; неспособность распознавать опечатки.

5. Непонятные формулировки.

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

#old

Игорь Штанг написал о выравнивании текста и размере полей.

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

Выравнивание текста по центру лучше сочетается с широкими полями — рваному краю надо больше воздуха.

https://nobelfaik.livejournal.com/220315.html

Борис Юзефпольский написал об особенностях пользовательских интервью онлайн.

1. Нет живого контакта с респондентом, иногда нет изображения. Зато в интервью может участвовать вся команда.

Чтобы респондента не смущала толпа людей, камеру и микрофон включают только интервьюеры (не больше 2 человек). Если кто-то из команды хочет задать вопрос, он пишет его во внутренний чат (интервьюер вопрос видит и задаёт в удобный момент) или озвучивает в конце беседы, когда интервьюер передаёт слово.

2. Между «договориться об интервью» и «провести интервью» — пропасть. Люди забывают, им сложно планировать.

Настроили систему напоминаний. Но несмотря на напоминания, выбор удобного времени и вознаграждение, 10% респондентов не подключаются из-за технических проблем, а 20−30% не приходят вовсе.

3. У респондентов разные технические условия. Первые минуты интервью приходится тратить на технические неполадки.

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

4. Сложно проводить большие фокус-группы.

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

5. Детям сложно раскрыться в онлайн-интервью. Зато они уверенно чувствуют себя в юзабилити-тестах.

https://vc.ru/uchi.ru/192356

Опубликованы видео с 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