Web design (5): Structure

A collaborative medium, a place where we all meet and read and write.
Tim Berners-Lee

[Part 5 of 7 : 0) intro, 1) story, 2) pictures,  3) users, 4) content, 5) structure, 6) social media, 7) evaluation]

Many designers have adopted a grid structure to design web pages because a) it lends itself well to responsive design and b) it allows a design which is easy for users to understand. Designers literally have about five seconds before a user will click away to find a different service/page/content provider if the page is laid out in a way which is difficult to understand.

In a great talk for An Event Apart, Designer and Developer Advocate at Mozilla, Jen Simmons looks offline at magazines for inspiration and remembers how there was much experimentation and creativity online until everyone adopted grids and fell into a rut of grids.

But, it is easy to understand why everyone adopted grids, because users create their own understanding of a webpage from its structure. Text is complete within itself and meaning comes from its structure and language rather than the ideas it contains. This is a fundamental principle of semiotics, the study of meaning.

Managing expectations

When a webpage is judged to be useless, it is often because it does not behave in the way the user is expecting, particularly if it is not very attractive.

Designers either need to manage a user’s expectations by giving them what they are expecting in terms of the service they are looking for, or they need to make it super attractive.  Attractive things don’t necessarily work better but we humans perceive them as doing so  because they light up the brain’s reward centre and make us feel better when we are around them. We are attracted to attractive things which is given by certain Gestalt principles such as unity, symmetry, and the golden ratio.

Gestalt: similarity, promixity

Good design is one thing, but we also have specific expectations about  any given webpage. We scan for headings and white space and interpret a page in those terms.  This is because according to Gestalt theory we will interpret items according to their proximity: items which are close together, we will group together; or similarity, items which are similar we interpret as together.

And also, because we have been to others sites and we transfer our experiences from one site to another and anticipate where certain functions should be.

Where am I? Where have I been? Where am I going?

Main menus are usually at the top of the page, grouped together and are used for navigation through the site.  Secondary navigation may take place in drop down menus, or in  left or right hand columns. Specific house keeping information can be found in the footer, or the common links bar if there is one.

If users are completely lost they will use the breadcrumbs, which Google now uses instead of the URL of sites as part of the results their search engine serves up. Therefore, it is in a designer’s interest to put breadcrumbs on the top of page.

Users will stay longer and feel better if they can answer the three questions of navigation as articulated by usability consultant Steve Krug:

  1. Where am I?
  2. Where have I been?
  3. Where am I going?

Often this answered by changing links to visited, not visited and enforcing the consistency of the design by adopting a sensible approach to colour. There is a theory of colour in terms of adding and subtracting colour to create colour either digitally, or on a palette, but there is alas, no theory about how to use colour to influence branding and marketing, as personal preferences are impossible to standardise.

HTML 5 & CSS 3

As discussed earlier in part 1 of this series, we separate out our content from our presentation which is styled using CSS 3. Then, once we know what we want to say we use HTML 5 to structure our text to give it meaning to the reader. This may be a screen reader or it may be a human being.

HTML 5 breaks a page into its header and body, and then the body is broken down further into specific instructions. Headings from <h1> to <h6>, paragraphs, lists, sections and paragraphs, etc., so that we can structure a nice layout.  There are thousands of tutorials online which teach HTML 5.

The nice thing about sections is that we can use them to source linked data from elsewhere and fill our pages that way, but still keep a consistent appearance.

Theoretically one page is great, or a couple of pages fine, but once we get into hundreds of pages, we need to think about how we present everything consistently and evenly across a site and still provide users the information for which they came.

Information architecture

Information architecture (IA) is the way to organise the structure of a whole website. It asks: How you categorise and structure information? How do you label it so that users can navigate or search through it in order to find what they need?

The first step is to perform some knowledge elicitation of the  business or context and what everyone (owners, customers) known as stakeholders expect from the proposed system. This may include reading all the official documentation a business has (yawn!).

