Josh Clark's Blog, page 23

Design To Wake a Sleeping Giant

Before and after: Verywell (right) replaced the venerable About Health network, injecting new life into About.com as part of its new vertical strategy.







The Team


Josh Clark: Creative direction, UX design
Dan Mall: Art direction
Brad Frost: Front-end design and development
Ian Frost: Front-end design and development

After 20 years on the web, About.com was showing its age. Big Medium helped the company reinvent its product strategy and design process���and created some mighty good-looking and profitable sites along the way.

At the start of 2016, About.com was still the 40th-largest site on the web in page views, but the network was seeing punishing drops in page views. The network���s massive collection of general-interest content, once its greatest asset, was now seen by search engines as a content farm. Its design was generic and conservative, and the pages were choked with ads and pay-per-click links in a desperate attempt to keep revenue level. Audience and advertisers were turning elsewhere.

Big Medium worked with About.com to develop a new vertical strategy, carving out the content from the main network into branded premium experiences. Big Medium designed the health vertical Verywell and the finance vertical The Balance, giving both a warm, humane feel that was missing from About.com. The results were beyond expectations:

The new verticals have more than doubled engagement in every metric.
With far fewer ads, ad visibility and engagement are way up, along with ad revenue.
About.com���s verticals Verywell, The Balance, and Lifewire are all in Comscore���s top ten in their categories .

Along the way, Big Medium also overhauled the company���s entire approach to web development. Josh Clark, Brad Frost, and Dan Mall embedded with the Verywell team���s leadership and introduced:

A newly collaborative design process
���Designing and deciding��� in the browser
The atomic design methodology
A tight focus on the mobile experience

See the sites in action: www.verywell.com and www.thebalance.com

Verywell���s design is a welcome departure from the hyper-clinical approach of other health sites. The stock-photo-heavy sector gets a reprieve with hand-drawn, humanizing illustrations.








We designed every page starting with mobile, reflecting the reality that smartphones are the preferred experience for most visitors.

Shake Music from your Phone to your PC

The Team

Larry Legend: App development

Josh Clark: Interaction

Happy Together is an experiment in making gadgets play nice. Developer Larry Legend teamed up with Big Medium’s Josh Clark to create a prototype app to shake music, photos, webpages, maps, or text from iPhone to Mac. Here, Larry shows how the app works to flip music from your phone to your Mac.

Want to get involved? Get in touch with us, or fork the project at Github.

An Online Home for the World's Biggest Publisher

“Be rambunctious” was a design principle for this project. And thus: Beyonc��.







The Team


Josh Clark: Creative direction
Kevin Hoffman: Information architecture
Ahava Leibtag: Content strategy
Melissa Frost: Art direction
Brad Frost: Front-end design and development

When Time Inc. spun out from parent Time Warner in 2014, the company was on its own for the first time in decades���and it needed its own brand. Big Medium gave Time Inc. a new visual swagger, a responsive website, and strong messaging to explain the company���s lasting value as the publisher of the world���s most iconic brands. Time Inc. owns and publishes over 100 magazine brands, including Time, Sports Illustrated, People, Fortune, and Entertainment Weekly.

Big Medium worked with a broad team including Time Inc.���s CEO, chief content officer, and chief marketing officer to distill the essence of the reinvented brand. With the directive to ���be rambunctious,��� Big Medium crafted a message and visual brand for Time Inc. that is as lively as its many titles.

See the site: www.timeinc.com

We designed high-impact landing pages for each of Time Inc.’s iconic brands, recalling the importance of those brand’s cover photos over the past century.

The Difference a Decade Makes

An Event Apart marked its 10th birthday by asking friends and collaborators to look back and remember what they were doing back in 2006. They shared the results in four installments: one, two, three, and four. Here���s my contribution:

Ten years ago, I lived in Paris, where I designed websites and built a designer-friendly content management system.

Back then, I assumed that digital interfaces would always sit inside a big box on my desk. I naively assumed the web would always be tied to screens. Now I design digital interfaces for phones, living rooms, cars, clothing, jewelry, and asthma inhalers.

Ten years ago, my watch couldn’t tell me the weather. When I asked my living room to “turn on the lights,” it ignored me. I watched my favorite TV shows in agonizing weekly intervals, an hour at a time. When I needed a car to take me somewhere, I had to go into the street and wave my arm at yellow automobiles. Keeping in touch with friends required individual communication via phone call, email, or ink scratchings on a sheet of wood pulp. A tweet was the sound a bird made.

Ten years ago, my primary phone plugged into the wall. People left messages on a recording device that sat next to it. I occasionally typed text messages into a cell phone, using a keyboard labeled 0-9.

Ten years ago, there were two screens in my life: my PC and my TV. Now I have eight. When friends went out to dinner, none of us looked at our phones, ever. When I browsed the web, I didn’t see the same ad following me everywhere. There wasn’t a microphone in my living room allowing one of the world’s biggest companies to listen to everything I say. I didn’t feel beholden to my bracelet to walk a certain amount of steps per day.

2006 still seems like yesterday, but since then, technology has changed the entire fabric of our lives. Through it all, An Event Apart shined a bright light not only on the best techniques for crafting that technology, but the values that should shape it. Thank you, AEA, and happy birthday. You look just great.

The Physical Interface

Watch the video from Smashing Conference New York, June 2016.



Watch video
Download slides

