UX Notes

2023-06-20 21:41:52 Тесс Гэдд написала о сочетании предварительного просмотра и полного отображения.

— Превью (предварительный просмотр) — релевантные данные, позволяющие быстро составить общее представление и показывающие, что на них можно нажать для перехода к полному отображению (все данные);
— Варианты превью: карточки (включая вариант с одной карточкой в строке), список (может выглядеть как таблица), обрезка (заголовок и часть текста с кнопкой «Читать дальше»);
— Полное отображение: модальное окно (позволяет сохранить контекст), отдельная страница (больше места для информации, минимизирует отвлекающие факторы), боковая панель (может располагаться рядом с содержимым страницы и поверх него, удобно для работы с большим количеством данных), аккордеон (полное отображение появляется под элементом, на который нажал пользователь);
— Сочетание «карточка + отдельная страница» встречается чаще всего;
— «Карточка + модальное окно» подходит для развлекательных проектов, галерей, соцсетей;
— Сочетание «список + боковая панель + отдельная страница» реализовано в Notion. Можно открыть боковую панель и расширить её до всей страницы, чтобы список не отвлекал.

In English. #navigation Открыть/Комментировать

2023-06-19 22:40:33 Артемий Меньшиков написал о пользе UX-исследований.

— Продуктовый дизайнер и UX-исследователь — носители экспертизы о пользовательском опыте, но немного разной;
— Исследования показывают, какой опыт получают конкретные пользователи с конкретными продуктами;
— Часто решения основываются лишь на экспертизе дизайнера, что ускоряет time to market, но фактически означает тестирование гипотез на бою, что не круто (но иногда гипотезы можно проверить только так);
— Культуру проверки своих решений надо воспитывать в себе (но дизайнер не может заменить полноценного исследователя) и в компании;
— Надо быть готовым, что по результатам исследования дизайн придётся переделывать;
— Благодаря исследованиям дизайнер видит совершённые при проектировании ошибки и может расти;
— Исследования прокачивают эмпатию и вытаскивают из информационного пузыря (в котором все пользователи ходят с последними айфонами и тому подобное);
— И создают аргументацию для выбора того или иного решения.

#research Открыть/Комментировать

2023-06-18 13:25:55 Евгений Бондковски написал, как упростить восприятие и увеличить скорость работы с таблицей, оформив её содержимое.

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

Читайте также о приёмах оформления таблицы в целом. #table Открыть/Комментировать

2023-06-15 14:01:49 В три команды Авито ищут UX-специалистов, чтобы делать исследования:

Руководитель группы исследователей в команду Buyer Experience
Продуктовый редактор в команду опыта продавца
Старший UX-исследователь в команду логистики

Что предлагают:

• Прозрачная система премий, достойная зарплата — размер обсудите на собеседовании;
• Гибридный формат работы — из дома и комфортного офиса в центре Москвы с местами для уединённой работы, зонами отдыха и гамаками;
• Мощное железо, дополнительные мониторы и всё, что нужно для продуктивной работы;
• Личный бюджет на обучение — книги, курсы и конференции, доступ к онлайн-библиотеке издательства МИФ;
• ДМС со стоматологией с первого дня работы, терапевт, психолог и массажный кабинет прямо в офисе;
• Два фитнес-зала и душ в офисе, занятия йогой и скидки на абонементы.

Подробности о вакансиях и анкеты соискателей — по ссылкам.

#реклама Открыть/Комментировать

2023-06-14 23:15:45 Веня Векк записал видео о методе прогрессивного джипега.

— В любую секунду любой проект готов на 100%, хотя проработанность может быть и на 4%;
— В зависимости от имеющегося времени проект можно прорабатывать до пикселя, а можно оставить на стадии концептуальной зарисовки;
— Получается, что время тратится только на нужную степень прожарки, а общий вид стейка всегда ясен;
— Если нужен дизайн фичи, не надо последовательно создавать финальные макеты для первого, второго экрана и так далее. Надо подготовить эскизы всех основных экранов флоу с примерными текстами и иллюстрациями. После этого решение на уровне смысла уже можно обсуждать со стейкхолдерами и переходить к проработке формы этого решения и деталей.

Канал Вени. О методе в Ководстве. #process #prototype Открыть/Комментировать

2023-06-12 22:43:56 Виталий Фридман написал, как сделать области нажатия в мобильных интерфейсах удобнее.

— Их рекомендуют делать минимум 44×44 px. Поэтому на нижней панели меню поместится не более 5 пунктов;
— На разных экранах пиксели разные, поэтому следует говорить о DIPs (dp), device independent pixel;
— Таблица для перевода pt в px и em, в SP или DP для Android, в pt для iOS и в DIP или px для Windows;
— Минимальная область нажатия может быть разной: 11 мм (31 pt / 42 px) в верхней части экрана, 12 мм (34 pt / 46 px) в нижней, 7 мм (20 pt / 27 px) в центре;
— Согласно требованиям WCAG 2.1 уровня ААА, если область нажатия находится в предложении или текстовом блоке, она может быть 27 px;
— Предлагайте отдельные контролы для точных манипуляций. Можно поворачивать изображения жестом, но удобнее может быть специальный слайдер или кнопка;
— Иногда несколько касаний лучше одного. Можно выбирать цвет товара нажатием на маленькие кружочки, а можно при нажатии на блок с кружочками отобразить специальную панель выбора цвета с удобными большими контролами;
— Максимизируйте кликабельные области. Например, чтобы нажать можно было на всю карточку, а не только заголовок, или на весь прямоугольник аккордеона.

