By now it’s been well drilled into our heads that web design starts with content, not with graphics. However, in practice, getting real content before the design process starts is challenging at the best of times, and it’s made even more difficult by the fact that we have to try to get to content parity across all types of devices.

So to deal with this complexity we come up with more pragmatic guidelines. Mark Boulton’s “Structure First. Content Always.” is certainly a more realistic approach:

You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. An important distinction.

So you have to start with the structure not the words. […] How do we design around the fluidity? Well, we define structure; of our content, and the templates that content inhabits. We define the rules of the system to display the content in different ways (if we can) to help the reader understand the content better.

The problem with all these approaches has always been the same for me: It sounds awesome in theory, but I don’t know how to make it part of our workflow when we’re in the weeds with client work. So we tend to try to make physical things that help us get there¹. First we created expanded customer journey maps to define a content plan based on user needs and personas.

That helped a lot, but on the next project we got stuck on content structure again — how do we create different page templates with different types of content, without getting into interaction design too soon? So we came up with the idea of Content Modules: diagrams that show the relative importance and length of different types of content, in a Mobile First context. Here’s an example:

This document has a few key components:

• Each block outline represent a distinct content chunk that can be used on any other page.
• The primary call to action is highlighted (in orange in the example above) so that we can easily check for consistency and impact across different pages.
• Some pages will have optional modules — those are also highlighted (in yellow in the example above).
• A gap in a column doesn’t mean there’s going to be empty space on the page. This is not a layout diagram. It just shows the relative importance of each chunk. It also allows one to easily compare which page templates have which types of content on the page. This lets you easily spot if there’s some missing content (or unneccesary duplication).
• Each page template looks like a mobile view. That’s by design. It helps us to move straight into designing mobile views first, using the content hierarchy defined in the document, and then scale that up to larger views.

Creating content modules was the missing step we needed to bridge the gap between the content plan in our expanded customer journey maps, and starting the interaction design / prototyping phase. I was constantly worried that we’d start projects with content at the centre, but then gradually backslide into old ways as the project progresses. This document helps us to move seamlessly from content planning to interaction design, confident that we’re designing on the right content-led foundation.

Brad Frost’s article on the Techcrunch redesign is a great case study of a modern responsive design process. A few things stood out for me, and remain open questions that I wish I could ask Brad about.

First, there is no mention of user research. There was a kick-off meeting, with some Design Studio work, but how did they identify user needs, and why was there no user testing on their prototypes? That’s a bit perplexing.

Second, it’s really nice to see Brad take a more nuanced stance on the whole Post-PSD Era thing, and admit that comps can be useful under the right circumstances:

Believe it or not, we did indeed create a few full comps. Gasp! Horror!

But the difference between this and all the other projects I’ve ever worked on is that we didn’t lead with the comps. By the time Dan made some comps (for the homepage and featured article page), we had established many of our key molecules and organisms, and had an understanding of the systematic nature of our design.

That’s how we do it in our agency as well, so I’m glad to find out that we’re not completely insane.

And lastly, it would’ve been great to get a little more detail on how much backend developers were involved through the process. Brad mentions it briefly:

From the design end of things, Dan went through and created an incredibly detailed list of minor design tweaks that tightened things up and got things ready for final delivery to be implemented into their WordPress backend by the fine folks at 10up (who by the way were involved throughout the course of this process).

“Final delivery” and “were involved throughout” are two phrases that don’t sit very well together, so I wonder how that worked practically.

Don’t get me wrong — this is a great process, and they obviously got some impressive results. These are just some things I wondered about as I read through the case study.

Daniel Jalkut discusses the rate of software/app updates in Stagnation Or Stability?:

As an onlooker, it’s easy to associate dramatic change and motion with competence, and quiet refinement with laziness. We must draw on our own experiences attempting to build great things to appreciate how much work takes place in stillness, to have faith that even though things may appear stagnant, a benefit of frictionlessness is resulting. An app at rest may be in that long, arduous phase of becoming finely crafted.

Daniel’s post is a response to the recent Michael Lopp article R.I.P. Things, in which he explains that he’s dropping Things as his productivity app mainly because of its lack of updates. I’ve been thinking about this a lot. How our expectations about app pricing and rate of change is placing unfair (and damaging) pressure on developers to release new versions of their apps constantly — even if it’s just change for the sake of change.

The other unintended consequence of this never-ending update cycle is that we’re starting to see evidence of what Chris Bowler calls App Fatigue:

I must admit, I’ve felt a bit of what I term app fatigue in the past year. What is this? Simply the lack of desire to either a) pay for another version of an app I already own or b) go through the steps required to update this app and become accustomed to the changes.

