User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm making a site where items are tagged. Each tag has its own page. For instance:
dog animal pet english-bull-terrier
Why do sites like StackOverflow use hyphens instead of spaces in their tags?
Is it so that the user can type multiple tags using just the space bar? Or are there other benefits?
The advantage of hyphenating tags allows you to define when a tag starts or ends while if you went for the option of using spaces, there will be a lot of confusion about the start and end point of a tag.
For example, If I wanted to tag San Francisco and my next tag was niners, if I entered all of it together, the system my take the tag as "San Francisco Niners" while I was trying to define two tags.
Another challenge I see is consistency in maintaining spaces between tags or after tags. If I have a space after a tag (which is space separated), then there is redundancy since my tag "Bull Terrier " and "Bull Terrier" denote the same tag but the space after the tag has created a new tag.Similarly if I enter "Bull Terrier" I have two spaces between the words and here a new tag is created.
Lastly spaces between tags as separators due to the difficulty in maintaining consistency can play havoc with the database with regards to maintaining unique values and consistent mapping
I also recommend looking at some of the responses in this question What makes a good tag separator?. To quote the top answer
The - in the tags is technically convenient for a couple reasons:
The - can be used in the URL neatly and reliably shared by email (email programs are notorious for screwing up unformatted URLs). Technically a space would be url-encoded as a + or a %20. However, Google will also interpret dashes as spaces and that's what matters.
In StackExchange you can actually search for tags in the search box and when they have a - in them, the search engine is able to infer that you're looking for tags.
Are we talking technically speaking or visually speaking?
Visually speaking, it would make no difference how tags are shown, as long as they are separated in a way where it is readable. Tell me, can you read this properly?
download bmml source – Wireframes created with Balsamiq Mockups
Now how about this?
Obviously the first example is easier to discern what tag is what because it comes back to the Gestalt principle: Items grouped together appear to be apart of one element.
The second example is harder to understand because you can't tell which one is which. Even if you do add dashes. It comes down to how you organize and group elements to make them more readable.
Technically speaking, that's a different story, and that's not what this place is for. But what I can say is design is how something works. If you figure the design, then you can figure how it works!
