Davide Casali = Folletto Malefico: Hybrid UX Director = Design × Psychology × Technology / Simplicity × Complexity

The importance of frame: why Apple gets it, and Google doesn’t

The screen frame is an important element that is playing a huge role in the current war in the mobile world between Apple, Google and Microsoft. It's interesting to see how much it's overlooked, and why it has a huge role in defining the final user experience... for both users and developers.

Think about painting: we have painters that created entire worlds inside the frame and still the frame was often part of the painting itself: by negating the view of a larger picture, we have to use our imagination to fill it. At times, artists also worked around that limit, going beyond the canvas, using a wider space as their canvas. The play on that limit is one of the things on which the artist must confront himself, every time.

How would the Mona Lisa be on a 7.7×5.3 meters canvas instead of 77x53cm? And what if the proportions were different, maybe 53x77cm?

Think about photography, where what’s left outside the frame is a critical choice in the hands of the photographer, as much as what’s inside the frame. One of the widest discussions about photography is about how much this boundary is able to manipulate the truth.

Think about books: the beauty of great book designs lies in a dance inside the page boundaries. Change those and you have another edition, another result. Sometimes, a completely different experience. For example huge discussions stem around new editions of comics/manga that change the layout of the original edition.

The strip was horizontal! Now it’s split! And the surprise when you turn the page is ruined!

The variable frame

Then, the web.

The web introduced the concept of a variable frame (well, even before: computers did it). It added flexibility, but flexibility needs a different skill. You have to program how something will behave in a mutable environment, you have to think about all the different screens, sizes, proportions and plan for them.

Note that this is different from the variability of sizes of canvases and books: once you choose a canvas, a photo format or a book size, that’s it, you live inside that boundary. In this situation, you have to account in realtime for that variability.

To create something inside this variable frame you need two skills: the rule-based, logical thinking of a developer and the view-based, spatial thinking of a graphic designer. This is more than a slight difference in approaches, it’s a clash of worlds, because those two views usually mean also two very different people and personalities.

That’s the exact reason why we praise in awe the few hybrids that have both of those skills, guys like Shaun Inman.

The war ended when the average screen size got big enough to allow good readability – the main reason for liquid layouts – within a fixed layout. From an external point of view each part had good point, but as often happens, the balance was in between. And there’s still who is working on this, take for example this good recent post by Jeremy Keith.

An example of this difference of perspectives was years ago the war of liquid layouts. There was a group that said that the liquid layout was the best thing to do and another group that instead kept working on fixed layouts. Guess what? The first group was usually composed by people with a rule-based thinking (developers, engineers, usability experts, etc) while the second one was composed by people with a view-based thinking (graphic designers, artists, etc).

The rule-based approach and the view-based approach on the web are now forced to live together: either in the hands of a hybrid professional, or two vertical professionals.

But what’s the ‘right’ answer? There’s no right answer.
Think about it, ignoring for a while all the reasons for having different screen sizes: if you have to build your own software, would you prefer a platform with a fixed screen size, or a variable one?

The answer is simple: a single, fixed size screen, is the best.
And that’s true either as a developer or as a visual designer.

What you see, is seen by everybody.
You don’t have to spend time to adapt the interface to every device.
You can play on the boundary of the screen itself, since you perfectly know where it is.
You can create interactions that make use of every pixel and every space on the screen.
The visual balance is built inside that specific frame.
And so on: there are a lot of reasons.

Why Apple gets it

The reason is simple, and it’s probably obvious by now. But let me set it clear:

As you can see, the only screen variation happened this year, but nothing has really changed: since the size is doubled, the frame isn’t changed at all, it’s just the same as before, just 4x more dense.

Apple’s designers just picked what they found to be the perfect resolution and size and stuck with that. The reason is simple: since they had to build a platform and they knew that in a mobile-sized device every pixel is important, they wanted to be perfectly sure that every App ever built was going to be perfect.

That means that a developer has to spend exactly ZERO time to figure out how the app is going to behave on different screens. That means that a graphic designer doesn’t have to change his way of thinking to try to adapt to the variable world.

Check the best applications existing for iPhone: look at those and think if that beautiful UI and interaction would be possible without the security of a same-sized screen everywhere.

Why Google doesn’t get it

Unfortunately for Android there are no specifications of the screen size associated with the OS: Android is built, at least for now, to target every screen size from 2.8″ to 7″, variable resolution and variable proportions.

Even with “more than a hundred different versions of Android software on 244 different handsets” (transcript) there are developers like TweetDeck that are saying that it’s not a problem:

From our perspective it’s pretty cool to have our app work on such a wide variety of devices and Android OS variations.

I might guess why they didn’t have problems: they designed the app from the beginning to take into account that flexibility, exactly what you would have done with a liquid layout on the web.

But the point here is that the openness of the Android platform isn’t an excuse for not even having a suggested screen size, to allow both manufacturers and developer to focus.

That said, it’s not a problem by itself, like I was saying at the beginning: it just makes things harder, and since this fact isn’t the only thing that counts, that’s relevant but just up to a certain extent.

So you might well say: it’s not the end of the world, we developed flexible applications since the first desktop operating systems and we are still doing that on the web.
That’s true: but still, developing for a single size is simpler.

A fragmentation and UX failure from the recent past

We also already have an example of failure in the mobile space due to making the life harder to developers: Symbian and Java ME.

Think also to the world before the iPhone and the new wave of smartphones: we had – and still have – almost everywhere Symbian and a Java runtime. Take your non-smartphone mobile, it’s probably built using those technologies.

Those two technologies, by themselves, are okay. They aren’t great, but they work. Technology-wise, they are comparable. You could even choose between a low-level C++ app, or a high-level Java app
But almost nobody ever developed anything on those platforms. I tried, too. It was hard. Hard to begin, hard to develop, hard to be sure that your app would have worked everywhere.

What failed – and still fails? The user experience, for both users and developers.
Hard to develop.
Hard to model a good UI on such a fragmented market.
Hard to use in the end.

Microsoft seems to get it

A few contacts I have told me that Microsoft is imposing a few restraints for the manufacturers to use his new Windows Phone 7. And also it’s a kind of rumor that doesn’t seem strange:

It’s very difficult to tell one Windows Phone 7 phone from the next, largely because Microsoft has been so tough in enforcing minimum specifications that are, for the tail-end of 2010, at the very least good enough for the market.
— David Meyer (2010) On Windows Phone 7, apps and the enterprise – ZDNet

I wasn’t able to find any official proof from Microsoft of this constraint, Davide Tarasconi in the comments points out that on the official documentation Microsoft says:

All Windows Phone 7 phones will have WVGA screens at 800 x 480 pixel resolution, no matter the screen size.

And that was already evident if you take the lineup of the Windows Phone 7 smartphones, you’ll find something interesting:

…and so on.

If this is something that Microsoft is enforcing, developers are going to be able to build applications exactly targeted for that size, spending again zero time on sizing and screen issues.

Where the real issue is

It’s not a problem within the technology. From a technological point of view, all those systems are ok. You can build amazing things. The problem is that living inside the “digital” world we often don’t look at the very boundary of that world: the screen itself, because we are so immersed in it.

But when you start looking at the screen itself like a painter does with his canvas, everything changes a bit. The experience starts way before the screen, and what’s inside the screen itself is defined by it.

Sure, Google is going to have way more cards to play in this game. But the screen size is one of them, an overlooked card with a huge impact in the ecosystem, from the developers to the final users.

It’s all matter of user experience, and simplicity.

Davide Tarasconi:

Quoting from "UI Design and Interaction Guide for Windows Phone 7": "All Windows Phone 7 phones will have WVGA screens at 800 x 480 pixel resolution, no matter the screen size. Most of the measurement units in this guide are expressed in pixels but in certain cases, usually around touch target size, measurements may be expressed in millimeters."

You can find the complete UI and interaction guidelines for WP7 (I can't stop thinking about "WordPress 7?") here http://go.microsoft.com/fwlink/?LinkID=183218

Simbul:

I love the concept of playing with the frame. The painting metaphor really gets to the point.

android:

Suck or stuck? Apple’s designers just picked what they found to be the perfect resolution and size and suck with that. Freudian slip?

Matteo Balocco:

Very, very nice post indeed... I would like to write down something about the implications of different frame sizes in the e-reader environment and how much that is slowing the spread of good quality ebooks. I'm dealing with that right now and, hell, believe me, it's a real mess!

Davide 'Folletto' Casali:

I'm looking forward then to your post about the problem of designing and building books within the ebooks variable frame.
It will be a great integration to this article! :)

Davide Tarasconi:

Matteo, that would be a very interesting topic: I never had such a horrible user experience with technology gadgets like the one I had with my ebook reader - a Cybook Opus reader, but the problem goes far beyond the device itself, as you're pointing out.

I realized that these readers are wonderful for "simple text" books, but the reading and formatting experience becomes awful when it comes to complex and rich layout involving simple charts, tables, images (not to mention basic file formats variations in the ebook realm...).

