ONLYOFFICE Editors design Pt.2: A closeup of Desktop Editors interface
In previous article we brought you the ideological outlook on how the user interface of ONLYOFFICE Editors is built. And here we are going to reveal a story about how we designed our desktop application on practice, from developers’ perspective.
Going offline: how is desktop application different from cloud solution
The process of Desktop Editors design started from document editing module of ONLYOFFICE co-working portal. The preliminary task was to modify it both visually and structurally to flee from browser look and make the interface more comfortable for application users. This has largely affected the design of the top panel with tabs and File menu, for instance.
Building the layout
We tried to compact the Caption panel in height so that there would be more space left for document visibility. At the same time it was still necessary to leave enough room for File button, tabs, document name, application label and window buttons. In test version there was also an element for online portal access, but then we decided to allow entering multiple portals simultaneously (i.e. personal and working portals) and located the separate Portals section in the File menu. Dividing Caption panel into separate zones considering the various screen sizes was not an easy task. It meant reducing the tab sizes to the minimum and creating a special button for tab stretching, minimization and switching regimes.
The app is being designed and developed for Windows, Mac and Linux simultaneously, and each version has its own interface-related particularities. For Mac, the window buttons are located on the left with respect to its natural layout:
In case of Linux there were some nuances to handle in placing the tabs together with other app elements while taking care about the convenience, so the Caption panel was primarily made two-level. Due to the lack of a standard documented API for window customization it would look differently on each platform of Linux family. However, eventually we managed to customize the window layout into a familiar form:
For each version, be it Windows, Mac OS or Linux, the system windows and installation wizard were also customized.
The main menu
The opinions largely separated over the name of the app menu. Choosing between “Menu”, “File”, “Home” or no-name option, we went around every single function it was supposed to perform. We wanted to measure as minimal space as possible to keep more for document tabs. Eventually, we chose a familiar “File” as a name for it and moved several editor functions there.
Most importantly here, users must be able to create new documents with one click from any menu section and have moment access to recently opened files and folders. Since we have developed not only desktop app but also the whole online office ecosystem, everything should be definitely interconnected: here comes co-editing via online portal and access to one’s files from any device, again, using portal.
We made the overall menu layout accustomed and familiar, with respect to easy transition to ONLYOFFICE from other office suites.
Color work
The best interface is no interface, this is a principle that we stick to. The user is better off concentrated on their work rather than exploring functionality. We agreed on using dark contrast header and frame in order to highlight the editor window among other applications, preserving the universal look for each platform. Tab schemes were made different, changing color while user switches between menu and editing regime. Avoiding colored headers as featured in the online version, we picked the tab palette complementing the white canvas of the main menu and gray toolbar of the editors.
A little peak into the future
Constantly focusing on enrichment of the toolbar, either by means of standard user requirements or seeking innovative moves, we recognized that existing large set of instruments needs more intuition. This is how we started to work on such inevitable feature as menu bar interface. This layout concept shoots problems caused by ever-growing complexity of toolbar components.
What makes menu-bar layout so wanted?
- It makes sure the whole set of elements is at quick access yet emphasizing the most used, therefore allowing to spend less time reaching that one tool. The menu bar does not only help to arrange the tabs in desired order but also supports embedding usage tips.
- The adjusting size of captions and click areas eases the experience, at least because clicking itself becomes more accurate and close-at-hand. This is especially neat for high-resolution screen users and people with limited abilities.
- The interface responds to user’s actions by pulling up or highlighting likely desired tab according to user’s recent actions, e.g. if a certain object was selected.
ONLYOFFICE desktop suite is comparatively fresh on the market and is only starting its challenge to gain a trusted share while online editing in ONLYOFFICE system exists as a credible productivity tool for years and is used by millions of clients worldwide. This solid experience we proudly state as our main resource.
Side formats support and compatibility with competitors’ products used widely and long makes us to a certain extent reasonably dependent on external environment. Nevertheless, we stick to our own vision over how the editing application should look and work.