If there is a lot of existing information the best way to organise it is to perform a card sort. A card sort is when a consultant calls in some users, gives them a stack of index cards with content subjects written on them, along with a list of headings from the client’s site—“Business and News,” “Lifestyle,” “Society and Culture”— then users decide where to put “How to floss your teeth”.

This can take a few days each time and a few goes, until a pattern is found, us humans love to impose order on chaos, we love to find a pattern to shape and understand our world.

Once we have a structure from the card sort, it becomes easier to start designing the structure across the site and we begin with the site map.

The site map reflects the hierarchy of a system (even though Tim Berners-Lee was quite emphatic that the web should not have a hierarchical structure).

Then, once a site map is in place, each page layout can be addressed and the way users will navigate. Thus, we get main menus (global navigation), local navigation, content types to put in sections and paragraphs, etc., along with the functional elements needs to interact with users.

Other tools created at this time to facilitate the structure are wireframes, or annotated page layouts, because if is is a big site lots of people may be working on it and clear tools for communication are needed so that the site structure remains consistent.

Mock up screen shots and paper prototypes may be created and sometimes in the case of talented visual designers, storyboards are created. Storyboards are sketches showing how a user could interact with a system, sometimes they take a task-base approach, so that users could complete a common task.

Depending on the size of a project, information architects will work with content strategists who will have asked all the questions in the last section (part 4) on content and/or usability consultants who will have spoken to lots of users (part 3) to get an understanding of their experiences, above and beyond their understanding of the labelling of information in order to answer questions such as:

  • Does the website have great usability which is measured by being: effective and efficient; easy to learn and remember; useful and safe?
  • How do we guide users to our key themes, messages, and recommended topics?
  • Is the content working hard enough for our users?

Sometimes, it may just be one person who does all of these roles and is responsible for answering all of these questions.

It takes time to create great structure, often it takes several iterations of these these steps, until it is time to go on to the next stage (part 6) to start sharing this beautiful content on social media.

[Part 6]

Stories, Semantics and the Web of Data

My most used words on facebook in 2016
My most used words on Facebook in 2016

As a computer scientist I have spent hours talking to designers, architects and engineers to capture their domain knowledge to model in a computer, with the end goal of helping them do their jobs better. It isn’t always straight forward to perform knowledge elicitation with people who have been doing complex tasks, very well, for a long time. Often, they can no longer articulate why or how they do things. They behave intuitively, or so it seems. So, I listen to them as they tell me their stories. Everyone has a story. Everyone! It is how we communicate. We tell stories to make sense of ourselves and the world around us.

As Brené Brown says in her extraordinary TED talk on vulnerability:

…Stories are just data with a soul…

Up until now, stories have been the most effective way of transferring information but once we involve a computer,  we become very aware of how clever and complex we humans are. With semiotics, we study how humans construct meaning from stories;  with semantics, we are looking at what the meaning actually is. That is to say,  when we link words and phrases together, we are creating relationships between them. What do they stand for? What do they mean?


English Professor Marshall McLuhan who termed the phrase the medium is the messagedescribed reading as rapid guessing. I see a lot of rapid guessing when my daughter reads aloud to me. Sometimes, she says sentences which are semantically correct and representative of what happens in the story, but they are not necessarily the sentences which are written down. She is basically giving me the gist. And, that is what our semantic memory does – it preserves the gist or the meaning of whatever it is we want to remember.

Understanding the gist, or constructing meaning, relies on the context of a given sentence, and causality – one thing leads to another – something humans, even young ones like my daughter, can infer easily. But this is incredibly difficult for a computer even a clever one steeped in artificial intelligence and linguistics. The classic example of ambiguity in a sentence is Fruit flies like a banana, which is quite funny until you extend this to a whole model such as our legal system, expressed as it is in natural language, and then it is easy to see how all types of misunderstandings are created, as our law courts, which debate loopholes and interpretations, demonstrate daily.

