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.


Comments (5)

  1. BigJimInDC says:

    Maybe it’s just me, but… IMHO this is as bad of a GUI design idea as is possible.

    Point being, there is an science/art to putting together magazines and newspapers in "hard-copy" print format. Some of these things follow through to electronic mediums, while others are specific to the fact that you only have a 8×10 piece of paper to work with (with magazines for instance).

    For example, if you’re writing an article for a newspaper, there is the traditional approach to summarize the whole article in the first paragraph, then get into the details in the meat of the article, and then re-summarize in the final paragraph. This is done to allow people to quickly read through the first paragraph or two of an article and get the gist of it, yet be able to read the meat of it if the first paragraph sounds interesting. It also allows publishers to "cram" a lot of articles on the front page, hopefully catching the eye of a reader and getting them to purchase the thing. Magazine articles work a lot the same way.

    I would also be willing to say that when a person is subscribed to a periodical, be it a daily newspaper or montly magazine, the purpose of selling to that person is less important, and faciliting location of pertinent articles is the more important factor.

    In the mean time, if you are working on a 1024×768 monitor (the current majority used resolution for computers) then there most likely are much different and equally much more appropriate means to allow a "reader" to find the articles that are important to them, and subsequently drill into those.

    I guess my primary point is that simply trying to emulate a magazine as a GUI design metaphor can be a high "coolness factor" project. But IMHO, the project would be ultimately useless in attempting to create that new "killer app" that actually exploits the medium (meaning the computer) and presents the "reader" with a GUI that enhances the "reading experience". A few of the last set of points that you made above definitely point out some great "value added" concepts that should be "designed into" the end solution.

  2. Jim Griesmer says:

    So it sounds to me like you’re basically saying that GUI’s that use models or metaphors that don’t directly make use of a computer’s strengths should be avoided.

    I’d have to agree that we should always be striving maximize the computer’s effectiveness as a tool for helping people exist in the world. However, avoiding common metaphors and models imply that users must be educated to some level of computer literacy in order for them to achieve effective gains.

    Suppose for an instant that somebody created *the perfect interface* for presenting a collection of articles and ads. When I say "perfect" I mean that once any user learned the interface that they would never want to use anything else for doing such a task.

    Great! But IMHO the problem is that the user must learn anything at all! In order to achieve browsing nirvana, the user would have to "forget" whatever notion they have about what a magazine or catalog looks like, operates like and instead learn a new behavior and model. Many users (like my step-father for instance) wouldn’t bother even trying. It’s hard enough to see him use a mouse.

    I think in this case, by presenting a UI in a manner that closely resembles a well-known and well-understood task, new learning curve is reduced to a minimal level. New terms like "hotlinks" or "click-through ads" or "back button" or "refresh" have to be learned in addition to the "universal" computer terms (like mouse, cursor, click, etc).

    However, because it is ON a computer, other, computer-friendly features can be discovered and learned in the user’s own sweet time.

    Users… er… people, despise and avoid change, unless it the change is completely controlled and driven by that person alone — no matter HOW good the ultimate result will be.

  3. Don Newman says:

    Although the Zinio reader emulates a magazine great, being able to print an article instead of a page would be a bigger benefit.

  4. Numeris says:

    A magazine-like interface for browsing/page-turning… (Gooey Bugs 2004)