There’s something more substantive going on here than just detailed visual design. The birdhouse and quill raise those standard metaphors to a level that takes into account the ethos of the product itself. They’re right in what I think of as the delight layer of UX. It’s the stuff that has little to no effect on utility, but enriches the app in a way that wouldn’t quite work with any other product.

In other words, this layer doesn’t necessarily make the product any easier to use – but it contains cues, markers and behaviors that are almost intangible, yet endow the product with unique experiential qualities.

I’ll leave the rest of the app for others to review/criticize/praise, but in my mind this is a brilliant, nontrivial touch.

The venue, located in Sydney’s beautiful Darling Harbour, was perfect for the event. Spacious, elegant, and near the heart of the city, the Sydney Convention and Exhibition Centre offered every amenity a presenter and attendee could ask for.

The audience was lively, engaged, and eager to absorb what every presenter had to offer. It was hard not to feel the social energy.

Rahul Sen gave an amazing talk on what he called the Interaction Design Bauhaus. Rahul drew several insightful comparisons to the early 20th century Bauhaus movement and present day interaction design. Our presentations had some overlapping themes which we briefly discussed beforehand. If my talk focused more on interaction design at a micro level, Rahul’s macro perspective turned out to be a brilliant compliment.

Christopher Giffard‘s talk on captioning and timed metadata had me very excited about what’s emerging with HTML5 video. I can envision all kinds of ways to use the techniques and formats he presented.

Stubbornella is someone to follow to keep current on emerging CSS techniques and best practices. Her talk, CSS Power Tools, was dense with valuable information.

The Lanyrd Story was a honest and delightful account of how Natalie Downe’s and Simon Willison’s Y Combinator backed idea became reality, all starting their honeymoon in Africa.

Big thanks to John Allsopp and Maxine Sherrin for a wonderful job in organizing a world class event.

What? How would you know what I am or am not?

I don’t for sure. But give me a chance to back it up. In order to make such a claim I need to establish what I mean by the term user experience. To do that, let’s roll back to 1995. Gangsta’s Paradise by Coolio is the number one hit song and Don Norman publishes a SIGCHI proceedings paper, in which he writes…

In this organizational overview we cover some of the critical aspects of human interface research and application at Apple or, as we prefer to call it, the “User Experience.”

And there it appears (emphasis by me). The first occurence, it seems, of that compound noun ‘user experience.’ Norman coined the term to encompass a range of elements from a systems perspective.

He explained the term further in an email to Peter Merholz a few years later, stating “I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose it’s meaning.”

It’s in this broad sense, one that reaches across all aspects of the human-product relationship, that ‘user experience’ entered our vocabulary.

As Marc Hassenzahl reminds us, if a product’s purpose and function is the ‘what’ then the experience created through our relationship with it is the ‘how’ and ‘why’. We’re actually quite good at mastering the ‘what’ and to a large degree the ‘how’ of product design. We can invent things that help us accomplish tasks and solve problems that we once only dreamed about. But when we talk of experience, the ‘what’ and ‘how’ of design are the means, not the end according to Norman. Ultimately, product experiences emerge in the form of narratives that describe how they enhance our lives. And just like traditional stories, we tell them to others.

What does ‘user experience’ mean today?

UX itself still retains its original meaning in some circles, but has been used more and more frequently as a surrogate for more specific domains such as interaction design, visual design, or usability. Some professionals who’ve been perfectly satisfied calling themselves web|product|interaction|app|etc designers (or just designers) now feel an urge to adopt this more loftier sounding ‘user experience’ prefix. Perhaps it’s seen as something one graduates into if they’ve been designing long enough. Or maybe it comes from a fear of being perceived as lagging behind forward edge thinking in their industry. Whatever the motivation, it’s hard to argue that the term hasn’t become diluted among a broad range of practitioners.

Peter Merholz interviewed Norman a decade after their initial correspondence in which Don reflects once again on the term he helped popularize:

