Josh Clark's Blog, page 28

Future Friendly at Mobilewood

Something magic happens
when you let clever people do a slow simmer together. In an era of one-liner tweets and hasty blog posts, it's all too rare to share extended face-to-face time stewing over tough problems.

Last week, I was privileged to do exactly that, secluded with nine of the smartest people I know to think, tussle, and talk about the challenges we face at the frontiers of mobile and web. We settled into a redonkulous house in the Tennessee woods for three days, and we wore space helmets. We called this hootenanny "Mobilewood."

Photo: Lyza Danger Gardner

Selected #mobilewood tweets give some flavor of the Mobilewood vibe, but here's a more orderly look at what we did and what we produced.

We worked

Everyone brought passion and intensity to tackling this giddy era of connected devices. We talked about the onslaught of device platforms. We talked about the opportunities and shortfalls of the web in addressing this avalanche. We debated just about every topic that touches mobile/portable content: technology, content strategy, publishing workflow, art direction, interaction design, user behavior, data structure, data transport, and the standards process.

My brain buzzed, and my little geek heart sang.

Photo: Lyza Danger Gardner

We tried hard to look outside immediate problems to name the broad challenges of the next decade and instead struggle toward high-level approaches that might guide us through this period of exciting chaos. What we found along the way:

Wow, designing for a multidevice world is hard.
It's only going to get harder.
There are no black-and-white answers.
An era of rapid innovation is, by definition, an era of surprises. None of us pretend to know the future.
That means it's not possible to be future proof in our strategies for technology, design, and content.
If we can't be future proof, we can at least be future friendly .

Being future friendly, we agreed, means thinking beyond any single platform, any single app, any single website so that we can focus on building services for the long haul.

Photo: Jeremy Keith


We wrote it all down

Please visit the brand new Future Friendly website, where you'll find our statement of truths, an exploratory outline of future-friendly thinking, and some resources to help all of us stake out a friendly future. Go get it:

We're the first to admit that a) we don't have all the answers, and b) the content at Future Friendly is more broadly directional than practically prescriptive. That means there's much more work to be done. Over the next few weeks, you can expect to see more commentary from the Mobilewood group (including yours truly) about these big-picture ideas. Those ideas will orbit the future-friendly themes staked out at the website, but will also tackle practical techniques that you can put to work today.

To keep up with all of this, follow the future-friendly hashtag #ffly at Twitter as well as the blogs and twitter accounts of the Mobilewood group:

Brad Frost (Twitter: @brad_frost)
Bryan Rieger (Twitter: @bryanrieger)
Jason Grigsby (Twitter: @grigs)
Jeremy Keith (Twitter: @adactio)
Luke Wroblewski (Twitter: @lukew)
Lyza Danger Gardner (Twitter: @lyzadanger)
Scott Jehl (Twitter: @scottjehl)
Scott Jenson (Twitter: @scottjenson)
Stephanie Rieger (Twitter: @stephanierieger)

You are welcome (encouraged!) to contribute your ideas, too. More on that in a bit. First, some more about what else we did at Mobilewood.

We played

Sure, sure, work is its own reward. But it turns out there's a ton to be said for camp fires, hot tubs, hikes, cooking, swimming, guitar-strumming, and immoderate quenching of thirst. Friends, we had a huge amount of fun at Mobilewood.

Photo: Luke Wroblewski

A playful spirit infused the whole thing. We laughed about night donkeys, turDOMkens, harpsichordists, and cinnamon-candy whiskey. Brad's funky ukelele bass lines mingled in an unholy alliance with Jeremy's Irish mandolin. After I found a cache of toys and silly hats in an upstairs closet, we gave them an immediate workout. A battered toy space helmet was especially popular, and it became the Mobilewood totem—and eventually the future-friendly logo, too (props to Bryan Rieger for that one).

Photo: Jeremy Keith









Photo: Jeremy Keith









Photo: Lyza Danger Gardner

We spent hours every day in deep conversation, but we punctuated those sessions with frankly zany activity. There is something heady about being with people who can switch so effortlessly from smart to silly. Future and friendly indeed.

We bonded

When I arrived at Mobilewood, I brought a metric ton of respect for everyone else at the event. I'd had the good fortune to meet and mingle with many of them before. Others I knew only by reputation or through the occasional twitter or email exchange. Across the board, though, I thought of this group as serious, smart, and generally intimidating.

