Web design (1): What’s the story?

cartoon desktop tablet phone

The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.
Tim Berners-Lee

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

Tim Berners-Lee used this description to describe the Web, 25 years ago, on the first website of his newly created World Wide Web. In 2014, the world’s Internet users surpassed 3 billion or 43.6 percent of world population, inadvertently, creating digital culture. But Berners-Lee’s words are as relevant today as they were back then. The Web was always intended to give universal access to a large universe of documents.

Alongside documents, we have the Internet of Things with devices passing information to each other to create ambient atmospheres. And, we have the Internet (of people) which compresses time and space so we can communicate instantly all over the world regardless of time zone: To shop, to make money, to make friends.

Until recently, we would only do this via a website, but whether we are reading, or chatting, or creating art, our main means of communicating is using words. And so, whatever else we think a website is, or can be, a website is words on a page which communicate a message, a story, or instructions.

For a long time designers were very conscious of words and used the idea of a newspaper as to how a website should be designed. We had above the fold, headlines, and images to break up the text making lots of websites look like newspapers. We controlled the layout and told each browser exactly how to display our website design.

This worked well because humans like to recognise things, and can transfer their knowledge of  one thing (newspaper works like this) to another (ah very similar to a newspaper, this website works like this) as well as being storytellers who, whilst feeling happy with certain plots or layouts, like to be surprised and amazed. Apple calls this design approach discoverability, which recognises that we are always looking for the next thing.

Humans are motivated by needs and are constantly looking to satisfy them. This is reflected online by us getting interactive with our words and making services available: to buy books worldwide, get food delivered locally, or check our bank accounts, before moving onto the next thing.

So, it may seem that websites today look and feel very different to Berners-Lee first website. But, they aren’t. No matter what you offer on a website to captivate your users and to make your design shine, the fundamental purpose of your website is to communicate the content – information or a service – which we do using words.

All websites look the same

Web designer, Dave Ellis says that most websites are starting to look the same, especially those ones done by web design companies advertising their web design capabilities.

All websites look the same - Web Designer, Dave Ellis
All websites look the same – Web Designer, Dave Ellis

UX designer@timcaynes went so far as to collect some of these same looking home pages together.

When laid out side by side they do look, interestingly enough, very similar.

They are following, according to 99designs, one of the top trends of 2015, which is: make it big, others trends include circles in your design and animated storytelling.

But, trends come and go. Web developer Jeremy Keith reminds us in one of his great blog posts how JavaScript was quickly adopted for three primary use cases:

  1. Swapping out images when the user moused over a link.
  2. Doing really bad client-side form validation.
  3. Spawning pop-up windows.

Gah!

But, it is not just the trend of make it big which designers blame for the homogeneous nature of web pages. Many believe it is because of the mobile first design approach.

Usability guru, Jakob Nielson, in his mobile design course advises the designer to:

  • cut features: eliminate things that are not core to the mobile use case;
  • cut content: to reduce word count and defer secondary information;
  • enlarge interface elements: to accommodate the “fat finger” problem.

But it’s not just space! Theoretically, mobile-first web design accommodates the most difficult context first. By removing convenient user assumptions: strong connection, ajax support. You have to get users to achieve their goals quickly and easily, which sounds great, in theory. But, the above list causes you to design very differently for a mobile than for a desktop and gives you different experiences.

This realisation has led to adaptive web design (AWD) and responsive web design (RWD). Both approaches design for different devices (e.g., desktop and mobile) whilst maintaining similar experiences.

RWD relies on flexible and fluid grids, and AWD relies on predefined screen sizes. RWD might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, whilst AWD has a streamlined, layered approach, which utilizes scripting to assist with adapting to various devices and screen sizes.

In practice though, this has led to AWD providing several websites on one URL: one mobile and one desktop, etc.

Cutting the mustard: Progress enhancement

Designer and web standards advocate, @Zeldman, says that there are 18,796 distinct Android devices on the market, and this will only continue to increase as technology gets cheaper and more widely available.

How do you design for this?

The BBC ‘s responsive team came up with cutting the mustard, which is about testing a browser for its capabilities before serving up all of the scripts which are going to create website behaviour and better experiences. This is similar to what Zeldman and The Web Standards Project proposed too back in the day.

