In praise of slow design

In light of an inevitable design iteration on the iPhone next week, it’s relevant to remember others that move slowly. As Michael Bierut describes in The Design Observer, much more slowly:

And from a design point of view? Unbelievably boring. Or, I should say, unbelievably, wonderfully, perfectly, exquisitely boring. To a field that today seems to prize innovation above all else, The New Yorker makes a case for slow design: the patient, cautious, deliberate evolution of a nearly unchanging editoral format over decades. And the case they make is — let’s admit it — pretty hard to argue with.

Improving the PS4’s UI

Live PS4 UI
My PS4’s UI as of yesterday

It’s clear the PS4 is an unqualified sales success. It’s sold around ten million units, roughly 2 to 1 against the Xbox One. Those are impressive enough sales to be a key factor in Sony’s profitability for Q1 2014 after years of losses.

But even hit consoles need work; almost a year into its lifecycle, the PS4 needs to improve its user interface. As I’ve argued previously, the UI gets the job done as a quick, no-frills game launcher. Yet its “horizontal ribbon” layout, with every app (in this post, ‘app’ is a loose interpretation encompassing both games and entertainment apps like Netflix) on the system ordered in strict reverse chronological order, is hampered by its lack of customization (note the upcoming major UI update, as of this writing, doesn’t alter the app layout at all.)

Customization matters

Core gamers, often with large game libraries, have the most immediate demand for a more organization-friendly UI. Yet it’s not just a traditional fan base that may juggle between many apps. Popular premium subscription services like PS Plus, Xbox Live Gold and the recently announced EA Access offer new “free” game downloads at regular intervals as long as you’re a member. And casual gamers that only buy a few $60 AAA titles may buy more games as inexpensive and free-to-play indie titles proliferate on the PSN store.

Also, in 2014, customization isn’t just a nice to have, it’s essential to the DNA of most modern tech gear. Every smartphone, tablet, or laptop allows you to organize apps into folders or across multiple home screens. If I’m paying the same price for a dedicated gaming console as I am for the next iPhone, I expect basic levels of customization to define it as my own.

There’s a philosophical argument as well: gaming is going through the same pattern as all media post-internet, splintering into fragmented, niche genres. With so many on the same base console but able to purse much more individualistic tastes, some basic UI customization helps distinguish my PS4 from somebody else’s.

A multi ribbon interface

With such a large install base, major UI changes can be tricky. Thankfully, the UI doesn’t need a redesign from the ground up, just evolutionary growth into a multi ribbon system. Users create as many additional ribbons as they want and move apps to any ribbon they choose. To keep things straightforward, like with iOS, there are no extra “shortcuts” or “aliases” of app icons, only a single canonical icon within a set of ribbons.

The original, single horizontal ribbon remains unchanged by default. Navigation and controls are identical to before, retaining the three row structure: settings, notifications and trophies are in the top row, apps in the middle, and details on an individual app or game at the bottom (figure A). Only one ribbon appears at a time.

Figure A: Start state of the proposed UI
Figure A: Start state of the proposed UI

Users tap the DualShock controller triggers (L2, R2) or speak voice commands to cycle through their ribbons. As each ribbon appears, the scrolling text region in the screen’s top left briefly displays the ribbon name (figure B).

Figure B: user jumps to a new ribbon
Figure B: user jumps to a new ribbon

Reordering games and editing ribbons

To reorder apps in a single ribbon or move an app to another ribbon, users enter a special “app reorder mode” by holding both DualShock bumpers (L1 and R1) down for a few seconds. This is a nod to the “hold an icon until it wiggles to edit” paradigm in most mobile OSes.

The UI’s look in this mode changes significantly: the top and bottom rows are removed and the app icon the cursor is selecting no longer enlarges the icon. In addition, new text labels are added around the ribbon to clarify the name of the active ribbon and its order (Figure C).

Figure C: app reorder mode
Figure C: app reorder mode

A new, simplified control scheme applies in this mode:

  • Controller bumpers cycle through the current ribbon’s order options: chronological (default), alphabetical, and manual.
  • X selects an individual app for movement.
  • Options opens up a menu to change the current ribbon’s name. Upon creation, all ribbons have an automatic, sequential ordering naming convention like “Games 4” and “Games 5”. But for users with a lot of content or who want a particular organization, custom labels are helpful.
  • The D-pad and analog sticks navigate between ribbons (up/down) and individual apps on a ribbon (left/right).
  • Square exits app reorder mode.

