0

I'm looking for a way to properly display actions on my application's card without cluttering the interface too much, while still correctly emphasizing them. My application allows teachers of a school to create quizzes and share them with students. Teachers are able to view the quizzes in a dashboard, and they are displayed as cards. You can click a button on a quiz's card to navigate to its editor and edit it.

I'm trying to follow material design guidelines for designing those cards. The initial design looked like this:

(the rest of the screenshots will be in English) enter image description here Aside from the "editor" button with obvious meaning, the "chiudi" button allows teacher to close an in-progress quiz ("in corso" means that), and "monitora" navigates to a page where you can monitor data about participations.

The actions were emphasized and outlined pretty well, but the issue I had with this design is the overuse of buttons and colors. The current design looks like this:

enter image description here (this is how they're displayed in a dashboard which only shows the most recent quizzes)

enter image description here (here they are displayed in a page dedicated to displaying all quizzes)

I moved to pretty much using icons for all actions, and having tooltips that show up when you hover the icon button explaining what it does. I think this design looks cleaner, but it might be less discoverable than the first one.

I'm also not crazy about all that "gray" brought by the icon buttons. I'd like some more balance that allows me to use a bit of the app's brand color/primary color.

What can I do to improve the current design?

Improve this question
3
  • Are the status pills (Planned, In Progress, Closed, Draft) clickable? They look like they are or is that a Material Design quirk? The effect is also enhanced by the icon for "In Progress" that might as well be used for a menu.
    – jazZRo
    May 5, 2022 at 14:22
  • They aren't clickable. They just display current state of the quiz. Is there anything I can do to make that distinction more evident?
    – Samuele B.
    May 5, 2022 at 14:28
  • 1
    Expect people to try clicking/touching the status pills when they first encounter them. This is for teachers who will be using this more than once so it doesn't have to be problematic. But at least use a different icon for In Progress so it doesn't look like a menu.
    – jazZRo
    May 5, 2022 at 14:40

1 Answer 1

Reset to default
1

The standardized interface design guidelines are a very good resource to start developing an interface, but it's important to apply some perception theory or common sense to the design. Personally, I am a big enemy of misused horror vacui and the need to fill every corner of the working field with icons.

In an area with the simplicity of a title and three actions you occupy the four corners with title + three icons, is that necessary?

enter image description here

What is described in the question is merely a workspace with a list of tools. It can be useful to visualize the hundreds or thousands of existing applications for working with tools and documents. Practically all of them group the actions as tools in a certain space, leaving the rest of the screen free for the work itself. This facilitates interpretation, work, location and action. Icons within a frame called Toolbar are much more understandable than scattered in various corners.

Beyond the design, I would study the possibility of the toolbar. This screenshot has nearly all the tools of the question and more: title, add, edit, undo, erase, status color dot,...

enter image description here

Image via dribbble

Improve this answer
2
  • Thank you so much. i.stack.imgur.com/ccMaC.png does this look better? I think grouping all the icons to one side makes it cleaner already. I don't think the toolbar is necessary because that card is just an entry point into the more complex tools (for example, the edit button leads to a whole different page with a full-fledged editor). One side note: you mentioned there being 3 actions. There are actually 2--the green "planned" chip is information, not an action. Do you think it's not clear enough from the design?
    – Samuele B.
    May 5, 2022 at 13:18
  • For the pill shape as pointed out in the comments. About the capture, much better. To me, the most recognizable close icon without a label is the ❌
    – Danielillo
    May 5, 2022 at 14:53

Your Answer

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

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