bchrobot
commented
4 years ago Thanks for such a detailed feature request!
Regarding the UX portion of the feature
The reasoning behind the panel with a "Save" button is that applying tags can have side effects and we wanted users to be deliberate in applying tags. This is further complicated as some side effects happen in the web application and some happen only after "Send" is pressed and the changes are committed. And even further by the fact that you be recording a Survey Response or Opt Out at the same time as you are applying a tag.
A few examples of tag side effects are:
- A tag with a script -- applying this changes the text in the compose text field
- A tag with a web hook -- applying this kicks off a web hook (i.e. posting a notification in Slack)
- A tag that unassigns the conversation -- applying this will unassign the conversation from the Texter after the message, if any, has been sent (e.g. Escalate tag)
So by necessity there is an intermediate pending state for Survey Responses and Tags that is not particularly clear in the current state. If we were to make changes to the Tags UI/UX we would to make sure these states and state changes are well represented. Any thoughts you have on how to do that would be very welcome!
Regarding the UI portion of the feature
We do have support for tag colors already actually, it just hasn't been exposed anywhere in the UI (yet! see #406)
Spoke uses v0 of the Material UI React library. Updating to the latest version would be a very major rewrite that I attempted (see relevant PRs) but realized that to actually do would require a few weeks of feature freeze.
arena
hblumberg
Problem Many clicks are required to apply a tag It's difficult to see if a tag is applied to a conversation
Proposed Solution Streamline tag management. I suggest taking inspiration from an app like Trello where the interaction is: (1) click on "TAGS", (2) click any applicable tags (make a checkmark appear on the clicked label), then (3) click outside --> 3 clicks to get tags, no more save button. (Trello uses labels, not tags, but same thing)
Make applied tags show at the top of the conversation Once a tag is applied, show it at the top (ideally color coded) and make it clickable to reveal the same tag menu that you can use to apply tags from the "TAGS" button.
Wrinkle: the Escalate tag could be in a separate area with a note about how to use it. Something like: horizontal line, "Use this tag sparingly: [escalate]"
Visuals I've started a Figma file with some screen shots of the current design (Fall 2019), some inspiration, and the beginning of some mockups. Let me know if you are going to work on this and I'll happily dial in the mockups based on available libraries, etc. https://www.figma.com/file/mx3shfewd8IETe10qaSMFu/Streamline-Tagging-in-Spoke?node-id=0%3A1
(Note: this was initially submitted as an issue to the upstream version of Spoke, makes more sense here https://github.com/MoveOnOrg/Spoke/issues/1263 )