Как обыграть UI/UX у такого прототипа?

Question

[Gagatyn]

Пока не начал реализовывать и чтобы не переделывать спросить решил Вас.
Таких блоково может быть больше 1. В каждом блоке, есть "Заголовок" и типа таблицы.
К примеру, "строка3", при клике на строку, а именно на чекбокс, выбирается строка-вариант "строка3" и раскрываются доп инфо-блок под строкой. Если выбрать "строку1" через чекбокс, то именно под ней отобразится инфо-блок и сдвинет строки ниже, как slideDown. Контент в инфо-блоке разный, от форм до текста.

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

Как обыграть ux, существуют ли какие-то принципы, правила построения интерфейса для такого случая?
Поделитесь ссылками, если такие существуют. Спасибо!

Answer 1

[Илья Пашнин]

Все же зависит от постановки задачи, т.е. если прототип Ваш и его можно корректировать, то некоторые моменты я бы поправил. А если прототип утвержден, а Вам нужно отрисовать интерфейс, то и об удобстве рассуждать не приходится :)
По существу: заголовки слева меня смущают больше всего, но если таблица не очень широкая, а заголовки в одно слово, то вариант. Если мы о веб, то на трубках все равно придется сделать заголовки над таблицей, так чего тянуть?)
С текстом под таблицей не вижу проблем, главное стили: текст инфоблока нельзя отделять линией (бордером) от строки, иначе потеряется принадлежность. По этой причине таблица должна быть без вертикальных бордеров, иначе получится ужас. Сам текст инфоблока можно заключить в какой-то "бабл", который будет указывать на строку. И тогда все будет прилично выглядеть даже если строчек 100 (можно еще закрывать инфоблок, при открытии другого, но если они большие - страница будет дергаться).
Что касается взаимодействия, то поведение чекбокса немного не логично. Как правило сначала пользователь должен увидеть подсказку, а потом уже сделать выбор. Если это не тест, то можно выводить инфоблок тултипом при наведении на чекбокс, а по клику "раздвигать" строку и оставлять инфоблок на виду.

Советы могли бы быть более конкретными, если было бы понимание, что за продукт, где используется, кем :)

Answer 2

[Антон Романков]

Используйте состояние и когда в нем что-то меняется, то все перерисовывается. Подойдет массив очень хорошо.
Хорошо бы сюда прикрутить React (или другую UI-библиотеку), чтобы проще было взаимодействовать с DOM.
Но можно и самому все написать :-)

Comments

[Gagatyn]

Да, с менеджером состояний будет проще реализовать, но вопрос о удобстве использования такого интерфейса, удобна ли будет таблица, а что если там 100 строк...

[Антон Романков]

Gagatyn, Зависит от целей. Если это что-то типа таблицы, то без проблем. Если эта часть на лендинге, то я бы это в какую-нибудь модалку выносил, либо в отдельный раздел.
По-хорошему, вы как разработчик вообще не должны об этом думать. Это работа проектировщика/дизайнера.