Handling hashtags in an click-to-edit-record row

Question

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?

Answer 1

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:

Answer 2

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:

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.