Александр Кочеванов написал о немодерируемом тестировании.

— Такое тестирование позволяет выявить проблемы предлагаемого интерфейсного решения, подтвердить или опровергнуть гипотезы до того, как разработчики это решение реализуют;
— Провести его можно после подготовки первой версии дизайна;
— Процесс состоит из а) подготовки прототипов к тестированию, б) составления вопросов для респондентов, в) запуска на специальной платформе, г) обработки результатов, д) составления отчёта;
— Платформы: Userfeel, Loop11, Hotjar, UserZoom, UserTasting, Usability Hub, Maze, Marvel;
— Прототипы лучше делать как можно более полными. Например, кому-то из респондентов удобнее график, кому-то таблица, и лучше, если прототип даст возможность выбрать удобный вариант отображения;
— Перед запуском проверьте прототипы и вопросы на коллегах, чтобы выявить ошибки;
— Проведите тест сначала на части респондентов из запланированных, чтобы найти и исправить первые проблемы. Затем можно сосредоточиться на остальном;
— Начинайте тест с вводной, которая погрузит респондента в контекст. Разместить её можно на первой странице прототипа (с кнопкой «Начать исследование»), чтобы возможности платформы по оформлению текста вас не ограничивали;
— Старайтесь использовать реальный контент вплоть до актуальной текущей даты;
— Попросите респондентов озвучивать всё, что они видят и думают. Особенно, если они сталкиваются с трудностями;
— Подумайте, что может пойти не так и подготовьте респондентов. Например, расскажите, как перезагрузить прототип, если произошёл сбой;
— Просите отвечать на вопросы вслух, а не письменно, чтобы не тратить на это время;
— Используйте скрининговые тесты, чтобы отфильтровать участников, которые вам не интересны;
— Просите оставить контакты, чтобы можно было обратиться в следующий раз к тем респондентам, кто показал себя ответственным и ориентированным на результат.

#user_testing #unmoderated #process

Олег Бурцев, Елизавета Горлова и Арина Шулева поделились советами о дизайне диаграмм. Некоторые советы в дополнение к рекомендациям Тараса Бакусевича.

— В круговых диаграммах используйте контрастные цвета вместо тонов одного цвета;
— В линейных диаграммах не используйте больше 5–7 линий;
— Выбирайте разные стили линий для выделения, сравнения и подчёркивания иерархии. Например, данные за прошлый год можно показать пунктиром;
— Не используйте диаграммы с областями, если хотите показать больше 3–4 показателей;
— Диаграммы с накоплением подходят, чтобы показать суммарную величину и понять, как она распределяется по показателям;
— Оставляйте небольшие отступы между столбцами одной группы, чтобы облегчить восприятие диаграммы;
— Добавляйте значения над столбцами диаграммы, когда это возможно. Если нет, показывайте их в подсказке при наведении;
— Воронкообразные диаграммы используйте, если этапов 4 и более;
— Сравнивать этапы проще, если это выравненная по левому краю столбчатая диаграмма. Но если надо придерживаться формы воронки, высоту прямоугольника каждого из этапов лучше сделать пропорциональной его ширине;
— Каскадная диаграмма показывает влияние положительных и отрицательных изменений на изначальное значение. Обозначайте цветом характер изменения;
— Для построения пузырьковой диаграммы ограничивайте количество значений;
— Дайте возможность скрывать показатели. Выключатель в виде чекбокса можно объединить с квадратом легенды;
— Добавляйте элементам диаграммы состояние при наведении, чтобы пользователю было легче фокусироваться;
— Продумайте, что делать с подписями, если значений будет слишком много. Если скрывать часть значений нельзя, можно занять диаграммой всю ширину экрана и при необходимости отображать скрол.

#data_visualization

Марина Яланска написала об аффордансах в интерфейсах.

— Аффорданс — свойство объекта, позволяющее использовать его определённым образом, то есть наглядная подсказка, как с ним взаимодействовать;
— По принципу работы они делятся на явные и скрытые. Последние можно обнаружить после совершения определённых действий. Пример: подсказки, отображающиеся при наведении курсора;
— По внешнему виду они могут быть графикой (сюда можно отнести иконки, кнопки, поля ввода и так далее), текстом, анимацией и паттернами;
— Графические аффордансы воспринимаются быстрее и запоминаются лучше, чем текст;
— Даже если предмет давно не используется, иконка с ним может встречаться в интерфейсах (например, дискета);
— Текст часто понятнее иконки, плюс, не всё можно показать графикой. Но чисто текстовый интерфейс выглядит перегруженным;
— Пример паттерна: кликабельный логотип, позволяющий перейти на главную страницу. Пример анимации: переливающаяся надпись Slide to Unlock из самого первого айфона;
— Негативные аффордансы показывают, что элемент интерфейса сейчас неактивен. Пример: заблокированные кнопки.

