Сеара Кроушоу написала о перетаскивании: первая, вторая часть перевода.

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

In English. #drag_and_drop

20 самых популярных постов UX Notes в 2022 году в Телеграме.

Перед прошлым Новым годом я включил реакции, и теперь могу составить топ по обратной связи от читателей в Телеграме. Будет интересно потом сравнить его с аналогичным топом в ВК. Указанное количество лайков = лайки минус дизлайки.

1. Сергей Шандарин написал о поиске работы дизайнером за рубежом (после 24 февраля). 52 лайка

2. Иван Звяхин поделился чеклистом для самостоятельной проверки интерфейса. 52 лайка

3. В Heads and Hands написали о приоритизации фич по модели Кано. 46 лайков

4. Маргарита Романова написала о поиске работы продуктовым дизайнером в Европе. 43 лайка

5. Брайан Миллар написал об экстремальных пользователях. 40 лайков

6. Читатели рассказали в комментариях о своих телеграм-каналах. 39 лайков

7. Эдвард Скотт написал о хлебных крошках в мобильных версиях интернет-магазинов. 39 лайков

8. Игорь Штанг написал о современной русской пунктуации на примере упаковки умной розетки Яндекса. 38 лайков

9. В Purrweb написали об адаптации интерфейса для стран Ближнего Востока. 38 лайков

10. Илья Бирман написал о кнопке «Подробнее» в карточках. 38 лайков

11. Ксения Беляева написала о дизайн-ревью, когда дизайнер проверяет, как разработчик воплотил его дизайн. 37 лайков

12. Энтони Ценг написал, на что можно заменить большое меню, состоящее из нескольких колонок. 37 лайков

13. В «Собаке Павловой» написали о специфике проектирования медицинских интерфейсов. 36 лайков

14. Чем отличаются униширинные и моноширинные шрифты. 35 лайков

15. Игорь Штанг написал, что делать с текстом в скобках (например). 35 лайков

16. Станислав Хрусталёв написал о лучших практиках работы с корзиной. 34 лайка

17. Андрей Насонов написал о модальных окнах. 34 лайка

18. Наталья Стурза написала о чек-листе проектирования, который помогает не упускать детали, создавая сложные продукты. 33 лайка

19. Эдвард Скотт написал о частых ошибках в дизайне интернет-магазинов одежды. 33 лайка

20. Барт Гиссенс написал, почему курсор в операционных системах наклонён. 33 лайка

А вот 20 самых популярных постов, если считать по лайкам в ВК.

Только 5 статей попали и в вкшный и в телеграмный топ:
— Чеклист для самостоятельной проверки интерфейса Ивана Звяхина;
— Heads and Hands о приоритизации фич по модели Кано;
— Ксения Беляева о дизайн-ревью;
— «Собака Павлова» о специфике проектирования медицинских интерфейсов;
— Чеклист проектирования сложных продуктов Натальи Стурза.

2 автора оказались в обоих топах, но с разными материалами:
— Илья Бирман а) о дизайн-системах, б) кнопке «Подробнее» в карточках;
— Энтони Ценг а) об адаптивных таблицах, б) замене большого меню.

А Игорь Штанг оказался единственным автором с двумя материалами в телеграмном топе:
— О современной русской пунктуации;
— Что делать с текстом в скобках.

Интересный феномен, когда кто-то прилагает дополнительные усилия, чтобы сделать хуже.

Например, в телевизоре миллион способов «обработать» (ухудшить) изображение, хотя все, что от него требуется — просто показать цифровой сигнал ровно в том виде, в котором он поступает на порт. Все, лучше уже не сделаешь.

Или Твиттер, они пыжились, придумывали алгоритм «умного» кропа изображения. А в итоге лучший кроп — это не кропать картинку вообще. Если я прикладываю изображение, наверное, я хочу, чтобы его увидели целиком, а не какую-то часть? Если бы мне нужен был кроп, я бы кропнул.

«Алгоритмические» ленты в ту же степь. Лучшая алгоритмическая лента — обратная сортировка по дате. Если бы мне был не интересен какой-то контент, я бы от него отписался, не? А если я подписался, значит я хочу его видеть, епт.

Иногда, чтобы сделать хорошо, достаточно просто ничего не делать.

Андрей Маркелов написал о линиях в дизайне графиков.

