Something we like to do with Amaxus Web CMS development is re-think how parts of web applications that are ‘accepted as standard’ could be improved, and experiment with slight changes in application behaviour.

The standard WYSIWYG has been puzzling us recently. In terms of usability, it feels a little awkward that while writing text – a purely keyboard-based task – the (frequent) action of formatting normally requires the use of a mouse: take your hand off the keyboard, move to the mouse, move the mouse to the formatting bar, select your option, and finally replace your hand on the keyboard to continue typing.

Some people know the basic keyboard shortcuts – normally bold and italic – and novice users will rarely use keyboard shortcuts. However, for everyday users, removing some of this physical/temporal overhead seems to make sense.

So here are two simple, obvious suggestions we’ve been thinking about.

Option 1: Automatic Markdown Conversion

A number of frequently used applications, such as plain text email clients and Twitter, only allow the user to enter plain text. People have therefore become accustomed to using punctuation to represent formatting: asterisks around a phrase to show strong emphasis, or underscores to show normal emphasis. This style of writing – of which, a version has been named Markdown - has become fairly natural for many users.

It makes sense, therefore, to allow people to use Markdown formatting in the WYSIWYG, and auto-convert to ‘real’ formatting as they type (some applications, such as Microsoft Entourage, already offer this functionality).

So, the above would automatically become:

Some mark-up is a little more complicated, but we could simply prompt the user for additional information. For example, square brackets could be used to represent a link; as soon as the user marks the end bracket, an inline text box (with focus automatically given to the text box) would appear that allowed the user to specify the link URL. The system might also auto-highlight the bracketed phrase to clearly show which text was being formatted.

Option 2: Inline Formatting

An alternative, which allows the user to remember fewer formatting codes, is to introduce a keyboard shortcut that initiates ‘inline formatting’.

The keyboard shortcut should be user-definable, and by default something that is physically easy to access while your hands are in ‘typing’ position (e.g. on a Mac, this could be Apple-Space).

Once pressed, the last word typed will be automatically highlighted. The left and right arrow keys will allow the user to highlight additional words to the left and right of the current word (if available).

At the same time, and overlay will be placed on-top of the standard WYSIWYG buttons, with the letters/numbers of keys superimposed on them. Pressing the relevant key will apply the formatting to the highlighted text (e.g. on a Mac, pressing Apple-space followed by ‘s’ would automatically apply strike-through to the last word typed).

Additional, intuitive shortcuts could be introduced to highlight the current sentence/line or paragraph.

Apart from the ‘Apple-space’ shortcut to initiate the ‘inline formatting’ mode, a second ‘intialisation’ shortcut – for example, Apple-Space-Space (i.e. hold down Apple and click Space twice quickly) – could be defined to mark a ‘starting point’. Then, when Apple-space was clicked, the system would automatically highlight from the starting point to the current cursor/word.

Using this model, the user would only need to remember one or two ‘initialisation’ shortcuts; all specific formatting shorcuts are then displayed once inline-formatting has been initialized. 

By Dan Zambonini