Pydio Move to Material Design UI : Why and How

Why did Pydio transition to Material Design?

The reason for our move to Material Design dates back to 2015, when we decided to work on an Enterprise Distribution. We analysed our product at that time under every aspects, we took a close look at our users’ needs, what they missed, and how they used Pydio.

Among other things, we decided to build a brand new Admin Dashboard with advanced features that our Enterprise customers had been calling for a long time : granular permissions controls, selective plugin activation, complete server logs, kill active sessions etc…).

Google announced Material Design at its 2014 I/O conference, and not surprisingly, it was immediately successful. So when we started to think about a new design, we naturally took a close look to Material Design specs to learn more about it.

With the proliferation of mobile devices becoming a reality in the field of Enterprise collaboration and more specifically regarding file sharing usages, our main focus was on interactivity : we wanted to build interfaces that could react appropriately with any device.

A key consideration was to deliver a software that would be accessible by all types of end-users, whether they are familiar with technologies or not. This implies a clear architecture of the information, through the use of colors, spaces, backgrounds, that will create hierarchy and meaning within the page, whether it is on a desktop screen or on a mobile phone, and to focus on user interactivity.

At the same time, our tech team was looking for a new Javascript framework: ignited at a time when no MVC frameworks were really stepping out of the crowd for this language, AjaXplorer team (the former name of Pydio) had built over the year their own platform for UI components, templating and re-usable modules. But it was time to move forward.

After a look at Google’s WebComponents, that they rejected as it was requiring “evergreen” browsers (most modern versions of web browsers, which unfortunately is not the situation for many Pydio end-users in the enterprise), they finally adopted Facebook’s ReactJS for its simplicity and its performances, as well as for its good fit with the legacy Pydio platform. Digging WebComponents was also the opportunity to discover Material Design specification, and they soon found a neat react-based implementation of these UX guidelines. (See references at the bottom of this article).
 

What is Material Design exactly ?

As defined by Google itself, Material Design is "a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science".

In other words it is a whole set of design principles aiming at developing a single visual system that will offer a unified experience across platforms and device sizes. Originally, Google even named this system the Cross-Platform Design, because it was created from the need to have a single, cohesive design system that worked no matter what device the user had.

Material Design is based on ink-and-paper concepts such as lighting, depth perception, shadows, and edges – elements we experience in real life. Google based its design system on these real-life principles to connect with the user on a human level; however, Material Design takes these concepts to a new level.

There are many principles surrounding Material Design, including how to create shadows, optimize shapes and colors, and transform material based on its environment.

Google provides very detailed specifications about Material Design, that break down everything and give guidance on Animation, Style, Layout, Components, Patterns, Usability.

Each category has subcategories and a variety of tips and information about how to implement each one into your website design. To go over each specification is outside the realm of this post.

What does Material Design change for Pydio users ?

The enterprise admin dashboard is purely material design based :  interfaces are three-dimensional constructions, composed of layers of “physical” components. Layout is entirely responsive, composed with a “mobile-first” mindset, allowing any administrator to fully manage its platform on-the-go, without the need of redeveloping a native application for mobile devices.

Fundamental design techniques drive the visuals. We eliminated flat graphics that can be confusing to the user.

Typography, grids, space, scale, color and imagery guide the entire design. Elements live in defined spaces with a clear hierarchy. Color and type choices are bold and deliberate.

The main files and folders panel is still in a state of transitioning : for development reasons, and for users comfort of not revamping entirely their interface between two version, Material here is used in more subtle touches : dialogs, forms, buttons typography. We are continuously improving that view to converge toward a purely material status. Stay tuned for the next releases!

The upcoming PydioPro mobile applications (currently public beta for Android and private beta for iOS) were rewritten following the material principles. Below are some screenshots comparing the old apps and the new ones.

The tactile surface is a container for content and information. The container is flat in design but has a faint shadow to separate it from other containers and layers. Other techniques to create separation between layers – such as textures, gradients or strokes – are unnecessary.

You can see the separation in the layers in the screenshot above. There is a top menu layer covering a greyed out main content layer. Even the main header image contains elements of layering that emphasize a three-dimensional tactile surface.

What is your feedback about Material Design experience ?

By adopting Material Design, we clearly adopted Google’s move toward a mobile-centric shift, but still ensuring that mouse and keyboard interfaces are fully optimized.

We often hear that Pydio provides a great user experience compared to most other file sharing solutions on the market and we hope that our new Material Design UI will help in this sense !

Going further: some technical references

Google Material Design specifications: https://material.google.com/
Facebook ReactJS: https://facebook.github.io/react/
Material Design Icons: https://materialdesignicons.com/
React-based material implementation: http://www.material-ui.com/