The UI Design Behind Apple’s Latest Releases

Closely following the rumors and reports, this Tuesday Apple released a new revision of the iPhone, as well as branching into a completely new product category: the Apple Watch. There are many interesting aspects related to these devices, however in this blog post I’d like to focus on characteristics relevant to UI designers and technology in general.

iPhone 6

The New, Cheeky Retina

A comparative look at the different display sizes of Apple iPhone 5s, iPhone 6 & iPhone 6 Plus

The new iPhones come with displays bigger than the current generation: 4.7 and 5.5 inches respectively. iPhone 6 has a resolution of 750 x 1334 at 326 dpi, and iPhone 6 Plus comes with full 1080p frame resolution of 1920 x 1080 at an 401 ppi density. And as it turns out, the iPhone 6 Plus screen is actually hardware downsampled from internally rendered resolution of 1242 x 2208. What does it mean to us, fellow designers? Put simply, the desire to throw Photoshop out of the window should grow even stronger. These two new screens force new and different UI element sizes, different proportions, different layout compositions, and in the case of iPhone 6 Plus — the new @3x asset size together. On top of that, hardware resampling means we will never see 1px wide lines, ever again. As designers, we need to be able to project our work on the screen it is destined to live at, and as of today there is very little hardware and software capable of helping us with that.

With the advent of the Auto-Layout concept in iOS7, further strengthened by the flexible nature of the new iPhone displays, Adobe Photoshop is quickly becoming more obsolete than ever. It’s going to be hard to work with these new resolutions, and very difficult to imagine how your designs should work on the device, even if you project them live using tools such as Skala Preview, XScope or LiveView. On top of that, computer hardware requirements to process multi-layered designs at such high resolutions are increasing. We saw it for the first time with retina iPad resolution: 1536 x 2048 has been difficult to swallow by our computers.

Auto Layouts and Auto Design

A screenshot of the Auto-Layout concept introduced by Apple on its iOS 7

The concept of a flexible, dynamically adjusting and resolution-independent UI layout was introduced with iOS7. Apple’s Interface Builder has been available for many years before that, and provided similar functionality, but never before has Apple put so much pressure on encouraging developers to exclusively use Auto Layouts.

The beautiful thing about Auto Layouts is that it takes away all the frustration that comes from working with classical design apps: the constraints of raster graphics, the amount of time wasted on re-adjusting things to faulty pixel grids, the nightmare of defining typography rules, performance inefficiencies, workflow fundamentally inappropriate to app UI design…the list goes on. Auto Layouts takes all of that away by a) providing an extremely strong foundation of iOS design language, applied to UI building process in real time and b) letting developers specify additional strong, logical rules to which the interface will adhere.

With iPhone 6 Plus and iOS 8, we need to start thinking about split views in landscape orientation, a paradigm that was once available only on the iPad and now makes it way to the iPhone. A smaller and more dense screen, different usage contexts and different UI element sizes essentially constitute a completely new design challenge. How to use the split view effectively? What are the creative ways of splitting information into two panes on a phone? How to hierarchize the content, so we stay within the constraints of Fitt’s Law? Auto Layouts help resolve the majority of such problems, or at least provide viable potential solutions.

Let’s be clear though: it’s not the ultimate design tool yet. Usefulness of Auto Layout is limited to a specific area, one which luckily for us happens to be where classical design apps fail pretty miserably. However, as designers, we still need to have the additional creative power of Photoshop, Sketch or Fireworks, just to be able to experiment and go beyond what iOS design language provides. There are two additional techniques I can recommend in order to get a better feel for your work:

1. Attain a mindset where singular pixels, pixel-perfect accuracy and microscopic details don’t matter anymore. Your canvas is much larger and more dense, and your users don’t see your pixels anymore. Pay more attention to typography and interesting layouts; spend more time creating behaviors and responses to user actions; obsess over speed and transformation curves.

2. Prototype the hell out of it. Grab Keynote, make your interactions, rotate the file with this sweet script (warning: OS X Yosemite only!), shove it onto your brand new iPhone 6 and experience your design right away, without the necessary overhead and complexity of engineering. Use Quartz Composer, Framer.js, or whatever floats your boat, as long as you understand that design is realized in motion, not amongst static pixels.