Added to the complexities of natural language, humans are reasoning in a constantly changing open world, in which new facts and rules are added all the time. The closed-world limited-memory capacity of the computer can’t really keep up. One of the reasons I moved out of the field of artificial intelligence and into human-computer interaction was because I was interested in opening up the computer to human input. The human is the expert not the computer. Ultimately, we don’t want our computers to behave like experts, we want them to behave like computers and calculate the things we cannot. We want to choose the outcome, and we want transparency to see how the computer arrived at that solution, so that we trust it to be correct. We want to be augmented by computers, not dictated to by them.

Modelling: Scripts and Frames

We can model context and causality,  as Marvin Minsky’s frames first suggested. We frame everything in terms of what we have done and our experiences as sociologist Lucy Suchman proposed with her plans and situated actions.

For example, when we go to the supermarket, we follow a script at the checkout with the checkout operator (or self-service machine):

a) the goods are scanned, b) the final price is calculated, c) we pay, d) our clubcard is scanned, and e) we might buy a carrier bag.

Unless we know the person on the cash desk, or we run into difficulties with the self-service checkout and need help in the form of human intervention, the script is unlikely to deviate from the a) to e) steps above.

This modelling approach recognises the cognitive processes needed to construct semantic models (or ontologies) to communicate, explain, and make predictions in a given situation which differs from a formal models which uses mathematical proofs. However, in these human centred situations a formal proof model can be inappropriate.

However, either approach was always done inside one computer until Tim Berners-Lee found a way of linking many computers together with the World Wide Web (WWW). Berners-Lee realised that having access to potentially endless amounts of information in a collaborative medium, a place where we all meet and read and write was much more empowering than us working alone each with a separate model.

And, then once online, it is interesting to have social models, like informal community tagging improves Flickr and del.icio.us. Popular tags get used and unpopular ones don’t, rather like evolution. In contrast formal models use proofs to make predictions so we lose human input and the interesting social dynamic.

Confabulation and conspiracy

But it is data we are interested in. Without enough data points in a data set on which we apply a model, we make links and jumps from point to point until we create a different story which might or might not be accurate. This is how a conspiracy theory gets started. And, then if we don’t have enough data at all, we speculate and may end up telling a lie as if it is a truth which is known as confabulation. Ultimately having lots of data and the correct links gives us knowledge and power and the WWW gives us that.

Freeing the data

Throughout history we often have confused the medium with the message. We have taken our most precious stories and built institutions to protect the containers – the scrolls and books – which hold stories whilst limiting who can access them, in order to preserve them for posterity.

Now, we have freed the data and it is potentially available to everyone. The WWW has changed publishing and journalism, and the music industry forever.  We have never lived in a more exciting time.

At first we weren’t too bothered how we were sharing data, pictures, pdfs, because humans could understand them. But, since computers are much better at dealing with large data sets, it makes sense for them to interpret data and help us find everything we need. And so, the idea of the semantic web was born.

Semantic Web

The term semantic web was suggested by Berners-Lee in 1999 to allow computers to interpret data and its relationships, and even create relationships between data on the WWW in a way in which only humans can do currently.

For example, if we are doing a search about a person, humans can easily make links between the data they find: Where the person lives, with whom, their job, their past work experience, ex-colleagues. A computer might have difficulty making the connections. However, by adding data descriptions and declaring relationships between the data to allow reasoning and inference capabilities, then the computer might be able to pull together all that data in a useful coherent manner for a human to read.

Originally the semantic web idea included software agents, like virtual personal assistants, which would help us with our searches, and link together to share data with other agents in order to perform functions for us such as organising our day, getting more milk in the fridge, and paying our taxes. But due to the limitations of intelligent agents, it just wasn’t as easy to do. So, the emphasis shifted from computers doing the work, to the semantic web becoming a dynamic system through which data flows, with human intervention, especially when the originator of the data could say: Here machine interpret this data this way by adding machine friendly markup.