We suddenly live in a strange and wonderful nexus of digital and physical. Touchscreens let us hold information in our hands, and we touch, stretch, crumple, drag, and flick data itself. Our sensor-packed phones even reach beyond the screen to interact directly with the world around us. While these digital interfaces are becoming physical, the physical world is becoming digital, too. Objects, places, and even our bodies are lighting up with with sensors and connectivity. We���re not just clicking links anymore; we���re creating physical interfaces to digital systems. This requires new perspective and technique for web and product designers. The good news: it���s all within your reach. With a rich trove of examples, Josh Clark explores the practical, meaningful design opportunities for the web���s newly physical interfaces.

Multidevice Mambo: UX Choreography Among Gadgets

Designers tend to approach every interface as a dance solo, assuming that their UI will enjoy sole attention. Truth is, the stage is jammed with digital performers, and more join every day. Watches, thermostats, televisions, jewelry, phones, and everyday appliances are lighting up with new intelligence and interactions. The challenge and opportunity for designers is to create experiences for each gizmo that anticipate and embrace these other players, designing with the whole troupe in mind���and encouraging users to sashay among them.

Josh Clark shares a whirling fandango of practical techniques and interaction examples to show how designers can plan and craft a UX for this whole complex ecosystem, not just for the individual device. The nature of UI design is cha-cha-cha changing; learn to keep up with the tempo of this multi-device mambo. Learn to:

Dance with a partner (or many of them): design patterns for slinging content between devices
Get physical: how physical interaction is just as important to multidevice UX as screen-based digital interaction
Do the latest dance: how emerging platforms like conversational UI and the internet of things are relevant to every web designer or developer
Stay in step: manage brand consistency as you sashay across devices, operating systems, platforms
Organize the steps: Process, technique, and planning for multi-device, multi-platform experiences (e.g. making it work in your organization)

Magical UX and the Internet of Things

Watch video
Download slides

What if this thing was magic?

The web is touching everyday objects now, and designing for the internet of things means blessing everyday objects, places, even people with extraordinary abilities���requiring designers, too, to break with the ordinary. Designing for this new medium is less a challenge of technology than imagination. Sharing a rich trove of examples, designer and author Josh Clark explores the new experiences that are possible when ANYTHING can be an interface.

The digital manipulation of physical objects (and vice versa) effectively turns all of us into wizards. Sling content between devices, bring objects to life from a distance, weave “spells” by combining speech and gesture. But magic doesn’t have to be otherworldly; the UX of connected devices should build on the natural physical interactions we have everyday with the world around us. This new UX must bend technology to the way we live our lives, not the reverse. Explore the values and design principles that amplify our humanity, not just our superpowers.

Smart Watches, Wearables, and That Nasty Data Rash

This article first appeared in Issue #2 of Connected, a quarterly publication about connected devices, alongside many smarter observations about wearable technology. You should totally buy the issue here.

da•ta rash \ˈdātə ˈrash\, n. an irritating or unsightly eruption of information on the wrist or other site of wearable technology.

Every technology has its toxic byproducts and associated maladies. The pollutants of the industrial era cursed us with black lung, lead poisoning, radiation sickness and more. Now the information age threatens to ding us with the damaging, if less deadly, ailments of data pollution.

For all the remarkable opportunities that information technology has unlocked, it’s hard to dispute the downside of our diminished ability to focus, to find calm, to connect with the people we care about. As social networks spew a dazzling blizzard of text, images and alerts, we’re buried under the impossibility of consuming those messages as quickly as they are produced. Online, we enjoy the illusion of companionship without the demands or benefits of friendship. Offline, we test our genuine friendships by gazing into glass slabs instead of enjoying one another’s company.

And now here come the wearables. I’m a technologist, an enthusiast, an optimist. I’m beside myself about the possibilities of ubiquitous computing. But I’m also concerned that the first generation of wearable gadgets is buffeting the body in unintended ways, like so many other technologies that came before. Will our skin burn with bubbling boils of data? Will our ears buzz with non-stop notifications? Will our eyes flicker with the alerts streaming across the clothing and accessories of others?

There are so many opportunities in the fact that we can now wear data. But the risk is that it will wear us.

It doesn’t have to be that way, of course. Careful, humane design can give us the benefits of wearing data without allowing information poisoning to seep beyond the screen and into our physical selves.

Some suggestions: design for pre-attention; design for fashion; design for identity; design for the individual; and design to amplify our humanity.

Design for pre-attention

Designers of smartphone interfaces did their jobs a little too well. They created experiences that are so engaging that they soak up all of our attention. They did it by combining very personal data, social interaction, and a hefty dose of FOMO into a visual interface that requires focus and concentration to make sense of it. Our screens become the foreground to everything else, and in the moments when we allow them to fade to the background, alerts prompt us to pick them up again.

This model is not a promising future for wearables. Smart-watch designers, however, seem to be smitten with the idea of strapping a smartphone equivalent on your wrist. These watches strive to replace or supplement smartphones with screens that update you constantly with the latest info. This “convenience” imposes more information onto your body than it can or should bear.

As the internet of things turns everything—every object, every place, every person—into a potential interface, those interfaces have to be more discerning. They should demand our attention only at truly demanding moments, not at the receipt of every new email. The real luxury of wearing information is not in exposing ourselves to every passing data point but in filtering that data in ways that alert us gently, even subconsciously, to changes in our environment.