Yes, user experience, human centered design, usability; all those things, even affordances. They just sort of entered the vocabulary and no longer have any special meaning. People use them often without having any idea why, what the word means, its origin, history, or what it’s about.

Can you sense a little disappointment there? I think it comes from a growing disregard for the systems nature of product design. What’s taken hold is this notion that because a user’s experience with a product is influenced by that product’s design, the experience as a whole can therefore be designed.

This is false. What is actually being designed is a support system to facilitate the formation of user experiences.

Design as a support system

In a comment on Marc Hassenzahl’s thoughts on UX, Norman explains where experiences ultimately come into being:

To use another design term: we can design in the affordances of experiences, but in the end it is up to the people who use our products to have the experiences.

Put another way, we can use what we know about our own brains to create a framework that guides users toward having the experiences we’d like them to have, but it’s up to them to actualize them. We have full control over things like objectives, features, interaction design (i.e. one can make a user complete a process in a certain way), information structure, UI design, visual design, and written language. But even if you control all of those things yourself, you still can’t say that the system will result in a predestined experience.

The products we create are systems that support positive (we hope) user experiences. You could think of the things we design as experience facilitators or experience enablers.

Why I’m not a UX Designer

Design implies control. Experiences resulting from things we design and saying we design those experiences are not at all the same.

I don’t call myself a UX Designer for one simple reason: I don’t believe experiences can be designed. At least not outside the realm of science fiction or without knowledge about ourselves that we have yet to discover. I view User Experience as a field of study with a range of disciplines within it, not something we author (particularly not by a single designer). Products are designed. Experiences are their resultants.

Many will disagree. But for me it seems presumptuous and a bit hubristic to view it any other way.

What does UX design mean to you?

In keeping with most mobile metrics, mobile display advertising in the U.S. has over doubled in the last 24 months. Again, these are ads at fixed sizes, and there are many of them to suit various mobile screen dimensions and densities.

These can be nightmarish conditions for responsive design.

So here’s a thought: Why not experiment with ads that are themselves responsive? They could be packaged up with their own media queries and progressively dependent assets and served to a wide range of devices.

Someone out there should try it. Just sayin.

• Smartphone penetration is greater among the affluent and under 45 years old.
• One-third of cell owners are smartphone owners.
• 68% of smartphone owners access the Internet and/or email on a daily basis.

But some have gone further and are saying “25 percent prefer smartphones over PCs for internet access.”

Whoa, what? One of four of us prefer a smartphone for our Internet needs? That’s a significant finding. But there’s only one problem with it: We don’t know that.

There’s no way one can make the claim that they prefer smartphone access, and reporting it that way is speculative at best. Here’s the survey’s question.

Overall, when you use the Internet, do you do that mostly using your cell phone or mostly using some other device like a desktop, laptop or tablet computer?

Twenty-five percent said they used their phone. What the survey didn’t go into was the conditions surrounding that access. First, of that 25 percent, 16 percent didn’t even have an alternative option. This suggests that part of the 25 was due to necessity. Second, what qualifies as “using the Internet”? Is it checking my Twitter feed and checking in on Foursquare? Or is it doing things like playing fantasy football or looking for a new car? Third, what about other contextual factors? Are they traveling frequently? Maybe they have an hour train commute every day? What kind of content are they engaging with? Is their home internet access opressively slow? (My parents’ internet connection clocks at a dawdling 0.17 Mbps. So on visits I turn to my iPhone, which is faster by multiples. But that doesn’t mean I prefer it if all things were equal. There’s so much web content I’d simply rather consume on a laptop.) There’s plenty of things people might “normally” do for a wide range of reasons, but not necessarily because they prefer to.

We know mobile usage has exploded, and there’s plenty of ink about that. But we shouldn’t report things that we don’t really know to be true.

This topic of responsive web design keeps coming up, most recently with conversations I had in Seattle with Jason Grigsby last month, a full year after Ethan Marcotte coined the term in his essay for A List Apart. I had meant to make this site responsive, but always manufactured an excuse for not doing so. Now the responsive design philosophy has a book of its own. This, I decided, was my cue to stop putting off the task.

