uxnotes | Other

Telegram-канал uxnotes - UX Notes

25189

Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads Включён в перечень Роскомнадзора: https://gosuslugi.ru/snet/67a9a56970de7b4d761a81ae

Subscribe to a channel

UX Notes

Хороший дизайн — это когда каждая деталь работает на пользователя.

Команды VK знают: красота — это не только эстетика, но ещё и ясность, удобство и эмоции. Смотрите истории cотрудников VK, и находите вакансии по душе!

Читать полностью…

UX Notes

Про «Эмоциональный дизайн»
Если коротко: это плеоназм, маркетинговый булщит.

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

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

Возможно это и имеется в виду — «дизайн вызывающий эмоции»?

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

Любой результат дизайна вызывает эмоции, слабые или сильные — в этом суть дизайна (деятельность по проектированию эстетических свойств, художественное конструирование). Дизайн автомобиля не может не вызвать эмоции (тут полный спектр, от брезгливости до восхищения). Более того, дизайн не вызывающий эмоций (нейтральный, универсальный, «никакой») еще сложнее создавать и это отдельно-стоящая задача.

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

Термин и концепцию описал в своей книге Дональд Норман (Emotional Design, 2003). В этой концепции три уровня восприятия: висцеральный, поведенческий и рефлексивный завернутые в классическую модель отношений ABC. И человек воспринимает дизайн объектов на этих трёх уровнях…

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

«Эта кружка, моя любимая (эмоция) — она керамическая, без рисунка (эстетика), у нее удобная ручка, приятно держать, хорошо держит тепло (эргономика), стоит дорого, но это ручная работа! (психология)».

Любите и изучайте базу! 🫶

Читать полностью…

UX Notes

Илья Безделев написал об одно- и двусторонних дверях при принятии продуктовых решений.

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

#prioritization

Читать полностью…

UX Notes

В Rutube обновили дизайн веб-версии Студии для авторов. Обновление основных разделов доступно всем пользователям.

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

«По результатам нашего опроса новый дизайн воспринимается как более интересный, современный и удобный, а средняя оценка составила 6,5 из 7. Проделанная работа по редизайну сервиса позволит ускорить реализацию будущих обновлений и улучшений, так что Студия RUTUBE будет постоянно развиваться и обрастать новыми функциями», — директор по продукту Евгений Ильчук.

Читать полностью…

UX Notes

10 декабря в 19:00 мск UX Feedback и Лемана Про расскажут об опыте сбора и интерпретации фидбека.

— Ошибки в этом процессе приводят к тому, что продукт улучшили, а роста нет;
— Иногда исследователи приносят слишком общие данные, с которыми сложно принимать решения. Точечно и быстро собирать данные помогают ad-hoc опросы;
— Инструментов для исследования много. Чтобы не возникал хаос, надо уметь всех их поженить и распределить по этапам.

Кроме этого эксперты (менеджер по развитию бизнеса UX Feedback Артем Кардава и руководитель отдела онлайн-продуктов Лемана Про Ольга Сурда) расскажут:

— Как принимать решения о доработках на основе данных, а не предположений;
— Как точечные опросы помогли Лемана Про повысить конверсию на 5% без долгих и дорогих экспериментов;
— Как превратить фидбек в инструмент роста: какие изменения реально влияют на метрики и как их внедрять в процесс разработки;
— Как перевести работу с обратной связью в систему. Методология Voice of the Customer (VoC).

Зарегистрироваться на вебинар

Реклама ООО «ФИДБЕК». ИНН: 5030094661, erid: 2VtzqwnZWvu

Читать полностью…

UX Notes

Энтони Ценг написал uxteddy/0exvssIr2jF">о форме ввода данных банковской карты.

