Google Material Design styled WordPress administration panel [research project]

Introduction

In my everyday job I pay special attention to development and improvement of experience of interaction between a person and surrounding objects, systems and programs. I am convinced that development of new technologies is impossible without timely updates of user interfaces. It is a user interface that allows people to use new technologies in their everyday life and interact with them. Existence of new concepts in the modern user interface design is the main factor for choosing the research topic.

Based on the above, this work:

  • This a demonstration of how to apply analytical and research methods as well as the knowledge and skills obtained in the process of studies to development of updated interfaces and improvement of experience of interaction of the administrator with CMS admin panel;
  • is limited to development of the prototype of the updated interface for the admin panel of CMS tool WordPress.

Relevance of the selected topic

A modern individual uses new technologies all the time and this trend is not going to change. As was mentioned above in “1.1 Justification for selection of the research topic and limitation of the study”, development of new technologies comes hand in hand with development of user interfaces. On 3 November 2014 Google Corporation has announced creation of a renewed set of “etiquette rules” for development of graphic interfaces oriented on modern users of the Internet and various mobile devices (tablets, notebooks, smartphones, etc.) called Google Material Design. These recommendations were based on the analysis of an average user behaviour. De facto, Google Corporation urged interface designers to stick to the tested rules and introduce necessary adjustments to their work.

As an experienced website developer and graphic designer I have an opportunity to directly communicate with customers (website owners). I regularly receive negative feedback in connection with convenience of use of user interfaces of the admin panel or another element of CMS. Even the most popular CMS systems do not have convenient admin panels.

Materials used as a basis

Google Material Design concept was taken as a basis for the study. It regulates development of user interfaces aimed at Internet users and users of various modern devices.

The object of the experiment is the admin panel of WordPress CMS system.

Information sources were taken from internet, related literature in different languages (Russian & English).

Research Question

The questions to be addressed in this study:

  1. Is it possible to successfully apply the new Google Material Design concept to creation of graphic user interfaces for modern admin panels in CMS systems?
  2. What the final prototype and the study result will be?

Purpose of the Study

The goal of the project is to create a more convenient and modern prototype of interface of the admin panel for website management and to improve convenience of using CMS admin panel for a modern website administrator.

Hypothesis: Updating the graphic interface and design of the admin panel will inevitably result in better experience of interaction between the website administrator and the CMS system.

Introduction

In the opening of this study it was mentioned that the Internet is not just a new area of entertainment, but also the largest and easily accessible knowledge base. Websites update very quickly and their number is constantly growing. Only few years ago websites were expensive information system, while today they are a necessity. Earlier only large corporations were able to afford a website and to hire trained professionals to administer it and fill it with content, while today any Internet user can make his or her own website. In order to make website administration easier special tools were created – CMS systems.

Besides the above mentioned features, the Internet is one of the cheapest ways to deliver advertising and information. More and more businesses are willing to use this option – from micro- rms to large corporations. An increased demand for website development resulted in rapid growth of this area of the Internet. CMS systems became popular.

The target audience of admin panels has changed: instead of trained professionals now they are ordinary users without any skills of administration complex software systems. The content of websites has also changed. Today not only the information on the website is important, but also the website’s design. New versions of CMS systems receive increasingly more functionality, while not so much attention is paid to ease of use.

The main problem

Today website administrators are not prepared to consider the fact that the CMS admin panel was developed before common custom of working with web-interfaces and websites have been formed. Mostly CMS admin panels are still made for trained professionals. A user with no special skills is unable to efficiently manage websites using such panels.

User interfaces of CMS admin panels mostly require at least basic understanding of how websites work and how to manage a CMS system. Often the difference between expectations of users and the reality is so big that it results in a lot of dissatisfied feedback. The reason is clear – user interfaces of modern CMS systems are not optimized for beginner users and as such they shall be updated and unified.

What is a user interface and what is its role?

In designing any object (a mobile phone, a piece of software, an admin panel for CMS system, etc.) with which people are to interact, an important part is to be played by development of a user interface. It provides a user with a very possibility of working with an object or its functions. It is by the interface that the user judges about the object of interaction as such. Moreover, often a user makes a decision to use this or that object based on how convenient and easy the interface of particular object is. User interface is the only thing accessible by users while working with software. Regardless of the algorithms the software uses or its rich functionality, if a user is unable to access all these functions due to an overly complex interface, it is equivalent to the software not having such functions at all.

