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

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]

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 problogger.net, 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 AListApart.com 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.

Web design (7): Evaluation

desktopetc

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

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

Even though evaluation is the final part of this series, it should not be left to the end of any software project. Ideally, evaluation should be used throughout the life cycle of a project in order to assess the design and user experience, and to test system functionality and whether it meets user requirements without creating unexpected results or confusion.

Expert analysis

Expert (or Theoretical) analysis uses a detailed description of the design, which doesn’t have to be implemented. This creates a model of the user’s activity and then analysis is performed on that model.

It is one way of assessing whether a design has good usability principles. It cannot guarantee anything but can hopefully flag up any design flaws before time and money gets spent on implementation.

Expert analysis is best used during the design phase and experts can assess systems using:

Heuristics which are rules of thumb and not true usability guidelines. Usability expert Jakob Nielson developed 10 usability heuristics in 1995 and they are still widely used and quoted today.  Design consultant, Ari Weissman says that heuristics are better than no testing at all, but to say that they can replace getting to know your users and understanding them just silly. Researchers at the University of Nebraska found that heuristic evaluation and user testing complement each other and are both needed.

Review-based evaluation uses principles from experimental psychology and human-computer interaction (HCI) literature to provide evaluation criteria such as menu design, command names, icons and memory attributes to support/refute design decisions. Reviews may even use style guidelines provided by big companies such as Microsoft and Apple.

Model-based evaluation uses a model to evaluate software. This model might be taken from HCI literature such as Stuart Card’s GOMS and Ben Shneiderman’s Eight golden rules of dialog design.

Cognitive walkthroughs are step-by-step inspections which concentrate on what the user is thinking whilst learning to use the system. Alas, it is the analysts who act as the user and try to imitate what the user is thinking. Walkthroughs can be used to help develop user personas.

However, the main criticism is that novice users are often forgotten about because analysts have lots of experience and their pretending to be users can introduce all sorts of bias into your system. The advantages of this approach is that areas which are unclear in the system design can be easily flagged up and fixed cheaply and earlier on in the life cycle.

Using your user: user testing

The most informative types of evaluation always take place with the user. This can happen in the laboratory or in the field. In the laboratory, usability consultants have a script, such as this one by usability expert Steve Krug. The usability consultant asks the user to either do whatever they are drawn to do, or to perform a specific task,such as buying a product on the site, whilst talking aloud. This thinking aloud protocol not only identifies what the problem is, but also why. The best thing about usability testing is that clients can hear a user saying something which may be obvious to the consultant but not to the client and which the client might not believe if the consultant just told them. Co-operative evaluation is a very similar technique to usability testing.

Outside the laboratory, you can follow the user about and shadow them in the workplace, to see how the user interacts with your software, or the current software that your new software will hopefully improve upon. This is ethnography and a way of learning about the context in which your users work. It can be very expensive and time consuming to hire ethnographers to go into users’ workplaces.

A cheap and cheerful way of reproducing this shadowing is to get the users to keep a diary or blog, known as a cultural probe.  They are quick and easy to put together using open-ended questions which encourage users to say all the things they might not say during a testing session.

Empirical evaluation

Another relatively cheap and cheerful method is to get your user group to fill out a questionnaire or a survey in order to get their feedback.

The questionnaire needs to be designed very carefully, following these instructions, otherwise you can end up with a lot of information, but nothing tangible. The main advantage is that you get your users opinions and you can measure user satisfaction quite easily.

The disadvantage is it that is hard to capture certain types of information in a questionnaire such as the frequency of a system error, or the time taken to complete a task.

Logging

Computers can collect statistics of use, to tackle the sorts of questions like time taken and frequency of system errors.  Web stats are a great way of seeing this sort of information as well as which pages are the most attractive and most useful to users.  Eye-tracking software and click captures are also useful ways of collecting data. However, care needs to be taken not to introduce any bias in the interpretation of this data.

Informal evaluation

Informal evaluation methods can be useful, in the design stage for example, but are better suited in the context of performing research as they do not always yield usable results which can be used to guide design.

Focus groups: This is when you get a group of users together and they discuss subjects led by a moderator. Focus groups can be useful. However, they can lead to users telling you what they think they want, rather than what they need. As this 2002 paper asks: Are focus groups a wealth of information or a waste of resources?

Controlled experiments test a hypothesis like this great example: College students (population) type (task) faster (measurement) using iPad’s keyboard (feature) than using Kindle’s keyboard, by identifying independent and dependent variables that you can collect data on after testing in a simulation of real world situations such as in a college where iPads and Kindles are used.

No matter how great your website or software system is, it can always be improved by some method of evaluation. There are many methods involving users and experts to make your system as good as it can be throughout the whole lifecycle of your website or your software. Evaluation is the only way to identify and correct those design flaws.