Web design (2): Get the picture

Orlando-Web-Design

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.

Hieroglyphics

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]

Web design (0): The science of communication

Orlando-Web-Design

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

[ 1) story, 2) pictures,  3) users, 4) content, 5) structure, 6) social media, 7) evaluation]

Today, we have the technology to design websites that do justice to Berners-Lee’s vision without getting bogged down in code and pixels. Web design is communication and there is a science to communicating well. (Which is not the same as science communication, that’s another blog altogether.)

Communication: What’s the story?

At heart, humans are storytellers and a website is a place to shape a narrative, tell a story, and create an experience. Fictional journalism and creative non-fiction exist because we have long recognised the power of a story to move us and influence our behaviour. Charles Dickens would read out parts of his novels to the wealthy as entertainment whilst raising money for Gt Ormond St Hospital for Sick Children.

But, Napoleon Bonaparte was right when he said a picture is worth a thousand words.
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.

Moreover when we can change our focus and present data visually or, we rearrange museum artefacts according to an alternative plan, we create new insight. Investigating the patterns of our world can further our understanding of anything we choose to focus on.

Hitler might not have invaded Russia if he had taken a close look at the Minard Map showing how Napoleon’s invasion went badly wrong. Nowadays, Minard would have produced a computer simulation, or BBC drama to convince Hitler that he was not invincible.

User experience: Finding the tribe

Once we have a story to tell. We have to find the right audience. It is no good telling a medical tale of blood and gore to an audience who wants to know when the next My Little Pony conference takes place. The golden rule of user-centred design for websites is: Know your user.

One way is to create case studies of users, and user profiles, so that when we design our My Little Pony community website we know that Lucia, a 25-year-old male who works as an electrician and lives in a duplex in Pasadena is typical of our audience. Thinking of Lucia makes the design more specific and relevant to the intended user group.

We can also learn about our users, the main factor in our design process, through the field of cognitive science. We need to understand user motivation. What makes a user happy? We need to manage user perceptions and responses to fulfill user desires. We need them to join in and love what we do.

Another way is to just ask the user, with focus groups, and questionnaires, which is less exciting but just as useful. Whilst we are there we could even give them a card sort, so that they can tell us where they expect to find information and facilitate our content strategy.

Content strategy = Digital publishing + information architecture + editorial process

Content strategy has a Gestalt feel to it, like website design itself, which leads to the sum above becoming more than its parts. Information architecture may say where content lives. Content strategy says when content lives, and editorial process is more than just spell checking.

Questions to ask:

  • Does the website need to have great usability which is measured by being: effective and efficient; easy to learn and remember; useful and safe?
  • Can a user ask and know: Where am I? Where have I been? Where am I going?
  • Is the content better presented by the no-function in structure principle? (Pinterest anyone?)
  • How do we guide users to our key themes, messages, and recommended topics?
  • Do we wish to grow our audience?
  • What type of search engine optimization is best for attracting visitors?
  • Do we wish to analyse the market online to check we are reaching our segment?
  • Which content-management system is best for us?
  • Are we web standards compliant?
  • Is the content working hard enough for our users?

These questions can be used to analyse content gaps and plug them so that the user is getting what he or she needs and feed that back into beautiful content, before running headlong into our social media campaign.

Social media: Sharing and caring

During Oprah Winfrey’s 25-year TV series, she created a community. Her message was: You are not alone. Oprah knows that we all want to feel that we matter. We want to be included a community and to be heard in conversation. We want to feel connected, so that we can be open and participate in life with others.

At its best, social media offers this, but all those Instagram selfies and tweets about what you had for breakfast can make even the nosiest among us ask: What is the point of twitter?

Oprah and her network OWN reach out to its audience via social media and networking and give us all a masterclass in how these tools should be used.

Evaluation: Is it working?

How do you know your web site is working? The cultural probe of course. This is when you give your user a way to give feedback whilst going about his or her daily business, in the form of a diary, in order to capture user context. Other ways of evaluation include the usability laboratory with questionnaires and exercises, or click capture software or business style web analytics.

Each method has its own pros and cons, but is ultimately useful.

Humans are fascinating creatures and will always find new and interesting ways of using whatever you create either by necessity or by not understanding what the designer intended in the first place. This is known as serendipitous design which in itself is another exciting field which needs to be communicated – scientifically, of course.

[Part 1]

Cognitive Science: What makes your users tick

phrenology pic from www.hfac.uh.edu

Like many usability consultants I have spent hours locked in rooms with strangers saying: “What do you think about this web page?” It is boring way to earn a living especially as you often know the answers and could tell clients without asking the questions.

Alas, most clients only believe opinions about their websites when it comes from random users – not you, the expert. Luckily the industry takes Jakob Nielson’s advice on testing: five users only to establish a pattern of responses (and because it’s cheap). Although, if we were really serious, we would need 30 users to talk about the statistical significance of our results.

Some of this boredom could be avoided (and client money saved) if everyone employed the patterns which already exist in users’ heads to create more intuitive webpages and GUIs. Cognitive science, the study of mind and intelligence, enables us to understand what makes our users tick. Continue reading “Cognitive Science: What makes your users tick”

Visualisation: Information is power – just avoid drowning in data

 Map of Great Fire of London Copyright © The British Library Board.
