Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 13 2013


Designing with Code

To code or not to code? For designers, that’s a very contentious question. Clients like designers who code because (among other reasons) that’s one less body on payroll. Design advocates, on the other hand, often see code as a technical limitation that stifles creativity. To make matters worse, the information ecologies we all work in refuse to stand still. By looking carefully at some of our favorite arguments, however –and by taking them within the context of our ever-evolving digital landscape –we can begin to make a case for when working in code makes sense.

Several years ago, Andrew Maier penned an article on the use of prototypes in website design and development. In light of my own recent work in prototyping, one of the comments to that article stood out:

Any kind of prototype that involves programming or markup sounds scary to me –that’s the fastest route to a “developer-y” looking site rather than a truly designed –graphically as well as functionally designed –site.

This comment caught my eye because it is the same concern I often hear today, a full three years later. And here’s why this is a big deal: given the content and information architecture challenges that the responsive, multi-context web presents there are now better reasons than ever before to integrate coded prototypes into the design process. By paying close attention early on to the integrity of the narratives we create at the most basic level of communication, we can build the foundation necessary to effectively articulate those narratives far and wide.

Why we’re afraid to commit

If pressed to describe their relationship with code, many designers would hunt around for the “it’s complicated” checkbox. We may have already been sold on prototyping (see Todd Zaki Warfel, Jeff Gothelf, and Stephen Hay if you’re not yet convinced), but we’re still afraid of our beautiful UX getting all bent out of shape and smudged up by an engineering toolset (and mindset).

The source of this dread is no mystery. In his seminal 2004 book on design in technology, The Inmates Are Running the Asylum, Alan Cooper writes that “when engineers invent, they arrive at their solution through a succession of practical, possible steps. Because of this, their solution will always be a derivative of the old, beginning solution, which is often not good enough.” Cooper goes on to argue that interaction designers are in a unique position to break this cycle of derivative solutions by “keep[ing] a healthy suspicion of all assumptions about what cannot be done.”
Whether they’ve read Cooper’s book or not, many designers have implicitly heeded this advice and translated it into an “I design it, you build it” workflow. In many cases, this delivers the results Cooper promises: designers and developers frequently challenge one another to synthesize new ideas and novel solutions –ideas and solutions neither of them would have been able to come up with on their own.

What’s different now

With the growing need of responsive web solutions and adaptive, flexible content, there are new reasons for designers to roll up their sleeves and get into “code.” Since HTML is, at its core, a layer of description wrapped around content, working at this level helps designers think more critically about their content and about the architectural implications of that content. While considering markup won’t replace our content audit, user research, or taxonomy work any time soon, it can increasingly function as an important part of the design process.
HTML prototyping helps us discover and vet the IA step Information Architect Dan Klyn refers to as “choreography,” or the “appropriate unfolding” of content: the link between taxonomy and the interaction-level design typically represented in prototypes. When we address the architectural underpinnings of our content’s choreography early on, we ensure that we haven’t driven off course, and left our intent on the side of the road. What’s more, the benefits of HTML prototyping present themselves when we apply even the most basic of HTML’s elements. Creating a linear, semantic document calling out our navigation, header, teaser, aside, and paragraph elements forces us to think critically about how these elements relate to each other in context.

Now look at that same document on a tablet, or on a phone. Does it tell the same story? Does (should) it follow the same choreography? We might find that our content needs to break into summaries or teasers at different places in different contexts. We might also find that the navigation patterns that work on a phone are overly simplistic with regards to the desktop experience. Each of these insights forces us to think about how our content models need to adapt to accommodate new contexts. (For an in depth and practical look at creating content models, see Sara Wachter-Boettcher’s Content Everywhere.)

Why it matters

In her brilliant book Content Strategy for Mobile, Karen McGrane encourages us to stop thinking about content in terms of “pages” and to start thinking about it in terms of “packages.” A content package might contain things like long and short headlines, teasers, summaries, body copy, and pull quotes. Early HTML prototyping helps us decide which of these elements we need –and helps us think of them as pieces that combine across contexts to create a cohesive experience.
Whereas many of the excellent, commercially available prototyping tools are centered around interaction and design, early HTML prototyping is a way for us to begin to prototype our information architecture –and to test the architectural hypotheses we’ve laid out in our conceptual and taxonomy work. It also puts us in the right frame of mind to break out to the page metaphor.

