Posts tagged with "UI"

The (Semi)Skeuomorphism

Last night’s release of Paper, a new drawing and sketching app for iPad (The Verge has a good review and interview with its developers), got me thinking about a trend I’m seeing lately in several high-profile iOS apps from third-party developers and, to an extent, Apple itself. That is, drifting away from the forced skeuomorphism of user interfaces to embrace a more balanced approach between imitating real-life objects to achieve familiarity, and investing on all-digital designs and interfaces to benefit from the natural and intuitive interactions that iOS devices have made possible.

John Gruber says that the tension “between simplicity and obviousness” can be seen in developers getting rid of UI chrome (buttons, toolbars) to make simpler apps, and Apple, which has adopted UI chrome – often, in the form of skeuomorphic elements – to bring obviousness and familiarity to its applications. iCal’s bits of torn paper and Address Book’s pages are obvious, but are they simple?

The subject is complex, and the scope of the discussion is too broad to not consider both ends of the spectrum, and what lies in between. Ultimately, simplicity vs. obviousness brings us to another issue with user interfaces: discovery vs. frustration.

Apple’s (and many others’, with Apple being the prominent example) approach is clearly visible: familiar interfaces are obvious. Everybody knows how a calendar looks. Or how to flip pages in a book. People are accustomed to the physical objects Apple is trying to imitate in the digital world. But are they aware of the limitations these objects carry over when they are translated to pixels? As we’ve seen, this can lead to frustration: why can’t I rip those bits of torn paper apart? Why can’t I grab multiple pages at once, as I would do with a physical book? And so forth. Interfaces that resemble real-life objects should be familiar; it is because of that very familiarity, however, that constraints become utterly visible when pixels can’t uphold the metaphor.

On the other hand, a number of applications are trying to dismantle the paradigm of “skeuomorphism mixed with buttons” by leveraging the inner strength of the iOS platform, and in particular the iPad: the device’s screen. Impending’s Clear, for instance, famously avoided buttons and toolbars to focus its interaction exclusively on gestures. Paper, for as much as its name implies a real-life feeling of actual paper, is the least real-life-looking (and behaving) sketching app of all: sure it’s got paper and a tool palette, but there are no buttons and navigation elements when you are drawing. In Paper, you pinch to go back one level (like Clear); you rotate two fingers on screen to undo and redo your actions. I assume the developers had to use standard sharing and “+” buttons only because they couldn’t come up with a significant breakthrough in associating these commands with equally intuitive gestures.

Which brings me to the downside of simplicity: discovery. Pinch to close and rotate to undo make for a pretty demo and elegant implementations for the iOS nerds like us, but are they discoverable enough by “normal people”? Would my dad know he can pinch open pages and rotate an undo dial? Are these gestures obvious enough to avoid confusion and another form of frustration? Intuitive software shouldn’t need a manual.

There are several ways to look at this debate. For one, we could argue that Apple was “forced” to use skeuomorphic elements to get us “comfortable” with these new devices, easing the transition from computers by imitating other objects and interfaces we already knew how to use. With time, they have realized people are now familiar with the previously unfamiliar, and they are now slowly introducing elements that subtly drift away from real-life interactions. Like the full-screen mode in iBooks, or the sidebar in Mountain Lion’s Contacts app. But there are still some graphical elements decorating Apple’s interfaces that don’t have a clear functional purpose: the leather in Find My Friends, the green table in Game Center, the iPad’s Music app. I think there is also a tension between functionality and appearance, and I believe Apple sees some skeuomorphic UI designs as simply “cool”, rather than necessary means to convey interaction: it’s branding.

The “simple and elegant” interfaces, though, reside in a much wider gray area that’s still largely unexplored. Clear and Instapaper, by foregoing real-life resemblances of any sort, have dodged the bullet of frustration by creating their own standards. You can be mad at Clear’s use of gestures, but you can’t be frustrated because its paper doesn’t act like paper. There is no faux paper in there. The “frustration” this new breed of iOS apps generates can be traced back to the novelty of their interfaces and interactions, not to their legacy. But then there’s a certain selection of apps, like the aforementioned Paper, that are still somewhat bounded to their real-life counterparts and, partly because of technological limitations and established UI patterns, aren’t completely distancing themselves from the familiarity of real objects.