When I left, I took with me genuine affection and wonder for all of them. I was surprised by how personally affected I was by this gathering. It was an emotional thing when the event drew to a close. The mix of work and play—of conversations both professional and personal—was powerful. Lyza captured the spirit in her kind string of farewell tweets.

The bonding was important to our work. Throughout Mobilewood, we inevitably disagreed, floated dopey ideas, shared unformed thoughts. We could do all those things because we understood that we were among friends. Everyone was generous with their ideas and patient with those of others. We were in it together. It was remarkable.

Photo: Lyza Danger Gardner

We became a tight group, but not a closed clique. This is not an exclusive club. On the contrary, we want you to join.

You're invited

I worry sometimes about how gatherings like this are perceived. Words like "secret" and "elite" were used alongside the #mobilewood hashtag by folks who weren't there. Perhaps that's to be expected.

But Mobilewood was neither more nor less than a group of likeminded people gathered to share experiences and ideas. The kind of magic we wanted to spark for ourselves and for one another is possible only in a small group. The work, play, and bonding I describe above can't click in when you go beyond ten. Rest assured: if there had only been room, you would've been invited to the hot tub, too.

Our goal is to share what came out of Mobilewood as a base of conversation. That's what the Future Friendly site is all about. By sharing how this small group aligned itself last week, our hope is that others will find similar alignment. But we're also aware that this early effort may need some course correction.

Talk to us, share with us, teach us

Use the future-friendly hashtag #ffly to share your observations and ideas. Tell us about you've begun to implement some of these ideas. Explain where you think our future-friendly themes need refinement. Share the big-picture ideas and nitty-gritty practices that you think need more attention.

This stuff is hard, and we need to do it together. This is a time to be generous, and it's a time for conversation. Let's get after it.

Tags:

community,

conference,

ffly,

manifesto,

mobile,

mobilewood

For Your Consideration: "Teaching Touch" at SXSW

It's that time of year again. The silly season of SXSW pitches is upon us, this time with over 3200 proposals for around 300 slots, and as per usual I'm throwing my lot in with the rest. If you think the topic would be useful, please consider giving a thumbs up to Teaching Touch: Tapworthy Touchscreen Design. (The deadline is noon Central Time on Friday, September 2.)

Here's the skinny:

Discover the rules of thumb for finger-friendly design.
Touch gestures are sweeping away buttons, menus and
windows from mobile devices—and even from the next
version of Windows. Find out why those familiar desktop
widgets are weak replacements for manipulating content
directly, and learn to craft touchscreen interfaces
that effortlessly teach users new gesture vocabularies.

The challenge: gestures are invisible, without the
visual cues offered by buttons and menus. As your touchscreen
app sheds buttons, how do people figure out how to
use the damn thing? Learn to lead your audience by
the hand (and fingers) with practical techniques that
make invisible gestures obvious.

Designer Josh Clark
(author of O'Reilly books "Tapworthy" and
"Best iPhone Apps") mines a variety of surprising
sources for interface inspiration and design patterns.
Along the way, discover the subtle power of animation,
why you should be playing lots more video games, and
why a toddler is your best beta tester.

Questions Answered


How should UI layouts evolve to accommodate the ergonomics
of fingers and thumbs?
Why are buttons a hack? Why aren't they as effective
as more direct touch gestures?
How can users understand how to use apps that have
no labeled menus or buttons?
What's the proper role of skeuomorphic design (realistic
3D metaphors) in teaching touch?
How can animation provide contextual help to teach
gestures effortlessly? How does game design point the
way here?

Vote me up, and thanks!

Tags:

conference,

design,

josh,

sxsw,

touch

Page One: Banish Multi-Page Articles

I despise multi-page articles with the heat of a million suns. The Page One extension for Safari and Chrome fixes them, automatically displaying the single-page version of articles for several popular news sites. Install the extension now:

Install the Page One extension for Safari.









Install the Page One extension for Chrome.


Why This Is Awesome

