While I want people that I mention in some of my posts to be aware that they’ve been mentioned by me, I don’t necessarily need to add to the visual cruft and clutter of the pages by intentionally calling out that link with the traditional color change and underline that <a> links in HTML often have. After all, I’m linking to them to send a notification to them, not necessarily to highlight them to everyone else. In some sense, I’m doing this because I’ve never quite liked that Twitter uses @names highlighted within posts. All the additional cruft in Twitter like the “@” and “#” prefixes, while adding useful functionality, have always dramatically decreased the readability and enjoyment of their interface for me. So why not just get rid of them?! I’m glad to have this power and ability to do so on my own website and hope others appreciate it.
In the past I’ve tried “blind notifying” (or bcc’ing via Webmention) people by adding invisible or hidden links in the page, but this has been confusing to some. This is why one of the general principles of the IndieWeb is to
Use & publish visible data for humans first, machines second.
Thus, I’ve added a tiny bit of CSS to those notification links so that they appear just like the rest of the text on the site. The notifications via Webmention will still work, and those who are mentioned will be able to see their names appear within the post.
For those interested, I’ve left in some hover UI so if you hover your mouse over these “hidden” links, they will still indicate there’s a link there and it will work as expected.
As an example of the functionality here within this particular post, I’ve hidden the link on the words “mentioning” and “person-tagging” in the first paragraph. Loqi, the IndieWeb chat bot, should pick up the mention of those wiki pages via WebSub and syndicate my post into the IndieWeb meta chat room, and those interested in the ideas can still hover over the word and click on it for more details. In practice, I’ll typically be doing this for less relevant links as well as for tagging other people solely to send them notifications.
I’m curious if there are any edge cases or ideas I’m missing in this sort of user interface? Sadly it won’t work in most feed readers, but perhaps there’s a standardizable way of indicating this? If you have ideas about improved presentation for this sort of functionality, I’d be thrilled to hear them in the comments below.
Twitter:
Improving user experience with links, notifications, and Webmentions
Improving user experience with links, notifications, and Webmentions
@c FWIW, on Mobile Safari, those hidden links are most definitely not hidden 😉
I really like this idea Chris. I must admit that I have become more aware of my links since activating Refbacks. There are some mentions which I include for me and I wonder about making them hidden as you are suggesting with the names.
The one thing I would like is a means of easily searching ‘users’ I have mentioned. That is one thing that I liked about Google+. However, I don’t really want the @ or +.
I really like this idea Chris. I must admit that I have become more aware of my links since activating Refbacks. There are some mentions which I include for me and I wonder about making them hidden as you are suggesting with the names.
The one thing I would like is a means of easily searching ‘users’ I have mentioned. That is one thing that I liked about Google+. However, I don’t really want the @ or +.
Chris Aldrich’s clever solution for not drawing attention to visible but “hidden” links doesn’t quite work as advertised, at least not for me in Firefox on OSX.
@c Chris, a warning. This sounds like one of the oldest black hat SEO tricks probably from pre-CSS days: coloring your links the same as your background. This was used back when people started selling links for link popularity purposes to effect the search engines and the search engines were cracking down. Maybe I’m reading it wrong but this sounds like a variant of that.
It’s so old I’m not sure anyone remembers it, even Google, but if they do, it could incur a penalty because search engines can’t interprit your good intent.
I didn’t realize Twitter highlights all that information. I agree. Get rid of all of it. That’s got to be a horrible reading experience.
I didn’t realize Twitter highlights all that information. I agree. Get rid of all of it. That’s got to be a horrible reading experience.
I didn’t realize Twitter highlights all that information. I agree. Get rid of all of it. That’s got to be a horrible reading experience.
I didn’t realize Twitter highlights all that information. I agree. Get rid of all of it. That’s got to be a horrible reading experience.
I didn’t realize Twitter highlights all that information. I agree. Get rid of all of it. That’s got to be a horrible reading experience.
a post
a post
a post
@smokey Thanks. I’d tried it on a handful of browsers both desktop and mobile and hadn’t seen any issues. I didn’t try mobile Safari however. I’ll see if I can test it.
@bradenslen I also vaguely remember that, though I didn’t pay much attention to SEO at the time. Even now I don’t care that much about SEO for my personal site. For the moment I’ll let go of worrying about it, though it’s something I’ll keep in the back of my mind.
The tough part is that the way I’m doing it in CSS, it only works when viewing on my website as other sites, readers, and even browsers (depending on settings) will use different CSS and displays. So it won’t necessarily benefit everyone. I also spent a few minutes thinking about how it might affect accessibility, but I think that most screen readers will still see them as links and present them as such, so hopefully there are no problems there.
@c @bradenslen This doesn’t effect screen readers, but it does effect people who are low-vision who don’t use a screen reader, and possibly color blind people as well.
@arush That’s a good point. I don’t mind clutter, I like links to stand out.
I’m getting a lot out of these ruminations you’re doing about links as
notifications. For me, I think I’m going to include a ‘cc’ bit of post metadata,
much like I already have ‘via’ metadata, to advertise the original source for a
bit of hypertext. Cool idea.
The idea of a ‘bcc’ is even more interesting—it isn’t possible to have secret
recipients listed in the HTML. They would need to be encrypted or something.
E-mail actually removes the ‘Bcc’ header for recipients. I put this in the same
category as encrypted private posts—very tricky to fit into the Indieweb and
possibly just wrong for it.
So, I think person-tagging encompasses all of the normal e-mail send actions:
Direct reply. The text is meant for that individual to read. It’s important to
show the person-tag, because it is important context.
Cc. The text is relevant to the individual and it’s relevant to show the
person-tag to all readers.
Bcc. The text is relevant to the individual, but their connect to it is meant
to be private.
And there seem to be other connections beyond these:
Mentions. The individual is a subject of the text. While they might be
notified of this, it is more important that readers see the connection.
Unlinked mentions…? What if you had an individual who was the subject of the
text, but you didn’t want to notify them? You may want to include an unlinked
@boffosocko, to refer to someone without summoning them. But—what if you
wanted to link readers to the person without notifying them?
Group syndication. All of the above actions could be used for a group URL
(such as IndieNews or Indieweb.xyz) as an alias for a group of individuals.
This is similar to a mailing list e-mail address.
It feels like there might be much more than this.
I do see the purpose of these “@” and “#” prefixes—as a type of miniature
language for simplifying linking. However, there is no distinction between
‘reply’, ‘cc’ and ‘bcc’ with the “@” prefix. (Micro.blog has a problem—or, at
least it did a few months ago—if you send a Webmention to a micro.blog
username, it prefixes the post with an @-mention, even if you’re only mentioning
them in the post. This is confusing, because the post may not be a direct reply,
but it ends up looking like it.)
I do think Indieweb blog software could
improve on these by letting you type shortcut prefixes for ‘reply’, ‘cc’,
‘mention’, etc. types of person-tagging—and then turning them into just normal
links or post metadata, rather than keeping the prefixes in there. (I think
Facebook does this.)
Syndicated copies: