Ричард Янг написал об оценке затрат на взаимодействие.

— Затраты на взаимодействие — ментальные и физические усилия, прилагаемые для достижения цели;
— Чем больше сценариев охватывает продукт, тем сложнее его информационная архитектура и навигация;
— Уменьшайте затраты на взаимодействие в основных сценариях;
— Можно выделить красные маршруты (Red Route Analysis) — сценарии, которыми часто пользуется большинство пользователей. Заказ машины в Убере — красный маршрут, добавление способа оплаты — обычный;
— У всех систем есть свой уровень сложности. Хороший дизайн — когда большая часть сложности ложится на систему, а не на пользователя;
— Ментальные затраты на взаимодействие увеличиваются из-за сложной навигации, непонятных инструкций, непривычных паттернов взаимодействия;
— Важные компоненты ментальных затрат — нагрузка внимания и памяти. Внимание рассеивают всплывающие баннеры, визуальные эффекты и движения, не связанные с пользовательской задачей;
— Если айтрекинг показал множество саккад, не относящихся к текущей задаче, в интерфейсе могут быть отвлекающие факторы;
— Время принятия решения увеличивается вместе с количеством вариантов и сложностью выбора (закон Хика). Выделяйте наилучший для пользователя вариант;
— Пользователи с высокой мотивацией (благодаря маркетинговым усилиям или уникальности продукта) с большой вероятностью достигнут цели даже с высокими затратами на взаимодействие. Если продукт типовой и у конкурентов удобнее, клиенты купят у них.

https://deadsign.ru/ux/interaction-design-is-more-than-just-user-flows-and-clicks/

Роман Кирьяков рассказал о подготовке к тестированию посадочной страницы.

Тесты похожи на коридорные: исследователи узнают у респондентов, как они понимают продукт и как пользовались бы им в реальной жизни.

Программа тестирования помогает структурировать информацию, сохранять фокус тестирования, формировать правильные ожидания у заказчика исследования, получать релевантные данные.

Она включает блоки:

1. Проблемная ситуация — описание проблемы, которую хотят решить с помощью тестирования. Если сформулировать её неправильно, вся остальная программа будет некорректна. Пример: есть лендинг о страховке квартиры, конверсия на нём низкая, но мы не понимаем, в чём именно причина.

2. Цель — вытекает из проблемы. Например: понять, почему люди не оформляют страховку.

3. Задачи. Например:
— Понять, какой информации людям не хватает;
— С какими сложностями они сталкиваются при оформлении страховки;
— Как понимают информацию на странице.

4. Выборка — требования к респондентам. Когда в тестировании участвует только целевая аудитория, шансы получить полезную обратную связь возрастают.

5. Вопросы. С помощью правильных вопросов исследователь добывает информацию, которая помогает улучшить продукт. Если он задаёт наводящие или закрытые вопросы, то может получить бесполезную обратную связь. Примеры:
— Что видите?
— Что понимаете?
— Что делаете?
— Почему хотите застраховать квартиру?
— Как искали варианты? Какие рассматривали?
— Если рассматривали, то почему ещё не застраховали?

https://www.it-agency.ru/academy/landing-page-ux/

Роман Шамин написал, как дизайнеры могут облегчить жизнь фронтам.

— Создавайте дизайн-систему и стройте дизайн из ограниченного набора стилей, переиспользуемых компонентов и последовательных правил компоновки;
— Оформляйте изменения дизайн-системы как фичи;
— Разделяйте большие фичи на небольшие задачи, которые можно дизайнить, верстать и выкатывать по очереди;
— Уважайте мнение технической команды, объясняйте им свои дизайн-решения, утверждайте у них макеты;
— Если нарисованное трудно реализовать, обсуждайте с командой и ищите выход вместе;
— Все знания о фиче собирайте в одном месте (например, на большом артборде в Фигме), все идеи объясняйте текстом и графикой: показывайте стрелками флоу и так далее;
— Будьте в курсе технологий. Например, если приложение использует геолокацию, здорово понимать, что она может быть отключена на устройстве пользователя.

https://teletype.in/@romanshamin/what-frontend-want-from-design

Илья Бирман написал о бессмысленных действиях в интерфейсе.

В Файндере несколько лет назад появилась команда New Folder with Selection (⌃⌘N). Если выделить несколько файлов или папок и вызвать её, она создавала новую папку, перемещала в неё всё выделенное и давала назвать папку.

Когда эта функция появилась, она работала только если изначально было выделено хотя бы два файла. Если просто курсор стоит на файле, «завернуть» его в папку этой командой было нельзя. Видимо, программист решил, что группировать один файл «нет смысла». В более поздних версиях Макоса нелепое ограничение убрали.