You know the drill: instead of letting you read articles all at once, too many websites chunk them up into multiple pages, interrupting the flow for the cynical purpose of inflating page views for advertisers. That's not only annoying and time consuming, but it also screws up "read it later" services like the excellent Instapaper. Instead of saving the entire article for later reading, you get only the first page—a big drag if you're using the Instapaper app offline.

Web publishers know this is annoying and so they frequently throw us a bone by offering a single-page view of articles. That's what they should do in the first place, and the Page One extension makes it so. I built the creation for myself for sites I use frequently and so, for the moment, it gives you single-page articles for only these sites:

The New York Times
The New Yorker
The Atlantic
Slate
Wired
Vanity Fair
The New York Observer
Details
Gourmet

Let me know if there are other sites you'd like to see supported, and I'll be happy to take a look. Meantime, happy uninterrupted reading!

Tags:

browser,

chrome,

instapaper,

pageone,

readability,

safari

Iconathon!

Designers, on your marks! Pixel slingers, grab your javelins! Icon acrobats, get limber! The Iconathon is here, and it's an AWESOME concept.

The Iconathon is a collaboration between the icon geniuses of The Noun Project and the civic-minded geeks at Code for America. The gist: gather a slew of designers together in cities around the nation for a full day of brainstorming and designing the icons needed in civic signage. The result will be a set of public-domain symbols that can be used by public and private organizations to communicate visual concepts to urban denizens. You know the kind:

This means that you, me, anybody can be part of creating the next generation of everybody-knows-em signs and symbols. Looking for a bathroom, for parking, for an airport? Look for YOUR icon. How cool is that.

Here's the process:

Each participating city will have a topic and a set
of about 30-50 civic concepts to choose from to design.
For example, participants can modernize icons such
as 'family' to reflect the makeup of modern families,
create icons for new civic services like 311 (symbols
for 'potholes' and 'graffitti') and icons for community
spaces ('local', 'community meeting,' 'community news.')

Iconathon events will include design charrettes, design workshops
and networking opportunities for local designers, urban
planners, city staffers and developers who are passionate
about civic design. Participants will sketch ideas
and concepts during the events, and refine them from
their home or design studios while continuing the collaboration
process through social media. Each group working on
a symbol concept may also be matched with a respected
designer to get feedback on their designs. All designs
will be submitted to The Noun Project, which will curate
them based on technical and stylistic guidelines. A
series of blog posts will follow events in each city.

The iconathons haven't even gotten rolling yet, but a few designers are starting to limber up with some early drafts:

...including, well why not, an abandoned car icon:

If you live in or near one of the Iconathon cities (San Francisco, New York, Los Angeles, Boston, or Chicago), give it a spin—even if you can't draw. And hey, the Iconathon crew is also still looking for help: graphic designers to lead sessions, sponsors whose products support the creative industry (looking at you Adobe and Apple), and sponsors for food, drinks, furniture rentals, art supplies, etc. If you can help, drop 'em a line at iconathon@codeforamerica.org or @Iconathon.

Me, I plan to attend the Iconathon on September 10 in New York City, where the icon theme will be transportation. It's the day before the tenth anniversary of an awful day in the city's history, and I can't think of a better way to mark that occasion than to offer my humble skills to a city I love.

What? You don't know about The Noun Project? Holy cats, waste no time and get over there, pronto. It's a great, free resource for icons and pictograms, which happen to be especially ideal for tab-bar icons in iOS apps. You're welcome.

Tags:

design,

icons,

nyc

Digital Life: Today & Tomorrow

This fun and wide-ranging infoviz video provides a nifty snapshot of how quickly our digital lives are changing, with some predictions for what this all might look like in 2015. (Remember when 2015 seemed like an impossibly distant year?)

The video was researched by Madrid consulting firm Mitsue Venture and animated by Neo Labels for their project Digital Life: Today & Tomorrow.

Do watch the whole thing, but here are a few appetizer stats:

2010 numbers: 600 million paid tv subscribers, compared to 5 billion mobile accounts.

We spend 16% of our online time on social-networking sites. Only 6.6% on email.

Email use is falling for people under 35, but going up for people over 35.

A multi-device world. We read news on different devices depending on time of day. Context matters.

By 2015, the digital traffic consumed by just 20 households will match the traffic of the entire 1995 internet.

Tags:

stats,

video

Belly Flop: Retailers Dive into Mobile Ecommerce

