224
Чат читателей @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