In her keynote at DrupalCon in May, Karen McGrane traces the history of the page metaphor. This ubiquitous concept comes to us –surprise –from Xerox, maker of printers. Of course they would think about content in the digital age as coming together on pages: pages have been the cornerstone of their business for over a century! When we move to thinking of content as a resource that can be pulled into view when and how it is needed, we’ve already taken a huge step toward creating the responsive and adaptive information environments we need to meet the demands of the mobile ecosphere.

How to get started

So how can you get started designing with code? Both Jeff Gothelf and Stephen Hay stress the importance of sketching. I’ll reiterate that here: although our goal is to eventually end up in code, sketching out your rough ideas before diving into markup will keep you from committing to mediocre ideas you’re reluctant to change because they’re already saved to disk.
Use pen and paper or a whiteboard to work out a hypothesis and then write your markup to match. Does it work with your content? Check it out on mobile, on a tablet. Revise and refine. Consider how your content needs to adapt to convey the same concepts in different contexts.

There’s no way around the fact that you will need to understand the basic elements of HTML and CSS. Fortunately, these are not overly complicated and online resources abound. HTML alone allows you to author structured content in a semantically correct way. CSS (with help from media queries) allows you to shape the visual hierarchy of content and adjust it to different contexts.
If you’re new to HTML and CSS, learn a little bit at a time –and fake what you can’t build. You don’t need to have a fully functional AJAX calls or form validation in order to gain insight. Stephen Hay suggests capturing and printing screenshots to show to stakeholders early in the prototyping process. This way you can show exactly the ideas you want to convey without risking stakeholders getting caught up in the fact that a button doesn’t work, or links aren’t yet connected to their destinations.
Finally, allow your process to grow and develop over time. It will. We may never strive –or want –to be standards-compliant, cross-browser, front-end rockstars, but with a little bit of knowledge, practice, and experience, HTML prototyping can become a valuable addition to our content strategy and information architecture toolkit.

The post Designing with Code appeared first on UX Booth.

May 07 2013


Intention vs. Interpretation: What Matters?

Both interaction designers and information architects want to design objects with a singular meaning. It’s a noble, albeit impossible goal. The best we can hope for is to create more consistently meaningful experiences. To do that, designers must better understand the interplay between designer intention and user interpretation: the ways that we can influence – but not dictate – user interpretation.

Consider the design of a voice-based interface. Because users can say what they mean in any number of ways, there are many situations for which designers cannot account – especially in the first iteration. Designers proactively create a set of interactions that users might accomplish, but the diversity of “common” speech patterns prevents a more prescriptive, task-oriented solution.

Clearly those designing voice-based interfaces intend for users to accomplish something. So how might designers shape their interpretation? To better answer the question, let’s examine some problems encountered defining “design” and then borrow some thinking from literary studies. Finally, we’ll explore how these considerations affect the everyday work of information architects and interaction designers.


The word “design” is problematic. Colloquially, we tend to think of design as the purposeful creation of some thing – a physical object, an experience, or even a conceptual argument – whereas etymologically, we can trace “design” back to Latin. There, it connotes purpose, choice, and designation.

If we push the etymological boundaries a little, we might think of it as the deification of an object (de-), or the association with god-like qualities. The designer is an intelligent creator that crafts things according to his/her intention. A final perspective points to the designer as someone who sets meaning elsewhere. Intention is so powerful here that the designer does not even consider variation in interpretation; the designer’s intention is the final meaning.

The problem with all four of these interpretations is that they are incongruous with the principles of user-centered design. User-centered design holds that user experience – to say nothing of designer intent – is the most important element of a design system.


In order to reconcile the disparity between intent and interpretation, it’s useful to borrow from literary critics, those with a long history of interpreting things (albeit from a textual perspective).