My own feelings about this remain wildly erratic at the moment. Sometimes I’m on Michael’s side. Like most people I was champing at the bit for Tweetbot 3, and as much as I appreciated the “It’ll be ready when it’s ready” line, my impatience got the better of me. Yesterday Apple “finally” updated their last built-in app for iOS 7. But we’re still stuck with an ugly WhatsApp, orphaned versions of OmniFocus, Tweetbot and Instapaper for iPad, and a Foursquare that hasn’t been updated in weeks — weeks, I tell you. What up with that? I turned off automatic app updates because I love going to the App Store and checking what wonderful new things I’m going to get today.

And then, at other times, I’m with Chris Bowler. OmniFocus runs my life, so I shouldn’t complain about paying $20 for the gorgeous new iPhone version, but it ended up being quite the grudge purchase. Same with Fantastical 2. And I know that my insatiable hunger for new features every day is probably doing more damage than good. Because Daniel is right: “An app at rest may be in that long, arduous phase of becoming finely crafted.” But if we show up at developers’ doors with pitchforks every couple of weeks, demanding our new features, there is no time for the app to be at rest. Eventually, Experience Rot will set in, and it will be our fault:

As more features are added, it becomes harder to make the overall design coherent and sensical. Soon features are crammed into corners that don’t make sense.

I guess I’m preaching to myself here. I’m hoping to convince myself to be a bit more patient with app developers, and give them the time they need to slow down and refine.

Thanks to Voila for sponsoring Elezea’s RSS feed this week!

As a Mac user, you know how crucial it is to have a simple and robust Screen Capture Tool in your arsenal. Voila is the most powerful screen capturing software available for your Mac, that not just lets you capture or record content, but also share across seamlessly.

Voila is the perfect screen recorder for your Mac. You can easily make high quality product demos, DIY app simulations, and tutorials. Create interactive content by recording your Mac screen along with audio and all your click streams. Complete by annotating your screenshots with professional tools and value added features. Record like a pro and publish your final project to FTP/SFTP, Tumblr, Dropbox, Evernote and YouTube with Voila.

Made for Mavericks, Voila is simple and intuitive. With Voila, keep your captures organized, within your reach and enjoy a boost in productivity.

Try Voila today. Download Free Trial.

Sponsorship by The Syndicate.

Rob Horning’s Google Alert for the Soul is a very dense read, but don’t let that put you off. It’s an in-depth, well-written exploration of how social media affects our sense of identity and authenticity. In particular, Rob discusses the idea of the “data self”, where our identity starts to come from the data that different social media sites collects about us:

The data self no longer seeks meaning through action; it seeks to be processed into meanings. It’s available for audit and pliable to the incentive structures built into social media platforms. By letting social media capture and process everything, a more reliable, socially authenticated version of the self is produced, better than what our memory can give. Facebook Timeline, for instance, can be seen as an infographic of our personality so compelling that we can comfortably overlook its formulaic nature. Facebook invites us to forget we even had a self before Timeline was there to organize it.

He goes on to say:

The pleasant Pavolovian buzz of seeing someone respond to one of our social media posts is not merely pleasure at having gained some attention but a momentary reassertion of control over identity.

With all of social media’s feedback loops, we get a comprehensive status update from ourselves, allowing us to consume our own personality as novelty. We effectively set a Google alert for our soul.

It’s an interesting idea, that through social media we effectively step outside of ourselves, and become observers into our own lives — as if we’re mere actors trying to convince the world that our “character” is the real thing. Notifications, followers, and likes become the barometer of how well our character(s) are doing at this life thing. So we also rewrite the script constantly based on the instant and constant feedback built into the system.

Once again it’s worth asking: Who will hold a brief for the real?

Andrew Romano’s The Beatles Succeeded Through Talent, Ambition, and a Lot of Arrogance is part takedown of Malcolm Galdwell’s “10,000 hours” rule, part Beatles history:

The Beatles’ secret ingredient was arrogance.

I don’t mean that in a pejorative sense. Arrogance — a kind of foolish, adolescent self-belief; an ignorant, intuitive certainty that your way is the right way — is the root of all great art. Without it, talent and timing aren’t enough. We all have a dash of it when we’re young. In middle school we write Whitmanesque poems; in high school we start a Beatlesque band. But then we weigh the odds and consider our options, and reality sets in. Sometime around 18 we begin to assess ourselves more accurately — to find our proper rank in humanity’s big talent show. Our ambition stops outstripping our ability. And then we stall out and settle down.   