— До того, как пользователь откроет эту форму, покажите логотипы платёжных систем, карты которых принимаются;
— После ввода первых цифр номера карты отобразите логотип платёжной системы, чтобы показать, что пользователь вводит правильный номер;
— Группируйте вводимые цифры так же, как они отображаются на карте, чтобы легче было их сверять;
— Для ввода срока действия карты не используйте выпадающие списки, не давайте вводить номер месяца одной цифрой, а год четырьмя. Используйте маску MM/YY;
— Подпись для поля «Name on card (Имя на карте)» понятнее, чем «Cardholder name (Имя держателя карты)»;
— Подпись «Security code (Код безопасности)» для цифр с обратной стороны карты понятнее, чем аббревиатуры вроде CVV или CVC (встречаются и другие варианты);
— Порядок полей: Номер карты, Срок действия, Код безопасности, Имя на карте;
— Поля «Срок действия» и «Код безопасности» можно сделать уже, чтобы подчеркнуть, что в них можно ввести меньше символов;
— Валидируйте поле для ввода номера карты после того, как пользователь закончил ввод, чтобы не пугать его раньше времени;
— Отображайте сообщения об ошибках под соответствующими полями, чтобы была чёткая взаимосвязь;
— Кнопка в такой форме не всегда приводит к платежу. Пишите в кнопке, что произойдёт при нажатии. Например: «Continue to review order».

#form #payment

Читать полностью…

UX Notes

Александр Букин написал, как упростить поиск актуальных макетов и ответственных за них в большом продукте.

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

#management

Читать полностью…

UX Notes

Андрей Шапиро написал о вопросах, направляющих проектирование.

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

#analysis

Читать полностью…

UX Notes

Анастасия Зайцева написала об отличиях в поведении возрастных пользователей.

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

#old

Читать полностью…

UX Notes

Расскажем просто о сложном и разберёмся, как создавать реально эффективные интерфейсы! 💻

Идеальный план на 22 ноября для дизайнеров, исследователей и продактов — конференция «Просто Сложно», посвящённая дизайну и исследованиям инженерных продуктов.

В программе конференции — выступления экспертов из Сбера, Т1, Wildberries и «Газпром нефти». И, конечно же, ответы на важные вопросы:

✔️ Зачем и как систематизировать процесс дизайна?
✔️ Как создать универсальную платформу для интеграции инструментов?
✔️ Какие метрики можно измерить в инженерных продуктах, а какие — нет?

Регистрируйся на онлайн-трансляцию самого экспертного выходного ноября! 😉

Читать полностью…

UX Notes

Виктория Филиппова написала о возрастной маркировке.

— Это отметки вроде 6+, 12+. Они указывают, с какого возраста рекомендуется просмотр контента, участие в мероприятии или использование предмета;
— В России, согласно федеральному закону 436-ФЗ, маркировка должна быть на афише, объявлении или билете и занимать не менее 5% их площади;
— Роскомнадзор и суды считают афишей любой публичный визуальный элемент, который информирует о событии и побуждает к просмотру, участию или покупке билета. То есть это и баннер, и карточка события на сайте;
— Отметка должна быть заметной, то есть её нельзя прятать внутри текстового описания мероприятия или размещать в углу страницы без видимой связи с событием;
— Если на странице мероприятия есть и его описание, и постер, для полного соответствия закону маркировка должна быть и в описании, и на постере (да, получается дублирование);
— В статье есть примеры маркировки на Яндекс Афише, Афише, МТС Live, Кинопоиске, Кассире, Киномониторе, а также на иностранных ресурсах;
— Брать пример с конкурентов не всегда хорошая идея, так как они могут закон не соблюдать, беря на себя риск;
— Не стоит делать маркировку настолько незаметной, насколько позволяет закон. Это полезная информация о мероприятии, которая должна быть доступна наравне с прочей информацией. Благодаря ней родители могут понять, что подходит их детям (особенно актуально для родителей малышей), и сделать правильный выбор.

#laws #entertainment

Читать полностью…

UX Notes

Дима Мохамад тоже написал о Chrome DevTools, можно немного дополнить статью Юрия Герыша.

— Во вкладке Elements можно выделить конкретный элемент кода страницы и увидеть отступы;
— Они бывают внутренними (paddings) — отступы между содержимым элемента и его границами (например, между текстом внутри карточки и её краями) — и внешними (margins) — отступы до соседних элементов, например, между разными карточками;
— Так на дизайн-ревью можно точно сказать фронт-разработчику, какой отступ сейчас в коде и каким он должен быть;
— Через DevTools можно скачивать изображения, защищённые от скачивания через «Сохранить как…»;
— Для этого во вкладке Network в фильтре надо выбрать Img, обновить страницу, в появившемся списке всех загрузившихся изображений найти нужное, нажать правой кнопкой мыши и выбрать «Save image as…»;
— В статье есть понятные иллюстрации и инструкции, как найти и включить разные функции вроде Styles, Computed, Responsive Design Mode и так далее.

