198
Чат читателей @uxnotes · Редактор: @zGrav
Саша поделился материалом о списке товаров в интернет-магазине из внутренней базы знаний студии KISLOROD.
— В списке товаров пользователь получает первую информацию о них. Фильтр, сортировка, теги с популярными запросами клиентов, доп. информация при наведении курсора помогают быстрее находить нужное, не перемещаясь на страницу товара;
— Карточка товара — компромисс между желанием показать больше параметров товара (разным людям важно разное при выборе) и уместить больше товаров на странице;
— В ней всегда должны быть универсальные характеристики товара: изображение (несколько переключающихся изображений), название (и тип), цена (и перечёркнутая старая, размер скидки), вариации товара (цвета, размеры, материалы);
— Изображения подбирайте с учётом специфики. Иногда надо показать товар в интерьере, разъёмы крупным планом, содержимое матраса в разрезе;
— В смешанных списках надо отображать тип товара. Название «Тинейджер» не говорит о том, что продаётся комплект детского постельного белья;
— Если товар продаётся упаковкой, для удобства сравнения показывайте также цену за штуку, за килограмм;
— Индивидуальные характеристики: рейтинг, совместимость с другими товарами («подходит для ноутбуков 15,6 дюйма»), размеры, рекомендации (на какой возраст ребёнка рассчитано), особые характеристики (для специфичных товаров), артикул;
— Рейтинг без количества оценок пользователи считают бесполезным. Он полезен в нишах, где сложно совладать с многообразием выбора (электроника, бытовая техника);
— Артикул полезен в нишах, где ищут конкретные модели;
— Где возможно, чтобы не перегружать карточки, заменяйте текст на понятные иконки, не пишите названия характеристик. В карточке бутылки вина понятно, что «0,7 л» — объём бутылки;
— Функция быстрого просмотра — зачастую лишь костыль для магазинов с плохой реализацией списка товаров. Надо кликнуть, дождаться загрузки модального окна. Иногда его принимают за страницу товара (и не находят там нужных параметров);
— Выделяйте в списке просмотренные товары (удобнее продолжить поиск при возвращении к списку товаров) и добавленные в корзину (чтобы найти совместимые товары, не покидая список).
#list
А, понятно. Я просто увидел, что всего планировали привлечь 3 респондентов. И в вашем недавнем сообщении было указано, что все еще нужно 2-3
Читать полностью…
Вообще поиск респондентов на интервью — отдельная задача. Даже в @uxnotes вроде были материалы на эту тему
Читать полностью…
Пробовали еще куда-нибудь закинуть призыв? У нас не очень многочисленный чат
Читать полностью…
Всем привет! На данный момент работаю над учебным проектом — Канбан-приложением. Хочу лучше разобраться, как пользователи на самом деле работают с канбан-досками, а конкретно полноценного опыта. От попадания на главный экран до создания первой доски и работы с командами и трудности создания.
Для проекта мне необходимо провести глубинное интервью, где смогу пообщаться и задать вопросы.
Интервью займет 40–60 минут. Во время интервью необходимо быть с включенной камерой и в комфортной обстановке. Всё для сохранности данных, все ответы будут полностью анонимными и нигде не будет демонстрироваться фотографии и подписи, которые будут сказаны в интервью.
Нужны люди: дизайнеры, руководящие процессами собственных команд, фрилансеры, которые удаленно работают и составляют собственные дизайн-процессы, студенты или просто новички, которые попробовали пользоваться подобными приложениями. Напишите, пожалуйста, в личные сообщения, если вы или ваши друзья и руководители, которые могут поучаствовать в этом интервью. Согласуем время для интервью для вашего комфорта.
Нужно всего 2-3 человека
Для связи со мной: @PhilipUX
Для фиксированной ширины цифр не обателен моноширинный шрифт. Можно просто выбрать табулярные цифры обычного шрифта вместо пропорциональных, и они уже будут одинаковой ширины. Они для того в шрифтах и делаются.
Читать полностью…
Всем привет! На данный момент работаю над учебным проектом — Канбан-приложением. Хочу лучше разобраться, как пользователи на самом деле работают с канбан-досками, а конкретно полноценного опыта. От попадания на главный экран до создания первой доски и работы с командами и трудности создания.
Для проекта мне необходимо провести глубинное интервью, где смогу пообщаться и задать вопросы.
Интервью займет 40–60 минут. Во время интервью необходимо быть с включенной камерой и в комфортной обстановке. Всё для сохранности данных, все ответы будут полностью анонимными и нигде не будет демонстрироваться фотографии и подписи, которые будут сказаны в интервью.
Нужны люди: дизайнеры, руководящие процессами собственных команд, фрилансеры, которые удаленно работают и составляют собственные дизайн-процессы, студенты или просто новички, которые попробовали пользоваться подобными приложениями. Напишите, пожалуйста, в личные сообщения, если вы или ваши друзья и руководители, которые могут поучаствовать в этом интервью. Согласуем время для интервью для вашего комфорта.
Буду сильно благодарен!
Для связи со мной: @PhilipUX
Новые материалы в @uxwork (кроме вакансий):
— Что делать, чтобы работники-зумеры не уходили из вашей команды;
— Поиск работы, когда ты давно в дизайне и есть управленческие позиции в резюме;
— Основные уроки из книги Криса Восса о переговорах «Договориться не проблема»;
— Поиск работы со стороны нанимающего менеджера.
Игорь написал об адаптации интерфейса android-приложения под увеличенный системный шрифт.
— Кроме размера системного шрифта на размер текста также влияет масштабирование экрана;
— Можно увеличить Display size и тогда, например, квадрат со стороной 48 dp будет отрисовываться не 132 физическими пикселями, а 144 (и станет больше);
— Комбинирование настроек может сделать важную информацию недоступной или ухудшить впечатление от интерфейса. В продукте Игоря 45% пользователей увеличивают текст;
— Текст можно обрезать: в начале, середине или конце. Скрытая часть заменяется многоточием;
— Можно сократить: заменить 99 000 000 на 99 млн. Но это не вариант там, где важна точность;
— Бегущая строка считается антипаттерном и применяется редко, если остальные способы не подходят;
— Перенос строк — через атрибут android:breakStrategy можно указать способ разбивки текста. Важно убедиться, что контейнер с текстом подстраивается под высоту контента;
— Авторазмер текста — текст меняет размер в зависимости от доступного пространства. Можно задать минимальное и максимальное значение, а также шаг изменения;
— Также можно добавить прокрутку внутри контейнера или вовсе использовать динамическую вёрстку, когда расположение элементов зависит от отображаемой информации;
— Приложение может вовсе запрещать увеличивать текст (это, конечно, ухудшает пользовательский опыт), либо делать это в собственных настройках (Телеграм);
— Это менее удобно пользователям и идёт вразрез с рекомендациями Material Design, но даёт разработчикам больше контроля и обеспечивает единообразие на разных устройствах.
#font #accessibility
Больше всего минусов, если считать только их, получили заметки:
— Артемий Талалуев о повышении эффективности работы продуктовых дизайнеров;
— Репост заметки Вовы Зимина о том, что продуктовые дизайнеры заебали;
— Репост заметки Никиты Прокопова о том, что дизайнеры не должны думать об интересах бизнеса;
— Репост заметки Егора Алексеева о включении камеры на созвонах;
— Репост заметки Никиты Михеенкова о трёх вариантах дизайна.
Да, учебный. В рамках курса Продак дизайнер& UX-исследователь
Читать полностью…
Да. Я позже думал ещё привлечь в районе 2-3 человек. Для понимания и раскрытия новых инсайтов
Читать полностью…
Нет, 2 человека есть. Ожидаем сегодня ещё 3 участника
Читать полностью…
Как успехи с поиском респондентов? Сколько всего планировали опросить?
Читать полностью…
Какие интересные и актуальные у Анны для меня статьи. Спасибо, что делитесь опытом❤️
Читать полностью…
Анна Труфанова поделилась рекомендациями по дизайну интерфейсов для цеха.
— Тёмная тема — стандарт безопасности, так как не слепит оператора;
— Начертания Light и Regular на цеховых мониторах рассыпаются. Только Medium и Bold;
— Для цифр используйте моноширинный шрифт;
— Интерфейс в цеху — набор датчиков. Оператор должен считывать их за доли секунды, видеть критические показатели периферическим зрением. Для этого контраст делайте не 4,5:1, а 10:1 (ГОСТ Р ИСО 9241-303);
— Чтобы не перегружать пользователя и не приучать его игнорировать сигналы, интерфейс не должен начинать мигать красным при малейшем отклонении параметров. Не все отклонения одинаково критичны (ANSI/ISA-18.2);
— Дублируйте цветовое кодирование формой (ISO 9241), так как у 8% мужчин встречается дальтонизм. Красный треугольник — критическая авария, немедленная остановка. Жёлтый ромб — предупреждение, требуется внимание;
— Важна мышечная память. Не меняйте положения кнопок, особенно если их нажимают в аварийных ситуациях;
— Улучшайте эффективность через сокращение шагов: сохраните кнопку в привычном месте, но превратите 3 клика в 1;
— Всё для оперативного управления размещайте на расстоянии клика;
— Если датчик показывает проблему, интерфейс должен сам подтянуть кнопку действия в зону видимости;
— Располагайте ключевые индикаторы так, чтобы они попадали в естественную траекторию взгляда, а не в слепые зоны экрана.
#industrial
Александр Овчаренко написал о проектировании физических панелей управления.
— Смотреть на чужие решения на картинках недостаточно, надо взаимодействовать с ними. Трогайте устройства предыдущих поколений, синтезаторы и MIDI-контроллеры в музыкальных магазинах, панели в автомобилях и яхтах. Требуйте от начальства оплаты посещения выставок;
— У каждого элемента есть невидимая часть, находящаяся под поверхностью панели, со своими габаритами и идущими к ней проводами. Это влияет на их расположение;
— Место под поверхностью панели занимает печатная плата, сама панель может крепиться разными способами. Из-за этого могут появиться места, где нельзя размещать контроллеры;
— Габариты часто зависят от внешних факторов. Например, от размера предыдущей версии панели, чтобы можно было одну заменить на другую;
— Компоновка согласно эргономическим и пользовательским требованиям → Совместно с инженерами приближенная к реальности версия;
— Делайте физические прототипы из картона и бумаги или с помощью 3D-принтера, чтобы получить объёмность макета в реальном размере;
— Для оценки выбора положения и размера поворотных ручек подходят любые крышки (от газировки, зубной пасты). Они сделаны так, чтобы было удобно крутить, что лучше любых абстрактных цилиндров;
— Подойдут ручки и колпачки с другого оборудования. Главное, не приклеивать намертво;
— Если панель предполагает наличие типовой клавиатуры или трекбола, в картонной основе можно сделать вырез для них и вставить заподлицо;
— Цена ошибки высока: панель даже из типовых компонентов часто дороже сенсорного экрана с HMI;
— Внимательнее относитесь к крайним случаям использования панели, так как элементы управления статичны;
— Настаивайте на участии в предпроизводственных этапах. Инженеры могут что-то не так понять или отойти от вводных из-за объективных причин (запланированные энкодеры оказались недоступны).
#industrial
Да, 25й год был хорош на инициативы законодателей В разрезе интерфейсов
Читать полностью…
Светлана Диденко написала о требованиях российских законов к интерфейсам российских веб-сервисов.
— Нельзя использовать иностранные сервисы для авторизации. При входе по номеру телефона допускаются только российские операторы связи;
— Если у вас подписка с ежемесячным списанием, информация об этом должна быть в форме подписки, включая сумму и дату следующего списания;
— Кнопка отмены подписки должна быть такой же заметной, как и форма подписки;
— Если у вас есть поле ввода (подписка на рассылку, онлайн-чат), владелец сайта становится оператором данных и должен иметь политику конфиденциальности;
— В ней должна быть обоснованы все собираемые данные. Спрашиваете в форме дату рождения — обоснуйте, зачем;
— Ссылка на неё должна находиться в одном визуальном блоке с кнопкой отправки формы. Она должна быть доступной даже при открытой визуальной клавиатуре;
— Согласие на обработку персональных данных пользователь должен давать осознанным действием — включив изначально выключенный чекбокс;
— Для каждой цели обработки данных (регистрация, рекламная рассылка) нужен свой чекбокс;
— Текстовая подпись к чекбоксу должна содержать ссылку на согласие;
— Скрипты отслеживания должны активироваться только после нажатия на кнопку «Принять» в попапе, сообщающем о кукисах;
— Этот попап не должен блокировать доступ к основному контенту;
— Реквизиты компании (ИНН, ОГРН, наименование организации) должны быть текстом, чтобы их было легко скопировать для проверки;
— Информация о продавце должна быть в оферте, подвале и на странице с контактами.
#laws
Придумала себе работу благодаря посту в данном канале (про выгорание от дизайн-ревью), который пришёлся кстати, напомнив что давно хотела создать, во время очного(!) обучения в СПб на спеца по работе с ИИ, по результатам которого ещё и диплом гособразца получила (2025). Это был первый такого рода курс в СПСЭИ. До него в онлайне обучалась полтора года (2022-2023) на дизайнера uxui. Пару лет после самообразовывалась в этой сфере с вялой вдумчивой практикой.
Вот такой кейс получился. По идее, создала продукт. 🙌🏼 https://www.behance.net/gallery/240330777/AIUXUI-(chast-2)-b2b
Не сказала бы, что ИИ отбирает работу. Лично мне он дал возможность буквально за день реализовать то, что я месяцами (периодически вспоминая) обдумывала в ожидании как раз тех инструментов, которые могут сделать всё рутинное за меня при моём авторском надзоре и без посредников😌 Кучи идей, которые я наконец могу в секунду реализовать. Что и делаю) Сложнее и дольше заставить себя оформить их в наглядные кейсы.
При том, что в it я пока всё и всем практически бесплатно делала. За интерес. Много лет прошло с тех пор, как я поняла, что все риски надо диверсифицировать. Как и способы заработка. С начала 2017года, когда впервые приобрела первые сатошики битка и упорно их ходлила.
Изучаем ИИ и не раскисаем! Готова к интересному сотрудничеству✨
Дмитрий Сергушкин написал об окнах подтверждения действий.
— Такое окно прерывает сценарий, чтобы пользователь дополнительно подумал о совершаемом действии и избежал ошибки;
— Это полезно, если действие необратимо, ведёт к серьёзным последствиям (финансовые транзакции) или эффекту домино (влияет на множество связанных объектов), совершается редко (и пользователь не помнит всех последствий) или требует явного согласия;
— В остальных случаях, а также для частых действий его лучше не использовать, чтобы пользователь не стал подтверждать всё на автомате;
— Если возможно, лучше сделать действие обратимым и сразу показывать результат его выполнения, чтобы пользователь мог отреагировать;
— Также можно уменьшить потребность в окнах подтверждения, отделяя серьёзные действия от остальных и разделяя их запуск на несколько шагов;
— В заголовке пишите, что пользователь собирается сделать: «Удалить ваш аккаунт навсегда?»;
— На кнопках — конкретные действия: «Удалить аккаунт», «Оставить аккаунт»;
— Добавьте визуальные подсказки вроде иконки корзины или красного цвета кнопки, подтверждающей деструктивное действие;
— Для критически важных действий можно добавить препятствие вроде поля, в которое надо, например, ввести название удаляемого пространства или слово «Delete»;
— Есть приём «Hold to confirm», когда для подтверждения действия надо нажать на кнопку и удерживать её нажатой;
— Можно показывать окна подтверждения только при обнаружении аномалий вроде необычной суммы транзакции или получателя.
In English. #modal