In English. #affordance #definition

В «Атвинте» написали о хорошем UX (с примерами).

— Опыт взаимодействия с технологичным продуктом может быть хорошим или плохим, но он зависит не только от дизайна интерфейса;
— Хороший интерфейс может стать преимуществом, но его одного недостаточно, нужны и другие ценности (например, размер каталога в онлайн-кинотеатре);
— Дизайнер отвечает за понятность структуры и навигации, UI, переходы и анимации. За производительность и скорость загрузки сервиса отвечают разработчики. За то, что продукт решает проблему пользователя, и за соответствие его социальному, культурному и демографическому контексту — аналитики. А скорость интернета, производительность устройства и настроение пользователя обычно не зависят от сотрудников сервиса;
— Есть законы восприятия и тому подобное, но нет универсальных законов дизайна, которые работают для любого интерфейса: и для мобильной игры, и для интернет-магазина, и для интранет-портала;
— Пользователю важен не дизайн, а получится ли у него решить задачу с помощью продукта. При его создании надо думать о ценности продукта, пользовательских задачах и том, как их эффективно решить, не раздувая издержки компании.

#principles

Лена Райан рассказала об отдельной версии сайта для слабовидящих.

— Доступность — это не только версии для слабовидящих. Есть люди с когнитивными нарушениями, тремором рук, ДЦП, без конечностей. Плюс, любой человек может столкнуться с ситуативными и временными ограничениями: одна рука занята, перелом;
— Доступность расширяет аудиторию продукта;
— Если при разработке реализовывать требования доступности сразу, объём работ вырастает всего на 5–7%. Если выносить эти работы на отдельный этап, возможно, придётся перевёрстывать уже сделанное;
— Пользователю проще ориентироваться, если навигация с клавиатуры соответствует естественному потоку документа. Не используйте положительный tabindex;
— Закон не обязывает создавать версию сайта для слабовидящих, если основная версия доступна (и в том числе есть тёмная тема);
— Специальные версии не всегда работают как надо: с одной только клавиатурой проблематично включить навигацию с клавиатуры на сайте Bershka; версия для слабовидящих сайта РЖД теряет акценты и разделение на блоки, чтобы что-то найти надо пользоваться экранной лупой и всё читать;
— Отдельная версия для слабовидящих — не универсальное решение, если там не будет части функций, вместо инклюзивности выйдет дискриминация. Плюс, это дополнительные затраты на вторую версию сайта.

#accessibility

Илья Бирман написал об обрезании текста.

— Обрезание длинного текста в случайном месте (например, для анонса) — неуважение к автору и тексту. Обрезание по определённому числу символов даже не позволяет получить ровный прямоугольник текста, так как ширина символов может отличаться в разы (iii — ЮЮЮ);
— Иногда это приводит к искажению текста и появлению нежелательного смысла. «Илон Маск начнёт продавать каменный анал…», «Чипсы со вкусом горя»;
— Число символов, в которое надо уложиться, стоит считать примерным ориентиром;
— Если текст немного длиннее, его можно не трогать;
— Если заметно длиннее — разделить на предложения и попытаться взять столько полных предложений, сколько влезет;
— Если в результате получилось слишком мало или предложение не влезло целиком — поискать другие признаки безопасных мест: точки с запятой, тире, запятые, скобки;
— Если ничего этого нет — ориентироваться на пробелы;
— Если и пробелов нет, тогда можно резать по символам;
— Если надо уложиться в определённый прямоугольник, можно наложить на последнюю строку градиент. Важно, чтобы он был достаточно большим — так не будет разрыва на конкретной букве.

#typography

Алёна Сарокина написала, зачем нужна интерфейсная анимация.

— Объяснить суть действия. Галочка в чекбоксе может появляться так же, как человек поставил бы её на бумаге;
— Показать структуру. Анимацией при переключении табов можно показать, что пользователь не переходит глубже в структуре приложения, а остаётся на том же уровне;
— Отразить какое-то временное состояние системы. Например, что стартовала загрузка файла;
— Подсказать жесты. Если гамбургерное меню выезжает слева, возможно, оно закроется свайпом влево;
— Облегчить работу мозга: ему не надо самостоятельно достраивать переходы между состояниями элементов интерфейса и экранами.

#animation

Маргарита Хохлова написала о тексте для окон подтверждения.