However, do we need to have the same experience? Even if we all use identical websites we are having different experiences anyway because we are embodied and we see the world through our own particular lense of experience. If we add a different device to the mix, what does that mean? Nothing much, if users can easily do what they came to do.

An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”

Chris Heilmann

Seamless experience

Last year, facebook commissioned a study which found out that 40% of adults switch between devices, often web and mobile, to complete a single task. Nilay Patel, says that the mobile web needs to get much better in his article: The mobile web sucks and perhaps this is why.

But as Raj Aggarwal in Wired Magazine, says we need to understand what actions are best suited to which device and platform, i.e., desktop or mobile, and make it as easy as possible for users to perform those actions.

Mobile phones contain all sorts of extra functionality such as GPS location, camera, which is why many companies have gone for straight to app  design instead of mobile web. This approach encourages users to switch devices depending on what they are doing. E.g., people use their Uber mobile app to find a cab, but are likely leave feedback on the Web.

Designers need to create a seamless experience between their web app and the mobile app which remembers where users left off. Modern sites such as Gmail, Facebook, Twitter, Yelp and Mint.com all do this as well as updating themselves which makes users feel secure. For, Aaron Gustafson has proof that we don’t control our web pages, because big companies are serving up ads and putting extra html and css into webpages as they deliver them.

Gustafson says that there is no way of controlling this, but says that we need to make the content we serve as good as possible in order for users to still achieve their goals,when some resources are missing or markup is altered. This is much easier to do with an app.

Great guidelines exist for producing accessible mobile apps, particularly clutter free logical text which can be read out by a screen reader. One lovely example this site gives is the Met Office’s Weather App. When someone uses the Met Office’s app, they want to know what the weather is going to be like today. They don’t need to see the sunshine and showers. Words which contain a description of the weather is enough:

Today twenty January two thousand and twelve (heading, screen reader identifies the text as a heading)
Cloudy with light rain eight degrees centigrade
Wind westerly eleven
sunrise seven fifty five
sunset sixteen twenty eight

-Reading the Met Office Weather App, One Voice

Job done!

All a website needs to do is to give users the information for which they came.

If we compare this to Berners-Lee’s very first website, or get a screen reader to read Berners-Lee’s text for us, we may find that the experiences are very similar.

Content is key. If we design for content, we continue to give universal access to a large universe of documents and services and information, which, after all, is what the Web is all about.

[Part 2: Web design: Get the picture]

Augmenting humans with social media

Figure borrowed from http://www.cs.washington.edu
My first job back in the early 90’s was as a systems analyst. I was really excited about automating boring bits of peoples’ tasks so that they could get creative by accessing the extra brainpower of a computer in some wonderful human-computer collaboration.

Inspired by Doug Lenat’s AM (Automated Mathematician), where the computer was discovering mathematical proofs, I wanted to find a way to create some sort of integrated system with the computer discovering things and the human adding information to represent their feel for a given situation.

Of course, in the Accounts Department where I was ‘helping’ accountants, the reality was very different. Computers weren’t the powerful, easy to use machines they are today. So, by introducing technology to various user groups, I was actually telling people to do their jobs differently. I wasn’t making the world a better place, I was hampering everyone with computers. And elsewhere in the company I worked, computers were replacing people altogether. No wonder, computers were not popular. How times have changed.

For me, human-computer interaction was and still remains Gestaltian: The whole is greater than the sum of the parts, by this I mean, that the collaboration of a human and a computer should be more than a human typing numbers into a computer and then waiting for the solution.

When I looked up Gestalt Theory, I learnt that Kurt Koffka’s original phrase was The whole is other than the sum of the parts, which works just as well. And did, when I was captivated by AI research, in particular constraint theory.

I loved the idea that if you had a space of solutions, you could explore it computationally by changing variables which represented specific design objectives such as the limit of the cost of the project, and then create other and varying solutions.

But, how often do we need something other and varying? The majority of users I have worked with love their jobs and have specific end goals for which they use computers.

