Александр Ушаков написал о чатоцентричном интерфейсе.

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

#chat #ai

Кейт Каплан написала о подсказках.

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

In English. #info_tip

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

— Можно выделить 3 типа раскладушек: Flip — вытянутые телефоны, которые складываются по вертикали. Встречаются нечасто, самые популярные модели у Самсунга;
— Fold — околоквадратные в раскрытом состоянии, складываются по горизонтали. В сложенном виде похожи на привычный смартфон. Самый популярный тип;
— Trifold — планшеты, состоящие из 3 складывающихся частей, похожих на привычные смартфоны. Таких только 2 модели: Samsung Galaxy Z Trifold, Huawei Mate XT;
— Фолд-смартфоны бывают книжными (описаны выше) и широкими — широкий прямоугольник в сложенном виде и почти планшет 4:3 в разложенном. Таких тоже мало: Huawei Pura X да Galaxy Z Fold 8;
— В разложенном виде левую часть экрана обычно занимает навигационное меню (иконки или иконки с подписями), которое в смартфонах обычно прячется за иконкой бургера, либо список, например чатов в приложениях вроде Сообщений или Телеграма;
— Может использоваться 2-колоночная сетка, как в приложении Now brief;
— Приложения принимают устройство за смартфон и адаптируют интерфейс, учитывая ширину экрана, но не его квадратную форму. Например, из-за отсутствия ограничения на ширину контента в Инстаграме вертикальные картинки просто не влезают на экран целиком;
— Авито и Вайлдберис показывают более 2 карточек в ряд, а Озон и Яндекс Маркет растягивают 2 карточки на всю ширину;
— Производители предусмотрели костыльное решение: можно настроить отображение таких неадаптированных приложений с соотношением 3:4 или 16:9;
— От квадратного экрана выигрывают Яндекс Карты, Гугл Таблицы, Яндекс Книги;
— Форм-фактор Fold позволяет делать селфи на более качественные основные камеры. Или видеть композицию кадра, если телефон на штативе или в руках фотографирующего вас человека;
— Если вы сами фотографируете, в дополнение к приложению камеры на второй половине экрана можно отобразить ленту получающихся фото;
— На экране может быть до 3 приложений одновременно. Например, банковское, калькулятор и заметки. Но, например, Т-Банк запрещает своему приложению открываться параллельно с другими;
— Flex mode — когда смартфон согнут, на одной части экрана отображается основной контент (например, видео в Ютубе), а на другой — вспомогательный (кнопки управления воспроизведением). Но этот режим поддерживают редко;
— Минусы: телефоны толще и тяжелее, быстрее теряют в стоимости, камеры хуже айфоновских (хотя именно в съёмке они предлагают интересные возможности), более крупная, разделяющаяся на 2 части клавиатура, не ускоряет скорость набора и уменьшает количество ошибок, а скорее наоборот. Свайпать по ней практически невозможно.

#fold #adaptive

Чеклист: 50 ошибок в портфолио дизайнеров

Основано на разборе 1000+ портфолио.

Формфактор собрали ошибки, которые:
— портят первое впечатление от портфолио
— вызывают отторжение у лида
— убивают шансы на оффер

Актуально для рынка 2026.

Чеклист в закрепе @formfactor

Лена Плинер написала о проектировании экранной клавиатуры для использования на сенсорных экранах на производстве.

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

Копия на Dsgners, Виси. #industrial

Русалина Ушакова написала о том, когда удобный интерфейс мешает обучению.

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

#learning #principles

Снежана Чепа написала об ошибках в работе с персональными данными на российских сайтах, которые могут привести к штрафам. Суммы можно посмотреть в статье.

— Использование Гугл Форм. Данные должны попадать в базы, находящиеся на территории России. Гугл Формы можно заменить на Яндекс Формы;
— Нет предупреждения о куках. Куки у вас точно используются, если подключены сервисы веб-аналитики;
— Под формами нет согласий на обработку персональных данных (ПД) или они не соответствуют требованиям закона. Политика конфиденциальности ≠ согласие на обработку ПД;
— В согласии должна быть цель обработки данных, их полный список, срок, в течение которого действует согласие;
— Нет чекбокса «Я соглашаюсь на обработку персональных данных в соответствии с политикой конфиденциальности». Слово «соглашаюсь» можно сделать ссылкой на согласие, «политикой конфиденциальности» — на политику;
— Отзывы размещены без получения согласия на распространение ПД. Если размещаете отзывы, лучше получить отдельное согласие по специальной форме (есть в статье);
— Нет политики конфиденциальности или она не соответствует требованиям. В ней должны быть сведения о каждой цели обработки данных;
— Не уведомили Роскомнадзор об обработке ПД;
— Нет соглашения о поручении обработки данных третьим лицам, например, сервисам рассылок. Такое поручение можно сделать разделом заключаемого с клиентами договора;
— Нет документа с перечнем всех мест хранения ПД на бумажных носителях, если в вашем бизнес-процессе используются такие носители;
— Важно реагировать на обращения, например вопросы о том, на каком основании человек получает от вас письма, запросы на удаление ПД из ваших баз данных.

#laws

Илья Бирман написал о сценариях.

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

#scenario