#chrome_devtools

Читать полностью…

UX Notes

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

— Понадобится Node.js, Expo, Git и редактор кода Cursor;
— Expo даёт набор инструментов для создания кроссплатформенных приложений (мобайл и веб) на базе React Native;
— Прототип можно запускать через Expo Go на телефоне как обычное приложение (на любой операционной системе) с нативным поведением, виброоткликом, гироскопом и так далее;
— Git нужен для сохранения всей истории изменений файлов проекта. Полезно при вайбкодинге, так как Курсор может откатить изменения только в пределах одного контекстного окна;
— У Курсора есть Rules and Memories, где можно указать место хранения SVG-ассетов и выбранную библиотеку для анимации (например, React Reanimated). Правила могут распространяться на конкретный проект Project Rules и на все проекты User Rules;
— Пропишите в правилах, что приложение будет в связке React Native и Expo. Возьмите в Фигме personal access token и укажите его в настройках MCP. Так Курсор сможет ходить в Фигму за макетами;
— Если не работаете с дизайн-системой, потратьте время на нормальное именование элементов в Фигме. Так можно будет обращаться к конкретным элементам, а ИИ даже сможет предугадывать ваши желания при создании прототипа;
— Создайте шаблонный проект приложения со стандартной структурой, сбросьте шаблон, чтобы получить чистый проект;
— Начать эксперименты лучше с файла index.tsx, который отвечает за главную страницу;
— Скопируйте в чат ссылку на фрейм главной страницы в Фигме и скажите использовать функцию get_code (команда изучить структуру фрейма), чтобы ИИ воссоздал макет в коде;
— Так можно проверять решения без разработчиков, лучше разобраться в терминологии и логике кода.

#ai #prototype

Читать полностью…

UX Notes

Соня Соуза написала о странице с нулевыми результатами поиска в интернет-магазине.

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

In English. #search #empty_state

Читать полностью…

UX Notes

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

— Эффект эстетичности: люди склонны воспринимать красивый дизайн как более удобный. Но работает это только для небольших недочётов;
— Эффект приманки: если к 2 равнозначным вариантам добавить 3-й, заметно проигрывающий одному из них, люди чаще выбирают выигрывающий на его фоне вариант;
— Например, можно добавить чуть лучший, но намного более дорогой вариант, чтобы склонить к среднему по цене варианту;
— Эффект каскада доступной информации: чем чаще повторяется утверждение, тем сильнее становится вера в него. Так работает массовая реклама;
— Эффект победителя: люди склонны перенимать поведение, которого придерживается множество других людей. Это конформизм и желание быть частью общества. В электронной коммерции его используют социальные доказательства: отзывы и оценки;
— Эффект обратного победителя: люди избегают определённого поведения, если считают, что так поступает масса других людей;
— Пример одновременного действия этих эффектов: люди стремятся вместе со всеми купить новую модель айфона и при этом не покупают андроид, чтобы не быть «как все»;
— Эффект якоря: на оценки и суждения человека влияет первоначальная информация;
— Например, стоимость дорогих товаров, которые оказались в начале списка при сортировке «от дорогих к дешёвым», или обычная цена при наличии немного более низкой цены по карте покупателя;
— Эффект предпочтения статус-кво: люди желают, чтобы всё оставалось примерно тем же самым. Поэтому они плохо воспринимают революционные редизайны;
— Эффект неприятия потерь: люди воспринимают потерю более чем в 2 раза сильнее, чем приобретение того же самого. Потерять 500 рублей неприятнее, чем найти 1000. Или не получить то, на получение чего уже настроился;
— Используется в бесплатных пробных версиях и акциях 3 по цене 2: даже если 3-я единица товара не нужна, отказаться от неё тяжело;
— Эффект фрейминга: подача информации влияет на её восприятие;
— Например, автодилеры пишут не «скидка», а «выгода». Скидка 5000 рублей выглядит весомее, чем 5%, даже если это одна и та же скидка. Но если цена товара небольшая, лучше работают проценты;
— Эффект авторитета: люди больше верят оценкам авторитетных фигур (врачам, людям в униформе). На эффект рассчитаны рекомендации экспертов в описании товаров.

