I have seen different approaches to previews in non-WYSIWYG editors.

One is to have a edit and preview screen side-by-side or like here on stackexchange the preview below the editor.

And the other one only shows edit or preview, never both at the same time.

What influences do they have on the UX?

Is it just that I should use the second one on smaller devices and the first one if I got enough screen estate?

1 Answer 1


Avoid having a separate preview page

Guessing and checking is a cumbersome approach to user input. Nobody likes being surprised after hitting a preview button only to have to go back and figure out where the mistake is in the markup.

Even if the screen is small I would prefer scrolling down and back up without going to a separate view the way stack exchange works.

The one possible time where having a separate preview page might make sense is if the target device isn't able to handle continuous processing of live preview updates making it impossible to input markup.

  • 1
    Probably you need to edit your title, "Avoid having a separate preview page at all costs" is not right. I mean, I LOVE "side by side" editors or "below preview" editors and I use them, however that is not "exclusive" to have an standalone preview feature to visualize in a total real environment how your end edition would look like. A perfect "preview" system would have a realtime preview in edition and a small link to "standalone preview". As a user I should have both options. Feb 10, 2015 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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