Does the use of a WYSIWYG editor by itself improve the UX?

Question

As someone with a lot of background writing low-level software, I've always felt a strong dislike for WYSIWYGs such as CKEditor or TinyMCE in the browser. To me they are mostly problematic, as they make the content devoid of structure, making the re-use of parts of content later, very complicated.

I'm interested in hearing "the other side" of the conversation. Am I making my users suffer because they really need "free-form" input options?

Taking a look around at some large international online magazines, such as http://www.time.com/, and some local ones, I see that the editors seem to produce articles that are almost only consisting of raw text. Images are usually at the top of the article, and otherwise the most complex content are usually links.

Answer 1

What it is the value of WYSIWIG?

It provides immediacy and the ability to fiddle quickly. Bret Victor capures it perfectly in this video where he shows the importance of immediacy in the creative process during the coding of animations and games. Creativity benefits hugely from experimentation, playing and being in the moment. You can't achieve that by analysis, structure and prethought.

WYSIWYG editors have allowed millions of people to access functionality which would be out of reach otherwise. Also if people can see the results of what they have done straight away they can learn quickly how to change it.

But why is this an either or... why can't you provide access to the WYSIWIG AND some structure?

I have to say that I love using a Wordpress which I think is a hybrid (some WYSIWIG some structure)... they have done such a great job of seperating the presentation layer from the content.

It allows one to edit the text easily in in a simple visual editor (it is basically just WYSIWIG of the html elements not the css) on one tab and then fiddle with the html on another. It also lets you add CSS style sheets to customize the themes or start over and just use the CMS layer for managing the content.

The great thing is that each user can find their own level. It also allows them to grow and learn. Take the steps when they are ready i.e. access is not restricted by the tool.

I have used Wordpress with so many clients who just want a simple way to be able to edit their sites on a regular basis. I have taught children to use it.

Some of them have gone on to learn how to edit the CSS ... by never hiding the html ... it has provided them entrances to the next level up.

BUT if I had my way we would go even more extreme WYSIWIG

My one bug bear with Wordpress is that you can't see changes live... so it is a pain to "fiddle". You have to update and then see changes. Also the CSS is too hidden and can't be played with easily. I tend to use other tools and then import it in.

Getting a layout right is all about fiddling.

I love tools like CSSEDIT, dabblet and jsfiddle that let you see your changes live. Stylizer has some great panels that let you use sliders to quickly dynamically see how changing a CSS value like width would affect your design by using a slider to dynamically view the change. If you can see exactly what changes to your "code" are doing then you can learn quickly and easily.

WYSIWIG is a great environment for learning...

Adding live CSS editing tools to all the standard browsers is probably doing more to advance the quick learning of CSS/HTML5 than any other initiative. If you can play with lots of different examples live and immediately see the effect ... not only do you learn what it does ... you want to do more ... it is fun!

I would love dabblet or CSSedit with sliders (dablet already has visual explanations (e.g. a ruler graphic showing the width) of each manipulable CSS value but I would love to be able to interact with them dynamically) and quick help e.g. this is a list of possible values for this code element. To make it a perfect HTML5/CSS learning tool.

But I digress, so to answer your point.

No please don't restrict your tool to just allowing your users to input the text and images separately. Let them learn and grow in a step wise manner. Trust your users and give them access to both a WYSIWIG view for fiddling and creativity and the structure/code for developing an understanding of the underlying model. Oh yes and put sliders like Bret Victor's EVERYWHERE!

Answer 2

There is a sort of hybrid answer. I came across this application and was rather impressed with it. Basically you can define the possible structure of the document with an XML file, and then the user is guided to fill it out within those constraints.

I am not sure if that is exactly what you are looking for, but it might be an avenue worth perusing to get some of the best of both worlds.

P.S. I loathe traditional browser WYSIWYG editors simply because they all seem to be super flaky.

Answer 3

What I want to do, is present them with a form inside the CMS, with one field for each type of data. Upload images to one field, write text in a second, link to a youtube video in a third.

This seems to be an eminently sensible approach, particularly if your users are not especially experienced in text formatting etc.

One nicety could be to allow the user to add additional image placeholders etc. so that what they get is some flexibility but you retain control over the formatting and image generation etc. I did this for a help administration system. The user adds boxes for text input or images and can reorder them in the list. The text field is a rich text box that can format the text and I've implemented some controls for bold, italic, underlining, text size, font colour etc.

Answer 4

The honest answer is it depends upon your primary user base.

I worked on a project in school where I handled the migration of a school organization site from one server to another. The manager wanted to continue using the existing content management system since he and his team (who primarily provided the content) about the various organization activities were content with the text editing options by the WYSIWYG editor offered in the CMS.

However student editors who came on board with some background in web design were often frustrated by the difficulty involved in the rendering of complex layouts which could not be created by using a WYSIWYG editor. As a result, they often resorted to the use just creating the announcement completely in an image editor and publishing it.

We finally managed to find a way to resolve the issue by providing a feature to allow users to enter HTML tags in the free form entry so that they could structure the content the way they wanted depending upon their skill and comfort level.

So my recommendation would be to determine who your users are and what is the kind of content they provide and if it can be defined in a fixed structure such that you can do it an defined form based approach.

With regards to your response

What I want to do, is present them with a form inside the CMS, with one field for each type of data. Upload images to one field, write text in a second, link to a youtube video in a third.

While this approach would help users in creating highly structured documents, how do you account for situations where users need to provide more than one image or more than one video.By restricting their ability to structure their articles or text around the layout you would also influence the tone of the article and the effective layout

Answer 5

WYSIWYG editors are like a double edged sword. While they might increase the user experience of content for the editor, they can just as easily lower the experience of the content for the reader/user based on content editors lack of knowledge with semantic HTML. WYSIWYG can also become extremely frustrating for those that know how to code pages with a simple text editor. Some WYSIWYG editors will strip tags and attributes if they are not setup correctly.

I think the bigger issue is all in the method the user has to choice from when writing content. Some CMS like Drupal can be setup to allow your more power users/developers that need to jump into edit a page a more robust set of tools. Simply allow these users to jump down to the code itself or an editor that allow full layout and style control may be best. For your more typical content editor a slightly stripped set down version of a WYSIWYG may be the best. Most of these content editors just want to be able to add the text they need from a Word document and make a few styling tweaks. Other features like controlling header and advanced text styling might be better left to development staff or trained content editors.

Answer 6

I completely agree with you that many of the WYSIWYG editors do a terrible job with structuring the HTML layout of a page, especially when a "non-technical" user is trying to use it like a word document.

Giving your user a well structured walk through of what information to enter, and where to enter it may very well ease their anxiety if this is their first time using a CMS.

I also like @ChrisF's idea of allowing the user to "add additional image placeholders". This would give the give the user a bit more control over where they would like an image as well as give you an idea of what the user would like to see.