— Важно правильно выбрать толщину линии. Толщина в 1,3 пикселя даёт лёгкую воздушность. Стоит добавить скругление изломов;
— Если отображаются 2 графика, для облегчения восприятия к первому добавляют градиент: 15% прозрачность в верхней точке и 0% у горизонтальной оси;
— Линиям добавляют обводку, равную толщине линии, чтобы избежать шума на стыках;
— Сканер позволяет узнать значение параметра в любой точке графика. Это вертикальная линия, накладывающаяся поверх графика и следующая за курсором. В месте пересечения с графиком ставится точка и отображается значение параметра. Под сканером отображается дата (или то, что находится на горизонтальной оси). Сканер хорошо работает для нескольких графиков;
— В финансовых системах используются индикаторы — миниграфики под основным графиком. Например, столбчатая диаграмма, показывающая спред или объём торгов, или график RSI;
— Японские свечи — особая столбчатая диаграмма. Прямоугольник показывает изменение цены (её значение при открытии и закрытии торгового дня), а линия показывает минимальное и максимальное значение, которого достигала цена в течение дня.

#data_visualization

Александра Савельева написала об обновлении устаревших таблиц в большом продукте.

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

#table #process

Олег Королев написал о количественных исследованиях с помощью опросов.

— Их можно разделить на разовые (статистическая проверка гипотез) и регулярные (отслеживание динамики оценки);
— Регулярные: NPS, CSAT, CSI (помогает понять, насколько клиентам важны характеристики используемого продукта), CES (насколько сложно было взаимодействовать с компанией при решении своей задачи);
— Опросы наиболее эффективны на этапе исследования, тестирования и сбора обратной связи после разработки;
— С ними нельзя выявить глубинные мотивы и проверить сложные гипотезы и сценарии. Опросы не будут 100% истиной, так как люди лгут, забывают о своём опыте и часто только предполагают, как могли бы поступить;
— Чтобы провести разовый опрос, надо обозначить проблему и определить цели. На этапе исследования: проверить гипотезы о целевой аудитории, узнать её характеристики (в том числе, какими конкурирующими продуктами пользуются), отношение к услуге;
— Для расчёта размера выборки есть калькуляторы. По опыту, почти никогда не нужно больше 400 ответов на сегмент;
— От целевой аудитории зависит канал общения, а от него — формат вопросов. В почте допустимы длинные заходы, 5–7 вопросов (в том числе открытые), пояснения в скобках. В чате лучше использовать шкалы и вопросы с вариантами ответов;
— Закрытые вопросы лучше задавать в начале опроса. Они помогают быстро сегментировать респондентов. Но не спрашивайте, условно, про семейное положение, если эта информация не повлияет на продукт;
— Вопросы могут отличаться для разных категорий клиентов. Пользователей, которые зарегистрировались, но не используют продукт, можно спросить о целях, актуальности продукта для них и почему они его не используют;
— И для разных ситуаций. При раннем оттоке можно спросить о самой большой проблеме при взаимодействии, что компания может сделать, чтобы исправить ситуацию;
— При анализе ответов можно посмотреть сочетание ответов на несколько вопросов, чтобы понять зависимость одних ответов от других;
— Если вы можете узнать что-то о клиентах из аналитики или CRM, не спрашивайте об этом в опросе.

#research #survey

Маргарита Романова показала, как без больших трудозатрат повысить интерактивность прототипов в Фигме.

— Выделение строки таблицы, отображение раскрывающегося списка действий со строкой, изменение статуса строки — с помощью интерактивных компонентов;
— Для раскрывающегося списка настройка Absolute position позволяет игнорировать Auto layout компонента, в котором он находится;
— Для Auto layout таблицы настройте Canvas stacking: First on top. Так верхние строки расположатся в слоях выше, и нижние строки не будут перекрывать раскрывающиеся списки действий;
— Отображение в таблице большого количества тултипов;
— Component properties позволяет работать с текстом, не переходя на конкретный слой с текстом. Функция Expose properties from Nested instances позволяет редактировать текст тултипа прямо в свойствах инстанса родительского компонента;
— Чтобы редактировать текст тултипов, которые отображаются с помощью интерактивного компонента, для состояния компонента без тултипа надо добавить тултип с нулевой прозрачностью.

#figma #prototype #table

Кирилл Улитин написал о цвете в интерфейсе: о контрасте и конфликте разных информационных слоёв цвета.

