Is this progress? Humans, computers and stories

As a computer scientist, I have to say my job has changed very little in the last  last twenty-odd years. The tech has, admittedly, but I am still doing what I did back then, sitting in front of a computer, thinking about how computers can make peoples’ lives easier, what makes people tick, and how can we put the two together to make something cool?  Sometimes I even program something up to demonstrate what I am talking about.

It seems to me though that everyone else’s jobs (non-computer scientists) have changed and not necessarily for the better. People do their jobs and then they do a load of extras like social media, blogging, content creation, logging stuff in systems- the list is endless – on top of their workload.

It makes me wonder: Is this progress?

Humans and stories

As a teenager, on hearing about great literature and the classics, I figured that it must be something hifalutin’. In school we did a lot of those kitchen sink, gritty dramas (A Kind of Loving, Billy Liar, Kes, etc.,). So, when I found the section in the library: Classics, Literature, or whatever, it was a pleasant surprise to see that they were just stories about people, and sometimes gods, often behaving badly, and I was hooked. Little did I know that reading would be the best training I could receive to become a computer scientist.

Human and computer united together

In my first job as systems analyst and IT support, I found that I enjoyed listening to people’s stories in and amongst their descriptions about their interactions with computers. My job was to talk to people. What could be better? I then had to capture all the information about how computers were complex and getting in the way and try to make them more useful. Sometimes I had to whip out my screwdriver and fix it there and then. Yay!! Badass tech support.

The thing that struck me the most was that people anthropomorphised their computers, talking about them needing time to warm up, being temperamental, and being affected by circumstances, as if they were in some way human and not just a bunch of electronic circuits. And, that the computer was always the way of progress, even if they hated it and didn’t think so.

I think this is partly because it was one person with one computer working solely, so the computer was like a companion, the office worker you love or hate, who helps or hinders. There was little in the way of email or anything else unless you were on the mainframe and then it was used sparingly, especially in a huge companies. Memos were still circulated around. The computer was there to do a task – crunch numbers, produce reports, run the Caustic Soda Plant (I did not even touch the door handles when I went in there) –  the results of which got transferred from one computer to another by me, and sometimes by that advanced user who knew how to handle a floppy disk.

Most often information was transferred orally by presentation in a meeting or on paper with that most important of tools, the executive summary whilst the rest of it was a very dry long winded explanation, hardly a story at all.

Human and computer and human and computer united

Then the Internet arrived and humans (well mainly academics) began sharing information more easily, without needing to print things out and post them.  This was definitely progress. I began researching how people with different backgrounds like architects and engineers could work together with collaborative tools even though they use different terminology and different software. How could we make their lives easier when working together?

I spent a lot of time talking to architects and standing on bridges with engineers in order to see what they did. Other times I talked to draftsmen to see if a bit of artificial intelligence could model what they did. It could up to a point, but modelling all that information in a computer is limiting in comparison to what a human can know instinctively, which is when I realised that people need help automating the boring bits, not the instinctive bits.

I was fascinated by physiological computing, that is, interacting using our bodies rather than typing – so using our voices or our fingerprints. However, when it was me, my Northern accent, and my French colleagues, all speaking our fabulous variations of the English language into some interesting software written by some Bulgarians I believe, on a slow running computer, well, the results were interesting, to say the least.

Everyone online

The UK government’s push to get everything electronic seemed like a great idea, so everyone could access all the information they needed. It impacted Post Offices, but seemed to free up the time spent waiting in a queue and to provide more opportunities to do all those things like pay a TV licence, get a road tax disc, and passport, etc. This felt like progress.

I spent a lot time working on websites for the government with lovely scripts to guide people through forms like self-assessment so that life was easier. We all know how daunting a government form can be, so what could be better than being told by a website which bit to fill in? Mmm progress.

Lots of businesses came online and everyone thought that Amazon was great way back when. I know I did living in Switzerland and being able to order any book I wanted was such a relief as opposed to waiting or reading it in French. (Harry Potter in French although very good is just not the same.) Progress.

Then businesses joined in and wanted to be seen, causing the creation of banners, ads, popups, buying links to promote themselves, and lots of research into website design so they were all polished and sexy, even though the point of the Internet is that it is a work in progress constantly changing and will never be finished.

I started spending my time in labs, rather than in-situ, watching people use websites and asking them how they felt. I was still capturing stories but in a different way, in a more clinical, less of a natural habitat, way which of course alters what people say and which I found a bit boring. It didn’t feel like progress. It felt businessy – means to an end like – and not much fun.

Human -computer -human

