Software developers are aware of the importance of building applications with a focus on user experience. It helps onboarding, reduces customer churn, and makes everyone’s life a little more enjoyable. Understanding how users interact with our applications is one reason Ephox’s lead UX designer Anna Harrison conducts testing.
Even though we all know how important UX is, we still encounter user experiences that don’t make much sense. Like this …
The simple task of pasting content from Word, is broken
As a marketer who spends a large part of my time working with our content team, I encounter one significant UX fail every day. It involves the simple task of copying and pasting content into a rich-text editor.
Let me give you an example of how easy it is to get this wrong using a frequently used content creation workflow.
- Write, edit and proof content in Microsoft Word ->
- Paste content into CMS rich-text editor ->
- Publish, and hope the formatting matches your site’s style, or that characters are correctly encoded.
“If youâ€™ve ever …”
This type of encoding error is way too common. It’s also not the only one. A bigger issue is Word overriding CMS theme styles by importing unwanted HTML in the paste action.
For non-developers, what this means is that Word tries to make your site look like your source document (Word) and not how the CMS wants it to look.
Don’t make users fit your flow into their work
For all the discussion in developer circles about user experience, we all encounter situations where actions don’t match the talk.
Here’s a recent exchange between a SaaS company we use and a third party platform to which they post content. For context, the content we posted to our provider was not rendered correctly on the third party site.
“I suggest having them copy the content and paste into Notepad. Once they do that, have them remove all the special characters and paste back in. They will have to add formatting, but it should fix the weird characters from showing up. We usually tell people to type up their postings in Notepad first actually.”
In other words, “change your workflow to deal with our broken code.” I’m not sure that’s a user experience any of us want to replicate.
It’s not only Word
To be fair to Word, it’s not the only cause of frustration and lost productivity when copy/pasting content into WordPress. (It’s not WordPress’ fault either). Content from the internet can bring in unwanted styles, and let’s not get started with creating tables from Excel.
In other words, almost everyone publishing with WordPress needs to manually “clean” content pasted into the editor. It’s a massive waste of time, money and lost productivity. And it’s a bad user experience!
The issue is a matter of style
Developers understand the importance of using CSS to style web pages. They also know we should avoid inline styles at almost all costs. So you might be interested to know that it’s Word dumping HTML classes into the CMS editor causing the issue.
For most WordPress users there are three ways to fix this mess:
- Manually clean the HTML in WordPress “text editor” mode.
- First copy/paste the Word content into a plain text editor and then paste it into WordPress, knowing they have to manually reapply their styles (bold, italics, etc.) and web links.
- Use a solution that automates the cleaning of pasted content.
An easy fix that takes less than 5 minutes to deploy
Fortunately, this problem is easy to solve and is simple to integrate into WordPress.
And by simple, I mean a 5-minute process to install a plugin.
Built by TinyMCE, the team that develops the open source editor in WordPress, the plugin automatically “cleans” content imported from Word, creates tables from Excel data, and links & embeds images with content pasted from the internet.
The solution is called PowerPaste and is used by writers and publishers around the world to improve their content experience. It’s definitely a productivity secret weapon in their workflow.
Developers with content creation requirements in their application, who care about their user’s experience, should take a look at PowerPaste.
You’ll find more information about TinyMCE PowerPaste for WordPress on our dedicated product page.