Thinking Outside the Elephant: Part 1

This is the first part of a recap that was written over 51 hours at the HOW Interactive Design Conference, then delivered to attendees as a 45-minute closing talk. The second part will appear on Tuesday.

During the first day of the HOW Interactive Design Conference, I was having a conversation with Richard Hassen of To the Point Design Studio about the challenges that designers with deep expertise in print are having adapting their skills to interactive design. He said: "How am I going to bite into the elephant? It's just too big."

I loved his analogy—that acquiring the necessary interactive skills to be successful in our careers was equivalent to chowing down on a elephant, spoonful by spoonful.

What's inside this elephant? Us, of course. Then tools, clients, technologies, frameworks, methods, you name it. And this is a baby elephant, not a full-grown elephant, since interactive design is much younger than the disciplines of industrial and graphic design. (Baby elephants are still heavy, mind you.)

Based on Richard's analogy, I felt obligated to thinking about just what we were trying to eat. What follows are the four top themes from the conference that describe our proverbial elephant, and further thoughts about what forces are being exerted on our baby elephant, out there in the world.

 

Part 1: What's inside the elephant?

HTML5, CSS3, Javascript, and web standards are now our shared substrate.

Chris Converse, Matthew Richmond, and Cameron Moll spoke over the conference about up-to-the-minute advances with scripting languages, markup, and style sheets for browsers, and how these changes will impact us. You have the religion now, including some good reasons regarding when you incorporate responsive or adaptive design methodologies. Like Cameron said, these new approaches help us to create:

• Greater extensibility across screens
• Greater longevity for our code and designs
• Greater efficiency in maintaining and updating content

But there's another issue lurking in the corner, if you want to execute well on this vision.

Rethink what technologies you need for group collaboration. You need to focus more on collaboration with your co-workers and teammates, from all disciplines. And your computers are getting in the way.

Many of you told me that using a pencil and paper to plan out a website design was "interfering with your design process." Really? Is a pencil really standing in your way? Or is it something else?

To quote David Conrad, Studio Director at Design Commission: “Technology and tools should not get in the way of your ideas. The second this happens, you're screwed.” UX Director Steve Fisher said yesterday, "Tools are bullshit," and I agree with him.

If we want what we create to be future friendly, there should be a clearer understanding of how whiteboards and shared spaces and pencils and paper can help align a team towards reaching a collective vision. Only then can the right computer-based tools come into play for realizing a great interactive design, including how we translate our ideas into code.

Beauty in interactive design goes beyond the interface. Arlene Cotter from the University of British Columbia told me on Wednesday, "No one is talking about creating beauty." I think she's bang on, and through the past two days, it has been only a subtext in the conversation.

Yes, we can bring the craft we expect from our trained graphic designer past into the digital future. We can bring grace and poetry. But you'll need to broaden your definition of what "beautiful" may mean in the interactive space. For a beautiful interactive design, you'll need to fuse visual craft, motion design, information architecture, and great content as part of a compelling user experience. The epitome of pulling this off effectively for a large-scale system is through the use of elegant metaphors.

How do we reach this kind of beauty? This happens by bringing our ideas closer to the medium through which they're embodied. By starting with big, raw ideas and continuing to iterate their elements at increasing levels of fidelity. As I noted earlier, once your ideas have been prototyped in code, or live within heavy design or development tools, you are limited by the output of those tools. Don't start there. Start with the vision.

Know your substrate, even if you don't code for it. John Buckle said via Twitter, "Print designers must understand limitations of press. Web designers must understand limitations of coding languages." Could you produce a well-executed beautiful print design if you didn't understand how PMS colors were mixed, or printed on a 6-color Heidelberg press?

Become intimate with your medium, whether that means exploring HTML by diving into coding sites, taking classes, or sitting down with a developer and having them explain how they do it.

Loosen your grip on pixel-perfect control. Reframe for yourself what control means. "I understand the horror of not being able to control our designs," Scott Fisher said. We need to get over that horror, and fast. This is good for your design practice, as it makes you focus on where beauty will be most evident from the design.

 

The Internet is no substitute for your ingenuity.

I love Patrick McNeil's great insight from the first day of the conference: have a system for how you gather information about how to do your work. Track patterns in what's happening in the world of interactive. That way, you don't have to remember all of that information—you just know where to get it. If you're looking for an answer to almost any question of how to accomplish something with a design for the web or an app: Someone has probably thought of a way to do it. You can either find it yourself or know where to look. You can then tear it apart to know how it works.

But what Patrick said made me reflect on all the great interactive designers I've known. They behaved a lot like a TV character that I adored in my youth: Angus MacGyver.