Then phones became more powerful and social media was born, and people started using computers just to chat, which felt lovely and like progress. I had always been in that privileged position of being able to chat to people the world over, online, whatever the time, with the access I had to technology, now it was just easier and available to everyone – definitely progress.   Until of course, companies wanted to be in on that too. So, now we have a constant stream of ads on Facebook and Twitter and people behaving like they are down the market jostling for attention, shouting out their wares 24/7, with people rushing up asking:  Need me to shout for you?

And, then there are people just shouting about whatever is bothering them. It’s fantastic and fascinating, but is it progress?

The fear of being left behind

The downside is that people all feel obliged to jump on the bandwagon and be on multiple channels without much to say which is why they have to do extras like creating content as part of their ever expanding jobs. The downside is that your stream can contain the same information repeated a zillion times. The upside is that people can say whatever they like which is why your stream can contain the same information repeated a zillion times.

Me, I am still here wondering about the experience everyone is having when this is all happening on top of doing a job.  It feels exhausting and it feels like we are being dictated to by technology instead of the other way around. I am not sure what the answer is. I am not sure if I am even asking the right question. I do know how we got here. But is this where we need to be? Do we need to fix it? Does it needs fixing?  And, where we should go next? I think we may need a course correct, because when I ask a lot of people, I find that they agree. If you don’t, answer me this, how do you feel when I ask: Is this progress?

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]

Designing design: Function, behaviour, structure

astrolabe pic

