Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
There is some good conversation in this thread on this subject. –  Charles Wesley Jan 3 '13 at 20:33
add comment

3 Answers 3

up vote 6 down vote accepted

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.

share|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. –  3nafish Jan 4 '13 at 14:09
add comment

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

share|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
add comment

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

share|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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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