— Цветовые пространства RGB и производные от него HSB и HSL не адаптированы для человеческого восприятия. Изменение оттенка даёт цвета, неравномерные по контрасту. Цветовые модели LCH и HSLuv призваны это исправить;
— Контраст зависит от способа воспроизведения: на электронно-лучевых экранах контрастнее жёлтый на чёрном, на светодиодных — чёрный на белом;
— Алгоритм расчёта контраста в WCAG 2.1 иногда ошибается. В новую версию стандарта доступности вошёл алгоритм APCA. Можно использовать инструменты Huetone и Accessible Palette;
— Алгоритмы проверяют цвета в идеальных условиях и не учитывают пользовательский контекст: тип матрицы экрана, яркость, режимы вроде Night Shift или корректирующие очки;
— Цвет может обеспечивать узнаваемость бренда;
— Apple в руководстве по интерфейсному дизайну говорит о том, что конфликт разных информационных слоёв цвета нежелателен: красное сообщение о критической проблеме будет менее эффективным, если красный используется в приложении для некритичных ситуаций;
— При этом в новой версии macOS Big Sur разработчикам дана возможность настраивать основной цвет интерфейса приложения;
— Когда цвет бренда (например, красный) совпадает со статусными цветами в интерфейсе (сообщения об ошибках) надо вводить дополнительный цвет для элементов интерфейса, отличающийся от брендового (например, Microsoft Office 365), или добиваться цветовой разницы от 30 до 40 единиц (например, МойОфис).

#color #accessibility

Фейфей Лиу написала о переводе пользовательского контента.

— Если продуктом пользуются люди из разных стран и пользовательский контент важен (например, это могут быть отзывы), дайте пользователям возможность перевода всех или отдельных записей или заранее переводите весь контент;
— Если отзывов мало, пригодится кнопка перевода отдельного отзыва, чтобы дополнить их мнениями иностранных покупателей (Etsy);
— Не отображайте кнопку перевода, если язык отзыва совпадает с языком пользователя;
— Если преобладают отзывы от иностранцев, пригодится кнопка «Перевести все», чтобы не переводить каждый отдельный отзыв (Amazon). Особенно актуально для развлекательного контента, когда пользователям проще уйти на другой ресурс, чем переводить вручную или прокручивать недоступный контент;
— В таком случае можно переводить контент заранее и отображать отметку о переводе и кнопку для просмотра оригинального текста;
— Стоит учесть, что сервисы для такого автоматического перевода не бесплатны;
— Если отзывов на разных языках достаточно много, дайте возможность отфильтровать их по языку (Booking, Weverse).

In English. #localization #ecommerce

Александр Аникеев написал о позициях восприятия.

— Позиция восприятия — положение воспринимающего человека относительно того, что он воспринимает. Например, травмирующий опыт люди часто описывают отстранённо, с позиции наблюдателя;
— Есть 3 основных и 2 дополнительных позиции;
— 1. Человек смотрит на всё собственным взглядом и ассоциирует всё со своим внутренним миром (ценностями и принципами). Например, дизайнер ищет решения, набрасывает варианты и генерирует гипотезы, руководствуясь своим экспертным мнением. Хорошо, когда эти ценности и принципы есть;
— 2. Человек ставит себя на место другого. Позиция тесно связана с этапом проведения исследований, интервью. Прокачивайте эмпатию;
— 3. Полное эмоциональное отстранение от процесса, в который человек вовлечён. Позволяет оценивать происходящее максимально объективно. Полезно при проведении пользовательского тестирования;
— 4. Взгляд на что-либо с точки зрения какой-либо системы. При проектировании помогает выявлять требования и ограничения: технические, законодательные, этические, бизнесовые и так далее. Узнавайте подробности о том, что связано с продуктом и влияет на него;
— 5. Восприятие с точки зрения пользы и ценности для окружающих. Влияет ли происходящее на жизнь людей? Ответ на этот вопрос дизайнеру дают продуктовые метрики (способность их формировать и отслеживать, формулировать продуктовые гипотезы).

#psychology

Алина Ермакова написала, что делать, когда от команды осталась половина.

— «Когда ты смотришь на свою команду шире, чем на отдел в компании, отпускать становится проще»;
— Это повод пересмотреть процессы, от чего-то отказаться, перераспределить нагрузку;
— Попросите руководителей оценить значимость каждого проекта. Оцените планы по самым важным проектам и вложитесь в критичные задачи;
— Сверьтесь с приоритетами компании на год: создавать инновации, удерживать и повышать качество, оптимизировать ресурсы? Это поможет понять, какие задачи можно брать в работу;
— Оставьте место концептам: новым продуктам и процессам. Если заниматься только операционными задачами, можно превратиться в завод, из которого рано или поздно захочется сбежать;
— Обучайте людей вокруг, чтобы они помогали решать ваши задачи. Например, чтобы повысить уровень запросов на исследования, обработки полученных данных;
— «Только честно прожив опыт отпускания несколько раз, вы научитесь перезапуску команды и процессов».

#management

Портфолио, часть 1. Общие советы

