Building a Visual Language for iOS 8

09/23/2014

MAZ — Building a Visual Language for iOS 8

Over the last year, the app marketplace has had time to mature. During that time, we took note of emerging trends. After a lot of work, we are very proud to present our new visual language — a system of communication using visual elements. The new 5.0 apps now have a well balanced design that communicates simply while being aesthetically pleasing. The three guiding words we choose to keep our designs on track are: lightness, simplicity and elegance.

iOS 8

The launch of iOS 7 sent tremors through the design community. Not only had Apple radically redesigned their user interface by removing skeuomorphic (real world elements and textures) from their design language, they had also set the standard that the world would use to define the modern mobile user interface experience.

The Flat Design style first started to gain momentum with the introduction of Swiss Design in the 1950’s. This design trend emphasized cleanliness, readability and objectivity which relied on grids and geometry to solve their size, position and layout challenges. The basic idea that propelled Swiss Design was the emphasis that artwork communicates with design rather than embellishment. The Swiss Design movement migrated aesthetic beauty to functionality design.

The seeds of flat design in the digital age first germinated with Microsoft’s Metro design and Palm webOS (both from 2008). As with everything Apple, they reworked the trend into a cohesive set of design rules for the modern age.

MAZ Storefront Design

In 2013, MAZ redesigned the storefront when Apple released iOS 7. That redesign focused on brining a new look to the apps, with the emphasis on the publisher’s content and up weighting the prominence of the covers and the social network icons. Wherever possible, we included the latest research in sales psychology in the design to help the user make a purchasing decision.

Now in 2014 with the introduction of iOS 8, we had the opportunity to further simplify the app’s user interface. We have completely redesigned our storefront and introduced a few new elements to the apps. At first glance you can see that we have changed the color scheme from dark to light and added transparency to some of the elements. The newest addition to the user interface is the large “Play button” that has multiple uses that will be explained further down. We moved the publisher’s social networking icons, Stream icon, subscriptions and settings buttons to the bottom menu. This menu is now easily accessible for a user while holding the device and navigating with a single hand. All of the major functions can be accessed on this easy-to-use menu.

The Social Icons

MAZ has the ability to connect 10 of the publisher’s social networks. Historically these icons have been placed on the side of the screen next to the issue’s cover image, taking up valuable screen real estate. They have been moved into the bottom menu to make more space for larger covers.

The icons are now also scrollable from side to side if there are more then 6 icons presented. A scrolling boundary was added to the left and right of the icon set for cases where the publication has more then 6 icons. This enabled us to use a finite amount of space for the icons and still keep the design balanced.

The Stack and Grid Views

With this update we took inspiration from the living room coffee table with a stack of magazines on it. A digital stack of magazines is a new take on this metaphor whereby the user can flick the stack to reorder the issues. The left flick gesture moves the top issue to the bottom, and the right flick gesture moves the bottom issue to the top. We broke from the traditional approach of presenting the stack as a neat collection of magazines and chose instead to mess them up a little. The randomness of covers behind the top cover helps to convey that there are other items below the top one. All covers below the top one are presented slightly transparent in an effort to help the user look ‘through’ the stack to identify the cover they are looking.

In cases where the user needs to get to a specific cover quickly they can use the ‘pinch in’ gesture to change from stack view to the grid view.

Adaptive Backgrounds

The background image of the app is a blurred version of the top issue of the stack. This helps to theme the app with the colors found in the publisher’s cover photographs. A subtle animation that cross-fades between the background images can be seen when the stack covers are reorganized. The addition of this very subtle effect to the app changes the overall look of the app. This means that every app looks different even though it is running on the same software.

The Banner

Banners have been one of the most requested additions to our platform. We were faced with the challenge of creating a banner system that was easy to create content for and upload. Currently MAZ needs to support a total of 13 iOS devices with a mix of both portrait and landscape orientations. A traditional approach would call for the publisher to create one banner for each device width and orientation — something that is not feasible if you want to get a banner onto these platforms quickly.

Our solution is the MAZ One Banner. We adopted a new standard that both Apple (featured apps) and Youtube (channel banners) are using whereby only one piece of high resolution artwork is created and uploaded. The app then crops and resizes this banner live according to the device’s screen width and orientation. The main graphic content is placed in the center safe area of the banner and the edges can be cropped as needed.

One more challenge is the multiple resolution artwork needed as Apple increases their pixel per inch (PPI) screen density. The web standards for banner artwork set out by the IAB are all measured at 72 PPI which would not work for Apple’s modern devices. Apple’s Retina uses a screen density of 326 PPI and the new iPhone 6 Plus of 401 PPI. The MAZ One Banner caters for all of these different screen densities with a single high resolution file — so you can design and deploy faster without worrying about any reduction in quality regardless of your readers choice of device.

Subscriptions

The 5.0 update gave us the opportunity to rethink the subscriptions work flow. Our main intention was to refine the storefront and contain all of the buttons in a single menu at the bottom of the app. All of the subscriptions options are now located in a single second level menu which is also where users can unlock their existing purchases.

Subscriptions Options and Existing Subscribers

The subscription options been totally rethought and redesigned. A lot of time went into finding a good balance between purchasing psychology and design. We believe that these changes will help publishers to get more subscription conversions.

Ergonomics — Including your hand in the design

The idea of measuring the human form and its relationship to design is central to the field of ergonomics — using numbers to inform design solutions is considered the hallmark of functional design. This can be seen in products that fit your body comfortably, like a well designed chair that reshapes itself to fit the contours of your body for example. Apple pays a lot of attention to the ergonomics when they create devices that fit into your hand and pocket seamlessly. All of the physical styling on their devices have been painstakingly designed and redesigned to best fit the average person’s hand comfortably. Every physical element on their devices: the screen, the buttons, the speakers, power jack etc, is large enough to be useful while staying small enough and well positioned enough to remain unobtrusive.

Ergonomics crosses from the physical device into user interface design when we consider how people interface with a flat screen. The designer’s role is to fill that flat screen with elements that the user can touch and manipulate. So often user interface designers lack the ergonomic training to create a truly useful interface — this is not the same as a pretty interface. The interface’s main elements should be easily accessible with a single hand or finger. Successfully designing within these limitations is a challenge that helps the end user to better connect with the software, which in turn makes the software more useful. At every step of the way we make sure that the interfaces that we are designing are easy to use — regardless of the device’s screen size.

We conducted many tests with multiple devices to see if the average person’s fingers could comfortably reach the primary elements and iterate based on that feedback.

The Play Button

While working on the design of the new app it became evident that we needed to combine multiple feedback messages into a single graphic — this was done in an effort to clean the use interface up. The new ‘Play Button’ contains two elements, the first is the large circle that shows feedback on the current state of the app. The second is the Call To Action (CTA) button which offers the user purchasing options that change depending on the type of content being offered.

The Tear Card

We took inspiration for the digital Tear Card directly from paper magazines. The Tear Card offers readers the ability to purchase or subscribe when they are reading a free preview of the magazine. We explored many options to sell the issue/subscription from inside the magazine, but none of them suited the format better then this one. The page below is frosted to place the readers focus on the Tear Card. They can be dismissed either by dragging the card downwards, tapping on the card or the background. We added a tearing sound to bring it all to life.

A lot of hardwork and thought has gone into this update, and we’re so excited to share it with you. Download a MAZ publication today to see our new visual language on your iPad or iPhone!

Mark Carroll is the Lead UX/UI Designer in the MAZ New York office. Follow him on Twitter @markcmaz

Like what you read? Give MAZ a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.