Infographically Disinclined

I don't care for infographics. Their original purpose of visually conveying otherwise complex information has been superseded by their current use as marketing drek with "quirky" illustrations, blocks of prose, and the occasional useful factoid.

The love affair with inforgraphics is confounding to me as a web developer. They are often deployed on the web as a giant image that typically has text too small too read, that cannot be selected, and doesn't include any kind of accessibility affordance. In short, the likelihood I can get one them to display properly in anything other than a desktop web browser is slim.

Doing It Wrong

This example in particular seems to epitomize the poor planning and execution of the typical infographic.

Example of a poorly-done infographic about accessibility in HTML email.

It is intended to convey the challenges of designing and building HTML-formatted emails for users with disabilities. Got that? It's an infographic about accessibility best practices.

How many ways is this doing it wrong, just from an accessibility perspective?

1. All of the text is set as an image. There is no selectable text.


2. At default zoom settings, the text is too small.


3. The text and background colors don't provide enough contrast.


4. The numbered examples require extensive scrolling to see the accompanying text.


5. The blog post of this infographic has useless alt text ("Accessibility-Email-Design-1000px").


6. The title of the blog post is easily as useless (again, "Accessibility-Email-Design-1000px").


7. The blog post itself has no other content. No words, no explanation, no plain-text equivalent.


8. The option to embed the infographic on your site perpetuates the same inaccessible content.

Feel free to suggest more.

I'd also like to qualify that if your infographic is primarily text, you're doing it wrong. All text save for two useless pie charts and a
fake screen capture do not make up for the volume of copy stuffed into this image.

Another example of doing it wrong: NASA's Falling UARS Satellite Explained

Doing It Right

Example of an infographic getting it right, from XKCD.

This simple and direct infographic isn't even meant to be an infographic, but it conveys quite a lot of information in very little space with very few words. In fact, this information is conveyed better visually, with no words, than as long blocks of prose.

At a quick glance you can see the height that the ice achieved relative to familiar landmarks and relative to each of three other cities. No long-winded explanations, no pointless pie charts, just familiar context and simple references to learn more. This is data visualization, simply put.

Another example of doing it right: Wind Map

Giving It a Go

I figured that, on a lark, I'd make my own infographic using HTML and CSS and code it so that it's accessible. Then I realized that I don't have a topic I think is best represented by a graphic. Nor am I a data visualization expert. So I cheated and made a Venn diagram (often labeled as an infographic, even though it's a diagram) about infographics:

Cannot copy text.

Large download.

Forgot its roots.

Cannot copy text + Large download = Flash

Large download + Forgot its roots = Animated GIF

Cannot copy text + Forgot its roots = Text as image

Cannot copy text + Large download + Forgot its roots = Infographic

I also made a version on CodePen if you want to hack it for your own use.

Related

• We've Reached Peak Infographic, and We're No Smarter for It


• 70 best infographics on the web (The number keeps changing as they add more and retweet it, also, I disagree with the assertion in the title.)


• Why your Brain Craves Infographics (I'll give them credit for building it in HTML, even if it's still a text-laden scroll-a-thon.)


• WTF Visualizations: Visualizations that make no sense (added September 12, 2013).


• Creating an Accessible Infographic (added September 23, 2013).

Update: November 11, 2013

SMBC put together a great infographic this weekend, The Top 6 Reasons This Infographic Is Just Wrong Enough to Sound Convincing. It struck a cord with some at Slate, because it got re-purposed over there with a lot of handy links to other infographical horrors: Why Infographics Are Terrible, in One Terrible Infographic.

Read More

My Carousel Use Stats

I started this post way back in March after reading Brad Frosts' bit on carousels. Then I let it sit unfinished. With the buzz around ShouldIUseACarousel.com this week, I figured I'd finish it up. The data is old, although I offer updated numbers at the bottom.

The Process

I looked at all the visits to my home page between February 1 and March 3 to get 30 days of data. Of those visits to the home page, 83% of the time the home page was the landing page. I figured if a smaller percentage of initial visits to our site came via the home page then I would not read too much into the value of these numbers as the user might have already been through enough of the site to get what he or she wanted, but 83% is a pretty big number.

The home page has many content areas, but by far the most prominent is our carousel. During the time frame tested, there were 5 different carousel images with accompanying text. Each one has its own Google Analytics event tracker so I can tell which carousel item has been clicked.

For those playing at home, and using Google Analytics, it's as simple as adding an onclick to your anchor: a href="/Products" onclick="_gaq.push(['_trackEvent', 'Slider', 'Columns']);". In this case I am tracking a custom event named "Slider" with the value of "Columns" (so I know which specific image/slide was chosen).

The Results

In the 30 days I tested, the carousel links were clicked less than 1% of the time the home page was visited — 0.8% to be slightly more precise.

Every other element on the home page received at least twice as much activity, with the tabs getting used nearly 10% of the time. Site-wide, the skip navigation link got clicked (tapped, followed) half again as much as the carousel at 1.2%.

To qualify this a bit, the carousel wasn't intended to serve as our only call to action on the home page. It's more about presenting a message to help brand the company as part of our new marketing push. Adding this tracking feature has allowed us to track how the carousel gets used, if at all, and which images/messages are more compelling.

The Latest Results

For this updated version of my draft post I looked at the last 30 days again (June 11 to July 11, 2013) to see what activity we've had on the carousel. The last 30 days are a good fit since we haven't been showing off the features of the slider to clients (which results in activity that is a function of people playing, not truly discovering and naturally using).

For the last 30 days, the number of clicks on the carousel is much lower. 0.2% of unique visitors clicked a carousel slide. For every 500 unique visits to the site, someone clicks on the carousel. Interestingly, this is the same number of people who print pages from our site and lower than the "skip navigation" activity in the same time period.

About the Carousel

Our site is a great place for us to experiment with the carousel since we can quickly refactor it, tweak it, replace it, and so on. Since its launch 7 months ago I have made a number of tweaks to the technology and we have played around with the messages to see what sticks.

We're revisiting the design of the carousel now to see how its relative size and different images and messages can affect its use. At some point it may go away, but not until I've had a chance to gather lots of data.

The carousel itself is both swipe-friendly and keyboard-friendly, uses a linear flow with a clear start and end, has indicators to show where a user is in the overall collection (also allowing a user to jump to a specific slide), and pauses when there is any action taken on the carousel (hover, click, tap, etc.). I built it to also serve images at appropriate sizes for appropriate devices, something which I am regularly tweaking. The base for this is the Royal Slider.

Related

• ShouldIUseACarousel.com


• Accessibility expert warns: stop using carousels, July 11, 2013.


• Carousels, January 23, 2013.


• Carousel Interaction Stats, January 22, 2013.


• Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility, January 19, 2013.


• Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad, September 27, 2012.


• That big sliding banner? Yeah, it’s rubbish, September 6, 2012.


• 5 Big Usability Mistakes Designers Make on Carousels, August 2, 2011.

Read More

Backing Up Your Social Media

Social media outlets are practically a dime a dozen. Excluding ones that are pretty stable right now (Twitter, Facebook, etc.), most of them will either fail or get bought. The problem is that your data, your content, typically dies when they do.

As an individual you might not care too much if one of the niche services fails. As a business who relies on social media, however, you should care.

Every post to Twitter or Facebook or Blogger or (insert whatever services you use here) represents effort spent to promote your brand. That effort is probably from paid staff (because nobody lets interns have the keys to their global brand, right?) and represents some cost as a result. Cultivated Facebook campaigns, Twitter conversations, Pinterest boards, all represent a combination of your effort and community participation.

When a service goes away, so does the money and effort you spent to cultivate it. So does the community feedback that demonstrates to others that yours is a good brand. So does any SEO benefit it may be giving you. So does the content you created.

I regularly ask social media practitioners how they back up all the data they post to these services and it almost always results in blank stares.

Most organizations make some effort to back up their marketing or sales materials, in addition to their intellectual property, but for some reason social media is left out in the cold.

I'll cover some examples of what I have done and do, along with some tips on how you can plan for your own back-up.

Twitter

