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.


Published by

Chris Aldrich

I'm a biomedical and electrical engineer with interests in information theory, complexity, evolution, genetics, signal processing, IndieWeb, theoretical mathematics, and big history. I'm also a talent manager-producer-publisher in the entertainment industry with expertise in representation, distribution, finance, production, content delivery, and new media.

25 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. Aaron Davis says:

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

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

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

  5. 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 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. ( has a problem—or, at
    least it did a few months ago—if you send a Webmention to a
    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:

Leave a Reply

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