Чат читателей @uxnotes · Редактор: @zGrav
Привет! По дефолту раз в год, так как продукт накапливает достаточно изменений. Вот сейчас первая команда исправила достаточно барьеров из первой оценки и сама пришла за следующей, прошло 9 месяцев. То есть базово имеет смысл тратить ресурс, когда флоу меняется, чтобы отследить прогресс. А это зависит от скорости продуктовой команды 🙂
Читать полностью…Егор Камелев написал об автофокусе на первом поле формы.
— Автоматически помещать фокус на первом поле формы рекомендуют, чтобы открывший её пользователь сразу, без лишних действий, смог ввести данные;
— Это хорошее базовое правило, которое можно применять по умолчанию. При этом не стоит забывать о нюансах, из-за которых от него стоит отступить;
— Если форма — не единственное содержимое страницы и находится где-то внизу, автофокус прокрутит страницу к форме и помешает изучить страницу;
— В мобайле автофокус приведёт к появлению экранной клавиатуры, что затруднит ознакомление с формой в целом;
— Бывают формы, которые часть пользователей может заполнять не с первого поля;
— Либо этому первому полю может предшествовать информация о регионе с контролом его изменения. И это изменение значительно меняет форму.
#form
Как часто нужно проводить оценку Product score, чтобы она была полезной для продукта?
Читать полностью…А по мне так забавная ошибка :) Но правда любопытно, что никто об этом больше часа не писал.
Читать полностью…Забавно, что вы задали этот вопрос больше, чем через час после публикации :)
Про то, как эйчар альфы сравнивает людей с Крошами и Совуньями, пришлось почитать :)
Светлана Юдина написала о Product score — комплексной оценке UX и UI в продуктах.
— Продакты мыслят цифрами, поэтому UX-проблемы часто ускользают из их поля зрения;
— Product score даёт числовую оценку качества пользовательского опыта;
— В Сравни этим проактивно, без запросов от продуктовых команд, занимается внутренняя UX-лаборатория;
— Периодическая оценка позволяет отслеживать изменения в продукте, сравнить продукты между собой и находить конкретные места для улучшения;
— UX оценивают с респондентами (по 6 на сегмент), которые на проде со своими реальными данными проходят полный флоу оформления покупки или использования услуги;
— Исследователь вмешивается только если респондент зашёл в тупик, чтобы посмотреть весь флоу;
— Он фиксирует количество пройденных этапов и места, где респондент споткнулся, а также оценивает критичность этих проблем: низкая, средняя, высокая;
— В конце респондент по 5-бальной шкале оценивает удобство сервиса и скорость прохождения сценария;
— Всё это складывается в оценку UX от 0 до 100% (хитрые формулы смотрите в статье);
— Дизайнер из другой команды с чеклистом по 5-бальной шкале оценивает UI по параметрам: понятность и логичность, типографика и текст, анимация, графика, консистентность;
— Он может также предложить рекомендации по улучшению UI;
— Оценка UX оставляет 75% от итоговой, оценка UI — 25%;
— Product score и рекомендации передают команде, бизнес-оунерам и партнёрам, так как часть флоу иногда проходит в интерфейсах партнёров.
#metrics
Упоминанемые в статье чипы — это какая-то ошибка интерфейсостроения. По ним не ясно что это: кнопка или просто текст в рамке. По ним сразу не ясно они дают возможность выбрать один или несколько элементов. Это просто кошмар какой-то. Их лучше никогда не использовать и забыть как страшный сон. Слишком контексто зависимый элемент.
Читать полностью…Карен Ананян написал о подходе Stretch, Scale, Switch при проектировании адаптивных состояний.
— Веб-страницы могут по-разному адаптироваться к разным ширинам устройств или окон браузера;
— Например, а) масштабироваться, способ был единственным, когда мобильному трафику ещё не уделяли столько внимания, б) растягиваться по горизонтали, сохраняя компоновку, в) менять компоновку в заданных точках слома (брейкпоинтах);
— На современных адаптивных сайтах обычно комбинируют последние 2 способа;
— Но их можно дополнить и масштабированием: в определённом диапазоне ширин растягивать интерфейс. При более значительном изменении — пропорционально его масштабировать. И когда компоновка перестаёт быть удобной — менять её;
— Растягиваем → Масштабируем → Переключаем на другую компоновку → Повторяем;
— Достаточно подготовить несколько компоновок и для каждой определить, в каких пределах она будет тянуться и масштабироваться, чтобы на любых экранах был гармоничный интерфейс.
#adaptive
Они ведь могут по сути быть табами второго уровня? Есть примеры удачного использования?
Читать полностью…я видела реакцию нескольких людей, когда сайт показывает скелетоны по всему экрану, причем даже вместо текста, ладно бы вместо картинок, видео...
Обычно через 0,3 - 0,5 сек сайт закрыт.
Антон из X5 Tech написал о скелетонах.
— Это такая загрузка экрана, когда сначала отображаются серые прямоугольники, а потом вместо них появляется контент;
— Их важно анимировать, чтобы всё это не было похоже на баг;
— Прижилась пульсация (мерцание) и волна (единое для всех блоков смещение градиента, background: fixed);
— Плюс скелетона в предварительном представлении структуры экрана и возможности отображать контент по мере его загрузки;
— Каждый прямоугольник скелетона — обёртка для контента и заглушка на время загрузки;
— Но что должно быть внутри обёртки: атом, молекула или организм в терминах атомарного дизайна?
— Отдельными блоками скелетона может быть то, что запрашивается с сервера отдельными запросами;
— Скелетировать можно всю страницу (высоконагруженные проекты, у значимой доли пользователей плохой интернет), её части (тяжёлые блоки с таблицами, статистикой) или отдельные элементы (результат множества запросов, сложного вычисления и так далее);
— Будьте последовательны. Если где-то есть скелетоны, спиннеры в раскрывающихся списках смотрятся странно;
— Заглушки должны соответствовать размеру контента (в первую очередь высоте), чтобы при загрузке ничего не скакало, а также его внешнему виду, чтобы не сильно контрастировать с контентом;
— Если в карточках может быть разный состав контента, ради простоты можно сделать для всех карточек одну усреднённую заглушку;
— Высокая детализация требует затрат, которые не всегда оправданы. Например, вкладки могут быть одним прямоугольником. Обычно это один компонент на странице, его заглушка воспринимается как заголовок, да и показывать заглушки отдельных табов непросто;
— Но иногда повышение детализации имеет смысл и помогает сразу привлечь внимание к определённой части страницы;
— Повторяющиеся элементы вроде ячеек с текстом в таблице можно скелетировать красиво, сделав заглушки разной ширины (90, 75, 85, 80, 65% от ширины ячейки) и сохранив выравнивание.
#loader
Ищем Middle UX-редактора в команду Точки.
Точка Банк — финтех-компания, создаём онлайн-банк и другие сервисы для бизнеса.
📍От 150 000 ₽. Удалёнка или работа в офисе, мы есть в 20 городах по всей стране.
У нас комьюнити UX-редакторов, чётко прописанный TOV, гайды и библиотеки. Мы ждём, что редактор будет бороться за согласованность языка Точки в интерфейсах и всячески помогать в разработке сервисов.
Что делать:
— Писать тексты для продуктов: работать с интерфейсами, рассылками и сервисными сообщениями.
— Искать решения вместе с продактами, дизайнерами и UX-исследователями.
— Вместе с маркетологом создавать баннеры, рассылки, онбординги и другие промо-тексты для активации бизнес-карт.
Ты подойдёшь, если:
— Есть опыт работы UX-редактором от двух лет.
— Есть опыт работы с продуктами для предпринимателей.
— Понимаешь, как создаётся продукт, как решаются задачи продукта с помощью текста, как выстраивается работа с продакт-оунерами и дизайнерами.
— Знаешь, как следовать TOV в коммуникациях.
📝 Узнай больше и откликайся на сайте.
Женя Белодед поделился процессом и находками из исследования касс самообслуживания.
— Для сокращения воровства в «Пятёрочке» касса выводит изображение со своей камеры прямо в интерфейс и так показывает, что за покупателем наблюдают;
— Удобно, когда кнопки «Каталог», «Пакеты» и «Позвать на помощь» доступны всегда. В любой момент можно взять пакет, если не рассчитал вместимость рюкзака, и позвать консультанта, если возникли вопросы;
— С верхней частью экрана взаимодействовать неудобно. Все важные элементы лучше размещать в нижней, а список товаров формировать снизу вверх;
— Длинный список товаров должен прокручиваться автоматически, чтобы последние отсканированные позиции были видны сразу;
— Большой экран устройства скорее усложняет использование, надо искать способы оптимизации «пробега» пальца и глаза;
— Обозначение товаров 18+ и 16+ в списке помогает консультантам быстрее в нём ориентироваться, когда надо подтвердить возраст покупателя;
— Компактнее и удобнее объединять одинаковые товары в одну строку, указывая количество штук;
— Если показывать старую и новую цену для товаров со скидкой и акционных, экономия станет наглядной, снизится стресс от покупки;
— В сложных ситуациях помогают интерфейсные подсказки о действиях пользователя в кассе и вне её;
— Как справляться с косыми взглядами охранников: «Придумал историю, что возрастная мама хотела бы начать пользоваться кассой самообслуживания, но боится, что не разберётся и будет выглядеть глупо. Поэтому попросила сына записать видеоинструкцию, чтобы разобраться дома. С такой легендой охранники были спокойны, а консультанты без проблем всё показывали и комментировали прямо на камеру».
#retail #self_checkout
Первый пример про видео и фейсбук. Если я всё правильно понимаю, у фейсбука на тот момент фокус в разработке своих ии решений был именно на анализе видео, а чтобы это обучать, нужно было много контента. Ну они и согнали всех делать именно видеоконтент
Читать полностью…Не факт, что Светлана читает здесь комментарии. Я рекомендую спросить в комментариях к её статье на Хабре
Читать полностью…Возможно просто мало кто по ссылке переходил?) в посте и так подробно описано всё
Читать полностью…Отдельное сорри за то, какая ссылка подставилась по ошибке. Довольно бессмысленная статья со сравнением соискателей со Смешариками
Читать полностью…С прошлого анонса в @uxwork кроме вакансий вышли ещё материалы:
— О красных и зелёных флагах во время интервью с кандидатами;
— О разных форматах оплаты при работе с заказчиками (почасовка, фикс, абонемент) и примере пути фрилансера от одного формата к другому;
— О поиске работы в сравнении с поиском спутника жизни в дейтинговом сервисе.
Статья очень плохо написана
Есть ощущение что автор вообще не проводил исследование, а просто написал какую-то х»»ню и отсебятину без экспертизы
Не стоит на это ориентироваться, и точно не стоит рекомендовать к прочтению
Чет хз, у нас табы второго уровня как раз должны выглядеть как табы, чтобы была прозрачная иерархия. Сегментирование переключатели норм живут в модалках настроек и в календаре (день/месяц/год)
Читать полностью…Энтони Ценг написал uxteddy/27AG4BEr9U7">о сегментированных переключателях в формах.
— Сегментированные переключатели нужны в основном для переключения между разделами, как табы;
— Ошибка — использовать их для выбора значений в формах и заменять ими группы радиокнопок;
— Вместо групп радиокнопок, особенно, если мало места по вертикали, можно использовать чипы одиночного выбора;
— В отличие от нажатия на сегментированный переключатель, при нажатии на чип сразу ничего не происходит. Пользователь выбирает значение, которое затем подтверждает нажатием на кнопку;
— Свитч (тоггл) — частный случай такого переключателя, и их тоже неправильно используют вместо чекбоксов.
In English. #chips #toggle #segmented_control
Юрий Герыш написал о работе с Chrome DevTools.
— Открыть их можно через меню (пункт «Инструменты разработчика») или нажав правой кнопкой мыши в любом месте страницы (пункт «Просмотр кода страницы»);
— Экспорт изображений в формате SVG: скопируйте содержимое тега <svg> из кода страницы и вставьте в Фигму;
— Если картинка в формате PNG, можно поискать её SVG-версию на сайте: добавьте к адресу картинки «?svg», например: «https://habr.com/img/habr-logo-ru.png?svg»;
— Меняя код CSS (вкладка Styles), можно быстро прикидывать стилевые правки;
— В Styles можно видеть и менять правила, определяющие внешний вид страницы;
— На вкладке Computed отображаются текущие свойства выбранного элемента, которые получились после применения всех правил. Например, сколько в пикселях составила ширина, которую задали в процентах;
— Меняя HTML, можно править текст, дублировать и удалять элементы;
— Так можно проверить поведение элементов в корнер-кейсах. Например, что будет, если название слишком длинное;
— Просмотр адаптивных состояний: можно задать размер окна браузера. Есть пресеты размеров популярных устройств;
— Чтобы выбирать Инспектором элементы, свёрстанные с помощью Shadow DOM (изолирование стилей элемента), включите в настройках «Show user agent shadow DOM»;
— Просмотр состояний элементов (hover, active): список состояний отображается на вкладке Styles с нажатым «:hov», либо можно выделить элемент через Инспектор и в контекстном меню нажать «Force state».
#review #chrome_devtools
С упоением прочитал ещё на той неделе, почему-то кейсы со всякими банкоматами/КСО/и т.п. очень заходят, буду ждать продолжения!)
Читать полностью…Женя — красавчик
Побольше бы таких интересных кейсов в канале про реальный опыт в нестандартных кейсах
Виктория Друзенко написала о прокачке UI.
— Навыки UI-дизайна могут просесть, если долго работать с дизайн-системой на одном продукте;
— UI Daily может не подойти, так как макеты там оторваны от контекста, и надо тратить время на его додумывание;
— Переделывайте макеты из своих старых проектов. Подойдут даже макеты с предыдущего спринта;
— Так вы увидите свой прогресс, можете пересмотреть решения и улучшить UX, не будет ограничений со стороны заказчиков и разработки, а результат можно положить в портфолио;
— Анализируйте чужой дизайн, выделяя удачные и неудачные решения, предлагайте альтернативы;
— Публикуйте свои наблюдения там, где другие дизайнеры могут их увидеть и обсудить, это даст обратную связь;
— Так вы научитесь давать обратную связь, прокачаете насмотренность;
— Вовлекайте коллег, знакомых дизайнеров, менторов;
— Помимо того, что так веселее, будет больше обратной связи, можно перенять чужой опыт, сложнее слиться с прокачки;
— Перерисовывайте понравившиеся макеты;
— Так ваша база UI-решений будет расти. Вы будете не только знать разные визуальные ходы, но и уметь их воспроизвести;
— Можно попробовать новые инструменты для оптимизации работы. Если надо перерисовать экран, стоит подумать, как сделать это быстрее и качественнее.
#visual #upskilling