It is obvious that a user interface directly depends on the tasks solved by the object, as well as input and output data. However, there is also a significant freedom in how all this information is represented to a user. Success of solving the task implified in the process of design of the object largely depends on how functional, easy and convenient its interface is for users. Software is designed for people and thus the person should not adapt himself/herself for working with the program, but rather the program should provide for convenience and efficiency of work.

One of the methods of transforming an interface where one party is a person and another is a program is designing its interface. Interface design is a total of tools and methods using which a user is able to efficiently interact with particular program.

Web-design

“Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; web interface design; authoring, including standardized code and proprietary software; user experience design; and search engine optimization.” (from Wikipedia, The Free Encyclopedia). Web interfaces are different from user interfaces in that web interfaces have a narrower field of application and that the main source of information input are the keyboard and the mouse (or user’s fingers in case of touchscreens). Website design, placement of functional blocks, creation and placement of the content – everything is performed in a manner that prompts a user to make a necessary action.

It is necessary to understand that behaviour of users is never corrected or changed. It is the website that is transformed (and therefore also its design). Thus we may list the main features of a quality web interface:

  • the time required for performing an action is shorter;
  • there are less user mistakes;
  • the uncertainty in understanding the web interface is minimal;
  • the level of interface standardization is high;
  • the volume of information entered by the user is as minimal as possible;
  • simplicity and visual attractiveness.

These features affect further development of user interfaces in general and web interfaces in particular.

Web-interface

If we are to look to the past and think about social and historical conditions of that time in which many of the existing software interfaces were created, it is possible to trace, why they look the way they currently are. Just as the first cars resembled carts or carriages, everything that can be pressed or pushed should have looked like actual buttons. There is, however, one important aspect here. While we are communicating within a narrow circle of developers and engineers we can have any agreements about the interfaces, but as soon as we are dealing with a broader audience, the most natural intention would be to make interfaces similar to what people already know and use. This is why all early software calculators in computers resembled the real ones, digital keyboards mimic the actual ones (which in turn copy typewriter keyboards), files are collected in folders that resemble the actual folders with documents, etc. At some point it was inevitable for interfaces to use real-life resemblance.

No one would have been able to create a mass product that the mass audience is unable to comprehend. However, today everyone can work with the Internet, use touchscreens and the need to use icon-based interfaces is decreasing. Modern interfaces (including web interfaces) are minimalistic when it comes to design elements; the decorative component is minimal. The focus is on the content. In this situation there is no other choice but to remove and hide all the unnecessary interface elements. The content shall dominate the screen space. By removing excessive frames and outlines we have to rely on typography and the grid by managing the space and fonts. For text-based content the font is the only tool of communicating the document’s hierarchy. One has to involve animations and think over the language of movement. The first priority is the content and not the interface that provides the interaction with the content. The focus on minimization is natural, since the content is the priority.

Why is this happening now? Why it was not done earlier? Because the user audience is now younger and there are enough users prepared for work with digital interfaces. Touchscreen interfaces no longer confuse people. It required time and the people ready to accept and understand. Today the inevitable focus is on the content and direct interaction with the digital world. An important aspect is understanding the universal nature of the content and digital objects. The world where the user can freely switch from one device to another (of different format) provides for universality of content as opposed to interfaces connected to specific dimensions of input devices. All the additional interfaces must be simplified, symbolic, transparent and portable – so that nothing confuses and distracts the user.

Design of web interfaces (and other interfaces for interaction between the user and the digital world) inevitably becomes simple and aimed at the content and the functions. Modern interface minimalism is just an aspect of reductionism, removal or secondary details, integration of functionality directly into the essential objects, focusing on important things and hiding everything secondary. However, “flatness” of interfaces is not necessarily identical and unambiguous. This “flatness” is multidimensional in terms of its implementation possibilities. This is why despite comparable design principles different platforms will have different visual language and different aspects of implementation.

This work will in detail analyse the “flat” Google Material Design interface. This is the set of style and graphics developed by Google along with manuals and rules for these styles.

Google Material Design interface