#psychology #ecommerce

Читать полностью…

UX Notes

Седьмой год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?
 
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
 
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
 
P.S. Результаты за 2024, 2023, 2021, 2020, 2019 и 2018.

Читать полностью…

UX Notes

Александр Попов написал об измерении удобства промышленных продуктов.

— Такие продукты прилагаются к рабочему месту, и пользователи не могут от них отказаться, даже если продукт неудобен;
— От них может зависеть безопасность производства, персонала и окружающей среды, и было бы здорово, чтобы интерфейс сам по себе не добавлял проблем;
— Nielsen Norman Group предложили оценивать удобство таких продуктов с помощью фреймворка CASTLE;
— Cognitive load — сколько когнитивных усилий надо для выполнения задачи. Метрики: NASA Task Load Index, количество обращений в службу поддержки;
— Advanced feature usage — насколько активно люди используют продвинутые функции;
— Satisfaction — помогает ли продукт решать рабочие задачи. Метрики: System Usability Scale, Single Ease Question (сразу после выполнения задачи спрашиваем, насколько легко было её выполнить), Customer Effort Score (похоже на SEQ, но спрашиваем, как много усилий пришлось приложить);
— Task efficiency — как быстро и успешно пользователи справляются со своими рабочими обязанностями с помощью продукта. Метрики эффективности: Time on Task (время выполнения задачи), Task Success Rate (процент успешного выполнения задач), Number of Steps to Complete a Task (количество действий для выполнения задачи);
— Learnability — насколько легко новые пользователи осваивают продукт;
— Errors — частота и критичность совершаемых ошибок, и насколько пользователю легко исправить свою ошибку;
— Для сбора данных можно логировать ключевые действия в системе, а также интервьюировать пользователей и наблюдать за ними в естественной среде;
— Полезно отслеживать частоту использования обходных путей и дополнительных инструментов: держат ли пользователи калькулятор, выгружают ли данные, чтобы обработать в Excel?
— Ценность улучшений для бизнеса: увеличение скорости обучения новых сотрудников и производительности, уменьшение количества ошибок и связанных с ними потерь и текучки.

#metrics #industrial

Читать полностью…

UX Notes

Евгений Шпилевой написал о 40 основных элементах интерфейса: используемые названия, особенности применения, рекомендации по дизайну.

— Например, кто-то называет переключатель тогглом (toggle), а кто-то свитчем (switch). Нижнюю панель навигации в мобильных приложениях Material Design называет Nav bar (Navigation bar), а Human Interface Guidelines — Tab bar;
— Аккордеон отличается от коллапса (позволяет свернуть и развернуть часть контента) тем, что состоит сразу из нескольких блоков, которые можно разворачивать и сворачивать. Аккордеон часто используют для FAQ (часто задаваемых вопросов), а коллапс — для блока «Показать ещё»;
— Пагинация (pagination) позволяет перемещаться между разделённым на порции (страницы) контентом. Классический вид — перечень номеров страниц, но также есть вариант с кнопкой «Загрузить ещё» (нажатие приводит к загрузке следующей порции) и бесконечным скролом (следующая порция загружается автоматически при прокрутке страницы);
— Кроме бургерного меню есть ещё кебаб (3 вертикальные точки), фрикадельки (3 горизонтальные точки) и бенто (2×2 или 3×3 точек или квадратов). Кебаб (чаще в Android) и фрикадельки (iOS) обычно открывают меню с дополнительными действиями или настройками. Бенто — меню приложений или сервисов;
— Табы — элемент навигации, позволяющий переключаться между контентом, находясь на одной странице, не используются для ввода пользовательских данных;
— Выпадающий список (dropdown) — это панель, которая отображается после нажатия на селект, мультиселект или кнопку и включает список вариантов для выбора;
— Textarea правильно произносится «текстэреа»;
— В поле для ввода пароля текст по умолчанию скрыт и отображается иконка открытого глаза, нажатие на которую позволяет увидеть введённый текст;
— Если операция длится больше 3–5 секунд, вместо лоадера (показывает, что система выполняет какую-то операцию) лучше отображать прогресс-бар (показывает, насколько продвинулось выполнение какой-либо операции);
— Тост (toast notification) в отличие от уведомления (notification) должен исчезнуть спустя 3–5 секунд, поэтому в нём мало текста и нет кнопок для дополнительных действий.

