UX Notes
23.2K subscribers
55 photos
4 videos
1 file
1.05K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Download Telegram
Ольга Дубинина написала, как сделать тосты (снекбары) заметнее.

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

#toast
Станислав Хрусталёв написал об избранном в мобильных приложениях интернет-магазинов.

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

#favorites
Ксения Толокнова написала о навигации в мобильных приложениях.

— Ограничения таббара: все сценарии приложения приходится раскладывать в 3–5 условных папок; бывает непросто придумать короткие и понятные названия разделов;
— Эффект размытия сложно реализовать в Андроиде, поэтому таббар в одном и том же приложении на разных платформах может отличаться. Пример — Revolut;
— Где отображается: 1) только на основных экранах, 2) на основных и внутренних экранах, 3) на внутренних экранах при прокрутке вверх;
— Первый вариант выбирают, например, мессенджеры, чтобы не отвлекать пользователя от открытого чата;
— Во втором случае таббар не отображается только тогда, когда что-то открыто поверх: полноэкранные модальные окна (например, просмотр видео), шторки, экранные клавиатуры;
— Такая навигация запоминает положение пользователя в разделе. Если из выбранной в разделе Fitness+ тренировки перейти в Summary, нажатие на Fitness+ вернёт к тренировке. Повторное нажатие на Fitness+ откроет главный экран раздела;
— Применяется реже и для приложений со сложной структурой разделов;
— Третий тип больше подходит для контентных лент и статей. Фейсбук вообще комбинирует варианты 2 и 3;
— Интересные решения, которые легко реализовать: градиентный фон с прозрачностью, если есть только тёмная тема (Spotify), выделение центральной иконки, по нажатию на которую поднимается шторка с основными действиями в приложении (Binance);
— Sidebar для навигации рекомендуют использовать в мобильных приложениях с 5 и более разделами или с 2 и более уровнями иерархии в навигации. Но в iOS это будет кастомная разработка;
— В приложениях с большой базой информации часто используют навигацию через поиск. Этот вид навигации редко является единственным, но часто бывает ключевым;
— Top bar (Top app bar в Андроиде) важен для навигации, так как позволяет разместить кнопку для возвращения назад или открытия сайдбара и иконки дополнительных действий (в гайдлайнах Material Design рекомендуют до 3);
— В Андроиде заголовок текущего экрана располагают близко к кнопке «Назад». Люди, которые раньше использовали iOS, могут думать, что это название предыдущего экрана.

#navigation #tab_bar
Маргарита Хохлова рассказала об улучшении продукта с помощью текста.

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

#writing
Открыт набор на мини-курс для тех, кто хочет развиваться в цифровом дизайне! Всего за 5 дней вы освоите Figma, научитесь создавать интересные анимированные макеты и поймёте, как тестировать их на пользователях.
Регистрация: https://epic.st/g3JX7V?erid=2Vtzqucsem4

Чем полезен мини-курс:

— Сделаете проект для портфолио — интерфейс сайта и приложения
— Узнаете, почему UX/UI-дизайнеры так нужны IT-компаниям, и поймёте, почему им так много платят
— Познакомитесь с Figma — самой востребованной программой UX-дизайнера
— Получите большой список источников, которые помогут быть в курсе трендов индустрии
— Поймёте, какие навыки нужны UX/UI-дизайнеру, чтобы быстрее расти в доходах
— Сможете задать вопросы опытному дизайнеру

🎉 Каждый день за прохождение этапа вы будете получать полезный бонус!

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
Игорь Штанг написал об однородности списка.

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

Копии статей в ЖЖ Игоря: первая часть, вторая. #writing #layout
Тезисы из книги Скотта Беркуна «Дизайн всего». Книжка небольшая, на один вечер.

