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]

Game theory in social media marketing (2): Customers and competitors

Source: rarewallpapers.com

[Part 2 of 4: Game theory & social media: Part 1, Part 3, Part 4]

In part 1, we saw how people love to play games. Game theory was first recognised in 1928, by John Von Neumann’s paper which was about two people playing a game together with only one winner (known as: two person game-zero sum).

If we apply game theory to social media marketing, we could say that the customer and the marketer are playing a two person game, zero sum – winner takes all. Before social media, this might have been the case, for customers believed that shops were acting in their own self interests and so they, the customer, did too. Everyone was out to get what they could. In reality though, the relationship is more of a win-win: Without the marketer, the customer might not learn about the product on offer and not buy or benefit from the product, and without the customer, the marketer doesn’t have a job at all.

Playing your customer

In his book, Social Media Marketing, Eric Anderson describes the marketer-customer as a two-way mutually dependent conflict and, points out that in the world of marketing everything is described combatively. There are marketing campaigns, killer apps and dead lists, which fit with game theory: Two parties with opposing and mutual interests both engaged in winning the outcome of combat.

For if the customer doesn’t engage and play the game then, they effectively kill the product, or even the market the product exists in. More worryingly for a marketer, if a customer engages and is an influencer, this customer with a few well placed tweets and reviews on a social computing site (their blog, Amazon, Goodreads) can begin a campaign which can sink a product. On his blog, Nathan Bransford describes how books have been effectively killed prior to publication due to bad reviews on Goodreads.

A nice equation given by Kyle Wong on Forbes describes what an influencer does as follows:

Influence = Audience Reach (# of followers) x Brand Affinity (expertise and credibility) x Strength of Relationship with Followers

Influencers have immense power to kill or create sales, which is a totally new thing in marketing. This is potentially such a powerful way to sell to millions across the globe, especially amongst certain demographics – mums, millennials –  that many companies view social media marketing as the only way to market nowadays. They know that they must, like influencers,  build relationships with their customers. One way to do this is by creating content.

Playing your competitor

In a great blog on coschedule.com, Julie Niedlinger, describes how game theory approaches to creating content can help marketers decide whether their strategy (another military word) is appropriate with the competitors and with their customers.

Niedlinger advises marketers to take a moment, before reacting to comments that potential customers will leave on blogs, in order to ask whether there is a game going on. If so which game? And most importantly, are the rules clear? Once they are then and only then should a marketer make a move.

Secondly, she looks at competitors producing a similar blog of content rich potentially market cornering information and asks what is the next move?  Do you steal their writers? Mimic them? Join forces? Or, follow trends in an effort to win their share of the market.

It is important to know your game, it’s rules, and the moves you should be taking.

In part 3, we will look at specific game theory theories and see what moves and games we could play.

[Part 3]

Designing design: No function in structure

astrolabe pic

[Part 4 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]

Previously we saw that the design principle: Form follows function, can be fabulous but sometimes limiting, and in nature it does not necessarily apply, sometimes function follows form. However, if you take the form (or structure) outside of its natural context or situation, so that there are few clues as to what an artefact was designed for, users may find completely new functions for it. This is known as the no function in structure principle.

The post-it note originated because one 3M employee thought that the small pieces of paper for testing glue were actually a new type of bookmark. Thankfully, no one was around to explain that everyone else was focusing on the glue to keep this person from serendipitously finding a new tool.

On the World Wide Web, Pinterest is a great example of no function in structure. The user collects pictures, or looks at other peoples’ collections of pictures from across the WWW, and they just browse and click, and browse and click (actually, designer Jeffrey Zeldman had a different way, until Pinterest disabled the feature which stopped him from enjoying the app – which is a different approach altogether to not listening to the user). Either way, looking at, and saving pins is an alternative method to the standard way of navigating around a website and asking Steve Krug’s three questions: Where am I? Where have been? Where am I going?  The users on Pinterest don’t necessarily care. They are there to experience the site by looking at all the lovely pins without any exact expectation of what order things need to happen in.

Treading the paths of desire

Instead of prescribing how someone should exactly use your website or artefact, sometimes it can be insightful to watch what a user does when presented with an artefact without clear instructions. During his TED talk, designer Tom Hume, showed an aerial shot of the centre of Brasilia which was designed for cars only. There are paths of desire trodden in by pedestrians across 15 lanes of motorways and roads, so that pedestrians can get to where they need to go in a city only designed for cars. Consequently, pedestrian road accidents are higher in Brasilia than anywhere else in the world. In contrast, a good use of the paths of desire is of the ones that are allowed to appear in newly built University Quads which are left without paths until people have trodden them in, then the designers come back and concrete them over.

Serendipity and discoverability

The world is constantly changing, especially in this our digital era, and it is necessary for the designer to have empathy for the users. Adopting a no function in structure approach and watching users discover new experiences and ways of using artefacts (or the infrastructure) is a truly empathetic way of providing the design solutions that people really want.

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.

Conclusions: The limits of the social animal on social media (9)

Personifications of social media sites
Source: www.techweez.com

[Part 9 of 9: The Social Animal on Social Media, Part 1Part 2, Part 3, Part 4, Part 5, Part 6, Part 7, Part 8]

Social media may be changing the way we do business and how we connect with others, but I don’t believe it is changing us fundamentally as humans. My theory, after writing this series, is that social media reflects the way we behave, and we behave the way do because we are human. And, because we are human, we just can’t get enough of social media, which really isn’t our fault, it is just the way we are made.

Social media not only lights up the nucleus accumbens, the part of our brain which deals with rewards, but does so randomly, which is called a variable interval reinforcement schedule. Rats or birds who have been trained to get rewards randomly will work harder for rewards, and take longer to give up checking once all rewards for the behaviour is removed. We are the same, we will randomly check all our social media for a very long time, before it no longer rewards us.

One reason is that, social media is much easier on us than the face-to-face contact of daily life and that in itself is a reward for we much prefer people who are nice to us without us having to make a massive effort. For once we are tangled up with other people – as we have seen throughout this blog series – we conform and betray ourselves, we behave aggressively and act with prejudice, all so we can avoid feeling rejected. Then, we feel so bad about our shoddy behaviour that we have to find ways to feel better by reducing our cognitive dissonance and the gap between who we are (good people) and the things we do (behave badly towards other, or towards ourselves, like when we agree to do favours for people we don’t like).

We all need connection

It really isn’t our fault. Brene Brown, Professor of Sociology, says, that we are neurobiologically wired to want to connect with our fellow human beings. We all want to feel that we matter. So, of course we would choose social media. Why not choose the quickest and easiest way possible to feel connected to others? It seems like less of an emotional investment, but as this series has demonstrated, it really isn’t.

It might have been okay if social media had stayed as it began: easy and quick ways to share pictures, videos, texts between groups of friends, or networks for sharing interests across time and space. But once, we realised that anyone could be a star in the land of digital culture, then we all spent more time there trying to be loved or trying to make money – it amounts to the same thing, after all: money=influence, influence=feeling loved and valued.

And, then once news could get delivered the way we liked it, via, for example, the Huffington Post who serve up the same article with two different headlines and then they go with the headline which attracts the most hits (aka A/B testing), we never stood a chance. Web media started giving us what we want, right around the clock which encouraged traditional news outlets to try and keep up. Consequently in-depth coverage and accuracy seems to have suffered.  Facts are cherry-picked for nice looking memes which can remain unsubstantiated assertions because the rest of the facts don’t get checked half as much as what the crowd says. Journalism is engaging in groupthink.

Limits on friendship

Marketer, Marcus Sheridan, wrote a funny blog called Chris Brogan unfollowed me on Twitter and now I hate my life. How many of us measure our worthiness by the amount of un/followers we have on Twitter or friends on Facebook? How many of these people do we actually know?

Dunbar’s number, proposed by an anthropologist of the same name, postulated a limit to the number of people with whom one can maintain stable social relationships. These are relationships in which an individual knows who each person is. In reality the number is a series: 5 – 10 close friends, then 5-10 x 3 = people you might have to dinner, and so on, until you reach a maximum of 150 (for a wedding or party) of close people you know who are there to celebrate an event in your life. Dunbar’s number is tiny compared to the numbers seen on Facebook.

I’d rather be anywhere than here

Google Designer, Jake Knapp wiped social media and email off his iPhone because he felt that by constantly checking social media apps he wasn’t present in his present moment, which is so true. If we are constantly distracted by our apps, or eager to share or capture a moment, then we are not really present in that moment.

This got me thinking, if we are constantly looking at other people’s moments and memes on social media, then when we get to experience that moment for ourselves, aren’t we having a second hand experience? Will the landscape remind us of a photograph? Will an emotion remind us of a meme? Are we experiencing what we feel we should rather than what would make us feel good?

Get nuanced

Meditation teacher davidji, has said that those voices who are ranting on Facebook are usually the loudest voices (not normally the most accurate or uplifting, just influential) and they have an impact on us. We react to what other people are saying and doing online instead of following our own agenda. daviji believes that we need to get nuanced, and know what we are feeling, so we do not get hijacked by other peoples’ opinions. Otherwise we don’t stand a chance of not being influenced, and this is why we are endlessly fascinated by people who influence us. We want to know how they do it so we can wrestle back our power or try influence others so we can be heard.

I still believe that social media has the capacity to augment us, even though I have seen throughout this blog series the many ways it can diminish us, but that is because we are human, who haven’t yet realised that we all count and are all connected anyway. Social media just can’t do that for us. It is not a brave new world, it the same old world on a small screen. To find a brave new world we have to do that ourselves, and we have to start by looking inside ourselves, instead of inside our phones.