18Sep2014

Usability and UI design: Material Design

Apple’s look-and-feel style was dominating in mobile and even web design for a long time. Inspired by Steve Jobs the iOS UI/UX was treated as almost absolute standard. Even some of Android developers and designers were trying to copy iOS practices in their projects. Keep in mind, you should have very important reason to fight a framework. Recently, Google, as main supporter of Android platform, announced Material Design [http://www.google.com/design/spec/material-design/introduction.html] their point of view on both questions Usability and UI design. Besides, Material Design is not just pure theoretical specification. There is new Android 5.0 “Lollipop” version available. It’s based on Material Design. So, you are able to try it live, as well.

Flat, non flat and material

About 10 years ago the web design was pretty huge visually. It had a lot of almost realistic graphics with 3D effects, shadows, gradients, etc. Even small buttons and icons were 3D-like. Later, the web became more productive and useful. For now, it’s not just pure visual set of pages to represent some information. It’s rather applications with thick UI. So, visual component of Usability and UI design is on the sidelines. Redundant graphics is not the goal anymore. There is flat design and simplicity is its key point. It allows to have more information transferred and presented with less resources. Nowadays, there is a wide range of devices: mobile smartphones, pads, PCs, TVs panels and even watches. That makes flat design concept is more important at line of responsive UI implementation. What about Material Design? Is it flat or not? Well, the most correct answer is the Material Design is a next step in evolution of flat design.

Visual rules

Basically, any scene or view is splitted into objects and their groups. Formally, each object is a 3D object in Material Design. But all layers occupy single z-axis value and all objects have the same standard 1dp thickness. There are also shadows casting from key and ambient light. That means material. No element can “fly”, have height more 1dp or be without height at all. That means there is no element without shadow as well. Visual rules and physical properties of Material Design as complete presentation system makes it new trend in Usability and UI design.

User Experience

User activity events like touches or clicks can not be propagates through the hierarchy of material design elements. So, behaviour here is like in real world, as well. Elements are usually rectangular sheets of materials. At line of Material Design scheme, that would be incorrect move up and down one sheet through another, bend, fold or rotate an element. On the other hand, it is normal to move or lift sheets along any axis. Generally, z-axis motion is used as visual result of user interaction. It is also possible to join and split objects on the same layer. E.g., to represent CRUD operations. Material Design is a full visual system. It is applicable for all kinds of devices from mobile smartphones to PCs and TVs. It supports all types of input methods like keyboard, mouse, touches and even voice.

Read also

Comments are closed.