Том Кенни написал, чего не стоит делать, визуально упрощая интерфейс.

— Прятать меню за иконкой, когда в этом нет необходимости. Это сокращает использование меню, повышает время выполнения и воспринимаемую сложность задачи. Сайты The Guardian и BBC даже на мобильных устройствах в дополнение к иконке меню показывают популярные разделы;
— Прятать поиск за иконкой. Поле поиска заметнее иконки. Smashing Magazine увеличил количество поисковых запросов на 80%, заменив иконку на поле;
— Убирать подписи к иконкам. Согласно исследованию UserTesting, только 60% пользователей правильно интерпретируют иконки без подписей, и только 34%, если это уникальные иконки;
— Использовать раскрывающиеся списки, когда вариантов для выбора менее 5;
— Показывать элементы управления только в ответ на определённые жесты без каких-либо подсказок пользователю;
— Располагать подписи к полям в плейсхолдерах и скрывать их после заполнения полей. Лучше использовать плавающую подпись (Floating Label);
— Отображать шкалу только после начала взаимодействия со связанным с ней ползунком. Пользователь не видит доступные параметры и не знает заранее, куда предстоить переместить этот ползунок.

https://ux.pub/lozhnaya-prostota-v-ui-dizayne-prosche-ne-vsegda-znachit-luchshe/

Лиза Шарлотта Рост написала о визуализации данных для дальтоников.

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

https://deadsign.ru/grafika/what-to-consider-when-visualizing-data-for-colorblind-readers/

Станислав Хрусталёв написал об ошибках при создании Customer Journey Map.

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

В статье есть также об ошибках:
— В построении процесса разработки CJM;
— Во взаимодействии с руководством и подразделениями компании.

https://hardclient.com/customer-journey-map-pitfalls

Ада Рафалович и Гавана Нгуен рассказали об изменении дизайна таблиц для постоянного использования в своём продукте.

— Добавили контрол перехода к заданной странице;
— Проработали состояния переключателя страниц, когда их а) 4 и меньше, б) много и пользователь находится в начале или конце списка, в) много и пользователь не в конце списка;
— Дали редактировать отдельные ячейки в строке. Синий цвет содержимого ячейки и синяя иконка карандаша показывают, что можно изменить (часть респондентов не замечала серых иконок карандаша). С отдельным режимом редактирования стало понятно, какие данные сохранены, как отменить изменения;
— Расположили кнопки действий в конце строки. Действия отображаются, если их 2 и меньше, а если больше, собираются в раскрывающееся меню;
— Добавили выбор нескольких строк с помощью чекбоксов для выполнения с ними действий на панели групповых операций;
— Дали выбирать столбцы для отображения, но ограничили их максимальное количество;
— Решили ограничивать ширину ячеек с длинным содержимым. Содержимое целиком отображается при наведении курсора;
— Добавили визуальные индикаторы для непросмотренных ячеек в виде вертикальных линий на левой грани строки.

— Перевод (нет пары картинок): https://telegraf.design/dizajn-tablits-dlya-postoyannogo-ispolzovaniya/
— [English]: https://uxdesign.cc/designing-tables-for-reusability-490a3760533

Как объяснить пятилетке, чем занимаются веб-дизайнеры (или дизайнеры интерфейсов)?

Прежде чем отвечать на этот вопрос, полезно задать себе другие вопросы:
— Зачем объяснять это пятилетке? Точнее, что пятилетка должен (или должна) потом с этим пониманием делать?
— Зачем кто-то кроме интересующихся пятилеток будет искать ответ на этот вопрос?

Если ответа ищет другой дизайнер интерфейсов, то я бы ответил так:
1. Поищите готовые объяснения, может быть, объяснения профессии графического дизайнера или любой другой профессии, главное, чтобы объяснение было направлено на пятилеток;
2. Объясните так, как считаете правильным, учитывая страну и возможный жизненный опыт ребёнка, максимально просто, без использования других терминов, которые сами требуют объяснения;
3. Проверьте, получается ли у пятилетки использовать сформированное понимание так, как вы планировали;
4. Придумайте новое улучшенное объяснение, если текущее работает плохо.

А потом добавил бы, что он и сам прекрасно это понимает (и находится на первом шаге моей инструкции).

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

«Смотри, ты в планшете смотришь мультики. Твой папа решает, какие и где на экране должны быть кнопки, надписи и картинки, чтобы все понимали, как остановить мультик, выбрать другой, сделать громче или тише, и чтобы всем было удобно это делать».

Юлия Фактор написала, как сработаться с другими дизайнерами на одном проекте.

— Соберите вводные: кто ваши пользователи, каковы их потребности, какой опыт вы хотите им предложить, какова ваша цель;
— Договоритесь о процессе работы и разделите задачи;
— Рассказывайте о том, что вы сейчас делаете, и следите за чужим прогрессом;
— Общайтесь;
— Не влезайте в чужие задачи.

https://ux.pub/dva-povara-na-kuhne-kak-luchshe-vzaimodeystvovat-s-drugimi-dizaynerami-chtoby-ne-szhech-kuhnyu/

