Skip to content

3.5 Multi-lane highway - All students

Some texts, particularly those on the web or other non-linear forms, offer several possibilities for creating roads to meaning. The roads we choose to take through non-linear texts mean that different responders travel through these at different speeds, noticing different views and leaving and entering the roads at different points along the way.

Of course, we have choices and different possibilities for making meaning in traditional texts as well. As a responder, you engage with and may even interact with a text through:

  • your own imagination and thoughts
  • selective listening to speech 
  • skimming through a written text to engage with what interests you.  

The same applies when you interact with a website except that the interaction can require a physical response. For instance, if you are skimming for information, you may be actually looking for clickable links that will take you to what you require. You may also be able to arrange that information in a way that suits you by creating bookmarks to gather it in one place or by searching with a range of criteria that narrows the amount and viewpoints of information you need to read. You choose the pathway through a website that best suits your needs, views or reading preferences.

Approach: Designing for controlled freedom
We are used to thinking that a responder to a text receives a message through reading, listening or viewing and our expectation of traditional texts is that most are sequential – they have a beginning, middle and an end and are intended to be read in one direction. This applies to texts from different cultures whether they are written from left to right, right to left or vertically. This does not apply to websites.

Website codes, conventions and practices

Once you land on a page of any website you become a user of that website. Users have the ability to navigate their own way through a text regardless of where the text begins or ends.  They may enter a website at any point yet still be engaged with the text as a whole through navigation tools and elements of visual design. Users may also choose to access the site through a variety of devices and applications. They also physically interact with websites through the use of clickable text, playable video and a range of other interactive tools.

Reading a webpage
To design a webpage for a good user experience it is useful to know how webpages are read. Most people skim and scan web pages for the information they want because they read websites quickly.
Conventions make reading the site predictable and quick if the navigation and content are arranged in ways that complement each other. Users want to have control of what they view, listen to or read and being familiar with the layout and operation of the webpage gives them this control.
Eye-scanning software has shown that most people skim a website in an F-shaped pattern, based on headings on the webpage.

The F-Layout works because it allows web users to scan content easily, because people in Western societies read from left to right and from the top to the bottom and so this layout feels natural and comfortable.

Similarly, many web pages use the Z pattern to lay out their sites. In this layout, the top and bottom of the screen carry the important messages (logo and call to action) and the central section is absorbed through a quick scan.

Activity (Standard, English Studies and EAL/D only)
Skim the homepage of the Centre for Road Safety website and one of the other HTML pages, noting where you look first and the placement of key web conventions. Complete the student worksheet 3.5.1 Webpage scanning (All students).

Designing for a broad range of users
In your groups discuss how a broad range of audiences are catered for through the Centre for Road Safety homepage design. Consider:

  • Language
  • Images
  • Design
  • Ease of reading
  • Webpage conventions
  • Webpage navigation
  • Accessibility options.

Composition: Construction zone

In pairs, using the ideas and information you have learned in the previous activities, design two webpages for the same purpose but for two different audiences. The purpose you might choose could be:

  • protesting an example of social injustice
  • offering a community service
  • selling a product.

The content may be different for each of your audiences but the purpose will remain constant – you will be protesting, offering or selling.

Information and visual hierarchies
As we navigate the internet, we readily and quickly move from website to website and from page to page, skimming and scanning the contents until we find what we are looking for. To make this easier, designers:

  • use headings, sub-headings, lists and topic sentences which start with information in the first word
  • divide content into small readable blocks using images and colour
  • ensure that the first two paragraphs of text contain the most important information.

Sounds, words and images are the raw materials of communication but these alone are not enough. For efficient communication these must be organised in a way that makes them easily accessible. Just as written texts are structured so that key ideas can be clearly understood quickly, so a web page also highlights important messages through its use of design.

Site maps
A good site map organises the information on a site in a logical way. Let’s consider the way in which the visual elements of the site can replicate or disrupt this arrangement. Designers use a range of techniques to signal the importance of information and the relationships between information on the page.
In the following activity, you will compare a site map and the visual design elements of the Centre for Road Safety webpages.


Complete the activity in the table in student worksheet 3.5.2 Visual hierarchy design (All students).

  1. Scroll to the bottom of the Centre for Road Safety home page and go to the sitemap. Note the relationship between the site map and the navigation at the top of the page.  This top navigation bar shows on every page and allows users to freely move around the site without getting lost.
  2. Open the website’s home page and print it or use a web tool to type over it. Number the sections of the web page in order of importance or hierarchy and compare to the site map. Does the site map show the same hierarchy of importance?  If not, why not?
  3. Open the Bicycle riders section of the website and compare the site map's organisation of information of this section to the written content and linked information.  Are these in the same order?

Approach: Designing to connect
All texts have structures and these structures support the reading of the text for meaning. Before interactive technology, we read on printed paper, a technology requiring single, linear forms and, over centuries, text structures gradually emerged which are effective in communicating certain kinds of messages or ideas for the culture of the period. Now we are looking to adapt traditional forms such as narrative or argument to our new technologies and to invent new ones.
You can explore this statement by choosing a short story and a website that interests you. Using the student worksheet 3.5.3 Designing to connect (All students) compare and contrast the ways you read and navigate each of them.