In 1946, critics W.K. Wimsatt and Monroe Beardsley published a paper called The Intentional Fallacy arguing that “[the] intention of the author is neither available nor desirable as a standard for judging the success of a work of literary art.” Instead, they believed that the only reasonable factors that could serve as the basis of critique were direct-textual material (e.g., the work itself), indirect-textual material (e.g., inferences), and contextual material (e.g., history). In other words: a literary text should be judged on its content, its merit, and history’s perception – not intent!

Contemporary HCI researcher Clarisse Sieckenius de Souza stands on the other side of the fence. Working within the realm of semiotic engineering, she sees a direct relationship between a designer and user, one facilitated by a “designer deputy.” To de Souza, a designer communicates intent through an interface. The user then interprets that interface to accomplish certain goals. It’s a one-way conversation.

Although their opinions diverge, both Wimsatt/Beardsley and de Souza’s are both “correct.” How can that be? The former – a critic’s perspective – concerns works of art, whereas the latter – a researcher’s perspective – deals with objects of utility.


For better or for worse, web design provides avenues for both art and utility. There are certainly elements of a bank’s website that are more artistic than utilitarian, for example. And, as such, we need to recognize that the interplay between designer intent and user interpretation is a spectrum rather than a dichotomy.

Don Ihde, a philosopher of science and technology, ruminates on this in his essay The Designer Fallacy and Technological Imagination (2008):

[T]he designer fallacy is ‘deistic’ in its 18th century sense, that the designer-god, working with plastic material, creates a machine or artifact which seems ‘intelligent’ by design – and performs in its designed way. Instead, I hold, the design process operates in very different ways, ways which imply a much more complex set of inter-relations between any designer, the materials which make the technology possible, and the uses to which technologies may be put. Ultimately I am after a deconstruction of the individualistic notion of design which permeates both the literary and technological versions of the fallacy.

Ihde goes on to suggest that the most interesting use cases are the unanticipated ones. Designing a utilitarian system demands a level of intentionality, a very narrow definition of success. Art objects, however, have a more ambiguous aim. They’re designed such that emergent properties create results, which in turn creates more emergent properties, more results, and so on.

As designers, we must accept that intention, at the very least, cannot be the central focus of a successful design output. Any object is always more than merely an object. Context gives it meaning. While our intention may affect the “in the moment” relationship to an object, later examination leaves much more room for emergent meaning creation.


Because meaning created through emergent systems has the potential to regenerate itself ad infinitum, those of us designing experiences must exhibit care for how intentionality effects that meaning thusly created. I emphasize care, here, in a manner close to the way Heidegger might – as for him, concern is not the same as keeping in mind, but rather entails a specific way of being. Interface designers must concern themselves with both intention and interpretation.

Designers create systems of meaning. Artifacts are only physical manifestations of our intent. Once users put those manifestations to use, though, our original intent is no longer relevant. Associated meaning is now part of peripheral thinking about these objects.

Insofar as the designer can influence the creation of meaning after the initial interaction, we must think of the design object not as the end of our process but rather, in a strange sense, only the beginning. No interface – no object whatsoever – is valuable in-and-of itself. Value is derived from user interpretation before, during, and after the interaction.


As the complexity of technological systems continues to grow, designers need to consider novel, long-form approaches to their design problems. Considering both intention and interpretation throughout the design process provides clients a more well-rounded approach, one that blends theory-based hypotheses with practical validation (or invalidation).

To that end, we might consider the following questions:


Giving more consideration to our intentions as designers puts us in a better position to create their manifestations.

  1. What are we assuming?

    Intention is shaped by the assumptions we make. Being aware of these – and working to validate (or invalidate) them – helps ensure that our intentions as a designer do not conflict with those of our users.

  2. What’re our design principles?

    Design principles frame a team’s approach. Enumerating goals, listing requirements, and brainstorming user stories are all statements of intent. Clarifying these helps us focus on defining aspects of the solution rather than better framing the problem.

  3. What does our work affect?

    Even when creating something relatively simple, like a landing page or the information architecture for a small website, the things we design have an impacts far beyond their initial experience. Think in terms of systems. How is the element we’re designing affecting all the other elements in the system?

  4. What else effects our user’s perceptions?

    No design solution is an island. As user-centered design (and the emergence of an experience-driven economy) has successfully proven, solutions conceived without consideration of context rarely succeed.

    Context, especially the boundaries between them, heavily influences interpretation. Knowledge of context helps mediate the ambiguity that different environments create.


