hands-on

Overcast gets a visual refresh for iOS 10


Overcast is an immensely popular podcast app for iOS with over 12,500 reviews and an aggregate rating of 4.5, plus thumbs-ups from The Verge and others. Marco Arment, who is also the cofounder of Tumblr and creator of Instapaper, documents the process in detail:

I designed Overcast 1.0 in 2014 for iOS 7, and it was a product of its time: it used ultra-thin text and lines against stark, sharp-edged, full-screen white sheets and translucent blur panes, with much of the basic functionality behind hidden gestures. That fundamental design carried through every update until today… I’ve been working on [the update] since last summer, informed by over two years of testing, usage, and customer feedback.

Arment shows the before and after of most of the key screens, along with his reasoning for each of the changes; and it’s worth a read.

workspace therapy

Invisible Creature, Seattle

Last year, Don and Ryan Clark celebrated 10 years of Invisible Creature — their multidisciplinary design and illustration studio. Over that time, Invisible Creature has received four Grammy nominations for music packaging, and has worked with clients such as Target, NASA, Lego, Nike, Wired Magazine, The New York Times, Adobe, Xbox, MTV and more.

The brothers work out of their barn studio located 30 miles east of Seattle. Their workspace is perhaps the best reflection of who they are and what Invisible Creature has evolved to represent.

All photos courtesy Don and Ryan Clark.

frontend frontier

Writing axiomatic CSS with lobotomized owls

Issue 406 of A List Apart introduced what is now called the “lobotomized owl selector” — a powerful but simple CSS construct for reducing code bloat, speeding up development and simplifying the styling of dynamic Web content.

What does it look like, you ask? Just this: * + *

Built on the principle of exception-driven design, you can use this selector to specify universal rules regarding flow and layout, and then write exceptions as required. This becomes tremendously useful for grid-based designs.

Even the most complex systems must depend on foundational rules, and CSS is no different. Although modularisation of a complex interface is a necessary step in its maturation, any interface that does not follow basic governing tenets is going to lack clarity.

Highly recommended, even if you consider yourself an experienced frontend developer.

Air Bonsai by Hoshinchu

Unique, floating bonsai ranging from elegant flowering plants to delicate mosses to bold pines, created on the island of Kyushu, Japan. You’ve not seen anything like this before, guaranteed.

Issue 3 Feature  •  6 minute read

Chromeless interfaces and the future of GUI design

It’s a trend we’ve been seeing in industrial design — displays are going bezeless.

First TVs went almost bezeless, and with the Galaxy S8 announcement last month, Samsung is carrying forward that philosophy into mobile as well. Apple may follow suite soon.

The rationale here is that the bezel or frame which holds together the display unit does not serve any other purpose to the user, hence is “chrome”. Minimising (or altogether eliminating) it enables more content to be displayed without physically increasing the size of the display. Applying this thought to interfaces would yield similar returns — less interface chrome means more space for the content to shine through.

But this is nothing new. Interface designers have been balancing content and chrome since the early days of GUI design. We know the old adage — reduce interface chrome and make the content the interface. Or as Edward Tufte said, “The information is the interface, not computer administrative debris.”

A good example is Netflix, on past iterations of their app.

On the left, you can see chrome in the form of ratings, unnecessary buttons, filters and other panels; which were removed in the later version on the right. Luke Wroblewski has documented how Netflix applied NUI principles to simplify their interfaces.

One of the earliest examples of near-chromeless GUI design deployed on a mass scale were Windows Phone 7 apps designed with the Microsoft Design Language (formerly Metro or Modern style). Debuting way back in October 2010, Microsoft Design Language was heavily influenced by the International Typographic Style and its underlying principles — use of grid systems, clear typography, vibrant colours and objective imagery.

Instagram’s Windows Phone app from 2013

Minus the blue bar at the bottom, there is almost no chrome at all. Instagram treats the content as the interface which you can directly manipulate via taps, scrolls or gestures. This is standard practice today, but was not the case back in 2013. This was chromeless design at its best, and it looked and felt ahead of its time.


Too far a leap

Chromeless interfaces are inherently minimalist, and so are synonymous with flat design. And Microsoft became the biggest evangelist for this chromeless + flat philosophy for the better part of the last decade. This philosophy was then applied across a range of devices from phones and tablets to game consoles and desktops; and Microsoft attributed this impressive plasticity to its treatment of content as the interface.

