Our team since 2013, working on office applications “Maiofis”. In the line of products includes a complete set of applications for working with documents, email, calendars and contacts on PCs, mobile devices and web browsers, as well as the hybrid server, mail server and data storage system. In this article we want to tell you about the design principles of interfaces editors “Maiofis” for different platforms and devices. “Simplicity and convenience on any device” — thats our approach to the interface.
On the one hand, we decided to use a familiar concept to users of our site editors. On the other — significantly simplify the work of editors. The user interacts with the long any product, cultivate certain habits. Work with those or other functions, press the buttons in the usual places and so on. For example, all Windows users are accustomed to the “Home” button in the lower left corner and what happened when you click on this button.
When the button disappeared and then returned, but with a different principle of operation, users have experienced severe discomfort and lost productivity. When working with office packages formed their habits. Take for example the toolbar in the editors office. There are two basic approaches to the organization of the toolbar: Users get used to one scheme and transfer to another is often perceived “hostility”.
Suffice it to recall the update for Microsoft Office 2007 when the ribbon interface replaced the traditional. We knew that we need to develop an interface that will support existing user habits. They will not have the time and motivation for a long training something new, but they also need to handle their daily tasks. However, to blindly copy someone elses decision we did not want, because he saw in them a number of disadvantages: In addition, modern users during the work on the document can switch between different form factors and platforms.
Create a document on your laptop on the plane, to work together with colleagues in the browser to make changes from a mobile device. Not all office packages allow painless (from the point of view of user interaction) to switch between devices. Below we will discuss the rules, approaches and features that we use in the control panel of editors “Maiofis”. In our Toolbox, the control is distributed over multiple tabs: In the near future will have several tabs, such as “Image”.
At first glance, this is very similar to “tape” the approach. But in our implementation the different settings and system actions with a document (a copy, share, and others) migrated to the main menu. And the steps to add the various objects are collected in a single place: This decision allowed us to significantly reduce the number of controls on the panel. The panel has become easier to scan visually, and then the user will be able to quickly find the needed function.
Decreased panel height, more space is reserved for the document itself. It turned out highly focused tool bar, where the set of functions and the number of tabs depends on the object with which it currently interacts with the user. For example, when working in a text editor, people in most cases sees only one tab, “Text”, which contains the steps to format text. When you insert a table into the document and work with this table (that is, when cells or the table itself) appears automatically tab to work with the object. As soon as the table loses focus, the tab disappears.
This contextnode affects the set of controls on the panel. For example, in a text editor when working with text in the table on the tab “Text” displays the actions for vertical alignment. In the “read-Only” toolbar may not be present, if the owner of the document did not include a record of the changes. All functions of the control panel are duplicated in the main menu. We can distinguish several types of controls:
Clicking on this button produces a single action with object. For example, increase the font size or adds a column to the table. For example, to make text bold. These buttons always have two States. Allows you to select one of the formatting options.
For example, select text color or type in a bulleted list. Allows you to either choose one of the values (the dropdown list), or to produce some fast action. For example, the selection elements font size. A person can select from a preset list or specify your own.
This element is typical only for Web or Desktop. A list or dialog that allows you to perform multiple actions without closing. For example, to format a cell border or set up the paragraph. Editors “Maiofis” work on a large number of platforms and form factors. From small phones with a screen size of about four inches to larger tablets like an iPad Pro.
When such harmonization is important to understand how much controls will be available to the user and what size they will be when you change the screen size. Or, for example, by what rule will change the toolbar when adding a new control, because the development of the product we didnt stop for a minute. To address this challenge, we divided the entire area of the toolbar on the equal-sized cells. Each control can take one or more cells. Such a cell structure has allowed to develop a number of rules elements are displayed on the panel.
If the item occupies more than two cells, its size can be reduced by reducing the size of the screen or window. For example, does the element of font selection. For narrow screens, or Windows, we assume another condition of item — new button width in one cell. This allows you to “turn off” the toolbar, without changing the order of available commands. Several controls can be combined into one item like “drop list”.
Such Association is possible for items that have similar functionality. For example, elements to align the text. In web applications, additional rows can appear at a very small size of the browser window. This often happens when users reduce the window size to half screen width and open the two documents to copy from one to another, or to compare the contents.
On the tablet, additional lines may appear when you change the orientation of the device. For smartphones there are multiple rows in the control panel is a standard situation. The width of the screen allows you to fit in one line, the entire set of controls (or have to do this line with horizontal scroll). But on the screen of the smart phones can appear or disappear additional lines when you change the orientation. On smartphones we can display up to four lines in the toolbar.
Otherwise, the toolbar will occupy more than half the height of the screen. In this case, we can “donate” a number of elements which are rarely used, and hide them in the additional drop down menu. On smartphones, the menu bar appears at the bottom of the screen in both portrait and landscape orientation. There immediately arises the difficulty during the writing of the text the keyboard appears, which naturally overlaps the toolbar. To solve this problem we have implemented a switch above the keyboard.
It allows you to quickly hide either the keyboard or the toolbar. On the tablet toolbar is always at the top of the screen in both portrait and landscape orientation. This allows you to always have handy editing tools, which do not overlap the on-screen keyboard.
If the person does not plan to format a document, for example, he only studies it, you can hide the toolbar by clicking on the currently active tab. For your iPhone we are unable to show dropdown list the dropdown. Therefore, in the control panel adds an extra level of navigation. For example, the list of font sizes appears at the next level of navigation with the option to go back. On Android-smartphones introduces an additional level of hierarchy and all drop-down lists and dialogs behave appropriately.
Their size (width and height) depends on the information that they displayed. We understand that it is impossible to create the perfect interface “forever” and the chosen approach is rough. For example, you need to constantly switch between the virtual keyboard and toolbar on smartphones. Therefore we are constantly experimenting. Right now we are working on interesting solutions in terms of context-sensitive formatting on mobile platforms, the desktop versions.
Maybe after implementing this functionality we will be able to further simplify the toolbar, which is the “heart” of any editor. It would be interesting to read the comments, and what you highlight weaknesses or, conversely, the dignity of the office applications on different platforms. Do you edit texts or documents on the smartphone or tablet?.