Mobile:2015

UI / UX Trends

Onur Oral
Interactive Mind

--

Whether on an app screen, a web browser, or a wearable watch face, design is one of the most important drivers of consumer engagement. From flat design to Material design, I analysed what trends have evolved, and share a few of my insights with you — what are these trends? Why are they beneficial to the user? And how are they created?

Let’s look at how flat design and Material design came into play and evolved to the trends we see today.

Lighter Design

Shot by Ghani Pradita

What

Instead of incorporating a wide array of gradients and shadows, shifting to a ‘flat design’ creates a lighter aesthetic in the app. This means using negative space — instead of gradients, shadows, etc. — can create a simpler interface, focusing only on having core information and removing design elements that are not productive as itself and to the user flow.

Why

Lighter design removes distraction to help guide the user’s eye to meaningful content on the screen, enabling easier navigation while also providing a sleek, modern aesthetic to the brand itself.

One Typeface To Rule Them All

Shot by Brian Plemons

What

Reducing the number of fonts on a screen can reveal the power of typography. Instead of using different typeface and leveraging different characteristics — e.g. italics, bold, semi-bold — and different font sizes can better differentiate discrete areas of content.

Why

Embracing a singular typeface across an entire app drives consistency not only for branding, but also across channels — e.g. app, mobile site, website — thus optimising the mobile elements across the omnichannel experience. Also, users prefer the simplicity of having one typeface to scroll through in identifying relevant content.

Spaces & Blocks - No More Lines

Shot by Eric Atwell

What

While previously lines and dividers were used to clearly delineate specific sections or categories within a screen, adding these elements can result in dense, crowded interfaces. Straying away from lines, interfaces which leverage clustered blocks of content separated by spaces have the advantage of freeing up that space and establishing a clean look.

Why

The removal of explicit lines and dividers provides a modern look that focuses on functionality; for example, images and/or fonts can be bigger, providing visual clarity and improved ease of use. Leveraging space instead of drawing lines helps to define different sections in a non-obtrusive manner.

Spotlighted Data

Shot by Morgan Allan Knutson

What

As users’ preferences shift toward a simpler interface, usage of big fonts and striking colors get more common to make a certain data the center of focus. Highlighted data can vary according to target customers.

Why

Leveraging increased font size and/or a pop of color draws the users’ attention to a particular area of the screen — without an obtrusive, heavy-handed push or command to do so. As a result, users can access information more quickly, providing an easier navigation and information-gathering experience.

Micro-interaction

Shot by Kirill

What

Micro-interactions are small visual enhancements (for example — an animation, a sound etc.) that occur around a use case. These scenarios may include completing a transaction, favoriting an item, or prompting a pop-up message. These interactions are subtle, but they differentiate the product by pointing to the attention the right element.

Why

These micro-interactions can be leveraged as a signal to prompt the user while accomplishing a task — e.g. adjusting a setting — creating a small piece of content like a pop-up message. Apps which have well-done micro-interactions considered easier, more fun, and more engaging by their users.

Smaller Color Palette

Shot by Ari

What

The usage of simpler color schemes became a trend after the introduction of flat design in 2013, which embraces clarity and simplicity. As a result, designers and users alike prefer the usage of smaller number of colors, aiming for a clean look.

Why

Usage of color is essential in creating a certain mood, guiding the user’s area of focus, and communicating a brand. By using fewer colors, the brand identity can be reflected more clearly. In addition, users may prefer this aesthetic as it removes the distraction that too many colors can cause, and it better highlights key features, improving navigation through the app’s flow.

Layered Interface

Shot by Roman Nurik

What

Previously, interfaces were centered around the principle of skeumorphism, a design principle that takes cues from original structures or objects (for example, digital calendar resembling a paper desk calendar, 3D ‘depth’ on app icons, the shutter click sound of a mobile phone). Now that flat design has shifted away from this principle, it opens up the opportunity to create depth in new ways. Primarily, using layers helps create this feeling of depth and dimension, creating a more ‘tangible’ experience.

Why

An implication of flat design was the risk of being ‘too flat’ — with so much subtlety, how can the user navigate and engage, given their conditioning to a 3D physical (and previously digital) world? Layers provide the ability to show one item is on top of another by taking full advantage of the z-axis. Layering and increasing depth helps identify the relationship between different items, and draws attention to certain items.

Ghost Buttons

Shot by Gleb Kuznetsov

What

Ghost buttons are transparent buttons, having no color fill. Their borders are very thin-lined, and the shape itself is basic — such as a rectangular or squared, with right angle or softened edges. Text in these buttons are simple and minimal.

Why

These subtle buttons can grab the user’s attention while still seeming clean, trendy, and unobtrusive. It also allows for there to be a hierarchy of buttons on the screen — if there are different buttons on the screen — if there are different buttons in the same page, they may be designed and placed with prioritisation (e.g. ghost buttons for optional or intermediate steps). In some cases for material design, subtle shadows are used to help users perceive that hierarchy.

Gestures

Shot bu Javi Pérez

What

With integration of gyroscopes and motion sensors, consumer devices are able to detect movement. With this, interaction between user and the device moves beyond the click and extends real life gestures to the screen.

Why

Users are intuitive about gestures. When asked how to delete an item, users tried to move the item out of the screen regardless of age, sex and gender. Enhances user experience with less taps and more scrolling, applications become more interactive by positioning the screen more than just a touch target.

Motion

Shot by Eddie Lobanovskiy

What

Through software innovation, designers now have the ability to take advantage of controlling movement with their style sheets. Motion-based design elements can be seen in a variety of forms, including transitions, animations and even on texture to mimic 3D depth. The use of motions within the design helps users to engage with and internalise content, differentiating that element or data/object from others to highlight its importance.

Why

Motions can draw user’s attention to a specific area — or help to distract from it. By showing a visual response, it can increase engagement, delighting the user with a ‘wow’ factor.

Shorter User Flows

Shot by Jan Losert

What

Instead of navigating through multiple pages to complete a single transaction, a single screen can include those intermediate steps and reduce the time and effort spent in app. For example, a form can automatically open or highlight the subsequent input area when the user completes the previous field.

Why

Mobile users prefer to complete their transactions in an app easily and quickly while they are on-the-go. Designing the experience of the applications according to this insight minimizes the effort for the user and can increase the rate of conversion and/or frequency of app opens.

Design Standards — as Best Practice

Shot by Bill S Kenney

What

Design standards is the process of setting the visual language at the beginning of the project by determining standards such as colors, icons and global padding.

Why

Setting the standards of the design helps to create consistency within the application and between different platforms. It minimizes possible errors while bringing the project into life and makes it easier to make modifications in the future.

Prototyping — as Best Practice

Shot by Ramil Derogongun

What

A prototype is a preliminary or early working version of a product. The usage of prototypes can provide valuable insights into the functionality of design, highlighting potential changes needed in order to enhance the user experience without costing a major loss in designer time and effort.

Why

By creating these low-cost ‘experiments’, prototyping can clarify the key components of the project, including the feature scope and requirements. It leaves essential time and resources to learn from the experiment and iterate on the product in an insight-driven process.

--

--