Wysiwyg
The Design Need:
You want users to edit and/or contribute formatted content to your website. Your typical user is unfamiliar with HTML coding.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
Design Examples:
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
Design Solution:
Offer a control to format text that shows the applied formatting: a wysiwyg editor. Here are some design best practices for offering a wysiwyg editor:
- Decide how much formatting the user can perform, e.g. adding images or not. Adjust the editor so it only offers the formatting options that you support
- Support the use of standard keyboard shortcuts such as ctrl-b or cmd-b for bold. Many users are familiar with using these when they edit text
- If you limit the amount of text that can be entered, provide sufficient feedback to the user. Tell users how many characters are allowed and how many they have used, and only count visible characters
- Make the text input box large enough, so that users can see as much as possible of the text they are entering
- If you have a mixed audience (with and without HTML knowledge) you could offer two editors: wysiwyg and pure HTML.
Selecting a wysiwyg editor
Remember that the content contributed by your users should also comply with the usability and accessibility rules you apply to the rest of the content on your website. Selecting a wysiwyg editor that produces correct HTML is therefore very important. You can find a checklist for selecting a wysiwyg editor in “Wysiwyg editor spec checklist” on www.alastairc.ac
Wysiwyg is a specific text solution for the design pattern live preview.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
When to use:
If you want to prompt (non-technical) users to contribute formatted content to your website in a comfortable way.
Don’t use wysiwyg for standard text fields such as name, address, etc..
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
Why use this solution (rationale):
More and more people are motivated to contribute content to websites in one way or another, by sharing content on social media sites, contributing to blogs and wikis, etc.. Many of these users are not familiar with HTML coding, and even those who are like to check that their formatting looks right.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
More info elsewhere:
- “Formatted text input” design pattern on http://quince.infragistics.com
- “Wysiwyg” design pattern on www.ui-patterns.com
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
