Max Rudberg

Posts tagged apple

Jan 20

✎ Flat UI is not the only way forward

It’s curious how Apple’s hardware and software have taken such divergent paths. Looking at iOS hardware and software separately, one might think they were produced by different companies. The drop-shadows and textures of iOS stand in sharp contrast to the clean lines and invisible seams of Apple’s hardware. Comparing major models of either the iPhone or iPad line, Jony Ive’s industrial design team seems to be on the march, creating devices that feel ever more like they’re carved from a single block of magical stone. So why is it that Apple would ship these devices with software featuring deep shadows and visible stitching?

The above quote from Dave Wiskus was used by John Gruber to argue that the future of UI design is one without textures and effects that mimic real world objects or materials. I would argue that they are observing design decisions in one craft, industrial design, thinking that it applies to UI design as well. But industrial design and UI design have very different characteristics, just like print has different characteristics compared to screen design.

The hardware and UI also have different roles to play. The hardware is constant, not changing, and should take as little of your attention as possible. This goes perfectly in line with what Apple are doing; reducing the hardware to a minimum with clean lines and invisible seams. As technology gets better, the hardware gets out of the way even more. The hardware sets the stage for the user interface, and its content, to shine.

When you launch an app on your mobile device, the device essentially becomes that app. Screens are great at drawing fine details and subtle gradients. Its part of a UI designers toolbox to make use of textures, shadows, light effects, etched or embossed elements and so on to make the UI tangible and understandable. I don’t see them going away.

With Jony Ive now heading up Apple’s human interface group, in charge of both hardware and software, we will see some changes. But I think they will not be as drastic as some make them out to be. It will rather be a slight correction of trajectory that will steer clear of extremities such as Find My Friends in the future.

On a system level I hope to see more of the fine and subtle improvements we saw in iOS 6, where default elements with a glossy look was replaced with matte gradients, the pinstripes background was refined and subtle drop shadows were added to give more depth to navigation bars, making it clear that they are sitting above scrolling lists and that the list will move underneath the navigation bar. Sounds obvious, but it’s a subtle improvement that makes you understand behavior from looking at a static screen.

Jony Ive talks about being true to the characteristics of a material, such as the ability to make a sturdy unibody out of a single piece of aluminum. I wonder what that approach is when it comes to user interfaces? Some would say a “flat” look is “truly digital”, but I think the flat style is just that; a stylistic choice. There isn’t really anything to be true to, except the user and helping them understand the device and its apps as easily as possible. If you can use textures and UI effects to help you with that goal, I think you should.

Jan 5

✎ Will Apple Make a “Phablet”?

Mockup by Lorenzo Orlandi

The past week there has been rumors about the iPhone 5S coming in an array of color and more than one screen size. This could mean just 3.5” and 4”, the sizes that have been available previously.

But more interestingly it could be a new, larger size.

This principle was proven with the iPad with Retina and the iPad mini, that the iOS interface can have the same resolution and the same interface at two different screen sizes. The smaller iPad mini uses a 163 PPI screen, the same pixel density as the original iPhone. The corresponding Retina version of that screen is 326 PPI. The iPad with Retina uses 264 PPI, still plenty of pixels1 to qualify for the Retina brand.

We’ve learnt that displays are made out of larger sheets, then cut into the desired size. Apple are already making these sheets at 326 and 264 PPI. So what they could do is cut the same 640x1136 pixels used for the iPhone from the 264 PPI sheet, and get a 4.9” screen.

This would be both cost effective and would require no effort from developers; apps would just work. An interface that becomes larger only becomes more usable.

This way, Apple would enter the “phablet” market2. There is obviously such a market, likely people who figure they can get something in between a phone and a tablet instead of having two separate devices. If they can enter a new market segment this easily, why shouldn’t they?

  1. You might think Apple wouldn’t compromise the quality of the display by lowering the PPI. But Retina is just a brand, not a pixel density. It basically means double the density of what it was before. For example, the MacBook Pro with Retina use 220 PPI. So 264 PPI is still a high resolution screen and Apple could just say you will use it further away from your eyes, qualifying it for Retina. Changing the amount of pixels and introducing a new resolution is not likely since it would cause increased fragmentation. 

  2. You might think Apple wouldn’t make a phone you cannot easily use with one hand. They made a point of this when introducing iPhone 5. But what Apple says is always in support of their current lineup; it doesn’t mean they won’t do something else in the future. For example, Steve Jobs said 7” tablets should ship with sandpaper so the user could sand down their fingers to be able to use them. But now we have the iPad mini, although to be fair it’s closer to 8”. 

Jul 7

Jul 6

Jul 5

✎ Podcasts app and skeumorphism

