Максим Кононов написал о 13 базовых цветовых токенах (без токенов для ховеров).

— Блоки в интерфейсе — контейнеры для элементов и других блоков. Они должны выделяться на фоне родительского блока, создавая структуру слоёв;
— View (1) — блок, на котором отображается контент. Navigation (2) — блок с навигацией, который управляет тем, какие View отображаются;
— Border (3) может отделить два находящихся рядом блока, а также обвести немодальный блок, находящийся поверх остальных (плюс тень);
— Если блок модальный, для затемнения лежащего ниже контента — полупрозрачный Overlay (4);
— Элементы — всё остальное: текст, иконки, кнопки, поля ввода. Они управляют вниманием пользователя, выделяя важное, показывают состояние элемента;
— За внимание отвечают цвета элементов: Primary (5), Secondary (6) и Accent (7), перебивающий Primary;
— Характер задают: Danger (8), Success (9), Warning (10);
— Для фона кнопки — Background (11);
— Указанные выше яркие цвета можно применить не к тексту или иконке в кнопке, а к её фону. Тогда для её содержимого потребуется OnAccent (12);
— Кнопка в состоянии фокуса может иметь обводку с цветом Accent (с небольшим отступом, чтобы не сливаться, если у кнопки такой же фон), а в заблокированном состоянии — красить содержимое в цвет Disabled (13);
— Он же пригодится для плейсхолдера в поле ввода (логичнее было бы его назвать просто Tertiary);
— Также в статье есть о том, как подобрать цвета для этих токенов для светлой и тёмной темы.

Да, в заголовке статьи написано о 12 токенах, но это ошибка.

#color #design_system

В Pathway подготовили минигайд, как проводить немодерируемые исследования. Некоторые рекомендации:

— Исследование должно давать новое знание, которого нет в лучших практиках и предыдущих исследованиях. Не надо проверять иконку лупы в контексте поиска, но можно узнать, понятно ли, что текст «Поехали» означает отправку поискового запроса;
— В общем случае для количественного исследования стоит привлекать 100 человек на сегмент. С уровнем значимости 95% максимальная погрешность будет ≈10%;
— Сценарное тестирование — вид теста, когда респондент совершает простое действие, ради которого нет смысла проводить модерируемое исследование. Пример задания: «Выберите способ оплатить доставку еды на этом экране»;
— В заданиях иногда нужен контекст, чтобы человек понял, что происходит на экране. «Купите ОСАГО» → «Представьте, что вы уже выбрали тариф, срок и вид ОСАГО, заполнили анкету. Пожалуйста, оплатите страховку»;
— Если предлагаете варианты ответа, добавьте вариант «Другое» с возможностью оставить комментарий. Иначе респондент может не найти подходящего варианта, и вы получите недостоверные данные;
— В вопросах не указывайте на элементы интерфейса. Если кнопка называется «Оформить подписку», нельзя спрашивать «Куда нажать, чтобы оформить подписку»;
— Не используйте термины и профессиональную лексику. «Чекаут», «точка входа», «футер» наверняка вызовут затруднения;
— Если возможно, не запускайте тест сразу на всю выборку. Пилотная версия на 20−30 респондентов позволит отловить и исправить проблемы;
— К немодерируемым можно отнести: тест первого клика, Preference-тест или Side-by-side, пятисекундный тест, карточная сортировка, сценарное тестирование;
— В Preference-тесте макеты должны различаться всего одной деталью, отличие должно быть заметным. Лучше не сравнивать похожие оттенки или шрифты, тексты уведомлений или кнопок;
— Перед пятисекундным тестом не предупреждайте об ограничении в 5 секунд и не говорите, на что надо обратить внимание.

#unmoderated

Влад Шиляев написал о синхронизации команды с помощью CJM.

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

#cjm

Никита Самутин написал, как проявлять инициативу, чтобы это приводило к карьерному росту.

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

Видео. #career

Женя Перов написал о создании тёмной темы в мессенджере. Отдельные моменты:

