I work in a usability team and in our applications we allways use links to open new pages (navigation), and a buttons to do an action, submit a form, for instance. But now we face a dilema: we have a datatable and we want to edit the rows in a modal window. We want to be consistent at all times, so should we use a link or a button to edit the row in a modal?


Use a button. You're trying to edit something on the current page after which you'll return to the present context. The modal is thus an action even if it temporarily fills the screen like going to a different page.

| improve this answer | |
  • the idea was to click in the text on column "name" to access the edit view in modal window, so that we could easily edit the content of the row. This way we could avoid the extra button "edit" in every row... this way visually is cleaner to use an hyperlink – RitaS. Jan 4 '13 at 10:19
  • @RitaS. Oh. If that's the case, then why not just make every item in the row clickable? It should be fine to use just links if you find it to be significantly cleaner visually. Just recognize that you're going against convention and test to make sure your users don't run into problems as a result. You may need to add an edit button if users don't realize the content's clickable. – Graham Herrli Jan 4 '13 at 14:09

This are the possibilities that i thought:

1 - use a button "edit" on the last column ( very repetitive, makes the interface more confusing when we have many rows)

enter image description here

2 - use a icone aside the text in the main column to edit, on hover a border appears (very different from what the user expects to see in a table to edit)

enter image description here

3 - use a hyperlink in the main column (the user maybe will expect to edit in another page)

enter image description here

| improve this answer | |
  • How about replacing the popout icon in 2) with a pencil icon like in 1). The user, eventually, needs to understand that she needs to click to edit, the fact that editing happens in a popup is less relevant in my view. Aside from that, I actually prefer 1) - it is repetitive, yes, but not more confusing. And you have the repetition of the remove button already, so I don't see the problem. – kontur Jan 4 '13 at 11:38

Why have any buttons or links at all?

Can you set the items to be editable directly inline?

If not - if there is more data than just what is shown in each row (ie the data shown on the row is only the most relevant info) then you could use a modal (as you suggested) or expand the row accordian style. These could be performed by clicking anywhere on the row. In the case of the accordian you could also have a small arrow which changes from pointing down to up (or any other visual cue).

| improve this answer | |
  • yes, in fact there are more items to be edited beside what is shown in the row. In fact we had already thought in the possibility of having a link on the row, but then we face other problems: * other columns could have links also * using javascript to do it: ** makes impossible to select the text on the row ** disables the standard middle click and ctrl+click functionality of opening a new tab you could see here link – RitaS. Jan 4 '13 at 11:48
  • using an accordian you should be able to retain whole row click functionality (if not then a small arrow for expanding the row) while retaining additional links (you could try applying your 'on click' by class so you can include/exclude specific cells) – Tims Jan 4 '13 at 12:10
  • have a look at this ultimate guide to table ui patterns. Specifically the sections on expandable rows and row actions. – Tims Jan 4 '13 at 12:11

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.