Should a "Preview" page be a pop-up or on the same page?

Question

We currently have a page that shows a preview of another page (newsletter) on an iFrame the moment the file is uploaded.

Is this better versus providing a button that says "Preview", which when clicked, will open the preview page in a pop-up / new tab?

I am asking this because although the current one we have removes the extra step of clicking "Preview" (since they see it immediately on the same page), I feel distracted by the other UI elements surrounding the "preview" section. Plus, that there are two scrollbars (the browser's and the iFrame's). And also, I would always see the preview even if I don't need to if I'm on that page.

Contrast that with seeing the preview on a new tab or a pop-up, I see the "Preview" on its own. I find it easier to review the "preview" page although I needed to click a button before seeing it. And I only see it when I want to.

Are there any UX guidelines regarding this? Is a pop-up better in this example?

Answer 1

If a preview is not mandatory step and not so frequently, don't force a user watch it. The button "Preview" is a good decision in that case. The UX point here is do not overload user with secondary (optional) steps but give control for him for doing it.

To minimize distraction it is good to display newsletter in pop-up, shadowing the exterior. This option is better than displaying in a new tab for the reasons:

• New tab could break flow. After closing it there is no guarantees of returning to previous tab (if several tabs are opened).
• New tab could be blocked by ad-blocking plugins.
• No closing preview tab could create a bunch of previews and user could lost among them and browser could decrease its performance.

Answer 2

My 2 cents:

Depends on what you want to do on the preview page and on which device this preview is supposed to be shown

-- if the device is mobile or tablet, and you want a print functionality then go for a pop-up with an instruction that user needs to close the window himself. Since the print functionality is likely to reload the app again in preview mode on most mobile devices especially android devices. Also android devices doesn't support self closing window operation (proof - see facebook login on Android devices)

-- if the device is desktop or laptop, then iFrame or DHTML enabled window is fine as long as developer has taken care of removing unused nodes from the DOM after pop-up is closed.

-- if the device is desktop or laptop and if the preview is a print-preview, and the styling is completely different from the actual site (designed specially for printing purpose for example invoicing), the pop-up

-- For email preview, post preview on forums, etc pop-up would be a quite distracting.

Answer 3

The most common convention I see is a small preview (thumbnail) with the ability to enlarge the preview by clicking on it. Concerning pictures, this approach is used in Windows, OSX, Facebook, Twitter, Reddit, and many others. The small picture gives the user the general idea of what they are looking at, and the user can click the picture to enlarge it to gather all of the details associated with the picture.

Answer 4

You can initially display your page with link 'Show preview' somewhere and hidden iframe. When user clicks this link you display your preview directly under this link at the same page and change link to 'Hide preview'.