Читать полностью…

UX Notes

Илья Безделев написал, что делать с дизайн-долгом (papercuts).

— Дизайн-долг — места в интерфейсе, где что-то получилось криво по незнанию или неумению или где срезали углы, чтобы сделать быстрее;
— По отдельности проблемы вроде лишнего шага или немного кривой валидации формы не смертельны, как порез бумагой;
— Но если нанести слишком много порезов, может случиться «death by a thousand papercuts» — продукт перестанет приносить пользователям радость;
— В каждом цикле планирования выделяйте время на исправление мелких недочётов;
— Их можно закидывать в планы с низким приоритетом как бонусные задачи. Сделал большое дело, можно заняться мелочью;
— В командах с полноценными онколл-ротациями у разработчиков может быть свободное время онколла, когда не надо тушить пожары. Они могут заниматься papercuts;
— Хакатон-фиксатон — на неделю отложить работу над фичами и заняться фиксом дизайн-долга.

#design_debt

Читать полностью…

UX Notes

Кристина Мруц написала, как снизить влияние когнитивных искажений на восприятие пользовательского фидбека.

— Перед релизом новой версии вы могли переживать, что пользователи её не примут, и негативные отзывы (даже если их несколько) подтвердят ваши сомнения;
— Чтобы уменьшить эффект подтверждения, когда мы принимаем только аргументы, подтверждающие нашу исходную позицию, перед чтением отзывов изучите объективные данные (например, продуктовые метрики);
— Можно привлечь независимого аналитика или автоматически кластеризовать отзывы по темам (BERTopic, GPT-based summarization), чтобы оценить тренды без влияния предположений команды;
— Чтобы уменьшить негативное искажение, делите отзывы на позитивные, негативные и нейтральные и смотрите на их баланс. Тональность отзывов помогают определять RoBERTa и BERT-based модели;
— Смотрите на частоту проблем: сколько пользователей пишет об одном и том же;
— Но учтите, так сложнее заметить отдельные отзывы, которые сами по себе могут стать проблемой. Например, негативные публикации инфлюенсеров;
— Стоит отделять отзывы о временных негативных или позитивных событиях. Если сервер лежал несколько часов, будет много негатива, но это проблема не продукта, а инфраструктуры;
— Один яркий запоминающийся кейс из саппорта может создать впечатление, что это значимая проблема (эвристика доступности);
— Систематизируйте отзывы по сценариям, чтобы не принимать редкие проблемы за типичные. С этим помогает LDA, BERTopic и GPT-топики. Полезно иметь базу типовых пользовательских сценариев, чтобы ссылаться на них и лучше понимать контекст отзыва;
— Чтобы снизить эффект авторитета, не указывайте статус автора;
— Но иногда полезно наоборот сегментировать отзывы по авторам: эксперты, инфлюенсеры, новички, обычные пользователи. При развитии продуктов для узких сегментов отзывы экспертов критически важны;
— Тон отзыва влияет на интерпретацию. Учитесь не вестись на манипулятивный, эмоциональный, экспертно-уверенный стиль высказываний.

#feedback

Читать полностью…

UX Notes

«ИИстина» — митап Яндекса про ИИ, людей и то, что между ними

4 декабря в Москве и онлайн Яндекс собирает технокреативных людей — дизайнеров, продюсеров, маркетологов, контент-лидеров и арт-директоров. Те, кто задаёт тренды в своих командах и уже использует ИИ, но часто точечно и без системы.

На «ИИстине» мы вместе:
• Систематизируем знания и опыт с ИИ
• Посмотрим, что реально работает, а что нет
• Заберём проверенные инструменты и лайфхаки коллег

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

📍 4 декабря, 17:00, Москва и онлайн

👾 Регистрируйтесь, если хотите понимать нейросети, а не просто их использовать.

Реклама. ООО "Яндекс". ИНН 7736207543

Читать полностью…

UX Notes

Оля Ходаковская написала об измерении успешности дизайна с помощью UX-бенчмаркинга.

