Runtastic On Android Gets A Material Design Makeover

Design at Runtastic:
At Runtastic, we’re lucky to have some incredibly smart and talented people on our team. When we create and improve our apps, we always strive to combine design principles with the latest technology. We do this to ensure our apps are appealing, as well as full of innovative technology. Our design department works tirelessly to ensure that our apps are easy to use, functions are where you expect them to be, the colors are pretty and those all important stats are easy to read. This has always been important to us at Runtastic, and our apps on Android are about to get even better thanks to Material Design.

Material Design & Android L(ollipop):
Material Design is the new design language from Google for designers and developers, bringing a design that’s suited for small screens, big screens, circular screens and works across different platforms. While Material Design has many guidelines and is undoubtedly a big undertaking, we’re here to break it down and help you wrap your head around the major elements.

Material Design is here to bring the same user experience across various Google platforms. It can currently be best seen in Android Lollipop, which is the latest version of Google’s mobile operating system. By using Material Design across a range of platforms, there will be a standardized design and users will then come to expect the same experience and response to their actions, on whichever Google product they’re accessing their apps.

Material Design is a simpler, clearer and more friendly design, with bright colors, modern visual appearance and delightful animations. Apps aren’t flat design (clean, sharp design, bright colors) but neither are they skeuomorphic (a design made to look like real-world objects), instead they’re 3D pixels with realistic lighting to show the seams and divides in space and to make it easier to see moving parts.

Apps are layered like bits of paper at different heights as you look at your phone. Each element in Material Design, the menus, the top layer, the bottom layer are designed to behave like they’re made out of real, physical material. Imagine the background of an app is one sheet of paper, a menu would then be another sheet placed on top of it. This second sheet (the menu) then needs to be moved out the way to see the background again. The layers are coded to have the behavior and weight of actual bits of paper when moving around your screen – smart stuff!

These ‘real world’ features can also be found elsewhere in Material Design. The menu, or the top layer, casts a shadow onto the layer below as if it was floating above it, while background images will blur slightly when they’re at the bottom of the pile. There is also a strong focus on animation which can be found throughout Material Design. This can be seen in the ripple effect that emanates from where a user touches a button, the smooth sliding of menus and layers or when a paper rises to meet a user’s finger to emphasize what is currently in context. The use of animation is designed to help people within the interface and let them know a change has occurred, expect more smooth ‘slow in and slow out’ motions from your location with Material Design and less abrupt opening of new screens.

Inspiration:
The inspiration for Material Design is that of ‘paper and ink.’

“Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.” – Google

 It’s about using white space effectively and easy to read typography (Roboto) – maximizing on screen information without looking crowded. An example of this can be seen in the Activity Detail Screen, where we’ve used a print design to show a lot of information without making it look too full. Using a print design aesthetic with the use of bold colors makes things look a lot clearer and much easier to read. Since Material Design isn’t just being used for phones and tablets, apps need to be readable on circular watch faces or even on Google Glass.

Here are some features you should expect to see with apps that are designed with Material Design:

• • • There will be a standardized action bar without a logo, just bold color and typography
    • Navigation drawers being accessed by the hamburger icon in the top left corner (or by swiping from left to right) will become the standard
    • One, primary app color, and a contrasting accent color to bring attention to on-screen elements
    • The key action on a screen, e.g to write an email or adding a run in Runtastic, is highlighted by a circular floating action button in the accent color
    • Tabs, in general, will be visually part of the action bar and won’t have dividers between them, but this isn’t a hard and fast rule
    • Images will run edge-to-edge and can appear behind the action bar or status bar
    • Less cluttered looking screens

What does Material Design mean for Runtastic?
This means we will have consistency across all of our Android apps, as we begin to bring Material Design to all of our apps. Why? To provide a consistent look and feel from one app to the next – just the way Google intended.

What has Material Design changed in Runtastic?

^{(Left to right: Andreas Stütz – Android Software Engineer, Pol Kuijken – UI Designer, Markus Hintersteiner – Android Software Engineer)}