Cooperation without coordination

It seems strange to contemplate now, but originally no one believed that people would voluntarily spend time putting data online, in the style of distributed authorship, but we have Wikipedia, DBPedia, GeoNames to name but a few places where data is trustworthy. And, we have W3C which recommends the best way to share online.

The BBC uses websites like the ones above and curates the information there to ensure the integrity of the data. That is to say, the BBC works with these sites, to fact check the data, rather than trying to collect the data by itself. So, it cooperates with other sites but does not coordinate the output. It just goes along and gets what it needs, and so the BBC now has a content management system which is potentially the whole of the WWW. This approach of cooperation without coordination is part of what has become known as linked data, and the WWW is becoming the Web of Data.

Linked Data and the Web of Data

Linked data is a set of techniques for the publication of data on the web using standard formats and interfaces so that we can gather any data we need in a single step on the fly and combine it to form new knowledge. This can be done online or behind enterprise firewalls on private networks, or both.

We can then link our data to other data that is relevant and related, whilst declaring meaningful relationships between otherwise arbitrary data elements (which as we have seen a computer couldn’t figure out by itself).

Google rich snippets and  Facebook likes use the same approach of declaring relationships between data in order to share more effectively.

Trust: Data in the wild, dirty data, data mashups

It all sounds brilliant. However, it is impossible to figure out how to get your data mashup right from different sources when they all have different formats. This conundrum is known as data in the wild. For example, there is lots of raw data on www.gov.uk, which is not yet in the recommended format.

Then, there is the problem of dirty data. How can we trust the data we are getting if anyone can put it online? We can go to the sites we trust, but what if they are not collecting the data we need? What if we don’t trust data? What if we use the data anyway? What will happen? These are things we will find out.

How can we ensure that we are all using the same vocabularies? What if they are not? Again, we will find a way.

Modelling practice: extendable, reusable, discoverable

The main thing to do when putting up your data and developing models is to name things as meaningfully as you can. And, whilst thinking about reuse, design for yourself, do not include everything and the kitchen sink. Like all good design, if it is well designed for you, even if you leave specific instructions, someone will find a new way to extend and use your model, this is guaranteed. It is the no function in structure principle. Someone will always discover something new in anything you design.

So what’s next?

Up until now search engines have worked on matching words and phrases, not what terms actually mean. But, with our ability to link data together, already Google is using the knowledge graph to help uncover the next generation search engine. Facebook is building on its open graph protocol  whilst harvesting and analysing its data to help advertisers find their target audience.

Potentially we have the whole world at our fingertips,  we have freed the data, and we are sharing our stories. It may be written in Ecclesiastes that there is nothing new under the sun, but it is also written in the same place: Everything is meaningless. I think it is wrong on both counts,  with this amount of data mashup and collaboration, I like to believe instead: Everything is new under the sun and nothing is meaningless. We live in the most interesting of times.

Semiotics: Finding meaning in storytelling

Pic showing sign saying warning this is a sign

We like patterns and signs to reduce complexity into something more manageable, and then we like to construct stories to explain how people and the world around us work because we like to feel that we know what we are doing, like we have some control over how the world works, so that we can say that everything is ok.

But in order to find meaning, we create meaning and when it feels right to us, then we say that it is so and we interpret signs, logic and symbols in that way. However, semiotics is not the study of what meaning is, but the study of how meaning is created.

In her book Semiotics and Storytelling, Bronwen Martin says that it is not just signs which help us make meaning, but also the approach of the Paris School of Semiotics led by A J Greimas which is a complete way of understanding a text, and everything it has to offer us.

The four principles