— Используйте окна подтверждения экономно, так как они прерывают движение по сценарию;
— Скорее всего, такое окно нужно, если событие не частотное, вызывает необратимые последствия, приводит к серьёзным изменениям в работе системы;
— Заголовок должен быть информативным, не выносите важное в подзаголовок. «Подтвердите действие» → «Восстановить письмо из черновиков?»;
— Убирайте неинформативные обороты вроде «Вы уверены…»;
— Формулируйте заголовок без отрицания. «Не применять ввод?» → «Удалить введённый текст?»;
— Предлагайте альтернативу подтверждаемому действию. Возможно, пользователь передумает отказываться от уведомлений, если узнает о возможности настроить их частоту;
— Согласуйте заголовок с кнопками. Если в заголовке речь об отключении, на кнопке пишите «Отключиться»;
— Текст «Ок» и «Отменить» на кнопках недостаточно конкретен, лучше писать о подтверждаемом действии. И лучше, если для действия обычного и такого же действия, но критичного и необратимого, формулировки будут отличаться: «Удалить» → «Всё равно удалить» (несмотря на перечисленные в подзаголовке последствия);
— Не манипулируйте, делайте акцентной кнопку подтверждения, а не отмены действия (Саша Савельева считает иначе).

#writing #modal

#докризисное #развитие_продукта #эксперименты
👛 Кошелек — приложение с 12 млн MAU, которое купил Тинькофф. Помогает избавиться от пластика, заведя карты в виртуальный кошелек. Зарабатывают с выпуска новых виртуальных карт для пользователей.

Задача — увеличить траффика в каталог, где выпускаются новые карты💳.
Проблема: пользователи открывают кошелек только на кассе магазина. Как в этой ситуации завлечь пользователя в каталог?

Решили начать с улучшения текущего сценария. При этом кардинально менять главную страшно, а добавить ничего не получится — экран уже перегружен.
➡️ Сделали новый экран из поля поиска 🔍(чтобы экспериментировать без привязки к легаси). Увеличили видимость поиска и по нажатию на него показывали последние открытые карты.
Это вырастило цифры поиска — 130% у новых 18% у существующих, — но пользователи все еще не открывают кошелек вне кассы магазина!

Решили рассказать про каталог нижним таббаром, что не угрожает основному сценарию. Но таббар — 3-4 месяца работы.
➡️ Как эксперимент, поставили фейк-таббар: по нажатию открывается обычное бургер-меню. Дичь, при этом в коридорах респонденты не замечали подвоха, и в приложении тоже все прошло как надо. Результаты:
🔸+7% к каталогу
🔸+5% к добавлению карт
🔹-5% у центра уведомлений

Со спокойной душой пошли делать настоящий таббар. Результаты:
🔸+73% к каталогу
🔸+20% к добавлению карт
🔸+5% к центру уведомлений

Кошелек открывают вне кассы! В каталог пришел трафик, но надо больше. Решили наконец менять главную, но опять — через улучшение основного сценария.
🗂 Пользователи всегда просили добавить возможность для организации карт. Вместо этого сделали саджест с подсказкой 6 самых подходящих. Остальные карты разместили в 2 колонки, чтобы быстрее скроллить, а посередине добавили блок каталога как «вот карточки, которых у тебя еще нет».
Оставили возможность переключиться на старый интерфейс, и раскатили на пользователей с 12+ картами и хотя бы месяцем накопленной статистики. Результаты:
🔸70% пользователей стали открывать через быстрый доступ карты
🔸+22% к выпуску из каталога (это уже выручка)
🔹<2% переключились обратно

👉Дальше решили передвинуть блок с рекомендациями по выпуску карт выше, в зону внимания пользователя. Боялись, поскольку на коридорках люди терялись, где их карты и что за рекомендации… Но получили всего 20 обращений в поддержку на 2 млн пользователей - успех! Трафик в каталог и выручка тоже растут.

📌Осталось еще 300 к пользователей, которые пользуются старой версией дизайна. Поддерживать две версии — дорого, так что все же отключили старую. Стали читать по 5 плохих отзывов в день и планируют изучать аудиторию, возможно что-то для них переделать (но это не точно).

🛣 Немного про будущее: еще пока работали над включение каталога на главную, приходили другие команды и просили также попасть туда со своими фичами. Переделывать каждый раз интерфейс дорого и сложно, как же быть?