— У всего, что сделал человек, есть дизайн. Если он решил «обойтись без дизайна», то дизайн у вещи будет, но, скорее всего, плохой;
— Чтобы вещь была удобной, её надо такой спроектировать. Для этого нужны ресурсы и воля заказчика, который нанимает дизайнеров;
— Именно они задаются вопросом, как улучшить вещь для конкретных пользователей с конкретными потребностями (задачами);
— Без ответа на этот вопрос другие участники команды, создающей вещь, могут преследовать разные, иногда противоположные цели. А дизайн — это командная работа;
— Ответов может быть множество. Не стоит искать их в размышлениях, надо идти к потенциальным пользователям: говорить с ними, наблюдать, испытывать прототипы;
— Чтобы добиться высокого качества, надо исследовать множество идей, сравнивать их, разработать критерии оценки;
— Сколько дизайнеров нужно, чтобы вкрутить лампочку? А почему именно лампочку? Можно перепроектировать комнату или изменить режим дня, чтобы искусственный свет не требовался;
— Умение сформулировать проблему не менее важно, чем сами дизайнерские навыки;
— Стиль — это сообщение, даже если это отсутствие какого-либо стиля. Иногда определиться с ним надо как можно раньше, так как это решение влияет на все остальные (например, при создании спортивного автомобиля);
— Человек куда менее рационален, чем мы предполагаем. Надо изучать психологию, так как подходящие дизайн-решения могут казаться нелогичными (например, кнопки-плацебо);
— Думать о том, как вещь работает, — значит учитывать всё: для чего она нужна, какую роль сыграет в чьей-нибудь жизни, как повлияет на мир;
— Плюс планового устаревания — это технологический прогресс. Но надо помнить: «Мы не наследуем землю у предков — мы берем её взаймы у детей» (Уэнделл Берри);
— За каждое улучшение кто-то должен заплатить: покупатель, компания или государство. Успех дизайна зависит в том числе от способности дизайнера продать идею заказчику. Подушки безопасности — круто, но +$750 к цене машины;
— Процесс поиска решения — это цикл «Узнавать → Создавать». Исследования в области дизайна очень важны, поэтому и стали отдельной профессией;
— Команда, состоящая из не похожих друг на друга людей, позволит посмотреть на вещь под разными углами ещё до исследования и сделать дизайн инклюзивнее;
— Настоящий дизайн учитывает технические, организационные, финансовые, законодательные и прочие ограничения. Компромисс — одна из центральных концепций в дизайне;
— Хороший дизайн не заставляет пользователя думать (например, предлагает узнать, а не вспомнить), снижает количество ошибок, уменьшает серьёзность последствий, помогает пользователю сохранять состояние потока при выполнении задачи;
— Чем больше инструкций, тем хуже дизайн. Нет ничего плохого в добавлении функций, если они не усложняют использование вещи. Но иногда нужна продуманная сложность (в кабине самолёта);
— Посмотрите на создаваемую вещь в контексте;
— Подумайте, кому сейчас или в будущем может навредить ваш дизайн и как можно этого избежать? Готовы ли вы выйти на сцену перед своими клиентами и рассказать, как ваш продукт влияет на их поведение и выбор?

#book
Бет Джей написала о снижении когнитивной нагрузки при просмотре списка товаров в интернет-магазине.

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

In English. #cognitive_load #list
Составлять опросы и пользоваться метриками кажется несложным, но это только на первый взгляд. На практике компании могут допускать различные ошибки, что приводит к неправильной интерпретации результатов. О некоторых из них нам рассказали ребята из UX Feedback.

— Не задавайте вопросы о будущем. Людям сложно представить своё поведение в будущем и оценить, насколько будущая фича окажется полезной. Если прислушиваться к ответам на такие вопросы, можно потратить ресурсы на то, что никому не нужно;
— В одной e-com компании хотели внедрить фичу, с которой в принципе мало кто имел дело, и спросили пользователей: «Как повлияет наличие фичи N на ваше решение о покупке?». В итоге 30% выбрали «Затрудняюсь ответить», и это ― закономерный результат;
— Не модифицируйте метрики «под себя», меняя вопросы и шкалы (часто от этого страдает NPS). Создатели метрик долго их тестировали и оставили то, что проверено и работает;
— В одной e-com компании в NPS использовали шкалу от 1 до 10 (вместо от 0 до 10) и вопрос от метрики CSAT (Насколько вы удовлетворены…?), а результаты считали по формуле NPS. Такое нарушение методологии приводит к в корне неверным результатам;
— Триггерный NPS (tNPS) появляется после определённого взаимодействия с продуктом. Некоторые компании собирают его на каждом этапе взаимодействия;
— Но главная особенность NPS в том, что метрика отражает общее отношение к компании. Её нельзя использовать на отдельных этапах, так как никто из клиентов не скажет своим друзьям «У них классный поиск на сайте, поэтому я рекомендую вам воспользоваться услугами этой компании»;
— Вместо этого в точки касания клиента с продуктом прекрасно встраиваются метрики CES или CSAT.

В своем канале ребята делятся интересными кейсами, исследованиями и другими полезными метариалами, так что подписывайтесь: https://t.me/feedbech

Реклама ООО "ФИДБЕК" ИНН 5030094661, erid: 2Vtzqw3mGuD
Антон Жиянов написал об автокомплите.

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

#form
Михаил Озорнин поделился внутренним гайдом, как писать дату и время в интерфейсе (на русском и английском). Например:

— Год пишите только тогда, когда он отличается от текущего. Месяцы лучше писать словами, а не цифрами. Если сокращаете месяца, «июнь» и «июль» лучше писать полностью;
— В бумажных отчетах допустимо указывать год, даже если он совпадает с текущим;
— Если собираетесь написать «1 ноября 2014, 12:25», попробуйте понять, зачем нужно время, если это было так давно;
— С десятичной дробью можно писать только месяцы и годы и только с округлением до половины (например, «3,5 года»). Минуты, часы, дни и недели — нельзя, даже с округлением до половины;
— «Неделя» лучше «7 дней», «месяц» лучше «30 дней», это человечнее. Но есть проблема: «месяц» — это не так однозначно, вариант «30 дней» безопасней. Если вы уверены (например, проверили), что у вас разногласий нет или что оно допустимо, то «месяц» лучше, чем «последние 30 дней»;
— Всегда вместо «суток» пишите «дней». Так тоже человечнее, в жизни не говорят «позвоню через трое суток». Фразу «последние 7 дней» нельзя понять иначе как «последние 7 суток». Никто не поймет её как «последние 7 суток за вычетом последних 7 ночных периодов»;
— Используйте те величины, какими назвали бы этот период в жизни. Вместо 48 часов → 2 дня, 3600 секунд → 1 час, 1440 минут → 1 день. 24 часа, 60 минут — норм. Могут быть исключения, но обычно так.

#time #writing
Получите офер в команду Market Do за 3 дня!

С 29 июня по 1 июля Яндекс проводит Fast Track для графических дизайнеров.
Market Do работает с собственными брендами Яндекса. Мы ищем ответственных, инициативных графических дизайнеров в команды Commo, Junion, Tuvio и Pragma & Nocord.

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

Fast Track проходит в онлайн-формате. Что вас ждёт на мероприятии:

До 28 июня — регистрация и выполнение кейса
29 июня — презентация кейса арт-директору выбранного направления
30 июня — знакомство с креативным директором
1 июля — презентация офера

Чтобы узнать подробности и зарегистрироваться, переходите на сайт мероприятия.
Андрей Одокиенко написал о Whiteboard Challenge для дизайнеров.

— За отведённое время соискателю надо вытащить информацию о проблеме из собеседника, придумать идеи и гипотезы, проработать решение;
— Если выполнение тестового задания может занять 8 часов, то вайтборд — 1 час. Это ускоряет процесс и снимает барьер в виде тестового;
— Дополнительный плюс: можно проверить комфортность взаимодействия с человеком, а также посмотреть, как он мыслит «под напряжением»;
— Минус: не подходит дизайнерам со слабыми навыками коммуникации, аргументации, недостаточным опытом проведения интервью;
— Организаторам надо не только придумать задачу, но и найти ответы на потенциальные вопросы соискателей, собрать артефакты: детали для разбега (некоторым сложно начинать с белого листа), цели, персоны (сегменты), проблемы, метрики успеха, контекст (для JTBD-подхода);
— Идеальный процесс: 5 минут на описание правил и погружение в контекст задачи, 25 мин вопросы и анализ, 25 мин генерация идей, их оценка, проработка решения (Low или High Fidelity), 5 мин рефлексия;
— Андрей провёл 15 челленджей, и почти всем соискателям (90%) опыт понравился.

#hiring
В честь пятницы и в порядке эксперимента — развлекательное видео не о дизайне, а о дизайнере.

Артём Конаков сходил в гости к Илоне Саркисовой, лид-дизайнерке в ВК (на момент записи видео в Яндекс Плюсе), и узнал о ремонте, машине, шмоте, книгах, пути в дизайн и увлечениях.
Александр Кузнецов написал о дизайн-ревью.

— Это проверка дизайнером результата разработки своих макетов и фиксация дефектов;
— В отличие от тестировщика, который проверяет всё досконально, дизайнер смотрит верхнеуровнево: всё ли так, как задумано;
— Помогает дизайнеру быть в курсе, что уже разработано, и не выгорать из-за того, что результат отличается от макетов;
— Команде помогает сохранять высокое качество продукта (консистентность, соответствие дизайн-системе, tone of voice), экономить время разработки (не надо гадать, что дизайнер имел в виду, меньше работы тестировщику), улучшить коммуникацию;
— Если сейчас дизайн-ревью не проводится, дизайнеру придётся проявить инициативу и договориться о внедрении этого этапа;
— Проводить дизайн-ревью можно в параллель с тестированием;
— Чтобы эффективно ревьюить, дизайнер должен научиться пользоваться инструментами разработчика в браузере, Xcode, Android Studio и понятно описывать дефекты.

