l_konstantin
/
TestingWebApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 Commits
2 Branches
0 Tags
2.4 MiB
Tree: db9851eeda
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'db9851eeda'
${ noResults }
TestingWebApp/docs/Рекомендации UX по экранам ...

7.6 KiB
Raw Blame History

Рекомендации UX по экранам редактирования теста

Основание: скриншоты в docs/screens, словарь docs/Словарь UX-UI-IA терминов.md. Дата фиксации: 29.04.2026.

Навигация и IA

  • Хлебные крошки. Сейчас только «← к списку». Имеет смысл добавить полную цепочку вроде «Тесты → Введение про LLM → Редактирование», чтобы снизить когнитивную нагрузку и отразить иерархию сущностей (Тест → Версия).
  • Якоря по длинной странице. Блоки «О тесте», «Вопросы», «История», «Показ в каталоге» образуют длинную вертикаль. Полезны боковое оглавление или «прыжки» по разделам / закреплённая поднавигация внутри страницы теста, чтобы не терять контекст при работе с нижними вопросами и назначением.

Состояния интерфейса и обратная связь

  • ИИ-кнопки. Для «Сгенерировать тест (ИИ)» и «Сгенерировать вопрос (ИИ)» нужны явные состояния: загрузка (спиннер, disabled), успех/ошибка, при необходимости — отмена длительной операции (видимость статуса системы).
  • Черновик и риск потери данных. Уже есть заметный «Сохранить черновик» и жёлтый баннер про новую версию — хорошо. Дополнительно: предупреждение при уходе со страницы с несохранёнными изменениями; для длинной формы — закреплённая панель с сохранением (или дублирование primary-действия после блока вопросов), чтобы не скроллить вниз каждый раз.

Редактор вопросов (UI и логика)

  • Один vs несколько верных ответов. При включённом «Несколько верных ответов» визуально должны быть чекбоксы, а не радиокнопки — соответствие метафоре, ожиданиям пользователя и доступности (скринридер, множественный выбор).
  • Разделение действий. «+ вариант» и «Удалить вопрос» сейчас визуально близки по весу — риск ошибочного клика. Деструктивное действие: вторичный стиль, отступ, по желанию подтверждение или «Удалить» в меню «⋯».
  • Иерархия ИИ vs ручное редактирование. Блок «Генерация сетки (ИИ)» логично оформить как сворачиваемый «продвинутый» блок или визуально отделить (заголовок, граница), чтобы отличать массовую генерацию от точечной «Сгенерировать вопрос» у карточки.
  • Длинные варианты ответа. Обрезка текста в однострочном поле мешает автору. Варианты: многострочное поле с авто-ростом по высоте или предпросмотр полной строки при фокусе/hover.

Локализация и терминология

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

«Показ в каталоге» и список сотрудников

  • Кнопка «Назначить выбранных». Сейчас выглядит как вторичная; это главное действие сценария выдачи теста. Имеет смысл сделать её заполненной primary при наличии выбора и disabled с подсказкой, если никто не выбран.
  • Повтор строки «нет учётки (создадим при назначении)». На каждой строке создаётся шум. Лучше: один информационный блок над списком; в строке — компактный бейдж/иконка только где уместно.
  • Крайний случай: много сотрудников. При сотнях/тысячах записей — виртуализация, пагинация или «выбрать всех по фильтру» с явным числом «будет назначено N человек».

История и версии

  • При росте списка карточки версий и прохождений превращаются в длинную простыню — предусмотреть свёрнутый список, пагинацию или табы «Версии» / «Прохождения» с фильтром по версии и статусу.

Доступность и плотность

  • Мелкий серый текст в списке сотрудников — проверить контраст (WCAG).
  • Чекбоксы и переключатели: достаточная зона клика, связь подписи с полем, логичный порядок табуляции.

Пустые состояния

  • Пустая история, нет вопросов, поиск «никого не нашёл» — короткий текст почему пусто и следующий шаг («Добавьте вопрос», «Измените фильтр»).

Приоритизация внедрения

  1. Высокий эффект / низкий риск: локализация статусов и ролей; визуальное различие «Удалить вопрос» vs «+ вариант»; primary для «Назначить выбранных»; убрать повтор длинного текста про учётку в каждой строке.
  2. Средний: чекбоксы при нескольких верных ответах; многострочные варианты; состояния загрузки для ИИ; закреплённое сохранение.
  3. Стратегический: хлебные крошки и внутренняя навигация по разделу; масштабирование списка назначений; пустые состояния; продуктовая аналитика (например, доходят ли авторы до «Показ в каталоге»).

Документ можно дополнять по мере внедрения и новых скринов.