Photo by blmiers2.

"Who wants to spend their time pinching screens and mistyping links?" asks Forrester's Sucharita Mulpuru, quoted in a barnburner of a piece in today's New York Times about the sorry state of mobile ecommerce sites—or more precisely: the overall lack of mobile ecommerce sites. It's a missed opportunity, and even those who are trying to grasp it are groping with backwards ideas about delivering lite versions of the "real" website.

Many retailers seem under the assumption that few shoppers actually want to do said shopping on tiny screens. As of mid-2010, just 12 percent of the top 500 United States online retailers had mobile websites. Only seven percent had apps.

Whether those low numbers are because of disinterest or paralysis (mobile design is hard, folks), it's certainly a missed opportunity as more and more people use their phones as a browsing device on equal footing with—or even in preference to—traditional PCs. The Times piece refers to a juicy research report from Tealeaf Technology which shows not only broad interest in mobile shopping, but also indicates its high stakes. (Slideshow of Tealeaf's findings) A few nuggets:

High mobile expectations. 80 percent expect the mobile experience to be at least as good as in-store shopping. 85 percent expect it to be at least as good as using a traditional PC.
Risk of losing customers. 63 percent of online adults said they would be less likely to buy from the same company via other purchase channels if they ran into trouble with a mobile transaction.
Mounting frustration. Mobile users say they find mobile transaction problems more frustrating than going to the DMV or being stuck in traffic. 23 percent have cursed at their phones. 11 percent have screamed at their phones. 4 percent have thrown their mobile devices (presumably also while cursing and screaming).

Clear lesson: retailers should build great mobile experiences. But it seems there's some confusion about exactly how to do it. Too many assume that the right thing to do is deliver "website lite" to mobile devices. Granted, mobile requires focused, simple interfaces. Those interfaces should prioritize content and features that rhyme with common mobile use cases and shopping habits. But that doesn't mean that retailers should willy-nilly remove features or content.

I say this all the time, but it's worth repeating as many times as it takes: our job as designers is not to remove complexity; our job is to make complexity uncomplicated. Customers don't want dumbed-down apps; they want uncomplicated apps, and that's a big difference. It's a mistake to think that mobile means stripping out features until the app or website is toothless.

So I was a little alarmed to see the Times article holding up Alibris' approach as a good practice:

"When you transform a giant PC screen onto a little device, you have to decide what not to bring along," said Jeanie Bunker, general manager of Alibris Retail. "So we basically stripped out all the things we thought were not relevant to the mobile user."

For instance, it removed the rare-books tab, assuming that someone spending hundreds on a book would want to do extensive research.