#review
Виктор Буто написал, как находить респондентов для интервью.

— Этапы: найти канал привлечения респондентов → получить в нём отклики → сконвертировать отклик в договорённость о звонке → довести человека до звонка;
— Среди бесплатных каналов, которые упомянул Виктор: нетворк респондентов (попросить уже найденного человека порекомендовать 2−3 таких же); соцсети и сообщества конкурентов (посмотреть подписчиков, тех, кто лайкает посты и оставляет комментарии);
— Открытые сообщества, где есть целевая аудитория. С помощью телеграм-бота можно узнать, на какие чаты подписан конкретный пользователь. Указать целевого респондента, можно получить идеи чатов для рекрута;
— Среди бесплатных: найм респондентов (чтобы они приводили таких же за вознаграждение), рекрутинговых агентств, HRов и ассистентов (делегирование), использование рекрутинговых сервисов, создание объявлений на фриланс-биржах (если ищете конкретных специалистов, добавьте для них задачу на YouDo по участию в интервью), реклама (у блогеров, ведущая на лендинг таргетированная);
— В США интервью оплачиваются (минимум $50, обычно в виде подарочных карт Amazon), бесплатные выглядят подозрительно;
— В других странах обязательно предложите что-нибудь взамен: поучаствовать в развитии проекта, скидку на свой продукт, доступ к закрытой бете, не обязательно деньги;
— Проверьте пригласительное сообщение на коллегах. Вычитка 2−3 людьми помогает убрать тупые и до 50% остальных ошибок;
— Если пишете в холодную, сообщите, кто вы и как нашли человека. Чем понятнее объясните, что вас связывает, тем меньше будете похожи на спам;
— Напоминайте о себе (пинг), если на ваше сообщение не ответили. Сами отвечайте быстро;
— Договариваясь о времени, можно использовать Calendly, но иногда надёжнее получить согласие на конкретное время в диалоге, чем отправлять человека куда-то идти и самостоятельно бронировать;
— Проведите респондента по квалифицирующим вопросам, даже если сами к нему постучались;
— Чтобы люди доходили до интервью: выбирайте ближайшее время (держите в запасе свободные слоты в ближайшие пару дней); напоминайте (за час, за день, в виде фоллоу-апа после того, как договорились);
— 10−30% людей не дойдёт. Чтобы в последний день исследования не бегать в поисках респондентов, если вам нужно 10 респондентов, запланируйте 13 встреч.

#recruiting
Марина Суслова написала о репозитории клиентских проблем и его реализации в Jira.

— Всё началось с желания создать CJM, чтобы понять, где есть слабые места и куда направить ресурсы. Такая карта в Миро быстро потеряла бы актуальность;
— Репозиторий включает все клиентские проблемы, известные из исследований и других источников: обращений, жалоб, общения с консультантами, обратной связи;
— Когда результаты исследований хранятся отдельно, новое исследование как будто отменяет предыдущее. А так все знания в одном месте;
— Чтобы избежать дублирования, новые проблемы попадают в лист ожидания, из которого их разбирают дежурные;
— У каждой проблемы есть критичность и частота возникновения, которые определяют её вес и помогают приоритизировать задачи;
— Также есть ответственный за решение, который указывает статус, решение, ссылку на задачу или эпик в Jira (её добавление переводит проблему в статус In progress, а её завершение — в статус Done);
— Репозиторий используют для стратегического планирования, наполнения беклога, отслеживания прогресса;
— В 2023 году появился облачный Jira Product Discovery, который решает ту же задачу, но репозиторий можно вести и в обычной Джире, чтобы избежать дублирования работы по актуализации статусов;
— Приоритизацию упрощают поля Impact, Effort и Score;
— Для группировки и построения разных дашбордов могут пригодиться поля: шаг клиента; тип проблемы (Need, Problem, Resolution); источник знания (исследование, обращение и так далее); категория пользователей; канал, где проблема возникает.

#problem #product #research
This media is not supported in your browser
VIEW IN TELEGRAM
Управлять творческими людьми — сложно?

11 июля в 18:00 на YouTube-канале AvitoTech пройдет дизайн-стрим от Авито:
будем говорить о том, как управлять креативными командами в разных отраслях.

Задавайте свои вопросы при регистрации или в чате во время стрима. Саша Павлов, арт-директор в Авито Работе, и Ксюша Голованова, главный архитектор ландшафтного бюро АФА, ответят на все вопросы и поделятся опытом, советами и успешными кейсами прямо в эфире.

Регистрируйтесь, чтобы получить напоминание о трансляции.