Frage

I have a table with some text data. One of the columns should be clickable: a pop-up for editing this row will appear.

What is the best way to explain for user that clicking on this row will cause a pop-up? I see 4 variants:

  1. Hyperlink
    <td><a href="#">Smith</a></td>
    Not good cause usually links open new pages.
  2. Dotted-underline link
    <td><span style="cursor:pointer; border-bottom: dotted 1px">Jackson</span></td>
    User will expect a hovering help window.
  3. Button
    <td><button>Doe</button></td>
    Looks bad and also not clear what will happen after click.
  4. Clickable icon
    <td>Johnson <span style="cursor:pointer" class="glyphicon glyphicon-edit"></span>
    I'd like to avoid repeating the same element many times.

Here is a fiddle with all of these variants.

War es hilfreich?

Lösung

The icon is the most appealing as the other ones just show that you will be taken to more info. While the icon is clear that the user will edit.

I would also make it a hover affect for it like so:

$(document).ready(function() {     
    $('#test2').hover(function(){     
        $('#test').addClass('glyphicon glyphicon-edit');    
    },     
    function(){    
        $('#test').removeClass('glyphicon glyphicon-edit');     
    });
});   

the #test2 is the cell and #test is the span.

http://jsfiddle.net/Ugc9C/2/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top