Cognitive science has a name for this. Pre-attentive processing is the way our brains gather information from the environment when we don’t even realize it. In the flash of an eye and without even a moment of concentration, we detect changes in temperature, in color, in motion, in facial expression. We process these environmental cues subconsciously, without effort, so they don’t compete with or intrude upon the subject of our conscious focus. Contrast that with the concentration it takes to read even a short text message, an activity that requires you to tune out everything else for a few seconds.

Designing for pre-attention makes the information display so subtle that it becomes practically instinctual—a spidey-sense awareness of your personal data. The original wearable technology—the watch—is a model of this kind of ambient, low-impact display. Unlike phones, watches don’t push or interrupt but quietly make their information available whenever you choose to seek it out. That information also happens to be highly glanceable, consistently formatted, and requires virtually zero cognitive overhead. We glance absentmindedly at clocks or watches without losing the attention we’ve invested elsewhere. As an information interface, the watch is neither greedy nor preening.

Turning a watch into a smartphone undoes all of that elegance. Ideally, the smart things we wear on our bodies shouldn’t ever buzz, beep, or tantrum. They should quietly respect our attention, standing ready to deliver information with as little distraction as possible.

Withings Activité smart watch

The Withings Activité is one of the few smart watches to embrace the original, inspired interface that served analog watches so well. It’s a pedometer that does the usual fitness-tracker stuff, syncing via bluetooth with your devices to track your steps and sleep patterns. But its display is decidedly low-res; a simple dial shows your progress toward your daily goal, from zero to 100 percent. It's elegant, nonintrusive, and by the way, the battery lasts a whole year, not just a few hours.

All pre-attentive interfaces are similarly simple, though not necessarily so analog. If you must design a watch that alerts you to the state of your inbox, for example, there are better, less intrusive alerts than numbers, beeps, or buzzes. Just ask Bilbo Baggins. In The Hobbit, Bilbo’s sword Sting glows when orcs are nearby, its glow growing stronger as danger increase.

Sting is a pre-attentive approach to personal safety. A pre-attentive approach to smart watches could do the same, changing the color or intensity of a glow as messages from certain people start to pile up (family or coworkers in this case, not orcs). This shift in color or intensity is, for all practical purposes, a single-pixel display. It’s a low-resolution signal that cuts out unnecessary detail to give just enough info to make a decision or dedicate attention. When this glow reaches a threshold of importance, you can turn your focus to a different, more attentive display, like your computer or phone.

A single-pixel display doesn’t have to be single-function. This glow-meter approach could deploy multiple colors to track multiple types of data. If your watch glows red when your inbox needs attention, it might glow blue when rain is on the way, or green when a deadline approaches. The result would be a kind of mood ring to show the state of your personal data cloud. (In fact, why not add mood as a data dimension, too? Your wrist watch could glow when your partner is in distress or is simply thinking about you.)

Happily, this glowing “Hobbit effect” could also be beautiful, which brings us to the next remedy to unsightly data rash:

Design for fashion

Clunky objects lend themselves to unsightly data rash. (Literally. The plastic Fitbit Force bracelet was recalled after causing allergic rashes and blistering.) As we’ve begun to dress bodies with wearable technology, the focus has been more on “technology” than on “wearable.” The industry has tended to focus on the engineering question (how can we bolt this technology onto a body?) instead of a more challenging and subtle fashion question (what if this beautiful wearable object happened to be magic?).

We should strive to create objects that people want to wear even without its built-in technology. We might love our gadgets for their special powers, but we should equally love them for their essential wearability as aesthetic objects and personal fashion statements.

Just look to our earliest wearable technologies—eyeglasses and wristwatches—for instructive inspiration. Both gained real commercial traction only when they also became fashion statements—ornamental as well as functional. Fitness fashion (rubber bracelets) and tech fashion (screens and polished titanium) are fine as far as they go, but it’s time to explore a fuller range of fashion and personality in the smart objects we intend to wear. It’s time to look smart, not just act smart.

Our clothing and accessories are personal expressions to the world. Too many of this first generation of smart objects ignore this fundamental external role. They are instead designed for a relentless inward focus, tracking data for private consumption, or displaying info intended solely for its wearer. These gadgets let us wear data, but they rarely share that data with the outside world in the traditional way that we share what we wear. Meantime, the selfie stands in for our current state of digital dress-up.

This is an observation that raises more questions than answers, but those questions all present fascinating and useful starting points for designers. What does it mean to wear data? How can I project data in a way that expresses my passions, my sense of humor, my well being, my state of mind, or whether I’m available for interaction versus feeling private?

In other words, how might we turn data from a rash-inducing assault of information to a personal expression of self?

Design for identity

Clothing and accessories are essential to our public identity, and so their augmented versions should likewise augment and extend the broadcast of that identity. This sharing won’t always be visible, and the target of the sharing won’t always be people. Wearing data means that we expand our social circle beyond people and to the smart things and places that surround us.

Location data was what gave smartphones the magic necessary to create a mainstream wave of mobile computing. For wearable computing, identity data seems likely to be a similarly critical ingredient. Gadgets like the Nymi bracelet or Disney’s MagicBand turn our bodies into secure broadcasters of unique identity. Both use biometrics to ensure that you're the one actually wearing them—Nymi via heart signature and MagicBand via bone density scan. By broadcasting unique identity, they open the opportunity to let us invisibly negotiate with trusted sources to wrangle anything from government services, to door locks, to payments, to restaurant reservations.

Disney’s MagicBands.