But it wasn’t without its share of problems, and the biggest criticism of chromeless interfaces and flat design was that usability suffered.

Microsoft in particular experienced severe backlash. Without traditional menus and manipulation controls visible at hand, and visual cues like shadows that signified depth on a two-dimensional medium; users struggled to find their way around.

To get a sense of what this means, consider smartwatch interfaces today. The extremely limited screen estate means controls have to be out of sight. These watches have similar functionality but wildly varying means of invoking them, which is problematic for consumers.

Image by Luke Wroblewski

They demonstrate that chromeless interfaces take some getting used to because they rely heavily on muscle memory, as Luke Wroblewski observes in The Invisible Interface:

When there’s no graphical user interface (icons, labels, etc.) in a product to guide us, our memory becomes the UI. That is, we need to remember the hidden voice and gesture commands that operate our devices. And these controls are likely to differ per device making the task even harder.

Microsoft was designing to bring about the future, but it didn’t account for the reality of the present — consumers were not ready for such a leap. Yet.


Pragmatism and tradeoffs

Microsoft’s digital purity gave way to Google’s pragmatism. Circa 2014, Material Design corrected all the usability problems of the chromeless + flat philosophy by establishing a unified framework for interface elements like menus, modals, tab bars, input elements and other such chrome; and marrying it with the Flat 2.0 aesthetic that was gaining popularity at the time.

The reception was unanimously positive — designers and technologists everywhere were aflutter with praise for Material Design.

Kitchen Stories, a well-designed Android app

In fact, Microsoft, the pioneers of “authentically digital” design recently showcased their Fluent design system, the successor of Microsoft Design Language used across Windows 10. In terms of an interface framework and its treatment of chrome, it seems identical to Material Design.

Groove Music, designed with an early version of Fluent

This is where we stand at the moment. Design sensibilities have hit a plateau. We have established patterns and guidelines for design across devices and product ecosystems. Apple, AirBnb, Facebook, Google, Microsoft and other big companies influencing product design today seem to agree that absolutely chromeless interfaces are not practical — at least for the moment. Product design has become homogenous, and that’s not necessarily a bad thing.

But what does the future hold?


Gazing into the crystal ball

Kirill Grouchnikov has been documenting interfaces from sci-fi films since 2011 at his blog Pushing Pixels. From Prometheus to Oblivion to Iron Man to Tron: Legacy and others, he calls them fantasy user interfaces (FUI).

VFX reel from Cantina Creative, an agency that created FUIs for many popular films

Another interesting take on interfaces of the future comes from Microsoft’s Future Vision videos. As the name suggests, they offer a glimpse into the future of technology through Microsoft’s rose-colored glasses.

Microsoft’s latest Future Vision video from 2015

It’s easy to dismiss these as marketing gimmicks or just wishful thinking. But this future may not be very far away. And looking closely at these interfaces, two things stand out at once.

They’re almost entirely chromeless.
They are visually flat, or almost flat.

Interface chrome seems to be minimal — limited to button groups and simple menus. Most interactions are happening via natural language and memorised gestures. Considering this future becomes a reality, the logical question is: how would users figure out how to use these interfaces?

Well, it’s established that each subsequent generation understands affordances through experience and expectation. Andrew Coyle explains this succinctly:

The pinch and zoom interaction on a mobile map is not inherently intuitive. Users learn it once, perhaps by accident, luck, or word of mouth, and it is forever ingrained in their minds. This type of interaction is discoverable because it is built upon the expectation that a user can zoom in on a digital map. Before mobile touch-screens, users clicked a zoom button on maps that were rendered on a web browser. The prevalence of this possibility presents the expectation in other contexts, which allows the cue to fade away.

Digital affordances, unlike their real-world counterparts, are continuously evolving. In fact, Apple is a company that is generally cautious about following trends, but even they made many bold moves in iOS 7; one of which was button styling. Apple’s designers seem to agree that a button today doesn’t have to look like a real-world button with drop shadows and bevels. There only has to be some visual cue that explains its interactivity.

iOS button styles: iOS 6 (right) to iOS 7 (left)

