Authentic depth

With iOS7 Apple is stepping up efforts in their design approach  "...way much more than how it looks, it's the whole thing, the way how it works...". One of the key changes compared to the older versions of iOS, is the conceptual layering of various user interface elements. Visually this is achieved with parallax effect, blurred translucency, animations and other effects.

With mobile user interface moving away from rococo -like extravagant decoration to more clean, "almost flat" designs, the animations and transitions of the UI have become more important. Increasingly inspiration is being drawn from the history of movies and animations to give a sense of depth to the interface – that some objects are above and some objects are below. But unlike the decorated, more static screens of the past, the almost flat interfaces behave more realistically, as if they are placed in a real three dimensional system, even if that world has some pancake-like tendencies.

iOS7 is embracing this kind of depth and dimensionality, particularly with translucent white (and black) layers that blur the layers "below" them. However, from realism perspective, there's one gotcha with this approach – in real life only one of the "layers" can be in sharp focus at the same time. There are many places in iOS7 where this "authentic depth" is disregarded, one of the most obvious examples being the "Control Center" layer. When that layer is swept in from the bottom, it does blur the home screen behind it, except for the top part, where the home screen stays sharply in focus, albeit slightly dimmed.

Effects and animations that elicit the impression of depth, but which at the same time lack the authentic experience of dimensionality, can end up in detracting from the whole experience. Effects like blurring and transparency may reduce to being mere decorations, as in the interfaces of the past, rather than "...the way how it works.".

There are ways to design with depth so that it respects the authentic dimensional behavior. The Yahoo Weather app's animation and layering, e.g when content moves upwards, is one good example. For the iOS control center, the UI mockup video shown on the left gives some ideas how to approach the solution.

iPad Mini would be just like using an iPhone

There's been recently lot of rumors about the possibility of "iPad Mini", i.e. an iPad with smaller than 9.7 inch screen that the normal iPad has. Apple has for quite some time resisted the need for different screen sizes on the iPhone – it has stuck with the original 3.5 inch screen, while others have gone wild with larger screens. And to its credit, iPhone is definitely more pocketable than the larger mobiles.

 The 9.7 inch iPad definitely is awesome for the immersive experience it is able to provide with so much screen estate, especially now that it has retina resolution (264dpi, viewed from 40cm distance). However, the e-reader market has been able to make a strong case (at least for some particular uses) for smaller-than-10-inch screens, with sizes closer to pocket book.

But that would require UI redesign?

One of the biggest practical reasons against doing another screen size for iPad is that it could very likely lead to UI redesign, as the physical size of the touch areas would be different. Both for Apple's apps and 3rd parties. However, Apple has been pretty genius with its math around screen sizes and pixels and resolutions. Essentially iPad Mini could use the same pixel size (1024x768) and UI as original iPad and still reduce the screen size to 7.85 inches (163dpi), while still being as easy to use as an original iPhone (also 163dpi).

How is that possible? Well that starts with the Apple Human Interface Guidelines, which state any interactive area must be at least 44px by 44px in size. Additionally, you can sometimes tweak this a bit by providing much wider interactive area, while reducing the height slightly.

 

Every iPhone and iPad follow this same rule (retina displays just double the pixels). So on iPhone the smallest button has physical size of 6.86 millimeters, while on the iPad the smallest button is 8.47 millimeters. As you can see, the iPad buttons are physically significantly bigger. But due to longer viewing distance (40cm versus 28cm on iPhone), they don't appear to be so large as they physically are, when compared to iPhone.

So a smaller iPad Mini (at 163dpi) could use the smallest physical button size of 6.86 millimeters, while still following the Apple HIG, and more importantly, being able to use the iPad UI and apps just as-is.

Ok, so how would that feel like then?

Well, it's pretty hard to get a feel of a new device, without having a real prototype. But you can try looking and trying the full size version of the picture below inside normal iPad. It is scaled to be physically correct size, when viewed on full screen in iPad.

As a comparison, here's the screen of the original iPhone with the same button measurements.

