vendredi 19 février 2016

Checkboxes with order - UI/UX and technical issues

Introduction

An HTML form contains a checkboxes element listing various indicators. The user may choose exactly three items from that list (see image 1). Upon submitting the form, a bubble chart is created, with one indicator each on the x and y axis and the third indicator defining the size of the bubble (see image 2).

Image 1

Standard checkboxes

Image 2

Bubble chart

Problem

By choosing the indicators, the user is not able to define the order of the selected indicators. Thus, the user is not able to define, which indicator is on which axis or which indicator is responsible for the bubble size respectively.

Available solutions

Of course, instead on having a single multi-select checkboxes field in the web form, (1) one could create three single-select radio elements named x, y, and z. Or, if the form is ajax-powered, (2) additional form elements could be shown to let the user choose the respective options.

However, with option (1), the indicators would be repeated thrice in the form and with option (2) the additional form elements would not be inside the list of indicators. Further, I would like to keep the indicators in one element due to the fact that there are other chart options using a very similar form (they are all generated from the same toolbox) and the processing functions are relying on specific element names (not types though).

Questions

I've read about multi-state checkboxes, however, the (only) additional state (indeterminate) is just a visual representation, the checkbox must technically still be either checked or unchecked.

Q1: Is there another (similar) form element which could be used?

From what I read, I would assume, that such an element doesn't exist since what I am practically trying to do, is to send two values (indicator id and chart representation).

Q2: Could someone point me to UI/UX best practices for similar cases?

Due to the lack of correct (search) terms, I haven't quite found good examples of solving this or similar situations. "multi-state checkboxes" bring up the before-mentioned indeterminate state, "ordered checkboxes" mostly refer to some MS Excel problems.




Aucun commentaire:

Enregistrer un commentaire