Евгения Наумова написала о выборке для проведения количественного исследования.

Опрос — количественный метод. Позволяет получить объективную и статистически значимую информацию.

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

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

Ошибка выборки — разность между средними характеристиками выборочной и генеральной совокупности. После 400 респондентов ошибка не меняется. Но если генеральная совокупность небольшая, нужно меньше респондентов, чем стандартные 300−400.

Чем выше стоимость решения, принимаемого по итогам исследования, тем важнее репрезентативность.

Есть разные способы пригласить респондентов на опрос: случайные и неслучайные, многоступенчатые выборки.

Например, «Снежный ком» — каждого респондента просят порекомендовать нового среди его друзей, коллег и знакомых, которые подходили бы под параметры исследования. Часто применяется, когда самостоятельно найти таких людей затруднительно.

https://medium.com/designkontur/e6709423dfaa

Дмитрий Ответчиков написал и показал на проектах своего агентства, какими должны быть сайты застройщиков.

— Возможность покупки квартиры онлайн (особо актуально в режиме самоизоляции);
— Расчёт ипотеки с возможностью проконсультироваться с ипотечным менеджером;
— Подстройка доступных значений для фильтрации после того, как пользователь задал какие-либо параметры, чтобы не было нулевых результатов фильтрации;
— Запоминание последних параметров фильтрации, чтобы пользователь, который на протяжении 1−3 месяцев выбирает квартиру, легко мог вернуться к поискам;
— Мотивационные триггеры: сколько ещё людей смотрят эту квартиру (как на Букинге), предварительный расчёт месячного взноса по ипотеке, дата следующего повышения цен;
— Интерактивное отображение солнечной стороны в разное время суток;
— Сравнение характеристик квартир как в интернет-магазинах;
— Группировка квартир по типам, чтобы пользователь сначала определился с планировкой, а уже потом — с конкретной квартирой (этаж, корпус и так далее).

https://vc.ru/marketing/146530

Мария Савостьянова рассказала о культе простых вещей.

— Обычно люди не интересуются простыми вещами, а хотят аттракционов, чего-то выдающегося;
— Простые вещи бывают минималистичными (форма сведена до минимума), ординарными (не хотят казаться тем, чем не являются, к ним относятся бедные вещи), базовыми (решают проблемы без больших финансовых вложений), архетипичными (доведены многими поколениями ремесленников, время смыло всё наносное, остался только скелет), элементарными (видны элементы, из которых они состоят);
— Джаспер Моррисон создаёт простые вещи;
— Не все простые вещи дешёвые;
— Простоте характерна единая, литая форма, предельная геометрическая ясность;
— Сейчас люди больше склонны перемещаться (путешествия, впечатления), нежели приковывать себя к одному месту (навороченная кухня по цене автомобиля);
— Часто простые вещи связаны с идеей нейтральности. Раньше это означало отсутствие орнамента, указания на традиции, теперь — гендерная нейтральность;
— Сейчас ценится способность избавляться от вещей (методика КонМари);
— Идея сильного упрощения формы (редуцирования) лежит в основе почти всего модернизма (Баухаус). Такие вещи проще производить. После 1-й мировой войны надо было улучшать быт увеличившегося количества избирателей;
— Часто простота связана с левизной. Упростить, чтобы демократизировать (Энцо Мари, Autoprogettazione);
— Дитер Рамс: «Хороший дизайн — это как можно меньше дизайна». Уход от дизайна, который постоянно тебе что-то говорит (как в Третьем рейхе), меньше сторителлинга;
— На выставке The Essence of Things в Vitra Design Museum сформулированы качества простых вещей: компактность, лёгкость, однородность;
— У архетипических вещей часто нет автора. Никто не знает, кто придумал форму, но дизайн оказался живучим. Дитер Рамс: «Хорошо спроектированная вещь не бывает модной, она стремится к базе, поэтому ей не сильно страшны годы» (свойство timeless);
— Каталог архетипичных, предельно упрощённых вещей — Super Normal: Sensations of the Ordinary;
— Вещь базовая, если подходит всем. Очки Джаспера Моррисона для J!NS подойдут и европейцам, и азиатам;
— Компания Muji — унисекс, мало цветов, японский крой одежды (скрытые пуговицы). Простые вещи могут быть модными, но это требует большей вовлечённости людей.

Комфортно смотреть на скорости 1,5.

https://www.youtube.com/watch?v=MbtuZtIvsDA&t=140

Дарья Хлопова поделилась исследованием потребительского опыта в продуктовом ритейле.

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

https://blog.uxssr.com/2020/06/05/retail-during-covid19/

Опубликованы видео с Mail.ru Design Conf 2020:

1. Александр Васин и команда Groza Design — О себе, команде и проектах
youtube.com/watch?v=MDMC5rwYQA8

2. Команда Сбербанка — Истории про 3 тренда: художники, динамичность, переход от пластика к цифре
youtube.com/watch?v=wkDGnFD8I_U