Once you go retina, you won't go back

After putting so much effort in showcasing how amazing the retina displays are, would Apple really launch iPad mini with a non-retina screen? While the R&D is ongoing, it's fine to use prototypes with 163dpi. When it comes to commercial releases, however, Apple is in no big hurry or pressure to et iPad Mini out of the door prematurely. So, maybe when it is possible to do 330dpi retina displays at 7.85 inches, the iPad Mini might become reality. As of March 2012 such displays are not available on the mass market. That kind of 7.85 inch retina display would have the same resolution as iPhone 4S and same amount of pixels as the new iPad, i.e. 2048x1536 at 330dpi.

The crazy math

Should Apple ever do iPad Mini with the above measurements, the logical next step would be to do larger iPhone as well, with the iPad size physical screen buttons. This would translate to roughly 4,32 inch screen, but unfortunately the resolution would be "only" around 267dpi, which is below the retina threshold. Additionally, for a phone, the pocket-ability would suffer as well. So no magical solutions there.

Windows Phone 7 thoughts

I have had a change to briefly try out the Windows Phone 7 in real life use (i.e. with personal stuff fully set up in the phone).

The Metro style in Windows Phone 7, especially when coupled with the upcoming user interface of the Windows on desktop, is a pretty sleek package, promising to free normal users from the clutters and overall mess of the user interfaces in the old PC era.

Removing all that cruft of button gradients, background graphics and shadow effects also helps in making the Metro experience fast and responsive. Visual delight is focused on the few transitions and animations, used consistently across the whole platform.

Getting the basics right

On the apps side, there are some things that are really done well, which are particularly good news for people, who getting introduced to the touchscreen phones. Making phone calls, sending messages and calendar all work very nicely. In fact, of the dominant players (like iPhone and Android), I think the Windows Phone tackles the basic use the best, as it focuses on few key tiles as the shortcuts to the basic functionality of a phone. Using the multitude of apps is relegated to the second level.

Beyond the basic functionality, the social integration on the phone is done well, including the automatic merging of contacts for various services like Facebook and Twitter. The Messages app supports sending Facebook instant messages in addition to SMS. Messages to single person gets all merged in just one conversation. Pretty handy and simple.

Nokia's take on Windows Phone 7

The device tested was Nokia's Lumia 800. Perhaps as a parallel to Android skins, many have been expecting for Nokia to create its unique experience on top of Windows Phone 7. Instead of a skin, Nokia has so far focused on providing Nokia-only apps and content to its Lumia devices. Considering how difficult it has been for Android vendors to update their own skins in existing devices to latest Android OS (even a year or more since major OS version launch), I feel Nokia has chosen more agile, complementary and fruitful path to follow.

Nevertheless, there are possibilities to improve the Windows Phone experience with design heritage that Nokia has collected over time, particularly in Nokia N9. The Nokia N9 was the first Nokia phone to truly take advantage of gestures in the core navigation of the device, which was further emphasized in the physical form of the device. The form was eventually inherited by Lumia 800 as well, but not the gestures.

Without breaking the existing user interface, Windows phones could easily introduce gestures as shortcuts, like in N9, to go around the device. This is likely to happen anyway, considering Windows 8 on tablets and desktop already plan to rely heavily on gestures. Why not be able to go back to home screen(s) from an app by swiping down from the top, on a Windows phone? ⁽¹⁾ Additionally, switching between apps by swiping from the side, would be nicely consistent with the upcoming desktop world.

Nokia could also introduce it's own take on the homescreen, while not creating it's own "skin". Of the three home screens, two would be almost the same as currently - the tiles view and the app launcher. The third home screen would be the task switcher view, like N9. Although the 3rd is somewhat optional. If the horizontal edge swipe would allow good access to recently used apps, then separate task switcher view is just unnecessarily duplicating that functionality. However, thanks to metro style, the "thumbnails" of the apps in task switcher view are much more identifiable and attractive than on "full chrome" UIs such as N9.

