Illustration by

Building Nonlinear Narratives for the Web

The Tiv people of Nigeria tell a story about the early world, when things were different. It’s about Aondo, the Sky, and how he lost his relationship with humans. When the earth was still new, Aondo was close enough that people could stretch out their hands and touch him. For many years, he and the humans led a quiet existence, and everyone went about their business.

文章继续下面

但有一天,一切都改变了。亚达多坐在地球上的地方,看着人们来吧。然后:走出他见过的最美丽的女人。Aondo对她着迷,所以他悄悄地悄悄地看着她的厨师。当她烹饪时,突然间,她不小心把他撞到了鼻子里。

艾多的伤害和尴尬,所以他撤退了。更远,更远,直到他远远超过地球。这就是为什么,TIV人说,你无法触及天空。

Screenshot of Senongo Akpem’s Pixel Fable site, which is a collection of interactive African children’s stories.
像素寓言是一个互动的非洲儿童故事的集合。

我是tiv,我和这样的寓言一起长大了。2011年,我开始了像素寓言as a way to tell these Nigerian stories digitally. That story about Aondo, “Why the Sky Is Far Away,” was the first one I designed and built. I used augmented reality to make the animations feel more interactive (along with some wonderfully spaghetti parallax JavaScript). But the story was still a single HTML page, told from one perspective, along a linear timeline. My translation from oral tale to web page was too direct—I hadn’t captured the multifaceted ways a story could exist online.

例如,我可以基于同一个HTML构建两个版本,分为女性视角和Aondo视角。相互竞争的叙述将读者塑造成侦探,探索和对比细节,以弄清整个故事。或者,我可以结合数据可视化来反映昂多的情绪:通过将雷雨和温度等天气数据与“天空情绪指示器”相结合,我可以将昂多的情绪状态设计成一个独立的视觉方面。

无论是路由都提供了一种扭曲或碎片的方法,将图层添加到中央叙述 - 将原始的TIV故事转换为非线性,更细致的和链接的体验,更接近网络本身如何工作。

我想为你做这件事像素寓言,我也想向您展示如何做到这一点。这意味着冒险超越我们的基本粘土。但首先,让我们深入了解非线性故事

非线性叙事在网络中的作用#第2节

网络以可以与我们的传统观点冲突的方式运行,即“故事” - 在集合开始,中间和结束时。内容块,跨越各种频道,设备和格式。鉴于此信息蔓延,我们如何定义故事线,角色,互动以及观众的角色?

提示非线性叙述。它们是围绕一个故事组织的相关内容的集合。它们包括视频、文本、链接、音频、地图、图像和图表。它们条块分割的特性给了它们难以置信的灵活性,使它们成为我们在网上探索、从一条信息跳到下一条信息的完美工具。

即使他们不一定遵循经典的故事结构,它们仍然有许多相同的部分:英雄,恶棍,地点,情节。这是如何开发和连接的方式,这可能看起来意外。非线性叙述之一的超级大国是他们如何让您随着时间的推移建立和改进它们。例如,VOX的卡片故事流通过在开发中发布相关比特来帮助我们汇总有关复杂新闻故事的信息 - 是否是一个问答MARS的人类探索that provides context in bite-sized form, or a stream of more info on疾病爆发. 随着时间的推移,这些更新允许设计师和创作者对观众的反馈做出反应。

非线性叙述还提供更多机构的受众。人们想要学习,感到惊讶或有兴趣,或娱乐和非线性故事迅速参与。他们的碎片结构需要观众;没有读者或观众,叙述不能作为一个有意义的整体体验。反过来,这迫使我们设计与Web的流体性质(或者弗兰克希莫尔梅的流体性质)设计工作的故事“evgelessness”)。

说你对自己的一个人有一个想法。如何将这些不同元素以凝聚力的方式链接?您可以通过选择两三个部分并将它们组合成一个较大的块,然后形成数字故事的核心部分。随着故事所需的情况,可以随时随地显示此块。例如,一个像素寓言作品中的故事对使用图像和文本进行了谷歌地图,以定义关键位置(如疯狂Baddie的出生地)或提供设置的事实历史。

所以那些是非线性叙事的骨骼,但它们进入了一系列形式。让我们仔细看看。

非线性叙事的类型#第3节

此格式并不是网络。从Scheherazade的古代故事,哪个一起编织多个故事线,电影纪念, 哪一个模拟超文本结构, we see plenty of effective nonlinear structures outside the internet. The same is true of像素寓言灵感 - 但是在数百年前开始的是互锁口腔历史的东西在线造成新的形状。

在我们检查这些新形式时,我鼓励您注意故事的结构,如何链接元素,以及他们如何引起您的注意。你可能会问自己:

  • 网站或应用程序要求用户做什么?查看用户界面并复制:体验是主动的(提示访问者执行特定的在线/离线操作)还是被动的(只要求他们注意)?
  • 元素如何彼此相关?他们加强了中央故事,还是他们提供了对立的?什么内容类型似乎彼此“自然适合”?如何订购元素 - 根据内容块之间的交互创造了节奏感?
  • 您可以看到的最小内容集合是什么?

额外叙述#第4节

超级叙述结合了一个中央故事或主题,有很多切线。国家地理s“The Serengeti Lion”提供中央主题:Vumbi骄傲的生活。视频,图像和评论是丰富那个故事的分支,让您在平原上看到 - 和听到生活,从无人机或斑马骨头上嘎吱作着骄傲的骄傲的声音等鸟瞰图。你可以快速跳跃分支通过上下文链接,滚动或索引分支。

Screenshot from National Geographic’s microsite, The Serengeti Lion.
塞伦盖蒂狮子。

Disjointed narratives#第5节

While disjointed narratives revolve around a common theme, the connections are much looser. They’re typically a series of chaotic vignettes. Documentaries about large, complex places are a good fit for this kind of narrative, and“拉各斯宽和关闭”这前cellently. With a variety of content blocks forming multiple perspectives, interviews, and locations, the site evokes the dusty, jumbled vastness of the Lagos metropolis, both up close and from afar. The city acts as the central character, and the different interviewees and locations become vignettes about a wild megacity.

来自“拉各斯宽”纪录片的屏幕截图。
拉各斯宽和关闭。

并行叙述#第6节

正如名称所说,这些展示了两层同时发生的故事,往往具有竞争目标和结论 - 这使得平行的叙事是对比的理想选择。

来自联合国儿童基金会的“月亮”网站的屏幕截图。
月亮。

月亮,作者UNICEF, follows the parallel lives of two kids. Each wakes in the morning and goes about their life: one ends up working in a factory for a living, while the other goes to school and becomes an astronaut. After you enter a short code to link the desktop site to your smartphone, your phone becomes a controller. When you rotate your phone, you flip the desktop screen 180° to watch that child’s life unfold.

这是一个聪明的技术,故事本身就是关于贫困,财富和教育不平等的明确点。(我知道,在两个昂贵的数字设备上与一个关于贫困的故事进行互动有一个特殊的讽刺。)

数据库叙述#第7节

These are perhaps closest to the types of work designers and developers do every day. Database narratives use metadata,咏叹调角色,并将内容标记为自动生成内容。它们通常在数据可视化中部署,其中故事的含义通常来自解释性框架(通过副本)和数据的并置。

来自纽约人杂志的地铁不等式地图。
地铁不等式地图纽约人

例如,地铁不等式地图来自纽约人builds an elegant, interactive narrative on wealth disparities, out of seemingly impartial census data. Visitors can click to see how income varies—sometimes dramatically—across subway lines and stations, and their neighborhoods. Database narratives are an effective way to convey a lot of data in a small space.

微叙事#第8节

有时我们希望告诉小型自我故事,最多只能与其他微叙事共享界面。重点是个人故事 - 你可以自己观看微叙事,没有丧失参考或概念。这种结构对于用户生成的内容特别有用(如集合)。

屏幕截图来自嗨网站。
你好。

The site你好这是非常好的。这是一个实时捕捉和写作不同时刻的平台。游客探索照片的故事和文本,与世界各地的读者的可选私人意见。每个故事也被添加到谷歌地图上;这个额外的共享功能层使该网站更具凝聚力的感觉,同时仍然允许每个故事自己站起来。

好的。我们涵盖了叙述性工具包的构建块。现在,让我们考虑真正让任何人真正有意义的东西:你的观众。

观众参与和反馈循环#第9节

数字叙述依赖于观众体验。对于您的故事有这么多潜在的入口点,您必须定义您希望受众播放的角色。一个恒定的紧张来源是谁控制故事:你(作为作者),或你的观众?无论您选择的叙述表格,它都是旨在实现特定目标的东西。然而,您的受众可能不会满足于屏幕前面,并关注您。您的访问者希望能够选择自己的路径 - 他们所看到的,以及他们看到它的顺序 - 进入您的内容块。这取决于您设计考虑到这一点的情况和叙述。

令人高兴的是,我们有一些策略可以帮助您这样做,并平衡作者和观众之间的紧张关系。

鼓励探索#第10.

这种方法利用了非线性叙事的优势,即随着时间的推移,有意义的切线。创建一个包含大量内容分支的框架,让访问者自由选择他们最感兴趣的内容。可发现性在这里是关键;你的工作是提供足够的指导,让访问者知道该做什么,然后离开他们的方式。用教学标签、动画甚至颜色编码清楚地标记可能的路线。提供菜单结构,优先选择简单的信息检索。例如,在一个大的滑动菜单中分组相似的叙述块,或者将问题和缩略图配对,而不是仅仅依赖文本链接。当您开发更多的内容时,将其作为一个新的分支添加到框架中进行探索。

守护者的“七个致命数字赛”微型屏幕截图。
七个致命的数字罪。

例如,监护人s“七个致命的数字罪”具有令人难以置信的复杂故事和分散的内容。松散的布局,显示分组的缩略图中的罪,慢,测量的音乐鼓励人们以自己的节奏体验叙述。

提示观众发挥作用#第11节

或者,为您的访客提供更多代理商。建立他们的故事。通过这种方法,您将采用您的框架,然后为受众贡献设置参数。

飞行路径网站的屏幕截图。
飞行路径。

2001年,监护人报道一个悲伤的,令人毛骨悚然的故事。一个男人的身体从天空中掉了下来,在英国的房商店的停车场降落。事实证明,他是一名巴基斯坦偷偷摸摸,在巴林之中躲藏在一个波音777的轮子里。从冻结到死亡后,他已经从车轮上掉出来,因为飞机降落了。

几年后,凯特普林格和克里斯约瑟夫创造了飞行路径, based on this and similar stowaway events. After devising a setup around the life of a fictional stowaway named Yacub, they invited about 70 readers to add images, video, and text to what they called a “networked novel.” They continue to develop the narrative,最近有一个api,哪些包裹以各种格式发布噩梦故事。

It is a great example of how an internet community created an extra-narrative in bits and pieces. Your audience may feel more invested in a story they helped construct. However, it’s important to be clear about what your participants can expect. You’ll want to model the types of content you’re most interested in receiving (include specific prompts, give sample copy, etc.) You’ll also want to work out questions of attribution, ownership, and payment beforehand. For Pullinger and Joseph’s experiment,有些潜在的贡献者正确地问道如果飞行计划将是“货币化”,如果是的话,他们的工作值得?确保在条款和条件下提供这些答案。

什么是vs.如果是什么#第12部分

在这一切中,了解之间的差异what is如果。When I first started像素寓言, I wanted the audience to see my story, characters, and action through my eyes. I wanted to determine what IS. But the internet asks us to give the audience控制故事的基本方面所以他们不会失去兴趣而搬到别处。混音是另一种让游客保持娱乐的方式。通过为观众重新设计叙事块,我们可以让用户扪心自问“如果会怎样”——这就产生了我们做梦也想不到的新的粉丝艺术和数字元素。这是一个强大的东西。

Screenshot from the Midsummer Night’s Dreaming site.
仲夏夜之梦。

Midsummer Night’s Dreaming,谷歌与皇家莎士比亚公司之间的合作,受众被邀请参加现场表演。使用Google+作为数字“舞台”,人们可以发布录取他们最喜欢的场景,服饰,观察和粉丝艺术。他们可以想象莎士比亚着名人物的替代情景和结局。这个项目让任何喜欢的人仲夏夜之梦回答这个问题,“如果我是中心舞台怎么办?”

创造叙事目标(摩擦点)和叙事线程#第13条

因此,您已经为故事设计了内容的集合,甚至可能跨网站或平台拆分它们。您有特定的活动,您希望受众互动,加深必威官网网址多少他们的经验。虽然对故事的入口和出口主要取决于观众,但我们可以通过定义清晰的叙事目标或摩擦点来帮助他们的旅程:让您的观众将被迫停止,探索和与关键叙述元素进行互动。

有效的叙述目标是什么样的?也许这是一个高潮事件,迷人的图像和视频,甚至是一个难题要解决。你的哪一部分经历会让人们看得更远,把一些不同的部分放在一起?在纽约人在不平等地图上,一个主要目标是让观众找到他们的家居站并发现中位收入。寻找他们的邻居或他们认识的地方是一个迫使观众减慢和查看数据的任务。由此产生的视觉对比,在这种情况下(相对)财富和贫困成为摩擦点。

叙事线程是您的目标之间的途径;他们将观众从一个内容块移动到另一个内容块。一个线程可以是两个HTML页面之间的简单链接,或者在地图上可能是一个更复杂的地理标记位置。在“Lagos宽和关闭”和“塞伦盖蒂狮子”中,我们看到这些线程显示为UI。前向和后退按钮,位置选择器菜单和其他接口元素充当连接器。在嗨网站上,每个捕获的时刻下面的类别允许游客从故事跳到故事。

非线性叙述的地方#第14部分

互联网继续增长。随着我们设计更大且漫长的经验,我们需要确保他们的受众连接和访问。

