UX | Chris Aldrich

A Modest Proposal Review

Will you look at this?! Twitter has recreated the WordPress Gutenberg editor interface into their web product. Currently it only has a few blocks for text, photos, gifs, video, embeds, and polls, but it’s not completely horrible and it’s relatively fast and convenient.

The Gutenberg editor in WordPress:

The title of the pending post is "Hello to the New Editor" — Screen capture of the new Gutenberg interface

In fact it appears that they’ve pared the editor down substantially. A few more tweaks and it might be as clean as the Medium editor experience.

Want to add a video, just drop a youtube link:

Want to embed a blog post from somewhere else? Add the link in your tweet and get a spiffy Twitter Card (just like oEmbed!)

An Introduction to the IndieWeb

I can see people getting awfully tired of clicking that “plus” button interminably though. Maybe if the interface could algorithmically choose where to break text the same way it determines what tweets I’m going to see?

Now they just need an edit button and they’ve got a “real” blogging experience, but one that’s editable in tiny 280 character chunks. Who has the attention span for more content than this anyway?

I can already tell that newspapers and magazines are going to love this. Just imagine the ease of doing shareable pull quotes this way?!

I can see journalistic institutions rebuilding their entire platforms on Twitter already!

Old CMS -> Tumblr -> Medium -> Twitter!

What is your favorite editing experience?

The Tweetstorm-o-matic
WordPress’ Gutenberg
WordPress Classic Editor
Medium

Uh oh! I’m noticing that they’ve neglected to put a block in for a title area. Maybe we could just do a really short tweet up at the top of the thread instead? If only we could drag and drop tweets to reorder them? At least you can add new tweets into the middle of the stream.

Besides, who’s going to read anything but the headline tweet anyway. No one is ever going to read this far into a tweetstorm. Maybe a blog post where they at least know what they’re getting into, but never a 20+ card tweetstorm.

And would you look at that? They almost jumped ahead of Medium on inline annotations by allowing people to reply to very specific pieces of the text. I’m kind of disappointed that they don’t have the pretty green highlighter colors though.

Screencapture from Medium.com with an example of an inline response. — An inline annotation on the text “Hey Ev, what about mentions?” in which Medium began to roll out their @mention functionality.

Now if only I could register a custom domain on their service and have control over the CSS, Twitter could be a first class open web CMS.

#ICanOnlyDream

*Sigh* I suppose until then I’ll just stick with my humble little website that allows me to own and control my own data on my own domain name and communicate with others using simple web standards.

#IndieWebForever

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.

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.

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”.
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 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 #WeAreNotWaiting 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.

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.

Replied to What should the list look like? · Issue #43 · jkup/awesome-personal-blogs by

Jon 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:

Make it a Markdown table

Maybe a separate table for each letter of the alphabet?

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:

https://personalsit.es/ with repo at: https://github.com/andybelldesign/personalsit.es
https://nownownow.com/

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.

Example: Jeremy’s profile (see the “Elsewhere” section and compare it to his personal website.)
Details about some of the implementation:
- https://adactio.com/journal/1533
- Relevant section from book Microformats Made Simple
- https://indieweb.org/rel-me
- http://microformats.org/wiki/rel-me

📑 Exploring the UX of web-annotations | Tom Critchlow

Annotated Exploring the UX of web-annotations by

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

👓 My New Posting Workflow | grant.codes

Read My New Posting Workflow by

Grant 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!