But this approach has an important secondary effect, too. When wearables focus on identity first, they can relegate a whole range of features, sensors, and data-gathering functions to other gizmos that happen to be nearby. Your bed is perhaps better suited to tracking your sleep patterns than a bracelet, for example; the bed just needs to know that it’s you who’s sleeping in it. Foursquare co-founder Naveen Selvadurai calls these embedded technologies “there-ables,” devices and sensors that are already there in the room; you just show up.

A sensible way to avoid data rash is simply to limit exposure to information allergens. Let’s find ways to reduce the number of sensors we have to wear and push them instead into the smart environment around us. Certain activities will always require wearable sensors in order to work. We have to wear pedometers or heart-rate monitors to make them go. But a whole host of location, security, and home automation features can be pushed off of our bodies and into the semi-smart environments around us.

When sensors can live near us instead of actually wrapped around us, we don’t have to wear so many of the things in the first place. How many bracelets are we expected to strap on, after all? My friend Rachel Kalmar, a data scientist, often wears over 20 smart bracelets at a time in order to make the point that most of them are at once redundant and incompatible. The emerging wearables industry can surely do better.

Alas, there’s a potentially troublesome outcome if we make wearables focus on identity in order to outsource data-gathering: it could make our identities far more public than most of us are comfortable with. When our gadgets start announcing our presence to any device in broadcast range, it’s easy to imagine those devices getting a little pushy. A subset of marketers persistently and excitedly promise a future of location-based advertising where we’re pummeled by ad messages and discount offers as we pass by storefronts or walk through shop aisles. What could be more horrific than a “service” that bombards you with ads you can never escape? This is perhaps the worst kind of information poisoning: wandering endlessly through a thick and toxic cloud of targeted commercial messaging.

And so we must take care. Managing identity, that most personal piece of data, requires respect, transparency, and the confidence to cede control to the individual.

Design for the individual

When I talk to people about a sensor-laden future full of smart objects, the topic is greeted with equal parts excitement and dread. The dread comes from several creepy prospects: sensors everywhere (including our bodies) might create a culture of constant surveillance; our data might be used and seen in ways we don’t understand or control; and we might forfeit agency over our environments to “smart” devices that aren’t quite smart enough, buffeting us with dubious decisions.

These fears—the staples of every dystopian sci-fi movie—are about loss of control. They rail against a data environment so polluted that we no longer know how our personal information will be used or how machines might impose themselves on us.

As we design the personal services and devices that respond to the individual it’s important that we design first and foremost for the individual. Your data—and especially your identity—should be yours and yours first. You should have confidence that your personal gadgets and services operate in your interest, and not solely in the ambiguous interest of the megacorp that created them.

Services should be designed as opt-in, not opt-out. You decide which service gets access to your identity, and the off switch should be obvious and available. Wearables maven Liza Kindred suggests that services should have “nutrition labels” that clearly identify the information that they’ll use, and how they’ll use it. Who gets your data? How much of it, and for how long? Are they allowed to compare it with other people’s info? Can you make the data self-destruct? All of those decisions should be in your easy understanding and control as the person who’s making data or identity available.

Design to amplify our humanity

The wearables world often uses the familiar but unfortunate language of science fiction to describe its smart devices: they “augment” or “enhance”, they are prosthetics, bionics, even cyborg extensions. This language emphasizes the technology, not the human being wearing it.

Technology should bend to our lives instead of vice versa. Instead of using the cold and creepy terms of enhancement or augmentation, I suggest wearables should aim to amplify our humanity. They should let us be who we already are, only more so. They should give us greater control, mastery, and understanding over our environment and ourselves. They should reinforce connections with the people we love and the places we visit, instead of isolating us under a torrent of data. They should draw us into the world instead of drawing our eyes to a screen.

We are suddenly awash in data, with the fresh possibility of wearing devices that are able to capture, process, and report that data. Like previous eras of technology, we’ll make missteps as we learn to use this newly abundant raw resource. We’ll sometimes create interfaces that overwhelm or irritate with the effects of data pollution and information poisoning. But if we can focus first on human needs and natural interaction, we can soothe the occasional data rash and promote healthy insight instead.

Tags:

design,

internet of things,

smartwatch,

wearables

Making of: Entertainment Weekly's Responsive Mobile Site

Entertainment Weekly has a new responsive mobile website, and the design is a Global Moxie joint. Check it out at m.ew.com.

I had the good fortune to lead the overall design effort for the project, and I invited some of the planet’s finest web heroes to join in.1 They’re like The Avengers, only without all the bickering and Hulk-like rage:

Robert Gorell wrangled IA and UX on the project, serving up an entire smorgasbord of content to small screens, one bite-sized morsel at a time.

Dan Mall and his SuperFriendly colleagues Scott Cook and Matt Cook managed the art direction and visual design of the site. They created a fresh look on top of the rich visual brand that Entertainment Weekly had already established in its print and digital projects.

Brad Frost made the magic happen with HTML and CSS. We put his new Pattern Lab environment through its paces as an ideal way to manage both process and deliverable for a responsive project.

Jonathan Stark made the site dance with JavaScript that is at once compact, flexible, and even understated. Just like the man himself.

Kristina Frantz kept the trains running on time (and on the right track) as producer of this fandango.

10up was our technology partner, handling the back-end integration of the design into Entertainment Weekly’s content management system. They’re just great.