— Иногда метрики вроде количества зарабатываемых денег не подходят. В B2B успехи сильно зависят от отдела продаж (выиграли тендер, привели хороших лидов). Да и продукты могут быть бесплатными;
— Ключевые метрики юзабилити: результативность (effectiveness), эффективность (efficiency), удовлетворённость (satisfaction);
— В технически сложных продуктах эффективность или time on task (время выполнения задачи) падает при добавлении новых фич. Они увеличивают путь пользователя (например, время конфигурации сервера), но привлекают клиентов;
— Результативность — task completion rate, насколько успешно пользователи справляются с задачей. Обычно задачи состоят из 2–5 шагов, на микрозадачи нет смысла смотреть из-за высокой конверсии;
— UX-бенчмаркинг — сравнительное количественное исследование. Можно сравнивать показатели продукта в этом и прошлом периоде (или до и после редизайна), разных продуктов компании, конкурирующих продуктов (сложно и дорого);
— Проводя его регулярно, надо выбрать период, который будет учитывать сезонные колебания и длину цикла разработки (чтобы успевали накопиться изменения в продукте);
— Показатели у разных задач могут отличаться. Базовые уровни в Селектеле: 48% для ключевых сервисов, 33% для базовых вспомогательных, 20% для сложных и тех, которые нужны только определённым сегментам клиентов;
— Для сбора данных используют self-hosted PostHog. UX-дизайнеры проектируют все события и единообразно по шаблону их называют: Источник события_Продуктовое направление_Продукт или фича_Объект и действие с ним;
— При сборе данных надо фильтровать внутренних и тестовых пользователей, учитывать только уникальных пользователей (2 раза прошёл сценарий = 1 справившийся с задачей пользователь);
— Также надо подобрать окно конверсии. Например, человек мог 2 недели заходить в форму и уходить подумать, что-то согласовать с коллегами, но в итоге выполнить задачу. Это тоже будет посчитано как 1 успешное прохождение сценария;
— Сравнивать показатели можно с первым замером, известными значениями у аналогичных продуктов, целевым значением, выбранным как OKR, например, которого хочется достичь после релиза нового дизайна;
— Зная значение метрики, можно на неё влиять, внося изменения в продукт и его интерфейс. Можно количественно оценивать эффективность своих решений;
— Промо метрики: ежеквартальные встречи для обсуждения итогов очередного бенча и шагов по оптимизации метрики, публикация итогов в корпоративном канале, рассказ о процессе и подключение к нему новых продуктов и сценариев, ссылки на метрику при обсуждении со стейкхолдерами.

#metrics

Читать полностью…

UX Notes

SberDesign Meetup

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

В гостях: Авито, Атом, S7, Додо Пицца, SberDevices, Самокат, Домклик, Сбербанк.

Интенсивная серия коротких докладов про:

➖ Дизайн-команды: как они развиваются и какие новые роли появляются, чтобы отвечать на задачи бизнеса.
➖ Культуру и взаимодействие: как выстраиваются отношения внутри команд и растится доверие.
➖ Новые вызовы в продуктах: какие решения помогают командам не просто адаптироваться, а менять рынок.

1 декабря, 18:00
Москва, офис Сбера
Бесплатно, по регистрации

👉
Подать заявку

Читать полностью…

UX Notes

Дмитрий Подлужный написал о проектировании интерфейсов интерактивных экранов.

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

#interactive_display

Читать полностью…

UX Notes

Павел Шерер написал о подходе к приоритизации PoDPR.

— Формула: (Pain ÷ Difficulty) × Probability × Reversibility;
— Боль — выраженность проблемы для пользователя или бизнеса. Сложность — стоимость реализации. Чем больше боль и меньше затраты на её устранение, тем лучше;
— Probability — насколько вероятно, что изменение даст целевой результат. Должно основываться не на вере, а на данных, экспериментах и обратной связи;
— Reversibility — насколько легко откатить решение при провале. Чем выше обратимость, тем смелее можно проверять гипотезы;
— Формула прямо наказывает дорогостоящие, слабообратимые и плохо подтверждённые затеи;
— В статье есть критика других способов приоритизации (MoSCoW, RICE, ICE, Kano Model, WSJF, Value vs Effort Matrix, User Story Mapping, Impact Mapping) и советы, как дополнить их с помощью PoDPR;
— PoDPR не задумывался как жёсткая формула, его сила в способности адаптироваться под контекст компании;
— Например, если важно считать охват новых фич, как в RICE, то Pain можно разложить на Severity (серьёзность проблемы) × Frequency (частота возникновения) × Reach (охват);
— Если критично время, можно добавить аналог Time Criticality из WSJF. PoDPR = (Pain ÷ Difficulty) × Probability × Reversibility × Urgency;
— Если важно учесть масштаб возможного ущерба — коэффициент Blast Radius;
— Если важно выбирать устойчивые и лёгкие в поддержке решения (для платформенных изменений) — коэффициент Sustainability;
— Добавляя коэффициенты, важно задокументировать, кто оценивает, какие источники данных используются, какие артефакты должны подтверждать оценки;
— Возможные значения коэффициентов фиксируются в шкалах с описанием и примерами, какое значение выбирать. Например, для оценки Urgency должны быть конкретные критерии: срок до дедлайна, сезонность, ограниченность окна возможностей;
— Изменения в шкалах допустимы не чаще, чем раз в квартал, чтобы не превращать формулу в инструмент для политических игр.