Narrative as hypertext
In this section, you will choose a print story, identify its narrative structure and organise it to be converted to a website. The seven steps in the process are as follows:

  1. Story to sitemap
  2. Making it navigable and scannable
  3. Designing the links
  4. Developing your site
  5. Drafting the content
  6. Editing and refining
  7. Publish your website for your fellow students

1. Story to sitemap

  • Select one of the short stories you read in a previous section and download it into a word processing program
  • Closely read the short story and break every action and event in the story into sections (add line spaces)
  • Create a heading for each part of the story and number them. You may have up to 20 sections.

You have now created the beginnings of a site map for your short story but it would be impractical to create a webpage for each small section. The narrative needs further organisation for navigation and reading purposes.

  • Use one of the narrative structures on pages 1 and 2 of the student worksheet 3.5.4 Narrative structure (All students) to organise your story sections. Copy the headings from your sections into Column C.

You have now created a site map to organise the content of your narrative website using a conventional narrative structure.

2. Making it navigable and scannable

Research shows that people scan websites for the information that they want – they read quickly and usually only the first two to three words of any heading. It is important to craft your headings and content with this in mind. 
Headings must be:

  • Short
  • Front-loaded with the most important keywords because people scan the first two to three words of any heading
  • Understandable out of context (because headings usually appear out of context in search results, social-media streams, blog posts and news feeds)
  • Rich in information.

Using page 3 of student worksheet 3.5.4 Narrative structure (All students) convert the headings in column A into headings that are designed for reading on the web. The first few have been done for you. These will help a user navigate your story through these scannable snippets.

3. Designing the links

How are you going to order these events? What links will you create?
In your creative writing, you often experiment with different ways of telling a story. In this activity, you will be playing with different possibilities. You will want users to navigate through your story, possibly offering them some choice but these choices will need to have limits so that the story makes sense.

Weighing up the possibilities

Using the headings you recorded in column C of student worksheet 3.5.4 Narrative structure (All students), write them onto sticky notes, into text boxes or on PowerPoint slides. Change the order of these to experiment with different ways of telling the story. For example, how would you order them if you wanted to:

  • change the narrative viewpoint
  • use flashback
  • enhance existing or potential contrasts
  • turn it into a dialogue between two characters?

Evaluating and choosing

The following questions will help you evaluate the viability of your transformation and select one to develop into a story.

  • What points of departure can you create for your story?
  • Do you want it to be read from the beginning to the end? 
  • What further changes would you like to make (eg. adding or removing a character)?
  • What kind of story it is? Can the changed arrangement lead to a change in genre? A change in ending(s)?
  • How does your transformation change the way the story is read?

Write your story taking care to consider the transitions between scenes (screens), to enable a reading path through the story. You can compose it using:

  • presentation software (PowerPoint/ Keynote)
  • a Weebly or some other web authoring tool
  • a digital photo gallery using a smart phone
  • linked Word documents
  • linked Post-it notes.

A digital text needs to work digitally, with hyperlinks and chosen paths. Now that you have developed your story structure, you can experiment with meaning by creating different types of links.

Hyperlinking in the narrative
The narrative could be augmented by hyperlinking.
You could link by:

  • words → to add a definition (either real or fictional)
  • quote → original source
  • phrase → to other source of further information such as website or video
  • phrase → to someone else’s point of view
  • conversation → Twitter Hashtag (real or fictional)
  • example → example in action/ demonstration of examples/images
  • setting elements → historical, social, cultural context.
  • character → biographical detail
  • plot element → backstory
  • theme/topic/concept → other writings of author, science fiction sites, reviews or articles
  • collaborative writing pieces → pieces of another contributor to the topic – other student’s work

Using your newly configured story and your choice of hyperlink types from the above list, increase the number and types of choices for your readers.
Discussion: With the addition of these choices does the story lose its interest as a narrative or is it improved? Explain your decision.

  • Are there types of choices that enhance the story and other types that distract from the story’s interest?
  • For those who want more: At which points of the story could you introduce different pathways so that the direction of the story itself might be made interactive?

4. Developing your site
Just as when you write a composition, developing a website goes through the same processes of planning, designing, drafting and refining. Here you are given step-by-step instructions on how to convert your story into a website.

What do you want to accomplish on your website? Record your decisions on the following questions to clarify the purpose, tone and interactivity.

  • Identify the purpose of your site and whether your intention is to entertain, persuade, inform or raise questions or concerns.
  • What will the tenor of your site be? Gently polite? Determinedly convincing? Evocative?
  • As an author, what identity do you want to create in this text? Do you want people to contribute to the text? What kind of interaction do you want from responders?

Collecting texts, images and ideas:

  • Consider different media such as words, images, music, videos and narration and list what you will use
  • Research texts and sources that complement your purpose
  • Document these texts and links so you can acknowledge sources. A tool like zotero might be useful.