For those unfamiliar, here’s gist of responsive web design: Serve the same document to all client browsers, then use CSS media queries to adjust the layout for any screen size. There are three components to RWD.

• Fluid, grid based layout
• Flexible images and media
• CSS media queries

As I read Ethan’s book, I was struck by a bit of irony. I bought the ebook version and was reading it on three devices, mostly with the Kindle app for Mac — which itself is responsive by nature. The text and images accommodated any size I set the viewport at. It even adjusted the layout as I narrowed or widened the page width. This is the real essence of RWD, and Ethan does a masterful job of guiding you through how to bring this type of responsiveness to the web.

A fundamental shift

Jeff Veen calls RWD a “fundamental shift in how we’ll build web sites for the decade to come.” Mark Boulton says RWD points us to “a new web” and even equates it with watershed moments like WIRED’s adoption of CSS back in 2002. These are pretty big claims.

Mark is right about WIRED’s redesign. It was a watershed moment, and not because it was converting to standards based XHTML/CSS. Designers and early adopters were already doing this. It was WIRED’s 25 million page views per month that made their conversion a significant event. There’s nothing equivalent to this right now for RWD. The responsive sites I see out in the wild today are blogs, personal sites, portfolios, design studios, conferences, coffee shops, events, etc. These types of sites are where the bellwethers are. They are leading the way with RWD, just as they did with standards based CSS designs ten years ago. But until RWD gains real ground outside of its comfortable zone, is it really a fundamental shift?

Granted, it is very early, but I think there’s a couple other reasons why we haven’t yet seen a highly trafficked, content heavy site adopt a responsive design: Opposition to workflow and content/technical challenges.

Workflow

The RWD workflow Ethan writes about could work with small teams with few decision makers. But when confronted with a room full of stakeholders, competing interests, influencers and egos? That’s a challenge for any design process, but specifically daunting for RWD.

Even though Ethan’s examples in the book start with desktop designs and works towards mobile, he embraces a mobile first strategy. From Chapter 5…

…designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus.”

Focus is a good thing of course, and Ethan says a progressively enhanced experience, starting with mobile on up, jives with RWD. Or the reverse can be done — starting with a desktop design and going the other way (as is done in the book). “Start with what you know,” says Marcott.

Ethan then suggests a much more collaborative design process that involves the development team. Have you tried telling key stakeholder “well we’re not really sure how it’s going to look until we have another meeting with the developers. And based on that, we’ll change some stuff around, and then repeat”? I haven’t. I’m not rejecting his approach, but I’m left wondering how he sells it.

Ethan also challenges how we think about design for the desktop experience…

We agreed that [mobile] was the most important set of features and content for our customers and business — why should that change with more screen space?

A valid question to which I have one possible answer: Because it collides against business goals — and business goals win almost every time.

RWD vs. The Establishment

Generally speaking, responsive sites today aren’t encumbered with the same business priorities as a big site like, say, ESPN’s. The central barrier to a responsive ESPN.com would stem from the fact that it doesn’t necessarily exist only to provide you with clear information in an efficient manner. Its M.O. is to keep you there as long as possible and create ever increasing value for its advertisers. (This is not unlike traditional news media. Newspapers aren’t in the business of reporting the news. They’re in the business of selling newspapers.) It does this by surrounding you with a dense urban landscape of content with distractions and shiny things around every corner. This is why a lot of content sites, like newspapers, are designed like shopping malls with trinkets and distractions everywhere you look.

A responsive ESPN.com would have to be re-imagined with mobile-influenced thinking about how its content is going to live on the desktop form factor — and at the same time increase revenue (redesigns aren’t done for the fun of it) and keep stakeholders and users happy. Like WIRED, ESPN was pioneering in adopting new methods and technologies in the past. But RWD is a wholly different animal.

One document to rule them all

With a single document sent to all devices, RWD’s philosophy is centered around client side magic with no server side intelligence. Two approaches can then be taken.

1. Kill your darlings
2. Progressively enhance