Bottomline: my ebook reader turned out to be the worst and less used technology device I ever bought (and yes, I bought so many of them), never read even a third of a book on it while I'm having a surprisingly good experience with the iPad.

(I say "surprisingly" because I was at first very skeptic about the iPad as a reading device: no e-ink, not suitable for long readings, but since I usually read in "chunks", for very short periods of time, and mostly those complex layout books that

But I'm going slightly off topic: regarding the frame issue, I must agree that fixed screen size gives you that kind of contraints that simplify the job - in these days I'm developing some test applications in HTML+JS for the iPad and in some ways it's like "building an fully interactive website without having to worry about compatibility and different frame size issues".

Davide Tarasconi:

Sorry, I hit "add comment" too soon :)

I meant - "(...) I usually read in "chunks", for very short periods of time, and mostly those complex layout books that are not handled by the ebooks, so the iPad turned out to be perfect for my reading habits)

Sergio:

Very good point, although I'm not sure Google had much choice here; it's Apple's business to be beautiful, it's Google's business to be ubiquitous. The price of ubiquity is that you have to accept to be in places you'd rather not be, including any handsets the manufacturers throw your way.

Davide 'Folletto' Casali:

Yup, I agree with you on that point, but I'm not entirely sure that nothing was possible at all. The most obvious thing would have been to suggest a specific, standard size, without mandating it.

In this way it would have used the social pressure to get the optimal result, still allowing freedom of choice to those that really wanted it. :)

Jeremy Keith:

"The answer is simple: a single, fixed size screen, is the best.
And that’s true either as a developer or as a visual designer."

...but not as a user.

Davide 'Folletto' Casali:

You're a bit too extreme, aren't you? :)
In the paragraph above that I was framing the question for designers and developers, because that's what this post is about. ;)

If we take in consideration the user, there are a lot of factors to take in consideration, a huge amount, going a bit outside the objective of this post. It isn't so simple.

It's clear that there might be different needs and usage patterns that simply don't fit inside the fixed screen, so you might need to compromise the best possible UI for a different screen size.

But still you can easily note that:
1. Most of the smartphones existing today aren't really different in screen sizes, they are just different screens. Most of them could have been with the same resolution or proportion without any real side effect.
2. When you get real, authors will still most of the time fire in the middle, targeting the biggest platform, exactly like web designers and developers in most situations just develop for the "mythical standard user".

That's why in the end of the post I'm saying that it's often an overlooked part of the experience, mostly by Google's part: it wasn't hard to suggest a single 'preferred' screen size while at the same time keeping the current freedom of development.

It's a delicate balance.

The only important thing is starting to understand that mobile isn't the 'normal' web, and so the screen size matters much more. :)

However, I'd like to know the reason behind your quick comment. ;)

Jeremy Keith:

My point is simply that all the reasons for favouring a fixed width layout favour the designer and developer, not the user.

As you point out, there is no "mythical standard user." Instead, there are many different people using many different user agents with varying screen sizes (this is true whether we're talking about desktop, mobile, or anything in-between).

A layout that that doesn't adapt to the user's viewport size is, in my opinion, inferior ...regardless of how easy it makes life for the designer or developer.

Given the choice between having an issue be either the user's problem or a problem for the designer/developer, I'll go for the latter every time.

Davide 'Folletto' Casali:

I agree on that, of course "there are many different people using many different user agents with varying screen sizes".

Even if I think that you are referring to the web while I wasn't, the point still holds: because here we are talking about market strategies existing before the release of a product, not after.

After, we got the fragmented market.
Before, something could have been done.

And that's what I'm saying: since Apple - and Microsoft - choose to do something before, the result was a better environment to build applications that intrinsically resulted in a better experience for the users.
So, it's a win-win situation – as long as you are able to fix that screen size. And since we are talking about smartphones, we are able to do that.
At least, that's what it seems. Do you remember the uprising after the launch of the iPhone? "The screen is huge!". Now, that screen size is defined "smartphone" and users found it's quite right, not too big, not too small.

Google on the other hand didn't do anything before, so the result - after - is a fragmented market.

In a fragmented market, then, designers and developers must solve the problem that before release could have been solved by the producers. That's about the "after" moment, and then it kicks in what you were saying. It's not that we can't build good apps, it's just that that missed choice before, creates an issue that must be solved.
It's a lose-win situation: designers and developers lose a slight freedom to make a winning application for the user..

So: would I prefer a win-win scenario or a lose-win scenario? Well... think about it: one of Android's problem is exactly the quality of its apps.

Ever wondered what one reason could be? ;)