3. Василий Хлебников, Моторика — О себе и миссии компании
youtube.com/watch?v=81TchEsXkxE

4. Никита Василевский и Алексей Комаров, ex-Рокетбанк — О проектах и работе в Рокетбанке
youtube.com/watch?v=XWCXX_QLw0k

5. ESH Gruppa — Об организации процесса, проектах и закладываемых смыслах
youtube.com/watch?v=O3pddD0t3Zg

6. Миша Лихачёв и Илья Гришин, ВКонтакте — Об уменьшении энтропии, команде, дизайне, эффективности дизайн-системы, VKUI, обратной связи, связке дизайна и разработки
youtube.com/watch?v=3yynEAA0Wsw

7. Bang! Bang! — О проектах агентства, принципах работы, манифесте команды
youtube.com/watch?v=_IuxE7FRKhw

8. Юлия Гонина и Саша Денисов, TypeType — О шрифтовых технологиях и кастомном шрифте как инструменте решения дизайнерских задач
youtube.com/watch?v=hcYYHxG_24Y

9. Оля Яковлева и Артём Чернобровкин, КБ Стрелка — О функции красоты, роли дизайна и иллюстраций в городском консалтинге
youtube.com/watch?v=5IDfQIFHnHk

10. Александра Гуляева и Дарья Шаклеева, UX-лаборатория Mail.ru — О пользе исследований для дизайна и дизайнеров
youtube.com/watch?v=-pUAmX9J6Uo

— Все видео в одном плейлисте: youtube.com/playlist?list=PLzqQCeTtpSBrablTVd8lvYDSJVqiNltwr
— Альбом в ВК: vk.com/videos-50773057?section=album_42

Дарья Шаклеева написала о тестировании сложного продукта в корпоративной UX-лаборатории.

Форматы работы внутренней UX-лаборатории с остальной компанией: а) агентство, когда исследователь работает с разными командами и проектами попеременно; б) каждый исследователь работает только со своей продуктовой командой.

Исследовать надо интерфейсы, с которыми пользователи работают часто и с которыми работают редко, но которые значимы для бизнеса (например, административные панели).

Такие интерфейсы ориентированы на специалистов. Исследователь без специальных знаний будет путаться в сокращениях вроде AD, SSL и ВКС и в происходящем на экране, не сможет задать уточняющие вопросы. Спасает выбранный формат работы (б), подразумевающий глубокую вовлечённость остальной команды продукта в исследования.

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

Прежде чем общаться с респондентами, покажите интерфейс коллегам и экспертам, чтобы исправить явные интерфейсные проблемы.

https://habr.com/ru/company/mailru/blog/518108/

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

Классическое понимание:
— Есть базовые эмоции: страх, гнев, горе, отвращение, радость, удивление;
— У каждой — свой набор нейронов и своя уникальная реакция. Эмоция — цепь неконтролируемых изменений мимики лица и других физиологических реакций, запускаемая событием;
— Эмоции универсальны для всех людей.

Современные исследования показали:
— Нет значимой связи между активацией мышц лица и определёнными эмоциями;
— Люди в среднем плохо считывают эмоции незнакомых людей по выражению лица. Средняя точность оценки: 48%. Если исключить из набора фотографий самые яркие эмоции, точность падает до 35%;
— Нет связи физиологических реакций вроде изменения сердечного ритма, давления, периферического сопротивления сосудов, кожно-гальванической реакции с конкретными эмоциями;
— Самоотчёт (когда испытуемые говорят о своих эмоциях) работает плохо: люди подвержены стереотипам в оценках, с меньшей охотой сообщают о негативных эмоциях, иногда не способны описывать свои эмоции словами (алекситимия).

https://v-shliachkov.medium.com/85d0038b20fe

Павел Шерер опубликовал 2-ю статью цикла о функциональной архитектуре.

— Этапы создания ФА: высокоуровневый (скелет продукта) и детальный (мясо);
— Это разделение условно: где-то приходится возвращаться к переосмыслению общих решений, где-то нельзя продолжить без более глубокого погружения в область;
— Кажется, что набросать общую структуру проекта проще, чем детально расписать каждую функцию. Загружать в голову функциональность большого продукта и анализировать её — сложно. В начале работы важно сохранить высокий уровень абстракции, чтобы не уйти в детали и не ошибиться с основными решениями;
— Простейшие функции складываются в крупные, которые входят в функциональные разделы, которые тоже могут быть вложенными. Раздел «Логин и регистрация» → подраздел «Аутентификация» → функция «Валидация формы» → функция «Проверка на обязательное поле»;
— На 1-м этапе обычно описываем только функциональные разделы и ключевые функции;
— Функций всегда лютая тьма. Проще всего выявлять их через функциональные сценарии продукта (часто строятся на основе User Flow или аналогов);
— Сперва создаём базовые сценарии, затем углубляем их по мере появления детальной информации о продукте;
— Выносим отдельно функциональность, встречающуюся в нескольких разделах. Например, просмотр списка новостей (карточки новостей, их обновление и подгрузка новых) на главной и на странице «Новости».

#functional_architecture