I design User Interfaces & Websites.

There has been a lot of discussion recently surrounding the increasing introduction of so-called “skeuomorphs” in the UI of both the Mac and iOS. Especially with iOS 5 and Mountain Lion, most new interfaces coming from Apple seem to include at least some level of decoration that have the sole purpose of making the app look like a real-life object.

The common arguments against these skeuomorphs seem to be that they distract from the content, make the apps look unprofessional and are just ugly. While all of these things may be true most of the time, I really think they do make sense in many of the places Apple uses them. That is, for apps that perform a function which average joe is used to performing in a non-digital way.

For example, if I’d show my mother the Google Calendar, she definitely wouldn’t ever have the idea of that replacing her good-old paper calendar. She is just not used to it and thinks that she wouldn’t know how to use it anyway. Yet, when she saw the Calendar on the iPad, she was immediately familiar with the general concept and seemed delighted.

In fact, if you look at the Apple apps that have skeuomorphs, you’ll notice that they are all apps that people aren’t used to yet. For example, it doesn’t make any sense to display Mail like real paper coming out of envelopes. And Apple doesn’t do that, because people have been using digital mail for years. In that case, decoration would really just distract from the actual content. But with apps like Notes, Reminders and Calendar, the users that are not yet used to doing performing these tasks digitally are certainly the majority. And even for me, as a very casual user of these apps, I find the decoration to make the app way more enjoyable. Obviously, for a pro user, skeuomorphs aren’t fun or helpful at all – but that isn’t the group of people Apple is going after with these apps.

That’s not to say that I believe Apple always uses real-world metaphors in a good way. I think they are on the edge of overusing the linen-texture and I don’t understand why the “Find my Friends” needs to be so much leather. Then again, I guess it is an app that you don’t use very often and don’t use to be productive, so they can probably get away with it. Moreover, skeuomorphs will without a doubt fade aways as using these apps becomes more common across all users.

Overall, it’s really just about when and how to use skeuomorphs. Don’t curse whenever you see a hint of a texture or metaphor just because everybody else does these days. Think about why skeuomorphs might or might not make sense. As long as they don’t interfere with the content and are just decoration, guiding new users through apps they are not used to yet can be a great UI decision.

There are basically two different approaches Mac apps use when it comes to updating. The apps available on the Mac App Store are updated through the Store only – which obviously means that you aren’t really notified of new updates unless you open the App Store. Then, there are apps that aren’t yet available on the App Store for various reasons. Most of these use Sparkle, a free software update framework. It does notify you when you start the app and an update is available – but I believe it’s far to obtrusive. I can at least say for myself that I’m annoyed pretty often when I just want to do something quick with an app and this update window pops up.

So, I set out to do a redesign of the updating UI on the Mac. I believe this would be a very useful change both as an addition to updating through the App Store as well as a replacement for Sparkle. To illustrate my idea, I’ve used a screenshot of the great app Kickoff designed by Benjamin De Cock.

When you open up an app that has an update available, you just get a tiny notification at the top right corner instead of a big window you need to dismiss. You can act on this notification whenever you want – and it doesn’t get in the way when you are in a hurry.

When you click on this notification, a popover appears with additional information like the changes that were made in the update or the version number.

From here, you can either choose to learn more about the new features or go straight ahead and install the update. Of course, you can also dismiss the update by clicking anywhere outside of it.

When you do choose to install the update, the popover changes to the next view.

This dialog shows you the progress of the installation as well as the time remaining. I did play around with a lot of other stuff like the MB’s downloaded and the download speed but I concluded that this if far to technical to be relevant to people.

What I think would be really cool is if you could now dismiss this popover and continue using the app while the update is being downloaded and installed in the background. After all, I started the app to actually use it and I don’t want an update to prevent me from doing that. Yet, I’m still interested in how the update goes.

Moreover, I want to know when the update has been installed so that I can try out the new features. I’d imagine the notification lighting up or blinking for a second to notify me that the update is done.

When I click this notification, I get a another message telling me about the flawless update and prompting me to restart the app (of course, you could also dismiss the popover again and just continue using the app until you decide to quit it).

This is the UI I would envision for a better updating process. One thing I especially thought about was the human aspect. For example, I wrote “update the app” and “restart the app” at first. Yet, it occurred to me that this could be described a lot more easily by just placing the app’s name there. Using static descriptions instead of variables is something that I see many developers do, but I think it’s something really easy to improve. Furthermore, I decided to leave away many of the technical details. I thought it was important not to write “Downloading files…” but instead just use “Downloading…” – files is something developers think about when it comes to updating an app but users don’t. Yet, I guess you could even go one step further and avoid the “installing” and “downloading” phrases altogether and use buttons with “Update Kickoff” instead of “Install Update”.

This might seem like a small change at first, but I believe it could be an important step away from the metaphor of the file system on the Mac (similar to how iOS handles this). Yet, I settled with what you see above as I believe most people are used to these phrases by now and it’s a lot more transparent to those who know a bit more about computers.

You might want to have a look at the full screenshots or the animated version at dribbble.

If you would like to talk to me about this concept or are interested in realizing this, please contact me at me@lennartziburski.com.