I don’t know why people get so upset over Apple’s Podcasts app with a reel to reel deck on the new playing screen. It’s a beautiful illustrative element for a screen that otherwise would be quite dull. Watching it is almost hypnotic.

You could argue it doesn’t make sense as a metaphor for podcasts, but it’s fun. It’s that simple. Get over it and carry on.

Jun 27

✎ Similarities in the score to Alien, 1984 Macintosh commercial and Prometheus

Ridley Scott directed all of the films/commercial mentioned in the title, and all three of them use the same kind of sonar-like score. I think it’s pretty great. (I’m sure I’m not the only one who noticed this, but only now did I think to mentioning it)

Have a look & listen:

Alien - Official Theatrical Trailer (1979)

1984 Apple’s Macintosh Commercial

Prometheus - Official Trailer (2012)

Jun 15

✎ How the adaptive status bar in iOS6 determines which color to use

Wrapp iOS developer Simon Blommegård has been experimenting further with the new adaptive status bar and how it determines which color to use from the header bar. Turns out it’s quite a funky method. Rather than going on the tintColor, It uses the average color from the bottom pixel row of the header bar. This is illustrated by Simon’s yellow header bar with a blue and red bottom pixel row, resulting in a purple status bar:

Jun 15

Jun 15

Jun 15

Jun 14

✎ Preferences for the MacBook Pro Retina display

Image from AnandTech’s MBP Retina Display Analysis. This is a nice touch, to be able to switch from the 2x multiplier and make UI elements smaller. Might come in hand if you ever need to use a palette-heavy app and need more screen real-estate. 

Bonus points for the sample text in the preview.

Jun 13

Jun 13

I just saw the official Apple pull-to-refresh on my colleague Simon Blommegård’s development phone. This video by YouTube user davezatz gives you a good idea of how it looks. It was only shown very briefly on the keynote and I wanted to get a good look at it.

I like the fluidness of it. It feels almost like Cut the Rope physics. What I don’t like is that they replace the refresh arrow with a spinner. Would be nicer if they used one metaphor, such as the refresh arrow, and simply made it spin once the refresh occurs.

Simon also pointed out that unlike some of the third party pull-to-fresh implementations, Apple’s version refreshes without the user letting go of their finger. I think this is fine, since refreshing a view is not a destructive action.

It’s nice to see this interaction become a standard part of iOS.

Jun 13

✎ The new Dock in Mountain Lion

Screenshot by Jonas Rask:

Apple is really firing on all cylinders right now. I must say I love the new Dock in Mountain Lion. Apple got rid of the S-curve gloss, gave it rounded corners and blurred reflections. The running app indicators are much more classy as well, sitting at the bottom edge rather than the below the app.

A personal favorite is the separator line which now is in proper perspective rather than the  faked straight on perspective we’ve gotten used to.

The trash icon has been refined, and I’m pretty sure they have given it a custom reflection. It always bothered me that they simply used a flipped version of the icon, since a real trash can would not have that kind of reflection. Even if they didn’t, the new blurred reflections are much more forgiving, making the overall impression much more realistic and classy.

As Jonas Rask points out in his tweet, they also removed the overly dramatic drop shadow that was cast above the dock.

I’ve offered my own take on the OS X Dock going back a long time now, called New Dock. You can find it from the Misc tab on Max Themes. I hope I’ll be able to bring these docks to Mountain Lion in some form, even though I might be much less inclined to customize it with the new improved look.

Jun 13

✎ Adaptive status bar in iOS 6

The new status bar in iOS 6 is actually not blue, which you might think from looking at Apple’s keynote, but adaptive to whichever color the app uses. It uses the tintColor set on the navigation bar. Nice find by iOS developer Simon Ljungberg.

Swedish travel planer “Skånetrafiken” uses a red header and gets a red status bar:

eBay gets a gray status bar:

The black status bar has become increasingly popular among app makers and designers such as myself because it blends nicely with black hardware, and allows for nice rounded corners around the app, making the app feel like it’s own “unit”. This thinking was pioneered by Palm with the Palm Pre which made heavy use of this design choice throughout the OS, making things like notifications appear to happen on the hardware bezel:

However, as Simon points out, this new adaptive status bar in iOS 6 will blend better on white hardware where the black status bar is kind of an eye sore. And the running app gets even more brand prominence. I’m already starting to lean towards using this new status bar for future app designs.

This kind of feels like a “back to iOS” feature taken from the Mac, which has had a transparent menu bar since 10.5 Leopard. I’m glad for the unification of the status icons as well. Now they’ll always be pictograms and not switch to the more realistically rendered versions at times.

Thanks to Simon for the screenshots.

Page 1 of 2