How to visually represent your actions in web applications

Inside any web application, sometimes you have to deal with a set of actions. There are many differences between how you represent your actions inside a web application and a desktop application.

For example, if we have a table with a set of actions which can be done for every entity shown in a row. In desktop applications, we may have a set of buttons near the table. In web applications this in not the case. We can represent actions like links inside table columns:

But this approach will soon become obsolete if the number of actions can rise in the following versions. To be scalable, we should use a menu of actions. This will allow us to have more and more actions as the application business grows:

If you have only a couple of actions, you can be easily convinced to represent them as simple links. For example, the widget panel from NextReports:

But in time, after application grows, not only this will be unaesthetic, but it can also break the view (see how the necessary space is not enough and the row of actions falls down):

A menu of actions will help us again and this will be the adopted solution in following version:

Summarizing, this will help us :

• - not break the view
• - make the interface more intuitive
• - see what every action is about from start (not just on some tooltips)
• - scale easily the number of actions

The only problem you may have with this approach is when you have a scroll involved and your actions menu is in the right side of your panel. In such cases, your popup will not be entirely shown (a horizontal bar will appear). To avoid such collision, you have to be sure you have enough space on the right to show the menu. See that we used the actions column not as the last one in the table or the actions image for a widget is put on the left of the toolbar, so everything will be ok.

Some other ways can be possible. Google, for example has a left-oriented menu, which ensures no collision with the scroll bar :

 

This can be done if you have a single actions link. But inside a table with such links on every row, this will be problematic because the menu will fall over the following links which must react on mouse-over events.