This is the archive of version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

/ log / 30th Mar, 2011 /

Web Design as Narrative Architecture

New Adventures Paper

Stories are everywhere. When they don’t exist we make up the narrative — we join the dots. We make cognitive leaps and fill in the bits of a story that are implied or missing. The same goes for websites. We make quick judgements based on a glimpse. Then we delve deeper. The narrative unfolds, or we create one as we browse.

Mark Bernstein penned Beyond Usability and Design: The Narrative Web for A List Apart in 2001. He wrote, ‘the reader’s journey through our site is a narrative experience’. I agreed wholeheartedly: Websites are narrative spaces where stories can be enacted, or emerge.

Henry Jenkins, Director of Comparative Media Studies, and Professor of Literature at MIT, wrote Game Design as Narrative Architecture. He suggested we think of game designers, ‘less as storytellers than as narrative architects’. I agree, and I think web designers are narrative architects, too. (Along with all the multitude of other roles we assume.) Much of what Henry Jenkins wrote applies to modern web design. In particular, he describes two kinds of narratives in game design that are relevant to us:

Enacted narratives are those where:

[…] the story itself may be structured around the character’s movement through space and the features of the environment may retard or accelerate that plot trajectory.

Sites like Amazon, New Adventures, or your portfolio are enacted narrative spaces: Shops or service brochures that want the audience to move through the site towards a specific set of actions like buying something or initiating contact.

Emergent narratives are those where:

[…] spaces are designed to be rich with narrative potential, enabling the story-constructing activity of players.

Sites like Flickr, Twitter, or Dribbble are emergent narrative spaces: Web applications that encourage their audience use the tools at their disposal to tell their own story. The audience defines how they want to use the narrative space, often with surprising results.

We often build both kinds of narrative spaces. Right now, my friends and I at Analog are working on Mapalong, a new maps-based app that’s just launched into private beta. At its heart Mapalong is about telling our stories. It’s one big map with a set of tools to view the world, add places, share them, and see the places others share. The aim is to help people tell their stories. We want to use three ideas to help you do that: Space (recording places, and annotating them), data (importing stuff we create elsewhere), and time (plotting our journeys, and recording all the places, people, and memories along the way). We know that people will find novel uses for the tools in Mapalong. In fact, we want them to because it will help us refine and build better tools. We work in an agile way because that’s the only way to design an emerging narrative space. Without realising it we’ve become architects of a narrative space, and you probably are, too.

Many projects like shops or brochure sites have fixed costs and objectives. They want to guide the audience to a specific set of actions. The site needs to be an enacted narrative space. Ideally, designers would observe behaviour and iterate. Failing that, a healthy dose of empathy can serve. Every site seeks to teach, educate, or inform. So, a bit of knowledge about people’s learning styles can be useful. I once did a course in one to one and small group training with the Chartered Institute of Personnel and Development. It introduced me to Peter Honey and Alan Mumford’s model which describes four different learning styles that are useful for us to know. I paraphrase:

  1. Activists like learning as they go; getting stuck in and working it out. They enjoy the here and now, and are happy to be dominated by immediate experiences. They are open-minded, not sceptical, and this tends to make them enthusiastic about anything new.
  2. Reflectors like being guided with time to take it all in and perhaps return later. They like to stand back to ponder experiences and observe them from many different perspectives. They collect data, both first hand and from others, and prefer to think about it thoroughly before coming to a conclusion.
  3. Theorists to understand and make logical sense of things before they leap in. They think problems through in a vertical, step-by-step logical way. They assimilate disparate facts into coherent theories.
  4. Pragmatists like practical applications of ideas, experiments, and results. They like trying out ideas, theories and techniques to see if they work in practice. They positively search out new ideas and take the first opportunity to experiment with applications.