What is Google Material Design? As was mentioned above in “Materials used as a basis” it is the set of styles and graphics designed by Google along with manuals and rules for these styles. For the first time Google Material Design was shown at Google I/O developer conference in summer 2014. The style is based on “card” and “block” format – simple and laconic forms made of graphic elements as well as on simplicity and “freshness” of design – calm and soft colours, absence of third dimension, small details and details in general. Officially the style became the basis for version 5.0 of the Android operating system also known as Android Lollipop. The new Google interface has received the golden prize of The UX Awards for “the best contribution to the user experience”.

Hereinafter Google Material Design will be used as a starting point for updating the user web interface of CMS admin panel of WordPress system. Why Google Material Design? Here is what Google itself says: “We created a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. Developed a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods”. It would seem that Google Material Design can significantly improve user interface of any software system, where a person is direct user and the user interface is a tool of communication between the user and the software.

What is CMS?

In order to understand the reasons why the demands of admin panel users have changed we would need to briefly familiarise ourselves with the history, operation principles and the current status of CMS systems.

As was mentioned above in “FOREWORD”, the content management system (CMS) is a piece of computer software used to provide for shared process of creation, editing and management of content. Any CMS system is based on the following functionality:

  • providing tools for creation of the content, organization of joint work with content;
  • content management: storage, version control, compliance with the access regime, document flow management, etc.;
  • publishing of the content;
  • presentation of information in the form convenient for navigation and search.

A CMS system may contain various details: documents, films, photos, scientific data, etc. In general CMS systems are classified as:

  1. Enterprise Content Management Systems and
  2. Web Content Management Systems.

This study is based on CMS systems of the second type. Such systems allows managing textual and graphic content on the website by providing the user with the interface for working with the website content, convenient tools for storage and publishing of information, automatize the process of publishing information in the databases and its output in HTML as organized website pages. Most modern CMS systems have modular structure, for instance: dynamic menu, news, articles, website search, product catalogue, etc. There are paid and free CMS systems. Most modern CMS systems are implemented as a visual (WYSIWYG) editor – a program that generates HTML code using a special simplified markup that allows the user to format the text in a simpler manner. In general CMS system can be characterized as a software tool used to add content to websites.

Changes among the audience of administrators

Let us take a look at the past of CMS systems and find out who were CMS administrators in the past. We should start with the basics of functionality of CMS systems. Such an approach will allow comparing functions of CMS systems and the skills of administrators required to manage these functions.

The main features of CMS systems were a very structured development environment and administrators had to use tags and templates because there was no WYSIWYG. Administrators had to be pretty technology-savvy, if they couldn’t do HTML they probably weren’t going to edit their site.

The second stage of CMS development was led by software houses who took over the functionality ideation and started to build the granddaddies of today’s CMS. Key features which were slowly built-in included WYSIWYG text editing; search, improved HTML and the addition of features like survey tools and podcasts. The choices burgeoned and CMS got feature-rich. From now on every website needed a CMS and so web agencies required both the tech skills as well as designers to adapt each client’s site to the CMS frameworks. This enabled many designers to access web platforms but conversely, it also limited the range of designs that were possible. As was mentioned above in “INTRODUCTION”, developers paid most of their attention to multiplying functionality of CMS systems. Administrative panels were still meant for professional use, but due to implementation of WYSIWYG it became more convenient. The first methodologies of admin panel interfaces aimed at a broader range of users and administrators were being formed.

As the coding movement got going, the skills of coders and designers divided on one side into templates for popular open source apps like WordPress coming to the fore. Built by coders but implemented by designers by the end of this period many agencies were using designers to create the site layouts but having their work put into place by coders. The number of CMS systems was growing and has become even more segmented. Each application was (and is) targeted broadly at enterprise, mid-sized companies or small firms/private use; the bottom end dominated by free software like WordPress. Due to such division of CMS systems, the lower dominating class of the systems was already developed for individual persons, but still required understanding of the basic principles of website operation. However, now even untrained users were able to introduce changes (although within the fixed limits of their website design). The admin panel design methodology continued to evolve and develop, while complying with the basics set by the “forefathers”.

Now we are once again at a turning point for content management but this time the "pivot" is based on an individual’s ability to code versus their skill at design. At the same time, a move away from coders and back to design-led website development has been enabled by the new third generation of web CMS tools. The key features are:

  • a hosted platform;
  • resold exclusively by design agencies or affiliates;
  • integration with database, e-commerce, email as modules not plug-ins;
  • modular development so there’s minimal custom coding for integration.