MacGyver was always able to combine the materials around him to get out of sticky situations. And he always had two things readily at his disposal: a Swiss Army knife and a roll of duct tape.

The Swiss Army knife represents the skills we've gained via tacit knowledge. Every so often, we add another screwdriver or corkscrew to the knife, but this is a hard-fought process. And this knife does have a capacity for what we can add to it—we can't know everything!

The roll of duct tape represents our willingness to bind different ideas, technologies, and tools together to see what sparks are created that we can exploit through the design process, then rebuild in the development process so it's well engineered. The roll of duct tape helps us to quickly create prototypes of things that begin to address a gap we've observed in people's needs.

It takes more than just some duct tape, however, to get through crisis. In those cases, create a community that supports your search for knowledge. They'll help you apply your ingenuity in the right ways, to create your best work.

You wouldn't be here if you didn't want to find your tribe. So don't feel like you have to return to your work life and not be able to learn and build from what we've discussed in just three short days. It can take years for this to sink in through practice.

Write up a list of the things you want to know, now that you have a sense of where the industry is headed. Consider who can support your efforts at your skill level, and collaborate on learning and making what you need to get traction. Identify who could be a mentor for your future growth and approach them about having them guide you with the right questions, rather than just providing answers.

 

Coding skills do not forgive poor research, information architecture, or lack of usability.

On Wednesday, I pointed to Dieter Rams's mantra "less, but better" as a litmus test for how to create great information architecture from well-curated content. But how do you qualify what's better? You can only know what’s better from doing qualitative research, and understanding the people you're designing for. Personas that you make up are half right until they're informed with real data.

Christopher Butler said it on Thursday: "information architecture and usability should be part of a designer's arsenal." These should not be black art activities. We need to demystify the process and utility of doing these things as part of our design process. Julie Beeler said yesterday: "It's the users who are going to use it. So they should see it before it's done."

But that isn't enough: "to sell clients on the value of it, you've got to show the power of it," Julie said. So, it's not just doing the research. It's how you translate what you found in your research into actionable opportunities that you demonstrate its value.

This isn't something you sell to a client as a line-item service. It's just what you do. It's part of how you operate. Don’t give them an option to take it away.

Learn to identify gaps in knowledge. Design experiments to gather that knowledge. Deepen your skill set in research. This means more than "asking users" or "trend research." Assemble a war chest of methods that help you address gaps in knowledge. This includes taking your designs and testing them at varying levels of fidelity.

And, by the way… the reason we've been evangelizing prototyping isn't just so you start making things that begin to resemble the final design you're going to ship. It's so you can embody some of your design hypotheses in experiments that users will react to. Put early prototypes in people's hands and see how they use them, then adapt them based on what you learn.

 

Storytelling with data will transform the depth of what we can design.

Julie Beeler said on Thursday, "the world is full of bad content...our job is to elevate the content and bring it to life."

We bring it to life through stories. Meditate on how you can bring more storytelling into your design process, your client conversations, your deliverables, and the way you engage and delight your users. You can craft user stories that accurately and deliberately express human need. You can create alignment across teams in your organization, because they understand and empathize with people's real everyday struggles. You can define brands by telling the right stories, supported with the right data.

This is a huge opportunity, as Karen McGrane pointed out on Wednesday. Our skills in exploiting data can elevate what we create far beyond what we could have imagined designing ten years ago. We now have access to new types of content that weren't available before. If we are good curators of that content, there's really no limit to how far we can take users.

Discover what stories you tell best. See how you can best express your stories, both to users and your clients. Explore how they work. Start to tinker with them.

Study the new personalized storytelling vehicles that are emerging, which mash up data and visualization in ways that are stunning. For example, the Wilderness Downtown site for The Arcade Fire is haunting, as well as the recent video for Mirror by the band Sour, which brings your social world into their music in a disarming manner.

Practice telling stories with data in ways you find liberating. To quote the user from Christopher Butler's usability test in his talk on Thursday: "I was primarily looking at structures, because that's what I see when I look at websites."

A structure isn't just page layout or wireframes. A story has a defined structure. It can be a combination of text, photos, video, audio, and data visualization. Magic comes from the mixture of those types of content with the concepts you're seeking to express, told through a human lens. Learn what stories you tell best through interactive media, and practice them in ways that you find them exciting.

In sum: how you think about and use raw data can radically transform a site or application. It can define a brand. It can radically shift how people live their lives.

 

Comments

[John B.L.]

"biting into the elephant" i wish i had been there :) collaboration with your co-workers is always a priority. Many designers tent to forget that.