Задумались, как может выглядеть кошелек будущего👛. Со стейкхолдеров собрали 150 идей, и новые и старые сценарии. Их разбили на 9 смысловых групп и сделали концепт нового будущего кошелька, где каждой группе было отведено свое место. Теперь можно каждый новый сценарий добавлять без переделки всего экрана. Это синхронизирует команды между собой и каждая из них теперь может двигаться к этому будущему.

Источник: видео, 20 минут без вопросов https://youtu.be/UjUADHi9NHg

Андрей Шапиро написал о линиях эволюции технических систем в применении к интерфейсам.

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

#thinking

Саадия Минхас написала о чекбоксах и переключателях.

— У чекбокса есть 3 состояния: выбран, не выбран, частично выбран (бывает у родительского чекбокса, у которого часть дочерних чекбоксов выбрана, а часть — нет);
— У переключателя 2 состояния: включено, выключено;
— При этом нажатие на переключатель — это одновременно и выбор опции и её включение или выключение. За включение или выключение опций, выбранных с помощью чекбоксов, обычно отвечает отдельный элемент управления (вроде кнопки сохранения);
— Используйте переключатель, если пользователь ожидает мгновенной реакции на свой выбор, результатом будет включение или выключение чего-либо, действие не нуждается в проверке или подтверждении;
— Используйте чекбоксы, если есть родительские и дочерние опции, которые можно выбирать произвольно;
— А также если надо выбрать между опциями «да» или «нет» (согласие пользователя с условиями предоставления услуг).

In English. #checkbox #toggle

Лиша Дай написала, как стать синьором-дизайнером.

— Наблюдайте за коллегами и учитесь у них. У них могут быть разные сильные стороны. Если вы единственный дизайнер, учитесь у коллег с другими специальностями;
— Не просто выполняйте поставленные задачи, а сначала думайте над тем, почему нужно сделать именно это, какой контекст, кто стейкхолдеры, как измерить успех и так далее;
— Анализируйте свои старые проекты: как вы могли бы их улучшить сейчас с текущими знаниями и навыками;
— Просите у коллег обратную связь и не воспринимайте в штыки негативные отзывы, чтобы видеть точки роста. Положительные отзывы помогут узнать ваши сильные стороны, а также будут приободрять в трудные моменты;
— Анализируйте прошедшие события и ситуации на работе каждый день, раз в месяц (с ближайшими коллегами), раз в полгода (с большим числом коллег). Обсуждайте, что сработало, что нет, ищите, что можно улучшить (в общем, ретроспектива).

In English. #career

Маскот Вольта благодарит за нестандартные чаевые.

Аарон Джеймс написал, как стать синьором-дизайнером с помощью карьерной лестницы.

— Ожидания от дизайнеров разного уровня в разных компаниях могут отличаться. У зрелых компаний они задокументированы и доступны. Чем конкретнее ожидания, тем проще составить карьерный план;
— Если карьерная лестница не описана, это не всегда плохо: можно лидировать и пропускать уровни, можно подготовить её описание для всей компании. Её могут не обозначать специально, чтобы не провоцировать конкуренцию, отказы от эффективной работы ради более высокой должности. Если лестницы нет, тесно работайте со своим менеджером;
— В разных компаниях выделяют разные уровни продуктовых дизайнеров. Но чаще всего это junior, middle, senior, lead, principal. На последние 2 уровня дизайнер переходит при необходимости и на ограниченное время в рамках конкретного проекта или компании;
— Требования к навыкам на конкретных уровнях помогают прояснить обязанности, ожидания и ценные для компании качества, оценить кандидатов, составить карьерный план;
— Нельзя быть сильным во всём;
— Ключевые различия между джуниором и синьором: масштабы проектов, радиус влияния (lead и principal влияют на всю компанию и индустрию в целом), способность разделять сигнал и шум в обратной связи, способность двигаться быстро и извлекать пользу из совершённых ошибок, уровень неопределённости в задачах, самостоятельность;
— Чтобы создать карьерный план, оцените свой текущий уровень (самостоятельно, 360° feedback), задайте практические цели, которые помогут прокачать навыки, необходимые для следующего уровня;
— Чтобы не перегрузить себя, лучше прокачивать навыки по очереди, начиная с самого значимого;
— Оценивайте прогресс каждые 3 месяца. Для повышения уровня может потребоваться год и более;
— Если застопорились, можно обновить свой план, найти новый проект, новую команду, новую компанию или сменить специальность.

In English. #career

Даниэль Виленчук написал о Net Promoter Score и ошибках при сборе этой метрики.