При отклике на вакансию вы посылаете три артефакта, по которым вас будут судить: портфолио, CV и профиль Linkedin. Все они должны рассказывать одну историю: количество лет опыта, компании в которых работали, основные проекты, набор скилов и так далее. Напишу отдельно о каждом из них, начну с портфолио.

Рассказ о портфолио будет в четырёх частях. Сегодня первая часть — общие советы.


Где делать

Где удобнее, там и делайте: тильда, ноушн, личный сайт, дизайнер на фрилансе. Главное чтобы портфолио было доступно онлайн и на него можно было легко сослаться. Хороший сайт производит впечатление, но главное чтобы портфолио хорошо рассказывало о вас — поэтому где можете, там и делайте. Задача — чтобы портфолио было доступно максимально быстро.

Первое портфолио я сделал в Ноушене и с ним меня позвали на несколько собесов. Моя подруга получила оффер от нидерландской компании с портфолио также в ноушене. А когда Ноушн с портфолио уже работал, я постепенно собрал сайт и переехал на aakaravaev.com.


Мобильная версия

Смартфоны есть у всех и ваше портфолио будут смотреть с них тоже. Важно, чтобы на мобилке портфолио выглядело хорошо. Ноушен мобайлфрендли из коробки. Остальные конструкторы сайтов наверное тоже (не проверял). Моё портфолио собрано на Бутстрапе и про мобилки знает. Яндекс.метрика на моём сайте показывает треть заходов с мобилки. Это огромное число и оставлять без внимания мобильную версию не нужно.


Проверьте, чтобы сайт в принципе был доступен

С отдельным доменом могут быть проблемы. Я сначала жил на российском хостинге и из-за рубежа он не был доступен. Я написал в поддержку и меня перевели на другой айпи. Потом были проблемы с доступностью из-за отсутствия SSL. Починил и это. Так что проверяйте доступность. Попросите друзей в разных странах открыть ваш сайт, попробуйте из России зайти на сайт под ВПН.


Английский язык

Если вы ищете работу на международном рынке, то все тексты у вас должны быть только на английском. Мне было сложно писать на английском сразу большие тексты. Поэтому я писал на русском и потом переводил с помощью Deepl. Когда портфолио будет готово, обязательно проверьте его на ошибки. Можно воспользоваться Граммарли или отправить кому-нибудь на вычитку.


Упражнение перед созданием портфолио

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

Я искал на Линкедине — вбил в поиске product designer, выбирал в настройках разные страны и открывал подряд сайты с портфолио со страниц дизайнеров.

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

Не открывайте за день слишком много страниц в Линкедине. Он чувствительный, может вас заблокировать несколько часов за подозрительную по его мнению деятельность.

Владислава Епифанова написала о настройке каналов сбора обратной связи от пользователей.

— ОС помогает узнавать о пользовательских проблемах и быстро исправлять недостатки и находить идеи для улучшения продукта;
— Один из каналов — опросы в сервисе;
— Полезными оказались точечные опросы после релизов для определённых сценариев. Когда задача переходит в разработку, на встрече с проектировщиком и аналитиком можно узнать, какие есть сомнения, что хотелось бы узнать о пользователях или сценарии, и решить, нужен ли опрос, выбрать место для размещения в сценарии и так далее. Опрос позволяет узнать о недовольстве и быстро исправить замечания;
— В техподдержку приходит много ОС, поэтому работу с ней надо автоматизировать. Полезные отчёты: 1) Топ знаний по количеству обращений за месяц и их общее количество; 2) Общая сводка по всем знаниям;
— Важны аномалии в конкретном месяце и динамика знаний, попадающих в топ-5 обращений. Их можно сопоставлять с релизами. Из этого вырастают задачи на исследования;
— Комментарии специалистов техподдержки были расплывчатыми, тяжело было понимать проблемы. Добавили обязательное поле «Описание проблемы» для четырёх знаний, данные которых больше всего интересовали;
— Также, чтобы конкретизировать ОС, пришлось доработать анкету, которую заполняли в отделе активации (работают с теми, кто недоволен сервисом или купил, но не пользуется) при общении с клиентами;
— ОС от отдела продаж решили добавлять в виде инцидентов, с которыми работают специалисты техподдержки. Оттуда она попадает в беклог или напрямую команде (если доработка срочная);
— При этом описали критерии, которые обязательно надо указывать: данные клиента и чек за год, описание задачи или проблемы, как сейчас справляется с проблемой, как часто с ней сталкивается и так далее. Что-то может указать специалист по продажам, что-то — техподдержки;
— Этот канал обратной связи сейчас один из самых эффективных;
— Лучше не браться за всё разом, а идти поэтапно;
— Пробуйте разные каналы ОС для своего продукта. Универсальных решений нет.

