Kill the ugly [add] buttons in edit mode

[twMat]

In a discussion I formulated something that has distrubed my sensitive aesthetic senses ever since it was implemented ;-)

Compare these two. Which one has something very ugly and cluttery in it?

I argue that the ugly [Add] button is not needed! Here I only exemplify with tags but it is equally valid for the custom fields [Add] button.

The ugly button currently serves two purposes:

1. To confirm the string so it is indeed saved as a tag. But this is already taken care of when saving the tiddler, you don't have to manually click the Add button. (Good!)
2. Confirm that you're finished typing the string so you get a new little "tag rectangle" in which to type yet another tag string.

But no.2 can more elegantly be solved like so:

As soon as there is no empty "tag rectangle", one is added. I.e if you start to type into the default one, then a new one appears automatically. Or if you chose+Enter on an existing tag in the dropdown, again a new empty one is added. I.e (only) one single such empty "tag rectangle" exists, and it exists all the time.

- THIS MUST DIE.

(Yes, I am enjoying the verbose freedom in Discussions that was restricted in Issues ;-) )

[OdinJorna]

An idea for replacement of the add button. When you enter a new tag, the text in the tag pill chances to cursive, indicating a not yet existing tag. (same with tiddler titles in lists). Then the text: add this a new tag would also pop up to the right which would be clickable to add the tag. Because if the add button wasn't there, you could only add tags with the keyboard.

[OdinJorna]

I would even do the 'add this as a new tag' text in cursive. Now that I am looking at it.

[pmario]

I think, it would be OK to remove it, as long as we can guarantee, that users don't break the "input field" ENTER keyhandling.

[Jermolene]

Thanks @twMat. I think the explicit "add" button provides an important prompt for users, letting them see the available functionality without having to guess what the text box is for.

[gernert]

@Jermolene @twMat
In my Dutch translation I just use a + button.

[pmario]

Does the + button look better?

[gernert]

@pmario
I think so. But to be honest the Dutch translation of 'Add' ('Voeg toe') was far too long which caused 'wrapping'.

[pmario]

ah, OK

[twMat]

Here is a prettier UI that certainly makes it clear it's about tagpills to show the functionality without having to guess what the textbox is for.

Default appearance of field and placeholder text.

One could argue the placeholder text should be "Type new tag" or "Type tag name" instead if "Add new tag".

Once you begin to type into it, a new field appears with the placeholder prompt:

This following shows a created tag and one in the making and a prompting default one

...

Not in the images, but a thing that would make it even clearer is if the dropdown select arrow is inside the pill.

[twMat]

So no misunderstanding; The rightmost outlined pill is not a button. It is an empty field with placeholder text.

[morosanuae]

@twMat +1. I think one can't go wrong with @twMat proposal. It looks nicer and more intuitive. But I think the rightmost outlined pill SHOULD have the ability to store previous entered tag because of the missing "Add" button.

[Jermolene]

Hi @twMat @morosanuae in the core we try to avoid custom styling on operating system level UI controls like inputs, radio buttons etc. The motivation is accessibility, in the broadest sense. Styling those components prevents the browser from using the operating system default styling, and thus any tweaks a particular user has applied for accessibility.

[morosanuae]

@Jermolene I understand but I think fundamental development principles (rules), like this one, should be collected and noted somewhere in the docs as guidelines for developers. It would also make the TiddlyWiki current architecture/design more "transparent".

[Jermolene]

Hi @morosanuae yes indeed. I'll need some help, many of the principles that guide the core are by now pretty instinctive to me, it takes someone else to judge what principles are distinctive enough to be worth documenting.

[inmysocks]

Removing the add button would make the interface much more confusing for me, and I would make a lot of mistakes having just the text field and saving the tiddler to update tags or fields.

[twMat]

OK, OK, OK everybody, never mind. Here's my new proposal ;-) ;-) ;-) ;-)

[pmario]

hihihi, ... That's not really the same thing, but we get the point ;)

[Jermolene]

It's really not the same thing at all because there is only one title for a tiddler, so it doesn't need separate confirmation.

The combination of a list of tags, plus a text box and button to add a new one is a fairly common idiom, as can be seen by typing "user interface for adding new tags" into Google Image search.

[twMat]

My image is, of course, an exaggerated joke.
For the google image search, I actually see a mix of UIs - some with an Add button and some (even most?) without. For example the very first image I get is this.