Feed Subscriptions
Rolling Links
- hyperexperience for a better sense of reality
- Cartoons on the backs of business cards.
- Science Blogs
- Open Code Blog - New York Times A blog about open source technology at The New York Times, written by and primarily for developers.
- Kottke: Fine Hypertext Products
Introduction
Design is a difficult problem space. Identifying the ‘best’ design solution for a particular problem is a nontrivial, often difficult process. Any understanding of what a ‘best’ design is must necessarily incorporate both the aesthetic and functional values and the resultant impression of the object’s use - is an object useful, given a purpose for a kind of person. This is the concept of the object’s affordance. Affordance is a set of action possibilities - or perceived action possibilities - for a particular object.
Aesthetics plays a dominant role in this discussion as well. Good design is often associated with some kind of positive aesthetic judgment. The value we associate with design seems to be inextricably linked to human experiential use and perception.
The Fitness of Design
In life a ‘good’ life form is simply one that can continue to live and, ultimately, reproduce. To live a life form needs to be successful at getting nutrients (eating and breathing) and in reproducing to continue its genetic code.
Design is a creativity problem. Finding a ‘great’ design is not necessarily a purely mechanical affair. Despite this, developing a design so that it is ‘good’ – at least functionally so, could be mechanical with a process of iterative evaluation.
Design as a Search Problem
We’ll begin now by describing design as a search problem, where the goal is to find the best design is one that meets our test of fitness in terms of human attention. The problem space is made up of search criteria that are deeply rooted in experiential perceptions of human beings. We choose to define design in terms of human attention and perception. Human experiential accounts of design interaction are valuable to us as tools for measuring design. We can’t produce them on our own, we require actual understanding of how people interact with software, interpret stimuli, or develop skills. There are numerous examples of software design that are out there, interacting with humans, which have the unfortunate lack of a design researcher watching them. Recycled Research codifies these human experiential accounts of interaction.
Recycled Research is the coupling a structured research goal to a distributed medium, such as software, for the purposes of structured data collection and hypothesis testing. Procedurally, first-tier users, which we think of as something like assistant researchers or experimenters, install software on websites, installations, or intranet where it will be exposed to second-tier users, those we generally think of as participants in traditional studies and traditionally describe as end users - these are the people we are evaluating the design against.
Garden Tending
If we think of this design research as a sort of ‘garden’, the goal of this framework is to, in affect, standardize the kinds of ‘design seeds’ one might start with. Although any design is fair game for experimentation and evaluation, we require a certain kind of packaging to plant them. That is the components of the design need to be mechanically adjustable in a way that we can preserve a sense of meaning.
The mechanical requirements of recycled research formalize the capability to iterate on the design in such a way as to preserve the meaning of this evaluation discussion. This is only possible because of the continuous evaluation over time. When a change in the design occurs, new data can be compared to previous data. For example, turning the sidebar of the design red - a first-tier user design change - results in initial increases in mouse activity. Because of the open nature of the process, dissemination across new first-tier users of design changes allows the change to be explored in alternate contexts and built upon in different ways. Essentially we’ve constructed a design tree, where any design decision is a branch that has the possibility for growth. Human evaluation is responsible for creating design decisions, analogous with the necessary pruning of a tree.
Iterative Mechanical Growth
One quick observation here is that a lot of the design decisions one might do are fairly simplistic. Not every iteration is interesting. In a lot of design work there is a necessary amount of attention to detail, adjusting fonts, playing with colors and so on.
A logical step in our process was adding the ability for the ‘trees’ to grow, at least in limited ways, without human intervention. This makes the metaphor of garden tending clearer. Humans are responsible for providing more than mechanical solutions and directing areas of growth. Even when the machine growth produces a truly novel design solution, recognition of its value by humans is responsible for its propagation.
What’s our basic primitive for web design, our single celled organism to evolve? What’s a single cell on a web page? It’s any html element. A div describes a block level element and a span describes an inline element. In practice we can reduce this even further. A is just a div with an inline style rule. That leaves us with a div as our single celled organism. A div can be modified by css to represent any element we can come up with on a normal web page. An img tag is just a div with a fixed height, width, and background image. This environment becomes the rest of the web page.
The genome is encoded in dna to allow the preservation of genes and traits (this is a vast oversimplification). For our divs, what describes them? There are only two properties of a div we might be concerned about. What’s in it (the content) and what it is like (or what it looks like, the style). For us, css is dna, for all intents and purposes. Css describes a div very similar to the way our dna describes us. To end up with a different element, you have only to change its css. Elements with borders have the border property enabled. Elements with large text have a large font-size selection.
In our use of css as dna, we will break each property up as much as possible and limit them as much as appropriate. So we won’t use just padding, we’ll use padding-left, padding-right, padding-top, and padding-bottom. This will let us think of each one as an individual trait. Padding-left might be a useful mutation in an environment where no other divs have padding. It would set the element off visually from the others in a linear presentation. We may also impose caps on the range of possible values, such as setting the color property to only mutate to traditional web colors - otherwise there are a lot of possible values to worry about.
Basically the only work here that we need to do is decide how often reproduction occurs, the necessary requirements for reproduction, and what the chance for mutation is (otherwise we would never see any genetic change).
Death occurs when a div isn’t fit enough to pass on its genetic material after its reproduction cycle has come up. At this point, we start over with a fresh seed div and the cycle of life begins again. We have a world (the web), so what is the necessary fitness for a div? Fitness implies that a div is good at living in the world - the genetic material is valuable and should be passed on. The easy answer is that divs live on mouse impressions - or more directly, divs live on attention. These genetic divs allow us to explore design possibilities mechanically, as they mutate and iterate through low level design decisions.
We have expanded this to a general implementation procedure for the deployment of Recycled Research require that software applications conform to a model that follows six procedural stages:
- Target Installation: The first stage involves the creation of software design as an easily embeddable or deployable instance.
- Embedded (passive) information collection: Our goal is to measure existing human experience with the design. We rely on the kinds of implicit cues about human behavior that we can get through our limited medium.
- Machine growth: The information collection provides the necessary fitness test for some level of pseudo- genetic iteration by the software itself through genetic divs, seeded by first-tier user design decisions. This expands the solution space for the design problem.
- Local Data Collection, Harvesting and Aggregation: Human experiential accounts are collected locally, data is sampled, harvested and made available to the public.
- Analytic Tools & Human Interpretation: The power of human computation is central to the value of this approach. After deployment, first-tier users are able to take advantage of the data and analytic tools to draw conclusions about the results. They can extend the work by copying or transplanting a genetic page, which in turn alters the machine growth pattern.
This creates a methodology focused on rapid design propagation with human mediated genetic modification to the design. This is possible largely because of the emphasis on a number of factors:
- Viral Propagation - Our inquiry has been structured to be a decentralized model, with possibilities for viral spread and easy embedding.
- Structuring Community Tending - Recycled research project goals (design goals, in this case) are set and adjusted by a community that observes the automated evolutionary iteration and makes high-level decisions based on associated data, analytic tools, and community discussion.
- Organic Experimental Conditions - As the software is deployed virally, we require the host to set initial seed conditions. In a sense, this promotes organic or even market driven conditions. If a condition is not interesting or valuable to the community it will be used less, or even not at all.
- Participatory Cost Model - The approach institutes a new kind of cost, a participatory one, requiring that any first-tier user of the software continue the experimental mechanism and allows iteration.
- Genetic Iteration - While human analysis is necessary for the determination of high-level success, the iterative work can be combined with a genetic algorithm that explores alterations to the initial experimental conditions. Capabilities for genetic iterative adjustments provide growth direction.
This creates the basic structure for a garden of design solutions. The only remaining step is the necessary harvesting of promising ones.
Recycled and Organic Canvas: A Sample Garden
Recycled Canvas is the primary pilot for Recycled Research, testing the methodology at large before more flexible experimentation. It can be viewed as typical of what we expect a Recycled Research experiment to look like. It is a customizable design for Wordpress, a popular blogging engine. On install, users are choose information views and customization options. Each first-tier user will be generates their own content, of variable length and amount, with variable topics, style, and domain.