Reachability

Apple has introduced the "Reachability" feature on its iPhone 6 in order to make navigation easier when the phone is used with the thumb and one hand

One of the most interesting features of the new iPhones is a proof that Apple hit the wall of usability, and conceded to a slightly shady compromise. Both iPhone 6 models clearly fail to adhere to Fitt’s Law and Reachability attempts to fix that. Double-tap the home button and the screen contents either shrinks or moves down within the reach of user’s thumb. It doesn’t sound very elegant in theory, but realistically, what else can be done with such a big screen, and the functional “one-finger-operation” requirement?

Having such large screens, which constitutes a new usage context, should provoke innovative design solutions. iOS has been sticking to the paradigm of keeping linear navigational elements at the top of the screens since version one. With iPhone 6, that doesn’t make any sense anymore. That paradigm forced the introduction of Reachability, which feels like a stop-gap solution Apple shouldn’t be proud of. What else can be done then? Be creative, consider your thumb and figure out what are the other ways of navigating through apps. Apple introduced “swipe-to-go-back” in iOS7 purely due to anticipated usability problems with iPhone 6. And even third-party developers are exploring new solutions — I suggest you check out how Pocket resolves navigating out of an article.

Apple Watch

Hardware

Display of an Apple Watch, recent addition into Apple's devices

Apple Watch is an interesting little device. It feels a bit like a digital parasite: heteronomous, dependent on tethering data, content and even sensor readings from its parent iPhone. It’s definitely a genius business tactic, where Apple can tighten the ecosystem loop and lock users down to solutions dependent on each other in more ways. Along with that, coupling with the power of the parent iPhone makes this tiny device much smarter and more powerful. But the Apple Watch is no slouch, it does have its own sensors and cool capabilities too.

Bluetooth

As of today, we know that Apple Watch comes with Bluetooth 4.0 LE, NFC and a heart rate sensor. Judging from Apple’s past practices with Bluetooth, its support for third party developers will be severely limited. Basically developers will be able to use it to send notifications and/or data to WatchKit apps. We shouldn’t have high hopes for extensive pairing and independent data exchange capabilities.

An interesting tidbit about Bluetooth: it seems that Apple is working on a wireless BT headset, focused on fitness applications. We can read on the Apple Watch pages:

Music. Control the music on your iPhone without taking it out of your pocket. And when you leave iPhone at home to go for a jog, listen to music directly on Apple Watch.

There is no headphone port on the watch, so we’ll look forward to seeing how Apple sorts that out.

NFC

Moving along, we have the long-awaited Near Field Communications module. Originally designed to support the Apple Pay platform, NFC can be used in a myriad of other, amazing ways. It enables short-range communication and data exchange between watches, supported phones, sensors and anything else that conforms to the NFC standard. According to the internet rumor mill, there will be an API available for third party developers on day one!

Activity Sensors

Two Apple Watches with heartbeat data, which can be exchanged as an alternative kind of communication

Data from the heart rate sensor and accelerometer will be made available through the HealthKit platform. Apple showed us how heartbeat data can be used to initiate a very intimate kind of communication — users can simply send their heartbeat animation to another user. It sounds very simple, but I want to believe that its effect on how people communicate will be substantial, by leading us to invent even more new ways of personal, deep information and emotional exchange.

Software

Third party developers get access to Apple Watch’s screen in three ways: Glimpses, WatchKit apps and interactive notifications.

Glimpse

A Glimpse is a widget-like panel, which users access by swiping up on the screen, from anywhere in the UI, a bit like Dashboard on OS X. A Glimpse is designed to provide an essential piece of functionality: think closing garage doors, turning off lights or adjusting thermostat. The level of accessibility this setup provides is very exciting: just think how much more you will be able to do in your e-connected home using a tiny bit of hardware strapped to your wrist.

Apps