Usually people share two or more of these qualities. The weight of each can vary depending on the context. So how might learning styles manifest themselves in web browsing behaviour?

  • Activists like to explore, learn as they go, and wander the site working it out. They need good in-context navigation to keep exploring. For example, signposts to related information are optimal for activists. They can just keep going, and going, and exploring until sated.
  • Reflectors are patient and thoughtful. They like to ponder, read, reflect, then decide. Guided tours to orientate them in emergent sites can be a great help. Saving shopping baskets for later, and remembering sessions in enacted sites can also help them.
  • Theorists want logic. Documentation. An understanding of what the site is, and what they might get from it. Clear, detailed information helps a theorist, whatever the space they’re in.
  • Pragmatists get stuck in like activists, but evaluate quickly, and test their assumptions. They are quick, and can be helped by uncluttered concise information, and contextual, logical tools.

An understanding of interactive narrative types and a bit of knowledge about learning styles can be useful concepts for us to bear in mind. I also think they warrant inclusion as part of an articulate designer’s language of web design. If Henry Jenkins is right about games designers, I think he could also be right about web designers: we are narrative architects, designing spaces where stories are told.

The original version of this article first appeared as ‘Jack A Nory’ alongside other, infinitely more excellent articles, in the New Adventures paper of January 2011. It is reproduced with the kind permission of the irrepressible Simon Collison. For a short time, the paper is still available as a PDF!



Browse More Articles


  1. 1. By Marjolein Visser on 30th Mar ’11 at 10:28am

    Thoughtful as always with lots of meaty new reads to follow-up. thank you! Narrative in web design reminds me of Nicholas Negroponte’s ideas in (I think) Being Digital. It’s been years since I read it. I recall that he wrote about the possibility of the web as a powerful story-telling medium as well.

  2. Jon 陳’s profile 2. By Jon 陳 on 30th Mar ’11 at 13:36pm

    Thanks, Marjolein. I’ve taken the liberty of linking to the book you mention in case anyone is interested to read some prophetic prose. Hope you don’t mind. :)

  3. 3. By Tim on 31st Mar ’11 at 07:38am

    Oh, I *love* this kind of stuff. Cheers Jon. :)

  4. 4. By Kevin Finlayson on 1st Apr ’11 at 07:07am

    Excellent article, Jon — concise and rich with insight. Thank you.

  5. 5. By Stephanie on 11th Apr ’11 at 03:29am

    I have never really thought about a website in this way before, but this article has really opened my eyes to the narrative of a site.

    I love the depth this article goes to and the way it relates to different types of people, describing how each person would read and negotiate a website differently. I think this is a great way of connecting people to the post, and sharing interest.

    I also had a look at the Mapalong site and loved it. Such a brilliant idea and something that I definitely want to get involved in!

  6. 6. By Barry Reynolds on 26th May ’11 at 14:43pm

    Another good book in 'Don’t make me think' about web usability. Along the same sort of lines as this article - explained very clearly and a quick, easy and effective read.

  7. 7. By Alex on 15th Jul ’11 at 04:15am

    I must admit this approach to web design is a new one on me. At this point I’m still undecided whether this is genius or over analysis, but it’s definitely given me something to think about :)

  8. 8. By Martin Varesio on 21st Jul ’11 at 05:05am

    Love the depth this article goes to and the way it relates to different types of people!!

  9. 9. By Jeff on 2nd Aug ’11 at 09:44am

    Storify seems to be a “meta" emergent narrative space, allowing you to create a story from other social media sites.

  10. 10. By Jorge Cocompech on 23rd Feb ’12 at 09:48am

    Hello Jon:

    Where can we download the paper?


  11. 11. By Guillermo Mendoza on 6th Oct ’12 at 21:44pm

    Excellent article, Jon — concise and rich with insight! Very Nice

  12. 12. By Esteban Valles on 22nd Feb ’13 at 12:45pm

    Thanks, what a great article.

Comments for this entry are closed.

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {66}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {0}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By George in Copywriting, Experience Design, Daleks & Julio:


  3. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  4. By DarkStar in Smoothing out the Creases in Web Fonts:

    I agree with Leicester that table is great!

  5. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

  6. By Steve Blakeborough in Display Type & the Raster Wars:

    Hi Jon, In Elliot’s recent and informative article he suggested you might be bullied…

Live the questions and one day grow into the answers.