We’re at a point in software history where balance is key. Balance between simplicity and obviousness, discovery and frustration, innovation and familiarity. We’re using software that wants to remember where it came from, but that also strives to touch the emotional cords of a natural extension it didn’t know was reachable: us.

As iOS devices and the ecosystem of apps and developers around them mature and evolve, these dichotomies will increasingly define the interactions of today, and the software of tomorrow.


VLC 2.0 for Mac Final Design Previewed, Coming This Week

Popular media player VLC is about to reach version 2.0 final and Felix Kühne, current lead developer of VLC’s Mac OS X port, has posted a series of screenshots detailing the final user interface design that we’ll see in the 2.0 update once it goes public “later this week”. The screenshots, available over at Kühne’s blog, show a dramatic change from VLC’s current design on the Mac, with a new sidebar for your playlists, Internet sources, and media on your computer and local network. The new design was created by Damien Erambert, and the first concepts date back to 2008. The interface of VLC 2.0 for Mac will offer a series of advantages over the older version from a functionality standpoint as well:

VLC 2.0’s interface for Mac is dramatically different from its previous revision, both technically and usage-wise. Playlist and video output share the same window, service discovery modules can be easily accessed through a sidebar and various audio + video filters are available through the respective panels. Besides that, the interface is noticeably faster and easily expandable. Speaking of that, we also added support for VLC’s lua-based extensions, which allow you to get info about the current movie from Allociné, post to Twitter, fetch subtitles automatically, etc.

Previously known as VLC 1.2, VLC 2.0 is a major rewrite of the application, which now includes several bug fixes, new features, and a redesigned interface. Alongside improved performances and optimizations for Lion, VLC 2.0 comes with many new features including initial support for Blu-Ray Discs, new subtitle management and blending in video outputs, support for multiple files inside RAR archives, and an all-new 64-bit version for Windows users (VLC 2.0 for Windows won’t feature a new interface as seen on OS X). A complete list of changes from VLC 1.x to VLC 2.0 is available here; the developers didn’t mention anything specific about the “mobile port” for iOS and Android devices.

VLC 2.0 will be available later this week at VideoLAN’s website. More screenshots of the final Mac UI have been posted on Flickr.


The Problem With The iOS Home Screen

I’ve been thinking about the problems I have with iOS’ Home screen concept for years now, but I never fully grasped what was, exactly, that with time made using the Home screen – and thus the whole system of Springboard pages – clunky and annoying. Until it hit me earlier today, and suddenly everything started to make sense.

The iOS Home screen is conceptually broken. Not “broken” as in unusable, unstable or technically flawed. From an engineering standpoint, the iOS Home  screen works. The concept of the Home screen we interact with today is broken because the Home screen wants to be a real, physical, tangible surface while providing access to the gates of the intangible: apps. Apps are data, information, connectivity, presentation, media. Digital content isn’t tangible in the sense that it exists in a physical space, unless you count the atoms and the electrons and the bits that make using an app possible. But that’s a long stretch. The iOS Home screen is based on the concept that app icons are objects on top of it;  this has created a series of issues over the years.

Throughout the release history of iOS, Apple had to compromise and, I believe, implement functionalities the original Home screen wasn’t meant to support. First users wanted third-party apps, Apple waited, but eventually allowed developers to create software to install on an iPhone or iPod touch. Apps are the most important addition to the operating system to date, and they kickstarted the App Store revolution we’re witnessing. In allowing third-party developers to create apps, however, Apple essentially lost control over the display of objects on the Home screen – Apple may be able to check upon the inner workings of an app, but they can’t ban apps based on lack of taste in choosing an icon. And with that, developers were free to choose Home screen icons that don’t necessarily resemble real-life objects, thus breaking the metaphor of manipulating “badges on a table”, as I like to think of it. Have you noticed how almost every built-in, Apple-made iOS app has an icon that resembles a real-life object? The only exception? The App Store and iTunes icons. Which are marketplaces for digital content.

Apple states it clearly in the iOS Human Interface Guidelines:

When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app. The classic example of a software metaphor is the folder: People put things in folders in the real world, so they immediately understand the idea of putting files into folders on a computer.

Think of the objects and scenes you design as opportunities to communicate with users and to express the essence of your app. Don’t feel that you must strive for scrupulous accuracy. Often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness.

Portray real substances accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