Becoming designer-led illustrates the growing separation for the CMS industry between software written for professional web designers and those for the opensource coder market or blog-writing consumers and the variation in expertise and expectations for support offerings. Today thanks to the detailed segmentation and growing popularity of CMS systems administrator audience has increased significantly. One can say that the methodologies of CMS admin panels became established and the number of user increased. Now the task of interface uni cation can be attempted.

The base material for the experiment is the most popular CMS system WordPress. WordPress is the content management system with an open code.

Defining the target audience

Taking into account all of the above, one can confidently state that admin panels are used by very different people both possessing and lacking experience of professional interaction with admin panels of CMS systems. It is possible to formulate the following characteristics: modern CMS administrators have or don’t have special training in management of such systems; they administer websites on their own or with someone’s help; the age range is 25-45 years old. However, all of them are already connected with modern user interface and this is their common characteristic.

Conclusions and development of an approach to the solution

Now we can confidently say that the audience that uses websites and admin panels for content management has renewed significantly. Few years ago in order to provide for website administration a professional and specially trained team of coders had to be hired, while today young beginner entrepreneurs are becoming administrators themselves. It resulted in increased demand for user interfaces, growth of audience and increase of the offer on the market, which led to the need for unification of user interfaces. The larger the number of users, the more standard and easy to understand the user interface should be. So far the process of renewal of user interface has not significantly affected design of CMS admin panels, while there are some changes in this regard.

I believe that the solution offered by Google can be successfully applied in the field of user interfaces for CMS admin panels. The experiment may move the industry of CMS systems to update obsolete admin panel design to newer and more user-friendly one. The following logics can be applied: updating admin panel interfaces can become a new impulse for increase of number of users and can become another milestone in development of the Internet and CMS systems in particular. Since development of the Internet is closely related to development of new technologies, the development of the Internet will undoubtedly result in development of new technologies, which in turn will result in development of the Internet as such. I am sure that Google developers have done great and very important work in the field of unification of graphical interfaces. It deserves the attention and should be studied and tested in the field of designing user interfaces for CMS admin panels.

The method selected by me for solving the set task is an empirical one. I intend to apply the knowledge gathered and published by Google in order to create a prototype of the renewed user interface of admin panel of WordPress CMS system. I will analyse basic conclusions, recommendations and rules of Google Material Design. After that I am going to analyse WordPress system and test it for compliance with these criteria. Then the first drafts of the prototype will be created. These drafts will demonstrate the final goal of my study. In the end of this work I will provide for the conclusion: whether it is possible to apply knowledge of Google in the field of design of new interfaces and CMS admin panels.

The study

I believe it necessary to commence with studying Google Material Design: start with the main features and then proceed to analysis of positive and negative aspects. On the basis of the obtained data it will be possible to draw a conclusion regarding justi ability of use of Google Material Design in this work. Based on the results of such analysis we should perform study of the current user interface of WordPress admin panel and then apply any changes based on Google Material Design.

I am certain that the work should be performed in this exact order, since we are not dealing with invention of a new thing on the basis of specific cases (a deductive methods – from the general to the specific), but rather with renewal of an old thing on the basis of accepted rules (an abductive method – from a rule to the specific case).

Google Material Design

Google Material Design is cross-device responsive

The main principle of this design aptly named Material is a completely different approach to development of graphical software interface that provides for a unified set of compositional rules. Google design team has developed a common appearance that can be used in all internal Google products as well as in web services and in general for design of user interfaces. The development has started with setting a question on a new way of interaction between a person and software elements. Instead of using pixels on screen and abstract layers the team started the discourse on design as a real and tangible object. As the result of such a discourse it was concluded that the interface should have physical qualities – just like in the real world. However, the real world has set laws of physics according to which objects “work”. Therefore it is necessary to develop similar rules that would de ne how everything is to work and move on the screen. The task was set — to achieve the effect that user interacts with physical objects, only on the screen. Thus the work was started on the metaphorical material resembling paper – flat and white with realistic shadows. It was the beginning on which the remaining part of the design is based.