When I was working alongside engineers my job was to interpret the massive data sets generated by fibre optic sensors on the bridges they monitored. I created GUIs which employed the terminology and symbolic language engineers are trained to use. The GUIs sat onto top of well-known models to interpret data. And to reflect this specific nature of engineer-computer interaction, I actually called it a sub-set of human-computer interaction. The engineers were doing something newish – monitoring bridges- but they were using the way they were trained because of the laws and health and safety when looking after the infrastructure society depends upon.

The engineers would only use something they could trust.

And that got me thinking about the whole creativity computational collaboration. Do we really need super extra powerful computers to have a creative collaboration? Or do we just need something trustworthy?

When I began this blog post – a long time ago – I had a first sentence which said: How to improve the intellectual effectiveness of the individual human being.

Now, I can barely remember what I was going to say. But googling the phrase produces millions of articles and Doug Engelbart, who was a pioneer in computing. He invented the mouse and was very much into harnessing computational power to help humans and augment their capacities. This side steps the issue of trust, because ultimately the augmented human would decide whether the collaboration of computer and human produced the right solution. And humans normally trust themselves.

Steve Mann has been augmenting his capacity for over 20 years with wearables which overlay his world view with lots of information taken from the Internet. Stelarc augmented his reality by having an ear surgically attached to his arm so that he could hear random people’s conversations again via the Internet.

Their solutions don’t involve vast computational power and they are not really solving anything. They are looking differently at augmenting humans. But both use two things:

  1. Connectivity
  2. Other people

And this is what social media does, but in a quick and easy way. Via social media, it is so easy to access a) random conversation like Sterlac, or b) information about a new town you are in like Steve Mann.

But it is not just information we want, which was what clever computers and AI realised. We want intelligence and the expertise of someone else, who is constantly updating and refreshing their world view.

Social media gives us that in a way a clever computer cannot – yet!.

This morning alone, I tapped into three experts to help me do yoga, meditate and feel more at peace:

Those experiences augmented and enriched my life and left me more peaceful and happy. I could not have done without the help of those experts or social media unless I took time off and went off to find these experts.

So, it seems that social media is one amazing way of augmenting humans. And when I think of me back in the accounts department evangelising about how computers could transform our lives, I had no idea how right I was, just not at all in the way I imagined.

We live in amazing times.

Ambivalent web design

websketch

Lately, it seems that I have come full-circle and am designing websites for small organisations which is, in part, how I began thinking about HCI, nearly 20 years ago. So, with all that experience, I am astonished to find that I have been making the same mistakes I used to make way back when. This leads to what I call ambivalent web design.

Ambivalent web design is when you are excited about creating a cool website to showcase your clients’ products and services as well as your skills as a designer. However, because you are unfocused, you keep changing your mind and then because it’s not looking as good as it could, you promise to deliver more to get it up to resemble the beautiful thing you now have in your mind. This can lead to you feeling annoyed at yourself and then resentful because the whole project is taking longer than it should for less money than the effort you are putting in.

In order to avoid ambivalent web design it is important to remember the following:

Don’t let casual interactions influence your work

You may have picked up the contract incidentally. Perhaps, it began with a conversation on the school playground, or you got a vague email from someone, but that doesn’t mean that you should behave in a casual, vague manner. Be professional. Organise yourself a plan of action and set clear milestones.

If you are not ready, say so. Explain to your potential client that right now is not a good time, and begin at a later date. Give the client a list of everything you might need, and get them to pick out sites they like so that you both have a clear idea of what you are aiming for during the design process.

Be realistic about your clients’ input

In general, clients who want you to design a website are not interested in website design. They don’t care about WordPress, nor have they desire to tinker with colour schemes, graphics, html and css. That is your job. If they wanted to spend time tinkering then they would go to WordPress.org download the software and do it themselves.

Consequently, it is important to be realistic about what they will do to maintain the solution that you give them, once you have been through the design process together.
Some questions that you need to discuss with the client:

  • Who will maintain the site?
  • Will they be able to do the necessary updates?
  • Will they be able to add to the website?

Alternatively,

  • Will the website be static until the next time it gets an overhaul?

Know your limits

With a content management system or blogging tool, such as WordPress, all things are possible. And that is great. However, things take time, especially if you need to go away and learn new stuff in order to fulfill your clients’ desires.