Не надо запрещать пользователям бессмысленные действия, если сами по себе они безвредны.

— Можно не писать код этого возможно бессмысленного запрета;
— Запрета в лучшем случае никто не заметит, в худшем он будет мешать работать;
— Если люди совершают это бессмысленное действие, возможно, дизайнеры упустили какой-то сценарий.

https://ilyabirman.ru/meanwhile/all/meaningless-actions/

Михаил Озорнин поделился частью гайдлайна о передаче макетов разработчикам. Например:

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

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

Пустое состояние:
— Понятно, как выглядит пустое состояние всех блоков и элементов, когда в них нет данных;
— Уровень «Хорошо»: пустые состояния систематизированы, используются типовые решения.

http://mikeozornin.ru/blog/all/what-is-a-good-handoff/

Александра Вельянинова сделала для Райффайзенбанка методичку о тексте в интерфейсе. Отдельные интересные рекомендации:

— Без вранья. Формулируйте аккуратно и не обманывайте ожиданий пользователя даже в мелочах. «Нужен адрес, и мы найдём счета на оплату» → «Нужен адрес, чтобы поискать счета на оплату»;
— В объяснении ставьте действия в том порядке, в котором человек будет их выполнять. «Создайте шаблон, выбрав подходящую операцию из списка» → «Выберите операцию и создайте на её основе шаблон»;
— Очеловечивая текст, не переигрывайте. Когда в последний раз вы получали «Ах да» от друга в чате?
— Без лишних восторгов, особенно в неподходящем контексте. «Ура! Теперь штрафы будут приходить в приложение [Супер!]» → «Теперь штрафы будут приходить в приложение [Хорошо]»;
— Не оценивайте чувства пользователя. «Не волнуйтесь, сейчас разберёмся» → «Сейчас разберёмся, уже смотрю, что произошло»;
— Пишите гендерно нейтрально. «Я согласен с политикой обработки данных» → «Я соглашаюсь с политикой обработки данных»;
— Заголовки проще воспринимать в именительном падеже. «Какую карту хотите? Цифровую. Пластиковую» → «Какая карта подойдёт? Цифровая. Пластиковая»;
— Не проговаривайте текстом функции знакомых элементов. Плейсхолдер в поле поиска: «Поиск по названию или ИНН» → «Поставщик или ИНН».

https://www.figma.com/proto/0JyAj15IhSa3cnf4tl2vmr/Raiffeisen-Verbal-Guide?node-id=15825:39622&scaling=scale-down

Кто о чём, а Алан Купер — о персонах, а именно, почему этот инструмент работает не у всех.

— Он написал о персонах в книге «Психбольница в руках пациентов», которую адресовал менеджерам, а не дизайнерам;
— Он не писал её как практическое руководство;
— Персоны удалялись от изначальной идеи, опираясь на мнения людей, которые ничего в них не понимали;
— В компании Алана проводили полевые исследования, а затем создавали персоны, чтобы понимать и отображать цели, мотивацию и желаемые результаты реальных пользователей. И строго ограничивали количество персон ради фокуса;
— В Майкрософте персонами инженеры, запертые в башнях из слоновой кости, защищали придуманные ими функции. Персон у них были сотни — по одной для каждой функции;
— Двое дизайнеров из этой компании опубликовали о персонах влиятельную книгу, которая способствовала удалению от изначальной идеи;
— Привлекательность персон отчасти заключена в том, насколько легко создавать «персоны», не делая этого на самом деле;
— Иногда дизайнеры доходят до правильного понимания персон и пишут в своих блогах: «[Что-то, что не является персонами, но я буду называть это персонами] действительно ужасны. Но [персоны под каким-то новым названием] — намного лучше!»;
— Есть хорошие источники информации о персонах. Они написаны бывшими работниками компании Cooper.

https://www.uprock.ru/articles/v-zashchitu-person

Оливер Микингс поделился советами по дизайну лендингов. Отдельные не самые затасканные рекомендации:

— Фокусируйте лендинг на одной цели. Не предлагайте посетителям одновременно зарегистрироваться, скачать брошюру и заказать демо;
— Лендинги часто упоминают боль, которую призван снять рекламируемый продукт, но редко стараются её подчеркнуть. Старайтесь взволновать читателя эмоциональным языком и яркими образами, рассказывая о решаемой проблеме;
— Добавьте деталей в призыв к действию. Например, предлагая зарегистрироваться, напишите, сколько времени это займёт;
— Посетителям, которые собираются покинуть страницу, отображайте опрос о причине ухода;
— Ориентируйте лендинг на одну персону, то есть на максимально узкую аудиторию;
— Старайтесь ответить на все вопросы, которые могут возникнуть у посетителя. В модуле с ответами на частые вопросы разместите ответы, для которых не нашлось других модулей.