In English. Конвертер mm в px и обратно Александра Овчаренко. #mobile Открыть/Комментировать

2023-06-11 22:50:39 Юля Коновалова написала о проектировании разговорных интерфейсов.

— Проектированием ботов занимается дизайнер диалоговых интерфейсов. Другие названия: скриптолог, архитектор разговорных решений, CUI/CUX-редактор;
— Первый шаг — high-level design (HLD), чаще всего это схема с отображением входа и выхода из диалога, ключевых сценарных веток и обращений к внешним системам;
— Low-level design (LLD) — максимальная степень детализации: конечные формулировки реплик бота, запросы пользователей, которые он отрабатывает, все сюжетные переходы и реакции, обработчики ошибок и событий, логика обращений к внешним системам;
— Также в сценарной папке хранится детальное описание ToV и, если есть, sequence-диаграмма и прочая документация по взаимодействию с внешними сервисами, мультимедиа-контент;
— LLD помогает визуализировать ожидания заказчика и концепцию разработки, обозначить объём работ, декомпозировать задачи, тестировать бота (сценарий будет эталоном), проводить UX-исследования;
— Дизайн бота нужен при презентации сценария, реализации, тестировании, презентации готового решения, разборе логов, проектировании доработок;
— Важно дообучать бота, расширять его базу знаний, добавлять реакции на вопросы вне изначального сценария, иначе он перестанет быть полезным;
— Баг, найденный на этапе согласования сценария, всегда дешевле исправить, нежели баг, найденный на этапе тестирования готового кода;
— Если предполагается сложный древовидный сценарий с множеством сюжетных веток, лучше разделить его создание на этапы: общий костяк, первая ветка и так далее. Как только кусочек сценария согласован, можно заниматься его реализацией.

#voice_interface Открыть/Комментировать

2023-06-10 20:19:04 Открыть/Комментировать

2023-06-07 14:02:09 Ситуация: вы заказали исследование, долго ждали результат и наконец получили его. Смотрите и понимаете — всё это вы и так уже знали или вам не хватает деталей и ответов на конкретные вопросы, чтобы принять решение.

Обычно исследование строится в последовательности: постановка задачи → подготовка → проведение → анализ результатов → принятие решений. Разумеется, ошибка может закрасться на любом из них, но ваша задача минимизировать её вероятность на этапе постановки задачи.

Таня Чернявская, руководитель продуктовых исследований в Авито Товарах, рассказывает, как ставить задачу рисёрчеру на продуктовое исследование, чтобы быстрее получить результат. Поехали разбираться по ссылке.

Реклама. ООО «Авито Тех». LdtCKCxbg Открыть/Комментировать

2023-06-07 11:48:02 Ярослав Александров написал, как усложнить жизнь злоумышленникам и сохранить удобство входа.

— Это две противоположные цели: 1) Упрощать прохождение воронки регистрации и авторизации; 2) Снижать число попыток несанкционированного доступа к пользовательским профилям;
— Метрики удобства: процент авторизованных пользователей, общее количество покупателей и сделок, ключевые конверсии, ключевые действия на площадке (покупка, контакт);
— Проверяйте все сценарии UX-тестами;
— Отслеживая обращения пользователей, объединяйте жалобы с данными, чтобы видеть общую картину, так как часто нарушители нагружают поддержку, маскируясь под недовольных пользователей;
— Слабые пароли — одна из главных точек приложения усилий взломщиков. Формальные требования к паролям не работают. Пароль P@ssword1 так же легко подобрать, как и password;
— Внедряйте более сложные требования к паролям и одновременно рассказывайте, как легко создать и запомнить по-настоящему сложный пароль. Например, использовать как пароль 3 случайных слова на английском или русском (транслитом);
— Люди включают 2-факторную авторизацию, когда а) их где-нибудь взломали, б) профиль стал ценным, в) прочитали, что к профилю может получить доступ посторонний. Они не хотят, чтобы от их имени кого-то обманули;
— Большинство способов 2-факторной авторизации портят пользовательский опыт. Есть метод Risk Based Authentication, когда такая авторизация нужна только если система подозревает взлом;
— Способы 2FA: смс, пуш, звонок (продиктовать код, ввести последние 4 цифры номера, с которого звонили, пользователь должен сам позвонить), TOTP, QR-код (отсканировать из приложения), имейл (код или ссылка в письме), внутренний мессенджер продукта, биометрия, список одноразовых паролей, физические ключи, пин-код.

#log_in Открыть/Комментировать