It is ok to say that you don’t know how to do something, and that it will just take more time and money to find the right solution. Bear in mind though, this is a tricky route, and potentially one way to resentment and ambivalence. So, you have a choice:

      Don’t attempt to do the extras.

Or

      Deliver a first solution (Stage One). Do some research and then calculate how much time and money it will take to do the extras. Then go ahead (Stage Two).

Have a price structure

You may have promised mates-rates, but you still need to calculate exactly how long it will take you to deliver what you have promised. One way of doing this is to have a price/time structure which you can show to clients so that together you have a focused way of discussing the work to be done.

You can structure your pricing according to time e.g, £X per day, or by output, e.g., six pages= 6 x £Z. And so on: personalised graphics will be £X, and some stock photos discounted down to £Y. A bit of social media will cost this, a little seo will cost that. In this way, the client can see exactly what they are spending their money on.

Have fun

Creating websites is a great way to spend your days, but, if you find yourself gritting your teeth during every project and feeling ambivalent, then perhaps it’s time to dust off your guitar and get back to busking.

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]

Emerging Technologies: What’s the story?

pic borrowed from maltatimes.com

Deepak Chopra defines social media as the extension of our brains. He believes that we are all creating and contributing to the collective unconsciousness, or global brain, every time we Tweet, Facebook, and share online.

It is an exciting thought and a digital extension of the sentiment expressed by personal development author Jim Rohn when he said: You are the average of the five people you spend the most time with.

With social media, it is so easy to pick five inspirational voices with which to create new neural pathways in your own brain. With our portable devices, these people can be with you wherever you go, ready with a wise word anytime you want to think something different. And you can be the inspirational voice in someone else’s brain.

And yet! Sunday, was International Friendship day. Some twitter users marked the occasion by having a day of #twittersilence. The tag and silence was used as a protest against the online abuse certain high-profile women have been subjected to on twitter. Other users felt that by having 24 hours silence, the trolls would win, so they carried on tweeting using #shoutingback or #inspiringwomen tags.

Online abuse and web-based hate crime is the dark side of social media and indeed, of humanity. In the Guardian, Police Chief Andy Trotter called on social media companies to crack down on crimes committed on their platforms, saying they have the ingenuity to come up with solutions.

Trotter’s solution is a good one. Social media platforms could automatically police online hatred. It is common enough in the workplace to bounce back email when it contains unacceptable words. Couldn’t social media do the same and train users to be kinder to each other?

After all, uses who engage in this sort of behaviour are breaking the law. Do users need to be educated about the legalities of using social media? Attacks on individuals such as politicians and celebrities have long been common, even applauded in traditional broadcast media, so the line between ‘righteous’ commentary and plain old abuse has been blurry for a while.

In June, the Daily Mail published an article claiming that Hilaria Baldwin was tweeting during James Gandolfini’s funeral. The Guardian has a full outline of the events here.

The first question when looking at this ‘news’ item has to be: What’s the story? Is it news to report someone’s tweets with an intent to criticise? Wasn’t there enough news that day already? The funeral of a great actor, the continuing crisis in Syria, the violence in Egypt.

With everyone now having the tools to delivers ‘news’ and provide commentary, a lot of it doesn’t go through the standard filters of veracity, ethics, and media law that used to happen when newspapers and trained journalists did all the publishing. Even before the change in the broadcast landscape there was a thirst for celebrity news, which was gradually changing from admiration to criticism.

Is this a good use of our global brain? Chopra believes that we should form a community of humanity so that we can use social media as a tool to spread love, wisdom, and positive transformation rather than hatred and abuse. It is easy to criticise but hard to provide solutions.

We are all capable of wielding great power for good and for bad with the social media tools we have at hand. As Peter Parker‘s Uncle Ben said, mangling up a bit of Voltaire as Peter Parker got used to his spidey-powers:

With great power comes great responsibility.

We must teach ourselves to take responsibility for our actions and our words and think carefully about the effect they have on other people. If we created an environment where everyone felt valued and heard, perhaps the need to attack others online or in print would diminish. And in that space who knows what we could achieve?