I have a web application where I need to show certain data in tabular format.I have certain queries from a UX perspective based on my diagram below : enter image description here

  • What should be the ideal placement of elements above the header?

  • Should delete be a hyperlink or a button and why?

  • How user friendly is having a edit and view details options for each row?

  • Any other suggestions to improve the UX.


Few things before the solution. The solution should address not just the UX but also the UI. You can probably check material design for how a table can be shown and where can the actionable items be placed.


Now, coming to an approach,

What should be the ideal placement of elements above the header?

As the image shows, the elements above the header are:

  • Search field
  • Page Size
  • Delete option

It is imperative to maintain a consistent areas for the types of actions.

One arrangement can be as follows

enter image description here:

You can have the delete button above header but then there would be a mismatch in what type of content you are showing.. The "Search" and the "Page Size" are actions for the whole table whereas the delete is for a specific row.. I would suggest isolating functionalities to make it easier for the user to address the actions.

Should delete be a hyperlink or a button and why?

No. Since a link would represent something else. It is important that the types are differentiated. Using an icon for delete (Trash Icon like a button) would be relatively better since it is easily understood. This applies to "Edit" and "Details" as well.


If there is a need to delete multiple rows together, then a delete option can be provided on the top. But then you have to make sure that it is isolated so that it does not mix in with the existing fields.

Material Design example:

enter image description here

How user friendly is having a edit and view details options for each row?

It can be a good option to have them in-row. This would allow the user to stay at the point of action (i.e the row) and act accordingly. If the action elements are not placed well.. the user might have to put some extra effort understanding the UI.

Any other suggestions to improve the UX.

Proper isolation, consistent design, clear focus points, appropriate colors These are some factors you can consider while making the design.

Apart from all this, you can check the material design principles and get more ideas on how it can be done.

I hope if not the solution, I was able to help you with some thought process :D

  • Thanks for the suggestions but I won't be able to have an inline delete on each row because my use case involves deleting a lot of entries,so to eliminate the pain to do it individually I had placed that option... Apr 1 '16 at 19:06
  • Yes. Updating the answer accordingly. I hope it helps :) Apr 1 '16 at 19:09

I've run into a similar issue on a project I am working on now. In regards to the multi-delete options, it is not screen-reader or keyboard friendly. This includes radio-buttons as well, in a similar format (but obviously not as a multi-delete issue).

The issue I ran into was an internal messaging system. We borrowed heavily from Google Mail, however when it was tested we discovered the problem almost immediately. However our primary tasks are in "viewing" the inbox, "selecting a message to view it's details", and "responding on a message". So managing folders and messages were secondary.

  • Check boxes down the first column itself, lacks context especially if the delete control is external of the table.
  • The control you show is above the logical flow of the process. (You check what you want first then click delete).
  • The link is too easily lost in the interface.

A suggestion for a multi-delete that might satisfy this: Add a step in the process.

Task-oriented design begs us to put as much of the action up front. However too many choices and too many controls can cause cognitive overload.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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