25223
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Илья Кретов написал об интерфейсном тексте и типографике. Некоторые советы:
— Сокращайте использование кавычек. Например, названия разделов можно писать с заглавной буквы или выделять полужирным начертанием: «Ищите треки в разделе Коллекция»;
— Разделяйте узким пробелом разряды числа, сумму и знак рубля, числа и среднее тире в диапазоне;
— Чтобы написать −25%, используйте знак минуса (а не дефис) и не отделяйте его от числа пробелом;
— Написанный только заглавными буквами текст слишком эмоционален, кричит. Лучше использовать его максимум в кнопках или бейджах;
— Связывайте текст кнопки с заголовком: «Подключить услугу? [Подключить]». Если любите Conversational Design, когда вместо «Подключить» пишут «Да, хочу!», убедитесь, чтобы кнопка была рядом с заголовком, иначе смысл может потеряться;
— Пишите эмоционально нейтрально: «Вы не можете продолжить без регистрации» → «Для продолжения необходимо авторизоваться»;
— Учитывайте адаптивность. Самая важная информация должна вмещаться на самые маленькие экраны;
— Текст на экране должен быть понятен без контекста. Лучше строить его на именительном падеже: «Какого настроения соберём плейлист? [Весёлого] [Грустного]» → «Под какое настроение соберём плейлист? [Весёлое] [Грустное]».
Канал Ильи. Копия статьи на VC. #writing #typography
Дмитрий Якушин написал о дизайн-токенах.
— Набор дизайн-токенов позволяет сделать визуально согласованный и при этом гибкий дизайн (легко поменять один оттенок на другой);
— Дизайн-токен — псевдоним определённого значения той или иной переменной: цвета, шрифта, размера элемента, тени, отступа, скругления;
— Цвет #677178 можно назвать color-grey-600 и использовать в макетах так, а можно создать токены color-text-secondary и color-component-badge-bg-neutral, которые будут ссылаться на color-grey-600;
— В тёмной теме color-text-secondary может ссылаться на другой цвет, что упрощает создание макетов для других тем;
— Говорящие названия упрощают их использование, особенно новыми участниками команды;
— Есть черновая версия стандарта дизайн-токенов от W3C;
— В составном токене (миксине) может быть больше одной переменной. Например, в токене типографики: название шрифта, кегль, высота строки, межбуквенный интервал;
— color-green-600 — глобальная переменная (примитив, палитра, референсный токен) с абстрактным названием без контекста. Число обычно отражает количество света в цвете;
— color-text-success — дизайн-токен, который ссылается на переменную color-green-600 и имеет контекст использования: для текстовых сообщений об успехе;
— Есть компонентные токены, которые относятся к конкретным компонентам, например, color-component-badge-bg-info для фона информационного бейджика;
— Распространены стили названия: color_text_primary для веба, сolorToken.textPrimary для мобильных платформ;
— Полная структура названия: префикс, группа (color), тип (text, component), элемент (badge), модификатор (background), вариант (info), состояние (hover);
— Некоторых частей может не быть: если токен не относится к компоненту, если к проекту не подключено нескольких библиотек с токенами (прификс их идентифицирует);
— В именах токенов размеров лучше не использовать цифры, чтобы не было путаницы с фактическими значениями: xx-small, x-small, small, medium, large, x-large, xx-large;
— Категории: colors, font family, font size, line height, border color, grid, border radius, spacing, box shadow, duration/transition, shadows, z-index, size.
Канал Дмитрия. #figma #design_system
Аврора Харли написала о принципе общей области.
— Это один из гештальт-принципов, согласно которому элементы внутри границы воспринимаются как группа и имеют общие характеристики и функции;
— Границу формируют рамкой или фоном;
— Помогает быстро понять структуру интерфейса, какие элементы связаны между собой;
— Контрастным фоном на сайтах часто выделяют закреплённое сверху меню и большой футер со ссылками;
— Общую область часто используют в аккордеонах, чтобы сгруппировать содержимое раскрытой секции;
— Это более сильный способ группировки, чем близость или сходство. Подходит, когда надо сгруппировать разные типы элементов и нельзя регулировать отступы. Или когда уже задействованы другие способы, например, в таблице близостью группируются столбцы;
— Чрезмерное использование фонов и рамок создаёт визуальный шум. Иногда полезно убрать лишние рамки и подложки;
— Блоки с контрастным фоном во всю ширину окна могут вызывать ложное ощущение футера на странице, из-за чего пользователи могут закончить прокручивать страницу;
— Прежде, чем добавить рамки и фон, подумайте, необходимы ли они для понимания группировки элементов?
In English. #layout
Как эффективно управлять проектами, быстро синхронизироваться с командой и проводить продуктивные мозговые штурмы?
26 марта в 14:00 МСК приглашаем на вебинар «Знакомство с сервисом Доски в теории и на практике».
Разработчик сервиса интерактивных онлайн-досок Иван Богатов расскажет:
• Для каких задач подходит сервис
• Какие функции есть в сервисе
• Какие возможности для командной работы предоставляет сервис Доски
• Что дает интеграция сервиса Доски с сервисом Встречи
Модератором выступит руководитель группы продуктового маркетинга МТС Линк Екатерина Пичелатова.
Вебинар подойдет для любых команд: IT, маркетинг, дизайн, обучение, исследования, проектный менеджмент, а также всех, кто знаком с Agile и другими методологиями планирования.
Участие бесплатное по предварительной регистрации
ООО “ВЕБИНАР ТЕХНОЛОГИИ”.ИНН 7707340808. erid:2SDnjenxR5s
Исследователи из ВК рассказали о немодерируемых исследованиях.
— Не переносите вопросы исследования в анкету. Вместо вопроса «Удобно ли приложение?» разберитесь, что значит удобство (например, «Мне легко найти нужную функцию»), и спросите об этом;
— Не спрашивайте у респондентов, что лучше. У них нет системы оценки;
— Чем меньше возможностей неправильно понять вопрос, тем лучше. Избегайте специфичных слов, терминов;
— Смотрите, сколько времени респонденты тратят на отдельные вопросы (задания), где бросают тест. Так можно выявить непонятные вопросы или слишком сложные задания, которые можно упростить или разделить на несколько;
— Пытайтесь понять, почему кто-то из респондентов повёл себя странно. Например, в задании надо добавить трек в избранное, но респонденты ставят его на паузу. Им было важно остановить трек, чтобы не отвлекаться. Из таких странностей можно извлечь инсайты (в данном случае — по расположению контролов);
— Ограничивайте длину опроса и количество открытых вопросов. Чем дольше длится опрос, тем чаще выбирают первый попавшийся ответ и менее внимательно читают вопросы.
#research #unmoderated
Вика Шаханина написала о проектировании настройки повторяющегося события в календаре.
— Чтобы не изобретать велосипед, можно изучить существующие решения. Настройка повторяющихся событий есть в нативных календарях в iOS и Android;
— Прежде, чем слепо копировать аналог (если решения разные, надо ещё разобраться, какое достойно копирования), полезно протестировать его на респондентах;
— Тестировать iOS и Android-календарь стоит как на пользователях соответствующей системы (календарь им привычен), так и на пользователях альтернативной;
— Трудности с созданием события, повторяющегося каждые 3 месяца, возникли в Андроиде;
— Чтобы задать характер повтора, надо было нажать на поле «Не повторяется» с двумя стрелками по кругу. Не все догадались на него нажать для настройки повторения (проблема индикатора состояния и команды);
— В самой настройке повтора был заголовок «Повторяется раз в», поле для ввода цифры и селектор с несклоняемыми «день, неделя, месяц, год». Последнее затруднило понимание. Один респондент поставил повтор каждые 4 года, думая, что повтор будет 4 раза в год;
— В итоге выбрали решение из iOS с добавлением склоняемой подсказкой о текущей настройке: «Каждые 2 недели», «Каждые 3 месяца».
#form #time
Готовитесь к Avito Design Talk #10? Мы точно да.
27 марта в 18:00 на ютуб-канале AvitoTech вас будут ждать спикеры из Авито.
Ребята расскажут:
• как в Авито измеряют зрелость UX и создают инструменты для продуктовых команд;
• алгоритм сбора знаний о пользователях для формирования продуктовой стратегии на 3 года;
• как подружиться с пользователями, получать достоверные данные и устанавливать доверительные отношения.
🔔 Регистрируйтесь по ссылке, и мы заранее пришлём напоминалку.
Владимир Гайдадей написал об управлении интерфейсом одним пальцем.
— Существующие решения: режим одной руки (активируется свайпом вниз в нижней части экрана), когда верхняя часть интерфейса смещается в центр экрана. Так можно дотянуться до кнопки «Назад» в левом верхнем углу;
— Режим одной руки на экранной клавиатуре уменьшает её, позволяя дотянуться до всех букв большим пальцем;
— Кажется, они не особо популярны, так как проще перехватить телефон или использовать вторую руку. И они не учитывают, что палец может находиться не у нижней части телефона;
— Samsung, Xiaomi умеют уменьшить весь интерфейс под диагональ в 4 дюйма (можно настроить) и расположить в правом нижнем углу экрана;
— Обычно скрол останавливается, когда нижняя часть прокручиваемого контента достигает нижней стороны экрана или верхняя часть — верхней стороны;
— Можно реализовать длинный скрол — останавливать его, когда нижняя часть контента достигает верхней стороны экрана или верхняя часть — нижней. Так элемент, на который пользователь хочет нажать, можно проскролить в любую часть экрана, где бы ни находился палец;
— С одним пальцем пользователю остаются свайпы и тапы (одинарные, двойные и так далее);
— Свайп вправо можно оставить под возвращение назад, кроме главного экрана, где с ним может быть связано другое действие;
— Свайп влево в этой концепции подойдёт для вызова меню с действиями, которое также обладает длинным скролом.
#mobile
Александр Мачуговский написал, как сообщать пользователю о пустых обязательных полях формы.
— Правило хорошего UX — дать пользователю возможность вернуться в предыдущий режим, к изначальному состоянию;
— Пользователь нажимает на кнопку отправки формы, все пустые поля переходят в состояние Error, в нормальное состояние они возвращаются по очереди по мере заполнения. По сути форма переходит в режим отладки;
— Нажатие на кнопку приводит к изменению состояния полей, но объект взаимодействия — кнопка, с ней связан локус внимания пользователя. Но не она говорит с пользователем, а поля (которые вместо полей ввода стали полями вывода);
— Если автоматически фокусироваться на первом пустом поле, на мобильных это приведёт к отображению клавиатуры и затруднит изучение формы в целом. Можно прокручивать страницу к этому полю, но тогда пользователю придётся нажимать на поле, чтобы его заполнить;
— Стоит разделять ошибки данных (не хватает @ в адресе электронной почты) и ошибки процесса (пришёл ответ сервера о несуществующем адресе);
— Пустое поле — не ошибка данных, а приглашение к взаимодействию;
— Принцип «один экран — одно действие» сокращает количество вариантов для выбора и повышает его скорость;
— Если на экране одновременно одно поле, поднимающаяся при фокусе клавиатура не мешает. Если оставить его пустым, нажатие на «Продолжить» вернёт фокус в поле и отобразит клавиатуру, приглашая к взаимодействию без сообщения об ошибке;
— Если на экране полей много, можно реализовать их последовательное заполнение, переходя между полями кнопкой Next на экранной клавиатуре и прокручивая страницу так, чтобы заполняемое поле было ровно над клавиатурой;
— При попытке отправить форму можно вернуть пользователя к первому неправильно заполненному полю (с сообщением об ошибке), не помечая все остальные.
#error #form
Юля Кондратьева поделилась исследованиями тёмных паттернов из научных статей (компании таким делятся редко).
— 95% исследованных приложений и 97% популярных сайтов содержали тёмные паттерны. Правда, к ним относят и довольно вегетарианские приёмы вроде проставленной по умолчанию галочки;
— Если рядом расположить одинаковые кнопки «Подписаться» и «Отказаться», конверсия будет 16,7%. Если «Подписаться» сделать акцентной — 18,1%. Если под «Подписаться» написать «Рекомендовано» — 20,1%. Если «Отказаться» заменить на ссылку «Другие опции» — 23,6%;
— Если информацию о стоимости после истечения бесплатного месяца написать мелким серым цветом в сноске, конверсия становится 30,1% (без этого — 14,8%). Если добавить социальные доказательства — 22,1%. Если использовать манипулятивную формулировку на кнопке отказа — 19,6%. Если ограничивать время и создавать ажиотаж — 14,3%;
— Тёмные паттерны сильнее влияли на респондентов с худшим образованием;
— Удлинение флоу отказа повысило конверсию с 11,7% до 25,8% (+2 шага) и 41,9% (+6 шагов, похожий был в Яндекс Плюсе). При этом оценка готовности повторить опыт снизилась всего с 4,46 баллов до 4,11 и 3,97 из 5;
— Пользователи посчитали интернет-магазин с целым набором тёмных паттернов более надоедливым по сравнению с магазином без них: 3,44 балла против 2,34 из 5. А также хуже соблюдающим свои обещания (3,26 против 3,55, −5,8%) и менее вызывающим доверия (3,07 против 3,42, −7,5%);
— В одном исследовании дизайнеры опознали меньше половины тёмных паттернов. Не разбираясь, можно неосознанно использовать их в своей работе;
— Многие научные работы посвящены автоматическому отслеживанию тёмных паттернов. Возможно, когда-нибудь браузеры станут предупреждать о них при посещении сайтов или поисковые системы учитывать их наличие при ранжировании сайтов.
Канал Юли. #dark_patterns #conversion
Как демократизация исследований поможет снизить time to market продуктов на 20%?
Демократизация исследований — это процесс, когда исследователь передает часть своих функций другим членам команды. Это позволяет предотвратить выгорание исследователя, освободить ресурсы опытных спецов для более сложных проектов, а еще — снизить time to market продуктов на 20%.
Чтобы добиться этих результатов, надо правильно настроить процесс демократизации исследований в продуктовой команде. Исследователи в вертикалях Товары и Недвижимость в Авито Никита и Катя подготовили гайд, в котором подробно рассказали, как же это сделать.
Реклама.ООО "КЕХ ЕКОММЕРЦ" ИНН 7710668349 erid: 2SDnjdiXgSU
Интересный факт: подписавшись на Любовь, дизайн и метрики, ты вступаешь в комьюнити людей, которые с любовью развивают продукт для пользователя.
Дизайнеры и UX-исследователи Авито делятся заметками о создании новых продуктов, борьбой с внутренним самозванцем, источниками вдохновения, а ещё любят обсудить всё это в комментариях.
Присоединяйтесь к сообществу, чтобы получать и делиться полезным и вдохновляющим контентом!
Представляем вам новую программу обучения UX-исследователей, которую запускает ИТМО совместно с экспертами-практиками из ведущих российских компаний.
-> дает системные навыки исследований и систематизацию лучших практик
-> разработана ведущими исследователями отрасли, которые вносят вклад в исследовательское сообщество в России.
-> с практикой на реальных продуктах в ведущих компаниях, кейсы можно добавить в свое портфолио
Курс стартует 15 апреля, получите системные знания, развивайте свою карьеру, вступайте в сообщество профессионалов!
Ссылка на программу: https://itmofordigital.tilda.ws/ux
Реклама. Erid: 2VtzqutmM6b ИНН: 519049708009
Алексей Тюрин написал, как обезопасить ввод пинкода на телевизоре, когда экран видят другие люди.
— Пинкод закрывает детям и сожителям доступ к настройкам телевизора, подпискам и покупкам, платёжным данным. Особенно актуально, если телевизор находится в публичном месте;
— Также им можно ограничить детей от взрослого контента;
— Люди могут использовать тот же пинкод, например, в банковском приложении, что повышает ставки, если кто-то подсмотрит его во время ввода на телевизоре;
— Раньше не было проблемы ввести код, не выбирая цифры на экране, так как цифры были на пультах;
— Проблему легко решили на приставках (PlayStation, Steam): на контроллере много кнопок, которые можно нажимать вместо цифр;
— В Android TV, Sony Bravia, Samsung Tizen есть безопасный ввод: стрелками ↑ и ↓ на пульте пользователь выбирает на экране группу цифр (1-2-3, 4-5-6, 7-8-9), а кнопками ←, OK, → незаметно для стороннего наблюдателя выбирает левую, правую или центральную цифру в группе;
— Коды иногда используют для отключения родительского контроля. Если ребёнок дошкольного возраста, вместо пинкода для разблокировки взрослого контента можно просто просить ввести решение несложного математического выражения (3×8=?) или цифры, написанные на экране словами (Zero, One, Zero, Two);
— Стоит ожидать появления разблокировки отпечатком пальца или лицом через встроенные в пульт сенсоры.
#tv #log_in
Я написал, как быстро сделать в Фигме прототип формы, поля которой можно заполнять в любом порядке.
— С этим помогут локальные переменные (Variables) и условия (экшен Conditional);
— Если их не использовать и просто переводить пользователя с одного экрана на другой, для формы из 4 полей потребуется 16 экранов (включая полностью заполненную форму и полностью незаполненную);
— Поля, с которыми будет взаимодействовать пользователь, надо заменить на локальные компоненты с вариантами «Не заполнено» и «Заполнено»;
— Когда пользователь заполняет поле, это надо сохранять в локальную переменную;
— При отображении формы надо проверять переменные и переключать компоненты заполненных полей на нужный вариант: триггер After delay, повешенный на компоненты конкретных полей, плюс экшен Conditional.
Пользуюсь положением редактора UX Notes и прошу: если у вас есть профиль на Хабре, пожалуйста, поставьте там оценку.
#figma #prototype #form
Как работают дизайн–команды «Яндекса», «Авито», VK и других IT-гигантов? И что нужно уметь, чтобы стать руководителем такой команды?
Расскажем на курсе Head of Product Design от онлайн-школы дизайна и технологий Bang Bang Education. Это обучение — новая ступень карьерной лестницы для UX/UI–дизайнеров, которые хотят вырасти в руководителя дизайн-команды.
Под вашим руководством будет создан продукт, который закроет потребность бизнеса и принесет ему реальную пользу. Для этого потребуется оценить итерационное развитие продукта — от стратегии до фичи, разработать продуктовую стратегию, выстроить процесс работы дизайн-команды и наладить их взаимодействие с другими подразделениями — разработчиками, аналитиками, продактами.
Всего за 2,5 месяца вы:
Получите управленческий опыт и проект в портфолио. Вы сможете работать над продуктовой задачей из собственной практики или решить реальный кейс компании Lamoda и получить обратную связь от стейкхолдеров компании.
В деталях узнаете, как строятся процессы в крупных компаниях. Директор по развитию коммерческих продуктов Lamoda будет читать лекции, проверять домашние задания и отвечать на вопросы. В течение курса вас ждут выступления приглашенных дизайн-директоров Альфа-банка, «ДодоПиццы», Wildberries и X5 Digital, где можно будет задать любые вопросы.
Рекомендация от автора курса после успешной защите проекта. Можно показать текущему работодателю при обсуждении карьерных перспектив или усилить резюме при поиске новой работы.
Старт курса — 19 апреля. По промокоду LEAD скидка 30%.
В RetailRocket написали об а/б-тестировании.
— Хороший источник — книга «Доверительное а/б-тестирование»;
— Большая проблема — отсутствие а/а-тестов, когда оба сегмента пользователей видят один и тот же контент;
— Значимые различия между сегментами в таком тесте показывают, что есть проблемы с делением трафика, недостаточностью данных (мало пользователей) или аномалиями. В этом случае а/б-тест запускать бессмысленно;
— Пример аномалии с метрикой «средняя выручка на пользователя» — покупатели с суммой заказа, в разы превышающей остальные заказы. Можно использовать метрики, менее чувствительные к аномалиям;
— Важная процедура — оценка мощности метрики, вероятности, что она значимо изменится в ответ на тестируемое изменение (достаточно 80%);
— Например, метрика «средняя выручка на пользователя» показывает пользу от блока с рекомендациями в денежном выражении, но её мощность ниже, чем у «среднее количество просмотренных карточек товаров» или «конверсия в пользователя с корзиной»;
— При краткосрочном тестировании пользу в деньгах можно не увидеть, если клиент добавит товар в корзину, а вернётся к покупке уже после окончания теста;
— Мощность также зависит от окружения. Чтобы проверить влияние блока с рекомендациями, лучше убрать с этой страницы другие инструменты, решающие ту же задачу. Также если блок находится на странице слишком низко, его влияние тоже будет ниже;
— Важно понимать, на что влияет тестируемая функциональность. Блок рекомендаций может увеличить количество покупателей, но ARPPU при этом может даже уменьшиться, если часть из них купит что-то по мелочи;
— Влияние на разные группы пользователей может отличаться. Блок рекомендаций для новых пользователей может влиять на конверсию, а для старых — на средний чек;
— Чаще всего не получится обойтись одним тестом;
— Оценить полезность инструмента можно и без а/б-теста. Можно проанализировать количество товаров с атрибутом «найдено с помощью системы рекомендаций».
#user_testing #unmoderated
Кинерет Ифра написала о пустых состояниях.
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
Да как вообще UX дизайнеры выходят на 100-200к в крупный продукт?!
Кто реально нужен их дизайн-лидам в команду?
Как вообще такому можно обучиться, если есть опыт только в небольшой компании, агентстве или ты вообще только закончил курсы?
Артур Кузьмин, Lead Product Designer. Работал в JetBrains, Avito. Делал проекты для ВТБ, Газпром, Росбанк, Хоум Банк, БКС, раскрывает методологию найма продуктовых и UX дизайнеров в топ компании
Опираясь на опыт 300+ выпускников школы продуктового дизайна Formfactor и обратную связь от HR и дизайн-лидов ведущих компаний (Тинькофф, Самокат, ВК, МТС), делится системой из 4 самых важных шагов, которые действительно помогают прокачаться от подготовки резюме до получения оффера
Сейчас стратегия доступна для всех, но через 48 часов пост удалят!
Переходите в бот и забирайте стратегию, после полного прохождения вас ждет сюрприз
Реклама. ИНН 701738976302, erid 2VtzqufzMEV
Павел Шерер написал о страхе неопределённости в начале проекта.
— В начале проекта, когда нет ни одной чёткой детали и всё погружено во тьму неопределённости, каждый новый вопрос ужасает;
— Если проект интересный, то врубается азарт исследователя, и тогда для всех вопросов находятся ответы;
— Если проект как-то не заходит (сама его плоскость не увлекает, есть сомнения в успехе, клиент какой-то не такой), факторы неопределённости потихоньку превращаются в поводы и вовсе не браться за работу;
— Иногда это верное решение: работать без мотивации — тухлое дело;
— Но иногда то, что проект «не заходит» подкидывает наше подсознание, так как это самое простое решение в условиях неопределённости. Даже банальная усталость может запустить процесс демотивации;
— Кроманьонцы и неандертальцы больше, чем друг друга, боялись темноты, так как тьма — это неизвестность;
— Рассеиваем неопределённость мы обычно точечно: прокладываем узкие, но ярко освещённые тропинки к наиболее интересным местам, вместо того, чтобы хоть и тускло, но осветить большое пространство возле своей пещеры;
— Это иллюзия безопасности. Действуйте поэтапно. Сначала определитесь с фундаментом продукта, очертите его границы, механики и риски. И уже потом начинайте копать вглубь, выявляя мелкие детали и особенности.
#process
Артур Валиуллин написал о дизайнерских синках.
— Ежедневные синки помогают синхронизировать команду, следить за качеством, растить дизайнеров и чаще проводить ревью;
— Обратная связь, взгляд со стороны нужны постоянно, а не только тогда, когда их попросили;
— Синки оперативнее канбан-доски показывают сдвигающиеся сроки и ситуации, когда продакт решил изменить ранее согласованный сценарий;
— Все знают, над чем работают коллеги;
— Дизайнеры учатся друг у друга;
— Виден текущий уровень дизайнеров: кто готов переходить на новый грейд, обучать новичков, кому не хватает компетенций;
— Достаточно одного часа, если в команде 7–10 человек;
— Если недельные спринты с началом в понедельник, проверять статусы задач можно во вторник и четверг;
— Это скорее групповой менторинг, когда команда помогает находить решения;
— Не все активно вовлекаются. Точечно спрашивайте мнения тех, кто не участвует;
— Вопрос «Если ли вопросы или темы для обсуждения?» в конце формирует доверие в команде. Плюс иногда вопросы появляются;
— Придумывайте ритуалы, например, в понедельник спросить «Как ваши выходные?».
#management
Елена Сеченых написала о тёмной теме в письмах.
— Нет единых правил инвертирования в разных почтовых сервисах и даже разных приложениях одного и того же сервиса;
— 4 варианта поведения: ничего не делать (большинство десктопных клиентов, веб-версии Gmail и Яндекс Почты); инвертировать светлые письма и не трогать тёмные; инвертировать и туда и обратно (Gmail на iOS); позволять управлять отображением с помощью медиазапросов (Apple Mail на macOS и iOS, Mail Ru на мобильных и в веб-интерфейсе);
— Подбирайте палитру, чтобы автоматически выбираемые почтовиками инверсные версии цветов оставались контрастными. Лучше не использовать жёлтый — по факту остаётся светлым и становится чуть более грязным;
— Изображения автоматически не инвертируются. Можно использовать картинки с прозрачным фоном. В этом случае может понадобиться светлая обводка, которой не будет видно в светлой теме, но которая выделит графику в тёмной (например, чёрный логотип, если брендбук не запрещает);
— Не забудьте про фоновые изображения. Они не инвертируются и находящийся поверх них текст может потерять контраст;
— Если почтовик умеет обрабатывать медиазапросы, можно просто подготовить отдельное изображение;
— Обязательно проверьте отображение письма в андроид-приложениях Яндекса, Mail Ru, Gmail, а также в Gmail на iOS;
— Есть сервисы для тестирования писем: Email on Acid, Litmus, но они не работают с Яндексом. Фреймворк для вёрстки Ampier показывает и классическую инверсию, и вариацию Gmail на iOS.
#email #dark_theme
14 марта, 18:30
Selectel UX & Research MeetUp 3: Общение с пользователями, заказчиками и коллегами
Ребята из @selectelcareers приглашают на свой митап, на котором расскажут, как проектировщики в Selectel расширяют круг возможных решений задач. Исследователи из Контура обсудят проведение брифинга и возникающие сложности, а UX-исследователи платформы «МойОфис» покажут, как изучают опыт пользователей с помощью контекстного интервью.
Основные темы:
◽️ Диапазон решений проектировщика
◽️ Брифинг как исследование
◽️ Наблюдение + интервью = контекстное интервью
Задайте вопрос в форме регистрации — на самые интересные ответим во время трансляции, а за лучший подарим Тирекса 🦖
Участие бесплатное, регистрируйтесь по ссылке:
https://slc.tl/rpjyx
Реклама ООО «Селектел» 2VtzqwgeyX1
Катя Тюхай рассказала о конфликтах в продуктовой команде.
— Самый распространённый — борьба за ресурс, когда дизайнеров или исследователей мало, а продуктовых команд и задач много. Можно перевести их в формат студии, без привязки к продуктовым командам, или чётко разделить, сколько времени можно тратить на задачи конкретной команды;
— Если дизайнеров достаточно, надо легализовать теневые работы вроде дизайн-ревью, которые часто не учитывают при планировании;
— Руководитель не должен выносить конфликты на уровень команды;
— Конфликты могут возникать из-за культурной разницы. Минимизировать их помогает неформальное общение с коллегами (например, в формате Random Coffee), один день поработать рядом с человеком на его рабочем месте, сессии совместной работы;
— Когда сотрудник хочет, но ещё не готов стать лидом, предложите взять какой-нибудь спецпроект, стать лидером компетенции, составить чеклисты или методички, менторить стажёра;
— У команд противоположные KPI (продавцы хотят быстрее совершать сделки, риск-менеджеры — тщательнее их проверять). Надо встретиться, обменяться цифрами и целями на полгода-год и найти точки соприкосновения. Они есть всегда;
— Нет ресурсов на достижение KPI. Ищите команды со схожими целями и KPI. Например, если занимаетесь дизайн-системой, вовлекайте тех, кто получит от её внедрения максимальный буст;
— Непрозрачные процессы. Создавайте чеклисты, шаблоны задач, автоматизируйте прохождение задачи в Jira, внедряйте синки, например, большие горизонтальные демо раз в одну-две недели.
#management
Ксения Толокнова и Марина Сапожникова написали о поиске в мобильных приложениях.
— Точкой входа в поиск может быть поле поиска (в верхней, нижней части экрана и ближе к середине; поиск в этом случае — ключевая функция или основной способ взаимодействия с контентом), иконка лупы в нижней навигации (важность функции меньше), иконка лупы в навбаре (важность ещё меньше). Точка входа может быть спрятана, например, в раскрывающемся меню;
— Поиск может быть глобальным (по всему приложению) и локальным (по экрану или разделу), открываться на новом или на том же экране (для локального поиска и фильтрации контента);
— Поисковая выдача может быть простой (однородной), с категориями и фильтрами, с секциями (если хочется разделить контент и не вводить навигацию в виде категорий и фильтров);
— Мультипоиск позволяет обрабатывать несколько запросов одновременно. Например, искать недвижимость в нескольких районах (Zillow) или по фото и тексту одновременно (Google);
— Продумайте, как пользователь будет очищать ввод в поле (скорее всего крестиком в поле) и выходить из режима поиска («Отменить» в iOS, стрелка «Назад» в MD3);
— Результаты лучше выводить после ввода 1–3 символов. Запрос лучше отправлять, когда возникает пауза во вводе;
— Рекомендации до ввода поискового запроса крайне полезны. Кроме повышения удобства (сохранённые, недавние, популярные запросы) они могут стать инструментом дополнительных продаж;
— Не забывайте о подсказках внутри нативной клавиатуры. Их немного, но больше, чем можно разместить в поле поиска.
#search #mobile
Егор Камелев написал о проектировании форм.
— Каждое поле формы должно быть обосновано. Большое количество может отпугнуть пользователя, но стоит учитывать и мотивацию: если очень надо, пользователь заполнит всё;
— Определите, что произойдёт дальше с данными: кто их получит, в каком виде. Возможно, потребуется задать формат письма с ними или спроектировать страницу в админке, которая их отобразит;
— Как система может обогатить то, что пользователь ввёл? Например, получателю может пригодиться дата и время заполнения формы;
— Если обязательных полей меньше, чем необязательных, можно отметить только первые, чтобы не перегружать интерфейс. И наоборот. Если все поля обязательны, можно ничего не отмечать или ограничиться текстом об этом в начале формы;
— Как будет выглядеть письмо или страница с данными в админке, если необязательные поля не были заполнены?
— Как будут валидироваться поля, данные какого типа и объёма можно ввести, какими могут быть ошибки и текст сообщений о них?
— Что увидит пользователь после отправки формы? Что стоит показать в сообщении об успехе? Например, после заполнения формы обратной связи можно указать, когда и на какой имейл будет отправлен ответ. Так пользователь может перепроверить, что не ошибся в адресе;
— Общие принципы работы форм можно определить отдельно и в дальнейшем применять ко всем формам в продукте. Например, из менее очевидных: допустимость автофокуса на первом поле формы, время жизни сессии, автосохранение данных, сообщение при попытке покинуть страницу, защита от роботов и так далее.
Канал Егора. #form
Таня Мисютина поделилась советами, как упорядочить визуализацию.
— Если на дашборде надо не просто показать общую ситуацию и высокоуровневые данные, но и объяснить, почему так сложилось, в визуализации должна быть та сложность, что была в исходных данных. Дашборд не может быть примитивным;
— Внутренняя сложность не прощает внешней небрежности и запутанности, они сразу оборачиваются нечитаемостью и перегруженностью;
— Используйте один формат для визуализации одних и тех же данных, чтобы не сбивать пользователя с толку разными представлениями;
— Разное должно выглядеть по-разному. Скорее всего, так и будет, если выбирать форматы, отражающие суть данных;
— Придерживайтесь единых и логичных правил отображения элементов на экране (заголовков, фильтров, графиков и конролов) для всех состояний визуализации. Учитывайте иерархию показателей и срезов — от большого к малому, от важного к менее важному;
— Продумайте схему переходов между состояниями визуализации, разными дашбордами в системе. Ни один экран не должен быть «вещью в себе»;
— Используйте одинаковые термины для обозначения одинаковых понятий.
#data_visualization #dashboard
Даниэль Виленчук написал о категоризации фидбека.
— Вы начали собирать обратную связь от пользователей и получили таблицу с 3000 отзывами. Как с ними работать?
— Удалите отзывы без текста. Они могут занимать до половины таблицы;
— Практика показывает, что из отзывов короче 10–15 символов почти невозможно извлечь инсайт. Можно отфильтровать таблицу, бегло просмотреть отзывы короче 5 символов и удалить бесполезные. Повторить для 10, 15 и 20 символов. Так очищается не меньше трети документа;
— Отсортируйте отзывы от А до Я. Самые первые, скорее всего, будут мусорными: состоять из цифр и случайных символов;
— Далее по ключевым словам определите родительские категории, например, сценарии («Оплата и промокоды», «Авторизация») или типы пользователей («Покупатели», «Продавцы»);
— По типу возникающих проблем определите дочерние категории: «Оплата и промокоды / Просроченный промокод»;
— В первый раз придётся самостоятельно идти по отзывам, придумывать категории и расставлять их вручную. Так вы познакомитесь с языком ваших пользователей и сформируете набор ключевых слов, по которым отзыв можно отнести к той или иной категории;
— Проставленные категории дадут статистику, какие проблемы вызывают больше обращений пользователей, и позволят работать с фидбеком точечно, передавать конкретным командам;
— Категории и ключевые слова сохраните для категоризации будущих отзывов.
#feedback
Всем привет! СберЗдоровье ищет продуктовых дизайнеров
Мы крупнейшая в России Digital Health компания. Делаем для пользователей сервис телемедицины, запись на приём к врачам и обследования, разрабатываем умные медицинские устройства.
Хотим рассказать про наш дрим-тим
• Директор пользовательского опыта Олег Александров, ранее CDO в MAX. (Топ 10 дизайн-студий России)
В МАХ руководил продуктовой командой дизайна ВкусВилла и Пятёрочки. Лидил разработку дизайна личного кабинет ученика для SkillFactory, и сложный внутренний портал для одного крупного банка.
• Бренд арт-директор – Альберт Аминов. Ранее арт-дир в Самокате и ВК
• Дизайнеры из Яндекс, студии Луч и ВТБ
Плюшки работы с нами
• Сбер Здоровье аккредитованная IT компания
• Полное комбо соц. пакета: ДМС, компенсация спорта, обучения, психологи, льготная ипотека и оплачиваемые выезды на профильные конфы
• Прозрачная система роста для дизайнеров. Карта грейдов, полугодовые оценки 360, рейзы зарплат по достижению целей
Сейчас мы ищем:
😗 UI / UX дизайнера на сайт в продукт записи (https://vacancy.sberhealth.ru/vacancies/3562860)
😎 Продуктового дизайнера на направление умных девайсов и мониторинга. Предстоит делать личный кабинет, мобильное приложение и разделы сайта (https://vacancy.sberhealth.ru/vacancies/3562996)
Хочешь в нашу крутую команду, то заполняй анкету. Мы тебя ждём 👋
https://forms.yandex.ru/cloud/65d5b638068ff0575304f79e/