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:

enter image description here

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.

  • 2
    A few questions: 1) Would the user want to access all of their tag options somehow so they can make the best selections possible? 2) Are they likely to enter a large number of tags, necessitating the large input areas? 3) Is the Example card always going to return one and only one example result? Thanks.
    – Izquierdo
    Feb 21, 2022 at 19:44
  • 1
    1) There's an autocomplete option in the tag input element that shows what the tag options are. That is shown when the user types something, yes. The user generally knows what they're looking for, so having it as an autocomplete is sufficient, I believe. 2) Unlikely to enter more than 3-4 tags per "group", and probably no more than 2-3 groups 3) Yes, as it's meant to show an example exercise that's eligible. If anything, I could add a "Load another example" button, but I don't believe more than one at a time is needed. Thank you!
    – Samuele B.
    Feb 21, 2022 at 19:50

2 Answers 2


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.

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:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.