Флажки с заказом - UI/UX и технические проблемы

Question

Вступление

HTML-форма содержит элемент checkboxes, в котором перечислены различные индикаторы. Пользователь может выбрать ровно три элемента из этого списка (см. Изображение 1). После отправки формы создается пузырьковая диаграмма с одним индикатором по осям x и y и третьим индикатором, определяющим размер пузырька (см. Изображение 2).

Изображение 1

Изображение 2

проблема

Выбирая индикаторы, пользователь не может определить порядок выбранных индикаторов. Таким образом, пользователь не может определить, какой индикатор находится на какой оси или какой индикатор отвечает за размер пузырька соответственно.

Доступные решения

Конечно, вместо того, чтобы иметь одно поле множественных флажков в веб-форме, (1) можно создать три одиночных радиоэлемента с именами x, y и z. Или, если форма работает на Ajax, (2) дополнительные элементы формы могут быть показаны, чтобы позволить пользователю выбирать соответствующие параметры.

Однако в варианте (1) показатели будут повторяться трижды в форме, а в варианте (2) дополнительные элементы формы не будут находиться в списке показателей. Кроме того, я хотел бы сохранить индикаторы в одном элементе из-за того, что есть другие параметры диаграммы, использующие очень похожую форму (все они генерируются из одной и той же панели инструментов), а функции обработки зависят от конкретных имен элементов (не типов). хоть).

Вопросы

Я читал о флажках с несколькими состояниями, однако, (только) дополнительное состояние (неопределенное) является лишь визуальным представлением, технически флажок должен все еще быть либо отмечен, либо не отмечен.

Q1: есть ли другой (похожий) элемент формы, который можно использовать?

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

Q2: Может ли кто-нибудь указать мне лучшие практики UI/UX для подобных случаев?

Из-за отсутствия правильных (поисковых) терминов я не нашел хороших примеров решения этой или подобных ситуаций. "флажки с несколькими состояниями" поднимают вышеупомянутое неопределенное состояние, "упорядоченные флажки" в основном относятся к некоторым проблемам MS Excel.

Answer 1

Что если я хочу получить биомассу для x и z?
UX - очень сложная тема, и отрицание выбора пользователем вовсе не делает его счастливым.

Таким образом, мое решение, не технического вопроса, а UX, заключалось бы в преобразовании всех флажков в радиоэлементы и добавлении дополнительного выбора (в виде раскрывающегося списка или снова в качестве радиоэлементов), с помощью которого вы выбираете либо x,y, либо г.
Это может быть легко достигнуто с помощью js и легко решить проблему. Еще одним преимуществом является то, что вы используете только те элементы управления, с которыми пользователи уже знакомы, что может быть дополнительным плюсом:)