Oct
12
2012

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.

A History of Skeuomorphism In Apple Interfaces

Thomas Brand has published a detailed overview of Apple’s past skeuomorphic designs in applications for classic Mac OS and OS X. As he notes, the trend towards designing apps that resemble real-life objects didn’t start with iOS at all.

As time progressed, the Aqua interface has evolved to reflect the changes in Apple hardware. Gone are the over the top transparencies, deep drop shadows, and distracting pinstripes. Subtle grays, mute reflections, and soft gradients now fill the retina displays of Apple’s latest portables. Some might say that Aqua is not a skeuomorphic interface because it does not resemble a specific real world object. To them I say Aqua is a mirror reflecting back the design decisions that have made Apple’s hardware so appealing over the last 10 years.

In his article, Thomas mentions old software such as Sherlock, the Appearance Manager of Mac OS 8, Apple CD Audio Player, and the Classic Calculator that Steve Jobs famously designed himself with a “build your own” kit created by a former Apple engineer. iOS may not have reinvented skeuomorphism in software per sè, but it surely gave this way of designing apps a whole new meaning and set of interactions thanks to screen constraints and multi-touch.

Check out Egg Freckles’ article for the full list of apps that influenced Apple’s skeuomorphic interfaces.

Image via TUAW

Feb
7
2012

Gabe Weatherhead has an interesting take on my iOS-ification of Apple’s Ecosystem piece:

But there is one feature missing from iOS that will prevent it from ever being effective with an external display: a cursor. I know this seems blasphemous but if you have ever tried to us an iPad with mirroring, you know that you must still look at the iPad to get anything done.

To use the iPad as a desktop replacement, mirroring is not enough. I need a cursor displayed where my finger touches the iPad (or iPhone) so that I have context on the external display. Every time I see iOS app demo videos they are accompanied by cursor representations for the touch interactions, and I think “that would be a great feature on the AppleTV.

I have used AirPlay Mirroring with my iPad 2, and I agree that it’s weird to be forced to look down at your iPad’s display if you want to get anything done that’s not sliding presentations and photos. Even games, in spite of their less complex on-screen controls and interfaces than, say, an app like OmniFocus, can be hard to be played without looking down sometimes.

What I’d like to see — and something that likely won’t happen anytime soon — is a series of “desktop accessories” to better take advantage of the iPad when mirrored or connected to an external display. For instance, imagine some sort of Magic Trackpad for iOS that would allow you to retain gestures and multitouch, but have a cursor when the iPad is mirrored to an Apple TV. Something I often hear (and find myself into as well) is that some apps are just better with a cursor in the current state of software offerings — for example, image editing and highlighting text. Imagine if Apple built an official accessory that, through APIs (much like iCade does), allowed developers to enhance their apps with direct support for “cursor mode” when the iPad’s screen is mirrored or even when the device is held by a stand (magnetic latches could inform the system of the current orientation of the device). If I had to put my two cents in it, I’d say this could be a way to market the iPad as a device capable of switching to a more precision control-oriented environment if needed. Video professionals woud sure welcome such a move.

I’m not saying Apple should produce a convertible tablet that switches between iOS and OS X (albeit Apple’s direction seems to be making switching between the two a seamless experience) — I’m arguing that some specific software and functions are better with a cursor in the current state of things. So unless we’ll see revolutionary new touch controls that will obviate the need for such idea, I think cursor controls on an app-by-app basis is something worth considering for the future of iOS’ mirroring and external display connections.

Perhaps Apple is fully committed to multi-touch and we’ll never see new cursor-based interfaces/hardware coming out of Cupertino again. But I think cursor-based controls are still superior for some kind of apps, especially for professional software such as video and image editing.

Jan
27
2012

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.

Jul
21
2011

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. (more…)

As a geek, I’m always excited about the next great app that may solve one of the annoyances in my workflow or provide a better solution to a problem I didn’t know I had. Whilst functionality is still king when it comes down to choosing the proper tools to administer our workflows and check things off our to-do manager, more often than not we’re also looking for beautiful software that meets our iOS expectations for elegant interfaces and intuitive navigation schemes. Stylapps, a free iPad app released in late June, aggregates “stylish iPad applications” that are becoming increasingly difficult to find in the tumultuous sea of daily App Store releases.

Stylapps starts up with an elegant grid of iPad screenshots placed against a light background that greatly contributes to enhancing the colors of the apps that are being presented on screen. The app comes with refresh and search buttons to find your way through specific releases, but more importantly there is a filter icon in the upper left corner that allows you to pick certain categories to check out new apps released on the App Store and hand-picked by Stylapps. So if you don’t want to learn about stylish new Games, but you’re in for a Productivity and Business treat, you can drill down into the aforementioned categories and start looking for new apps that may suit your needs. Screenshots in the main page are large enough to provide a quick preview of what you’re looking at, however you can also tap on a thumbnail to open a single-app view with description, iTunes screenshots, App Store button and a link back to the developer’s website. To go back to the main list, you just have to swipe your finger on screen; a two-finger swipe lets you jump 10 pages of app picks. A “star” button next to each thumbnail enables you to save an app to your favorites, a section that lives locally on your iPad to collect apps you may want to check out later.

Stylapps’ curated section of beautiful and stylish apps quite resembles my tastes, but in my tests I’ve found the app to be far from perfect as far as stability goes. I’ve experienced a few crashes when navigating between pages, and a bug with opening screenshots will sometime “freeze” the app into a lightbox overlay mode that will force you to quit and re-open.

Still, these issues occurred rarely and I was able to browse the selection of software offered by Stylapps to find some interesting new apps I hadn’t covered here on MacStories. Stylapps is free, looks very nice on the iPad, and it’ll probably help you find the next gorgeous app you didn’t know about.

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. (more…)

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] (more…)

12 of the Year’s Best Ideas in Interface Design

Flipboard UX Design

User interfaces, when done well, are the unsung hero of product design. They’re the difference between a printer whose buttons you can figure out without even reading the instructions and one you want to throw across the room. Now, with the rise of personal computing, interfaces are more relevant than ever before, providing the crucial link between physical objects and the virtual world.

Fast Company’s Co.Design highlights some of the most spectacular and promising product designs of 2010, showcasing app favorite Flipboard alongside other notable user interfaces of FLUD and concept iPad app MetaMirror. It wouldn’t be a slideshow about good interface if Mozilla’s Seabird concept wasn’t in there, but two particular physical products, John’s Phone (Engadget review) and the Ref, shy away from our obsession with everything digital and return to the fundamental concepts of human communication, whether it be interpersonal or emotional feedback. We may often focus, and at times become overly engrossed in Apple’s product philosophies and culture, but we shouldn’t forget a world of innovation exists beyond Cupertino in numerous, brilliant ways.