Twitter allows you to produce an archive of all your tweets whenever you request it. What you will get is a link to download a ZIP archive which contains a completely stand-alone web site that allows you to see all your tweets. You can use this site right from your computer with no internet connection.

I suggest taking it one step further and creating a folder on your public web site so you and all your team (and even the general public if you want to share the address) can access all of your tweets at any time from any where. This method will also allow you to search all your tweets instead of being limited by Twitter's own date restrictions on searches. For example, I have my Twitter archive at AdrianRoselli.com/Tweets.

Tweets in the archive contain the full content of the original tweet, but do not contain any of the replies to, favorites of, or re-tweets of your tweets. They do, however, link you directly to the tweet at Twitter.com so you can get all that information.

As part of your job as a social media manager I recommend you set up a calendar reminder for the first of each month (or whenever works for you) to download and store your Twitter archive.

Facebook

Facebook also allows you to create an archive of everything you have posted, including photos, videos, wall posts, messages and chat conversations along with the names of your Facebook friends. It does not include comments you've left on the posts of others. An expanded archive option also provides historic information such as your IP addresses for when you have logged into Facebook.

As such, I recommend against posting your entire Facebook archive to your web site as it will probably contain information that you have opted to not share with the general public (especially since it can also contain other people's private information).

I should note that I am talking about a personal profile here, not a business profile. So far I have been unable to find information on how to archive a business/organization profile. Suggestions are welcome.

[Your Blog Here]

Quite a lot of social media involves maintaining a blog. This blog may exist on any one of many platforms, including one you've built yourself. For this example, I am talking about a blog that you host elsewhere, probably for free, such as an option from Wordpress or Blogger, among others.

In an ideal scenario you will have secured a blog sub-domain, such as blog.adrianroselli.com. This is the first step to having some portability and control should your blogging platform go away. It won't be so easy to get adrianroselli.blogger.com if Blogger goes away, mostly because I don't own (and likely would be unable to purchase) the domain blogger.com.

If your blog platform does go away and you have some advance notice, you have some options to get your content before it is lost. Some platforms will offer you a way to get all your content out and other platforms may offer you a way to import that content. If your failing platform doesn't offer an archive, you can always spider the content using a tool like HTTrack.

Ideally you'll want to recreate your content on your new blogging platform, so make sure you also recreate the same page addresses (most of the blogging tools allow you to create a custom page address, though it will be a manual process). In this scenario, any inbound links won't be broken. For those cases where you cannot replicate the page addresses, explore options to create custom redirections with your new blog provider or, if it's on your own server, through server-level mappings.

Pinterest, Tumblr, Instagram, and Other Services

I have used many services over the years, in particular services targeted at image sharing. I have used Brightkite, Plyce, Picplz, Posterous and am now on to Tumblr. With the exception of Tumblr (so far), they have all gone away. I haven't lost my images, however. In the case of Brightkite they made everything available for download for quite some time and in a structured format. Picplz offered the same, but not until many users raised a stink and followed its founder to his next gig to push their point. Posterous made its site available as a static HTML archive.

Had these sites not made the content available, however, I still had a plan to get everything out. I simply spidered my profile page for each site using a tool (HTTrack again) that converts it all to static HTML. In short, I captured every page and every image to a format that I could simply post on my own site or view on my local computer (as I did with Picplz and Posterous). While I cannot replicate the old addresses (similar to the case with a blog domain), I can at least make my content available should I want to reference it again.

When Pinterest or Instagram or Tumblr or insert-service-here announces it is going away, I will simply fire up the same tool and begin my archive process. Each service may very well offer a tool to do this, but I'd rather make sure I have it just in case they don't. In addition, sometimes it's more work to process a stack of JSON files than it is to simply spider the site and post it somewhere on your own site.

Related Bits

• Startups should bend over backwards to let users take their data after they shut down [Updated], June 3, 2012 at The Next Web.


• Proposed Standards for the Care and Feeding of User Generated Content, June 25, 2012 at Zeldman.com


• You Get What You Pay For, December 17, 2010 by me.

Too lazy to read Terms of Service. Just going to upload videos to Vine & Instagram at the same time and let them fight about who owns them.

— Adrian Roselli (@aardrian) June 20, 2013

Read More