The Evolution Of iOS 7 And The Future Of UI Design

For the past 2 weeks I’ve been thinking a lot about iOS 7′s parallax effect. It lead me to write a brief note on the technology behind it. I came across some very interesting patents filed and granted by Apple that made me think even more…

In order for this post to make sense, I need to venture back into the over discussed topic of Skeuomorphism VS Flat Design. Please bear with me.

Skeuomorphism

By now we all know that skeuomorphism boils down to visual trickery, or the use of details and ornamentation to make one thing look like another. In UI design, Skeuomorphism, usually refers to a digital element designed to look like something from the physical world. iBooks is perhaps a good example…

Skeuomorphic Bookshelf

In this case, the concept of a bookshelf is used to allow the user to feel more comfortable with how books are displayed in a digital space. The problem however is that this is not a real bookshelf. It’s an application that shares some visual characteristics of a real bookshelf but behaves differently.

But does it really have to look like a real bookshelf?

Flat Design

And that’s the question that kicked up a storm of debates and introduced us to Flat Design. Once again, we are all familiar with what flat design is. In the words of Kelsey Campbell:

[Flat Design is] getting rid of beveled edges, gradients, shadows, and reflections, as well as creating a user experience that plays to the strengths of digital interfaces, rather than limiting the user to the confines of the familiar analog world.

The two are in stark contrast.

Skeuomorphism VS Flat Design

Like anything new, it created a fear that people will now be unable to know what is clickable/tappable or not. The Neilson Norman Group agrees. Their usability tests on iOS 7, Windows 8 and tablet usability, all points out that Flat Design decreases usability.

And this is all understandable. Design is not the only solution to usability problems.

Two Tangents – Technology & Design

In the digital world, design and technology are tangents. They compliment each other and in order for both to reach maturity, they need to evolve together.

Unfortunately, the frustrations, fears and uncertainties that comes with Flat Design is a result of design that evolves ahead of technology. This is not necessarily a bad thing. It gives us a glimpse into the future of technology and interaction design.

iOS 7 is a beautiful example.

The Real Problem

Apple familiarised skeuomorphism, but with the introduction of iOS 7, left everybody confused. All of a sudden the familiar was not so familiar anymore and, as expected, lead to endless streams of relentless criticism.

Just a week ago, one of my colleagues came into the office very upset. He updated his iPad’s OS. “Look how fucking ugly this is!!” I felt sorry for him because now he’s kind of stuck with an ugly iPad…) But I felt more happy for him because he now has the opportunity to evolve with design and technology.

Apple might have slipped up on design consistencies and a bunch of other stuff, but they do understand the core of the Skeuomorphism VS Flat Design debate. The debate is not about whether one is right or wrong. Essentially the debate is about trying to solve a problem. The real problem is that the usability issues people are currently experiencing with Flat Design on a two dimensional digital device cant be solved with Flat or Faux 3D elements alone. Technology needs to evolve in tangent with design to support it. Unfortunately it’s just not advanced enough to do so. That’s the problem.

Apple get this and that’s why they introduced us to the parallax effect – to usher us into a better solution than what Flat or Skeuomorphic Design could ever provide us on it’s own.

The Evolution Of iOS 7

iOS 7′s parallax effect is not just a cool looking animation. It’s a glimpse into the future of design. It is summed up brilliantly by Ellis Hamburger on the Verge:

A large part of Apple’s vision for the OS is about motion, the transitions between screens, and about mimicking the real-life movements of objects in order to communicate where the user is inside an interface.

and Marco Tabini:

The screen goes from being a canvas on which your apps are painted to a window into a physical world, where the faux-realism of today’s mobile apps is replaced by visuals that can feel both more synthetic and more realistic at the same time.

…a whole new generation of apps will arise that use this capability to deliver a great experience in ways that we can only imagine today.

Instead of using faux 3D elements, iOS 7 creates a new sense of depth by using a parallax effect – the effect where the position or direction of an object differ when viewed from different positions. Together with light and shadows, a parallax effect enable us to see in three dimensions in the real world. It also enable us to know how and with what we can interact with in the real world.

In essence, the parallax effect used in iOS 7 is only an illusion of real world parallax. It doesn’t really use a person’s relative position to create this 3D effect but rather makes use of the phone’s gyroscope and accelerometers. [You can see this if you keep the device still and move your head relative to the screen.] This limit a ‘parallax‘ user interface to the confines of mobile devices since the same effect can’t be achieved with a stationary device such as a TV or PC.