Everything happened under the careful and pragmatic attention of Entertainment Weekly Product Director Chad Schlegel. We also worked closely with EW.com Editor Bill Gannon, Art Director Martin Schwartz, and Senior Project Manager Serena Tan. Everyone on their crew was a pleasure to work with: enthusiastic, flexible, and willing to hand themselves over to the responsive design process. That process continues to evolve and its departures from traditional design milestones and deliverables can sometimes give all of us vertigo. With every project, though, the process gets more grounded, more settled.

I’d like to share some of that process, as well as some novel design solutions that we developed.

The brief
A magazine feel
Killing the carousel
Progressive disclosure
Limiting the long scroll
Navigation: content as an enhancement
Nifty anchor navigation
Photo galleries that are more than photo galleries
Share share share share
Respectful advertising
Cross-platform branding
A responsive process
More from the team


The brief








Ye olde website. Entertainment Weekly's original mobile site.

Our mission: design a responsive site for phones and small tablets—everything south of the iPad Mini.2 This new edition replaces a simple site that has served phones for several years. While that site focused on efficient delivery of news and headlines, the new site was to branch out and include the full EW.com experience, including photo galleries, videos, and community experiences.

Beyond a full slate of features and content, though, a big piece of this was about brand. The simple design of the original mobile site, while efficient, did not capture the energy and ebullience of Entertainment Weekly’s desktop and print experience. “The mobile site right now doesn’t convey our personality. It’s like a government form. It’s not fun,” Chad told us. Assistant Managing Editor Mike Bruno brought the message home: “We want to take what we’re good at and just wallop you in the head with that stuff.”

Part of connecting the mobile design with the larger Entertainment Weekly brand also meant literal connection across platforms. The design had to feel not only consistent with those platforms (print, apps, and web across devices) but also had to make them known. One of the site’s job in both function and aesthetic was to plug readers into the breadth of the Entertainment Weekly universe in all of its platform contexts.

So: featureful, pretty, on-brand, and platform-minded... all with the goals of increasing reader engagement as measured by page views, user sessions, and community involvement.

We spent a lot of time with Entertainment Weekly readers, finding out their sense of the brand, and the jobs that the website, apps, and magazine do for them. Robert and I did hours of interviews with regular readers. And from there, we were off. (Dan gives a great overview of our kickoff process, including a slew of photos.)

A magazine feel

EW.com cranks out a huge amount of news every day, typically between 50 and 75 new stories per day. Yet for all of this emphasis on breaking entertainment news, the brand’s roots are in its magazine origin. As part of the mission to connect the brand across platforms, we wanted to create a magazine feel even on the small screen. That meant leading with the site’s wealth of glossy, high-quality photos. When you hit the site, no matter what page, the art leads as key content, taking up much of the first-screen experience.

On larger screens, like small tablets, this photo-led design is even stronger, with the photo running huge, almost like a magazine cover. For a site that has so many exclusive photos and videos—where multimedia is a peer to prose—this approach had three advantages: it’s visually arresting; it connects to the print brand; and it promotes photos as one of the biggest draws to the site (a fact which traffic patterns had long indicated).

As a result, a strong lead image commands a third of the screen on nearly every page of the site. But which stories should get the lead-image treatment on the homepage and channel pages? For the past several years, Entertainment Weekly has long promoted several top stories in its “dynamic lead” (DL), a bit of industry jargon that refers to a carousel.

There was vigorous discussion about the pros and cons of keeping the carousel, and we finally ditched it.

Killing the carousel

Carousels are slideshow-style widgets that chop content into individual panels, and you swipe or tap to spin through the offerings one by one. Media sites like this one often use them to create a slideshow of featured headlines. Carousels seem to solve lots of problems, delivering high-impact visuals without sacrificing screen real estate. Because carousels let you stack lots of content into the same compact space, it’s especially tempting to impose them on tiny mobile screens. Pour featured stories into carousels, and presto, the headlines all magically share the same premium top-of-page position.

Alas, research reveals miserable click-through rates on carousels.3 Poking at them only a little bit reveals why: carousels are slow because you have to work to use them. They rely on physical repetition, cognitive effort, and little more than vague trust that there’s going to be something useful on that next slide. Carousels ask for those rarest of commodities: patience and attention.

Consider the seven stories featured at the top of Entertainment Weekly’s new mobile site. If we piled the seven headlines into a slideshow carousel, then getting to that seventh story would be a six-swipe slog through the first six. That’s six interactions before you even see that last headline, and most will never get there. Instead of highlighting content, a carousel defeats the purpose by hiding that content behind a pile of swipes and taps.

Our goals for this featured area were twofold: strong visual impact and easy access to all top articles. We wanted a solution that solved for both, instead of a carousel which neglected one of those goals (easy access to all headlines). So we turned to an old friend.

Progressive disclosure

Progressive disclosure is a mobile designer’s best secret weapon. It’s a high-falutin’ term for giving people full content a little bit at a time. You give people a taste or a synopsis and then let them ask for more if they want it, a great strategy for managing content on small screens. A slideshow carousel is a kind of progressive disclosure: you give someone a piece of content and then invite them to browse more of the same. The problem with carousels for headlines is that they have no scent of information and very low content density. You don’t know whether the next slide will be interesting, and you just have to work through the thing to find out, one headline at a time.

Progressive disclosure works best when you give people more to go on. We wanted to show several featured articles at once and then let people decide whether they wanted to see lots more of the same. Otherwise they could move on to other content.