In 2012 and 2013 the Internet giant started working on the project that would unify the design of everything. The result is the concept of Google Material Design. It could well be an aesthetic evolution of the entire Google design philosophy and, maybe, of user interfaces as a whole.

Creativity and limitations

Google Material Design presumes bold and vivid colours, minimalism and consistency. It integrates all the best ideas of design of user interfaces. Google Material Design is a new style that is positioned as a set of limitations that (according to Google) simplify work of application designers by making it more consistent and intuitive. In the real world we are strongly dependent on physics, but software behaviour oftentimes conflicts with our understanding of the world by breaking the basic rules of logics.

Google designers refuse to give a name to the employed “material”. “Quantum paper” was mentioned in several leaks that took place before Google I/O. It is important, since laws of physics apply to the material and it is able to avoid the trap of skeuomorphism. This is not an accurate imitation of physical objects, but rather an interpretation of a familiar material. The material in the design can do what actual paper cannot — for instance, increase and decrease in size using animations. These animations are important for designers, since they allow the users to understand that they are inside a piece of software. It is important for users to understand the principles of conversion from one thing to another.

Another (and more important) thing introduced by Google Material Design is unification. Google works on algorithms of all its products for years, and this is an integral part of the new design philosophy. Instead of having a user to set up everything, Google Material Design makes users believe that they will see the necessary things on display when they are needed. Alex Faaborg, designer of Android Wear platform, says: “With watches, you don’t want to spend a lot of time interacting with it. You just want to be able to glance down and see information and quickly do a voice command. It is in the same spirit as a lot of the work that we did for Google now”.

There is much more, however, behind Google Material Design. The focus is on the feelings from interaction between a person and the technology. Duarte says: “Xerox PARC did a brilliant job with windows that could overlap and mice that point and click, it was groundbreaking, since the company was able to create a virtual model of the real desktop. People understood how computers operate and were able to use them efficiently. It also relates to what Apple did with touchscreens”. Now Google believes it was able to make the same thing. Currently people have many technologies at their disposal: touchscreens, gestures, voice commands, intellectual algorithms. Google Material Design blends all this in a single intuitive thing. It allows easily use the same things on Chrome OS, Android or simply in user interfaces and on the Internet.

Nine basic principles of Google Material Design

Image is showing how graphical elements may target to specific point

Google Material Design is the unifying theory of a rationalized space and a system of motion. The design is grounded in tactile reality, inspired by study of paper and ink, yet open to imagination.

Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.

The fundamentals of light, surface, and movement are the key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicates moving parts.

One adaptive design. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colours, iconography, hierarchy, and spatial relationships remain constant.

Bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.

User action is the essence of experience design. The primary actions are in action points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.

Example of Google Material Design as Smartphone Wallpaper

Changes in the interface derive their energy from user actions. Motion that cascades from touch respects and reinforces the user as the prime mover.

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.

In Google they say: “We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science”.

Example of Google Material Design as Wallpaper and Calendar Widget

Pros and contras

The first and the most important argument in favor of the new style is its design. The style is finally replaced with a more flat, light and simple one. The interface is more cohesive, everything is made in a single style, and nothing looks patchy or overly bright. The main principle of Google Material Design excludes the priority of graphical elements in the interface. Currently Google Material Design looks very coherent. Visually the interface is enlarged. Google Material Design features somewhat larger fonts, icons and lines; the interface as a whole became larger.

The concept of new Google Material Design interface can be described as a successful attempt to come closer to emphasizing the importance of informative and functional components without compromising on graphical output. There are, however, certain contradictions here.

Having familiarized with online user reviews, one can say that there are opinions of two types: those who like the new interface and those who do not. Some say that it is only a use of fashionable at design, some say that designers are just being lazy and unable to come up with anything but this primitivism, some do not like vividness of colors.

I can make only one conclusion — there are no objective reasons as to why this style should not be used. All the negative opinions are purely subjective.

Conclusions for Google Material Design

Example of Google Material Design as Wallpaper and Elements

I was unable to find any objective reason to say that Google Material Design is a step back in development of user interfaces. I believe that this is a successful and necessary attempt to unify and optimize the existing tendencies in user interface development. Everything is clear and easy to understand. Positions are logically relevant. Rules of use of the style are clearly formulated and explained. All in all I believe that this approach is a step forward towards a new stage of evolution of graphical design of user interfaces. I think that use of Google Material Design in further work on updating of WordPress CMS admin panel is justified.