#research #feedback

Екатерина Бессчётнова написала о подготовке прототипа для пользовательского тестирования.

— Прототип строится вокруг сценария тестирования — вопросов и заданий, предлагаемых респондентам;
— Задания следуют из гипотез. Гипотеза: при подборе товара людям неудобно использовать фильтр по цене. Задания: подберите товар Х удобным способом; подберите товар Х не дороже 10 рублей;
— Продумайте точки входа в тестируемый сценарий, чтобы он не начинался для пользователя внезапно;
— Отобразите все граничные случаи, с которыми пользователь может столкнуться, например, сообщение об ошибке, если заполнены не все поля. Страницу с 404-й ошибкой добавлять не надо;
— Добавьте максимум путей решения задачи, чтобы увидеть, куда пользователи на самом деле пойдут, и сравнить эффективность главного и второстепенного пути;
— Добавьте ошибочные пути, чтобы не было гарантии, что все респонденты выполнят задания. Так можно узнать, когда они заметят ошибку и как будут её исправлять. Активны должны быть не все развилки, а только вызывающие сомнения;
— Проработайте не только линейный путь вперёд по сценарию, но и способы вернуться назад;
— Чем ближе прототип к финальному продукту и реалистичнее взаимодействие с элементами интерфейса, тем лучше: визуальные акценты, реалистичный текст и релевантный контент, соответствие тону голоса и так далее;
— Если пользователи должны вводить данные, поля должны быть активны и не заполнены. Если это не прототип в Axure, поля можно заполнять по нажатию. Проверьте, что контент адекватен выполняемому заданию;
— Скройте отображение кликабельных областей и, насколько возможно, служебный интерфейс прототипа;
— Некликабельные элементы, с которыми предположительно могут взаимодействовать респонденты, должны реагировать на наведение курсора и, например, приводить к изменению курсора;
— Учитывайте разрешение устройства, на котором будет проходить тестирование;
— Перед тестированием на респондентах, проверьте прототип внутри команды.

#prototype #user_testing

Анна Дегтева написала о проектировании голосового помощника.

— 2 типа запросов: сервисный и поболтать. Важно их не перепутать: представьте, вы хотите включить свет, а голосовой помощник начинает шутить;
— Если она вас не понял, задача сводится к «поболтать» — сгладить коммуникативный провал и рассказать, как избежать его в будущем;
— В 1950-м Алан Тьюринг предположил, что в 2000-м компьютер сможет 5 минут выдавать себя за человека в разговоре с 30% респондентов;
— Это смог чатбот Eugene Goostman, у которого была удачно выбранная личность: 12-летний мальчик из Одессы. Когда диалог на английском, иностранец и ребёнок может ошибаться, чего-то не знать и не понимать;
— Избежать ошибок нельзя, но можно сделать так, чтобы пользователи чаще их прощали;
— Имитация некоторой свободы воли превращает диалогового агента в личность: «Я с ней стал заигрывать, а она меня послала!»;
— Чтобы человек поверил в имитацию связного диалога, нужны: раппорт, эмоциональная поддержка («Ты великолепен!»), совместная деятельность (вербальные игры);
— Раппорт — ощущение, что вы на одной волне. Можно показать, что вы принадлежите одной культуре: читали одни книжки и так далее;
— Как рассказать о характере голосового помощника, когда никто не спрашивает? Обычно легенду зашивают в группу вопросов «Расскажи о себе» (сколько тебе лет, что любишь), но люди редко задают такие вопросы. Характер можно раскрыть при обработке непонимания, агрессии и троллинга, при эмоциональной поддержке;
— Не думайте, что интуитивно понимаете, что такое живая беседа. Поможет социолингвистика, антропология, психология общения;
— Вечерняя фраза «Уже так поздно, ляг, поспи!» от голосового устройства для взрослого — проявление заботы, для ребёнка — повод для обиды;
— При тестировании на детях учтите, что они думают дольше, чем вы заложили на ожидание ответа;
— Хорошо показал себя визуальный сигнал о состоянии системы: устройство ждёт ответа, обрабатывает запрос, что-то пошло не так. Дети за 15 минут научились эти сигналы учитывать: «Нет-нет, сейчас он слушает»;
— Тестировать диалоги лучше в голосовом, а не текстовом режиме, так как время ожидания становится критически важным, и его надо подгонять.

#voice #user_testing

В ITpelag написали для начинающих о полях ввода и формах.

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

#input #form

Ким Салазар написала о возможности выбрать модель при покупке одежды и косметики.

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

In English. #ecommerce