The experiment measures a number of usability goals and attention metrics (such as mousetracking). Users were given the opportunity to utilize an analytic tool for mouse tracking. AI processes are used to offer possible interpretation of the results, such as identifying mouse tracks indicative of reading. A discussion interface created conversations focused on pattern identification of user behavior and comparisons between domain content. Users also noted the impact of customizations to the design outside the pre-seeded experimental options (such as color changes, etc.). Followup versions of the pilot included low level support for random variable mutation (organic canvas) similar to the outline described previously.
A Question of Creativity
The question to evaluate our work is, does this kind of system actually produce better, more creative design solutions? Anecdotally it appears that this is in fact the case. We’ve explored an iteration of Recycled Canvas, called Organic Canvas, which does genetically iterate through solution paths. A lot of the machine growth solutions cover some of the common design iterations made by first-tiered users in the recycled canvas experiment. The solution paths explored, and the modifications made by first-tier experimenters tend to be significantly more complex. It is difficult to argue that they are better designs but they are more complex and less intuitive ones. Does the machine ever come up with truly novel designs when left to its own growth cycle? We noticed a handful of cases where that could be true.
The act of creation has changed. This is not a radical change. The nature of design is that it often lends itself to the incorporation of existing elements and approaches. Design is not a blank slate. The garden approach described here more clearly suggests that. The emphasis is even more clearly on the selection and manipulation of existing design templates. This not only provides more design inspiration it also allows offline design exploration. A designer can create a design and then return to it later to see how it has changed and how it has been evaluated by a large number of people. We feel that this is suggestive of the promise of machine iteration and pseudo-genetic algorithms for human tended design and creative acts. Conceptually we move from being the machinists of design to the stewards and gardeners of a machine guided growth process.
References
Couper, M.P. 2000. Web Surveys: A Review of Issues and Approaches. The Public Opinion Quarterly.
Dorst, K., Cross, N. 2001. Creativity in the design process: co-evolution of problem–solution. Design Studies.
Doubleday, A., Ryan, M., Springett, M., Sutcliffe, A. 1997. A comparison of usability techniques for evaluating design. In Proc. ACM Conference on Human Factors in Computing Systems
Gibson, J. 1997. The Theory of Affordances. In Perceiving, Acting, and Knowing.
Goldberg, D., Holland, J. 1988. Genetic Algorithms and Machine Learning. Journal of Machine Learning.
Koestler A. 1996. The Act of Creation. London: Pan.
Von Ahn, L., Liu, R., Blum, M. 2006. Peekaboom: A Game for Locating Objects in Images. In Proc. ACM Conference on Human Factors in Computing Systems.