CMS WordPress

WordPress is the most popular blogging and website development system. WordPress allows working with personal online blogs and large news websites. While developing in WordPress special attention is paid to the semantics, web standards, convenience and ease of use. Due to popularity of WordPress the system has many plugins that allow easily expanding functionality or change website design. The system is written in PHP and uses MySQL database server. WordPress is published under GPL license.

In order to stage the experiment I wanted to select a popular CMS system that would be easy to integrate with an admin panel of a new design. Software architecture of WordPress is well thought and documented, the system is free, easy to install and use — these are the qualities that make it so popular among the developer community. No better candidate could be chosen. Another important thing is a possibility to get a larger audience of people using the admin panel and thus to demonstrate the work to as many people as possible.

The current appearance of the admin panel was formed quite a long time ago and during the entire period of the system’s development the developers were following this concept. As was mentioned above in “INTRODUCTION”, the audience of WordPress admin panel grew significantly, while the panel itself remained virtually the same.

General page analysis

In order to proceed to the detailed analysis of every specific page the general architecture and logic of the admin panel has been reviewed. The underlying methodology of Google Material Design was used as the basis: “[...] users will see the necessary things on the screen exactly when these are needed [...]”.

WordPress CMS system consists of individual functional pages. The following pages were used for this work:

  • Editing and adding of pages;
  • User comments;
  • List of website users;
  • Editing the user pro le;
  • The list of posts (news/blog stories) on the website;
  • Website settings page.
  • Below the admin panel pages are analysed in detail.

All the pages of WordPress CMS system work according to the same architecture — there are 3 independent interaction blocks. On the left there is a navigation menu for the admin panel (hereinafter – the left block). The left block is used by administrator to move between panel pages where interaction with functions of CMS system takes place. This block is always visible and takes approximately 10% of the total available screen space.

At the top there is a quick navigation menu (hereinafter – the top block) for some specific admin panel functions (a shortcut). On the right there is the main working/user interaction area (hereinafter – the main block, the main page section). Use of the top block is only convenient for a website visitor. It can be used to quickly return to the admin panel. The main block will be analysed in the context of individual pages.

Based on the general analysis of the results I may conclude that having removed the left and the top blocks from the field of view we obtain additional space for the main block; the left block will be presented to users only when it is actually needed; the top block will only be present on the website visitor’s side. Most of the admin panel pages have excessive information – this is why for a user without CMS admin panel management skills it may be hard to focus on what is really important at a particular moment in time.

Page analysis – Editing and adding pages

CMS WordPress, Edit Page

The function of this page is to create, remove or edit the content, create a new page or set options for an existing one. Let us take a look at the main working area.

The largest block (a WYSIWYG editor) is used to compose or edit the content. It is easy to understand and its appearance reminds of a Microsoft Office document that most users are well familiar with. The editor itself, however, is overloaded with additional functions that can be hidden and activated on demand. Above the editor there is a field where users may enter the name of the page. The content in this field will become a name for a website navigation menu section. These are the two major elements with which users interact. All the primary actions of users take place around these fields.

Page settings located on the right inside the main block, a separate functional section that attracts attention due to many functional and graphical elements. This distracts users from their primary actions. This block is better designed as a separate dialogue window that opens upon user’s request.

To summarize the above: the user’s field of view simultaneously has various functional elements that may and should appear only as requested. Their absence in the field of view of a user will help to focus on the main task – filling in the page with content, and on the secondary one – the page setup.

CMS WordPress, User Edit Page in Google Material Design view CMS WordPress, User Edit Page with WYSIWYG popup in Google Material Design view CMS WordPress, User Edit Page with Page settings popup in Google Material Design view CMS WordPress, User Edit Page with Calendar popup in Google Material Design view

After updating the design the left block is moved to the top right corner and is activated by clicking the respective icon. The page settings menu is moved to the contextual menu, is activated by clicking the respective icon and becomes available to users only on request. The overall design of the page is based on the nine points of the Google Material Design concept that were set out in section “Nine basic principles of Google Material Design”. When a user enters the text in a special field the edit menu appears. The user can drag it to a suitable place on the page without scrolling it up, if text was moved to the bottom of the page. This solves the issue of accessibility of the menu with excessive text on screen. Dialogue windows that appear overshadow the background of the working space thus focusing the user’s attention on the elements opened and active at a particular time. It helps to concentrate attention and avoid potential mistakes.

