Carousels: Finally, One that’s All Grown Up

I’ve always been suspicious of web carousels, especially those that auto-rotate. That’s because the reader can’t control the rate at which information is disseminated*. They might want to look more closely, and POW! you’ve moved them onto the next graphic. Silly rabbit: Let the reader decide if and when to advance to the next slide.

But even if they don’t auto-rotate, they still make me itch, and that’s because there is little to no indication for the reader as to what they’ll find at their next stop. A few years ago, we saw many web carousels like this:

screenshot of state.gov

The navigation is simply “1 | 2 | 3” — and that means nothing. If I click on number 3, will it be a story about a troika? No. The numbers do not correspond to the content whatsoever. Why would I be compelled to click on the number 2 or the number 3? The Internet is not a gameshow, and as a reader, I’m not that interested in what lies behind your mystery door.

Here we see something a slightly better carousel, because it at least gives us a teeny tiny glimpse (literally) into the next story. But there is still much left to the imagination, and if you don’t have a visually compelling graphic (or more specifically a graphic that has compelling content in its right and left margins) then I’m not sure people will ride that carousel.

screenshot from foreignassistance.gov

A screenshot from ForeignAssistance.gov. This carousel is better, because it at least gives a tiny peek at the next story’s graphic and title. But it’s still a guessing game on the part of the reader.

What’s more, you don’t know how many stories are contained in the carousel, and where you are in the midst of those stories. At least the enummerated carousel on State.gov told you how many, even if it couldn’t tell you what.

In light of my feelings about web carousels, you may understand why I was delighted to see The Atlantic‘s lovely take on the old merry-go-round the other day. It’s a big improvement:

screenshot from theatlantic.com

A screenshot from The Atlantic’s website. This carousel is clear and honest.

It combines what’s good about the other two examples above. Namely, it shows scope in terms of quantity and content. Like the State.gov example, it indicates to us how many stories are contained in the carousel. Unlike the State.gov example, it goes beyond enumeration: it gives us the titles of each article in the carousel. It’s better than the ForeignAssistance.gov example, because we see the full title, and not just of the previous and next articles, but of all articles. And we see them at once, without having to hover or click around.

Now, I do see that the carousel auto-rotates, which I don’t really like, but at least the rotation pauses if I hover my mouse over it. It’s still a carousel that’d I’d hop on, and that’s a first. Kudos, Atlantic.

* Edward Tufte argues that PowerPoint is also an example of a technology that removes control over the rate of dissemination of information from the reader.

App Review: eBriefing

Screenshot of eBriefing app

This is, effectively, a table of contents. A pretty table of contents.

eBriefing is an enterprise app developed by some of my friends and colleagues at MetroStar. It is a system comprising a Builder (a SharePoint-based web tool to help people build digital briefing books) and a Reader (a free mobile app that lets people consume digital briefing books). I will confine my thoughts here to the Reader, which I downloaded and explored on my iPad. I have not yet seen a demo of the Builder.

Although eBriefing bills itself as “the first and only electronic briefing book designed for the needs of government and enterprise,” I’d argue it’s the only/first commercial electronic briefing book. That’s because I work in government IT and I know of two other electronic briefing book systems currently in use. The difference is that these systems were developed in-house, whereas eBriefing is available as a commercial product for any government agency to procure. Their description is great:

Say goodbye to old-fashioned paper briefing books. eBriefing transforms the way intelligence is generated, organized and delivered within the enterprise.

So I’m all for transforming the old-fashioned paper briefing book process, but I don’t think that eBriefing truly does this. It does modernize it very nicely, and it’s a nice app, but it doesn’t transform it. Here’s why:

Screenshot of the eBriefing app

This is an ugly table of contents: it’s a holdover from the world of print, and it is just confusing when presented in the digital world of interactivity.

Much like Microsoft SharePoint, this app is genius in that it allows people to continue doing things the old way, but with the satisfaction that they’re using the latest technology. Of course, a tablet is much easier to tote around than a big, honking 3-ring binder. But underneath the hood, not much has changed: we’re still working with a document-based model of content production that has been in place since Gutenberg started making it easy to print books. There is no way to mash up any of the data in these files. The true tragedy is that an app like this doesn’t make use of the affordances of the technology: we’re still limited to the metaphors of a book. Simulated pages simulate turning. We can end up with tables of content that aren’t interactive. But I understand why the designers have used the book metaphor: it’s what we know, and frankly, it’s hard to change our mental models.

And yet sometimes the metaphor becomes tortured. Here, I find this is the case with “bookshelf” and “library,” which are the two main overviews of the app. “Library” is a view of all the books available to you, but still residing on the server. “Bookshelf” is a view of all the books you’ve downloaded and have available to you in an offline mode. While the offline reading mode is an excellent (and necessary) feature, I struggled a bit to figure out the difference between “library” and “bookshelf.” At work, we’ve also been struggling with the “library” metaphor in our app-building efforts, but we’ve conceived of the library as all books available on the device (at rest). I suspect the problem is with the library metaphor in the first place: if you think of library as your town or college library, then it is most like the books-on-server model: you can go get them, but they’re not at home on your bookshelf yet. However, with digital distribution models for books, our sense of “library” has changed, and now it’s much easier to “move” a book from the “bookstore” to your “shelf” with little more than a whisper. So I propose we consider alternative metaphors for use in these applications.

Ok, enough of skeuomorphs. Here are some other observations about usability and the interface design of eBriefing:

Pros:

  • Multi-platform: it’s available on the iPad and Windows tablets (8/RT).
  • The graphics are lovely.
  • The interface for adding notes and marking up the text is elegant and uncluttered. The notes feature is relatively “flat” (if flat is the opposite of skeuomorph).
  • Search works well within a single book.
  • The first-time-use, in-app tutorial is nice, but a little overkill: I know that a button labeled “bookshelf,” for example, will take me to something called “bookshelf.” It would have been a better use of space to say what the bookshelf is or does.
  • The pinch gesture is enabled, so that I can zoom in and effectively make the text larger. While this is great, esp. for older readers who need larger text to read, I found a compatibility problem with the page-turning feature. See cons, below.*

Cons:

  • From what I can tell, each “book” is one long document with the ability (via the table of contents) to jump to a particular section. There aren’t linkages amongst the content of different books. There is no granular metadata on the content, only the reader’s interaction (bookmarks, for example).
  • No library-wide search.
  • Although the images in the table of contents are eye-catching, I’d imagine it could be hard and/or time-consuming for staffers to find graphics for each chapter, especially for dry subject matter. Plus, I expect that when I jump to the beginning of a new chapter, I’d see that same image recalled in the book — but I don’t. The visuals in the table don’t match the actual content.
  • While I like the interface for the notes feature, I wish I had the option to enable autocorrect. It helps me type faster on the iPad. It’s also a problem that I can’t see the notes at the same time I see the entire page, unless the page is in portrait mode. The notes cover part of the content on landscape-mode documents.
  • *Here’s another limitation of the page-turning metaphor: it only works when the entire page is wholly in view. This means that if I zoom in to read, even a little, I must first zoom back out before I can advance to the next page. I think this is the largest UX problem I’ve found with this app.

In sum, I think this is an elegant app that could help government agencies reduce paper (and help officials reduce the bulk they have to carry), but I think it’s an interim step in that modernizes the process, but doesn’t truly transform it.

App Review: Guide

Today I got an email from a friend announcing the launch of her team‘s new app, Guide. The concept is fantastic: it styles itself as a newsreader app that turns online news and blogs into TV.

From their description in the App Store:

Screenshot from the Guide app

She looks normal here (except for the nineties flannel…because all news anchors dress that caj) but believe you me, it’s weird when her lips move and eyes blink robotically.

Guide allows you to consume more of your favorite web content while you do other tasks like working, exercising, cooking, eating, or even getting ready in the morning. Our news anchors read the content to you while presenting the most important elements from the article like videos, images, and comments.

Now that’s an app I can get behind: I love the idea of listening and barely watching while I do other things (knit, for example). So I was one of…everyone else on the planet, apparently who downloaded this app yesterday. But I have to say, I don’t get it.

There really isn’t much point in this being a video app. Audio, yes. A entire screen filled with automaton-anchors that mimic speakers, however, doesn’t seem worth it. Why would I watch that?

This really makes more sense as an audio app, not a video app. One really nice thing about it is that it will still play the audio when you switch to another app, so you really can multi-task within the iPad. That part is good. But the biggest drawback, at this time, is that I’m restricted to their chosen “channels” of content. Not good enough. If it could read aloud the articles I have in Instapaper, then wow! I’d be all about this app. I assume it needs some manual tweaking, which is why they control the content. Hopefully in the future it will read anything. Then I’ll happily listen along with the app in the background.

screenshot from Guide appA few more thoughts:

  • Guide is not a great name. The URL gui.de is clever. But the problem is that when one searches for “guide ipad app,” one gets results for online guides on how to use an iPad. Plus, they’re not guiding you anywhere. It just doesn’t work.
  • It mixes metaphors. One article I listened to today had the phrase “as evidenced by the brand’s ‘Signature’ silhouette you see above.” Actually, it’s not above. This app is trying to move us from the spatial to the temporal, but since the articles were written for spatial display, the metaphors don’t match.
  • Context matters. One article, “UK dropping fitness requirements for cyberwarfare specialists,” was originally posted with a photograph of a dude’s flipflopped feet on a desk next to a desktop, a can of Coke, and a slice of pizza. It helped set the context for the article (which appeared on a site called Geekosystem). Now, in Guide, the photo is displayed next to the talking dog. Um…? Frankly, in this new context, the flipflop-wearing hacker doesn’t seem so silly, does he?

So, all in all, I think this could be really great if they dropped the robot news anchors, and instead had the text scrolling across the screen or something. At least that way you’d be able to catch up if you stopping listening for a second. And they need to make it capable of reading any article (in English, at least). Once it can read this blog back to me, I’ll be (narcissistically) happy.

This is Broken: Office Door

I am a huge fan of Seth Godin’s This is Broken TED talk. He gives several examples of “broken” design, and talks about the different reasons things are broken.

In that spirit, I offer a morning observation of brokenness.

This sign is posted on an office door in the building in which I work. Here’s a transcription:

a closed door means...

A closed door means that at this moment the reception desk is not staffed.

Thus, knocking will serve no purpose.

We apologize for the lack of a phone or a buzzer at the door.

Your options are:

Contact the person you are supposed to meet with to ask them to let you in, or
Wait a minute for someone to come in or out.

I think Godin would classify this as “not my job” – someone felt they could make the sign, but didn’t feel that they could order a door buzzer installed (or just unlock the door). In any case, a locked door invites knocking, and this sign is an indication that knocking serves “no purpose.” Broken.