— Установили правило глубины: то, что находится в перспективе ближе, — светлее;
— Цвет элементов можно регулировать прозрачностью (чем она выше, тем лучше через элемент виден чёрный фон), но тогда потребуются и чистые аналоги этих оттенков. Например, для поповера, чтобы через него не просвечивал нижележащий контент;
— Отдельно тестировали цвета на android-устройствах, так как цветопередача отличается от iOS и надо было проверить экраны от IPS до OLED;
— Снизили контрастность форматирования текста (цвет выделения текста из светлой темы был слишком ярким) и ссылок и упоминаний в сообщениях (чтобы подчеркнуть их место в иерархии относительно ссылки на комментарии к сообщению);
— Затемнение контента под попапом: если в светлой теме достаточно 50% от чёрного цвета, то в тёмной надо больше, например, 80%;
— Для десктопа снизили яркость текста, так как экран больше и поток белого света тоже больше;
— Тестирование показало, что линии недостаточно для отделения бокового меню от чата на десктопе. Фон меню сделали светлее;
— Плохо воспринималось изменение фона кнопки при ховере, стали менять цвет иконки и текста на голубой.

#dark_theme

Опубликовали видео с Alfa Design Meetup #3:

1. Ваня Кунцевич — Редизайн сайта Альфа-Банка (копия в ВК)

2. Слава Соколов — У вас BDUI: как с этим жить (копия в ВК)

3. Вова Зимин, Райффайзен Банк — Дизайнер превращается в менеджера (копия в ВК)

4. Даша Положенцева — Панк не сдох (копия в ВК)

5. Боря Шилин, Щёлочь — Новые визуальные эстетики (копия в ВК)

Бен для UX Collective написал об ошибках и лучших практиках отмены подписки.

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

In English. #offboarding

Александр Букин написал, с чем сталкивается дизайнер, которого повысили до лида.

— Лидерство — руководство отделом из нескольких человек;
— Сообщите подчинённым о своей новой роли. Хороший тон, если это сделает ваш руководитель в чате или на встрече;
— Кредит доверия вам в роли управленца в начале будет нулевым;
— Надо делом доказать команде, что вы на их стороне, а руководству, что команда действует в интересах бизнеса;
— Вежливое, конструктивное и уважительное отношение — залог доверительной коммуникации на старте и потом;
— Лучшее подтверждение навыков — ваши дизайн-решения. Делайте и показывайте отдельные задачи (не большие, на них не будет времени);
— Если в компании нет карты компетенций и регламентированного пути развития дизайнера, связанного с рыночными зарплатными вилками, займитесь этим;
— Кроме этого становитесь связующим звеном между бизнесом и дизайном (абстрактные хотелки → цели и задачи с метриками), улучшайте процессы, получайте бонусы для отдела;
— Чтобы вы завоевали доверие руководства, команда должна выдавать стабильный результат. Вашим результатом становится результат команды;
— В начале будет тяжело, адаптация может занять до шести месяцев. Чаще всего никто не станет объяснять, что делать;
— Смиритесь с тем, что не будете успевать всё. Используйте ICE для приоритизации дел. Делегируйте и примите, что результат будет отличаться от того, чего вы ожидали (это не значит, что он будет плохим);
— Планируйте квартал, месяц, спринт, неделю и день. Разметьте календарь повторяющимися встречами (планирование, груминги, один на один и прочее);
— Если раньше 70% времени вы занимались макетами и 30% коммуникациями, теперь будет наоборот. Постарайтесь поскорее доделать или передать задачи, где вы работаете с макетами. Познакомьтесь и наладьте связь со всеми, с кем будете взаимодействовать;
— В таск-трекере создайте доску для задач команды;
— Подумайте о процессе ревью макетов и перераспределении его на синьоров (чтобы не замыкать на себе);
— Вы будете улаживать конфликты, синхронизировать задачи, цели и файлы в Фигме для наиболее эффективной работы всего департамента и бизнеса в целом;
— Вопросы по дизайн-решениям вашей команды будут задавать не только авторам, но и вам как прямому руководителю. Будьте в курсе (как минимум, у кого что в работе и каков прогресс).

