The iOS interface concept

Posted by Joost van der Ree on June 10, 2012 04:58 pm 14

Last friday I posted this video on YouTube. It's a set of UI ideas for iOS. Since then it had a lot of hits. Dawoogman posted the video on this forum (thanks by the way). I'll describe my design decisions right here...

Notification Center This one is a no-brainer. As you can see in the current multitask bar and the folders on the homescreen, the linen pattern is always hidden behind the homescreen. The Notification Center in Mountain Lion is the same, so I expect Apple to come up with this too next week at the WWDC.

Mission control It was fun to come up with something like this. I think the gesture works (I noticed webOS used a similar gesture), and I think most people would agree this would be a very welcome improvement. After making some sketches I mocked it up in Photoshop. I think this is better because the browsing through the app history would be more intuitive and visual.

Notice that that when you open Mission Control from the homescreen, the bottom of the homescreen still sticks out a little bit to get the user back home. When opening Mission Control from an app the homescreen isn't visible (you could always use the home button).

I didn't put a scrollbar in, since I don't think it's relevant when it comes to app history. I didn't came up with a solution where to put the music control buttons though.

The idea for the Safari pages came while I was Photoshopping the mockups. I've always loved stacks, and this would be a very fast way to switch to a particular website. This view could also be triggered with a double tap, so that you go straight to the last opened page when you single tap. It also could be done for third-party apps with multiple pages.

Safari The look of this is based on the mockups last week on The Verge, I really think they make sense and iOS 6 probably will put an end to the blue chrome.

I think the double tap to zoom in and fullscreen would work. When I zoom in I usually try to focus on a particular part of a website, and the chrome certainly doesn't help with that. It would be really cool if I could try this out once.

Dynamic badges I never like it when I have a badge count on my icons when I don't know where it's for. It requires me to open the app to check it. The dynamic badge doesn't automatically mark items as read, but it would link the badge count to notifications. I realize that this would change the way badge counts are done, since they're not necessarily are linked to the Notification Center.

The icons would be 'pulled' by dragging it down. This releases a bubble with the notifications (the same style as the current iOS banner). Every icon with a badge would be able to be pulled down this way.

The gesture for this is pretty simple and easy to remember, and the user can do it just with their thumb. Believe it or not, but I actually went through a lot of gestures before I came up with this one.

Flipcons This is actually inspired by the Dynamic Icons concept by Jan-Michael Cart. I really like that concept, but I don't think it would work since it require a double tap between icons or a pinch gesture would work on the homescreen (it would require two hands). Just like the Dynamic Badges, this one can be done with just a thumb.

⇧ Some sketches I made of the Flipcons (with dog ear) and a sketch of the transition.

The Flipcons are similar to Quick Look in Finder, where you can get a preview of the content without opening anything. This would work very well in apps with 'softer updates' like news and social, where you don't want to see a badge count for every update. When there is an update to an app, the icon would get a small dog ear. In that case you can pull it down to make it flip. The 'flipped site' of the icon would display the updates.

I'm not sure if this would work in real life, but I wanted to share the idea with others.

I know that some of the ideas seem more realistic than others, but stil I thought it would be nice incorporate them into the video. I would like to thank Christophe Tauziet and Marc Edwards for giving me the extensive feedback on my ideas before I made a video from it. They took the time to study the concept and to give me some new ideas. Also thanks to Lukas Hermann for bringing the concept to the attention on MacStories.

(This text was originally posted on my blog, Not A Lot Of Words.)