Let’s talk! #broadcastsfrommybooth

I have been struggling to blog for a while now which was making me miserable as I like nothing better than to get a large cup of tea, swizzle round on my chair and tippety-tappety-talk into my computer.

So to wrestle back some sort of control over my writing, I began to talk tech over on YouTube and now I have embedded it here on a specially created Broadcast page. Ta daaa! The result is that I am feeling much happier.

The first time my girls caught me watching myself on TV and transcribing what I said, they thought it was really amazing and wanted their own channels but after a minute or so they started doing impressions of me falling asleep saying: I am very excited about technology. And, they have a point. I do sound a bit monotonous in What am I doing? but that is better than the video Our human experience on social media I seriously look like I am about to cry. It seems that I am not a natural in front of the camera.

My original idea was #broadcastsfrommybooth as I film myself in an old fireplace in my bedroom – my one fabulous go at interior design, even the carpet fitter thought I was mad – but it is a bit long to say in each video, and every word counts.

I use a Google Pixel phone. The camera is fabulous but doesn’t sound brilliant since the Pixel doesn’t allow you to use a plugin microphone, and if you change to a different camera app, the sound doesn’t really improve enough to make it worth the diminished video quality. Apparently, Pixel 3 will fix this problem but they said that about Pixel 2 and when I tested one, it didn’t seem to use the external mic. So, I will just use what I have.

I tried filming on my laptop with one of those headphone mics plugged in lying across the keyboard. It had great sound, but a terrible picture, I look like Voldemort (take a look – 1st Broadcast from the booth) so I turned off the softbox to get my nose back but then I looked like a guest on Most Haunted (check out Privacy and technology) although thankfully you can’t see up my nostrils. What is it with filming and noses? Softboxes are fabulous but it has taken ages to position them just right.

YouTube Creator Studio has lots of editing tools so you can trim your uploaded video, add notations and helpful graphics which I will do once I get my story straight. Currently, I don’t script my videos which I should do – it is a YouTube rule – but it’s a bit tricky talking about my own ideas in a couple of minutes. I just need to practice.

I manage to wear a lot of black even though that is a big no-no and try to follow the other YouTube rules like put face powder on to so as to not be shiny and distracting. I also stare right into the tiny lens and bring my energy to no one in particular which is easier said than done, believe you me.

Speaking into a tiny lens for a maximum of five minutes is very different from lecturing to computer scientists in a purpose built room for at least an hour where I get moment-by-moment feedback. However, I am enjoying the challenge. I gurn a lot and sometimes my hair looks a bit crazy though I bought a hairbrush this morning. This afternoon, I was drinking tea in between takes so my lipstick is all over the place. Yes that’s right, I look like I don’t know how to put on lipstick.

What can I say? YouTubing is much harder than it looks and I am in awe of those who make it look so great but now I have my first real subscriber over on YouTube who is not a member of my family and thinks I have useful things to say, I am inspired to talk more to my audience.

Today, I talked a lot about The Social Animal on Social Media and tomorrow I will tackle Web Design. I can’t wait!

Is this progress? Humans, computers and stories

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

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

It makes me wonder: Is this progress?

Humans and stories

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

Human and computer united together

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

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

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

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

Human and computer and human and computer united

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

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

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

Everyone online

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

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

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

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

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

Human -computer -human

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

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

The fear of being left behind

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

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

Web design (5): Structure

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

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

Many designers have adopted a grid structure to design web pages because a) it lends itself well to responsive design and b) it allows a design which is easy for users to understand. Designers literally have about five seconds before a user will click away to find a different service/page/content provider if the page is laid out in a way which is difficult to understand.

In a great talk for An Event Apart, Designer and Developer Advocate at Mozilla, Jen Simmons looks offline at magazines for inspiration and remembers how there was much experimentation and creativity online until everyone adopted grids and fell into a rut of grids.

But, it is easy to understand why everyone adopted grids, because users create their own understanding of a webpage from its structure. Text is complete within itself and meaning comes from its structure and language rather than the ideas it contains. This is a fundamental principle of semiotics, the study of meaning.

Managing expectations

When a webpage is judged to be useless, it is often because it does not behave in the way the user is expecting, particularly if it is not very attractive.

Designers either need to manage a user’s expectations by giving them what they are expecting in terms of the service they are looking for, or they need to make it super attractive.  Attractive things don’t necessarily work better but we humans perceive them as doing so  because they light up the brain’s reward centre and make us feel better when we are around them. We are attracted to attractive things which is given by certain Gestalt principles such as unity, symmetry, and the golden ratio.

Gestalt: similarity, promixity

Good design is one thing, but we also have specific expectations about  any given webpage. We scan for headings and white space and interpret a page in those terms.  This is because according to Gestalt theory we will interpret items according to their proximity: items which are close together, we will group together; or similarity, items which are similar we interpret as together.