#management

Евгений Бондковски написал об отличии дизайна, ориентированного на продукт (product-centric) и ориентированного на пользователей (user-centric).

— Product-centric подход смещает фокус с пользователя на баланс между потребностями пользователей и бизнеса и возможностями разработки;
— Продуктовый дизайнер учитывает задачи бизнеса и потребности пользователей (которые обычно конфликтуют) и предлагает дизайн-решения, которые легче всего реализовать (нужен постоянный диалог с разработчиками и вовлечение их на ранних этапах проектирования);
— Подходящее решение не всегда получается найти сразу. Можно использовать итеративный подход с постоянным сбором обратной связи и доработкой. Чаще всего в продуктовом дизайне надо не создавать продукт с нуля, а дорабатывать то, что уже есть;
— Например, поступила задача: добавить возможность оставить чаевые курьеру. Исследование показало, что 1% пользователей хочет оставлять чаевые, а 21% не любит этого делать. Если ориентироваться на пользователей, чаевые стоит разместить за второстепенной кнопкой на экране успеха, чтобы возможность была, но не мозолила глаза;
— Но в чаевых заинтересован бизнес: они повышают доход курьеров, которые не уходят к конкурентам (и даже переходят от конкурентов к нам). Значит, выбор размера чаевых стоит разместить на экране успеха;
— Обратная связь после тестового запуска показала, что функцией пользуются, но пользователи стали менее довольными: не нравится навязчивость, что просят заплатить ещё, непонятно, сколько из этой суммы получит курьер. Это можно итеративно улучшить;
— Учёт технических ограничений: варианты суммы чаевых вычислялись в процентах от заказа. Но разработать проще, если варианты будут фиксированными и заранее вычисленными из размера среднего чека.

#thinking #product

Ксения Толокнова написала о мобильных клавиатурах.

— При проектировании мобильных форм стоит подумать о подходящих экранных клавиатурах;
— Клавиатура зависит от типа поля ввода, которых около 50 на iOS и 30 на Android;
— Например, для ввода имейла на iOS на клавиатуре с буквами появляются «.» и «@». Для ввода телефона используется цифровая клавиатура с символами «+», «*» и «#»;
— Есть более специфичные варианты, заточенные под ввод определённых наборов символов. Например, dectimalPad для ввода нецелых чисел;
— Можно скрыть строку с рекомендациями (при вводе имейла в ней может быть имейл пользователя), настроить действия при вводе, например: автозамену при орфографических ошибках, написание новых предложений с заглавной буквы;
— Во многих клавиатурах есть кнопка действия (может быть заблокированной). По умолчанию это Return, которая в зависимости от типа поля переключает на следующее поле, создаваёт новую строку, сворачивает клавиатуру;
— В iOS их 12 вариантов: Next переключает на следующий элемент ввода или шаг, Continue переводит на следующий шаг, Search запускает поиск;
— Если в вашей форме на кнопке написано Continue, здорово, если на экранной клавиатуре тоже будет Continue;
— Можно настроить, как скрывать клавиатуру (или не скрывать совсем, как в Ноушене). В iOS-приложении Телеграма она скрывается свайпом вниз, у Ютуба — минимальной прокруткой контента;
— Чтобы в тулбаре появлялись коды из смс, типом поля должно быть OTP;
— Над клавиатурой можно добавить кастомный тулбар (Ноушен, Твиттер). Их можно стилизовать под нативный с помощью серого фона (Google App, Revolut);
— Например, в приложении MyFitnessPal в тулбаре можно менять единицы изменения, одновременно с этим вводя числа в соответствующее поле.

Копия статьи. #mobile #form

Дмитрий Подгайский написал, почему геймификацию не стоит начинать с баллов, лидербордов и ачивок.

