How to avoid the use of nested cards

Question

I am developing a school web app and trying to follow material design guidelines.

There's a functionality that allows teacher to create homework and in-class test models, wherein they can input a list of tags and each student who participates in the test will be shown exercises that have those tags, chosen at random, as to have each student be presented with different exercises. The feature essentially allows teachers to create a pool of exercises that satisfy the "rule" of having the tags input by them, and then have the system pick randomly from that pool to assign the exercises to students.

What I want to do is show a count of how many exercises satisfy the rule as it is built by the teacher, and present an example of an exercise that is eligible to be picked, just to give them a feel for the effect of what they're doing.

The problem I'm having is I don't really know what's the best way to have the various components share the available screen space and how to clearly separate them, signifying what is the "input" space and what's the "preview" space.

The component as a whole is interacted with inside a dialog, as it is only a small part of a bigger process (it's inside another editor of its own).

This is what it looks like:

The main thing I don't like about this is the nested cards on the right. I have a card with some slight elevation to kind of separate the preview pane from the rest of the editor, and then there's another card which contains a minimal preview of the exercise. The innermost card is necessary as it's the way I show exercises around the app. The outer card is what I feel I could probably get rid of, but I'm failing to see how I could separate the two areas of the screen without some clear-cut limit like the one a card creates.

Overall, I'm afraid this UI component as a whole has ended up looking too cluttered and without enough separation between the logical units inside of it.

What can I do to improve it? Many thanks.

Answer 1

I think your basic idea is fine, I'd make these changes:

1. More specific tag group labels like "Using these subjects", "Using these activities", "With these goals", etc.
2. Make the screen narrower. The tag input fields might possibly be half their size. Maybe you could add a little more padding and white space around certain elements to see if that makes it breathe a bit more.
3. The example looks good but to avoid "cards on cards" you could remove the elevation and just keep it as a flat box. If you want users to see more examples, perhaps it could act like a carousel and the user could click through examples using forward and backward buttons.

Answer 2

I don't know what the solution to the question is, but I see a distribution problem.

What's described in the question is the same as a Recipe Builder, there are several online to get ideas from. Generally speaking, the tags area is similar to a tool panel and the most important area is the results, which is what the user wants and needs to see in detail.

A clear example is supercook.com where by clicking on the ingredients in the left column, the recipes appear in the central field: