/ 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?

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!

—∞—

Share

Browse More Articles

12 Comments

  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?

    Congrats.

  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.

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

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 {65}

    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 {1}

    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 Anshed in The Paragraph in Web Typography & Design:

    i like your explanation about Paragraphs and puntuation. you have described with a great detail. Thanks for this…

  2. By Anshed in The Paragraph in Web Typography & Design:

    i like your explanation about Paragraphs and puntuation. you have described with a great detail. Thanks for this…

  3. By Anshed in The Paragraph in Web Typography & Design:

    i like your explanation about Paragraphs and puntuation. you have described with a great detail. Thanks for this…

  4. By Sell Any Car Dubai in The Paragraph in Web Typography & Design:

    i like your explanation about Paragraphs and puntuation. you have described with a great detail. Thanks for this…

  5. By Sell Any Car Dubai in The Paragraph in Web Typography & Design:

    i like your explanation about Paragraphs and puntuation. you have described with a great detail. Thanks for this…

  6. By Martin Varesio in Ampersand, the Aftermath:

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

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.