— Баллы — это награда за совершённые действия, которая может принимать форму очков опыта, игровой валюты и прочего. Они хорошо работают для положительного подкрепления;
— Сложно определить, сколько баллов давать за те или иные действия;
— Чтобы пользователи ценили баллы, нужна возможность обменять их на что-то ценное, а это дополнительный бюджет, которого может на старте не быть;
— Баллы надо считать: сколько выдали и потратили. Без экономической модели и контроля механика быстро ломается;
— Это внешняя мотивация, которая работает хуже внутренней;
— Лидерборды разжигают соревновательность и азарт, показывают, кто самый крутой. Некоторые люди любят возглавлять разные рейтинги;
— Также они позволяют проводить разные турниры, делать посты в соцсетях и создают инфоповоды;
— Хороший лидерборд, который не будет демотивировать недостижимыми позициями лидеров, сделать непросто. Надо делить его на лиги, классы и разделы, отделять активных участников и остальных;
— И надо понять, по каким критериям его строить. С фитнес-приложениями понятно, а что делать интернет-магазинам?
— Плюс для построения лидерборда у пользователей должны быть профили, имена и аватары;
— Ачивки в геймификации бизнеса не работают и на метрики не влияют. От них можно получить пользу, но точно не на старте геймификации.

#gamification

Матеуш Литарович написал о когнитивной нагрузке.

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

In English. #cognitive_load

Опубликованы видео с Дизайн-просмотра:

1. Егор Мызник, Plenum — Профессиональные заболевания дизайнеров

2. Данила Шорох, Всесмарт — Лопни свой социальный пузырь

3. Олег Баринбойм, TutkovBudkov — Как продавать креатив

4. Александр Лыгин — Что не так с вашими проектами

5. Сергей Гуров — Невидимый дизайн. Идиоматический подход

6. Александра Королькова, Paratype — Вся правда о шрифтовых парах

7. Михаил Кучин, М18 — Открытый дизайнер

8. Покрас Лампас — Новая Визуальная Культура

9. Леонид Ивахов, МТС — Развитие дизайн лидера и команды

10. Митя Осадчук, Иви — О смыслах дизайна и эффективности айдентики

11. Вова Лифанов, Супрематика — Что было после

Никита Самутин написал, как начинающему дизайнеру выделиться, откликаясь на вакансии.

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

#career

Настя Фальковская написала о пирамиде кайфовости интерфейсного текста.

— Аарон Уолтер в книге «Эмоциональный веб-дизайн» представил характеристики продукта в виде пирамиды: чем ближе к основанию, тем они важнее;
— Характеристики текста тоже можно представить в виде пирамиды. Нет смысла улучшать его более высокоуровневые характеристики, не проработав основные;
— В основании будет «Польза»: текст должен решать какую-то задачу. Какая у экрана цель, кто аудитория, что человек должен сделать после прочтения текста? Может оказаться, что текст вообще не нужен или его можно заменить графикой;
— Уровнем выше — «Грамотность»: ошибки показывают неаккуратность и невнимательность, что негативно характеризует продукт и то, как мы оказываем услуги;
— Затем «Удобство и понятность»: формулировки понятны и помогают пользователю не спотыкаться на пути к цели. Например, вместо «Выйти» на кнопке — текст, который подсказывает, что изменения будут сохранены. Антипример: «Не сохранять изменения? Да / Нет»;
— Далее «Красота и доступность»: деепричастия, страдательный залог и прочий канцелярит заменены на простые и лаконичные формулировки;
— На вершине пирамиды «Эмоциональность»: текст доставляет удовольствие, радует пользователя. Шутками, проявлениями заботы, отсылками и так далее. Не каждая надпись должна вызывать эмоции, но общее впечатление должно быть приятным и тёплым.

#writing

Егор Камелев написал о проблеме неактивной кнопки при отправке формы.

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

#button #form

Вадим Митякин и Андрей Шапиро обсудили CJM и Карту процесса-опыта.