Later, users wanted multitasking and folders. Unsurprisingly, Apple gave them implementations of these features that look like objects, in this case objects with linen. Here’s where the situation gets more complex: folders and the multitasking tray, unlike app icons, actively interact with the Home screen, they don’t just sit on top of it. The way Apple designed them, the multitasking tray resides as linen below the Home screen, and folders are tiny containers with a linen background that expands atop of the Home screen. You can see how the entire concept of Home screen as a surface starts crackling under the design weight of  these features: is the Home screen a surface that has another layer underneath? Another one above as well? What do you mean I have music controls in the multitasking tray, too?

Most recently, iOS users began asking more vigorously for a better notification system, a unified reading environment for magazines, and widgets. Apple gave them Notification Center and Newsstand, but didn’t announce anything widget-related, at least for the Home screen. The Home screen, with iOS 5, got two new additions: a new layer, Notification Center, and a new default icon, Newsstand, which isn’t really an icon but it’s a folder with a different background and shelves.

As I said, I believe choosing the right approach to delivering new functionalities and keeping the original Home screen concept got trickier for Apple over the years. What started as a black background with a few default apps turned into a customizable area of hundreds of app icons with folders and multiple pages with a series of additional layers managed by the overly abused linen texture. But the seed of the broken concept can be seen way back into iPhone OS history: think about Spotlight and Springboard page indicators. What are they – how do they fit into the metaphor of a physical surface with objects on top of it? Surfaces don’t have search boxes and indicators. Notebooks have pages, but you have to flip them and turn them and touch them. Websites have search boxes, but they’re bits and lines of code.

If you follow my theory, you can understand how things start making sense from this perspective. You can’t move multiple app icons at once not because of some technical limitation, but because, I believe, in the original Home screen vision inspired by physics apps were meant as a single entity to manipulate, one at a time. On a table, you can’t “select” multiple buttons and pretend they’re all going to move as you touch only one. That doesn’t make any sense in real life. I could expand this concept to the entire skeuomorphism Vs. interface design, but I’ll leave that for another time. My concern right now is the Home screen, the first thing you see when you unlock a device, when you close an app, the place where you manage your apps, your content. There’s a lot of weirdness and inconsistencies going on in some Apple apps and interfaces, but the Home screen is the prime example of a user interface meant for 2007 which was subsequently patched and refined and patched again to accomodate new functionalities introduced in iOS (the same happened with the Home button). You could argue that some proposed features, such as widgets, haven’t been implemented yet because of technical constraints. It’s fair argument, and I’ll take it. Yet I think that, even if complex from an implementation standpoint, it’s the concept itself that makes widgets difficult with the current Home screen.

The problem Apple needs to overcome is that the Home screen tries to be a real object while providing access to the gates of the digital world. To reinvent it, Apple needs to tear apart the whole concept and rebuild it from the ground up.


Firefox 9 Beta Released with “New Look” To Match OS X Lion

Two days after the release of Firefox 8, Mozilla has made available a first public beta of the next major Firefox update, Firefox 9. As expected due to the company’s fast release cycle, Firefox 9 will follow Firefox 8 in a few weeks, with Firefox 10 likely entering initial alpha testing soon.

For the first time since the release of OS X Lion in July, Mozilla says they have included “a new look that matches the Mac OS X Lion application toolbar and icon styles”. In the release notes, Mozilla refers to these changes as “improved theme integration for Mac OS X Lion”. For comparison, we have grabbed a series of screenshots to show the differences the “new look” brings between Firefox 8 and Firefox 9 beta. It is, however, possible that haven’t spotted all the differences between the two versions yet – MacStories readers are welcome to leave us a comment if they find more visual cues to the “new look” in Firefox 9 for Lion.

Mozilla mocked up some big Lion changes a few months back, and notably Firefox still hasn’t implemented several native Lion functionalities, like natural scrolling and full-screen mode.

Firefox 9 comes with other improvements for developers:

  • Type Inference: Firefox Beta adds Type Inference to make JavaScript significantly faster. To learn more about how rich websites and Web apps with lots of pictures, videos and 3D graphics will load faster in Firefox, check out this blog post.
  • Do Not Track JavaScript Detection: Firefox Beta enables JavaScript to show developers when users choose to opt-out of behavioral tracking with the Do Not Track privacy feature.
  • Chunked XHR Support: Firefox Beta supports chunking for XHR requests so websites can receive data that’s part of a large XHR download in progress. This helps developers make websites and Web apps faster, especially those that download large sets of data or via AJAX.