https://habr.com/ru/company/timeweb/blog/557658/

Мэтт Оуэнс из бруклинской студии Athletics (с очень знакомым лого) рассказал, что понял за 30 лет дизайна.

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

https://ux.pub/moi-9-printsipov-dizayna-na-osnove-30-letnego-opyta-v-industrii/

Юля Кондратьева написала, какие реферальные программы работают лучше: с бонусом для себя или для друга.

Тестировали предложение, в котором пользователь и приглашённый друг получали 70% скидку на следующий заказ. 1-й группе показывали текст с акцентом на скидку для себя, 2-й — для себя и друга, 3-й — для друга. У контрольной группы текст был без акцента.

Альтруистическая формулировка (для друга):
— Повысила вероятность отправки реферальной ссылки друзьям на 60% по сравнению с контрольной группой;
— Увеличивала вероятность покупки друга. Возможно, в этом случае пользователи лучше выбирали, кому отправить приглашение.

Люди, которые видят альтруистическую формулировку:
— Меньше испытывают чувство вины за спам;
— Больше уверены, что у них есть друзья, которым предложение может понравиться;
— Менее склонны воспользоваться полученной скидкой. Возможно, они отправляли приглашения в большей степени для того, чтобы оказать услугу другим.

https://habr.com/ru/post/558584/

Кристина Шеровай проиллюстрировала 10 эвристик Якоба Нильсена интерфейсами Revolut. Например:

5. Предотвращение ошибок. Чтобы снизить их количество из-за плохой фотографии паспорта, на экране загрузки фото есть подсказка: «Убедитесь, что на фото паспорт, текст можно прочитать, он не размыт и не бликует».

6. Распознавание вместо необходимости вспоминать. Revolut отображает баланс конкретного счёта на экране отправки денег, его не надо помнить. В процессе перевода не надо запоминать отправляемую сумму (или сканировать экран в её поисках) — она отображается прямо на кнопке, запускающей перевод.

Полезно иногда вспоминать об этих эвристиках.

#heuristic

Артур Харитонов написал о триггерах рассылки для интернет-магазинов.

1. Если пользователь бросил корзину, потому что отвлёкся, его может вернуть письмо с напоминанием о корзине. Если он ушёл, потому что сомневается в выборе, эффективнее письмо с подборкой альтернативных товаров. То же самое с товарами, оставшимися в избранном;
2. Если пользователь просматривал товары и покинул сайт, можно прислать персональную подборку из истории просмотров. По таким триггерам 60−70% открытий и 10−12% кликов;
3. Если пользователь заказал товары, которые нужны постоянно, например, кофейные зёрна, со временем можно предложить ему скидку на новую упаковку.

https://vc.ru/marketing/245528

Максим Шток написал вводную статью об AR-дизайне со множеством ссылок для дальнейшего изучения.

AR-контент делают:
— Для смартфонов: маски, виртуальная одежда и обувь, навигационные указатели, игры;
— Носимых устройств вроде Hololens и Magic Leap: на текущем этапе развития в основном для узких задач корпоративных клиентов;
— Не носимых устройств: проекции на лобовое стекло автомобиля, вертолёта или корабля.

Различают разные масштабы применения:
— Table scale: объекты на столе, виртуальные рабочие пространства и виджеты;
— Room scale: объекты в комнате, например, Studio Mode в приложении Ikea Place;
— World scale: объекты в окружающей среде вроде уличной навигации и стрит-арта.

Профессия разработчика для AR только зарождается, стандартов UX/UI ещё нет, надо много исследовать: сложность восприятия разной информации, в том числе под разными углами зрения. Быстрее всего адаптируются UX/UI-, моушн-, гейм-дизайнеры и специалисты по 3D-моделированию.

Рынок AR-гарнитур растёт на 73,8% в год.

В проекции на прозрачное стекло не может быть чёрного цвета, так как им нельзя светить. Если вы такое видите в ролике, это графика, а не реальный продукт.

https://designpub.ru/f62056a8108e

Александр Радал написал о способах снизить когнитивную нагрузку пользователей.