Our solution was a simple More button. The top area of the homepage shows a gigantic splash image for the lead story, followed by two secondary headlines with thumbnail images. Hit the More button to reveal four more articles. By showing three stories at the top, we give people enough information to know if they’d like to see more like that. If so, we give them everything we’ve got. That’s one interaction instead of six for a carousel.

We extended this pattern to all the content sections on the homepage and channel pages. Each of these sections shows a small handful of headlines. Tap a button to see lots more of them, or just keep scrolling down to the next content section to explore a different vein of entertainment news.

Tapping the More button in this module for movie reviews expands the view from four headlines to ten.

For larger screens with more real estate, we did away with several of these More buttons and just poured all the headlines in at once. Larger screens offer easier scanning of lots of headlines, so they can support that additional content density. That underscores an important job that progressive disclosure does for small screens...

Limiting the long scroll

One of the unfortunate side effects of responsive designs is all too often a crazy-long page on small-screen gadgets. That’s especially true when you design for the desktop first and then crush that design into a single column for phones. “Hm, I’ve got a three column design... I guess I’ll just stack all of those columns on top of each other. Mission accomplished!”

That gives you content parity with the desktop site, which is great, but it doesn’t provide the same parity of usability. When you do that, third-column content that was easily accessible on large screens now gets sunk to the depths of a seemingly endless single column on phones. This buries content... and risks the occasional case of swipe-swipe-swipe thumb sprain for those determined enough to go all the way to the bottom of the page.4

The More button (and progressive disclosure generally) enables a compact view of each content section. You get a taste of each section by scanning the top stories, without committing the design to displaying everything at once. It makes the content quickly scannable while giving easy one-tap access to more if you want it. This approach allows the site to feature lots of content on the homepage and channel pages without risking thumb sprain. Boom: content parity and easy accessibility.

Navigation: content as an enhancement

Implicit in progressive disclosure is the notion of primary and secondary content: show the most important stuff always, but push secondary or optional content into another view or state. Optional, nice-to-have content provides some interesting room to play, because you have the possibility of treating content itself as an enhancement. Just like progressive enhancement tests the browser to see if it can handle fancy functionality, progressive disclosure lets you do the same with content, too. “Does this device have the ability (usually: the space) to display this extra content?”

That’s the approach we took with the navigation. Typically, of course, navigation offers you links to the top sections of the site, and that’s what you get on Entertainment Weekly’s mobile site at narrow views, too. You get the primary sections as well as some currently hot topics, and the core job is done.

For larger screens, though, we wanted to take the opportunity to share the featured stories of the hour. We went beyond the staple section navigation to promote individual pieces. The goal of navigation is to help people find great content, so we decided to use this area to make explicit suggestions. Nice-to-have content enhanced the navigation to make it into a kind of dashboard panel, a mini homepage with splashy promotion of top stories.

On phones (left), the nuts-and-bolts navigation shows only the main channels and selected hot topics. On tablets (right), the extra space affords the opportunity to promote featured articles, too, complete with image touts.


Nifty anchor navigation

We had some fun with other aspects of navigation, too. On the page for “Tonight's Best TV,” we created an app-like interaction for navigating anchor links. The page shows editor’s picks of the best TV shows airing in the next seven days. A fixed navigation bar at the top of the screen lets you hop directly to a specific day; tap a date, and the page scrolls smoothly to that day. So far, so good.

But the navigation is also an indicator of your progress through the week. As you scroll down the screen, the navigation bar moves and highlights to show you the date you’re currently browsing. It’s a small thing, but it feels smart and helpful when you use it. The navigation bar is also swipeable; for small screens that can’t fit all seven days across, you can swipe the navigation bar to browse the dates. It’s a fun little interaction for an important corner of the site.

The page for "Tonight's Best TV" has a fun interactive twist in its screen-topping date navigation.


Photo galleries that are more than photo galleries

As for most entertainment sites, photo galleries are a huge draw at Entertainment Weekly, driving redonkulous levels of traffic. Entertainment Weekly adds a twist to their galleries, though: nearly all of them are also lists:

Movie Tech Breakthroughs: 10 That Broke the Mold
Breaking Bad: We Rank Every Episode
14 Worst Movie Jobs

You get the idea. It’s a perfect viral lovechild of lists and entertainment photos. But crucially, they’re also combined with Entertainment Weekly’s wry and witty commentary. That means the photos don’t just have captions; they sometimes have awesome essay-length missives. We had to make it easy to browse the photos and this potentially very long text and the comments for each photo—all on small screens. There’s a lot going on here, but we managed to wrangle it into a tidy package.

The caption/essay toggles into view over a portion of the photo, so you can still see the photo as you read the text, or dismiss it if you like. Tap the comment button to “flip” the gallery over to reveal comments on the back. If you’re just in it for the photos, tap the center of the photo to toggle all of the gallery controls on and off.

This was a challenging bit of UX to sort out, which likewise meant for challenging code. Jonathan Stark brought it smoothly home.

Three different states of a single photo gallery screen (from the rather irresistible collection "22 Movie/TV Gadgets We Want Now!").


Share share share share

Media companies across the board are seeing more and more so-called “earned traffic.” That is, readers are sharing their content with other readers, so that a growing number of visitors are now coming to the site via Twitter, Facebook, blogs, and so on. Homepage and search-engine traffic has lost ground to this newer social traffic for years. That means that media sites, Entertainment Weekly included, are more invested in ever than encouraging readers to share. No great surprise there.