— В CJM представляют линейный путь пользователя, который решает какую-то задачу, разложенный на ключевые точки, где с потребителем происходит что-то важное;
— Даже если в этих точках мы, как создатели продукта, во взаимодействии не участвуем;
— Цель — понять, как создать для пользователя ценность, помочь ему с решением задачи на том или ином шаге с помощью функций нашей системы;
— Функции CJM: фиксация, формирование единого понимания участниками процесса, включение новых участников, управление процессом изменения;
— Нет какой-то единой или классической нотации CJM;
— Нотация BPMN фиксирует процессы. Люди там тоже есть, но они на периферии;
— CJM нужен, чтобы попасть в шкуру пользователя, что-то понять и перейти к созданию какого-то конкретного решения для определённой ключевой точки. Поэтому CJM часто остаются пылиться после создания;
— Карта процесса-опыта — результат эволюции гибридной нотации CJM и Service blueprint;
— Она позволяет соединить опыт потребителя (или других участников взаимодействия) с обеспечивающими этот опыт процессами;
— В отличие от CJM у неё есть конкретная нотация. В отличие от BPMN, нотация простая, с минимумом элементов, не требующая специальных знаний, чтобы её читать;
— Также в отличие от BPMN она учитывает, что это не программы, а живые люди, которые не всегда обязаны двигаться по процессу. Потребитель может просто уйти;
— Но если вы пришли на проект, где все говорят на языке BPMN, возможно, не стоит этого менять и лучше подстроиться;
— Карта процесса-опыта соединяет машины и людей, показывает связь бизнес-модели и инструментов, задействованных в ней.

Копия видео в ВК. #cjm #service_blueprint

Игорь Штанг написал, можно ли ставить заголовок на одинаковом расстоянии от верхнего и нижнего текста.

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

Копия в ЖЖ. #layout

Энтони Ценг написал, как в мобильных интерфейсах можно иногда отказаться от кнопки «Назад».

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

In English. #navigation #mobile

Поле обратной связи
#совет из старого фонда

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

Что у нас есть для этого в арсенале? Подпись, пространство, плейсхолдер.

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

Пространство. Размер поля даёт понять пользователю, сколько от него примерно ждут текста. Если вы хотите отзыв длиннее двух-трех слов — дайте для этого пространство. В однострочное поле напишут ровно одну строку, даже если это это ограничение чисто визуальное. А слишком большое поле может отпугнуть, как пустой А4 на экзамене.

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

И кое-что ещё. Не рекомендую делать универсальные поля «для всего». Например, одно поле для отзывов и для пожеланий. Лучше сделать отдельными полями, чтобы не путать людей. Если разделить не вариант, то хотя бы перечислить возможные типы сообщения в подписи или плейсхолдере.

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

— В студии проекты длятся 4−8 месяцев, дизайнер может вести 2 проекта параллельно. Продукты живут и развиваются годами и десятилетиями;
— Проекты могут быть из самых разных сфер. В продукте дизайнер глубоко погружается в предметную область и начинает разбираться в тонкостях этого бизнеса;
— В студии типовые задачи дизайнера связаны с созданием проектов с нуля, от брифа и концепции до защиты перед клиентом. В продукте — с улучшением и развитием существующего, от изучения стратегии и ключевых метрик до увязывания решения с интересами нескольких стейкхолдеров и соседних отделов;
— В продукте любые решения проходят через ведущего дизайнера, продакта и вышестоящих менеджеров, творческая свобода ограничена дизайн-системой, брендом, финансовыми целями, легаси, интересами разных департаментов и видением продакта, так как цена ошибки высока;
— Ключевые навыки дизайнера в студии должны позволять ему придумывать что-то новое и воплощать минимальными средствами. В продукте — мыслить системно, быть в курсе работы других команд, учитывать технические и бизнес-ограничения, работать с метриками;
— Зарплаты в продукте чаще всего будут больше, так как студия зарабатывает на дизайнерах, а продукт, например, на кредитках и ипотеках, и зарплаты дизайнеров в его бизнес-модели — незначительная часть издержек;
— Прежде чем менять работу, подумайте, какие задачи вас вдохновляют, чему вы хотите научиться, значима ли ваша работа, часто достаточно сменить проект или команду внутри компании;
— Нет студийных или продуктовых дизайнеров. Сильный дизайнер понимает в бизнесе, умеет исследовать и измерять результаты своей работы, и такой дизайнер всегда будет востребован.

#career