It’s almost certain that interaction patterns will evolve past the taps and gestures we use on our devices at present. For example, Siri can do a lot and the Amazon Echo has already demonstrated the potential of natural language recognition. A simple phrase like “Ok Google” allows for a lot of visual chrome to be hidden and kept accessible on-demand. So future interfaces could display purely content and reveal chrome when requested via natural language, gestures or even specific hardware peripherals.

One good example of the last category is Microsoft’s Surface Dial, a controller that allows users to customise and navigate interfaces on the Surface Studio.

Interface design is far from mature, and that’s precisely what makes it so intriguing and rewarding:

Digital technology will always outpace mainstream’s societies understanding of it. The goal of design is to simplify technology’s trajectory by developing a story around it that users can understand.

As product designers, we’re all playing a part in telling that story.

Gather by Ugmonk

A workspace organiser meant to reduce clutter. Beautiful and minimal, in true Ugmonk fashion. Completely killing it on Kickstarter at the moment!

precepts

Building something new? First understand the problem

Julie Zhuo reflects on lessons learnt building products at Facebook, starting with framing the problem and solution, execution, measuring success and managing a team. Some insights:

The first step in building something new is understanding what problem you want to solve, and for whom. This should be crystal clear before you start thinking about any solutions.

What typically separates successful and unsuccessful teams is not whether they do things that fail (this is guaranteed), but how well they can consistently execute.

Define what success metrics look like for your product before you launch. Otherwise, if you try to interpret results after they start coming in, confirmation bias will lead to a non-objective reading.
podcasts

High Resolution podcast with Kate Aronowitz

One of the standout podcasts in recent times, High Resolution features Bobby Ghoshal and Jared Erondu interviewing some of the best contemporary designers each week.

In March, they interviewed Kate Aronowitz, who was Design VP at Wealthfront. Before that, she was a Design Director at Facebook where she took their team from 20 to 200 world-class designers under Mark Zuckerberg.

Some (paraphrased) highlights from the episode:

07:50 — “All companies should maintain both career paths for their designers — to either progress as design specialists or get into design management, with equal pay for both.”

15:15 — The tripod of product, design and engineering; and the role of each.

24:10 — “Designers are often myopic and self-absorbed… No one cares about your illustration strategy unless you can show them how it translates into results for the business.”

25:25 — The roles and responsibilities of a design VP versus design director.

31:46 — Kate’s “hockey stick” career path, and how she went from junior designer to design VP.

43:17 — Designing the recruitment process at Facebook and scaling the design team from 20 to 200.

46:10 — On mentoring Luke Woods and Julie Zhuo, both of whom went on to become VPs for design at Facebook.
Switch by Native Union

A portable Bluetooth speaker, conference call device and mobile power bank, Switch allows you to wirelessly enjoy hours of unmatched sound quality experience.

dsgn.mngmnt

A manifesto for small product teams

Mostly, we do things that haven’t been done before, so don’t be surprised when you’re surprised.

Question premises and strategy.

Don’t question goodwill, effort or intent.

Vintage Seth Godin.

Inspirocean — Ideas and visual inspiration across product design, typography, illustration and more

A pet illustration project by Santiago Usano to illustrate each of the nine numbers as pieces of a puzzle.

A nifty little open source screen recorder for macOS, built with web technology. Export recordings as .gif, .mp4 or .webm.

Beautiful editorial design by Luisa Rivera for the 50th anniversary edition of a Penguin book whose title translates to One Hundred Years of Solitude.

“Alien: Covenant has released its most unsettling teaser yet… and there’s not a xenomorph or facehugger in sight.”

Nearly 5 years after its launch, beautiful design continues to be the staple of the Simple customer experience.

Early work by London-based product designer Nuno Santos for online clothing recommendations portal Thread.

Utilitarian and incredibly legible, Zeitung from Underware excels at all sizes both on screen and in print.

ux-pertise

Gradual engagement beats upfront signup everytime

Luke Wroblewski evangelising gradual engagement:

Gradual engagement is the process of moving a user through an application or service — actually engaging with it, and seeing its benefits. With gradual engagement, new users are not just presented with a registration form and then dropped off a cliff. Instead, registration is either postponed, or handled behind the scenes and the first time experience is focused on giving people an understanding of how they can use a service and why they should care to.

The article is around four years old, but apps like Airbnb, Meetup, Medium and others are still guilty of forcing registrations upfront.