The Basic Idea:
When creating an app, our designers and developers need to consider where to draw the user’s attention. With Material Design, the guidelines (that screens will look less cluttered and make it easier to draw users’ attention to the most important info on screen) make this easier. We’ve subtly changed a few parts of the app to make it easier for you to locate the most important information about your Runtastic activities – read on to see what’s different!

Mainscreen:
When you first open Runtastic, you will notice (we hope!) that your main screen is a bit different. We got rid of all unnecessary elements and reinforced the structure with more thoughtful typography and layout elements. There are no longer dividers between the main statistics, by designing this according to material, it’s easier to read – basically easier to glance at when running! The Start button is now easier to see as it’s a floating action button above the map. The Pause & Stop buttons received the same treatment and are also floating action buttons above the map. The use of floating action buttons allows us to free up more space for important user interface elements, to highlight important interactions and to allow for more edge-to-edge elements and a more immersive experience.

Note: The app settings can now be found in the main menu!

Post-Activity − Picture & Mood:
Right after an activity, you’ll notice a few more changes. This is the screen which contains any pictures you took during your run – if you didn’t snap a pic, then we’re using smart imagery to show you a fitting illustration based on the surface of your activity, with the duration and activity type displayed at the top. In the near future, the illustration shown will also take weather and time of day into account, for a more personal picture after your run. The mood and surface buttons are located here and are much easier to access, and you can also add notes about your run here. You can also move the paper upwards to reveal heart rate readings and the weather. If the paper isn’t scrollable, this means your device has a resolution capable of displaying all the information already. A much friendlier looking page with Material Design!

Sharing:
When you’re ready to share your run, you’ll see another change! The sharing screen has also been changed to have a more Material Design look to it. The pink action button will share your activity via your chosen methods. The bottom paper is interactive and can be flicked upwards to reveal more sharing options, you can also dismiss it by flicking downwards. And, it’s now easier to type a message about how your activity went, your mood, toggle Facebook/Twitter sharing on or off or use another installed app with sharing capabilities.

Post-Activity − Statistics & Map:
Here you can view more stats about your run and scroll upwards to see more, where we’ve applied font alignment to have a print-like look in order to make them easier to read. We’re sure you’ll agree they’re much easier to read with their new design! With the activity detail map screen, we’ve added more thoughtful layering and given your activity statistics better visibility with the new design. Scrolling right will reveal your pictures, notes, weather, surface and mood from the previous screen. Scroll right once more and you will see heart rate readings from your activity.

History:
We noticed many of you were frequently adding activities manually, so we’ve made this action even easier by adding a circular floating action button (still pink). Before, this was in the top right corner of the action bar, but it’s now located in the bottom right and has been made much more visible. The numbers shown are now bigger, better spaced and easier to read due to a print design aesthetic. The statistic type above the number is more visible so you know the meaning of the number you’re looking at, and the statistics can be changed by scrolling left or right. If you scroll through your activity history, you will see the month name under the numbers is now animated, it visibly changes from month to month as you scroll through your history. It just got a lot easier to see and understand your monthly stats!

Activity Detail & Graphs:
If you’re looking at one of your past activities, then swiping left will bring you to the pace and elevation graphs, which you previously had to scroll down to find. We’ve also given these stats better visibility by using font alignment. If you go to the vertical graph you will see your pace and elevation in graph form. You can double tap a kilometer or mile to see a bigger, more detailed view of that kilometer or mile’s pace and elevation graph. At the bottom, we’ve given you options to switch between distance or duration, change the splits and chose to display your pace or speed. Material Design allows us to keep feature-packed and information-dense screens like this simple to use, thanks to its minimal and clean controls.

“User Interface design used to copy the real word through an abundance of gradients, highlights, shadows, textures and patterns. That got old fast, which caused the revolution that was Flat Design. No more pseudo-realistic visuals, everything is now purely digital. Looks cleaner? Sure. Works better? Not necessarily. Enter Material Design: Google combines the best of both worlds. They invented their own physical rules for how materials in your interface should behave.” – Pol Kuijken, User Interface Designer at Runtastic

This is still just one of our first steps into the world of Material Design and we’re very excited to let you play around with the new Runtastic. We’re looking forward to see how you use and like the update and use that feedback to implement Material Design in our other apps in the best way possible.

***