My experience with像素寓言迫使我超越传统的故事形式。我知道我想讲的故事。这就是这些关于非线性叙事的观点的由来。我可以确定我想要的内容块,观众的摩擦点和参与点,以及如何使用叙事线索将它们联系起来,以创造沉浸式的、细致入微的数字体验。

在整个本文中,我们研究了您可以适应您的工作的特定概念和结构。娱乐,惊喜,最重要的是,聘请你的观众 - 鼓励他们问如果,因为他们导航你旋转的世界。

关于作者

Senongo Akpem.

Senongo Akpem.是一个设计师,插画家和像素寓言的创始人,是一个互动福法尔特故事的集合。在过去的十五年里,他专门与世界各地的客户合作,灵活,有影响力的数字体验。他目前是一个社会影响机构建设性的设计总监。此前,他是剑桥大学出版社的艺术总监,他领导了全球设计团队。

尼日利亚父亲和一位荷兰美洲母亲的孩子在尼日利亚长大,在日本近十年,现在致电纽约市。生活在不断转移的文化和物理空间中,他已经让他对文化对沟通和创造力的影响有独特的洞察力。

Senongo在世界各地的会议上讲关于跨文化设计,数字讲故事和传输。他喜欢任何和所有科幻小说。

12 Reader Comments

  1. I really want to take this concept of digital storyteller and use it to develop a class. I think it would be one of the best ways to teach critical literacy and information literacy while focusing on learning, rather than teaching.

  2. 谢谢大家阅读和评论。

    CrazyChilyedi-我在这里没有将信息素养视为一角,观众在技术上已经熟练了,但我认为这是一个美妙的想法。您将在课堂上纳入课堂课程的哪些任务?

    布拉德-这也是一个很好的观点。所有这些都可以(而且应该!)以设计师们为之奋斗的标准建造。它也使内容/叙述的更新在未来变得更加容易。

  3. 你好!我认为一个人可能对技术相当精通,但在信息领域却很欠缺:从可信度的角度评估信息;版权;隐私和安全问题;批判性地质疑文字和图像的力量,质疑谁的声音被代表,谁的声音缺失,以及为什么…

    然而,我会转移我的受众,制定一个本科课程,这些阶级使用课堂上的许多技术。学生可以提交一个主题的链接,沿途讨论并分析他们的贡献如何增加到手头的项目。他们将为协作产品做出贡献,而不是完全孤立地工作或限制学习教练提供的信息。不是一个完全激进的概念,但绝对值得探索。我认为这将让他们探讨媒体素养的问题以及信息素养。

  4. CrazyQuiltedi-这太棒了,我会非常鼓励你进一步探索它。我特别喜欢信誉/质疑代表的声音,我们认为“权威”。当我们在历史/当前事件中寻找色彩的声音时,我会看到这个问题一再出现。必威官网网址多少

    凭借非线性叙述,可以有很多竞争的专家观点,但以一种探索和可信的方式展示它们当然总是一个挑战。我想知道哪些数字平台或协作系统将最适合像这样的类格式。

    请告诉我如果您在想法中开发更多,我很乐意听到更多!

  5. 不要在游行中下雨,但是:所有这些页面都伴随着浏览器兼容性。

    - Moon,由儿童基金会展示了我的加载屏幕和准备你的手机页面。在我的imac上。这是我的旅程结束。没有按钮,无处可去继续。
    - 纽约地铁不等式地图是我的空白,白色画布。
    - 七个致命的数字罪说“您的浏览器不支持”。2015年。
    – Flight Paths shows a number of Flash movies. No fallback for iPhones and Android.

    我想说的是:这些想法在纸上可能会很棒。它们笨重而缓慢,排除了20%或30%或70%的网络访问者。恐怕技术和浏览器的普及还不太到位。

  6. BL-我绝对希望没有游行!您关于浏览器兼容性的要点是伟大的,我希望他们适用于我们构建的所有网站,无论这个想法如何。
    在本文中,我重点介绍了叙事和内容策略,列出了一些人们可以使用的清晰结构和想法。如何在代码/前端实现这些是开发这些故事的人需要考虑的另一件大事。虽然这不是这里的重点,但我确实认为这是一个重要的实际问题,特别是当我们谈到与观众互动并让他们代理一些内容时。

有话要说吗?

We have turned off comments, but you can see what folks had to say before we did so.

更多来自阿拉巴马州

Webwaste

在这摘录世界范围的废物中,格里麦戈尔恩检查了臃肿网站和不必要资产的环境影响。
行业

连接点

在创意文化的摘录中,Justin Daeer通过许多方式来浏览我们,其中一个组织的文化和设计工作会彼此发挥作用。
职业