The Great Editor
What do you need to create a high quality product? A large amount of time and a large team of designers and analysts? No. Several months of work, one designer, three or four developers and a couple of editors, who love their job and who perfectly know their audience, will do great.
1. Goals and objectives
At 4xxi, we have our own project named Newtonew. This is an educational media project with different materials for students, teachers and those who are constantly striving for self-development. In a few years, almost from nothing, the project evolved into a media product with a huge number of full-time and freelance writers and the audience of thousands.
And now we have a question to answer:
We want our readers to have the opportunity to write articles and publish them on our portal. But how do we control the quality of their articles and where do they write them?
Hence, our goal is:
To create an online editor for writing articles with moderation and revision system.
2. Market analysis
As a first step let’s have a look at the most relevant services for content publishing on the market and highlight three popular ones:
- CMS-admin panel. A platform with a bunch of data input fields and a limited number of tools;
- Medium. A platform with universal design for publishing blog posts;
- Tilda. Online builder for creating websites.
Advantages of these services:
- The admin panel is scalable and new tools or features can be added to it without difficulties;
- Medium is good because all the tools are collapsed into one element and can be displayed on call. Due to this, toolbars do not distract you from working with text;
- Tilda is multifunctional. You can experiment with various widgets, find the right one and adapt it to your needs.
Disadvantages:
- Admin panel is not very comfortable to use. User has to adapt to it and get used to it. So, we should not let our users into such system, because it could be very difficult for them to use.
- Medium has very limited set of tools for working with text. Also, it has big difficulties with indentations between blocks (for example, the title is pressed to the text below). And it is not very friendly with Russian fonts and punctuation (for example, Medium merges a dash with the text next to it without spaces) in general. As a result it can look very sloppy and not always well-designed;
- Tilda is too stodgy. There is no general alignment of paddings between blocks, the size and printing of fonts have to be fixed manually. A lot of articles would look sloppy, with a lot of different font spellings and width of columns. In addition, Tilda natively shows already actually typed text and images, not the “mask” of the widget. Therefore, the user may not notice the random block and publish the article with “fish” text. Also, Tilda has a complex widget customization system. There are no clear visual accents in it, everything merges into solid gray text and it’s easy not to notice any additional settings or not to find where to set the font size.
3. Structure and user roles
In tight deadlines the most important thing for a designer is not to screw up. To avoid this problem, it is better to start any project with the construction of a navigation scheme of sections and screens which will be on the site. It doesn’t take much time, but it will definitely simplify your life. It also allows you to know when a user needs to be informed of any changes on the site, and to determine the basic page templates.
At the stage of planning our platform it became clear that we will have 3 types of users:
- Author. This status is for a user registered in the system. Author can write articles, save drafts, and send articles for moderation;
- Expert. A large stream of articles from users can fully load our editors. Therefore, we will allow our “Authors” to grow, to earn our trust and to be able to moderate other people’s articles, which will motivate our users and simplify editor’s job;
- Editors. Our full-time editors who must have full access to every article in the system.
4. Tools
Informative articles should be well-designed and easy to read. At this point we face a new problem: we have a large amount of widgets, which can lead to the fact that articles will look overloaded and difficult to read. So, we need control this process somehow.
Here we remember the golden rule: “no choice — no difficulties”.
Let’s make a list of all widgets and arrange them according to the roles of users and decide which widgets will be available and who will be able to use them, so new users will not use some important text tool or insert a lot of pictures for no reason. We will not “jam” unavailable tools for users — we just will not show these tools. As the result, the user will not know about the existence of these tools until he gets the Expert status.
So we get this set:
- Author. Able to set the headings of two levels, insert a quote or a list, highlight an important text and insert a link. Also, he can add an image, video or other media content by the URL link. This is all it takes for the Author to be happy;
- Expert. In addition to the elements above, Expert can insert someone’s direct speech using a widget and highlight the text in italics or bold;
- Editor. The Editor has the super powers to add two pictures simultaneously (see an example below), insert information about a person with a picture and a brief description into the text, place advertising banners, make the user focus on the text with a huge finger to the left, or add a “Read also” block with the material similar to a topic.
Quite an impressive set of tools with nothing in excess.
5. Beginning of work with the editor
We decided to base the entire editor on widget masks. Our target audience includes users of different age — from teenagers to seniors citizens, which means that the interface should be as clear as possible for everyone. Therefore, we show tips on how to open the tools and how to use them. Later, we hide these tips if a user has already used the appropriate tool.
Also on the first screen, we show masks of the title, brief description and typed text example. When the cursor gets in the placeholder zone, the mask disappears and does not prevent typing of text.
We turned all the tool widgets into one element, in a similar way to Medium. But we placed it in the center, which is more convenient for the workspace.
In the first version of the design, we showed the plus icon only under the lowest block and when hovering at the zone between the blocks. At the development stage, having realized that the bottom set of tools is the most commonly used one, we made it always open by default. Opening elements with the plus sign remained only at the hover between blocks
In addition to this, we did not initially consider the option of moving blocks. We had to insert the “crutch” into finished design. Taking into account the fact, that each widget has a delete icon, we took some pain to find a convenient place for the drop-down icon.
6. Widgets / Tools
As I already wrote above, we build all the tools on input masks.
For example, the quotation tool originally has the form of a gray stickman icon, fields for entering quotes and information about the author. To insert an image of the quotation author, you can drag the file into the avatar zone or just click on it, you can also open the explorer using the text on the right side of the icon. The first is convenient for advanced users, the second is for those who have little interaction with the Internet and do not expect that the picture can simply be dragged to the avatar zone.
When the user types the text, we paint all the widgets in the actual colors of the finished article.
The picture below shows the examples of title, direct speech (interview), important text and glossary (when it is necessary to define a word or concept) tools.
The picture or media upload tool shows the zone, where the media file will be loaded to. Just like the avatar, we can download the data by dragging the file into the browser window or through the explorer by clicking. For media files such as video, it is also possible to upload a file by URL link.
We care about copyrights, so we have a mandatory field for indicating the source or checkbox, if the author of the article is the author of the uploaded material.
The two-photo tool is available only for the editors. There will be a lot of problems with his well-thought-out implementation: we do not have enough time to enable the cropping of photos in equal proportions, so that the two pictures would look beautiful. The editors know, that it is necessary to upload square images or images of the same proportions. Users understand this will be very difficult and as a result we could get articles with photos of different height of width side by side.
7. Text tool
In the first version of the design, we could simply select the text and make it bold / italic, insert a link, add the “Read also” block to the paragraph or point the finger at the important text.
At the development stage, we understood that this tool causes difficulties for the users, who actively work with the site. We split this one tool into two different tools. Styles of writing text are still available by selecting the text. We hid the rest of widgets in the icon to the right of the text, together with the icon for their removal.
8. Advertising
People do not like advertising. But we have partner materials and articles ordered by customers, and we need to indicate them in the article.
Most sites insert large and graphic advertising banners. We do not like it. And our target audience, which enters our site to read interesting articles, not to examine media advertising, will not like it too.
Therefore, we made the advertising block very simple and easy, disguising it with the site styles. This does not scare users, but it is still noticeable for them.
9. Article publishing options
In addition to the main text of the article, we have a lot of additional information. Tags, covers for the news feed, information for search sites and social networks, etc.
We split the creation of the article into two steps. The first one is the editor for writing an article. The second one is the publication settings. The second step becomes available to the author when he finishes working with the text and is ready to send an article for moderation to the experts or the editors. Our users are able to choose only one theme and audience (teachers, students, etc.) tags. This was made in order to prevent authors from inserting irrelevant tags.
If necessary, the moderator can select more tags, enter metadata for search sites and for social networks, set the date and time of publication, if the editors want the article to be published at a certain time, and also define article names for the “Articles on the subject” block.
10. Dashboard. Articles list
The author can track the status of his articles on the main page. We detached the drafts into a separate block and focused our attention on the article, which had been returned for revision after moderation. Each status has its own color, which simplifies quick search on the screen. We also added filtering by status and searching by all available articles.
If the article is being moderated too long we detached the helper, so you could know what to do and how to speed up the publication of your material.
Unlike the Authors, the Experts have access to articles subject to moderation. We detached articles subject to moderation and articles edited by this expert into separate tabs.
The Editors have access to every article on the site. We indicate authors of the article, their role, and also the order number of moderation in the table of articles subject to moderation.
11. Moderation of articles
To ensure that our moderators do not get mixed up between their articles and the articles being moderated, we designed the navigation cap in green color.
The moderator can leave comments to the text or media files. If necessary, he can quickly switch to the editing mode and fix some errors.
The moderator can consider the article for moderation, send it for revision or deny it by entering a general comment.
When the article is returned to the user, he can mark the comment as done or, conversely, deny corrections of its text. Later, the moderator will be able to check which of his comments have been corrected. The comment icon swaps into corresponding color, which speeds up the article check.
Pink — moderator comment in the moderation mode
Green — comment is corrected
Yellow — the author refused to make changes to this comment
Gray — moderator comments, which have not been responded to by the author.
After the launch of the site, we abandoned this functionality. In practice, it turned out that users do not use it. Now we just hide all comments after submitting an article for a second moderation.
All versions of article moderations are saved. In case of conflict situations or complaints about the moderator on the part of the author, the editors will be able to see the entire history of the changes and the history of the moderators’ comments.
12. Styles
Each color in our system plays its own role. This helps the user interact with the interface and understand where the user is now and what is happening. Plus, every status of the hovers is in yellow, so the user can easily understand the possibility of clickability of the element.
The PT Serif font is used only for working with the text of the article. For the rest of the information and the dashboard, we use simpler Roboto font. Later we realized that this font is poorly displayed in browsers on different computers and operational systems, so at the next iteration of the improvements we will replace it with a better font.
13. Article feed
Each of our tags has its own color. We discolour pictures of an article map. The maps are built on a well-defined grid and can be displayed with or without a photo. Thanks to this, news feed looks nice, easy, with little color accents.
That’s all. Thank you for reading the article to the end, I really hope it will be useful for you. And while our users are happy with new and convenient editor, we keep fixing bugs and preparing innovations and improvements.
You can find large images and more screenshots at Behance.
[RU] Статья на русском