(The Great Fire of London map at the British Library website)

In the 1530s when Henry VIII realised that dissolving the monastries would get him much needed assets, he commissioned a map of London, paying particular attention to ‘lawless’ Southwark. He wanted to see if the borough had any money he could take off them. Henry VIII was a smart man, he knew that the right sorts of information bring wealth and power.

I saw the resulting map last year at the British Library exhibition London: A Life in Maps along with many others – maps of wills and estates, Victorian cab fare maps, cycling maps and tourist maps. Each map was primarily motivated by the need to learn more about an area of London in order to make or save money, especially when making your way around the ever growing London.

In part, this was because travelling around London has always been a daunting thing to do and if you don’t know your way around, you can waste a lot of time and money on convoluted travel. Visualising how everything was connected was impossible to do until Phyllis Pearsall personally pounded the streets, all 3 000 miles of them and put together the world’s first A to Z. She realised that London had to be presented as a cohesive system of streets, buses, and tubes. Like all fantastic ideas, it is so obvious – but back then no one had ever thought of it.

This wasn’t the first time cross referencing different types of data could help people. In 1830’s Dr John Snow used a map of London on which to plot water pumps next to cases of cholera in order to identify how the disease was being spread. He concluded that it was an infected pump near where the outbreak had occurred, and not an airbourne miasma which was the hysterical masses feared. Once he had identified and closed the infected pump, it was easier for Joseph Bazalgette to get the support he needed to build sewage systems which are still used to this day.

Breaking news infographic style

Many online journalists have adopted the same visualisation techniques to present breaking news. They have maps which plot events and eye witness accounts either by video or audio. This information is put up online, as it happens. People get an immediate insight to events good and bad and can make informed make decisions that may save lives.

Techniques range from sophisticated virtual reality programs to simple line graphs. Sometimes this is done well as in the Dr Snow example, other times techniques can be badly employed. Edward Tufte has written extensively about the way to avoid chart junk so that more meaningful graphics can be produced either by hand or as in the case of scientific visualisation by harnessing the power of computers.

In meteorology, molecular modelling, and medicine, computers show us things we could never have seen otherwise: the inside of a bone, or a hairline fracture not detected on an x-ray but visual in a 3D rendered pelvis.

Even football is given a helping hand. Redbee’s Piero software uses live footage from football matches and ties it to a virtual stadium to calculate the exact coordinates of players and the ball during those crucial moments not seen by the referee or caught on camera. Piero creates new virtual camera angles (or viewpoints) and approximates what happened so that the right decisions can be made.

Recognising and reading the patterns

Previously we thought that the field of artificial intelligence would produce systems which could crunch through the numbers alone and present the solution to us. Now we know this is still for the future. We humans are adept at recognising patterns and making links in an almost intuitive manner which is impossible to replicate in a computer. Cognitive scientists try to crack the secrets of the brain and our minds to understand how we reason. Until the time when we can let our machines reason with us, we need to stick with and have control over what we want see.

Football technology is an ideal application for visualisation as there are a limited number of rules to represent and a field of play to be modelled which gives us all of our constraints and the context within which to search. Other applications such as monitoring bridges or the people/traffic flow through a town can be without boundaries so we are left just to literally stare at the waves of data as they happen.

To counter this feeling of being deluged, we need good systems which we as the viewers can interact with and which we, the users, can fix constraints and context. In this space we can then explore and search, using interactions which are translated into algorithms. We exploit and manipulate new viewpoints (like Piero does), we fixate on a viewpoint, we apply analogies and metaphors to find different ways of interpreting what we see and then we transform or combine our data, again to find different viewpoints. The problem is, we sophisticated humans can do this automatically, computers can’t yet, they can only flag up certain patterns that we have told them about.

Maps: Ideal information systems

Exploration is difficult to support, often because the visualisation aspects of software often dominates to such an extent that basic functionality is compromised. Information is presented to the user in a potentially misleading manner and the wrong conclusions are drawn. To counter this, there needs to be a direct correspondence between the human perception of the physical world and the abstract computer-internal representation. Maps are a perfect example of this correspondance and have worked well for centuries. Henry VIII obviously knew how to manage his data.

Google Maps allows you to look at the abstraction of the map and superimpose it on the photographic representation. You can zoom in and look at the trees and houses and still be aware of the street names. This is an accessible form of augmented reality which would have been difficult for the man in the street to imagine on such a widescale i.e., the whole world, even ten years ago. Imagine what Henry VIII would have done with such information at his fingertips, whilst sat in his palaces. He would have zoomed in on Southwark borough and had a magpie’s view of the rich pickings.

Using patterns to shape our world

Escher picture

In the 1990s, Erich Gamma changed the way I thought about software engineering forever! Gamma visited the Ecole Polytechnique Federale de Lausanne where I was a PhD student, in order to give a seminar on design patterns.

The idea of extracting a solution template from a piece of software to turn it into a pattern which can be reused, was to me, an exciting step forward in software engineering. Instead of reusing software from a library that needs to be maintained and ported as necessary, abstracting the solution and creating a pattern repository gives software engineers a toolbox of meta-level solutions.

Continue reading “Using patterns to shape our world”