Add "create new tag" when tag search for not found

[SimonLab]

From #217 (comment)

For a new person there are no default tags so when they attempt to add tags from the "home" view:
They need to manually go to the /tags page in order to Create Tag
This is undesirable UX. We definitely don't want to force people to change contexts to create a tag.
This is a "Why?" moment and should be avoided.

One way to resolve this is to add a "create tag" link similar to the way Github is doing for labels

I think we can avoid having a modal and creates the tag directly by assigning a default colour to it.

Concerning creating default tags for new user, this might be useful, however it might depend on the context where the user uses the application, so I don't have a specific list of tags in mind yet that is general enough to be used by anyone.

[nelsonic]

@SimonLab thank you for opening this issue to capture the tags creation workflow. 💬
While the GitHub "create label" interface is "OK", I wouldn't use it as a reference on best UX. 💭

In the MVP we want the ability to add tags to be as seamless as possible [stating the obvious... 🙄]
Modals are never the answer. 🙅

if we are resorting to Modals we have failed at UX! 🤦‍♂️

Longer-term we want to think about all of our UX from first principals to build the simplest most intuitive "No-UI".

e.g: a Terminal / CLI App would allow someone to write:

dwyl "buy bread from @bakery 12:00 #food"

That would create a shopping list item that has:

• Location: bakery
• Date/time: 12:00 (today)

  The interface could respond with:
  "The bakery is 5 minutes walk from @home
  do you want me to remind you 10 minutes before 12:00 so you can head out? Y/N"

• #food creates the food & shopping-list tags

But ... for the immediate UI/UX in the MVP we can just have an in-line tag creation form.
If that requires too much Alpine.js wizardry 🪄 please LMK! 🙏
We might be reaching the point where we need to strip-back the UX in the PETAL MVP
and save the "fancy" stuff for Flutter... 💭

As for a set of default tags ... Ref: dwyl/app#224 🏷️

[SimonLab]

But ... for the immediate UI/UX in the MVP we can just have an in-line tag creation form.

Isn't it what we had before #209 ?:

I might need more clarity on the UI to make sure I'm not going to build something unwanted, at the moment I'm not sure what should the end result for the tags feature on the MVP be.

Are you thinking of something similar to:

I think having the "create tag" feature in the dropdown makes the UI less busy than having another input for creating tags.

Or do you have something completely different in mind for the UI? Sorry I'm not sure what you mean with in-line tag creation form.

dwyl "buy bread from @bakery 12:00 #food"

I like the simplicity of this. I'm not sure if there is a specific issue for this (I'll have a look), we might need to think how to manage duplicates, typos or long list of tags. This might make the item's text bloated. But we can talk/test this later on

[nelsonic]

With the introduction of the tags selection Widget, 🪄
a new person using the MVP for the first time 🆕
has a significantly degraded UX: 😢

new-tag-ux-fail.mov

Even if we have to revert back to the "old" manual entry of comma-separated tags 🔙
or hide tags completely for new people, we cannot afford UX like this. 😢
Not trying to be difficult, but "as a new user, this suuuuucks...!"
I wouldn't use this App. Would you @iteles? 🤷

[nelsonic]

Seriously, count how many steps there are to create your first item in the MVP now:
Let's apply a Regular 3G Throttle to simulate being off WiFi so the page transitions are clearer:

dwyl-mvp-first-time-use-3G-throttle.mov

Steps to Create First item with a tag in MVP:

1. Start typing item.text in the textarea ... ⌨️
2. See tags field below item.text that has no tags ... 👀
3. Click/tap on edit tags
4. Taken to another page [full refresh] no explanation of what "Tags" are. 🤷‍♀️
5. No input field to immediately create a new tag ... What now...? 🤷‍♀️
6. Click on Create Tag button [Another full page refresh -> "New Tag" page] ⏳
7. Now there's a Text label and input for creating tags but no placeholder or focus() ...
8. Click into the input form element that has no placeholder.
9. Type the tag.text; no clue if a multi-word tag is appropriate
10. Color? Why would my tag need a color? 🤷‍♀️
11. Click on the color-picker ...
12. It's all black that seems kinda pointless ... [this is the default color picker in Firefox on Mac; iOS Safari is better]
13. Select a Color [color picker is not dismissed; on iOS have to click "X" in top-right corner to dismiss]
14. Dismiss Color Picker by clicking "X"
15. Click Save button. [full page refresh -> Listing Tags page displays "my tag"]
16. "Back to tags" text under the Save button. No hyperlink or button appearance. 🤷‍♀️
    If you accidentally click it you lose your the tag you're trying to create ...