We originally planned to put static share buttons at the top and bottom of article pages, but the crew at Entertainment Weekly wanted us to push harder. Social sharing would be a key metric for the success of the redesign. We toyed with gluing a social toolbar to screen bottom, but that absorbed too much space on smaller screens. We wanted this sharing button to be convenient without being obnoxious.

Instead, we wound up with a little share “bug” that floats in the right corner of the screen, staying fixed as you scroll. We made the button translucent so that it was a bit less in your face, competing less with the content it’s intended to support. Tapping this Share button triggers an animation that rolls out the share buttons; tap it again to roll it back up. The whole thing is done with CSS animations. It’s cool. You should try it out.

Sharing is one of those functions that almost always serves both reader and publisher. Everyone wins there, and we felt okay about making share functions so omnipresent. Alas, readers typically don’t feel the same way about advertising.

Respectful advertising

Handling ads is always one of the toughest elements of a design project like this one. Ads make the whole enterprise possible, but readers often perceive them as getting in the way of the action. Our responsibility as designers is to give advertisers a good position without trampling the reading experience for users.

When I led the design of People magazine’s mobile website last year, I invented a new ad format called the snap banner. It was a so-called adhesion banner that stuck to the bottom of the page but then snapped into place on the page and scrolled away. The result was an ad that stuck around long enough to make itself known, but which knew enough to leave when it wasn’t wanted.

Since that site launched, Time Inc (parent company of both People and Entertainment Weekly) has adopted the snap banner as a standard format. They changed it up a bit, though, moving the ad to the top of the screen, where it disappears after a certain amount of scroll. We used that format on the homepage for small screens, but combined its interaction with a second ad on the page. When that second ad scrolls into view we disappear the top-of-screen snap banner, so that only a single ad is ever onscreen at any one time.

On larger screens, we show a different ad format entirely, and these scroll normally with the page. With a bigger screen, the ads linger longer, and there’s no need to stick them to the screen for attention. The ad bumps around to different positions on the page according to available width.

In the widest view for landscape tablets, the snap banner is replaced by a square banner slotted at top right.


Cross-platform branding

From a branding perspective, one of the most important “ads” on the page is the “Subscribe to Entertainment Weekly” section at the bottom of every single page of the site leading into the page footer. This section details the premium content available in this week’s paid edition of Entertainment Weekly, which you can get in both print and app versions.

This is the bit of business where we explicitly detail where else you can find Entertainment Weekly content and how it morphs across platforms. From there, the page links to all the company’s accounts on social media. The intended message: Entertainment Weekly is not a magazine, it’s not a website, it’s not an app, and it’s not a Facebook account. It’s all of them at once, an editorial platform that pours content into many different containers.

“We can’t really consider ourselves a magazine company anymore,” incoming Time Inc CEO Joe Ripp recently said. “We’re a media company.” It’s true for everyone now. As platforms proliferate, you have to meet your customers on whatever device or medium they choose. This footer business we cooked into every page of the site is intended to reinforce that message.

A responsive process

That’s also the core principle that animates responsive design: there is no one “true” presentation for your content, no single container. Like many, we’ve seen our design process transform to meet that reality. The process continues to evolve, but we had some great learnings here.

Avoid formal wireframes

We stayed sketchy and informal for as long as possible, emphasizing coarse blocks of content at very high levels of abstraction. This let us move quickly as we planned the broad strokes of the site. Sketches also keep conversation high level, avoiding the all-too-common headaches that emerge when you get into the weeds too early with fine details. Robert did a lot of these big-picture sketches and then gradually gave fine definition the repeating patterns that we found across pages. As soon as we had the system worked out, we moved right into HTML, skipping the formal wireframe altogether.

Work with the patterns, not the pages

Responsive design is about creating systems of content rather than a rigid page design. This system is built of modules that shift and reorder according to what the device can display. Rather than designing in one page, it’s helpful to drive the main design effort down to its component parts. Brad and others have lately been calling this atomic design, where you design from the building blocks and gradually up to the entire page, rather than the reverse. It’s very powerful.

Brad’s pattern lab tool proved to be the ideal way to collect and define these atomic components. Once marked up, the components could be assembled inside pattern lab into templates and, with actual content, final pages. The approach encouraged code reuse, which was not only efficient but promoted uber-consistent UX across the site. And because we anticipated this approach, Brad was able to get started on initial markup well before the IA and visual design was complete. Brad detailed his process for the site here.

Element collages rhyme with these patterns

Even while Robert was working on the early sketches for the site’s architecture, Dan and Scott were already at work on the visual design. They did this with element collages, a kind of style tile on steroids. Element collages are collections of lots of branded design elements that give a sense not only of color and type, but of a variety of constructed UI widgets.

A corner of one of the early element collages for the site.

What this meant was that IA sketches and visual design happened in parallel and eventually merged. Dan and Scott started with impressionistic notions to establish visual direction. As Robert’s sketches simultaneously evolved, the element collages adopted their information and became examples of the finished patterns. Again, these were like exploded web pages, emphasizing page components more than complete design. Just to be sure that they hung together as a page, we assembled a couple of full-page comps, but we didn’t do this for every page. Full-page Photoshop comps still have a useful role, in other words, but not anything close to the key deliverable they once were.

We didn’t create visual comps of every single element, either. Once we had enough designed elements in hand, we could make good guesses in the HTML itself, where we were able to see how things actually played out at different widths. Dan detailed the visual design process for the site here.