Meaning comes from the universe. So, there is no meaning without difference. There is no light without darkness, and the world only takes on shape with contrast. There are four principles which facilitate our understanding in any given text:

  1. Meaning is constructed by the reader. In the same way as the no function in structure principle. When someone comes across an artefact without instructions, then they will find a completely new purpose for it, depending on what they need it to do.
  2. Text is complete within itself and meaning comes from its structure and language rather than the ideas it contains.
  3. Story structure underlies all human communication. It seems that archetypal story patterns are hard wired in our psyche so that eyewitness accounts in court which conform to these patterns are the most likely to be believed as truth – they resonate. In order to be human, we must have a goal or quest, and from there, we have our experiences which we try and understand and make sense of (as the study of phenomenology: the study of the structure of experience, does).
  4. There are three levels of meaning in a text: the narrative level which contains the story-structure; the figurative level, which looks at time place and character; and the deep level or thematic level which links to our inner mental world with its concepts of good and evil.

The narrative level

Any narrative is a change of state or movement from one opposite to another: From life to death, or from conflict to harmony. It can be sudden or progressive where the hesitation has us on tenderhooks and we feel that it may still be possible not to complete the transformation, and that there could be an alternative ending. If a story is long, then it may have multiple transformations which are known as episodes.

Folklorist Vladimir Propp defined 31 story functions and seven character functions which A J Greimas reduced to six actantial roles: sender- object-receiver, helper-subject-opponent which he then put onto three axes of human action: desire, power and communication:

  1. The axis of desire: Any quest is motivated by a lack – of love, knowledge, truth – which leads to doing, transformation.
  2. The axis of power: A story may contain two subjects who quests are in opposition, they could be pursuing the same goal, or one subject takes the other as its object like a stalker.
  3. The axis of communication: The sender is the motivator for the quest and when the receiver receives the information, they are ready for the quest to begin and the action begins too.

Then, there is the canonical narrative schema (or global narrative programme of the quest) which has the sender and receiver negotiate (a) the initial contract to set up the quest which is then followed by (b) the competence stage when the subject (receiver) has the ability to carry out the quest, and (c) the performance stage when the actual event happens. Finally (d) sanction is where the outcome of the event is revealed and interpreted.

The story of any individual in a narrative can be described in terms of deterioration or improvement, and the choice of which term to use depends on the point of view chosen by the narrator. Often the confrontation of subjects results in the transfer of an object of value from one subject to another by test or conflict, or by a gift, or exchange.

Sometimes the narrative is interrupted by an active force or persuasion which causes a new quest and narrative to begin and leads us into a new direction.

The figurative level

The figurative level describes and creates our sense of time, place, and character, with descriptions which use our five senses. This level is important in storytelling and is also used in news stories to quickly set the scene and anchor it in our reality.

At this level we are looking for lexical fields or figurative isotopies. So, house, shop, car, factory belong to the isotopy of the city, whereas wind, rain, sun belong to the isotopy of the cosmic. We look for those relating to time and space and those which repeat themselves.

Then we look for differences: high and low, light and dark, to gain sense and meaning, and which link us to the thematic or deep level.

The deep level

The deep level concerns our inner world, our thoughts, and once we know where transformations occur and what is at stake then we can figure out what that means to us.

Then, it is time to ask: Where do the values come from? Martha Beck says that she was surprised when collecting folktales in China as they were never about falling in love, they were always about getting rich. So, in any story, we need to ask: What tradition are the values linked to? And does a story strengthen or challenge the status quo? Does it echo dominant cultural beliefs?

There are so many myths, so much resonance of stars as souls, a desire to return to an original unity, songs as a yearning for beauty and the sacred, we often don’t recognise them explicitly.

But, then if there are gaps or ambiguities in a text, does this allows us to fill them with our cultural heritage and assumptions? Does this render a text more universal? Or more truthful?

After all what is truth? Is the narrator truthful? Is the point of view true? Semiotics is concerned with the feeling of truth because it is the only measure of truth which human kind has been able to devise, no matter how far we think we have come.

Designing design: Conclusions

astrolabe pic

