Links and articles about technology, design, and sociology. Written by Rian van der Merwe. Follow @RianVDM
A while ago I wrote about expanded customer journey maps as a way to plan for device-agnostic design. But that document is only half the story. Expanded customer journey maps are great because they force us to plan what content will be needed before we move to page layout. That provides a great starting point, but crossing the chasm between knowing what content should go on a page, and how to design the best layout for that content can still be quite difficult.
What we need is an effective way to make content hierarchy decisions across all pages so as not to lose sight of the overall consistency of a site. Enter Content Slice Diagrams as a way to accomplish three fundamental tasks:
- Get an overview of the content across a site to make sure nothing is missing and there is consistency in layout where appropriate.
- Design the right size and hierarchy of each of the content chunks on a page, and see how it affects the page as a whole, as well as related pages.
- Provide any guidelines that writers may need to keep in mind as they create the content for the site.
Once the content slice diagrams are completed, designers and writers should have the following information:
- A clear understanding of the hierarchy of each page, which leads seamlessly into mobile first layout design.
- What the structure and nature of the content in each chunk will be.
That’s everything you need to start working on layout. As an example, let’s say you’ve worked on the content plan (see my post on expanded customer journey maps for an example), so you know what type of content needs to be on a page — but you’re not sure how to lay it out. A Content Slice Diagram can help:
What we have in the image above is a list of pages that goes from left to right, with rectangles representing content chunks on the page. Calls to action and optional modules are given a different color so that they’re easy to differentiate. When we did this for a travel site we realized that we sometimes had the call to action in a different spot, so we were able to get consistency across pages. We also moved the content chunks around until we arrived at a hierarchy that made sense.
You’ll notice that this looks suspiciously like the layout for a mobile screen… That wasn’t the original intent, but it ends up being a welcome side effect of doing content slice diagrams: it’s a great blueprint for mobile first design.
Once the hierarchy is set, you can create content guides for writers to give them the structural information they need to start writing:
When I brought this technique to HealthSparq, my colleague Allan White had a great idea. He rightfully commented that OmniGraffle doesn’t make it particularly easy to drag content chunks around quickly. So he decided to use Trello instead. It allowed him to have collaborative meetings with the Marketing and Development teams as they discussed the hierarchy of each chunk:
As I’ve mentioned before, I hate needless deliverables as much as the next person, but I really like deliverables that help us design better products. And I think Content Slice Diagrams make for a great addition to the tools we have at our disposal to design device-agnostic, content-first experiences. Use at will, make it better, and let me know how it goes!
In the midst of the recent brouhaha about Markdown1, Craig Mod posted an interesting tweet about the nature of software. In response to John Gruber’s assertion that the original version of Markdown doesn’t need a significant amount of work, he said this:
This gave me pause, because it flies in the face of a very common mantra in the design world. Sure enough, it didn’t take long for another big name in Design to throw down the words many of us have said over and over:
This happened a while ago, but I can’t stop thinking about it. Craig is one of my favorite thinker-writers (hey, if singer-songwriter is a real word, this is totally a real word as well), so I didn’t want to treat it as just another easily-refuted throwaway comment.
The fact is that it isn’t that long ago that software was actually done when it came out. It’s only a couple of decades ago that software showed up on a CD-ROM and we made videos about how to use it:
When Windows 95 came out, it was done. Yes, there were some patches to it, but they were few and far between, and in general quite difficult to come by. But of course, then the Internet and App Stores happened in full force, and suddenly we decided that “Software is never done”. In some sense this is certainly true. There are always bugs to fix, things to improve, more features to add, unused features to remove — and of course, the SaaS model makes it all so easy. But I wonder if we’ve taken this a bit too far.
A fairly recent example that comes to mind is email software Sparrow’s acquisition by Google. Man, did we freak out about that one. The thing is though, the software didn’t suddenly stop working just because it was “done.” It was still there, it was still great, and it still works to this day. But that’s not good enough for us any more. Things have to keep getting better and better. And that’s fine — I’m not arguing against progress. In fact, I deliberately turn off automatic app updates on my phone because I love updates and release notes so much.
But I also wonder if our obsession with the never-doneness of software — the inherent throw-awayness of our MVP and test-and-learn culture — is having a negative effect on the quality and lasting meaning of the software we make. I’m reminded of Jennifer Fraser’s words in her article What I Bring to UX From … Architecture:
As an architect, the implicit permanence of designing a building carries with it a sense of responsibility… I can’t help but wonder if we would have better designed products if some of that responsibility and sense of permanence of architecture found its way into what we do as user experience designers.
And here’s Tony Fadell, talking about the creation of the Nest thermostat:
Fadell looks out at the Manhattan skyline and says that he always wanted to be an architect; that buildings stay beautiful forever but digital devices are quickly obsolete. “You look at hardware or software five years later? They’re crap. You would never use them again. People use architecture all the time.”
His voice rises. “What is our form of architecture? What is the thing that lasts of beauty?”
Or consider Dmitri Fadeyev’s words in a discussion about Russian architecture:
What’s interesting about this type of architecture is that its aim goes far beyond that of creating a functional underground system. Its aim is to promote a political ideal, and it does it through beauty by enriching lives of the people who get to experience it. The question here isn’t: how do we solve the problem of creating a metro station in an efficient manner – instead the question is: how do we create a station that elevates people’s mood and inspires their lives. This architecture isn’t there just to help you live – it makes life worth living.
I do wonder what would happen if we felt the weight of responsibility a little more when we’re designing software. What if we go into a project as if the design we come up with might not only be done at some point, but might be around for 100 years or more? Would we make it fit into the web environment better, give it a timeless aesthetic, and spend more time considering the consequences of our design decisions?
Coming back to Craig Mod’s tweet, I have to say that on reflection I agree with him. We need more software that’s done — not all of it, just more of it. Just like we’re always going to have prefab buildings to serve a particular function at a particular time, software that continues to change and improve pushes us forward and is absolutely necessary. But maybe it’s ok for Markdown to be done. Or Sparrow. Or that app you’re working on. And by going into it with a realization that this is going to be done some day, you might even make something that lasts for decades.
The details of the Markdown argument between John Gruber and Jeff Atwood isn’t the point of this article, so don’t worry if you missed it. ↩
This essay originally appeared in the 8/1/2014 issue of The Loop magazine. It’s a publication worth paying for, and it’s run by Jim Dalrymple, a gentleman with a fantastic beard and an even better laugh. Thank you, sir, for giving me an opportunity to write for The Loop!
My favorite story about coffee is from the year 1600, when Pope Clement VIII was the head of the Catholic Church. As the story goes, the Pope’s advisers urged him to make coffee a forbidden drink for Christians. They argued that since Muslims were not allowed to drink wine, Satan invented this “hellish black brew” as a substitute. In a moment of remarkable foresight the Pope asked to try a cup before he made his decision. He was so enamored with the concoction that he came up with a different plan. “This Satan’s drink,” he declared to his advisers, “is so delicious that it would be a pity to let the infidels have exclusive use of it. We shall cheat Satan by baptizing it.”
And so it came to be that despite our vast ideological differences across regions and cultures, we can at least all agree on one thing: coffee is a deeply spiritual experience.
It’s not that I didn’t always have a strong connection with my eldest daughter. It’s just that recently, as she’s running headlong into her fifth year of life, we’ve started to connect in ways I didn’t expect. For example, this weekend we spent most of early Sunday morning building Lego models together. How did that happen? How did she suddenly get into stuff I remember liking as a child?
I know everyone always talks about how quickly kids grow up. I don’t agree with that at all. Growing up takes a long time. But I do find these sudden jumps in growth quite surprising sometimes. I feel like I should be better prepared for each jump so I can catch her if she stumbles. I guess that feeling will never go away — especially when she starts dating. Man. That’s going to be rough.
Anyway. A few weeks ago my wife brought the girls to our office for a visit one morning. I made my daughter a Babycino (frothed milk + hot chocolate sprinkles), and myself a Cappuccino. While I was making the coffee drinks my daughter sat at the table and asked me questions about what I’m doing and how the espresso machine works. I talked to her about bean extraction and crema and milk steaming, thinking that it would bore her to tears. But she was really into it. So I kept going and we ended up having a conversation about craft and why it’s cool to take your time to learn how to do things well and how good it makes you feel when you really master a skill.
I can’t remember when my obsession with coffee started. I just know that one day I started reading books about coffee history, and the best ways to brew a good cup. Then I bought an AeroPress and starting Googling for recipes. Next I bought a grinder, and a Chemex, and became annoyingly picky about beans. And before I knew it, I was that guy at dinner parties. The guy who makes you stop what you’re doing to explain where the coffee came from, how I was going to prepare it, and what they should look for when they taste it. But mark my words: when you do eventually taste the coffee you instantly forget how weird I am, and instead start talking about the unexpected party in your mouth (A guest once remarked that it tasted like angels peeing on his tongue. It is, perhaps, my proudest moment).
Charles Maurice de Talleyrand-Périgord — the Prime Minister of France during the early 1800s — once wrote a completely over the top description of how coffee made him feel. Even though he was very likely under the influence of a vast amount of caffeine when he wrote these words, I swear when I’m drinking a great cup of coffee I want to nod in vigorous agreement:
A cup of coffee detracts nothing from your intellect; on the contrary, your stomach is freed by it and no longer distresses your brain; it will not hamper your mind with troubles but give freedom to its working. Suave molecules of Mocha stir up your blood, without causing excessive heat; the organ of thought receives from it a feeling of sympathy; work becomes easier and you will sit down without distress to your principal repast which will restore your body and afford you a calm delicious night.
Yes, the taste of a good cup of coffee is amazing, but it’s about so much more than that. Most of the joy of any craft — and coffee is no exception — is how you get there. My obsession gave me much more than the ability to make a decent cup. The process — the grind, the bloom, the slow pour — is now a comforting ritual that I associate with mindfulness. It’s a deep mental breath to allow my brain to process what’s going on around me. Most of us spend our days being outlandishly busy. But as with all crafts, during the 10 minutes it takes to make a pot of Chemex, nothing else exists. Time slows down, and I’m focused on getting every detail right. Making coffee keeps the chaos out for a few minutes every day — and it helps me focus when I return to my work.
What is your craft? It doesn’t have to be coffee. But is there something that takes you away from this world for a few minutes every day? Something that’s hard enough that it takes such intense concentration that you (gasp!) even forget to check Twitter? Something with a knowledge well deep enough that you’ll never reach the bottom? Those kinds of obsessions are healthy and necessary because they keep us on our toes, curious, always growing, always learning, always grounded because you can’t win a craft. There is always more to learn.
What you get from craftsmanship is not the end of the story. Despite its many personal benefits, I’ve found craft to be surprisingly social. Hours after my family’s visit a few weeks ago I was still thinking about the brief time I had with my daughter that morning. I couldn’t help but feel like it was significant, and that I should create more of those types of moments with her. And not just with her, but with friends and colleagues too. A discussion about craft — especially if it happens around that craft — usually leads into a discussion about passion, and that easily spirals out of control to anything from a new appreciation of life to brilliant product ideas. As people who create software, those discussions can be invaluable for the work we do.
So here we are: our lives intertwined with a drink that had the potential to divide nations, but instead ended up being the catalyst for the creation of many newspapers and universities; the common element in countless debates, first dates, and last dates; and the ever-present, unassuming ingredient to any everyday conversation or meeting. This
hellish heavenly brew might just be the perfect ambassador for the value of learning and practicing a craft. It doesn’t just show us how much we personally have to gain from constant learning and a focused mind. It also shows us how a big part of the joy of craft is found in the gathering of people around its edges, and the ideas that are sparked and shared as a result. Let’s actively create and seek out those moments of shared passion for the world and all we get to do in it.
Preferably around a cup of coffee.
As I’m sure you’re extremely tired of hearing by now, I recently wrote a book on Product Management. For those of you who are too cheap to buy it (I kid, I kid1), there is now an edited chapter excerpt up on Smashing Magazine. In Why Companies Need Full-Time Product Managers (And What They Do All Day) I give my definition of Product Management, and go into some of the characteristics of a good PM. Also:
The truth is that, to be effective, the role of a manager for a particular product or area must not be filled by multiple people. It is essential for the product manager to see the whole picture — the strategic vision as well as the details of implementation — in order to make good decisions about the product. If knowledge of different parts of the process resides in the heads of different people, then no one will have that holistic view, and all value will be drained of the role.
Enjoy the freebie!
A couple of months ago I got an email from the wonderful people at A List Apart, asking if I’d be interested in starting a regular column on ALA. I believe my response was something to the effect of “1,000 times yes!!” How could it not be? I’ve been reading ALA for such a long time, and I really enjoyed the one time we’d worked together before, on an article called Usable yet Useless: Why Every Business Needs Product Discovery.
In an effort to figure out where to take the column, my editor asked me what kind of topics I’m interested in. I sent back a response that I was pretty sure would make her delete the email and step away from her computer very slowly. Here’s what I wrote:
- My background is in sociology. My PhD dissertation was about social network theory — the real, mathematical kind, not what the phrase “social network” has since come to mean. So I like thinking about how our networked society is changing us. I’m much less interested in the “Google is making us stupid” view, and much more interested in the positive side. Clive Thompson’s Smarter Than You Think comes to mind immediately. (When I grow up, I want to write like Clive)
- Following on from that, I like thinking about what parenting means in this new era. As I’ve been thinking about what my next side project should be after the book, I’ve toyed with a site for tech-oriented dads with young kids. What are the products they should be interested in, how do we teach our kids about technology and that it is not to be feared, but also not to be abused, because it is not neutral (see What Technology Wants. When I grow up I want to write like Kevin).
- And again, following on from that (at least in my weird head), how does Sci-Fi culture play into all of this? (I know, weird, but stick with me). Our science fiction has become increasingly dystopian. The last positive science fiction series was probably Star Trek TNG. So what do our visions of the future tell us about living (and designing) today?
To my surprise, my editor didn’t freak out, and instead encouraged these topics. So we came up with the column name A View from a Different Valley. A column about technology, but from a perspective we don’t always expect. My first article for the column is called Work Life Imbalance, and it came out last week. It’s about the blurring lines between work and life:
There is a blending of work and life that woos us with its promise of barbecues at work and daytime team celebrations at movie theaters, but we’re paying for it in another way: a complete eradication of the line between home life and work life. “Love what you do,” we say. “Get a job you don’t want to take a vacation from,” we say—and we sit back and watch the retweets stream in.
I don’t like it.
I don’t like it for two reasons.
And this is, of course, where I ask you to read the rest if you’d like to find out why I don’t like it…
I’m really excited about this column, and hope to keep it going for quite a while. Thanks again to ALA — they’re awesome people. I like them a lot.
Monica Guzman spent the summer on a tech book binge. She read 11 technology books to get a sense of our current technological moment. In the short article How my summer tech book binge changed the way I think about tech she explains some of the things she learned:
Tech serves us best when we create rather than consume. Where [Nicholas] Carr saw the worst of tech’s impact, Clive Thompson, in “Smarter Than You Think,” saw the best. One difference was that Carr — in arguing, for example, that the rise of short, fast media makes our contemplative muscles weak — all but ignored how tech boosts creation. It’s a common oversight: We’re transitioning from a world where public creation was difficult to one where it’s a cinch.
The same goes for public collaboration. Great things happen when we swirl together and build. Think Wikipedia. Blogs. The Internet itself.
This is, if nothing else, a great reading list.
This post is sponsored by Rackspace Digital, the digital marketing infrastructure specialists.
In recent months, wearable tech has shown signs of emerging maturity. Not only are wearable devices getting smarter and more powerful, they’re also becoming more practical and beautiful. As batteries and sensors continue to get smaller, and with Google releasing the Android Wear operating system back in March, a slew of new wearables will hit the market before the end of the year. Smart watches, glasses, shoes, shirts, even jewelry. According to ABI Research, 90 million wearable devices will ship before the end of 2014. Here are a few of the new arrivals.
Riding Big Waves and Big Data
Rip Curl, an Australian company and an iconic brand in surf wear, is currently trialing its own smart watch with 200 surfers around the globe. Some surfers, like zealous runners, want to track all their stats—from the number of rides to top speeds, miles paddled and time spent in the water. Due to hit stores mid-September, the GPSSearch will be the world’s first GPS-powered surf watch. It uses satellite positioning and other sensors to obtain data and measurements that are then processed in the cloud using a cutting-edge database service. All the user information can be synced to an iPhone, iPad or desktop for visual analysis.
Google Maps in Your Shoes
Indian startup Ducere Technologies is launching a pair of “smartshoes” known as Lechal shoes. The shoes connect to your smartphone with Bluetooth, using vibrations and Google maps to alert you when you need to make a turn. The left or right shoe vibrates depending on which way you need to turn. Not only is this a boon for runners or walkers in an unfamiliar city, it also has big payoffs for the visually impaired. Reportedly, Lechal shoes have already received 25,000 orders, even though the company won’t make them available until the end of the year. The shoes will cost between $100 and $150.
Making the Wearable More Wearable_
While Under Armour and Omsignal are leading the way with making smart shirts with built-in sensors for tracking workout data, there’s a new plan to take over the rest of your wardrobe. Ministry of Supply has launched a new line of men’s dress shirts using the same technology that NASA has implemented in its spacesuits for temperature regulation. The shirt absorbs heat when you’re hot and releases it back when the temperature dips. The good news is that it looks like a real shirt, not a space shirt.
Wearable Experiments, meanwhile, has released the Navigate Jacket for both men and women. A companion smartphone app stores destinations and feeds them to your jacket, turn by turn. LEDs and vibrations on the sleeves ensure you never make a wrong turn.
And finally, if vibrating jackets aren’t your style, consider the latest in wearable tech from Cuff, a manufacturer of smart jewelry. Now available for pre-order, the bracelets, necklaces and key chains come in a variety of styles and finishes that look more like accessories than tech hardware. Each piece of jewelry uses a small component called a CuffLinc that acts as an alert system. Using Bluetooth technology, the CuffLinc will sync up with a smartphone app to handle alerts and push notifications that can be customized for a personal network of friends and family.
I’ve done quite a bit of writing here on architecture and design (see this, for example), so I really enjoyed Melissa Mandelbaum ‘s Applying Architecture to Product Design: Lesson 1 – Circulation:
As an architect, I learned circulation systems including stairs, hallways and elevators are very important in helping people navigate buildings. Similarly, as a product designer, I’ve learned circulation systems such as list menus and tabs are necessary for helping people navigate products.
She goes over some really great examples of helping people “circulate” through an app. I’m looking forward to the rest of the series!
My thanks to Greg Heade for sponsoring Elezea this week to promote his excellent wireframe stencils.
If you use Photoshop, Illustrator, Fireworks or Omnigraffle, you’ll love volume one and volume two of Greg Heade’s tiles for wireframes and flowcharts. These stencils are 100% vector-based and editable, and it allows you to put together page layout and flowcharts quickly so you can focus on adding the details — not drawing the skeleton.
These tiles include standard layouts like home pages, product pages, and error pages, but it goes beyond that to give you a framework for shipping and payment flows. These are an invaluable resource — so check his store out!
I need to tell you about a conversation I had with my 4-year old daughter this morning. You’re going to have to stick with me, because despite the potty talk this is going somewhere, I promise. The backstory is that lately she’s been forgetting to wipe after going to the bathroom (this is the type of stuff you’re here to read, right?). So when she got up this morning, this happened:
Me: “Did you go to the bathroom?”
Me: “Did you wipe?”
Her: “Oh… no. I don’t think so…”
After a few seconds of silence, she said something that’s pretty obvious, but hasn’t occurred to me before as the cause of the problem:
Her: “The toilet paper is behind me so I forget. We should put it in front of me so I can see it.”
Well, of course. Mystery solved. See, a few weeks ago I accidentally broke our toilet roll holder (yes, I’m pretty sure this is the kind of thing you come here to read…), and since then, we’ve been putting the toilet roll on the back of the toilet. And that was the cause of my daughter’s sudden “forgetfulness” in the wiping department.
This immediately made me think of product design, and in particular, the all-important principle of recognition vs. recall:
Showing users things they can recognize improves usability over needing to recall items from scratch because the extra context helps users retrieve information from memory.
It also reminded me of a great story Marco Arment once told in Right versus pragmatic. You should read the whole thing, but the gist is that at a previous job people kept dropping trash at the door before they left the bathroom (what is it with me and bathrooms today?), despite increasingly passive aggressive signs being put up by “management” to please throw trash in the bins. Here’s Marco’s illustration of the problem:
Source: Marco Arment
The solution that worked in the end? Put the trash can by the door. Seems obvious, but it still took them quite a while to figure it out. Instead of trying to change behavior — or to get people to remember to do something they’re not used to — they put a trash can where people are already throwing stuff, and that solved the problem.
Ok, enough with the bathroom examples. I recently had a discussion with a health plan who has a tool for their members to find doctors who are in their network. They mentioned that they get a lot of customer service calls from users who complain that they can’t search by a doctor’s name. This frustrates the health plan because the interface clearly lets you do that. But when you look at the interface you can see why they are having this problem. Here’s the home page:
Can you see where to go to search for a doctor by name? Not sure if you guessed it, but you have to click on the “Advanced Search” link under the Doctors icon:
Here’s the point of all this. Just because a feature is in the interface, it doesn’t mean users will find it. Just because an option is in a menu, it doesn’t mean users will know how to access it. And just because the toilet paper is somewhere in the bathroom, it doesn’t mean my daughter is going to find it.
The lesson is pretty simple, but there are enough everyday examples out there that it’s something we should continue to remind ourselves of. The next time you design an interface, say this to yourself over and over: If I want people to use toilet paper, I should put it where they can see it.