And also, because we have been to others sites and we transfer our experiences from one site to another and anticipate where certain functions should be.

Where am I? Where have I been? Where am I going?

Main menus are usually at the top of the page, grouped together and are used for navigation through the site.  Secondary navigation may take place in drop down menus, or in  left or right hand columns. Specific house keeping information can be found in the footer, or the common links bar if there is one.

If users are completely lost they will use the breadcrumbs, which Google now uses instead of the URL of sites as part of the results their search engine serves up. Therefore, it is in a designer’s interest to put breadcrumbs on the top of page.

Users will stay longer and feel better if they can answer the three questions of navigation as articulated by usability consultant Steve Krug:

  1. Where am I?
  2. Where have I been?
  3. Where am I going?

Often this answered by changing links to visited, not visited and enforcing the consistency of the design by adopting a sensible approach to colour. There is a theory of colour in terms of adding and subtracting colour to create colour either digitally, or on a palette, but there is alas, no theory about how to use colour to influence branding and marketing, as personal preferences are impossible to standardise.

HTML 5 & CSS 3

As discussed earlier in part 1 of this series, we separate out our content from our presentation which is styled using CSS 3. Then, once we know what we want to say we use HTML 5 to structure our text to give it meaning to the reader. This may be a screen reader or it may be a human being.

HTML 5 breaks a page into its header and body, and then the body is broken down further into specific instructions. Headings from <h1> to <h6>, paragraphs, lists, sections and paragraphs, etc., so that we can structure a nice layout.  There are thousands of tutorials online which teach HTML 5.

The nice thing about sections is that we can use them to source linked data from elsewhere and fill our pages that way, but still keep a consistent appearance.

Theoretically one page is great, or a couple of pages fine, but once we get into hundreds of pages, we need to think about how we present everything consistently and evenly across a site and still provide users the information for which they came.

Information architecture

Information architecture (IA) is the way to organise the structure of a whole website. It asks: How you categorise and structure information? How do you label it so that users can navigate or search through it in order to find what they need?

The first step is to perform some knowledge elicitation of the  business or context and what everyone (owners, customers) known as stakeholders expect from the proposed system. This may include reading all the official documentation a business has (yawn!).

If there is a lot of existing information the best way to organise it is to perform a card sort. A card sort is when a consultant calls in some users, gives them a stack of index cards with content subjects written on them, along with a list of headings from the client’s site—“Business and News,” “Lifestyle,” “Society and Culture”— then users decide where to put “How to floss your teeth”.

This can take a few days each time and a few goes, until a pattern is found, us humans love to impose order on chaos, we love to find a pattern to shape and understand our world.

Once we have a structure from the card sort, it becomes easier to start designing the structure across the site and we begin with the site map.

The site map reflects the hierarchy of a system (even though Tim Berners-Lee was quite emphatic that the web should not have a hierarchical structure).

Then, once a site map is in place, each page layout can be addressed and the way users will navigate. Thus, we get main menus (global navigation), local navigation, content types to put in sections and paragraphs, etc., along with the functional elements needs to interact with users.

Other tools created at this time to facilitate the structure are wireframes, or annotated page layouts, because if is is a big site lots of people may be working on it and clear tools for communication are needed so that the site structure remains consistent.

Mock up screen shots and paper prototypes may be created and sometimes in the case of talented visual designers, storyboards are created. Storyboards are sketches showing how a user could interact with a system, sometimes they take a task-base approach, so that users could complete a common task.

Depending on the size of a project, information architects will work with content strategists who will have asked all the questions in the last section (part 4) on content and/or usability consultants who will have spoken to lots of users (part 3) to get an understanding of their experiences, above and beyond their understanding of the labelling of information in order to answer questions such as:

  • Does the website have great usability which is measured by being: effective and efficient; easy to learn and remember; useful and safe?
  • How do we guide users to our key themes, messages, and recommended topics?
  • Is the content working hard enough for our users?

Sometimes, it may just be one person who does all of these roles and is responsible for answering all of these questions.

It takes time to create great structure, often it takes several iterations of these these steps, until it is time to go on to the next stage (part 6) to start sharing this beautiful content on social media.

[Part 6]

Designing design: Function, behaviour, structure

astrolabe pic

[Part 2 of 12: 1) The science of the artificial 2) function, behaviour structure 3) form follows function, 4) no function in structure, 5) the medium is the message 6) types and schemas 7) aesthetics: attractive things work better 8) managing (great) expectations 9) colour 10) styles and standards 11) design solution spaces 12) conclusions]

The design process exists because the world does not always accommodate us humans, so we employ designers to create things or artefacts, to get the world to adapt to us. In this way, we can see that design is the science of the artificial.

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

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

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

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

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

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

Web design (2): Get the picture

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]