User Interface to Indicate Posting Activity

In addition to the sparkline graphs I’ve got in the sidebar of my website, I’ve recently been looking at alternate ways to indicate the posting activity on my own website.

An example of a sparkline graph on Boffosocko.com. A blue line indicates the comment posting velocity and an orange line indicates the comment velocity.
“Monthly activity over 5 years” for both posting activity as well as commenting activity on my website.

Calendar Heatmaps

Yesterday I was contemplating calendar heatmaps which are probably best known from the user interface of GitHub which relatively shows how active someone is on the website. I’ve discovered that JetPack for WordPress provides a similar functionality on the back end (in blue instead of green), but sadly doesn’t make it available for display on the front end of websites. I’ve filed a feature request to see if it’s something they’d work on in the future, so if having something like this seems useful to you, please click through and give the post a +1.

Orderly grid of squares representing dates which are grouped by month with a gradation of colors on each square that indicate in heat map fashion how frequently I post to my website.
A screen capture of what my posting “velocity” looks like on the back end of my website. The darkest squares indicate 30+ posts in a day while the next darkest indicate between 15-30 posts. My “streak” is far longer than this chart indicates. I obviously post a LOT.

Circular Widthmaps

Today I saw a note that led me to the Internet Archive which I know has recently had a redesign. I’m not sure if the functionality I saw was part of this redesign, but it’s pretty awesome. I’m not sure quite what to call this sort of circular bar chart given what it does, but circular widthmap seems vaguely appropriate. Here’s a link to the archive.org page for my website that shows this cool UI, screencaptures of which also appear below: http://web.archive.org/web/sitemap/https://www.boffosocko.com/

Instead of using color gradations to indicate a relative number of posts, the UI is measuring things via width in ever increasing concentric circles. The innermost circle indicates the root domain and successive levels out add additional paths from my site. Because I’m using dated archive paths, there’s a level of circle by year (2019, 2018, 2017, etc.) then another level outside that by months (April 2019, March 2019, etc.), and finally the outermost circle which indicates individual posts. As a result, the width of a particular year or month indicates relatively how active that time frame was on my website (or at least how active Archive.org thinks it was based on its robot crawler.)

Of course the segments on the circles also measure things like categories and tags on my site as well along with the date based archives. Thus I can gauge how often I use particular categories for example.

I’ll also note that in the 2018 portion of the circle for July 11th, I had a post that slashdotted my website when it took off on Hacker News. That individual day is represented as really wide on that circular ring because it has an additional concentric circle outside of it that represents the hundreds of comment URL fragments for that post. So one must keep in mind that things in some of the internal rings aren’t as relative because they may be heavily affected by portions of content further out on the ring.

Interface that presents concentric circles with archived links of a website. The center circle is the domain itself while outside portions of the circle include archive pages, categories, pages, posts, and other portions of a site.
My website posting activity (and a little more) from 2018 and before according to the Internet Archive.
Interface that presents concentric circles with archived links of a website. The center circle is the domain itself while outside portions of the circle include archive pages, categories, pages, posts, and other portions of a site.
My website posting activity (and a little more) from April 2019 and before according to the Internet Archive.

How awesome would it be if this were embed-able and usable on my own website?

Extension of the Insights » Posting Activity functionality

Filed an Issue Automattic/jetpack (GitHub)
Increase your traffic, view your stats, speed up your site, and protect yourself from hackers with Jetpack.

I’ve been enjoying the idea that JetPack is providing a Github contributions-like functionality at https://wordpress.com/stats/insights/example.com under the heading Posting Activity.

Orderly grid of squares representing dates which are grouped by month with a gradation of colors on each square that indicate in heat map fashion how frequently I post to my website.

Seeing this naturally provides me some additional motivation to post more often, which is generally a good thing for the platform. It also dovetails in visually with the “you have posted X days in a row” notifications sent by the mobile app.