Map your site:

  • Using pen and paper, or a mind-mapping tool, organise your ideas graphically and annotate your decisions on the plan. (Look at the next section on wireframes to help you plan).
  • For example in creating a hyperlink story, you might like to think about how you will weave elements of narrative such as characterisation, point-of-view and theme through combinations of different modes and media.
  • Understand that the story you create has the potential to be seen in a global context. How will this affect your web site?
  • Plan how you might layer your text and images.

Professional web designers use wireframes to help them maintain consistency in design elements. Wireframes:

  • show pathways between pages
  • set down how users interact with the page and site.
  • show the layout of the page.

Navigate to the online interactive Test Your Tired Self website and complete the test before looking at the wireframe.
Look closely at this image from the website and the corresponding wireframe diagrams.

  • Map the similarities between the two webpages
  • Link the elements of the image to the corresponding element in the wireframe diagram

This is the kind of design approach that you can take with your website.

5. Drafting the content

  • Adapt or write the text that you want to use
  • Arrange the text considering design elements such as contrast, repetition, alignment, proximity.
  • Experiment with adapting particular elements and conventions of texts through exaggeration, alteration, repetition, deletion and combination.

6. Editing and refining

  • Evaluate your site to make sure you have engaging text and engaging design
  • Review your use of particular website features such as:
  • navigational structure of pages
  • titles and headings
  • sentence and paragraph formats
  • font size and orientation
  • images
  • transitions
  • hot spots and internal and external hyperlinks
  • recurring symbols, idioms and allusions
  • background, movement, size, shape and layout
  • colour and tone
  • role of sound and music.

7. Publish your website for your fellow students
Reflection - read each other’s hypertext narratives and reflect on:

  • whether your hypertext reader does make deliberate choices about the directions of your text
  • whether a hypertext reader reads the way you have intended
  • how hypertext imitates the way we think through making associations
  • whether your hypertext blurs the role of the reader with that of the author.

Transmedia storytelling

Transmedia storytelling is a way of telling a single story or linking story experiences across multiple platforms and formats. Each platform, game or application furthers the ‘story’ through its unique application, adapting the same message to its mode, medium and intended audience and taking advantage of the kind of relationships between responder and composer each mode and medium enables. Some stories are designed to be seen on the run with very little input or control by the responder and others are designed to be explored more fully allowing some degree of choice to the responder.

Interactivity: Controlling the story?

Interactivity has always been a key aspect of human relationships. Our verbal, emotional and physical connections are the basis of society. Nowadays the term is used most frequently to refer to relations of human to machine where we engage with the technology alone or use it to engage with other humans in this formless area called cyberspace.

Go to the Ride to Live website and notice how it is different to the main Centre for Road Safety site. Note the increased emphasis on interactivity and the way the Hazard Test apparently gives control to the player of how the story of the ride develops. Do the Hazard Test a few times and identify its textual features on page 1 of the student worksheet 3.5.5 Ride to Live (All students).

Levels of interactivity
Examine the texts at these links:

Consider their level of interactivity and using the second page of the student worksheet 3.5.5 Ride to Live (All students) explain how much control the user has on the meaning of the text.

What are the times when you are drawn in to continue the interaction? When are you not interested in doing so? What does this tell you about:

  • the significance of the site for you?
  • you as a responder to the text?

In what ways do you think you exercise authority over these texts? In what ways do you not?

Synthesising activity (Advanced students only)

The website user’s relationship with a text is both physical and mental. Mental connections are enacted physically through various kinds of navigation (hyperlinking, typing in comments etc.) and the capacity for the interactive text to alter experience and to give feedback makes the act of reading closer to an actual dialogue with the text. Moreover, the actions taken in the online world can have consequences for the real world, as with the Speed Adviser App which may slow down your speed on the road, or the Safer Roads NSW website, where a speed camera nomination could result in a speed camera on the corner of your street.

So, with interactive texts, responding can involve the creation of experiences, objects and texts. The user is composing and responding at the same time.

Can this help us understand what is going on when we respond to literature?

Look at the series of statements made in the student worksheet 3.5.6 Synthesising activity (Advanced) about the nature of reading with hypertext and consider how these may apply to reading a work of literature.

Read the following poem, and as you do, be alert to the associations you are making with your own life experience and jot them down next to the poem.

A Poison Tree

by William Blake

I was angry with my friend:
I told my wrath, my wrath did end.
I was angry with my foe:
I told it not, my wrath did grow.
And I watered it in fears,
Night & morning with my tears;
And I sunned it with smiles,
And with soft deceitful wiles. 
And it grew both day and night,
Till it bore an apple bright;
And my foe beheld it shine,
And he knew that it was mine, 
And into my garden stole
When the night had veil’d the pole:
In the morning glad I see
My foe outstretched beneath the tree.

Write a reflection on the extent to which you are the writer of the poem in your own mind, a poem that is different from what you believe Blake might have intended.

End your reflection with a statement on the ways a response to a literary text may become a personal composition and consider how response and composition can be seen as reciprocal activities.

Last update: 25th January 2019