The Beatles never did that. Unlike most of us, they remained arrogant until their ability finally matched their ambition.

It’s a highly entertaining read all the way through. Well worth your time.

The jobs-to-be-done framework isn’t new, but I’ve only recently started digging into it much more since it’s been gaining a lot of traction everywhere I look. For a nice primer on the topic see Eric Portelance’s recent article for Teehan+Lax called The Iceberg of Jobs-to-be-Done, in which he explains how crucial this framework is for good product design:

[Most successful products are created by] people who understand the importance of creating products that solve real customer problems, and have a set of tools and frameworks like jobs-to-be-done that they use to identify and validate the real human problems they’re trying to solve in the market.

The progress-making forces diagram has been particularly useful for me in client work, since it helps people understand how difficult it can be to change existing user behavior. I’m not a huge fan of the diagram on the JTBD site, so we made a new one:

The basic premise of the diagram is this. For someone to move from their existing behavior (a product they’re currently using) to new behavior (switching to a new product), there are two types of forces at work: progress-making forces, and progress-hindering forces.

Progress-making forces move people from their existing behavior to the new behavior, and consists of the push of the current situation (things they’re not happy with in the current product) and the pull of the new idea (things that sound appealing about the new product). Progress-hindering forces, on the other hand, hold people back from switching to new behavior. It consists of allegiance to the current behavior (things they really like about the current product) and the anxiety of the new solution (worries about learning curves and not being able to accomplish their goals with the new solution).

What this comes down to is that for someone to switch from an existing product to a new product, the progress-making forces have to be stronger than the progress-hindering forces. This might seem obvious, but applying this model to your product planning can inject an extremely healthy dose of reality. Is the product really that much better than a current solution? What does the new product have to do to overcome people’s allegiance to what they’re currently using?

In the context of product design this can be a crucial component to making a go/no-go decision on whether to go ahead with an idea, so it’s always a mental test I run with the teams when we’re working through our planning.

Last month I posted a theory on how Facebook might get taken down by competitors. From Taking down Facebook, piece by piece:

Facebook is in a classic position where, as a dominant provider of horizontal social services, it is in danger of being taken down piece by piece by several vertical players who provide specific, narrow experiences very well. Facebook has become a social media firehose. It won’t be replaced by another firehose, but by a bunch of different cocktails that users can customize as they please.

Over the past few weeks, a couple of things happened that appears to back up that theory. First, there’s The Guardian report Teenagers say goodbye to Facebook and hello to messenger apps:

Their gradual exodus to messaging apps such as WhatsApp, WeChat and KakaoTalk boils down to Facebook becoming a victim of its own success. The road to gaining nearly 1.2 billion monthly active users has seen the mums, dads, aunts and uncles of the generation who pioneered Facebook join it too. No surprise, then, that Facebook is no longer a place for uninhibited status updates about pub antics, but an obligatory communication tool that younger people maintain because everyone else does. All the fun stuff is happening elsewhere.

And then, of course, there is yesterday’s news that Snapchat Spurned $3 Billion Acquisition Offer from Facebook:

Facebook is interested in Snapchat because more of its users are tapping the service via smartphones, where messaging is a core function. Facebook has rapidly increased the share of its revenue coming from mobile advertising, but said last month that fewer young teens were using the service on a daily basis.

Perhaps trying to acquire all their vertical competitors is the wrong approach for Facebook. Ben Evans summed it up very well in Instagram and YouTube:

So buying Instagram certainly looks like a good trade — it would be worth a lot more if it was selling today. But as a strategic move, it’s looking increasingly irrelevant. Is FB going to buy WhatsApp, Snapchat, Line, Kakao and the next ten that emerge as well? Sure, some of those will disappear, but it doesn’t look like FB will crush the competitors the way it did on the desktop. On mobile, FB will be just one of many.

Just maybe, Facebook might have been better off rethinking the core product instead of buying what turned out to be just one of a swarm of alternative services.

That last sentence is key. Instead of trying to expand their territory, Facebook should fortify their core product and defend that territory to the death. Even though everything was different in 2009, I think the conclusion I drew back then in Why Facebook should forget about Twitter still holds true:

So here is my advice to Facebook: go where your users are. Understand how they use the site, what their needs and behaviors are. Go visit them, talk to them, watch them navigate around, understand why they are there in the first place. And then enhance your platform to fulfill those needs. Build new ways to feel closer to the people in your life. Make it easier to share and discuss media. Build families-only mini-communities. Who knows what you can come up with if you just understand your users and build a web site for their needs?