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.
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.
@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:
I discovered yesterday that when I added a # (or hash, pound sign, octothorpe, et al.) in front of any word on my site, it created a native version of something akin to Twitter’s #hashtag functionality, but it was working on my own website. The primary difference was that the hashed word on the page was, upon publishing the post, automatically wrapped with a URL for that tag on my own website, and it was also automatically added to the list of tags for the post. (As an illustrative example, I’m doing the same thing with the word hashtag earlier in this paragraph.)
I had previously considered adding this type of functionality myself to make syndicating posts (via POSSE) from my own website to sites like Twitter or Mastodon easier. There are a small handful of plugins in the WordPress repository that will add that type of functionality already, but I had eschewed them generally, not wanting yet-another-plugin.
I spent some time trying to track down the plugin that was effecting this change. I couldn’t remember having installed something that would have done this sort of functionality, and I had noticed it only by complete happenstance. I eventually gave up my search halfway through only to later get a message from Matthias Pfefferle that his ActivityPub plugin was the likely culprit. I probably should have guessed as I had literally spent part of that very day looking at the code in his IndieWeb News plugin on GitHub which had code that essentially did the exact same thing, but for a narrower set of results.
The upside of the entire process is that the functionality is now built into a plugin which I’d be using otherwise. As of today’s update, there’s now also a setting for the plugin that will allow one to turn the functionality on or off–I, for one, am definitely keeping it. Of course if you’re looking for the functionality without the extra overhead of the ActivityPub code, I believe you can use Matthias’ WordPress hashtags plugin which does only this.
Of course I also remember myself railing against the addition of the symbols @ and # in general text not too long ago, so I’m also now brainstorming and contemplating how one might more quickly (and even in a DRY manner) do this sort of tagging using some other (probably easily accessed, but infrequently used) symbol which could be hidden visually, but which would allow one to add these sorts of tags and the appropriate microformats markup. I suspect there may be some sort of clever CSS I may be able to use too, though it would be better not so that it works easily via syndication and in feed readers with different styling. The goal should be that it would work as plain text from a Micropub client too. With any good luck someone may have thought of it already, otherwise I may be able to hack something simple together to do roughly what I want. The upside would be that simply by writing your post, you could simultaneously be tagging it as well and not need to bother going in and separately adding additional tags!
Syndicated copies:
Getting into bad habits with the bookmarks again. Here are all the open links on my mobile browsers. In mobile Chrome, a collection of reference…