You can download Firefox 9 beta over at Mozilla’s website.


Latest Chrome Stable Gets Redesigned “New Tab” Page

With the latest stable version of Chrome, released today, Google has set out to improve the design of the “New Tab” page, while providing users with a better way to access their most visited websites and apps at the same time. Those who use Canary, Google’s bleeding-edge version of Chrome for users willing to try the latest features and improvements ahead of their stable release, won’t be surprised by Chrome’s new tab page design: along the bottom, a Chrome logo sits next to two new tabs for most visited pages and your installed apps. These apps can be obtained from the Chrome Web Store, which also got a makeover today. Switching between top sites and apps is easy, and if you don’t feel like clicking on the tabs you can always use the arrow icons at the side to navigate, or perform a two-finger flick on your multitouch trackpad.

Apps can be opened as regular or pinned tabs, launched in full-screen mode, configured through the Options or removed from Chrome. It’s nice to see full-screen mode for apps takes advantage of Lion’s native full-screen, which was also recently introduced in Chrome. Websites’ thumbnails in the first tab can be removed and right-clicked as “normal” browser tabs, whereas app icons can be dragged and rearranged on screen. Furthermore, this new tab page comes with a “Recently Closed” menu for tabs and sites in the bottom right corner, too.

Google wrote about the new Chrome Web Store:

Apps and extensions are now presented in a wall of images that’s updated every time you visit the store. We hope this will help you quickly scan the store and find interesting things to try out. In addition, apps and extensions are easier to install—just hover over an image on the grid and click “Add to Chrome.”

Getting additional information about an app or an extension is just a click away. When you click on an app, extension or theme, you’ll see a panel featuring screenshots, videos and other relevant information neatly organized into separate tabs. The store also includes a brand new reviews interface that links to the Google+ profile of each reviewer. (To protect your privacy, we made sure to anonymize any reviews that you previously submitted.)

The latest Chrome version can be downloaded through the browser’s software update checker, or from Google’s website. Check out Google’s video detailing the refreshed Web Store and New Tab page after the break.
Read more


PDF Expert 3.0: Redesigned UI, Page Manager

PDF Expert by Readdle is my favorite app to collect, read, and annotate PDF documents on the iPad, and thanks to a series of updates in the past months it’s also become a solid alternative to iBooks on the iPhone, not to mention support for signatures and text notes. With the major 3.0 update released today, free for existing iPad customers, Readdle has completely revamped the user interface of PDF Expert, adding a new toolbar for annotations, notes, drawing shapes on screen and highlighters, as well as a “page manager” to act on single pages within a document, copy them, export them, and move them with drag & drop.

The new toolbar in PDF Expert for iPad is easily dismissible with a tap on the “x” button, so you won’t have to look at it all the time while you’re reading a document. Similarly, a single tap on the edit icon in the upper toolbar (the one that contains navigation buttons, the new Recents menu, search, bookmarks, and sharing options) will display the annotation toolbar again. You can manually highlight text or use the automated tools for highlights, underlines and strikethroughs; you can add shapes, notes, your signatures, and choose from a variety of free-hand highlighters with different colors. Changes can be reverted at any time, and I haven’t noticed any visible slowdown when navigating annotated documents with hundreds of pages.

The new toolbar is clean and unobtrusive, but it gets better with the new Page Manager. With a tap on the pages button, you can switch to a bird’s eye view of all your document’s pages with live previews (that is, thumbnails include annotations and highlights). You can add a blank page between existing pages, select one and move it around – even select multiple ones, rearrange them, rotate them, email them, and extract them as a new document in PDF Expert’s main section. Live previews update fast on the iPad 2, and the “extract” function is undoubtedly useful if you need to focus on specific pages of a document.

PDF Expert 3.0 is a great update that improves both design and usability, whilst adding some other “little gems” you can check out in the app’s built-in update guide. PDF Expert for iPad is available at $9.99 on the App Store. Read more


OS X Lion: Interface Tour