As the result of performed works the page became easier to use. User’s attention is focused only on elements and functions important for him/her at a particular time. Work with the page becomes more pleasant and comfortable; information load on the page is decreased; user’s interaction with page elements is optimized; the least important elements are hidden. The entire architecture and design of the page now support the main block – the area of filling the page with information.

Page analysis – User comments

CMS WordPress, List of Comments Page

The function of this page is to administer commentaries left by other resource users. The apparent thing once again is the disorganized content. The working area is overloaded with information and can be optimized. The left and the top menus previously analysed in section “Page analysis – Editing and adding pages” were hidden and moved (further on it was done with all other pages).

CMS WordPress, List of Comments Page in Google Material Design view

After updating the design comment “cards” are used instead of table lines now. To make it easier for the administrator to find his/her way around the cards only the most important information is left: user name, comment date, commenting user avatar, comment status. Comment status can easily be changed directly on the page. Additional functions of the comment page such as filtering and sorting are moved to a separate dialogue window that can be opened by clicking the Settings icon (a gear- wheel icon). Just like in the “Editing and adding pages” section, when the context menu opens the background becomes overshadowed.

As the result of the work performed the page was made very intuitive due to the use of user cards and content organization. The page is easy to navigate and it is also easy to work with user comments.

Page analysis – List of website users

CMS WordPress, List of Users Page

The function of this page is to provide the list of active and inactive users on the website. This page is overloaded with information; primary and secondary information is stored together and presented to the user at the same time. There are many repeating elements on the page – table headings (name, user name, email, role and posts).

CMS WordPress, Users List Page in Google Material Design view

After the page analysis the following design changes are made. Lines with the list of users (just like user comments) were replaced with cards. Only the most important information was left for initial familiarization with the page: user name, user’s role in the system, avatar and quick action buttons (edit or remove user). All filters and card sorting were moved to the contextual menu marked with a gear-wheel symbol (Page view settings). As the result of the implemented changes the amount of free space has increased and the appearance stopped being visually cluttered, while functionality remained the same.

The page became more intuitive and easy to use.

Page analysis – Editing the user profile

CMS WordPress, User Edit Page

The function of this page is to edit user profiles on the website. The central part was studied. This page can be characterized as a page without interface design as such: fields are placed in a column and there is no logic involved, except for an attempt to organize individual fields into groups thus making it easier to edit the page.

CMS WordPress, User Edit Page in Google Material Design view

The working area was optimized as follows: all editable fields are organized in groups, and the groups are separated by a distance sufficient for better perception. When a field is filled in the system automatically provides feedback as to whether it is possible to use the input data or not. The contact card is organized in an intuitive and convenient manner. Additional functionality of the page is moved to the contextual menu that appears upon clicking the gear-wheel icon.

All in all administrators received convenient view for editing user information with immediate feedback from the system with regard to the information entered. The space is organized in a clear and intuitive manner; user’s actions are clear and predictable.

Page analysis – The list of posts on the website

CMS WordPress, List of Posts

The function of this page is to provide the view of the list of posts (news, articles) on the website. Let us take a look at the central part of the page. Just like on the other pages, a table is used to display the existing posts. A decision was made to employ content and appearance optimization in order to use the available space with maximum ef ciency, provide users with an option to quickly interact with the page content and ensure an opportunity of quickly eye-scanning the page.

CMS WordPress, List of Posts Page in Google Material Design view CMS WordPress, Edit Post Page with Settings popup in Google Material Design view CMS WordPress, List of Posts Page with Batch Settings in Google Material Design view CMS WordPress, User Edit Post Page with WYSIWYG popup in Google Material Design view CMS WordPress, List of Posts Page with Page View Settings in Google Material Design view

After updating the design each post was transformed into a line that contains maximum useful information for users. The post heading is the most important element, followed by its description and only then by its parameters. Just like on the other pages additional functionality is moved to the contextual menu that appears upon clicking the gear-wheel icon. If a user needs to select an individual post(s), after the selection is made a pop-up window appears with the list of possible actions to be performed with the post – its editing or removal.

