A magazine-like interface for browsing/page-turning...

I am part of an email distribution list here at MS that is focused on the topic of User Interface Design.    Recently, one of the members posted a question to the list asking for input and/or examples of how the task of browsing a physical magazine might be replicated on a computer.  While it doesn't have much to do with debugging and will likely never appear as an interface metaphore while debugging, my response does offer some insight as to how I view my job as a debugger UI developer.   I am open to any thoughts, comments or suggestions you may have about this or any other debugger and/or user-interface topic. With that, here are example sites cited in the internal mail thread along with my response.

(BTW, I have no interest in any of these companies or magazines other than reviewing their magazine computer interface)

“So these are all nice examples of how the user activity of browsing through a magazine can be replicated via a computer interface. Because it seems appropriate for this alias, I thought it would be interesting to voice some personal opinions of the examples given. I’d be interested to hear what other’s think as well.

First, I think all of them are pretty enough and effectively communicate the idea of physical pages being turned. However, I think there are distinct user interactions that must be easily discoverable and mimicked to successfully translate the real-life experience to a computer interface: Here they are (IMHO, of course):

  • You should be able to read a page. If the text is too small, they can bring it close to their face to see it. After reading it, it should be just as easy to push the magazine back away from their face for a more comfortable browsing level. Both the Computer Trade Shopper and Zinio interfaces go this right. Click to zoom anywhere on the page, click again to zoom back. The Zinio has a nice zooming effect to express this metaphor to the user. But once zoomed in, it was difficult to move around the page. There were no scroll bars. You could click-hold and drag, but the page wouldn’t be rendered until you let go of the mouse button. The Computer Trade Shopper zoomed (without fanfare) and supported a click-hold-drag metaphor too, but rendered the new view on the fly. The only thing I think it missed out on is using the wrong cursor to provide adequate feedback to the user when zoomed. The Patagonia solved this problem indirectly (and inferiorly I might add) by requiring the user to choose the “dialup” or “broadband” version of the catalog AND through it’s hotlink feature. That was cool, but slow when all you want to do is see available sizes for an item.

You should be able to grab a page corner or edge to turn it

. Zinio is the only interface that got this close to right. Patagonia came close, but doesn’t provide adequate feedback when you move the cursor to a top corner or edge rather than the bottom corner. ActionScripts only allow turning the page at the bottom corners. The Computer Trade Shopper example didn’t bother.

You should be able to quickly move to the front, middle, or back of the magazine quickly and easily. None of them offered any solution for doing this at the corners as many people would do with a real magazine. But the Zinio at least puts a nice slider control at the bottom of the magazine for doing such a task. IMO, the behavior of this control seemed quite intuitive and discoverable. Moreover it not only allows the user to see just how far into the magazine they are looking, but also the 4 split bars allow the user to quickly jump to any 8th portion of the magazine. The multiple page flipping visual effect just seals the deal. The Patagonia catalog lacks good feedback for how far into the catalog you’ve gone and how much remains. The Computer Trade Magazine put the control at the top of the magazine (seems less intuitive to me than at the bottom), and seemed to only allow the user to type in the page they’d like to see (Since when was the last time you had to type a page number to open a magazine half-way through?). The actionscript didn’t bother.

Based on the above if had to pick one as a model to try and emulate, I’d have to say the Zinio interface. There would be absolutely no contest if it rendered a zoomed page in real-time rather than waiting for the user to let go of the mouse button

Some other observations I had:

  • The actual animation for turning the page and the user’s need to physically MOVE a page isn’t important. The metaphor of a physical pages existing that’s more important. Most important is the content of each page. This is where the actionscript got it all backwards and wrong. To me it was too focused on the task of turning the page, rather than the task of reading the magazine. What user really cares whether they can stop turning a page halfway through? (ok, ok, all you old Mad Magazine readers might want to be able to FOLD a single page a certain way). My fingers got sore just leafing through the five or so example pages of the actionscript. J
  • Being able to find all occurrences of text in a magazine is an awesome example of where a computer can actually ADD value to a decidedly non-computer activity.
  • In the Zinio and Computer Trade Shopper magazines, it was a nice feature to be able to jump directly to contents page. That’s one activity of magazine reading that sometimes drives me nuts. Unfortunately, the Computer Trade Shopper “hides” this feature under the Show Quick Navigation Window button – which leads me to my next observation.
  • The Computer Trade Magazine’s interface is too geeky. Too much animation going on to slow things down. I just want to read the damn magazine, thank you.
  • Patagonia’s hotspots to take you directly to purchase page was really cool. To combine that with the one-click zoom might take the form of a smart-tag or something similar.
  • None of them allowed you to easily and cheaply pass your magazine onto a neighbor or friend.
  • None of them allowed you to change or carry the contents of a magazine by ripping out a page or two. “