In search of a better way to design
I’ve recently been writing a few posts about the evolution of web design, particularly the impact of rich media, namely Flash, on modern web design. Other web design thinkers, such as Jeff Croft, have also been thinking about the new era of web design and the problems we need to address.
For more than a decade web designers have relied on site maps and wireframes to be their staple tools for designing websites. While these tools have served us well, they fall short of the modern information architecture needs called for by AJAX and rich media sites. The problem is interactive experiences are evolving beyond the idea of a page, which are the fundamental building blocks of a site map and wireframe. So, here we find ourselves wrestling with the question: How do we design for modern interactive experiences?
The page problem
Site maps become problematic when websites aren’t just a series of linked pages. Flash was the first to challenge the notion of a “page” by allowing designers to stream content without needing to refresh the entire browser window. Then, AJAX opened the door for HTML “pages” to stream content. Suddenly, the idea of a wireframe for a planning document broke down. A wireframe is a terrible planning tool for two reasons: 1) they lock a client and designer into layout decisions prematurely, and 2) they are based on box model design.
If not a page, then what?
The truth is we’ll never stop developing pages. We humans have been perfecting them for thousands of years. We shouldn’t lose all of the lessons we’ve learned from crafting information into pages. And, in many ways the screen acts as a page itself by defining a similar ratio rectangle on which information is displayed. However, content on the screen isn’t static as it is with a page, which is why I prefer to think of it as a stage. I see the stage as a place in which elements of content become actors telling a story through interaction.
Sitemap alternatives
Given that a sitemap is a document describing how pages link to each other, a sitemap is rendered useless in the face of pageless information architecture. I’ve seen some alternatives for a site map, but nothing that makes me want to stop searching for a better tool.
Wireframe alternatives
Pageless web design also calls for an alternative to a wireframe. One compelling alternative is the page description diagram. What I like about this solution is that it doesn’t involve layout to express the purpose of the content on the page. It is still page dependent thinking, but I think it could be easily modified to be a state description diagram. I think the best tool is going to be one that uses a flow chart/storyboard format.
Designing mock-ups
Design is also impacted by moving beyond the page. I still believe in content driven design, but without a page how does one create a design? When we were thinking in terms of pages, we could use page element guides like the one Andy made for CSS Zengarden.
I think the first step is to stop designing pages and to start designing elements that make up a visual center. Andy Clarke developed his latest blog design using a technique he calls scraplets. 37signals, Jonathan Snook, and Mike Rundle examine the content to pull out logical patterns, which I believe apply to design regardless of pages or box models. To make these patterns work, we now have to think of the overarching pattern of how the data flows.
What say you in this conversation?
This is a fantastic time to be involved in this conversation because these are the formative years of our practice as web developers. As an industry, we are in the middle creating the tools and methodology for rich interactive experiences. It is the lessons we’re learning right now that will guide future generations of web developers. Rich interactive experiences have been evolving for over a decade now. YouTube was just purchased for $1.65 billion. All of the major TV players are gearing up for a fight with YouTube. The only trump card TV has over YouTube and the other internet video is quality, which means YouTube and the Google crew are going to working hard on increasing quality (is this where Google’s large purchases of dark fiber come into play?). Those who solve the problems facing the standardization of rich interactive development practices will be to the Rich Web what the Jeffery Zeldmans and Molly Holzschlags were to the Web 2.0 movement.
What innovative planning docs to you use? Do you think beyond the page?
Comments
I am good at dreaming, let me try some crazy postulating!
I saw a multi point touch screen (yes a TED.com talk) and decided that is my favorite way to interact with technology. Picture a drafting board size and angle screen. You can pull up a keyboard and size it to your own hands or just talk of course… I like that as the interface of the future. Touching two points and dragging away from each will allow you to zoom in. I like the idea of scale, of zooming in and out in a Google Earth way. That is a great way to interact with any physical product on the web. Look around see something, zoom in, rotate it. I want everything on one page in an organized/decorated creative way, then I want to zoom in on what is interesting. I don’t know what kind of programming that is. It seems to me that nature has a very good structure for containing a lot of information at several levels…
What about the dewey decimal system? Just though I would throw that out there haven’t looked into it. When I am looking at educational stuff it would be nice to cross referance to similar sites with a universal organizational system…
I haven’t been in second life but I think I like that model- maybe I am prejudice from reading cyberpunk novels. But why do I have to have an avatar can’t I look anonymously?
i prioritize the content then base my layout decisions off of that. simple I know.
i have a boner for ajax. shhhh…. don’t tell.
[…] I was reading Justin Kistners’ blog, Metafluence, and came across his post “In search of a better way to design.” He makes the argument that wireframes are bad when it comes to creating interactive design. He then introduces the idea of page description diagrams originally introduced by Dan Brown at Boxes and Arrows. A page description diagram is basically a text-based description of the site breaking down the priority of site elements on the page. It is used by some as an alternative to wireframes. […]
For static pages (describing a static designed website, weblog, portal, or any other “old type” of web application, using or not dynamic content fetched through PHP or ASP or other backend technology) you can still use sitemaps and old style diagrams to build upon, because the information is displayed through a series of designed templates for every page and the form of the page is basicly the same, just the information is refreshing.
For dynamic pages (Flash sites and applications mostly, but Javascript/AJAX based portions of a static page can be also considered here) you can use storyboards (just like in motion graphics) because the form of a certain page is changing depending on the content displayed.
There are ofcourse hybrids - static pages designed in Flash (where a Flash website can look and act the same as a HTML website, but with funky animations for transitions of pages), or websites build upon user-configurated on-the-fly templates (Google, Yahoo all have pages that can be configurated freely by the users).
One must see that the difference is in the layout of the page. Not in the information displayed.
Also, a sitemap is just a map for the links in a website. You can have a sitemap for a dynamic page also (Flash sites have links too).
So basicly, for a HTML based website with a fixed layout design you still use page diagrams and for dynamic layout design for Flash based applications you use storyboards and scripts to describe the actions and links.
Simple.
Allow me to draw your attention to my Ajilon pageless white-labeled offer.
The website market will explose:
1. if a technology product exists to replace the obsolete page approach so as to advance the state of website technology to the point of having the website supply curve drop significantly.
2. if it is properly packaged and commercialized.
The Ajilon white labeled website production, design amd maintenance service does that: the url becomes a query and its result-set is the website constituted of the most advanced functionnalities characterizing conventional paged-based websites. My Montreal Solution Center and its back-up center in Raleigh N.C. insure its commercialization.
The thrust of my argument is the capacity of my service to drop the cost curve to supply websites and stores at a price that users will find affordable and even well below their price tolerance threshhold. Once that occurs, users will test a variety of features and develop a taste for them. Then the market will become demand driven, like with mobile phones, where initially mobile network providers gave away the phones against a contract. Users now change phone just for the features!
There will be 2 revenue flows: subscription fee and advertizing placements.
Again, based on the assumption that the price elasticity of demand for websites is highly superior to 1:
Ajilon’s technology product bundled in the white labeled service will drop costs that companies using the labor intensive page technology cannot not match, and that clients, smbs, entreprises will gladly accept.
The opportunity cost to using paged website technology is not only the foregone revenues but also the forgone dominant position on the website market.
Ajilon is a vendor consolidator who can scale from a 20$ package to the Fortune 500 package
Ajilon does not use the hosting notion because it has no pages to host: it has a data-driven result-sets. Hosting fees become thus obsolete. It is website production fees, maintenance fees and ads that we should talk about.
Ajilon uses it itself
The offer can fit into the call flow of your other services. Sales teams could at anytime transfer the call by a hot button to Ajilon attendants.
Ajilon has ways to fit into billing platform so that there be only one bill.
It will be a pleasure to speak to you.
Cheers!!
Paul-André Dupuis
Directeur commercial
Ajilon inc
1155, rue Université
Bureau 1410
Montréal Qc
514 875-9520, x230