The first approach involves dropping content and/or features as the form factor tightens — things that either aren’t practical for whatever reason, or don’t meet the criteria for what was agreed as “the most important set of features and content.” Downside: Terribly inefficient. City Crawlers Berlin kills that big image carousel at the top by using display:none, serving 1.8 MB of invisible images to mobile users. Crazy. A Different Design does the same thing with their content. This is easy to implement, but ultimately not a solution. Many other responsive sites display full res images to the desktop, only to squeeze them down on the client side when displayed on mobile.

Progressive enhancement as a concept has been around far longer than RWD, but has re-entered the conversation here. Using this method, the document would contain those agreed-upon “focused” features for mobile devices with more robust and ancillary features layered over the top as screen dimensions increase. Downside: Lots of moving parts, hard to maintain, relies on Javascript, and could compromise SEO.

Both approaches leave me scratching my head a bit. How would big, complex, content-rich sites like ESPN.com handle this problem?

All eyes on the Boston Globe

All the issues above could be addressed, at least in part, by the Boston Globe. Filament Group and Upstatement worked with the Globe on the forthcoming responsive redesign. As far as I’m concerned, this is the project that could vet RWD as a sound, viable approach for other sites that have a similar volume and variety of content. All the responsive sites I’ve seen so far, in my mind, simply do not come close to doing that. Count me as someone very much interested in looking under the hood of boston.com once the curtains are lifted.

The Globe is responsive web design’s first at bat in the big leagues. It’s the real test of workflow, content, and technical challenges. I think responsive web design, in many ways, could sink or swim based on the result.

What do you think? Will the The Globe be today’s WIRED?

You write with it. And not much else. Its defining features are ones that actually remove things.

• The title bar disappears when you start typing.
• FocusMode hushes down everything you’ve written except for the sentence you’re writing.
• Full screen mode blankets your display with a calm, almost-white background, leaving your text with centered and preeminent presence.

If Dieter Rams designed a writing app, it might be a lot like iA Writer. It’s innovative. It’s aesthetic. It’s understandable. It’s unobtrusive, honest, long lasting, and is as little design as possible.

But why is it less?

Because it’s less confusion. Less redundancy. Less distractions. Less fumbling with numberless features that don’t in any way contribute to translating thoughts into words. It’s less in the way. Less equipped to demand anything of its user other than recording thoughts and ideas. This frees you from thinking too much: Is that paragraph too long? How do I create a numbered list again? Where was that column layout option? Was that a run on sentence?

IA Writer is less of what doesn’t matter.

And that’s why it’s going to be successful.

Several months ago I was invited to speak about skeuomorphic interface design at a conference in Seattle. You don’t say no to invitations to speak at conferences in your field of work, so I accepted and agreed to present. After all, I’d been thinking about the topic enough to write about it and had plenty of time to prepare to present it. I thought it was going to be easy.

Only it wasn’t.

A few weeks after I committed, I paused and thought: How do I fill a 55 minute session with relevent, valuable information and not bore my audience? The TED conferences, known for some of the most captivating talks in the world on a range of fascinating topics, are only 18 minutes for a reason. How was I going to expand a short essay into nearly an hour long talk?

Another, more visceral concern was developing as well: How on earth was I going to speak at a conference without looking like the total rookie I was? I’d never done anything close to this. When it comes to conferences, I’m always on the audience side of the stage. The thought of being mic’d up and in charge of an hour of people’s time stirred up enough anxiety that I began to wonder if I could really pull this off.

I had two hurdles to clear:

• Expanding a short essay into something worthy of a conference talk
• Overcoming public speaking jitters

Clearly I needed some sort of focused approach. To meet those challenges I needed quality content, and to gain confidence so I could deliver it well.

The Kitchen Sink

The material and format of my essay wasn’t intended for a live audience, so using it as a baseline structure wasn’t going to work. I needed to start over.

