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.

Say we have a list of records displayed like this:

Date  Description         Payer  Amount
---------------------------------------
01/01 Rent                Maxi   $1000
12/01 Lunch with clients  Bob    $80
23/01 Cleaning            Alice  $60

Clicking (anywhere on) a row replaces the row with a form to edit the underlying record.

I want to introduce hashtags to the system. They will be entered in the description field (like Twitter, unlike SE) and displayed in the description column like this:

Date  Description           Payer  Amount
-----------------------------------------
01/01 #Rent                 Maxi   $1000
12/01 #Lunch with #clients  Bob    $80
23/01 #Cleaning             Alice  $60

The goal of the hashtags is to enable tagged searches ("how much have we spent on clients?"). So clicking the #clients hashtag (which is identified in the description field by being underlined and displayed in a different color) takes the user to a the results of a search query for "#clients".

This poses a problem however as clicking on different parts of the row does different things:

  • clicking on a hashtag leads to a search results page for that tag
  • clicking on anything which is not a hashtag opens the edit form for the record
  • most (more than 70%) of the descriptions contain a single word which would also become a hashtag (generic stuff like "rent", "cleaning", etc.)

Heatmaps show that most users are clicking on the description to edit a row, not on the date, the payer, or the amount.

A few ideas on tackling this together with their respective drawback as I see them:

  • When a user clicks a hashtag, show her a choice (search for "#clients" or edit the record "Lunch with clients"). This introduces one more click to the process and will surprise users accustomed to the default click-to-edit behaviour.

  • Add a dedicated edit button at the far left (or right) of the row. Greatly reduces the click target.

  • Show the edit form for the record and in the form show links for the hashtags. This is the wrong place for the search links. Also, how can one display them there in a usable manner? As a list below the description field?

How would you handle this?

share|improve this question
    
Do you really need the hash symbols for such short descriptions? Forcing your users to type # to add a tag seems excessive if the descriptions are only a couple words. Why not just make all the words in the description act as search links instead? Or you could even make every field act as a search link, so that if a user clicks on the date it brings up other entries with the same date, or a name brings up other entries with the same name. –  3nafish Mar 29 '13 at 15:36
1  
Then just add an edit button at the edge of the row to keep editing enabled (unless editing is the primary purpose of this table, in which case I agree with @RogerAttrill's solution, but I still don't think you need the # symbols). –  3nafish Mar 29 '13 at 15:37
add comment

2 Answers

When the description has a hashtag, automatically add a corresponding number of tag buttons to the right of the row. Those will take the user to the results of the search query for "#Lunch" or "#clients" for example.

As soon as the user adds/removes the hashtag to or from the description, the tag button gets added to or removed from the right hand side.

Meanwhile you keep the existing functionality within the description where it brings up an edit form for the underlying row.

So this way - there's no hidden changes for existing users. There's no confusion with clicking different parts of the description. The description stays easy to read without having underlines and colours. The tag buttons are clearly shown, and can even be lightly coloured to help spot repeating, frequent or related tags. And you haven't reduced the size of the click target for editing.

Alternatively if space is a premium, make the tag buttons appear inline as you hover (or on mobile, select a row). Eg something like the following:

enter image description here

share|improve this answer
    
This would lead to repetition for a lot of items on the list, e.g. 01/12 Rent Maxi $1000 #rent. The are also design and space issues at hand. Right now the amount column is right-aligned and offers a nice anchoring edge. A different number of tags (and no tags at all in some cases) would lead to a very ragged right edge. –  Nickolay Kolev Mar 29 '13 at 10:33
1  
@NickolayKolev I added an in-line solution if space is a premium. –  Roger Attrill Mar 29 '13 at 12:29
add comment

If you were to place an edit button on the far right (or left) of the field, you could easily extend its' active area so that it overlaps the non-description text. That way it is still large, but it is clear that it corresponds to edit. You can see the active area in red in the image below:

enter image description here

It presents the smallest additional space usage, while also being the simplest and cleanest to your users. If you are sure this will only be used on a pc, I would consider having the edit icon only appear on hover, but I would have to be incredibly sure about this.


As a side note, I would colour the hashtags as links to make them stand out and communicate that they are indeed links.

share|improve this answer
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.