#prioritization

Читать полностью…

UX Notes

Амиран Карацев написал, что делать, чтобы работники-зумеры не уходили из вашей команды.

— В основном молодые специалисты сейчас — зумеры. Принято считать, что они не хотят работать. Проблема в том, что именно они (зачастую впервые в жизни) сталкиваются с сильно просевшим за последние годы управленческим дизайном;
— Они стремятся к гибкости (удалённый и гибридный формат, большая автономия, фриланс) и благополучию (снижение стресса, забота о себе, работа на себя, а не мерседес для акционера);
— Их лояльность работодателю не безусловна, а зависит от среды: отношения в команде, соблюдение личных границ, возможность развиваться, забота со стороны компании, ясность ожиданий;
— Универсалии труда — понятные цели, забота и развитие — важны всем независимо от возраста и системно провалены. Процессы надо адаптировать под контекст компании, а не просто брать «из мемов» (пример с адаптацией дизайн-ревью);
— Решение проблемы с онбордингом: список ролей в компании, шаблоны артефактов, чеклисты, чтобы понимать, как выглядит хороший результат, фидбек через 30, 60 и 90 дней испытательного срока;
— Метрики: Time-to-Value новичка, NPS онбординга, доля задач без эскалаций до руководителя за 30, 60, 90 дней;
— Ритуалы, которые не улучшают координацию или качество решений, надо отменять или проводить асинхронно (как повысить эффективность встреч). Иначе они превращаются в прокси-контроль, вызывают усталость и недоверие процессам;
— Метрики: доля снятых блокеров за спринт, удовлетворённость митингами, MTTR по инцидентам;
— Возврат в офисы снижает гибкость, повышает стресс. Решение: решать в офисе сложные синхронные задачи, проводить плановые парные ревью, живые разборы и сессии наставничества, когда присутствие = рост;
— Конструируйте гибрид: автономия в обмен на прозрачные требования к результатам и времени реакции в каналах связи;
— Если работодатель делегирует результат вместо задач, важна ясность ожиданий и доступность ресурсов. Тогда будет расти ответственность и скорость. Если этого нет, появляется микроменеджмент и выгорание;
— Для повышения ясности опишите дерево ценности: бизнес-метрика → результат работы команды → задачи и критерии их хорошего выполнения;
— Нормируйте нагрузку и убирайте скрытую работу, на 1:1 спрашивайте о нагрузке, достаточности ресурсов, рисках и как сотрудник себя чувствует;
— Обеспечивайте доступ к поддержке ментального здоровья, снижайте стигматизацию через явные политики и обучение лидеров;
— Учитывайте рыночные ожидания по гибкости и льготам, чтобы не терять их просто потому, что конкуренты предлагают ×2.

#management

Читать полностью…

UX Notes

Представьте себе: пользователь открывает страницу, сталкивается с проблемой и через секунду закрывает ее. Почему? Мы никогда не узнаем, если не спросим вовремя. Конечно, можно посмотреть аналитику, что именно делал человек на странице, куда кликал. Однако никто не расскажет лучше о проблемах продукта, чем сам пользователь.

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

А как работать с фидбеком в моменте расскажет новый гайд от UX Feedback. Это практическое руководство о том, как собирать и использовать обратную связь пользователей прямо в момент взаимодействия с продуктом.

Что внутри

• Что такое фидбек в моменте и почему он эффективнее классических опросов