The next step – often overlooked – is to examine how users interpret those manifestations; to consider the direct, indirect, and contextual interpretations of our work.

  1. What is the direct textual material we’re designing?

    These are the “content” comprising our interfaces: physical objects, screens, images, buttons, text, audio clues, etc. Look at the actions they afford. Do they match our design intentions?

  2. What is the indirect textual material?

    How do users interpret our objects? What inferences are they making? Are they interpreting the artifacts in the same way as we are? Alternate, unintended interpretations are not necessarily a bad thing; they can often lead to new opportunities and angles.

  3. What are the contexts in which this product is used?

    How are contexts different? What are the effects of these differences? Think about your design object not as a static thing but rather a piece of a larger system of meaning, one that is constantly in flux. Objects are interpreted in vastly different ways according to the contextual spaces in which they exist. Contextually-aware design works to understand the differences between situations—cognitive, geographical, emotional, informational, etc.—and create products that fit within these differences. A thorough understanding of intention and interpretation is necessary to achieve this end.

But what does it all mean?

The systems we design are becoming increasingly complex. As technology continues to afford new behaviors and incorporate new sets of data, designers have a multitude of potential solutions at hand. Advances – such as context-aware systems, natural user interfaces, and pervasive computing – will change user- as well as designer-behavior. With new intentions and many-more interpretations to consider, designers have a responsibility to re-examine this critical divide.

The post Intention vs. Interpretation: What Matters? appeared first on UX Booth.