— Уменьшайте количество вариантов, из которых надо выбирать. Так не только проще выбрать, но и выбранный вариант будет радовать пользователя больше (он меньше сомневается, что не проглядел вариант получше);
— Не стоит уменьшать количество пунктов меню до ±7 просто ради числа. Большой список лучше, чем поиски нужного пункта во вложенных меню (с неконкретными названиями типа «Прочее»);
— Если пользователь ошибся, дайте простой способ вернуться к предыдущему состоянию или исправить ошибки;
— Управляйте пользовательским вниманием визуальными подсказками вроде стрелок и изображений людей, смотрящих на важные элементы страницы;
— Используйте знакомые шаблоны и условности: единая цветовая палитра во всём продукте, знакомые паттерны взаимодействия (например, хлебные крошки), знакомые иконки и символы (например, корзина для удаления файлов);
— Общайтесь с будущими пользователями продукта;
— Раскрывайте информацию постепенно: сначала важную, затем второстепенную.

#cognitive_load

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

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

https://vc.ru/design/251212

Пейдж Лаубхаймер из Nielsen Norman Group написал о левосторонних вертикальных меню на десктопных версиях сайтов.

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

Недостатки:
— Занимает больше места, сложно использовать на небольших экранах;
— Не все пункты могут быть видны на первом экране.

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

https://www.uprock.ru/articles/levostoronnyaya-vertikalnaya-navigaciya-v-desktopnoy-versii-sayta-masshtabiruemost-otzyvchivost-i-prostota-prosmotra

Дэвид Холл написал об интерфейсном тексте. Например:

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

Активный и пассивный залоги:
— Старайтесь использовать активный залог. Он описывает, как человек или объект что-то делает. «Сергей танцует»;
— Используйте его, когда хотите подчеркнуть, кто или что делает какие-то действия. «Такси подъехало»;
— Пассивный залог используйте в тех редких случаях, когда действие или состояние важнее объекта, к которому оно относится. «Корзина переполнена, задача выполнена».

https://vk.com/@sobakapavlovaltd-interfeisnye-teksty-kak-dizaineru-nachat-pisat-gramotnee

Андрей Шапиро рассказал о журнале проектировщика.

— Инструмент помогает структурировать проектирование, не размывать фокус и получить на выходе подробное описание проекта;
— Проектировщик может отвлекаться от цели и забывать важную информацию, переставать следить за проектом в целом и его границами;
— Системы становятся настолько сложными, что их невозможно моделировать в голове. Обычно разработкой занимаются команды специалистов;
— Решение сложной задачи похоже на бесконечный цикл попыток построить и проверить модель, сформировать другую модель, чтобы скомпрометировать предыдущую, а потом заново переосмыслить исходную задачу;
— Надо записывать в единый реестр всё, что появляется в ходе размышления. Но записи не должны быть быть хронологическими;
— Этапы работы с журналом: 1) Запись новых мыслей, 2) Формулировка и категоризация, 3) Проектирование и проверка решений, 4) Перенос знаний в хранилище и чистка журнала;
— Вести журнал можно в программах, позволяющих группировать записи с помощью разнообразных иерархий: раскрывающиеся списки иерархий, дерево страниц или списков. Notion подойдёт;
— О категориях журнала важно договориться в начале проекта. Возможные варианты: 1) Ситуация, сценарий, 2) Проблема, нежелательный эффект, 3) Задача, 4) Идея, 5) Противоречие, 6) Критерий готовности / успешности, 7) Договоренность, 8) Цель.

https://xraizor.medium.com/c785d752b9ec

Евгений Честнов написал о своём опыте дизайна систем диспетчеризации.

Одно дело показать 3д-графикой насосы, клапаны, фильтры и заслонки, другое дело — сложное технологическое оборудование. Найти подходящие картинки ультрафиолетовых ламп и фильтров очистки крайне сложно, не говоря уже о флотаторах, жироловках и обезвоживателях. Поэтому от 3д со временем отказались.

В интерфейсе читаемые и редактируемые переменные визуально не отличались. Чтобы понять, это установка или индикация значения, надо было нажать на неё и посмотреть, выскочит ли экранная клавиатура.

Чтобы показать информацию о теплоснабжении (работа насоса, клапана, температура обратной воды), нужно было рисовать целый узел с трубами, насосом, перемычками и прочим, что занимало много места и несло мало информации. Теперь вся информация находится в карточке «Нагрев». Если появится система с дополнительным увлажнением или ступенью нагрева, можно просто добавить новую карточку с нужной информацией. При этом интерфейс будет выглядеть преемственно на разных устройствах и разрешениях.

https://habr.com/ru/post/560046/

Вадим Мазин поделился рекомендациями для мобильных версий интернет-магазинов.

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

https://surf.ru/5-pravil-khoroshiegho-mobilnogho-maghazina/