Archive on my WYSIWIG UX Stackexhange post

This is contribution I made to a UX stackexchange post a while back. Just realised I needed some of the information so thought I’d archive it. Amazing how quickly one forgets stuff.

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 CSSEDITdabblet 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!

up voted
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 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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s