This is when I decided to give Evernote another go. I had used it briefly when it launched, but it failed to stick with me. By now the product had improved and suited my needs. Evernote gave me a mechanism to capture and store ideas before they had a chance to escape me. I took screen shots from my devices and emailed them to my Evernote account, which routed them to a notebook I had created to curate everything realted to my talk. I did the same with any articles, stories, news, quotes, and images related to what I was talking about. Sometimes I’d even store a quick voice recording if I thought of something potentially useful.

Over time I had amassed a mountain of material. Some of it was crappy, but some of it was really good. Nancy Duarte describes the process of collecting ideas as “everything and the kitchen sink.” Evernote is a tremendous capturing tool for a huge pile of ideas — the ultimate kitchen sink.

At this point I could tag items, clustering them into messages and stories that supported my overall Big Idea.

Boot Camp

I had no public speaking experience whatsoever. I knew this had to be confronted. The first thing I did was read Scott Berkun’s Confessions of a Public Speaker. Scott speaks for a living. Even though I wasn’t trying to be a Scott Berkun or a Jared Spool, it was a quick read that gave me some insights on what it’s like to be in their world. Among a lot of great takeaways from his book was to simply give a talk that you yourself would want to listen to. Other books I found incredibly helpful were Resonate by Nancy Duarte, and In the Spotlight by Janet Esposito.

But reading books is something you do on the couch in the comfort of your home or on the train ride to the office. I wasn’t going to gain any confidence that way. So I did something I had meant to do for years. I started going to Toastmasters meetings and actively participating in them. I also attended Janet Esposito’s two day workshop for people who struggle with public speaking.

I was slowly gaining confidence, but I had accrued only about an hour of total ‘stage time’ over the course of a few months. I still faced a big leap from five minute microspeeches in front of a small group to a presentation ten times that length in front of a larger, paying audience.

The Talk

I had practiced my talk about five times before I arrived at the conference. My Keynote files were stored in three locations. I even brought extra batteries for my wireless slide controller. I was as prepared as I was going to be.

Speaking on the second day of a two day conference gave me an opportunity to attend some sessions and meet other speakers and attendees. It was also helpful in gaining an idea of what to expect. How big was the room I was assigned to? How many people are attending? How are the stage and screen arranged? What are the acoustics and lighting like? I made some tweaks based on the first day of talks, something I wouldn’t have had time to do if I was near the top of the batting order.

The talk itself went as well as I could have asked for. When audience members line up at the mic to ask questions, it’s a sign you’ve done something right (or horribly wrong I suppose). There are a few compliments I’ve been fortunate to get over the years that I recall vividly. The last one came from someone in my audience that day. He said “Usually I can check email or get some things done during these sessions, but I couldn’t stop paying attention.”

Keeping people engaged over 50 minutes was a challenge I was almost sure I couldn’t meet a few months ago. His words really made me feel like the outcome was worth the preparations.

Tips from a rookie

Of course I’m no Scott Berkun, but I’ll leave you with a few things that helped me pretend to be.

• Practicing is awkward, but do it. Tape yourself, then sit through your own talk. You’ll know if it’s boring. More importantly, you’ll know what needs fixing.
• On the morning of your talk, don’t rehearse it again. Instead, hit the gym. Go for a run. Something. You’ll be more relaxed and focused when it’s time to present.
• Join Toastmasters. If not for public speaking reasons, do it for your own personal growth.
• Get yourself a copy of Nancy Duarte’s Resonate. It’s packed with tons of valuable techniques.
• Take a firm position on the subject and sell it. Evidence and data are important, but can get a bit boring. Sprinkle in a story or two.
• “Before anything else, preparation is the key to success.” Some inventor said that. It’s true.

I was wondering how people were spelling it on Twitter, so I came up with a way to find out. So what are we calling Gadafi Kadhafi the ruler of Libya? Here are the results in infographic form.

I didn’t spend a lot of time doing this so my methodology wasn’t very scientific. I quickly compiled a list of all the versions I could find being used by various news sources. Next I performed a separate search on each spelling variation, confined the results to New York City and recorded the total number of references within the last 10 hours.

