What is a good generalized "navigate to" or "open" or "more" or "choose" or "select" icon?

Question

Imagine a table with many rows in a web application. The first column contains only an icon, no text. When single-clicking the icon, it must represent selecting that row and takes you to a new page. What icon would you choose?

Update: In this particular case, it is selecting a program. Not a software program, but a government program (i.e. the government is running a program to give money away). I was hoping for a context-free icon, and may settle on a hand icon but a context-sensitive icon representing a program would also work.

Answer 1

It selects and goes to a new page? Without any other context, it sounds like a weird experience.

A check box would probably do the job.

Again without context, a more logical presentation might be to move the select column to the right and use a right arrow in some form. That would indicate that you will direct them to a sub-page for that row.

Answer 2

The common UI widget for selecting one item from a list is a radio button.

( ) Item 1
( ) Item 2
( ) Item 3

Of course, rarely does selecting a radio button send you to another page, but it's certainly do-able.

An alternative solution would be to simply make them links:

    Item 1
    Item 2
    Item 3

And yet another solution would be to adopt an interaction that is becoming common on mobile devices which is a 'select list' or 'Miller Columns'

------------------------------------------------------
Item 1                                              >
------------------------------------------------------
Item 2                                              >
------------------------------------------------------
Item 3                                              >
------------------------------------------------------

I prefer the latter for two reasons:

1. Affordance: it 'feels' clickable and indicates that I'm going to see something else after choosing it.
2. It's responsive: since it's already borrowing a mobile UI standard, it's already mobile-ready!

The drawback is that it may not work for a table of data. It can be done, but it may not be ideal if there is a lot of additional data.

UPDATE:

I totally missed the specific of your question: You want to have an icon. That's a tougher question. I'm not sure I'd recommend an icon for this. Instead, I'd make sure the entire row is selectable, and you indicate that in a particular way, probably via one of the methods outlined above.

But if it must be an icon, I'd suggest moving the icon to the right, and use an arrow--perhaps on hover (or show by default grayed out and highlight on hover). The arrow says "select this and continue..." similar to the select list shown above.

Answer 3

I'd probably use a combination of:

Changing/inverting the entire rows colour when you hover over it - to indicate that you can interact with it

&

Changing the cursor to the Pointer CSS property when you hover over the button - a very obvious indicator that something can be clicked on.

In your particular case I'd use text rather than an icon, as it's not something you can easily represent in an icon. I'd use something like more, or edit in the basic html link styling like so:

Row 1 . Column . Column . Column More/Edit

Row 2 . Column . Column . Column More/Edit

Row 3 . Column . Column . Column More/Edit

I'd also put the controls after the content, because we read left-to-right, so the user has to read at least some of the row before deciding that it is what they want.

Answer 4

If it is going to a new page, then I would probably choose an icon that symbolizes the new page, if the new page is sort of a form, I would choose an icon that would represent a form.