Actions as icons on card

Question

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) 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:

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

(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?

Answer 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?

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,...

_{Image via dribbble}