Let’s take journalism as an analogy. Journalists hold themselves and their peers to a renowned standard of integrity and ethics. With this in mind, imagine you’re reading a recap of a soccer match. In it, a player is quoted talking about the goalkeeper, saying…

“I thought he did a tremendous job for us out there. We were down 3-0 early and he shook it off. He was perfect for us the rest of the match and we were able to battle back for a huge win.”

But later you heard an audio recording of his actual words, which were…

“I thought he did a great job for us out there. We were down 2-0 early and he shook it off. He was solid for us the rest of the match and we were able to battle back for a big win.”

Though it sounds more dramatic, that first version is just wrong. He didn’t say “tremendous.” He said  ”great,” which isn’t as strong. And “perfect” is clearly an adjective of higher degree than “solid.” The basic message is the same in both versions, but one is true and one isn’t. This just isn’t done in their profession. But data visualizers, unintentional or otherwise, do this all the time. Here’s how.

Nonlinear data scaling

One of the most common blunders is distorting a data point’s relative magnitude by using a visual device that does not scale the way the designer thinks it does. Take a look at the example below.

All this needs to do is illustrate the percentages in true fashion. But it doesn’t do that. This graphic makes it appear as though calls to “receive product or service” are seven times as frequent as “file complaint” calls (it’s slice is about seven times larger). But that’s not the case at all. The “receive product or service” calls are only about three times as frequent as reported by the data.

Not that bad, you say? Then have a look at this sham.

Wow, having any kind of accent at all seems to be the kiss of death when it comes to credibility. This old trick resets the baseline value as something other than zero. Here it’s 6.3. Combined with the nonlinear scaling from above, this shenanigan really takes things out of whack.

Using proportional devices and showing true distance from zero shows us a much more accurate visual interpretation of reality.

Now it seems that callers who check their order status or file a complaint aren’t so insignificant anymore. And those accents? Not quite the detriment they once seemed.

The distortion factor is my calculation based on Edward Tufte’s “lie factor” as he describes in his book, The Visual Display of Quantitative Information, 2nd edition. A factor of 3.0 means the visual representation of the data appears three times larger (or smaller) than the real data itself.

Even Jess3 is not immune to data distortion. Here’s their display of the the ILO convention average score for policy and practice (by continent). It serves as an example of what happens when data is pinned to a circle’s diameter instead of its area.

This graphic is comparing law to reality. The inner circle is the policy score, the outer circle is the practice score. The greater the size disparity between them, the more the law doesn’t reflect reality. Looking at Africa gives us a quick accuracy gauge. If the inner policy circle represents one unit, how many of those do you think it takes to fill up the practice circle? I’ll save you the arithmetic — it’s about 14. Way more than 3.7. The way it’s presented here makes the policy and practice look impossibly distant.

The Americas don’t fare all that much better (2.3 and 5.8). Here’s how the real data compares with the distortion in both bar and circular graph form.

The large (5.8) circle consumes about 6,300 pixels per data unit. Applying that same scale to the smaller (2.3) circle results in a much different, and truer, result.

Reflection not invention

Data should be reflected, not invented. And by reflected, I don’t mean from a fun house mirror. In this last example from GOOD.is, the size of the pie charts correctly reflect the value they represent with no distortion.

The circles grow in area at approximately 3,500 pixels per $1 billion. The image still scores high on visual appeal. But it stays virtuous. I can clearly see that, compared to other forms of energy, the federal government is heavily subsidizing fossil fuels to keep them cheap for us to consume.

If you’re creating infographics, show the info as it is. Be pedantic. Care about accuracy. If something has a value of 5.1, show it as 5.1. Labeling it is an ancillary detail compared to the power of the data point’s visual manifestation. We process shapes before text. The data points should never be thought of as approximations — 43.7 doesn’t mean “a lot bigger than” 4.1. It’s 10.66 times the size of 4.1. Nothing more, nothing less.

Certainly not all areas of visual communication need to practice such a purist approach. But when a designer is adding a presentation layer to a set of data, are they not obligated to show the data with precision? Should the standard really be any less than that of journalism?