Suppose on a webpage (accessed through a desktop browser) one has a list of news items displayed as headlines. When a user clicks on one of the headlines the full news text is shown in a lightbox-like overlay in order to put full attention to the reading experience.

My question is:

  • How to design such overlay in order to provide the best possible reading and navigation experience?

On our team we are considering (at least) 3 alternatives:

Design 1: No navigation apart from Close in overlay

Design 2: News items list replicated in overlay

Design 3: Only older/newer navigation

However, we can't seem to quite agree as to which is better. Any thoughts?

  • With any of those solutions, just be sure to build it so that those of us that prefer tabbed browser can still launch each link in its own window. – DA01 Oct 31 '11 at 21:17
  • DA01, in other words, you don't like the overlay approach? You are probably right that a typical news browsing behaviour goes something like this: Scanning over the news list and opening each interesting item in a separate tab while deferring any reading until afterwards. However, the overlay idea is inspired by the reader feature in Safari, which provides a nice clean, reformatted reading experience. In terms of navigation, though, this approach has room for improvement. – agib Nov 1 '11 at 8:45
  • those that prefer tabbed browser prefer not to be trapped within one browser window. In the context of a news reader, I would prefer the ability to scan the list, popping each interesting article into its own tab so that I can then read them after I'm done perusing the list. Having to scan the list, pop-up the overlay, read, close the overlay, back to the list, pick the next one, etc, seems burdensome to me. It may not feel that way to others, of course. Just trying to point out that people will have different preferences for interacting with this. – DA01 Nov 1 '11 at 13:47

If you want to go the overlay way, you should combine design 2 with design 3. What I mean with this is give the users the option to navigate (older/newer) and in the same time give them a list of the news articles. Some people will remember that the other article they wanted to read is 2nd next in relation to the current one, others don't.

Another great idea would be to include the title of each article under the two options (next/previous or older/newer).

Example here (hover over older or newer): http://gadgetbox.msnbc.msn.com/_news/2011/10/31/8562582-nook-color-sequel-likely-to-be-announced-next-monday?chromedomain=digitallife

  • Thank you for the example. I was thinking the same thing about displaying the title of the older/newer items as part of the navigation. However, there might be a valid point in the argument that people rarely read news items sequentially like that. Nonetheless, this older/newer approach is pretty clean. – agib Nov 1 '11 at 9:03

If you are using a modal window (lightbox overlay) for the articles, then newer/older articles are relatively unrelated to the the article that is chosen.

As such option 1 or 2 would be more suitable for the modal window style.

Personally I feel that a laying out option 2 with 'related articles' (or 'other articles') below the article could improve the experience as the modal window's main content is the article, closing it and finding other articles is generally the method of continuing, so just giving a call to action at the end keeps people involved but doesn't detract from the main focus.

Sadly unable to post images as I had mocked up what I meant

  • A fine idea concerning related news items at the bottom setting the ground for a good "reading flow". Unfortunately, our news metadata don't have a sufficiently high quality to provide such functionality. – agib Nov 1 '11 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.