We’re getting there

Responsive design is a squishy process. When IA, design, and markup happen in overlapping stages, there are fewer crisp milestones and deliverables. One stage melts into the next, and it takes more discipline than it has in the past to keep the train moving forward. Transitions to new methods and techniques are always a bit bumpy, but the good news is that we’re definitely getting there. Things are settling.

A proliferation of platforms and gadgets has reminded us that the packaging of digital content is naturally ambiguous. Responsive design tries to capture that truth and turn it into an advantage. Slowly but surely, our collective design process is evolving to do the same.

More from the team

The rest of the design crew have also shared their perspectives on the Entertainment Weekly project and its process. Check em out:

The Responsive Mobile Entertainment Weekly Site by Dan Mall
Entertainment Weekly by Brad Frost








Global Moxie is a design agency of one—your humble host, Josh Clark. I take on a handful of design projects every year and, for each one, I assemble bespoke teams purpose-built for each project. Afterward, we disperse into the night until we gather again for new projects. The result is a lightweight organization that nevertheless delivers heavyweight design teams tailored to the problem at hand. ↩




For technical and business reasons, Entertainment Weekly maintains a separate site for desktop and other larger screens. In an ideal world, this wouldn’t be necessary, and Entertainment Weekly would serve all devices the same markup. Indeed, this process began with the assumption that a single responsive design would be best. As all projects should, we began with the question, “Can we do this with a single website?” For a variety of reasons that I won’t elaborate here, the answer was no. As always, it depends. ↩

People rarely swipe beyond the first couple of slides so the effect is that you wind up hiding the very items you mean to feature. The data shows dramatically lower clicks for the “slides” that follow the lead image. Here’s some sample research to back that up:

WeedyGarden: Carousel Interaction Stats
University of York: Are Homepage Carousels Effective?
Do Frontpage Slideshows Increase Conversion Rate?. This one's in Swedish; try Google Translate's attempt at English

The gist of this research is that carousels definitely do help you have a strong visual impact (big image!), but this helps only the first article. This has the unfortunate effect of making the follow-on articles go unexplored. ↩

Luke Wroblewski offers a useful pattern to combat the long scroll: off-canvas multi-device layouts, which slides columns, navigation, or other content elements on and off the page on demand. The More pattern is a close cousin of off-canvas layouts, but simplifies it with this simple toggle approach. ↩

Tags:

advertising,

design,

mobile,

publishing,

responsive,

webdev,

work,

workflow

The Mobile Book

Smashing Magazine published The Mobile Book this week, and wow… it’s a humdinger. It’s full of smart advice from all the people I simultaneously love, fear, and admire in the universe of mobile web: Jeremy Keith, Peter-Paul Koch (PPK), Stephanie Rieger, Trent Walton, Brad Frost, Dave Olson, and Dennis Kardys. With such great company, I was especially honored to contribute the book’s final chapter about designing for touch.

The book is not only smart but beautiful. The dead-tree version is hardcover with stitched binding and, get this, an old-school ribbon bookmark. The thing is just gorgeous. Even if you prefer your books in pixels instead of paper, you still get an elegant interior design featuring the illustrations of Mike Kus.

Much of the book looks at mobile through the lens of the web, but it’s also a useful resource for developers and designers on other platforms. The book is neatly organized into three sections: the mobile landscape, responsive web design, and UX design for mobile. The first and last of these are applicable to any platform, and frankly, the web-specific responsive-design techniques will quickly become matters of basic digital literacy.

This matter of evolving literacy is very much the point of Jeremy’s forward to the book:

This book is an artefact of its time. There will come a time when this
book will no longer be necessary, when designing and developing for
mobile will simply be part and parcel of every Web worker’s lot. But
that time isn’t here just yet. So in the meantime you’ve got the
current state of all things mobile packed together into this single
volume.

I’m flattered to report that the first round of reviewers agree with Jeremy about the book’s stature as a well-rounded and authoritative review of mobile design technique.

Design Shack: “It’s a handbook for web design today. Earlier I mentioned that you should add this book to your shelf, in reality, you’ll probably want to keep it on your desk.”

UX Magazine: “I highly recommend this book to both the blossoming and the experienced UX designer. The various voices of different authors breathe fresh narrative air that carries diverse-and-deep domain knowledge along in a cohesive story about how to harness the chaos of our ever-evolving world into a mobile-UX delight. Consider the lessons in this book a whopping set of New Year resolutions.”

Open Designs: “As somebody who spends a lot of time tinkering and tweaking websites to make them work better, I thought this book was bloody brilliant. There is so much depth and information packed into its 336 pages that I think it will become the book for the mobile Web.”

The table of contents:

Jeremy Keith: Foreword
Peter-Paul Koch: What’s Going on in Mobile?
Stephanie Rieger: The Future of Mobile
Trent Walton: Responsive Design Strategy
Brad Frost: Responsive Design Patterns
Dave Olsen: Optimization for Mobile
Dennis Kardys: Hands-On Design for Mobile
Josh Clark: Designing for Touch

I’m admittedly biased, but my advice is to run out and buy The Mobile Book immediately. It belongs on every webslinger’s bookshelf and/or ebook. Buy the book, or download a free chapter, “Responsive Design Strategy” by Trent Walton (PDF, 8MB). Enjoy.

Tags:

books,

design,

josh,

mobile,

responsive,

writing