— NPS — индекс потребительской лояльности. Клиент отвечает на вопрос «Насколько вероятно, что вы посоветуете нашу компанию друзьям или коллегам?» оценкой от 0 до 10;
— Ответы с оценками от 7 до 8 отбрасывают, а из числа оставшихся позитивных оценок вычитают количество негативных (от 0 до 6);
— Формулировка вопроса важна. Лучше использовать классическую «How likely is it that you would recommend this company to a friend or colleague?» и её перевод, чтобы не манипулировать ответами или случайно не замерить какой-то другой показатель;
— Шкала оценок должна быть от 0 до 10 (не от 1 до 10 и не от 1 до 5). Не стоит менять цифры на графические элементы вроде смайликов, в них сложнее ориентироваться;
— Лучше располагать их в один ряд. Воспринимать 2 ряда сложнее, часть ответов будет случайной, что губительно на небольших выборках;
— Задавайте дополнительный открытый вопрос вроде «Расскажите, почему вы поставили нам такую оценку?». Здесь можно экспериментировать с призывом, так как стандартные вопросы людям уже надоели;
— Не концентрируйтесь на критиках. Пробуйте связаться и с теми, кто поставил средние и высокие оценки. В общении с ними тоже можно найти инсайты. Плюс, 20–30% нейтралов уходят к конкурентам в течение полугода, попробуйте их разговорить;
— Не стоит замерять отдельные участки взаимодействия клиента с компанией. Дайте ему «помариноваться» в ваших процессах. Хороший срок — 10 дней после покупки, начала использования, доставки и 30 дней после установки приложения. Но если продаёте услугу или впечатление, лучше спрашивать сразу, пока впечатления свежи;
— Оценку одного и того же пользователя стоит перезамерять со временем.

#metrics

Евгений Трифонов об интерфейсах для продвинутых пользователей.

— Продвинутые пользователи (power users) стремятся использовать инструменты максимально эффективно;
— Пользователей мобильных устройств стало больше десктопных, сервисы стали ориентироваться на них, что привело к ухудшению десктопного UX. Некоторые сервисы вообще существуют только в виде мобильных приложений;
— Перемещение данных в облака лишает контроля над ними: стриминг может удалить любой альбом, не даёт возможности выбрать подходящий проигрыватель;
— Не всеми сервисами можно управлять клавиатурой и с помощью горячих клавиш (даже просто переключаться между полями клавишей Tab не всегда получается);
— В некоторых случаях ресурсы на такие доработки есть, проблема в том, что об этом просто не подумали. То есть надо просто тестировать сервисы с участием продвинутых пользователей;
— В этой функциональности нет большой социальной пользы, но разработчики часто сами являются продвинутыми пользователями и понимают её ценность. Это может сподвигнуть их к внедрению улучшений силами разработчиков без больших вложений ресурсов.

#accessibility #power_user

Опубликованы видео с Дизайн-просмотра:

1. Леонид Фейгин, DDVB — Правильно ли поступать правильно

2. Олег Баринбойм, TutkovBudkov — Как тёмные времена сделали нас сплочённее

3. Евгений Яровой, Pragmatica — Новые студии дизайна: реформы или уныние

4. Максим Галеев, Газпромбанк — Как поменять отношение людей к дизайну

5. Елена Шанович, телеканал СТС — Видеть сердцем

6. Митя Осадчук — Нерешённые загадки дизайнеров и человечества

7. Сергей Гуров — Дизайн как точка зрения на всё

8. Миша Пименова, Mish — 10 советов самой себе в начале карьеры

9. Александра Королькова, Paratype — Буквы не то, чем кажутся

10. Вадим Гранич, онлайн-школа Granich — Осознанный дизайнер

11. Данила Шорох, Moscow City — Адаптация — путь к выживанию

12. Макс Авдеев, Max — Как продать на до**я

Эдвард Скотт написал о навигации по функциям личного кабинета.

— 81% интернет-магазинов, исследованных Baymard Institute, для навигации по функциями личного кабинета использует большое количество текстовых ссылок (в том числе разделённых на блоки);
— Такой объём текста пугает пользователей, не позволяет быстро находить нужные функции;
— Чтобы улучшить сканируемость страницы, каждый блок ссылок можно дополнить иконкой (Staples) или небольшой иллюстрацией (Microsoft). Это меняет пользовательское поведение: сначала они сканируют страницу в поисках подходящей иконки, а затем читают текстовую подпись, чтобы удостовериться, что это нужная им функция;
— Не стоит оставлять одни иконки без текстовых подписей, так как не все метафоры можно понять однозначно;
— Также не стоит совмещать на одной странице блоки с иконками и без (Amazon), так как пользователи будут игнорировать последние.

In English. #ecommerce #navigation