Redesign encoding system and "add variable" flow

[theochawla]

The user interface for the chart menu could be improved. Right now it is not clear what the data pills do. The mouse often covers their hover states, so many fields in the pill are not clickable. The transition to a filter screen can be jarring, and seemingly has no relationship to the pill itself. The process for adding variables is similarly jarring and difficult for a user to follow.

I suggest filtering could be contained within the pill itself, the pill could be condensed, and variables could stay on the same screen instead of switching to an overlay. By default, pills could also be condensed to save space. Here are some initial mockups, and I will post more detailed ones to this thread as they are created.


.

[theochawla]

Here is the progress I have made on the data pills. In the current version, there is a drop shadow underneath the whole pill. Several fields are clickable, including a change from categorical to numerical data, the variable category (ex: x, y, color), and the column. In its current order, it is difficult to tell what is what, and the hover states are often covered by the mouse so a user may not know they are clickable. They had an extended fold underneath them to show filtering, and a button to access the filtering screen. This proved inefficient for the space and confusing to read.

Instead, here is the first version of a new pill design. They are much slimmer, just displaying the variable type and column. The user can click the column name to access a dropdown to access the other columns in the dataframe. They can also click the options button to access filtering, scaling, aggregation, binning, and switching the variable from categorical to numerical (or vice versa). This is all contained inside the pill instead of popping out to an overlay. The height of the menu also stays the same, with an increased scroll as it grows in size. I have also added an "Active Variables," as as user may not have immediately associated the data pills with the chart.

Screen.Recording.2022-01-14.at.2.09.09.PM.mov

[theochawla]

This is the updated pill design. I added a thin stroke on the outside to help with accessibility. I also added a drop down menu to change the variable type. This will help with the process of adding pills (see below). I also added a hover state for column selection dropdown. I would like this to be a text field. Ideally, clicking in the field would highlight the current text and pull up the list of columns. Then, the user could begin typing to narrow down the columns showed. They could also access this list by clicking the arrow in the dropdown.

Screen.Recording.2022-01-21.at.3.52.42.PM.mov

[theochawla]

I have also redesigned the process for adding pills. Previously, adding a new pill would kick the user into an overlay that had limited continuity with the rest of the interface. This new design keeps the user on the same screen, and simply adds a new pill to the list. This also automatically opens the column selection. The default will be the first column in the list. The default variable type will depend on what variables are already present. The order for the defaults will be x-axis, y-axis, color, size, opacity, then facet. For example, if x-axis and y-axis are already present, then the next variable added will be color by default. Each variable type has a different color to help visually differentiate them, and there will only be one of each variable types at a time for a maximum of 6 variables. If a user wants to change variable type, they can click the variable type dropdown. Only the variable types not already present will be listed. I have also slightly changed the style of the "add variable" button and added hover and click states.

Screen.Recording.2022-01-21.at.4.14.26.PM.mov

.

[theochawla]

Categorical and numerical variables will also need slightly different designs in their options panels, because they have different properties. Here is an initial design for what each will look like. Categorical variables will only need the "count" aggregation as the others do not apply.

Screen.Recording.2022-01-24.at.4.55.57.PM.mov

[theochawla]

This is a slight redesign to the pills. Instead of using colors to differentiate between encodings, all pills will be grey, and will turn purple when activated.

Screen.Recording.2022-02-02.at.4.33.00.PM.mov

[theochawla]

This is a comprehensive mockup of the design updates made so far. I have also adjusted heading sizes and the hover states for the menu tabs in addition to the updated pill design. I also replaced the drop shadow under the menu with a stroke and standardized corner radii to 5px.

Screen.Recording.2022-02-09.at.3.34.31.PM.mov