Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Thank you JonW, much obliged :) If it makes a difference, I'm interested in medium to large scale sites, from thousands and up, pieces of content. –  user50849 Jun 21 '12 at 15:33
    
Could you explain how you are currently making the user enter content? Are you making them enter it into the html document or are you getting the content from them and then doing this yourself? –  Yallow Jun 21 '12 at 15:34
    
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. Does that answer your question? –  user50849 Jun 21 '12 at 15:37
    
Can you explain a bit more what you mean by the content being devoid of structure? Can you give me an example of how you could reuse structure later in your system... are you talking about CSS level stylesheets for instance? –  Lisa Tweedie Jun 22 '12 at 13:38
    
Would really love you to pick a best answer on this question. For me this is the best answer I have written yet on UX stack exchange ... but you haven't rewarded any of us... cheers. –  Lisa Tweedie Sep 20 '12 at 11:24
show 2 more comments

6 Answers

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.

enter image description here

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!

share|improve this answer
3  
Anyone who mentions Bret Victor gets an insta-like from me, but while I love fiddling with styles and code, it may not be the best option to deliver a consistent level of quality across many different content creators. In the case where an online publication with many authors who may have little or no html/css experience, giving them a little structure allows them to be able to actually focus on content, and not get lost in making the content look a certain way. Additionally, the re-use of styles in html may more of a hindrance than a boon if the user doesn't understand it –  Matt Lavoie Jun 25 '12 at 16:16
    
I've been waiting for a response to this one... kind of went off on one (: Not sure that I'm saying you should give fiddling to everyone... just saying you should progressively disclose functionality... as wordpress does ... to let people join the party. I have used wordpress with loads of non-technical clients. They are fine with it ... and gradually realise they can fiddle with the html. Maybe pick up one little trick and then another... and so on. But I do think there is a real gap in the market when it comes to WYSIWIG creative fiddling for CSS ... for UX people and creative types. –  Lisa Tweedie Jun 25 '12 at 16:29
    
Yeah, I love wordpress. My wife is not technical at all and uses it well. However once you get beyond two or three authors it seems like there may be a consistency/quality control issue with keeping the branding and theme of the publication consistent. Not to say that I am trying to crush uniqueness, but it seems like the original question was interested in keeping a consistent presentation of content. –  Matt Lavoie Jun 25 '12 at 16:36
    
Good point... and yes I fully admit I went a little off piste ... Although surely the branding/consistency issues are to do with educating your users to use the h1/h2 headers etc. appropriately i.e. more about a style guide than the tool itself. –  Lisa Tweedie Jun 25 '12 at 17:10
1  
+1 I like using tools with dual views, since the two views complete each other - You get instant preview, ability to select via the graphical viewer, to edit via the text viewer and much more. –  Danny Varod Jun 27 '12 at 14:01
add comment

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.

share|improve this answer
    
That's a great tool! –  msanford Jun 21 '12 at 20:16
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
2  
"Some WYSIWYG editors will strip tags and attributes if they are not setup correctly. " I'd say that this is actually a GOOD thing. If people are copying text out of a word doc, or from another website into the editor then you want the wysiwig editor to strip out all the tags. Otherwise you end up with inline styled text within the new page, totally borking up the main CSS. –  JonW Jun 22 '12 at 11:41
    
You are correct JonW this can be a good thing. It can also be a bad thing. Currently my corporation is in the mist of a migration and our older CMS is unable to upgrade to the newest version of the TinyMCE WYSIWYG. Limitations like these prevent us from using some new HTML5 attributes. While these are not required for our content editors our developers desperately need them. Very frustrating! –  JeffH Jun 22 '12 at 12:23
    
Also, pasting from word might be the worst thing someone can do to an html WYSIWYG editor. There is just so much junk that word brings over. –  Matt Lavoie Jun 25 '12 at 16:19
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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