• WYSIWYG Examples

  last modified July 27 by sonali

In the process of looking at Xinha, we looked at other editors that do a good job of UI design and clarity of information.  Here are some of the common editors that also gives us an idea of what the user expectation is when writing and editing articles.


Wordpress

Wordpress is one of the most popular blogging platforms out there. The simplicity of their tool bar is defined clearly by their audience. This is the "Write" view of a post. The tool-set is minimum - the user is presented with the options of formatting, image upload, links and a split block. Any extra tools have been folded into the last button. The tools are well designed (tinymce) and make it appealing for users to engage with them (i.e. the user is not squinting at the toolbar wondering which one to click on). One of the most appealing aspects of this toolbar is the set of keyboard shortcuts that are implemented as well as the friendly bubbles on rollover that tell you what each of the icons are.

Wordpress is making attempts to separate the actions of inserting vs. formatting. The Add Media bar holds 4 icons that all carry similar workflows that walk the user through the steps of browsing and uploading images, files and links to the interface. The actions involving uploading media usually takes a few steps and is cumbersome in most applications. Separating this is something that i think might be a good idea moving forward with Xinha.


­wpadmin2-5-1.png 


Google Groups

This tool bar positions Image and Link uploads up front. These are then followed by some standard formatting buttons. Google does a good job with


google_pages.png 

 

Google Notes

google_notes.png

 

Google Docs

 

google_docs.png 

 

Google Site

google_site.png 

 

PB wiki

pbwiki.png 

 

Word

word.png 

 

Pages (OSX)

pages.png

­