Design is the science of the artificial – Herb Simon

[Part 12 of 12: 1) The science of the artificial 2) function, behaviour structure 3) form follows function, 4) no function in structure, 5) the medium is the message 6) types and schemas 7) aesthetics: attractive things work better 8) managing (great) expectations 9) colour 10) styles and standards 11) design solution spaces 12) conclusions]

Humans are overwhelmed with information both online and offline, a desire to understand the world around us, and for it all to make sense. So, we look for patterns and signs, and stories to reduce complexity into something more manageable.

At the same time we love to be surprised and delighted with variety, which is shown by the information users focus on most on social media and by our love of twist in the tale stories and thrillers. And, we use stories most of all to find meaning in our own lives and in everything around us.

We are moving into a most exciting time with the Internet of Things and our Digital Culture which is all part of the Connection Economy. We are only one click away from each other and our devices are all communicating with each other constantly. And, in this world we feel that we must be somehow always connected. It is difficult to disconnect for even a little while, for disconnection is our greatest fear.

Throughout this series we have looked at the various ways designers can manage our expectations and give us cues to manage how we behave with the technology before us. We have even see how designers can manage their own information overload with types and schemas. But, it seems to me that as we advance further into this digital landscape, today, the designer’s job is to now to make sure that we harness the power of technology in the right way. In the past, society was formed by technological advance, and we were just carried along with it regardless of our opinions.

We need our designers to design for the good, to protect humans from even more overwhelm and to support us as we work, and in the same way that a good design solution can come from constraints and boundaries, we need these online. Feedback with care: Hey you’ve been online for hours now, go to bed, we will all still be here later.

Designers are change agents whose job is to make the world easier for us to live in offline and online. Let us all learn to design for that – an easier world for us to live in.

Designing design: Solution spaces


[Part 11 of 12: 1) The science of the artificial 2) function, behaviour structure 3) form follows function, 4) no function in structure, 5) the medium is the message 6) types and schemas 7) aesthetics: attractive things work better 8) managing (great) expectations 9) colour 10) styles and standards 11) design solution spaces 12) conclusions]

The artificial intelligence community views a design space as something to explore as it if is a mountain or a wilderness. A space may be incomplete or the domain knowledge uncertain and this is reflected in the names of search techniques: hill climbing, branch-and-bound, hunter gatherer.

Fabulously nowadays we have massive computing power which can help us search through big data sets or solution spaces. However, in the broadest terms when we are looking at a solution space we are hoping to manage it by the following:


With constraints, we introduce boundaries which may potentially the number of solutions. It is this tension which can cause wonderful solutions such as when artists obey the haiku rules of 17 syllables: three lines of five, seven, and five syllables, to give us pared back poetry.

We can also introduce constraints by fixation on one thing such as cost, or efficiency and then we can see what solutions are possible.

Otherwise, we can use a more exploitative exploitation approach of what-if. What if we place an excessive load on this bridge? What happens then? Does the solution still work? What will we need to change to get it work?

Transformation, combination and exploration

Inside the solution space we synthesise and analyse by using some of the ideas this series has explored. We map our types and schemas or our models of aesthetics and affordances and link our function to our behaviour and then structure. But, when all else fails we can remove the constraints or even remove the boundaries or the domain knowledge which can lead us to moving outside the context.

Thinking outside the box

Sometimes designers do this on purpose, other times like the post-it note, new ideas are serendipitously discovered. SMS texting was originally invented for engineers to communicate with each other whilst working on mobile technology. Who could have anticipated that a tool which made engineers’ lives easier would appeal to mobile phone users as a cheap and cheerful way of communicating instead? The same happened to post-it notes, once the context of inventing glue was removed, the user was free to think of it as a really cool book mark.

With a solution space we can define what we are looking at, and what we are looking for, and then should we decide we want to look at it differently, or look elsewhere then we have a map and a plan, which is what all humans like to have in this information overloading world of ours.