Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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 enter image description here but a context-sensitive icon representing a program would also work.

share|improve this question
1  
Really, this depends on what selecting the row and going to the new page actually means. If it's a table of products to buy and the next page is checkout, then it'll be something shopping cart related. If it's a table of choices in a multi-step process and the next page is just the next step, something like a right-pointing arrow. If it's a menu in a food venue and the next page is confirming your order, then something like a knife and fork icon. Etc etc etc. –  user568458 Aug 7 '13 at 11:40

4 Answers 4

up vote 1 down vote accepted

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/EditPointer Cursor

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.

share|improve this answer
    
Excellent idea on changing the cursor. In fact, the icon is a link, so the cursor automatically changes, and the alt text will show if you hover over for long enough. Those are my requirements so I don't have flexibility here. Only to choose the icon. –  Tim Partridge Aug 7 '13 at 17:50

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.

share|improve this answer
    
Without more context.. :) A checkbox would be the perfect indicator if you can select more than one row before going to the next stage/page. –  Mr E. Upvoter Aug 6 '13 at 20:44
2  
Which is why I think it's a weird experience. I don't think any "select" icon is going to convey "select this item then immediately leave the page". –  plainclothes Aug 6 '13 at 20:50
    
agreed with the comment above. Don't use a check box as a button! –  Henrik Ekblom Aug 7 '13 at 9:06

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.

share|improve this answer

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.

share|improve this answer
    
Context-sensitive icon is a good idea. In my case, it's selecting a program, as in a government program that dishes out $$$. –  Tim Partridge Aug 7 '13 at 17:51
    
( $.$) .... in that case, I probably would use either a B&W piggy bank icon (sort of a vector icon) or glistening yellow coins, but then that's just me –  rps Aug 8 '13 at 4:07

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.