As the result of the performed actions the page shall ef ciently use space to display the most important information without limiting functionality in any way.

Page analysis – Website settings

CMS WordPress, WordPress settings page

The function of this page is to provide website settings for a system administrator. Let us take a look at the main part of the page. The fields on the page are placed in a column. No distinction is made between primary and secondary actions of users. There is no logic and visual coherence.

CMS WordPress, User Edit Page in Google Material Design view

After the analysis the working space was optimized as follows: website settings were organized into the primary and the secondary groups, divided into two columns to provide for optimal use of space; the design was organized so that the color of the header of the page corresponds to the color of headers of all system settings pages. Thus there is a visual cue effect – a user still sees a section on system settings. The logic of this page corresponds to the logic of the page on editing user information. Thus the connection between user settings and system settings is not breached. The common keyword here is “settings”.

The general view for editing website information is clearly and intuitively organized, while user actions are clear and predictable. The system provides the required cues when filling in the fields (e.g. regarding the date and time format).

Pros and contras

This work has to consider one negative aspect. Professionals who spent many years working with an old interface can be the most vocal critics of an updated interface. For this group of users such changes in the interface may seem unnecessary and completely useless. At the first glance it may seem that the new interface will require a lot of additional resources to learn it. However, one should note that the new interface was developed to provide for intuitive controls and as such should not require any skills or time to learn.

Positive aspects of this work. First and foremost it is involving a new audience. People enjoy trying new and interesting things. New design and ease of use should attract both new audience and the old one (people who stopped using the system for some reason). Now WordPress can be promoted as the easiest and most convenient CMS system available. Providing a new fresh look on familiar things is another important aspect. It is possible that some users are waiting for similar solution. Another obvious bonus is creating an image of a constantly evolving and updating system. Such image automatically leads to developing trust in end users. The new version optimizes interaction of the user and the system, features a simpler interface, will result in less potential user mistakes, takes into account different types of input devices.

Conclusion for WordPress

As the practice demonstrates, interface of WordPress admin panel can be improved and optimized, but one should not forget that initially the system was created for developers with certain professional skills. Possessing extensive experience in development of the system I can say that integration of a new design into the admin panel is possible and is not an overwhelming task. The system is fit for changes and due to its modular structure allows implementing virtually any kind of change.

Conclusion

The goal of this project was creation of a convenient and modern prototype of CMS admin panel interface. The work was based on WordPress system and Google Material Design. The tasks of the project included developing a graphical prototype on the basis of the knowledge obtained as the result of the analysis. The set tasks were solved as follows:

  • study of Google Material Design was performed;
  • the main features and methodology of the design were outlined;
  • analysis of the existing admin panel of WordPress CMS system was performed based on the obtained knowledge;
  • discrepancies were detected;
  • the discrepancies were analysed and the conclusions were made;
  • the methodology of the new admin panel of WordPress CMS system was developed (based on Google Material Design methodology);
  • the prototype for the most important pages of the new admin panel of WordPress CMS system was developed;
  • based on the prototype obtained by an experimental approach a positive conclusion on the consistency of the proposed theory was made – use of Google Material Design in development of CMS admin panels increases convenience and comfort of interaction of a renewed user audience with CMS admin panels.

The following conclusions were reached as the result of the work performed:

  1. the user audience of CMS admin panels has changed signi cantly;
  2. existing design of CMS admin panels (as exempli ed by WordPress) is obsolete and not convenient;
  3. Google Material Design methodology can be successfully used and integrated into interfaces of CMS admin panels;
  4. comfort and convenience of use of WordPress admin panel have increased significantly;
  5. appearance of WordPress admin panel has changed for the better.

To summarize the obtained results and the conclusions made one can state that use of new methodologies in user interface design is justified. The result must be proven empirically.

There are certain prospects of further studying this problem: is it possible to use the new graphical user interface methodologies in design of living space, vehicles, furniture, etc.?

The experiment has demonstrated that Google Material Design methodology can be used to design graphical interface for WordPress admin panel. It means that the tested paradigms of Google Material Design as applied to user interfaces can be used to ef ciently update user interfaces of other systems (not only CMS) with which users interact.


Send your message