Posts tagged with "UI"

Why Pull-To-Refresh Isn’t Such A Bad Guy

Nick Arnott:

Carr would like to see more developers experiment with new interactions for swipe down gestures, and I cautiously agree. Pull-to-refresh is one of those ideas that seems so obvious in hindsight, but took a talented engineer to think of it. The brilliance of pull-to-refresh is just how well it fit into the existing design. When users try scrolling past the top of a table cell view, they’re trying to view newer content. Pull-to-refresh intelligently extends that scrolling to have an app refresh the content to load any new data. A perfectly logical and intuitive extension of the existing functionality.

This, in response to an article by Austin Carr from December. I especially agree with Nick when he says that fast, reliable data connections that never fail aren't a reality yet, though they have gotten better over the years.

Pull-to-refresh may seem simple and obvious today, but it was a great design challenge for its inventor back in 2010. Nick makes a lot of valid points about its existence and evolution.

Permalink

Shortcat: Spotlight For The User Interface

In my daily workflow, I rely on Alfred for Mac to find files, folders, and apps for me. Since July 2012, I have used Alfred 4,326 times for an average of 46.5 times a day. I use Alfred for a variety of tasks which include (but are not limited to) accessing favorite folders, launching Google search, acting on multiple files through the Buffer, and executing AppleScripts. Alfred is one of my favorite pieces of Mac software, ever.

I like launchers. They simplify my workflow while allowing me to save time and be more efficient. This is why I’ll keep an eye on the development of Shortcat, a new Mac app – currently in public beta – that aims at becoming a launcher for interface elements.

The developers describe Shortcat as “Spotlight for the user interface”, and that’s a fairly accurate description. Essentially, Shortcat relies on support for Assistive Devices (an Accessibility feature of OS X) to be able to “see” the labels of buttons and menus and “click” on them. So, for instance, instead of moving your cursor on the trackpad, you’ll be typing “back” to make Shortcat click the Back button in Safari.

Shortcat works better with apps that leverage Accessibility features and have properly labeled buttons and interface elements. In the app’s Help menu there’s already a list of apps that don’t work properly with Shortcat as it’s unable to “read” (and thus let you find) their interface elements. I am no Accessibility expert, but my guess is that these apps don’t support VoiceOver either.

In my tests, Shortcat was a pleasant surprise. If you don’t know about Accessibility, the app will look like a fantastic trick – how can it click for me when I’m just typing? In actual usage, there are some things to be considered. When you invoke the app with a shortcut (it’s customizable from the Terminal in this version) and you start typing, it will highlight areas of an app that match the letters you typed. The best match is highlighted in green, other possible “destinations” for the mouse are yellow. You can click on a button or menu by typing its full name or an abbreviation, such as “Add Action” or “AD” for the toolbar button in OmniFocus.

You can also tell Shortcat to show “hidden” results. By preceding your query with a dot, you’ll be able to reach interface elements that, at first glance, don’t have a label. I tested this with several apps, and, for instance, I was able to type “.1p” to click on the unlabeled 1Password extension in Safari, or “.n” to open the compose box in Tweetbot. Speaking of Safari, you can also use Shortcat to click on website navigation elements such as buttons or text. “Clicking” on hyperlinks with Shortcat will, just like a regular click, open them in a new tab.

Shortcat is an interesting experiment, but it needs more work before being ready for primetime. Its text matching algorithm is good, but still not perfect: sometimes, it associates things like “SYNZ” to “sync”, which isn’t particularly nice to see. I would also like to see a more polished graphical representations of highlights and selected regions of the UI, as right now the highlighting process seems more a “hack” than a consumer product. Also, I’m still not completely sure how, in every day usage, Shortcat could come in handy. Is it a utility to navigate large documents without typing? Or is it an app navigator? In a world of buttons associated with keyboard shortcuts, are virtual clicks really that necessary? Shortcat makes for a cool demo, but it needs to find a stronger message to make people “get” what it’s all about.

You can check out the Shortcat beta for free here.


Spotify for iPad: A UI Analysis with A Rdio Perspective

Spotify for iPad, released this morning, is a beautiful app. It’s solid, providing fast and reliable access to Spotify’s huge catalogue of songs and artists, and it presents content inside a great-looking package that, as I’ve already written, reminds me of Reeder’s sepia tones.

What follows is a brief examination of the app’s interface and functionalities. I have been using Rdio to completely fill my music listening needs for the past six months, but I was looking forward to trying Spotify for iPad to give it a fair shot. Read more


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