• Как внедрить систему Voice of the Customer (VoC): сбор, анализ и обработка обратной связи

• Как создавать опросы и задавать правильные вопросы в нужное время практические кейсы крупных компаний

Реклама ООО «ФИДБЕК». ИНН 5030094661, erid 2Vtzqv3nyMh

Читать полностью…

UX Notes

Елена Плинер написала, как подключаться к задачам с высокой степенью неопределённости, работая попроектно.

— С неполными вводными на старте минимально нужно 40 часов, чтобы заложить основу будущего проекта;
— Даже работая по схеме Time and materials клиент хочет знать примерный срок, бюджет и что он получит;
— Сначала надо собрать и систематизировать вводные (от 5 часов): презентации и текстовые описания, внутренние документы, скриншоты, фото с доски, наброски от руки и так далее;
— Иногда вводные приходят в созвонах, переписках и голосовых, что требует дополнительной обработки и структурирования;
— Может появиться список недостающей информации (метрики, списки конкурентов), а также нераскрытых или двусмысленных описаний, которые требуют конкретизации;
— В итоге получится структурированный список вводных, ссылок на документы, описание проекта (цель, задачи, целевая аудитория, контекст, заявленные проблемы), глоссарий;
— Удобно собрать всё в одном месте, например на FigJam-доске;
— Туда же можно добавить саммари по созвонам, кто за что отвечает в команде заказчика, план проекта, который потом дополнится ссылками на артефакты и их статусами, отчёт о потраченном на проект времени;
— Анализ занимает от 20 часов и зависит от количества и полноты вводных, числа ролей и ключевых сущностей, сложности бизнес-логики, а также желаемого набора артефактов (не все они нужны заказчикам);
— Сильно влияет степень вовлечённости заказчика — как быстро он отвечает на вопросы;
— Артефакты: описание функциональности (возможности и зависимости), схемы бизнес-процессов (последовательность операций, перемещение и обработка данных, граница между онлайном и офлайном), описание пользовательских ролей (чем занимаются, как принимают решения и взаимодействуют друг с другом), сущностей (ключевые объекты, их свойства, связи с другими объектами), сценарии (user stories), список внешних процессов, матрица «Роль × действие × сущность» и базовые правила доступа (CRUDL);
— В процессе анализа фиксируются ключевые требования к интерфейсу, предварительные предложения и решения по дизайну, появляются вопросы;
— Ответы на некоторые вопросы могут требовать времени. Чтобы не тормозить процесс, иногда можно договориться с командой о временных гипотетических ответах;
— Проектирование занимает от 15 часов (зависит от количества сценариев и ролей) и опционально. Артефакты: информационная архитектура (карта экранов), юзерфлоу, опционально мокапы и вайрфреймы.

#process #analysis

Читать полностью…

UX Notes

🔥 Дизайнеры, пора перепридумать мобильные ОС. Интересно?

8–9 и 15–16 ноября — онлайн-хакатон «Зефирити».
Эксперимент о том, какой может быть мобильная операционная система будущего.

Последние 10 лет iOS и Android занимаются фейслифтингом.
Иконки скруглили, шрифты обновили — но суть не поменялась.
Мы всё так же живём внутри интерфейсов,
которые крадут внимание и навязывают свой ритм.

Зефирити — это попытка выйти из этого цикла. Создать ОС, которая понимает человека,
а не управляет им.

👁 Кого зовём
UX- и продукт-дизайнеров, исследователей, AI-инженеров —
всех, кто готов спроектировать не интерфейс, а новую цифровую экосистему.

🧠 Что будет
4 дня онлайн. Менторы. Команды.
🚀 На выходе — прототип или сценарий ОС,
которая возвращает фокус, свободу и уважение к вниманию.

📅 8–9 и 15–16 ноября
🕐 Регистрация до 1 ноября: t.me/zephyrhackbot
🌐 os.zephyrlab.ru

Если тебе тесно в старых UX-паттернах —
самое время выйти из-под их диктатуры.
Спроектируй то, что будет после.

Реклама Рождественский Виталий Андреевич. ИНН: 673111448490, erid: 2VtzqxCAyoL

Читать полностью…

UX Notes

Александр Горчаков написал об отложенном дизайн-ревью.

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

#review

Читать полностью…
Subscribe to a channel