Apps are the miniature versions of mobile apps, built using the WatchKit SDK. We saw a pretty good representation of those during Keynote: remember the Twitter app? Users can access the timeline, read tweets, retweet, favorite, and more. It is up to designers and developers to decide how much functionality they find appropriate to fit onto the watch. To a designer especially, this is a brand new challenge: how to fit a useful and actionable amount of data on such a small screen, with such a limited interaction model? I for one am very excited about the perspective of exercising an enormous amount of self-discipline and creativity in order to design short, sensible and meaningful pieces of software on the Apple Watch.

Interactive Notifications

One can interact with notifications on Apple Watch via a number of appropriate buttons

Interactive notifications arrive onto the Apple Watch straight from iOS8. Think of regular banner notifications, sliding down from the top of the screen, and add a piece of interactivity to them: 2-3 buttons providing actions which are the most appropriate in the specific moment of perceiving a notification. Less technological and more of a design innovation, this feature still results in a massive convenience increase. Users will be able to deal with messages, emails, calendar invitations, Facebook notifications, in a meaningful, and most importantly, much faster and convenient way. I think designers will have a lot of fun work to do in figuring out which actions are the most important, asking questions like, out of ten possible responses to this piece of content, which is the one used or desired the most? I’m looking forward to an increased focus on user testing to gain such knowledge, as well as heated feature brainstorming sessions.

Inspirations

Aside from technical aspects of the new product, I think it’s worth noting how the Apple Watch is presented to the public, and what kind of effort went into creating it. Let’s focus on tiny details.

Did you notice how many videos of the watch Apple made? Did you notice how each shot of the watch is the definition of absolute perfection of form, texture, play of light and shadow? Did you synchronize your desire to learn more with the deliberately slow pacing of the shots, macro close-ups showing just the juiciest, most beautiful details? These videos are so perfect that they are almost unnatural. Formally, these videos are nothing like we have ever seen before. Even the most luxurious car brands, known for immense advertising budgets, don’t come close to the visual perfection of Apple’s Watch videos. Apple knew this would just be a teaser and they poured a lot of sweat into creating pieces that would leave the audience excited and clamoring for more, for months until the release. For designers, it’s a huge piece of inspiration in how to use visuals to sell the product, through the right combination of motion progression, shot composition, pacing, contrasts and color palettes.

Speaking of design effort, I’d like to focus on one aspect: typography. The typeface used on the Apple Watch is not Helvetica Neue, Helvetica, Chicago, Lucinda Grande, and definitely not Myriad. What’s going on? Has Apple just added a new typeface to their catalog? Looks like it! According to The Verge, Apple designed a completely new typeface exclusively for the Apple Watch, with the overarching goal of maximizing legibility.

Overview of the characters of the typeface introduced exclusively for Apple Watch

To me, the typeface that Apple designed is yet another homage to the Swiss school of design. As the watch itself inspires itself with years of development of Swiss horology, I see this typeface as a descendant of the ideals of typefaces such as Akzidenz and Univers, and maybe a trace of DIN 1451 too. I think Apple succeeded in paying respects and drawing the best qualities from the pillars of Swiss and German typography, while gaining the desired level of legibility at the same time. I would like to think that Jonathan Ive reached to the revered roots of typography instead of blatantly copying from Google’s Roboto font, according to some sources.

Final Words

Even though the relentless rumor machine spoiled the surprise, I still think what Apple released on Tuesday is very significant. Apple is entering new venues: mobile payments, wearables, fitness and health. Apart from that, they are shifting focus in their existing lines of business: not many noticed, but those who did mourned the disappearance of the iPod Classic from the Apple Store. This is significant, because iPod Classic was the last device using Apple’s iconic click wheel interface. Apple is not afraid to abandon previously proven solutions to advance into new product lines. As a designer, I welcome the opportunity to work with new platforms, new hardware capabilities, and finally the new restrictions imposed by technology as well as newly generated user expectations.

Want to know more about how Apple’s new releases are going to impact the mobile world?

Let’s Talk

 

Piotr Gajos, Chief Innovation Officer

Piotr is Sourcebits Chief Innovation Officer. A 2006 Apple Design Award winner, Piotr draws much of his inspiration from film and music, and focuses on leading our Innovation Strategy Workshops, generating new ideas for Sourcebits, and consulting on projects.