Improving user experience with links, notifications, and Webmentions

Back in December, I was thinking about html links and the functionality of sending notifications using webmentions. Within the IndieWeb, this is known as mentioning or potentially person-tagging someone (inline). By adding a link to a person’s website onto any mentions of their name in my posts, my website will automatically send them a notification that they were mentioned. They can then determine what they want to do or not do with that information.

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:

16 thoughts on “Improving user experience with links, notifications, and Webmentions”

  1. 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 +.

  2. @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.

  3. @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.

Bookmarks

Mentions

  • Kicks Condor

Leave a Reply

Your email address will not be published. Required fields are marked *