And this is why technology and design needs to evolve in tangent. And it does. Just a bit slower.

Apple’s Tech Patents

I came across a great site that dissect and explain all patents filed by Apple in reasonably understandable terms. There was two particular articles that got my attention. One is an article on a few patents granted a few years ago of how Apple envision a 3D GUI, and another one on advanced sensor based UI’s.

I dont want to bore you with all the details of these patent files, but what I can conclude from these is that Apple does a lot of research on ways to go beyond the illusion of parallax, to deliver real 3D interfaces. Some of the research include multiple display layers behind each other that renders a different version of an image and, together with light and tracking sensors, can determine the position of both the user and external light sources, to create a real world scene complete with shadows, lights and a true parallax effect based upon the position of the person using the device.

This is some real mind blowing stuff, but what does it really mean?

Jack Purcher in one of these articles, ties all the loose ends of this post together quite nicely:

While I’d love to see this technology surface next year, I don’t think that this is short term thinking at Apple. Reengineering OS X for 3D is going to take a lot of work. Then again, nothing stops Apple from slowly introducing various 3D elements into the mix to test out some of their inventions. It could be as simple as providing new 3D desktop background options to cause a stir.

And I believe that’s exactly what apple has done with iOS 7′s parallax effect. They have given us a glimpse into the future of user interfaces and that there is something beyond Flat Design that is currently limited by technology…


Inside iOS 7′s Parallax Effect

After my decision to gain a deeper understanding of various design principles, I’ve started to do quite a lot of reading on iOS 7. I found this article by Marco Tabini, Inside the technology behind iOS 7′s parallax effect. It’s a bit of a technical one but he summarized the article quite well:

The screen goes from being a canvas on which your apps are painted to a window into a physical world, where the faux-realism of today’s mobile apps is replaced by visuals that can feel both more synthetic and more realistic at the same time.

…a whole new generation of apps will arise that use this capability to deliver a great experience in ways that we can only imagine today.

I agree with Marco, iOS 7 has opened a whole new window for us to interact with devices.


The Responsibility Of A Designer

Recently I found this video by Mike Monteiro about how designers destroy the world. The description below the video reads as follow:

You are directly responsible for what you put into the world. Yet every day designer all over the world work on projects without giving any thought or consideration to the impact that work has on the world around them. This needs to change.

This is so true. There are 3 words that really stand out to me in this piece: Responsibility. Consideration. Change.

Responsibility
Every designer has a measure of responsibility. Not only top level design/creative directors but junior designers as well. Junior designers without responsibility turns into creative directors who sign off designs without thought. And this is the kind of design that destroys the world.

Consideration
Every designer needs to learn to think for himself. He needs to weigh the options and ask himself the question: “Is this a decision I am willing to stand for publicly and even take responsibility for when I’m held liable?” If not, what other alternatives is there that would solve it?

Change
Every designer needs to change.

This is not a rant, pointing fingers. It’s a wakeup call for all of us. We all forget at times that on the other side of the beautiful digital worlds we create, are real people with a real impact on them. We all need to change.

We can start by thinking about the impact of the decisions we make.


“The Client Is Always Right…”

I was quite intrigued when I first read this paragraph header in Karem Suer’s article on 399 Days of Freelancing -

… my client thinks white space is bullshit, they want to stick to 1998 web standards and they go with the print “fold” in web design. Guess what? Your client is right, you know why? Because you did a shitty job explaining them what white space is, you didn’t take the time to define the newer web standards, and you didn’t do a good job understanding your client.

Or design…

Since the inception of my career as a UX designer, I’ve spend most of my time in the product design space. Recently, that changed when I joined the awesome team at Mabua, a digital consultancy based in Durbanville [Cape Town] - a space where I soon learned that there are as many different perceptions and opinions about design as there are clients.

I realised that if user centered design [UCD] is something I really stand for, I cannot turn a blind eye to small things [that I know will influence the UX of the product] requested by the client. I have a responsibility to educate the client. I have to define the newer web standards.

However, at some point, just standing for UCD and defining the newer web standards, is not enough.

I have to go beyond just understanding why flat design is not only a trend. I have to go beyond the fact that it’s cleaner, that it makes more space for content and that people are now familiar with the interactive-digital world and don’t need us to hold their hand through decorative embellishments.

I can’t be moved by people’s opinions anymore, even though they are true.

