Empty States

Craig Dennis on area of app design that gets often overlooked:

Empty states are places in apps that have no content or data. They are empty. A blank page. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data. It’s common for empty states to be dealt with by developers as they are often caused by exceptions (such as no internet connection). They often write the copy and as a result it can be a little difficult to understand or it is left with the basic styles. Not the best combination. It should be logged as something that needs designing but that doesn’t always happen.

It gets even worse with apps that deal with errors through text that isn’t localized. In fact, I’d argue that proper localization is another aspect of the app economy that shouldn’t be underestimated anymore (as if it ever could be): with apps available in more than 150 countries, designing for the US market alone is a foolish assumption (unless, of course, an app’s only market is in the US — which is the case with many online services these days).

Empty states can be useful and provide context. Whether it’s a way to instruct users on how to get articles into a read-later app or a cute illustration with a link to How-To pages, empty states should find a balance between their lack of content and presenting on-screen guides.

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.

Earlier today Apple rolled out a very minor, yet important change for the App Store’s homepage on the iPad. Previously, “New and Noteworthy” and “Staff Favorites” sections in the iPad App Store could be viewed by hitting an arrow button that scrolled the various pages inside these sections. Now, users can swipe to navigate between pages of apps listed in the sections, with page indicators similar to the iOS’ Home screen available at the bottom to indicate a user’s position.

More importantly, this little tweak has been implemented in the “Release Date” tab of the iPad App Store as well. Browsing by release date is very convenient for two reasons: it lets you see every iPad app ever approved, and it displays the total number of available iPad apps in the Store. It used to be that, because of clunky navigation, moving between pages in “Release Date” view was slow, and the iPad would often lose its position after scrolling dozens of pages. With the new swiping method, the whole view is faster, and also appears more reliable at going back and forth between results.

Here’s how “Release Date” used to look:

And here’s how it looks now, with no buttons:

At the moment of writing this Apple is still using button-based navigation in the Purchased area, and we wish changes will eventually make their way there, too.

Today’s update to the iPad App Store (Apple also updates the App Store homepages every Thursday with new Featured apps) is minor, but as the company’s attention to detail often proves, minor tweaks can incredibly improve the user experience.

10 Surefire Ways To Screw Up Your iPhone App

So you want to build the next smash hit iPhone app? Extraordinary design is key to getting the attention of users and of Apple, so if an app exudes a stench of mediocrity, Apple won’t feature it and app shoppers probably won’t download it (even if they do, they won’t share it with others).

See the screenshot above? Guess which developer screwed up.