This home screen approach would allow removing the awkward and disjointed forward/backward arrows from the home views, which also have forced the tiles and the launcher list to be appallingly de-centered. Simple horizontal swipes would allow balanced aesthetics to the most used views of the device, as well as enabling to use the standard status bar across all views of the devices.

N9 Home screens (events, app grid, task switcher)

Windows Phone 7 with N9-like home screens (tiles, app launcher, task switcher)

Young platform

The Windows Phone 7 is a young platform still, it was launched just 1,5 years ago. As is expected, there are things that would benefit from the maturity that comes with age.

While Panorama is a very nice concept as a user interface template, it is currently almost the only choice available to designers. Hence, apps tend to look bit too much alike. Even more than that, panoramas emphasize showing snippets of previews in listings, while making direct access to the full listing of the content (beyond the top 5) a bit of a drill down effort. Some apps unfortunately have not been able to avoid this pitfall, like the MS Marketplace -app and Nokia's App Highlights.

When inside applications, one is often confused with multiple search buttons – one is a hardware key taking to Bing, other is residing on the app toolbar, doing app specific search. Just clean this and use only HW search key to do app specific search, m'kay?

Any app which is primarily a text content oriented app fits pretty nicely in the Metro style – the panoramas, big fonts and all. However, on the visually oriented side, the standard UI elements seem to just scratch the possibilities. Are there any really mind-blowing visual reading apps like Flipboard on iPhone/iPad? Haven't found any. iPhone has a good share of user interface innovation happening, going beyond the standard UI, like the Clear app. Windows Phone apps are currently taking the initial first baby steps.

The over-the-air updates do not seem to be able to handle all the updates that come to the device.

The Marketplace app showcases way too many undesirable apps in search results. Particularly the trinket-like apps and x-rated apps are very often appearing in places where they shouldn't. There are some really good and relevant apps in the marketplace, but currently they are somewhat hidden in trash. Also, the typical app price in Marketplace is 2€ or more, whereas same or equivalent app is 0.79€ on iPhone. Unnecessarily pricey, I'd say.

When device is fully set up with personal accounts, the battery life seems to be less than iPhone and N9, lasting just a day when on light usage. A pity considering Windows Phone is kind of supposed to be a simplification, design-wise, from those phones.

---

(1) No, it does not make sense to close or exit an app when swiping down. Device should handle multitasking (& closing of apps) automatically (like iPhone does). Apps should just hide themselves and users should be able to return to the state they were in last time they used the app, via application launcher or task switcher.

Disrupting the market

So the Nokia N9 got finally launched, nearly 2 years after it's predecessor Nokia N900.

When N900 was show to the world, it demonstrated new ways to do full multitasking, integrated Skype and VOIP experience, a good solution to conversational SMS and instant messaging, online presence, integrated sharing, a very capable web browser... And a Unix terminal program installed by default on device. In a sea of smartphones of various degrees, it showed what a powerful mobile computer could be like. With a primarily landscape-oriented UI.

To this day, N900 is a device that is still referenced in blogs, when people talk about UI innovation, particularly when it comes to offering a full-scale multitasking experience. This is pretty remarkable especially considering that N900 has not received any mainstream-level adoption when it comes to the amount of devices sold. It's more of a "proof of concept" that leading-edge people can have as their own phone.

And now, the N9 takes the multitasking to the heart of the device, designing it so that it almost disappears. Compared to N900, the N9 is much more of a consumer product than any Maemo device before it, but its potential as a high-volume mainstream device is dampened by Elop's current Nokia strategy. But in fact, this means that the heritage of OSSO/Maemo/Meego continues - as a disruptive device to talk about. Again, it may not be the device that everyone owns, but it still will be a device that the blogs will reference to, when they talk about UI innovation. And that has an effect on how the other devices in the market will be designed.

These devices are the key for putting Nokia and "thought leadership" back together.

Fjord Digital Trends 2011

Fjord Digital Trends 2011

View more presentations from Fjord.