This thing has 6 Trackbacks
[…] we’ve crafted a page with some sparse information about it to deal with all of the visitors. I encourage you to leave […]
[…] the experiment write up at Creative Synthesis and have a look at the end […]
[…] to come up with the perfect web page design. The Telegraph reports that an organisation called Creative Synthesis has designed evolutionary software that takes a Wordpress theme and changes it gradually based on […]
[…] On connaissait déjà des logiciels ou des robots sachant évoluer et muter pour mener à bien une tâche de manière efficace, sans avoir besoin de l’intervention d’un programmeur. On connaît aussi les sites web personnalisables, qui se souviennent de vos passages sur leurs pages et qui personnalisent leur contenu au gré de votre navigation. CreativeSynthesis propose d’aller un cran plus loin, rapporte-le DailyTelegraph à la suite du NewScientist : créer un site web qui transforme ses couleurs, ses polices et ses liens en réponse à l’activité non pas d’un internaute, comme c’est le cas avec les sites personnalisables, mais de l’activité de tous les internautes (lire les explications des auteurs). […]
[…] On connaissait déjà des logiciels ou des robots sachant évoluer et muter pour mener à bien une tâche de manière efficace, sans avoir besoin de l’intervention d’un programmeur. On connaît aussi les sites web personnalisables, qui se souviennent de vos passages sur leurs pages et qui personnalisent leur contenu au gré de votre navigation. CreativeSynthesis propose d’aller un cran plus loin, rapporte-le DailyTelegraph à la suite du NewScientist : créer un site web qui transforme ses couleurs, ses polices et ses liens en réponse à l’activité non pas d’un internaute, comme c’est le cas avec les sites personnalisables, mais de l’activité de tous les internautes (lire les explications des auteurs). […]
[…] The game was inspired by Creative Synthesis’ research project: Human Tended Gardens of Evolutionary Design. […]