Eek. No. Just because a screen is small doesn't mean that someone doesn't want to make a serious purchase (3 or 4 Ferraris are sold every month on eBay's mobile apps). This is the thinking that so often forces frustrated users to dig for the "full desktop version" link on mobile websites. Mobile users want full content. Refer to that Tealeaf stat above: 85 percent expect the mobile experience to be as good or better than a laptop/desktop experience.

Mobile apps and sites should strive to match desktop sites feature for feature, and in many cases even provide more features. In particular, mobile apps should use sensors like the camera (scanning, product recognition) or microphone (speech to text) to speed data entry and searching. Instead of thinking, "how can we do less with mobile," the better question is "how can we do more?"

This is hard. Organizing and managing complex information and tasks into small screens takes careful planning and discipline. And yes, truly worthless features should be thrown out (as they should on the desktop). But don't throw out the good stuff. Alibris, for example, is essentially hiding its entire rare-book collection from mobile users, for seemingly arbitrary reasons.

Amazon's mobile apps and website, meanwhile, give essentially full access to the desktop features, but Amazon also carefully creates interfaces to make searching as effortless as possible. From the Times article:

Many retailers point to Amazon's apps as worthy models. Unlike most retailers, Amazon started developing mobile Web sites in 2006, before the first iPhone was available. To minimize typing, Amazon offers bar code scanning, voice search and automatic fill-in on typed searches. Type "Har," for instance, and it displays Harry Potter books.

Another benefit of Amazon's app: most of its customers are existing online customers, and once they sign on to the mobile app, they don't need to re-enter billing and shipping information.

The point, in other words, is not to simplify mobile experiences by stripping out content but rather by streamlining its presentation and improving the search and input process. The Times also notes another good example of this in Hipmunk:

Hipmunk, a site for searching flights and hotels, made sure its iPhone app took into account a phone's limitations. Search results on the phone are displayed in short lists for readability, and the app magnifies those results, rather than loading a new page, which can take longer

Hipmunk also figured that the best way to deal with the biggest nuisance in mobile commerce — entering a credit card number to check out — was to avoid the mobile part. So Hipmunk offers two choices that allow buyers to pay later on a computer, instead of on the phone; it will e-mail a link, or generate a secret password to enter on the computer.

All of this takes creativity and fresh thinking: what novel methods can we use to make it easier to find, scan, and digest content on mobile devices? Hint: the answer is not "kill the content."

The potential gains are substantial. A measly two percent of retail sales happen on mobile now, but success stories like eBay's mobile unit show it doesn't have to be that way. Over 20 percent of eBay's revenues come from mobile sales, with a purchase made every second through one of their mobile apps. Those little purchases add up to the tune of $2 billion for eBay.

And friends, it's design that makes the difference. Respect your mobile users as full-fledged citizens. Don't patronize them with dumbed-down websites and apps. Use thoughtful design to make browsing easier, and put device sensors to work to make searching faster. It's an old saw that the best camera is the one that's with you. It's just as true of computers: the best web browser—for ecommerce or otherwise—is the one you've got with you. And for many, that's the phone. Don't underestimate the potential and seriousness of the mobile web; it's not desktop lite.

Tags:

business,

marketing,

mobile,

stats

Over Half the People on Earth Have a Mobile Phone

Tomi Ahonen shared his snapshot of global mobile stats this week and cast his eye toward the end of 2011, too. The whole thing is worth a look, but here are a few eye-popping nuggets to get you started:

There are 7 billion people on earth, but already an astounding 5.3 billion mobile phone accounts (around 3.9 billion unique mobile phone owners, or 55.7% population, with about 4.6 billion individual phones).

Only 17% of phones are smartphones, but even the feature phones have a pretty impressive set of basic functionality: 96% of all phones have at least a basic browser (WAP or HTML); 94% have color screen; 77% have a camera. (This means that more than 3.5 billion cameraphones are in use; literally half the world's population has a camera in their pocket.)

71% of all phones have a HTML web browser (not just WAP), or 3.3 billion. That's almost three times the number of internet-connected PCs.

1.8 billion Nokia phones are in the wild, which means 27% of the world's population has a Nokia phone in their pocket.

SMS text use is approaching global literacy rates. It literally can't get bigger. 85% of Europe mobile subscribers are active SMS users. In China it's 90%. USA is past 74%. By end of year, we'll see 4.5 billion active SMS users, "the most widely used data application on the planet." Domino's Pizza and Coca Cola are aggressively using the platform for marketing.

More: Communities Dominate Brands: Some Milestones We Will See This Year in Mobile Statistics

Tags:

mobile,

stats

Buttons Are a Hack

We've only just scratched the surface of touchscreen interface design. Done right, touch allows us to create the illusion of working directly with content, instead of through the abstract metaphors of menus, buttons, tabs, and assorted "administrative debris" that we've adopted over the last 30 years of desktop interfaces.

This is a Very Big Deal. Manipulating content through direct physical action rhymes with how our brains naturally perceive the world and make for easy, obvious use. Just watch a toddler use an iPad, and you'll see how quickly they latch onto its familiar, direct interactions. Friends, I'm not kidding: we should design with toddlers in mind. They get this stuff better than we do.

As designers, we have some deprogramming to do. We've soaked so long in the necessary metaphor hacks of the desktop, that it's hard to imagine interfaces that are free of buttons and menus. There's still a role for those time-tested gizmos, and I'm not suggesting that we throw them out entirely. But as I wrote recently, here's the thing:

Buttons are a hack. As in the real world, they're often necessary, but they work at a distance—secondary tools to work on primary objects. A light switch here turns on a lightbulb there. These indirect interactions must be learned; they're not contextually obvious. The revolution that touchscreen devices are working is that they allow us, more and more, to use primary content as a control, to create the illusion of direct interaction.

I don't mean to suggest that we throw out all of our familiar buttons entirely. Light switches shall remain necessary, after all, and so shall buttons, especially where it's necessary to trigger abstract actions ("share via Twitter," for example). But it's important to recognize those devices for what they are: necessary hacks for moments when direct interaction isn't possible. Touchscreen interfaces allow that direct interaction in many more contexts. As new solutions arise, we should be open to putting our time-tested workarounds aside. When designing an interaction for touch, always ask: do I really need another button or control for this?

This is a topic that constantly occupies me. And I plan to write and talk about it a lot, so brace yourself. I kicked off my public campaign against buttons at New Zealand's amazing Webstock conference in February. Here's the video: Buttons Are a Hack: The New Rules of Designing for Touch. I hope you'll take a peek.

(Also, man, my talk's not bad, but there were some seriously high-test talks at Webstock. Waste no time: watch the rest of the conference videos immediately.)

Tags:

conference,

design,

gestures,

ipad,

josh,

touch,

webstock

FOWD Throws in the Towel

My dresser is overflowing with tshirts. Designer tshirts. Road race tshirts. Promotional tshirts. And oh so many conference tshirts. I dig 'em, but the hard tshirt truth is: I don't really need any more. (I could use some more socks, though, but that's another post.)

So I was totally charmed and won over when I learned that Future of Web Design made tea towels instead of tshirts for conference attendees:

Mike Kus, has put together these awesome "Class of
2011″ tea towels! They feature our Main Stage line
up in classic old school tea towel style (and we think
they'd look as nice in a frame as they would hanging
by your kitchen sink!)

Leveling with you: I couldn't stop giggling when I saw my ugly mug on it. (It also has the far more alluring likenesses of fellow speakers Ethan Marcotte, Sarah Parmenter, Jeff Veen, Paul Boag, Dan Rubin, Elliot Jay Stocks, Aral Balkan, Molly Holzschlag, and many more of my internet heroes.) I mean come on: this thing is bound to be a hugely sought-after collectible, and I can't wait to hang it alongside my velvet Elvis and Franklin Mint plate collection. Covet it for yourself? Think Vitamin is giving away a few of them.

And hey, speaking of FOWD, please do join us in London May 16-18. My talk, "Buttons Are a Hack: the New Rules of Designing for Touch," will explain how to make the most of new touchscreen interactions:

Fingers and thumbs turn design conventions on their head. Touchscreen interfaces create ergonomic, contextual, and even emotional demands that are unfamiliar to desktop designers. Find out why our beloved desktop windows, buttons, and widgets are weak replacements for manipulating content directly, and learn practical principles for designing mobile interfaces that are both more fun and more intuitive. Along the way, discover why buttons are a hack, how to develop your gesture vocabulary, and why toys and toddlers provide eye-opening lessons in this new style of design.

Can't wait. Also: tea towel!

Tags:

conference,

design,

fowd,

illustration,

josh

Justin Williams: A Tablet Isn't a Large Phone

It's all too easy to lump tablets in with phones as "mobile devices." There are certainly similarities. The iPad and Android tablets run the same operating systems as their smaller cousins, and some touchscreen principles work the same across devices. But tablets have a different form, ergonomics, and context than phones. So designing for tablet takes a fresh perspective and, almost always, a whole new design concept.

As usual, Justin Williams puts it best in an economy of words:

The best iPad apps are not those that just stretch
their iPhone table views out to take advantage of the
larger screen. They are apps like Twitter,
Reeder and
Flipboard
that invented new paradigms and changed the
way we used the device. They are the apps that get
lost under our fingers because they work intuitively
with multitouch gestures.

By similar token, the best Honeycomb apps are not going
to be those that just stretch out a ListView control
to adapt to the screen size whether it be 4" or 9".
Tablets offer us an opportunity to shake up how we
have interacted with computers in the past thirty years.
If all Android subscribed to was to make it easy to
port a product designed for a phone to a tablet, then
it is a waste for developers and a shame for users
who will embrace the platform. The Xoom is still in
its infancy, so there is plenty of time for Android
developers to kick the tires and see what the tablets
can offer.

As I'm fond of saying: a tablet is like a phone as a swimming pool is like a bathtub. Similar on the surface, but intended for entirely different uses. The design has to reflect that.

Tags:

android,

ipad