As we discussed in our OS X Lion review, Apple’s latest operating system is an evolutionary step forward, a milestone in the company’s desktop software history that innovates old concepts and user interactions by bringing some of the features and design schemes seen on iOS devices to the Mac’s bigger screen. There is a subtle difference though: whereas most people would think Apple is “stealing” from iOS, building on the success of the iPhone and iPad (now a bigger business than desktop computers) to sell more Macs, Lion does in fact prove that the roots of OS X are still strong, but looking for a cohesive integration with the seeds planted on mobile. As Cody wrote in his review “Apple weaved our working knowledge of gestures and interfaces into the Mac to capitalize on our intuition” – Lion isn’t a glamorous iOS. Lion is an evolution of the OS X we know and use, and the changes made to the operating system are immediately visible in the interface.

Lion doesn’t look like iOS. If anything, Apple has tweaked the Aqua interface to achieve the same elegance, minimalism and focus on content first conceptualized on the iPhone, but it’s far from being an iOS clone. With Lion, Apple hasn’t ported iOS’ design principles to the Mac – they took the best parts of a mobile interface that they thought would also make sense on the desktop, and managed to make it work. The changes in Lion – both design-wise and feature-wise – never feel like forced additions that are weird to use and be familiar with. Rather, they’re subtle improvements that will make you wonder why they weren’t implemented before. Read more


Postbox 2.5 Will Bring A Completely New Mac Interface

Postbox, the “first-class” email application that shipped a major 2.0 release last year with features such as unified inboxes and quick reply, will have a completely redesigned user interface once the 2.5 version ships this summer on the Mac App Store. Currently in private beta for lifetime Postbox users only, the upcoming 2.5 update has been teased several times by the company in the past weeks, showing off new functionalities like vertical view, a redesigned message view that’s cleaner, elegant and more readable, as well as new toolbar icons also in monochrome variations to get ready for OS X Lion’s new UI paradigms.

Earlier today, the Postbox team has posted a series of screenshots of the UI overhaul they’ve been busy working on with the help of Belgian designer Benjamin De Cock. As you can see from the screenshots in this post and the full gallery here, Postbox 2.5 looks like a massive update design-wise that will be aimed at cleaning the overall experience on OS X which, quite frankly, kind of resembled a Windows program in its previous iterations. With the final goal of “reducing clutter and complexity” in mind, the Postbox team has set out to create an email client that’s just as beautiful as a native Apple app would be, with the addition of unique features like attachment browser, topics, file sidebar, and much more.

There are a lot features and a lot of different ways to use Postbox. It was important for us to account for those different needs, but we also wanted to keep the interface as clean as possible. Mac OS is a huge inspiration for this, as they’re doing a terrific job in reaching people who are less tech-savvy and hardcore geeks. It has been a real benchmark for me for Postbox 2.5.

Postbox 2.5 is a terrific design milestone, and more design improvements are on the way to make Postbox even more user-friendly and accessible for everyone.

The new version of Postbox looks really promising and we can’t wait to get our hands on it to see what’s improved, changed, and refined. Postbox 2.5 will be a free upgrade for existing 2.x customers, so if you haven’t yet, go get Postbox from the Mac App Store at $19.99. Check out more screenshots of the app after the break. Read more


Google Rolling Out Revamped Mobile Search UI

As noted by some of our readers overnight, Google is rolling out a revamped search interface which better showcases all the services offered by Google and allows you to easily and quickly switch between Search, Images, Gmail, Blogs and more. The new page design is not available for everyone (I can’t see it on my iPhone 4 in Italy), as it’s apparently slowly propagating internationally. MacStories reader Kevin, however, managed to grab some screenshots of the updated mobile interface; a new bar at the top provides links to Google Search, Images, Blogs and Gmail, and a “more” button to expand the bar and reveal the icons seen in the screenshots above. Another section of the new top bar displays the Google account you’re currently logged in with, as well as two tabs for Search and Apps. In the Apps section, Google has a Gmail shortcut that takes you to the usual mobile mail interface for iOS devices. Other services are likely visible in the Search tab of international Google domains, as our reader could only see the new design on Google.lu.

Google has updated several of its online services and web apps over the past months to be more functional on iOS and Android devices. Together with Instant and App Store search results, Google made lots of changes to Gmail mobile, improved the weather widget and completely revamped the Maps web app last week. Check out more screenshots below. [Thanks, Kevin] Read more