Barney:

What Google "don't get" is an extensive device manufacture business.

What Apple "gets" is a monopoly of the smartphone manufacturer-developer-in-one market.

So really, your argument is that while Apple have an ostensible monopoly and internal consistency, thus creating a culture of consistency for developers and and designers, the rest of the mobile market is fragmented between manufacturers and developers, resulting in diverging hardware capabilities, APIs, OS-integration, development codebase, and yes, form factors, as a result of a rich panoply of designers and developers working disparately to various ends.

Nobody at Google is deciding on the universal form factor. It's not within their remit.

Personally, while I agree it's difficult, frustratingly painstaking work designing apps for multiple platforms, I'm glad we don't live in a world with one true layout.

Davide 'Folletto' Casali:

You're broadening the context of this article, but okay, let's change a bit the perspective. :)

I think that Microsoft here is the obvious counter-example to your point: Microsoft, like Google, is playing the same game - no direct manufacturing control. But Microsoft managed to find a way to create an internal consistency, while Google didn't.

"Monopoly" - a word that I wouldn't use with the current market share - is result of multiple factors and "easy to build because you have a single, precise and pixel-perfect screen" is one of those factors. Not the only one, that's obvious, but one of them, because allow fast adoption and excellent UIs ad a lower implementation cost.

So, I believe that it was well within Google limits to try suggesting a preferred screen factors. It wouldn't have mattered a lot between the 480x800 Google Nexus One (hey, look, the same resolution as Microsoft's Windows Phones!) and a 480x854 Motorola Droid (FOUR pixels? really?). Also, it would have sent a precise message to both consumers and manufacturers: "yes, you can buy/build a 240x400 screen smartphone, but that wouldn't be good enough UI wise, be aware of that".

By the way, Android already solves a problem: the developer's fragmentation, so we aren't talking about that fragmentation existing in non-smartphone pre-iPhone mobiles. Inside the Android world, we have a different kinds of fragmentation and from my point of view UI fragmentation is one of the biggest ones (because checking a flag for the GPS is a matter of milliseconds, a whole different UI not).

An please note: that's *very* different of saying to have "one true layout". ;)

...even if I could argue that in the context of mobile smartphones one could have existed, not because market, but because of ergonomics and perception.

Davide 'Folletto' Casali:

It's a completely different object, different target, different usage patterns, different experiences. As you can see: iPhone apps work within the iPad... in a frame. The message is clear: build a different UI. And that's it. ;)

Wazime:

So true:
"it's Apple's business to be beautiful, it's Google's business to be ubiquitous. The price of ubiquity is that you have to accept to be in places you'd rather not be, including any handsets the manufacturers throw your way."

Anon:

Completely agree.

Developing for the various screen resolutions on the BlackBerry taught me the hard way. I ended up designing 3 different UIs for my app and even that wasn't perfect.

Kevin O'Neill:

I'm currently developing products on both platforms and in general i agree with your article.

There are a couple of additional points I'd like to raise.

The artist/canvas metaphor is a little flawed, you see the artist chooses the size of the canvas for the work. In the web world the artist has some level of control over the canvas size. On the phone the canvas size is fixed buy the hardware manufacturer, not the developer, not the user. There is no user choice at the application level.

The problem of variation/fragmentation are the biggest challenge in the android world. This applies not only to screen size but also to hardware capabilities and features. I can pick up two different model iPhones and, for the most part, use them interchangeably. The same can't be said for two android devices. Not only do I have to contend with hardware differences like button placement and keyboards, I have os and basic ui look and feel changes applied by the manufacturer and carrier.

Every android phone I have is different. Those differences force me to expend effort in areas that provide little user benefit directly relating to the product I'm delivering.

In general android development is like old school phone development, lots of corner cases on an ever changing landscape. At some point you all get tired of dealing with the corner cases rather than your core product and say "that'll do". This happens a lot less in the land of Jobs.

Davide 'Folletto' Casali:

Yes, you are right about the hardware and that's a huge problem. The reason why I focused on the screen aspect is that nobody seems considering its value when designing apps, but in fact it's a very, very important part.

Also, I agree on the artist metaphor: in fact, it isn't a metaphor. I made it to explain the value of the canvas in the perceptive context, nothing more than that. ;)

David Macaskill:

reducing the degrees of freedom in any design is an accelerator. there is nothing new under the sun.

Do you have something to say? Please add it here:

(optional)