17. Tag created. Now what? 🤷‍♀️ [No navigation to take me back to the main UI/UX. I'm Stuck...! 😢]
18. Click @dwyl logo in top Nav [Full page refresh -> Back to home page where my item.text was lost...]
19. Re-enter item.text, I've now forgotten why I came to this site in the first place. But at least I have a tag ... 🏷️
20. Manually select the tag I just created. Tags input covers Save button ... 🤷‍♀️ Have to click back into item.text ...
21. Click Save button. item finally created ... 🎉
22. But in the course of these 20+ steps to create a todo item, I've realised that this this App wasn't designed to save me time so I'm going to close it and NEVER come back. 👎

I feel like I'm in a UX dystopia ... I was presenting this to a "first-time user" it would be Game Over 💀
Again, please don't take this personally. The fact is that the UI/UX is not sufficiently "mapped out"
so instead of being able to implement things fast we are fumbling with this.

If anything it's my fault. I just wish all of this was (good vs. bad UX) was obvious ...
But It's not. That's why there are still Modals everywhere ... 🤦‍♂️

We need to constantly ask ourselves: "Are there too many steps?" and "Can we remove steps here?"

Good design is removing everything that doesn't need to be there:

For every Dieter Rams there are 10k designers who over-complicate things ... Not because they are "bad" but because they don't feel the pain themselves so don't feel the urgent need to fix it.

[iteles]

I think it's pretty obvious this UI wont work. It's clunky and laborious (and probably unfinished as yet). Even for an MVP, this isn't a testable feature because it's obviously not going to function in an actual app that users enjoy using.

I also understand that it's difficult to think through UI without modals because they are everywhere and have the advantage of allowing a user to feel like they can do a little aside task without abandoning the task at hand.

I think you were right when you said this above @SimonLab, it's not like you didn't know and ask for help in advance!

I might need more clarity on the UI to make sure I'm not going to build something unwanted, at the moment I'm not sure what should the end result for the tags feature on the MVP be.

Right now the problem we have is that @nelsonic is having to do everything from code review to example code to design to product management, with a preemie newborn and toddler in the house, not much sleep and much less time.

It's clear that we can't move forward with any feature without defining the UI, this is what we have to solve for. Thinking cap on

[nelsonic]

@SimonLab thanks again for opening this issue to capture the UX of adding tags. 👍
As noted above #221 (comment) I agree that the UX isn't great. 👎
Let's try and go through this now on standup to see if we can draft some UI to implement. 👨‍💻

[nelsonic]

On our standup call we looked at https://github.com/Choices-js/Choices |> https://choices-js.github.io/Choices

Our first step is to remove the need to edit tags from the page.
As @SimonLab said on Standup, we can add tags by hitting the Enterkey.
Please note: the Enter key currently submits the form so if you wanted to add multiple tags it will only capture the first one before submitting the item. So the person will be forced to edit their item.
And currently there is no way to edit/update the tags:

dwyl-mvp-cannot-edit-update-tags.mov

This is definitely a UX regression. We used to be able to edit/update tags. 😿

[nelsonic]

I've tried my best to simplify/specify the UI/UX of adding/removing tags in:
https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=246%3A2

This will inevitably feel like a "step back" in terms of functionality/features.
I've removed the ability to "create new tags", "edit tags", "delete" or select a specific color.
All of these features are nice-to-have but are a total distraction until the "basics" are bulletproof.

LMK your thoughts on standup tomorrow. 🙏

[nelsonic]

So ... "Tag search" is not searching from a pre-defined list.
If the tag you want is not in the suggested list, it is automatically created.
There is no separate interface for creating a new `tag.

Therefore I consider this issue to be a non-issue. 💭

[iteles]

@nelsonic On this last comment, are the tags case and space sensitive?
I would be keen to test out the hypothesis that we don't want them to be case sensitive - i.e. If I forget to capitalise a tag name when searching, I don't want a new, non-capitalised tag to be created.

Happy to open a new issue if you don't think this belongs here.

[nelsonic]

@iteles agree; tags should be case insensitive when searching. 🔍
But when displayed we don't want to limit ourselves to lowercase. 🆙
A new issue is a good idea to capture as many of the requirements as you can. 🙏