I’m sure it all may be on the roadmap somewhere, but in case it’s not I thought I’d leave a few ideas about continuing to extend this awesome functionality and related UI features.

  • It would be nice to be able to display more than one calendar year of activity. Perhaps a tabbed UI could provide access to prior years while still being relatively compact? (This could be similar to “All Time Views” just below it which has button (aka tab) options for “Months and Years” or “Average per Day”.
    A visual representation of the button/tabbed functionality for "All Time Views" described in the text.
  • While hovering over a particular square representing a date provides some useful information like the number of posts on a particular date, it would be awesome if clicking on that date would take one to the correct archive page for that date. This is not too dissimilar to from GitHub’s functionality and the permalinks for each day should already exist in core. Example: https://example.com/2019/04/17 to show all of that day’s posts.
  • Similar to the functionality for posts, it would be interesting to have a similar set up for comments to allow sorting through those visually as well.
  • It would be awesome to have all of the above rolled up into a widget that would allow one to post the visual data for several months and/or years visually on a sidebar, footer, or other widgetizeable area. This also provides site readers the ability to quickly jump to a particular date and/or set of posts much like the Archives widget allows, but with a more visual interface.
  • If there is a widget, while I’m sure that many will love the blue WordPress-based color scheme, many will want to key their colors off of their theme as a customizable widget option.
  • Given the infrastructure for creating a lot of the above functionality, one could go a half step further and create an “On this Day” feature similar to that of Facebook, Timehop, and many others which allow one to create archive page views for what happened on this same day a year ago, two years ago, three, four, etc. This could be wonderfully useful for a wide variety of sites to look back at birthdays, anniversaries, and red letter dates as well as the average Tuesday. To my knowledge there is only one old plugin that I was able to find after some serious search that has somewhat similar functionality: Room 34 presents On This Day. There is also some similar functionality like this recently built into the Post Kinds Plugin which creates archive views for several date-based permalinks. This would be all the better if there is a better API for such an endpoint so that it could be tied into third party platforms like Timehop which are overly focused on social sites like Facebook, Twitter, Google, etc., but which could include WordPress-based websites.

Also as I post this, and as I’m thinking the functionality is relatively new, I notice that my JetPack enabled .org site only has Posting Activity that goes back to mid-October 2018 (despite the fact that it should go back much further), while my wordpress.com site has data that goes far back beyond that date. Is this a potential bug, or could it be the case that my self-hosted site hasn’t been parsed back far enough to cover more time yet? It may also be related to the fact that I’ve recently (this week) disconnected and reconnected JetPack to do some troubleshooting.

Watched For Patients, by Patients: Pioneering a New Approach in Med-Tech Design by  Innovate Pasadena: Friday Coffee Meetup Innovate Pasadena: Friday Coffee Meetup from YouTube

I was ten years into a career as a user experience designer making new digital products when diabetes blew my family's life apart. The complexity and relentlessness of the burden of care that came with my youngest daughter's diagnosis at 1.5 years old, were overwhelming. I learned that people with diabetes are always 10 minutes of inattention away from a coma. Run your blood sugar too low and risk brain injury or death. Run too high and you do cumulative damage to your organs, nerves and eyes. And as a designer and hardware hacker I couldn't accept the limitations and poor User Experience I was seeing in all the tools we were given to deal with it.

Then I discovered Nightscout (a way to monitor my daughter's blood sugar in real time from anywhere in the world) and Loop (a DIY open sourced, artificial pancreas system that checks blood sugar and adjusts insulin dosing every five minutes 24/7) and the community that produced them. For the first time I saw the kinds of tools I needed and true power of solutions that come from the people living with the problem. When I learned about the Tidepool's project to take Loop through FDA approval and bring it to anyone who wants to use it to give the same freedom and relief that we've experienced from it, I had to get involved. Now we are taking an open source software through regulatory approval and using real-life user data from the DIY community for our clinical trial in a process that is turning heads in the industry. We'll get into the many ways this story demonstrates ways that user driven design, open source models and a counterculturally collaborative approach with regulators are shifting the incentives and changing the landscape toward one more favorable to innovation.

Here’s the video I mentioned yesterday. Those deeply enmeshed in the IndieWeb movement and many of its subtleties will get a ringing sense of déjà vu as they watch it and realize there’s a lot of overlap with how (and why) Matt Lumpkin is working to help those with type 1 diabetes and the IndieWeb. Perhaps there are some lessons to be learned here?

There was an eerie and surprisingly large overlap of a lot of what Matt Lumpkin said in his talk this morning and the IndieWeb movement. If you just change the disease from Type 1 Diabetes to Social Media, there are a tremendous number of similarities between the two approaches of problems to be solved in terms of giving people agency, ownership of their data, the silo nature of the big corporations in the space, and the lack of solid inter-operability and standards.

I can’t wait for Chuck Chugumulung and the gang to get the video for this week up on YouTube so I can share it with colleagues.

Based on what I’ve heard, it might not be a completely terrible thing to class what the IndieWeb is working on fixing as a broad public health issue–but in its case a mental health one instead of a pancreas and diet related one.

Matt Lumpkin on stage pointing at a slide on the screen stating "Restoring one's own agency is the most critical task for people working to negotiate a healthy relationship with a chronic disease."
Matt Lumpkin during his talk “For Patients, by Patients: Pioneering a New Approach in Med-Tech Design“.
Matt Lumpkin on stage with a slide displaying the text "Do the people who use the things you make feel their power returned to them?"
Another IndieWeb sentiment in a presentation on UX/UI for improving health of people dealing with type 1 diabetes.

👓 Most eCommerce Reviews are Missing this Feature | Chris Lema

Read Most eCommerce Reviews are Missing this Feature by Chris Lema (ChrisLema.com)
When you look at tons of online stores, you quickly realize most eCommerce Reviews are missing this one critical feature. It's what we're working on now.

It’s not exactly an implementation of Webmention, but I was interested to find that there’s a tool from Hypothes.is that will show you (all?) the annotations (and replies) on your website.

Just visit https://jonudell.info/h/facet/ and then enter the appropriate domain name followed by /* as a wildcard to search.

Examples for:

Now wouldn’t it be cool if this were available in the main UI? Perhaps if there were a button for “Site notes” or highlights? This may be unwieldy for the New York Times, but could be reasonable and very useful for smaller personal and/or academic based websites.

The user interface for the side bar of Hypothesis with a "Site Notes" element added in red next to "Annotations" and "Page Notes"

Replied to What should the list look like? · Issue #43 · jkup/awesome-personal-blogs by Jon KupermanJon Kuperman (GitHub)

Hey @fjoshuajr @lipis @hugmanrique @aletaschner

All of you submitted awesome ideas for what the list should look like! PRs were coming in so fast yesterday it kind of got lost in the shuffle so I was hoping to move the conversation into a single thread.

My thinking was:

  1. Make it a Markdown table
  2. Maybe a separate table for each letter of the alphabet?
  3. Add at least a field for what subjects the person talks about

How does that sound? Should we do something different? Hope you don't mind but I'm gonna close the other issues in favor of discussing it all in here!

Thanks!

I’ve seen a few somewhat similar directory projects like this that might have some useful ux/ui/design ideas:

For additional metadata, one could run a microformats parser on the homepages of these sites and return social media presences in other locations using XFN’s rel="me" set up. Something like this is done by Jeremy Keith on his Huffduffer.com service where one signs up and inputs one’s website. His service then doesn’t need to ask for Twitter, Facebook, or Github handles explicitly. Instead it relies on the service going to the homepage listed and pulling out the rel="me" values and doing it automatically on their behalf. Since many web platforms have this microformat value it can make the data acquisition easier and less manual in many cases.

👓 The ineffectiveness of lonely icons | Matt Wilcox

Read The ineffectiveness of lonely icons by Matt WilcoxMatt Wilcox (Web Developer & Tinkerer)
If your target audience is a general population, you should not be using icons alone to convey anything meaningful. By doing so, you have made assumptions that are unlikely to be appropriate to a general audience.

Hat tip Brad Frost

📑 Exploring the UX of web-annotations | Tom Critchlow

Annotated Exploring the UX of web-annotations by Tom CritchlowTom Critchlow (tomcritchlow.com)
Especially on mobile.  

I’ve found in the past that highlighting on Chrome for Android was nearly impossible. I’ve switched to using Firefox when I need to use hypothes.is on mobile.

👓 Kara Swisher interview with Jack Dorsey: Highlights | Recode

Read Kara Swisher interview with Jack Dorsey: Highlights by Kurt Wagner (Recode)
How hard is it to have a conversation on Twitter? So hard even the CEO can’t do it. Kara Swisher’s live-tweeted interview with Jack Dorsey highlighted some of Twitter’s product issues.

👓 Adrian Roselli on Twitter: “I just wanted underlines on links on Mastodon, not to write a damn thesis. At least clients *want* your advice. https://t.co/7GLtTUqfjx””

Read a tweet by Adrian RoselliAdrian Roselli (Twitter)
“I just wanted underlines on links on Mastodon, not to write a damn thesis. At least clients *want* your advice. https://t.co/7GLtTUqfjx”

👓 Added underlines to links in toots by aardrian · Pull Request #9898 · tootsuite/mastodon

Read Added underlines to links in toots by aardrian · Pull Request #9898 · tootsuite/mastodon (GitHub)
Link text color is #f1ebff, surrounding text is #ffffff. They have a contrast ratio of 1.2:1. Not only is hard to see links that are so close in color to the text, they also require a pointing devi...

An insane thread to be sure. Some useful information about accessibility here, though one will need to look past a lot of fud.

👓 Instagram’s Archive feature is now available for everyone to hide embarrassing old photos | The Verge

Read Instagram’s Archive feature is now available for everyone to hide embarrassing old photos (The Verge)
Instagram is releasing its Archive feature to all users today, after testing it with a smaller group of people last month. The feature lets anyone on Instagram hide their old posts without deleting...

👓 My New Posting Workflow | grant.codes

Read My New Posting Workflow by Grant RichmondGrant Richmond (grant.codes)
So I have been working away on some new features on my site for quite a while now and it looks like everything is about ready. Honestly I don't particularly enjoy writing long-form content, so it is kind of strange that I have really enjoyed working on this new functionality.The Inspiration I was ra...

This is awesome Grant!

May have been a nice addition to add some links to the browser extensions (or maybe I missed them?) and make it more explicit that they’re publicly available. Can’t wait to try this out!

👓 A more complicated web | Christian Heilmann

Read A more complicated web by Christian HeilmannChristian Heilmann (christianheilmann.com)

One of the amazing things about the web used to be its simplicity. It was not too hard to become your own publisher on it. You either used one of the now defunct services like Geocities, Xoom, Apple Web Pages, Google Pages and so on… Or you got a server, learned about HTML and CSSand a dash of JavaScript and created your own site. Training materials were online and largely free and open.

We definitely need to do more work on making the web more accessible to the average person…