Sponsored post
09:01 will be discontinued :(

Dear fans and users,
today, we have to share very sad news. will stop working in less than 10 days. :(
It's breaking our heart and we honestly tried whatever we could to keep the platform up and running. But the high costs and low revenue streams made it impossible to continue with it. We invested a lot of personal time and money to operate the platform, but when it's over, it's over.
We are really sorry. is part of the internet history and online for one and a half decades.
Here are the hard facts:
- In 10 days the platform will stop working.
- Backup your data in this time
- We will not keep backups nor can we recover your data
July, 20th, 2020 is the due date.
Please, share your thoughts and feelings here.
Reposted bydotmariuszMagoryannerdanelmangoerainbowzombieskilledmyunicorntomashLogHiMakalesorSilentRulebiauekjamaicanbeatlevuneserenitephinangusiastysmoke11Climbingpragne-ataraksjisauerscharfArchimedesgreywolfmodalnaTheCrimsonIdoljormungundmarbearwaco6mieczuuFeindfeuerDagarhenvairashowmetherainbowszpaqusdivihindsightTabslawujcioBateyelynTabslaensommenitaeliblameyouHalobeatzalicexxxmgnsNorkNork

March 17 2010


Starting Out Organized: Website Content Planning The Right Way

Smashing-magazine-advertisement in Starting Out Organized: Website Content Planning The Right Way
 in Starting Out Organized: Website Content Planning The Right Way  in Starting Out Organized: Website Content Planning The Right Way  in Starting Out Organized: Website Content Planning The Right Way

So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Your New Project: How It Goes All Too Often

Dayone-planning in Starting Out Organized: Website Content Planning The Right Way

On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

On day two you get the following:

  • A TIFF logo (in CMYK) via email;
  • A set of logo standards that include the RGB values, via email (separately);
  • A disc full of photos with various names (like “DSC09080978″);
  • A fax that labels the photos according to their file names;
  • An email that lays out the top and second-level navigation, as the client sees it;
  • A phone that makes last-minute changes to the top-level navigation;
  • An email with a DOC attachment full of text for various pages (but not all of it).

And on day three you get an email that makes half of the junk you got yesterday obsolete.

You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

  • Allows you to organize deliverables from various media;
  • Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
  • Helps you collaborate with all stakeholders;
  • Shows how the project is developing and what’s left to do;
  • Ideally launches you into the actual design and building phase.

The Architecture: Every Brick Counts

Architecture-planning in Starting Out Organized: Website Content Planning The Right Way

Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

You can plan your architecture in many ways.

Card Sorting

Indexcards-planning in Starting Out Organized: Website Content Planning The Right Way

Card sorting is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

  • What’s it for?
    To gather feedback on what pages should go where on your website.
  • What’s good about it?
    It’s a great way to learn the assumptions of multiple users.
  • What’s bad about it?
    The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
  • In sum
    One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

A few resources to learn more about card sorting:

Content Inventories

Content-inventory-planning in Starting Out Organized: Website Content Planning The Right Way

A content inventory is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

  • What’s it for?
    To understand the context and purpose a website’s pages.
  • What’s good about it?
    Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
  • What’s bad about it?
    Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
  • In sum
    A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

A few resources to learn more about content inventories:

Paper and Sketchboards

Sketchboarding-planning in Starting Out Organized: Website Content Planning The Right Way

Sometimes paper just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

  • What’s it for?
    To quickly and collaboratively sketch out a website architecture.
  • What’s good about it?
    You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
  • What’s bad about it?
    Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
  • In sum
    Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

A few resources to learn more about sketchboarding:

Site Map Diagrams

Illustrativegraphs-planning in Starting Out Organized: Website Content Planning The Right Way

A visual site map is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

  • What’s it for?
    To visually explain the relationships between pages on your website.
  • What’s good about it?
    Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
  • What’s bad about it?
    The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
  • In sum
    A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

A few resources to learn more about site maps and diagrams:

Which to Choose?

There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

When picking your method of architecture planning, consider these things:

  • How big is the website?
    The sheer size of some websites makes some of these methods cumbersome or impossible.
  • What type of website is it?
    The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
  • Who is your client?
    The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
  • Consider your workflow.
    Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

A few tips on architecture planning:

  • Organize content according to user needs, not an organizational chart or how the client structures their company.
  • Give pages clear and succinct names.
  • Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
  • Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
  • If you can’t succinctly explain why a page would be useful to someone, omit it.
  • Plan the architecture around the content. Don’t write content to fit the architecture.
  • When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
  • Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

The Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

HTML Wireframes

Yourownwireframes-planning in Starting Out Organized: Website Content Planning The Right Way

Making your own wireframe is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

  • What’s it for?
    HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
  • What’s good about it?
    They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
  • What’s bad about it?
    Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
  • In sum
    HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

A few tips on manual wireframes:

  • Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
  • Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
  • For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

Plain Old Text

Texteditor-planning in Starting Out Organized: Website Content Planning The Right Way

Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

  • What’s it for?
    Text editors are a quick and easy way to organize text for a website.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
  • What’s bad about it?
    The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
  • In sum
    Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

A few tips on using text editors for website planning:

  • If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
  • Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.


Powerpoint-planning in Starting Out Organized: Website Content Planning The Right Way

As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

  • What’s it good for?
    Slideshow creators are used to easily sketch the structure and to link pages.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
  • What’s bad about it?
    Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
  • In sum
    Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

A few tips on using slideshow creators for website planning:

  • Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
  • Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.


Jumpchart-planning in Starting Out Organized: Website Content Planning The Right Way

Jumpchart lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

  • What’s it good for?
    Jumpchart is a natural extension of manual HTML wireframes.
  • What’s good about it?
    It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
  • What’s bad about it?
    Jumpchart requires a paid subscription to plan larger websites.
  • In sum
    Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

A few tips on using Jumpchart for website planning:

  • Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
  • Use the permission system to control who can see and who can edit.
  • For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

Putting It All Together

Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

The Inevitable Revisions: Being Fleet of Foot

Running-planning in Starting Out Organized: Website Content Planning The Right Way

Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

  • Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
  • Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
  • Bundle revisions. You’ll kill your budget if you make individual changes as they come.
  • Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
  • Make sure your contract specifies consequences for revisions. Be explicit.

Collaboration: Bring Stakeholders Together or Die Trying

If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

  • If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
  • Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
  • Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

Explaining: Heel Meet Arrow

Achilles-planning in Starting Out Organized: Website Content Planning The Right Way

You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

  • Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
  • Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

Moving On: The Button That Launches a Thousand Ships

So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

A Few Parting Practical Tips

  • Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
  • Keep all deliverables in one place, and put them there as soon as you get them!
  • Ask for written changes, preferably via email so that they’re time-stamped.
  • Use Google’s advanced site search to quickly learn about the current website’s size and shape if your project is a redesign.
  • Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
  • Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

Wrapping Up

As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

  • Understand the goals of the website.
  • Gather resources.
  • Organize resources at top level and then at page level.
  • Assess your work based on user profiles.
  • Demonstrate your plan.
  • Get approval.
  • Move on.

So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.


© Kristin Wemmer for Smashing Magazine, 2010. | Permalink | 10 comments | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ia, planning

January 15 2010


Fantastic Information Architecture and Data Visualization Resources

By Cameron Chapman

Information architecture can be a daunting subject for designers who’ve never tried it before. Also, creating successful infographics and visualizations takes skill and practice, along with some advance planning. But anyone with graphic design skills can learn to create infographics that are effective and get data across in a user-friendly manner.

Below are a collection of resources to get you going down the information architecture and data visualization path. Whether you just want to become more familiar with infographics and data visualizations for occasional use or are thinking of making it a career, the resources below will surely come in handy. There are also some beautiful examples and more roundups to see even more fantastic graphics.

1. Information Architecture Design Sites

Information architecture can be so complex, it’s no wonder there are entire sites dedicated to it. The sites below range from sites of individual information architects who share resources with their colleagues, to professional organizations, to design sites that include extensive information architecture resources.

Info Design Patterns

Infodesignpatterns in Fantastic Information Architecture and Data Visualization Resources

Info Design Patterns offers up information architecture news (a fairly new section without a lot of content) and a searchable database of info design patterns. The pattern database is particularly useful for those trying to decide how they want to display a set of data to their users or readers. Some of the patterns include:


Infodesign in Fantastic Information Architecture and Data Visualization Resources

InfoDesign is an excellent resource for anyone interested in information architecture. They have hundreds of articles aggregated and broken down into categories including accessibility, content strategy, interaction design, prototyping and more. Articles featured on the site include:

Information Design Watch

Informationdesignwatch in Fantastic Information Architecture and Data Visualization Resources

Information Design Watch from Dynamic Diagrams offers a newsletter and regular articles on information design from around the world. They include tons of great, real-world examples of infographics and information architecture designs, and are a great resource if you’re looking for some inspiration. Some of their posts include:

UXBooth – Information Architecture

Uxbooth in Fantastic Information Architecture and Data Visualization Resources

UXBooth is a community blog about usability, user experience and information architecture. The “Information Architecture” section currently contains only three articles, but the quality of each article is always top notch.

Design Crux – Information Design

Designcruxinformationdesign in Fantastic Information Architecture and Data Visualization Resources

Information Design from Design Crux offers up articles on information architecture and design examples. Both are excellent resources, with the examples being particularly inspiring. Some of their articles include:

Cool Infographics

Coolinfographics in Fantastic Information Architecture and Data Visualization Resources

Cool Infographics is a blog that collects interesting infographics from around the web and beyond. It’s definitely a first-rate resource for finding inspiration and examples of great infographics and information architecture designs. Some recent posts include:

Jjgnet in Fantastic Information Architecture and Data Visualization Resources offers up resources for experience design and information architecture written by Jesse James Garrett. There are downloadable PDFs, articles, and interviews and other resources included. Some examples of articles included are:

Information Architecture from A List Apart

Alistapartinformationarchitecture in Fantastic Information Architecture and Data Visualization Resources

A List Apart has an excellent Information Architecture category with more than 20 great articles (dating back as far as 2000). Some articles included are:

Boxes and Arrows

Boxesandarrows in Fantastic Information Architecture and Data Visualization Resources

Boxes and Arrows is an excellent blog that explores why designs work and how to design better based on user experience data. Some example posts include:

Information Design from AIGA

Aigainformationdesign in Fantastic Information Architecture and Data Visualization Resources

AIGA has an Information Design section on their website with a dozen articles. While it’s not a huge resource, the articles are very high quality and include:

Good Magazine

Goodmagazine in Fantastic Information Architecture and Data Visualization Resources

Good Magazine has an excellent collection of infographics covering a very broad range of topics. This is an excellent resource if you’re looking for inspiration. Some examples include:

Flowing Data

Flowingdata in Fantastic Information Architecture and Data Visualization Resources

Flowing Data showcases infographics covering a variety of subjects. They collect graphics from all over the web and explain why the graphic works well. Some example posts include:

2. Information Architecture Articles and Resources

The articles and resources listed below appear on sites that don’t focus solely on information architecture. They’re as useful as the resources above, but focus on individual aspects of information design. Some excellent beginners guides and tutorials are also included here.

Organic Information Design

Organicinformationdesign in Fantastic Information Architecture and Data Visualization Resources

The Organic Information Design PDF is from Ben Fry, and served as his Master’s Thesis at the MIT Media Lab. It introduces a new type of interactive information design using large quanities of data from dynamic sources.

The Information Design Approach to Web Development

Infodesignapproachtowebdev in Fantastic Information Architecture and Data Visualization Resources

This article from Digital Web Magazine offers up a new approach to web development using information design techniques. It’s a great resource for both information architects and web developers.

InfoGraphic Designs: Overview, Examples and Best Practices

Inforgraphicdesignsoverview in Fantastic Information Architecture and Data Visualization Resources

This post from instantShift is one of the more comprehensive beginner’s guides to information architecture. It includes advice on how to design around a given set of data and offers some amazing examples of successful information design.

Information Architecture Tutorial

Informationarchitecturetutorial in Fantastic Information Architecture and Data Visualization Resources

This is a complete tutorial series from Webmonky on how to create successful information graphics. There are five parts, each addressing a different aspect of information architecture in depth.

Complete Beginners Guide to Information Architecture

Beginnersguidetoinfoarchitecture in Fantastic Information Architecture and Data Visualization Resources

This is another comprehensive article geared toward those just starting out with information architecture and infographics. It includes some background information, links to notable information architects, resources, and links to common tools used in creating infographics.

3. Excellent Examples of Data Visualization

Below are some beautiful examples of infographics to get your creative juices flowing. They cover everything from pop culture (The Best Beer in America, Kill Bill) to political issues (Presidential First 100 Days in Office) to global environmental issues (No More Fish in the Sea, The Great Pacific Garbage Patch).


Lifemap in Fantastic Information Architecture and Data Visualization Resources

Dentro de la cabeza de Bob Dylan

Dentrodelacabezadebobdylan in Fantastic Information Architecture and Data Visualization Resources


Infografias in Fantastic Information Architecture and Data Visualization Resources

The Best Beer in America

Bestbeerinamerica in Fantastic Information Architecture and Data Visualization Resources

Kill Bill Infographic

Killbillinfographic in Fantastic Information Architecture and Data Visualization Resources

Suburban Bliss

Suburbanbliss in Fantastic Information Architecture and Data Visualization Resources

No More Fish in the Sea

Nomorefishinthesea in Fantastic Information Architecture and Data Visualization Resources

The First 100 Days: Roosevelt to Obama

First100days in Fantastic Information Architecture and Data Visualization Resources

Vampire Energy

Vampireenergy in Fantastic Information Architecture and Data Visualization Resources

On Driving

Ondriving in Fantastic Information Architecture and Data Visualization Resources

Periodic Table of Typefaces

Periodictableoftypefaces in Fantastic Information Architecture and Data Visualization Resources

Flickr User Model, v0.3

Flickrusermodel in Fantastic Information Architecture and Data Visualization Resources

How Education Spending Affects Graduation Rates

Howeducationspendingaffectsgradrates in Fantastic Information Architecture and Data Visualization Resources

The Most Committed Crimes in the Country

Themostcommittedcrimes in Fantastic Information Architecture and Data Visualization Resources

The Great Pacific Garbage Patch

Greatpacificgarbagepatch in Fantastic Information Architecture and Data Visualization Resources

4. Other Roundups

Below are a few more roundups of information graphics and data visualizations. They include tons of great examples to inspire you and give you ideas.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...