Once an icon is selected, a visual change (e.g. change in selected icon border color or thickness, icon appears to hover) indicates it’s available to move. Up and down always shuffles the app between ribbons. To keep things simple, the ribbons cycle with a definitive beginning and end; the first is at the top, the last is at the bottom and there’s no looping. This way, to create a new ribbon, all it takes is moving ‘down’ from the last occupied ribbon (figure D, E). Conversely, to remove a ribbon the user removes all icons from it.

Figure D: icon ABC is selected, ready for movement.
Figure D: Game 20 is selected, ready for movement.
Figure E: Moving Game 20 "down" once auto creates a new ribbon.

Small change, big impact

Adding smarter organization isn’t going to move the needle for PS4 sales. Nor is it likely to affect Sony’s ongoing battle against the Xbox One, a fight centered on game selection, exclusives, and raw performance. Instead, a stronger UI makes users happier while improving their attachment to the device. For a dedicated gaming console in an increasingly mobile-centric world, that’s an underrated, compelling factor in the long run.

The Playstation Network as a case study in not having any top lists in your app store

Matt Birchler on the 100% curated Sony PSN store:

I can see how this model would appeal to a developer. Without the popularity contests that fuel the top charts, the content gets more of a chance to speak for itself. I game earns a purchase by having a good trailer, screenshots, and maybe a demo instead of “I’m #1 in the store, so you should buy me like everyone else.”

Basically Matt argues the over reliance on top download lists are a main problem on other app stores like iOS. In their absence on places like PSN, you’re forced to browse the store and buy apps that appeal to you more on a personal level versus “falling in line behind the million people who have already gotten the same thing.”

That’s a strong thesis, but even with 100% curation, the PSN store has some serious shortcomings, both in its puzzling range of information density and constant pushes for you to upgrade to a PS Plus subscription when you’re already a paid subscriber.

The Sketch Manual part 1: how & why I moved to Sketch

Design Sagi Shrieber reviews why Sketch is his new “go to” choice for design work: plugins, fast version releases, background blurs and much more. I learned a useful keyboard shortcut too; Ctrl/Cmd+C brings up a color picker.

What is Bayhem?

An informative video by Tony Zhou that outlines the techniques director Michael Bay resorts to again and again throughout his filmography. As Zhou illustrates, it’s distinctive, at times visually impressive, but overblown and overused to the point of exhaustion for the audience.

How we make RWD sites load fast as heck

The Filament Group carries serious weight in the responsive web design community, not just on some of their projects, but their open-source code contributions: Picturefill and Grunticon alone are very significant. That’s what makes this post worth paying attention to. Scott Jehl outlines strategies for using webpagetest.org along with inline and asynchronous JavaScript requests to speed up a site’s load time.

The movies of 1994: looking back at the ‘Forrest Gump’ sweep

Grantland’s Wesley Morris on the 1994 summer movie season:

A couple of weeks after the release of Gump, James Cameron would deliver a more alarming battery of effects with True Lies, as well as a woman who’s treated almost as badly as Jenny. But Zemeckis’s movie was speaking to a generation of people out of both sides of its mouth. Baby Boomers needed their history and nostalgia served to them like baby food. Gump’s centrism could please everybody.

Jonathan Snook: CSS is a mess

The consistently excellent Jonathan Snook gave a talk at the recent Beyond Tellerrand conference about how to organize your CSS in a scalable, modular system. I’ve been a fan of Snook for years due to his work on SMACSS, a CSS organization system I’ve loosely adapted on my work projects. A highly recommended watch for those responsible for CSS on larger code bases.

The original Lucasfilm Games team talk about life at Skywalker Ranch

Jaz Rignall conducts a long interview at US Gamer with part of the original LucasArts team. They reminisce over the golden years of the studio, where Monkey Island, Maniac Mansion and many others were produced. A must read if you grew up playing any 80s and 90s adventure games.

Smash the engine

Peter Frase, writing for Jacobin on Bong Joon-Ho’s leftist political critique embedded within his Snowpiercer screenplay:

But the story Bong tells goes beyond that. It’s about the limitations of a revolution which merely takes over the existing social machinery rather than attempting to transcend it. And it’s all the more effective because the heart of that critique comes as a late surprise, from a character we might not expect.

The allegory is perhaps too general to root in any specific theory. But it evokes a tradition of critiques that grappled with the limitations of both reformist social democracy and Soviet Communism, which attempted to seize power and to ameliorate exploitation without really challenging capitalist labor as a system of alienation and domination.