[Part 2 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 design process exists because the world does not always accommodate us humans, so we employ designers to create things or artefacts, to get the world to adapt to us. In this way, we can see that design is the science of the artificial.

One way of thinking about design is to categorise information into three groups: function-structure-behaviour, as follows:

The first step is for designers decide on the sorts of functions they want the new artefacts to be able to do and then they write descriptions that could potentially do that.  However, until the artefact exists in its physical form, i.e., it has a structure, it is impossible to predict if the artefact will function in the way the designer anticipates, especially when choosing materials – plastic behaves very differently to wood and so on.  Or, in the case of designing a website, a blog behaves very differently to an online store.

So, instead of going straight to the second step of trying to describe the structure of an artefact directly from a set of required functions, the designer will first try to describe the expected behaviour of an artefact, and probably do some sort of simulation (by building a prototype, or performing computational analysis) in order to see how the thing behaves and if it is different to the expected behaviour, and this even works with software.

So, I am currently redesigning my website as it’s looking a bit old, so if I think of it in terms of function, behaviour, and structure, what might happen?

  1. Function: What is the purpose of your website? (Currently, it is just my blog, but I would like it to showcase what I do.)
  2. Behaviour: What will your website do? (Describe what I do, potentially offer what I do?)
  3. Structure: What structure will your website take? (I should have an about-me page, a courses page, a books page,  links to what I do, or a membership area so people can access what I do directly.)

In this way we can see that once I divide how I want my site to behave and how I want it to be structured, it becomes easier to open up to new ideas. Had I just thought that I have a blog, which looks like a blog, it would have been harder to arrive at the idea of creating a membership area. I might never have even thought about it.

Web design (2): Get the picture


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

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

The first picture ever uploaded onto the Internet was a photoshopped gif of a female comedy group at CERN called The Horrible Cernettes. Tim Berners-Lee uploaded the image to show that the Internet could be much more than physics laboratories sharing data worldwide.

The links above complain that it is a dreadful first image for making history, but I think that is in part because Berners-Lee wanted to make a point about what the Internet could be, so the content was the least of his worries. It wasn’t about the content. It was about the Internet being a place where we all meet. And, this is what is ultimately so liberating about our digital culture. We all get a say in what makes culture. And, perhaps physicists have different ideas about what is culturally important which, after all, is what makes The Big Bang Theory so brilliant and funny.

However, if we look at the ancient cave paintings found on the Island of Sulawesi, Indonesai, of hand prints and pig deer, we get a very different feeling. Archaeologists believe that they are at least 39,000 years ago and are among the oldest examples of figurative art, but cannot say for sure what they represent. They are beautiful and I look at them with awe, which is probably why some archaeologists speculate that they represent a belief system the artists held. Or perhaps, they are a world view, like the cave of swimmers, found in the Sahara. These paintings are only 8,000 years old, but have given rise to the theory that the Sahara was a place where people used to swim, before climate change turned it into a desert. We may never know.

I asked my girls what they thought the pictures of hands and beasts and swimmers meant. One said: This is me. Remember me. The other said: Spread my imagination. In other words, my girls think these images were drawn so that the artists could make their mark, record and share their worldview and be remembered, which I believe is why people create today whether it is images or words.

Science research website, Greater Good asked seven artists: Why do you make art? And they got the same response as the ones my junior school girls gave me with a couple of additions/variations:

Making art for fun and adventure; building bridges between themselves and the rest of humanity; reuniting and recording fragments of thought, feeling, and memory; and saying things that they can’t express in any other way.

When they asked Hip-hop artist, KRS-One, he said:

Put a writing utensil in any kid’s hand at age two or three. They will not write on a paper like they’ll later be socialized to do, they will write on the walls. They’re just playing. That’s human. Graffiti reminds you of your humanity, when you scrawl your self-expression on the wall.

Which is so true. The ancient images were drawn on the wall. They are self-expression and remind us of our humanity, which is why they are so moving. Interestingly, hurried scrawled graffiti has been found on ancient monuments, and on the walls in Pompeii. And, in Rome on a church wall, the first words of Italian graffiti, or Vulgar Latin, were written, written like a response, in the vernacular, representing the ordinary person’s thoughts. Today, graffiti is shorthand for unsolicited markings on a private or public property and is usually considered to be vandalism. Yet, some of it is breathtaking and elaborate. There are three categories of graffiti: Tourist graffiti (‘John wuz here’), inner-city graffiti (tagging and street art), and toilet graffiti (latrinalia) described in a fabulous Atlantic article. Graffiti is a way of people contributing to the conversation like when people leave their comments and links below.

As is painting, so is poetry

The Roman poet Horace ut pictura poesis (as is painting, so is poetry) made the link between word and image, which has kept the art world busy for centuries. Aristotle’s theory of drama considered the balance of lexis (speech) and opsis (spectacle) in tragedy. So we can see that ancient theories of memory use words and images, which no doubt inspired the more modern and controversial Dual Coding Theory, which says that when someone is learning a new word, if a meaningful picture is given alongside it, the learner will retain it more easily than if it didn’t have an accompanying picture. This is reminiscent of the ubiquitous meme: lovely quotation, lovely image, shared experience, which has a gestalt feel of something meaningful.


The first written language was a language of images –  the Hieroglyphics. However, the appreciation of their meaning was lost until the decoding of The Rosetta Stone which took so long because the code breakers they thought they were decoding images. It was only when they realised that the Hieroglyphics were a language and needed to be treated as such, did they decode the stone.

Like all languages, Hieroglyphics are an organised form of communication because you can’t build something as grand as the Pyramids without communicating clearly and communication is a way of advancing humanity. However, Hieroglyphics began as decorative symbols for priests – a gift of sacred signs given from the God Thoth – and were used to record the meaning of life and religion and magic. These were too elaborate for merchants, who adopted a simpler version to preserve their transactions, until Hieroglyphics fell out of favour for the more practical cursive Coptic script, which gave way to Arabic and Latin, languages we recognise today, in which communication was preserved and recorded to enrich future generations.

Images reward us

Research, particularly in the field of neuroesthetics, which is how the visual brain appreciates visual art, shows us that art is a rewarding experience. It is not necessarily the message itself which the viewer finds rewarding, it is how it is delivered. That is to say, it is it is not what is painted, it is how it is painted that lights up the brain’s reward centre. And, we prefer images to photographs, because the brain is free to interpret meaning even though it ultimately prefers to see a representation of what is in nature. And why wouldn’t it?

The asethetics of nature

In nature we find so many pleasing patterns. We also are attracted to art and people who are asethetically pleasing. The golden ratio is a pattern which appears in nature and has been used in art, as has symmetry. The most beautiful people have symmetrical faces and the most average facial features. We are naturally attracted to beautiful people in paintings and real life.

And, we are also influenced by them, which marketers have long recognised. They use lovely images to wrap their products in knowing that us consumers will be more willing to consume something which looks beautiful. This is known as the art infusion effect.

It is the same for newspapers, pictures sell more copy. The Illustrated London News was created in 1842 and had 60,000 subscribers in that year alone, after someone realised that newspapers sold more copies when they had pictures in them, especially ones which showed a face or place. But it wasn’t until 1889 that photographs were used in newspapers.

Images online

And so it is online, Jakob Nielsen says that users pay close attention to photos and other images that contain relevant information but will ignore pictures used to jazz up web pages. Stock pictures of people in business situations get ignored but pictures of people who write the blogs or work in the companies get studied 10% longer than their written biographies which often accompany any photograph. If you are selling a product you need high quality photographs which users can inspect and compare.

Users want to be educated by the images and find out things which is ultimately why they are on your website. Edward Tufte has written extensively about excellence in statistical graphics and visualising data. His says that users are sophisticated individuals so:

Give them the greatest number of ideas, in the shortest time, with the least ink, in the smallest space.

There is no need to dumb down. When a graphic is well created, patterns can be seen and understood on different levels.

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. She also outlines ways of using responsive images, for leaner, faster pics, and highlights new cool and practical uses of imagery with the latest tags from W3C.

Images are communications which have the power to change us. Here are some:

Content aside, the urls are precisely named to drive traffic via social media.

However, if all else fails, talk to your user and learn all about what they are looking for, before you share your beautiful art.

[Part 3:Web design: Getting to grips with your user’s experience]

Writing a blog series

the word blog typed on paper in typewriter

I have been blogging here for about eight years, but hadn’t ever written a blog series until recently. By this, I mean a series of blog posts, on one topic – in this case, five blog posts on web design, which I planned out in advance, and published weekly.

Outlining the blog series

I had written the outline of the blog series back in December 2013 because I was thinking about teaching a course on web design. However, the opportunity came and went as opportunities do sometimes, so, I left the outline up, as it works perfectly well by itself, with the intention to come back and revisit it some day.

In September of this year, I was invited to give a presentation with the title: A good website is not necessarily a pretty one. This got me thinking anew about my outline on web design. So, I wrote up the presentation as a blog post (and changed the clunky title to What’s the story?) which became the first in my web design series and I gave it to my audience as a handout.

I had originally conceived this first blog post as one about infographics and visualisation, which would build on a visualisation blog post I wrote a while ago called Visualisation: Information is power – just avoid drowning in data, but as my presentation preparation and blogging went on, and inspired by Berner’s-Lee’s first website, I realised that it doesn’t matter how many beautiful pictures or infographics you have, it is not enough unless you have a clear underlying message for your website. If you have a clear message, it can be described in words, perhaps even in two minutes like the Hollywood elevator pitch, which can be accessed by a screen-reader as well as illustrated visually and served easily to your various users because your site is built according to web standards.

However, storytelling, narratives and infographics are big subjects which I decided as I was writing that I will come back to, because I find them endlessly fascinating. So, I concentrated on the subject of having a clear message, leaving out the lovely visuals, in the first blog post and then once it was published, I wrote four more blogs on other aspects of web design.

Linking the blog posts

Thanks to the original outline, I had a specific topic to cover in each blog post:

On publishing the new blog post each week, I would link to it from the outline blog post and then at the top of the new blog post I would link to the introduction blog post (the same outline post as it really is an introduction) and the previous week’s blog post (e.g., in part 2, at the top I put links to the intro and part 1), and at the bottom, I put a link to the next week’s post (e.g., in part 2, at the bottom I put a link to part 3).

One at a time or all at once

At, Darren Rowse recommends planning out the series by creating a draft of each blog post and then writing one a day. For him, this reflects his way of working, which contrasts with his colleague Eric’s approach of writing them all together before scheduling them for publishing, e.g,. one a day for a week.

Eric’s approach chimes with mine better, because in part one of my web design series called What’s the story? I had a section entitled No Lorum Ipsum about using a core information design approach described in a great article on by Ida Aalen. However, when I got to part three about content: Being content with your content, I realised that this section would fit better in this part so I cut it out and put it there instead, which would confuse anyone who was searching for it in part 1.

I would like to write a whole series and then publish it, but I know realistically that I would take months over it, and my site would not have any new content appearing until I had finished. At the moment I have a goal, which I rather like, of publishing something once a week, so even if I do have to go back and cut bits out because they fit better in another post, I still enjoy that sense of achievement of weekly publishing.

When is a series not a series

I have some other blog posts which I think of as a series, but I haven’t linked them because they were not written as such. Usually, when I write a blog post I do so because I want to think about a particular topic. For example, a while ago, I wanted to think about emerging technologies and so I wrote a blog post on the topic.  Once I had posted it, I realised that I wasn’t quite finished and wanted to think some more about emerging technologies and so I ended up writing two more blog posts. I have done the same with storytelling (three blogs) and also with social media (at least five posts and counting). Flicking back through these blogs, with a bit of shaping they could be linked together, but I like them as they are.

I tend to write super long blog posts like these: Digital Culture and Feeding the machine: the embodied user in a social media world because blogging is the best way for me to research a topic, think about it, and then, write it up. It is only once I have written a blog post that I feel I know what I am talking about. I guess at that point, before pressing publish, I should look at the text, turn it into a series, and schedule a series of posts like Eric, which would be good for me, as my site would then consist of smaller, easier to read blog posts. I definitely clarify my thinking while I type. Look out for my future smaller blog post series.

Writing a planned blog series was a bit of a different experience and a great one, which I enjoyed. I will definitely be doing it again and recommend it to all you bloggers out there.

How do you plan and write your blogs? Leave a comment below.