In the storm of all the criticism of those fugly icons and inconsistencies in iOS 7 [which might be all true], I believe that Jony Ive only smirked because he knew they were all trapped in petty reasoning without a real understanding of the bigger issue. I believe that it is from this place of deeper understanding that Apple can, and will, lead again.

I plead guilty. If I need to educate the client on why we need to build an iPhone app that truly resonates with the iOS 7 design style, I won’t be able to do it confidently. I will be able to quote the leading experts whose articles I have read over the past few months, but I don’t really have a deep enough understanding of the “why”.

I owe it to the client to have a deeper understanding of design. Only in that, can I truly create digital products that makes a difference. Solve real world problems. Anything else will be a result of allowing myself to be tossed around like a wave in an ocean of opinions.

So this is what I will stand for in the next semester of my career: To gain a deep and thorough understanding of the intricacies of design.


Victor Papanek On Advertising Design

“There are professions more harmful than industrial design, but only a few of them…only one profession is phonier. Advertising design, in persuading people to buy things they don’t need, with money they don’t have, in order to impress other who don’t care.” Victor Papanek


The Depth of iOS 7

A large part of Apple’s vision for the OS is about motion, the transitions between screens, and about mimicking the real-life movements of objects in order to communicate where the user is inside an interface. via The Verge


Another Blog Theme

This is the 3rd blog theme I installed in the past year. The last one was a complete failure from a technical point. This one, however, look as if it might cut it. It’s a theme by Daniel called Basic. It’s fully responsive.

Basic is an ultra-clean blog theme. Basic gives you the ability to let people actually read your content, instead of focusing on all the other stuff that’s going on on their screen. With Basic, you won’t be distracted.

Let’s see how it goes…


Another Blog Theme

This is the 3rd blog theme I installed in the past year. The last one was a complete failure from a technical point. This one, however, look as if it might cut it. It’s a theme by Daniel called Basic. It’s fully responsive.

Basic is an ultra-clean blog theme. Basic gives you the ability to let people actually read your content, instead of focusing on all the other stuff that’s going on on their screen. With Basic, you won’t be distracted.

Let’s see how it goes…


Bad Navigation Patterns

Bad Navigation PatternWhile browsing the web for some wedding rings (yes, I’ll be getting married soon.), I stumbled on this site where I wished their navigation was as beautiful as their rings.

It reminded me of Fitts’s law:

The time required to move a pointing device to a target is a function of the distance to the target and its size.

Now, taking the screenshot above into consideration and applying Fitts’s law, it wasnt too difficult to realize that this navigation is an epic failure.

I truly do hope that this is still a remnant of an old design and not a recent design. We shouldn’t navigate like this anymore.


Gradual Engagement Manifesto

True story: One year ago I started to pursue a lady. It was the first time I ever pursued one. It was a very gradual process and it developed very naturally. It inspired me to Re-Imagine WhatsApp.

Not very long after that, some very talented people found these designs and approached me to help them build the next generation Instant Messaging App. An app that would break design patterns such as chat bubbles and how media is displayed. An app that would delight users in a very natural and gradual way.

I said yes.

And so I embarked on this very exciting journey to build the next generation IM: invi Messenger.

As I started to work with the team [more specifically Iddo, the CEO of invi] on the UX of the app, it slowly started to settle on me that gradual engagement should be a non-negotionable while designing any great app. And it’s a lot like pursuing a lady.

I rewinded and replayed the story of how I pursued Lindl [my lady] and with some inspiration from Iddo, I wrote this Gradual Engagement “Manifesto”…

We believe in gradual engagement.

Take it slowly. Introduce yourself. Let the user get to know you in a delightful manner. Don’t overwhelm her with probing personal questions. Allow her to have the time to explore, observe, and get to know you. Let her feel safe and comfortable. Take her hand. Guide her to small happy surprises. Assure her that she made the right decision choosing you.

She knows where she stands with you. You don’t play games. And there’s no hidden agendas. Everything’s open. Simple. Transparent. You introduce new things only when they become necessary. You get out of the way. And delight her more. And when it’s the right time, you invite her in.

This is when you find true love. Someone who will adore you and be your best friend & fan. Someone who will post photo’s of you on Facebook and brag about you on Twitter. Someone who can’t wait to tell all her close lady friends about you.

Someone who will stick with you when you mess up. When you get it all wrong. When you don’t understand her. When you don’t listen to her heart. And when you apologize for doing so.

This is gradual engagement and this is what I have learned from pursuing a lady…