224
Чат читателей @uxnotes · Редактор: @zGrav
я видела реакцию нескольких людей, когда сайт показывает скелетоны по всему экрану, причем даже вместо текста, ладно бы вместо картинок, видео...
Обычно через 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
Отличный совет. Я иногда специально оставляю что-то мелкое недоделанным чтобы заказчик мог на это указать.
Читать полностью…
...либо поблагодарить за идею. Так он станет причастным к финальному результату;
Егор Камелев написал, как минимизировать количество правок, подготовиться к оставшимся и работать с ними, чтобы легче сдавать проекты.
— Даже если вам стало предельно ясно, чего хочет заказчик, всё равно дослушайте до конца и выясните как можно больше деталей перед началом работы, чтобы максимально синхронизировать видение решения;
— Договоритесь о терминах. Сложные и неоднозначные понятия бывают и в вашей работе (что такое «прототип»?), и в специфике бизнеса заказчика («комплект» в интернет-магазине?);
— Сразу готовьтесь к правкам: осознанно и единообразно называйте страницы и разделы, повторяющиеся элементы превращайте в компоненты, пока не согласованы основы (например, состояния в статике), не уходите в детали (анимации и переходы);
— Покажите первые результаты как можно раньше, чтобы получить корректирующие комментарии к полуфабрикату и не переделывать потом «утку» в «кролика»;
— Показывайте столько, сколько можно изучить за один подход. Иначе заказчик будет присылать комментарии пачками, что растянет процесс и повысит вероятность противоречивой обратной связи. Такое допустимо в самом конце проекта;
— В этом случае заказчик или кто-то из команды может указать на что-то недоделанное: «Когда форма отправлена, надо показать сообщение об этом». Можно сказать, что вы так и собирались сделать, либо поблагодарить за идею. Так он станет причастным к финальному результату;
— Чтобы реже пересматривать собственные решения, сперва проработайте атомарные разделы, а потом то, что из них состоит. Карточка компании → список компаний (использует данные из карточки) → дашборд или главная;
— Конкретизируйте субъективную обратную связь, чтобы не проделывать напрасную работу. Задавайте уточняющие вопросы, показывайте референсы;
— Сохраняйте варианты, которые заказчик отмёл, чтобы было к чему вернуться, если концепция изменится и он передумает;
— Не бойтесь показывать рабочие варианты, которые вы сами отмели, чтобы заказчик увидел, что вы хорошо поработали. Иногда он может увидеть там что-то, что поможет быстрее прийти к нужному решению;
— Записывайте все комментарии, нумеруйте, показывайте, как каждый комментарий был отработан. Очень плохо, когда забытые комментарии замечает заказчик;
— Вам могут доверять как специалисту, вы можете быть убедительны, приводить цифры и факты, но ответственность за проект несёт заказчик. Хорошо, когда он чувствует, что получил именно то, что нужно.
#client
Ну это до меня дошло как раз когда я прочитал заголовок в 3-й раз))
Читать полностью…
3 раза перечитал, подумал что делает Оксимирон в этом паблике
Читать полностью…
Как раз недавно обсуждали этот феномен, как и когнитивные искажения на подкасте. Ю-кай Чоуский Октализ в помощь всем, кто шагнул на эту скользкую дорожку. Хотя если продукт не задумывался с геймификацией в уме, то ему уже не особо что-то поможет )
Читать полностью…
я думал все нужно перевести в обычный вектор прежде чем отдавать?
Читать полностью…
Сэм Либерти написал об ошибках внедрения геймификации.
— 1. Добавление элементов геймификации после того, как продукт уже спроектирован;
— Такие вставки только испортят опыт: запутают людей и помешают сделать то, ради чего они пришли;
— Игровые механики надо планировать с самого начала и органично вплетать в сценарии взаимодействия;
— 2. Скучные задачи и бессмысленные вознаграждения;
— Внутренняя мотивация работает лучше внешней (получить бейдж). Людям нравится веселиться и играть, а также приносить пользу обществу и радовать близких;
— Получение баллов может заинтересовать вначале, но для долгосрочного эффекта сам процесс должен иметь смысл для человека;
— 3. Переусложнение дизайна элементами геймификации;
— Не стоит пытаться внедрить всё, о чём просили пользователи на исследованиях. В какой-то момент в предлагаемых механиках станет сложно разобраться;
— Дополнительные меню, элементы, подсказки и длинные туториалы усложнят интерфейс;
— 4. Общение только с теми пользователями, которые продолжают пользоваться продуктом;
— Старайтесь связаться с теми, кто удалил ваше приложение, и получить у них обратную связь.
In English. #gamification
Юрий Герыш написал о работе с 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
Думаете, такое сильно может пошатнуть веру в вас как в эксперта, который всё учёл?
Читать полностью…
Про записывать все комменты чуть ли не под роспись заказчика — мастхэв, иначе потом концы не найти + так можно избежать лишней возни в коммуникации и конфликтов
Читать полностью…
Очень хорошо, когда ID строки помогает понять контекст. И когда есть скриншоты всего интерфейса.
Читать полностью…
Календарная нет, рабочая, я надеюсь, да. Или вы там на 6-дневку перешли
Читать полностью…
Фёдор Миронов написал, как использует Crowdin для перевода текста в интерфейсе.
— Если передавать переводчикам просто текстовые строки без сведений, где они используются и как выглядят, будут ошибки и неестественные формулировки;
— Надо хорошо постараться, чтобы в процессе перевода не было бардака, особенно если работает несколько переводчиков;
— Crowdin хранит идентификаторы строк (ключи), все переводы, их статусы, теги принадлежности к платформам;
— При загрузке текста из Фигмы делает скриншоты и отмечает, где находится текстовая строка, что позволяет переводчику понимать контекст;
— Переводчики могут начинать работу сразу, не дожидаясь готовности макета и вёрстки;
— Плагин Crowdin в Фигме синхронизирует текст и позволяет дизайнеру просматривать переводы прямо в Фигме;
— Перед передачей макетов в разработку дизайнер запускает плагин и создаёт ключи;
— С помощью Select Matching Layers выделите повторяющиеся текстовые слои и переименуйте их, указав предполагаемые ключи. Плагин найдёт дубликаты и свяжет повторяющийся текст с одним ключом;
— Не используйте один ключ для заголовков и текста на кнопках. Они могут совпадать на английском (Transfer/Transfer), а на русском отличаться (Перевод/Перевести). У каждой текстовой роли в интерфейсе должна быть отдельная строка;
— Если в строке есть переменные данные (суммы, даты, имена), не разбивайте строку на части, а используйте переменные. Строка останется целостной и понятной для перевода. Это важно, если порядок слов в переводах может отличаться.
#localization #сrowdin
крутой метод, был. Раньше пользовался, но сейчас это уже не актуально, у фигмы же появился нормальный свап
Читать полностью…
Если геймификацию видно невооружённым взглядом - это хуёвая геймификация.
Вся геймификация российских корпораций (яндекс, мыло ру) - уебанская и вообще пиздец.
Впадлу разбираться, что там очередной мудак маркетолог понапридумывал, чтобы повысить удержание на 0.0001%.
Пик говна - вк шаги, там какой-то ёбнутый лудоман придумывал эту хуйню.
Спасибо за обратную связь, ценно. А если периодически в UX Notes делать анонсы накопившегося?
Читать полностью…
