Designing for hyper-connectivity

James Box WDC 2008 Bristol | November 2008

Good morning Bristol.

I do like being back on university time.

Starting at 11 is a much more civil time than 9.

Nice to see you all.

One lonely connection…

This is the story of one lonely, solitary connection.

Perhaps my first glimpse of a hyperlink.

Beak St, Soho / Way back...1999 maybe.

Got talking to a guy named Dave (everyone’s called Dave in my presentations).

Explained that the number on that t-shirt was unique to him and that if I entered it in to a specific website, it would tell me all about him.

Dave was kinda confident. And I think it was really a chat up line for him. I never saw Dave again, but I’m pretty sure he’s still single.

Nonetheless the concept captivated me.

Wearing a number. An unique identifier. In prison, prisoners are known by their number as opposed to their name. This is a form of punishment. A loss of identity.

This was complete opposite. This was something Dave elected to do.

In many ways it was nothing more than a fragile, lonely piece of metadata, but used in connection with the website, it revealed some of his identity.

I think this is my first memory of the web augmenting someone’s identity.

Incidentally, does anyone know where these numbers are from?

Recurring theme in the TV series Lost and has absolutely nothing to do with this presentation.

Although, this guy does remind me of Dave.

4 8 15 16 23 52

At the time, I was a web novice. But in hindsight, I look back and see these numbers as my first glimpse of a web connection.

Something similar to a URL or perhaps even hypertext.

Hypertext is really taken for granted now, but it still is the defining feature of the web.

Without it, the web would not exist.

So in this case, the numbers themselves mean nothing…

<a href=”http://jeckecko.net” rel=”me”>

4 8 15 16 23 52</a>

…but marked-up with a hyperlink they become meaningful.

To both a machine and to geeks. I use the term interchangeably ;-)

They define a connection. In this case, the link to my personal website.

This talk is about designing for these connections & connectivity and the ways in which this has changed during the web’s comparatively short life-span.

But before we do that...some context.

Me / Information Architect / IxD / Social spaces / Especially those mediated by technology

A lot of the ‘design’ I’ll be talking about today will be addressed from an IA perspective as opposed to the world of pretty visual design.

I’m hoping that some of this stuff will also dovetail nicely with Chris’ talk later on.

Clearleft, Brighton / UX consultancy / Silverback / dConstruct / UXLondon

I should also add that I am myself an ex-UWE student so go easy with me.

I was trying to work this out but I think I was living in Bristol around ‘93-’97.

I’m pleased to say by the end of those four years, I was extremely good at Mario Kart.

I should also add that this talk is partially influenced by Jonathan Harris/FOTB.

Out of interest, did anyone see or hear about this talk?

Creator of some incredible web work like wefeelfine.org (highly recommend)

Let’s just say the talk caused a bit of a stir.

This slide is from that talk. Harris posited that he is yet to see any great masterpieces within web design.

I think ‘masterpiece’ is the wrong term to describe design and is actually more appropriate to works of art, but it remains a very provocative statement.

Irrespective of the rights and wrongs of Harris’ statement, IMO, we have reached a critical point in terms of how we approach designing experiences with the web.

Many people associate the term web2.0 with this kind of shift, but I prefer to think that the web is only just beginning to realise its potential. We can’t have a web2.0 if we haven’t had a web1.0!

Hyper-connectivity is a critical component of that shift.

“My salad days, When I was green in judgement,

cold in blood...”

ANTONY & CLEOPATRA

The other question to ask here is, can ‘masterpieces’ really exist within a medium so young?

Before we go there, can anyone tell me how old the web is?

It’s very easy to forget this but the web is actually only 5000 days old (roughly).

That makes it not even old enough to go to university.

Or A-levels, or GCSEs.

It is an actual fact, a hormone-riddled, pubescent teenager struggling to come to terms with its own identity.

In light of its relatively short life-span, I think it’s fair to say we have seen a remarkable level of progression.

The web: like TV only BETTER!

Not bad for something that people envisaged would be like ‘TV but even better’.

I always think visions of the future are interesting.

Even if it is just for us to go back and laugh.

This is from an IBM slide presentation in 1975 entitled:“It's 1975 And This Man Is About To Show You The Future”

As you can see this vision made perfect sense.

There will be information.

And programs (huh?)

I love this. I think this is the point in the presentation where people were supposed to be thinking:

“On my god, this is amazing....b-b-b-b-but how?”

and the answer…

Well of course, you need a data base [sic].

Clearly the medium was so young that the words data and base hadn’t even merged yet.

When a new medium borrows from an existing one, some of what it borrows

makes sense, but much of the borrowing is thoughtless, ‘ritual’, and often

constrains the new medium…

“

Still 5000 days is a relatively short life-span.

And inevitably, as is the case with any new medium, we have relics from the mediums that preceded it: Print design, TV etc.

Way back In 2000, A List Apart published an article by John Allsopp called ‘A Dao of Web Design’.

In the article, John decreed that it was time the web found its own identity.

That it should stop relying on the unnecessary conventions of previous mediums.

[quote…continues…]

…Over time, the new medium develops its own conventions,

throwing off existing conventions that don’t make sense. ”

[finish quote]

Clearly we have a lot more than ‘slightly better TV’, but I think it’s fair to say that much of today’s web still relies on the paradigms and models of those that preceded it.

I apologise for using the word paradigm btw.

It makes me sound like I know what I’m talking about ;-)

But certainly one of those conventions, a feature of print design, is the concept of the page…

Limited connections: the web of pages

And so we have ‘the web of pages’.

I think in many ways this is still really how the mass market views the web.

You have a web site which contains lots of ‘pages’ of content.

In effect, lots of silos of information that operate independently of one another.

A site whose structure and therefore the way it is experienced is designed by us web designers.

And for the majority of my career as a web designer/UX practitioner, I think we have been designing for this model.

In my role as an Information Architect, designing the user experience for a set of limited connections is often a case of simple sign-posting.

Creating an optimum path through our pages to information the user requires.

Providing the user with cues to move from point A to point B.

Often these take the form of ‘navigation’ or perhaps a crumb trail. You know the kind of stuff I’m talking about.

For an IA, these paths often manifest themselves in the form of a site map – a blueprint of the site’s structure.

Interesting that we use the term map–something that we normally associate with a physical location–to help us understand this model.

Similarly, sign-posting is another one of the spatial metaphors we have used to help us understand the web.

Even the term web ‘site’ itself, is a reference to a physical location.

In the same way we borrow from previous mediums, it helps for us to understand new experiences by relating them to our everyday experience. Basically through the use of metaphors.

Sometimes sign-posting or designing the optimum path is really, really easy.

What’s plainly obvious is that Jonathan Harris had not seen this site when he claimed there were no masterpieces within web design!

It is of course, the US Dept of Agriculture's, Farm Service Agency, website for Hay.

And clearly these guys really know their users!

There are those that ‘need hay’ and those that ‘have hay’.

Simple.

If only it were this easy all the time.

In the same vein (no pun intended), some of you may also be familiar with Cynthia Caster’s work.

Cynthia, as you might guess, makes plaster-casts of rock stars and other famous people’s genitalia.

And just like Hay.net, Cynthia Caster knows her audience

In this case they fit into two pretty self-explanatory groups.

Those that ‘want plaster-casts of dicks’ and those that ‘want plaster-casts of tits’.

The labels are so so good, she doesn’t even need icons.

Although if she ever needed any...

Incidentally, Jimi Hendrix was one of her subjects and I can tell you all the rumours are true.

Typically it’s a little harder than this and a UX designer will spend some time upfront conducting research to find out what the users need.

Often this research manifests itself in the form of design tools such as personas – archetypal or typical users – that help us to empathise with the range of users we are designing for.

So in the case above, we firstly have some information about Adam Fletcher – demographics and personal background, followed by his technical expertise, income etc. This stuff is really there to help us derive the important stuff on the right: The scenarios...how Adam will use the site. What problems he needs to solve and a feature to address this.

In short we extract attitudes, behaviour, needs, goals and motivations and design for them.

Clearly the goal here is to ensure we get as close to possible to a user-centered design and hopefully an optimal path through a set of limited connections.

Reductionism

Obviously I’m brushing over the techniques here, but what I hope I’m illustrating is is essentially how much of UX design employs a scientific approach to the design of a user experience.

By breaking the problem down into its constituent parts.

This is the notion of ‘reductionism’ which was the driving force behind much of the twentieth century’s scientific research.

It tell us that to comprehend nature, we first must decipher its components.

The assumption here is that once we understand the parts, it will be easy to grasp the whole.

And this model has worked. With a limited number of pages, we have a limited number of connections and so a limited number of variables to design for.

Our job as designers of the experience is to organise these connections into meaningful interactions for our users.

Hyper-connectivity: the web of data

The web we’re seeing to today is not characterised by limited connections.

Or pages.

Data that has typically been entwined within a web page, is now available as a resource its own right.

Formats like RSS separate the data from the HTML page that contains it–if there is indeed one at all. We see can consume content how we choose. Maybe on a web page. Maybe within an RSS reader. Maybe via an internet enabled bunny like a Nabaztag.

And data is an entirely different beast to a page.

It’s open. It’s hackable. It’s re-combinable. In terms of connectivity, we have a far more powerful option.

As a result the number of connections we now have to design for has grown exponentially.

Let’s try and clarify this:

Firstly, I think we need to acknowledge that this technology has helped to create a genuine cultural shift here in terms of ownership. In terms of who owns what.

The bottom-up mash-up culture is now mainstream (I hate that word)

Artists like Radiohead are challenging our existing models of ownership with their pricing model and remix competitions.

When I buy music I no longer expect a tangible object that I can pore and gloat over (although it's nice).

No. We’ve cut ourselves a different deal now. The value is now instant access, instant use, remix-ability. The option to move the file from device to device.

This challenges our traditional model of where value lies...not in tangible objects such as bricks and mortar...it's actually in the bits–the ones and noughts themselves. The music industry is starting to deal with this problem, It’ll be interesting to see if Hollywood can.

The important thing here is the mass-cultural shift is now aligning with the technological potential.

So the old notion of content locked into pages. Locked into silos has changed.

And this is happening with popular culture, not just progressive technology.

Today’s web is characterised by openness.

Just recently The Guardian upgraded their RSS so rather than one or two static feeds, users can now retrieve feeds via a whole range of different parameters like section, subject, type, author.

http://www.guardian.co.uk/profile/charliebrooker/rss+sport/cricket/rss

If I wanted to tailor my feed solely to Charlie Brooker’s articles and Cricket news, I can do that.

And with so many parameters, the number of permutations, the number of connections is enormous.

Again, we’re seeing a cultural shift aswell as a technology.

The site owners are knowingly relinquishing control of how their readers experience their content.

Users are designing their own path through the data.

hackable, recombinable

This level of openness is not just about consumption though, it’s about recombination.

This Google map shows population statistics for some of the UK’s biggest cities.

Nothing remarkable about that.

What is remarkable is how it was produced.

Basically one giant hack.

Firstly, the raw data stats are ‘imported’ into Google spreadsheets (using =importHTML formula).

This is then published as a comma separated list (CSV).

This is then ingested in to a service called Yahoo Pipes. A service which allows us to mash-up RSS feeds in all sorts of useful ways.

Using Pipes, they were able to add location data and create a geocoded KML feed. Then they simply import this in to Google Maps.

Wow!

But you know things have gone mainstream when people are mashing up in spreadsheets. Even my Mum uses spreadsheets!

Think of the number of connections. All enabled through open data services and APIs.

http://ouseful.wordpress.com/2008/10/14/data-scraping-wikipedia-with-google-spreadsheets/

Dopplr

The founders of the frequent traveller service Dopplr (This is not them btw!) spoke at dConstruct about their desire to make a website that nobody has to visit.

Some marketeers find that concept startling. They are from the mindset that sees value in ‘eyeballs’, visits, views and clicks.

But the Dopplr guys are much smarter than that. They understand the value of their service comes from the connections, irrespective of where they are consumed.

Their aggregate value lies within all the ways that their data can be experienced...many connections is good…whether that be to a Facebook widget or recombined with any of the other open services out there.

Again this challenges our existing models of where value lies.

Fireeagle is a simple service for managing your location data.

When it was first released after weeks of anticipation, people badly missed the point, thinking it was essentially a service for displaying your location on a map.

But just like Dopplr, the value with Fireeagle lies not on the site, not in the pages, but in the data, in the connections, and how these are recombined with other services.

Thus FE focuses heavily on making itself as open a service as possible, designed to work seamlessly with other applications.

As you can see from this screengrab from my account Dopplr is one of those services.

All these services are characterised by their openness. Their willingness to connect over multiple channels.

[If time allows mention AMEE]

A web of data sources, services for exploring and manipulating data, and

ways that users can connect them together

“

”

As far as I know, Tom Coates of Fireeagle coined the term ‘the web of data’, describing it as (quote) in his 2006 talk Native to a Web of Data.

He described the potential for the ‘network effects’ that would occur when “every new service can build on top of every other existing service

How every service and piece of data that’s added to the web makes every other service potentially more powerful.”

Tom was so right.

Data has spilled out of its old page model and into an enriched, hyper-connected world of services, APIs and spimes.

Designing for a hyper-connected world

So how does this change things?

How do we design for a web of hyper-connections?

How do we start to take advantage of the network effects?

http://www.flickr.com/photos/hd41117/2576799956/

Ego-less Genius

Do people recognise these guys?

CA vs SJ

Ego-less vs Genius design

Steve probably is a genius. But to some extent he has to be. Industrial design such as the ipod means that making a little tweak to the pause button is not that easy. He needs to get it right. So even if he isn’t a genius he needs people to think he is! Apple do a very good job of creating this image.

It would be arrogant for us to assume that we can design this way. In truth, Apple makes plenty of mistakes (Newton). They just do a very good job of making sure we don’t still hear about them until now!)

In a hackable world, your design problems will emerge anyway.

Parking machines? Guerilla usability design.

This parking machine was not designed by Steve Jobs.

Ego-less Genius

IMO, CA was a genius to. But his expertise lay in the fact that he acknowledged that with so many variables–or in our case so many connections–it is highly unlikely we can ‘envision’ a perfect solution.

This is design via ego and is in many ways incredibly arrogant.

He understood that design and in his case buildings, must be adaptable in order to succeed over time. Buildings need to respond to the needs of the inhabitants. In short, they need to evolve.

And this approach is highly applicable to the web. The facility is there for us to work in an agile, responsive manner, making rapid changes and tweaks. Working responsively to the emerging demands of our users.

This is a lovely position to be in.

http://www.flickr.com/photos/yersinia/230046745/http://www.flickr.com/photos/philgyford/20553280/

Desire paths

I love these pictures of desire paths.

We see the planned routes and how paths are now intersected by short-cuts.

In Nick Crane’s book 'Two degrees west', Desire Paths are defined as the imprints of 'foot anarchists', individuals who had trodden their own routes into the landscape, regardless of the intentions of best-laid plans.

Embracing ‘mistakes’

I like this one but it begs the question why would anyone would want to take a shortcut to Lidl?

I can only assume that it must be people trying to get out.

What we’re seeing here are representations of emergent behaviour.

Just like the hacked parking machine.

This is often a characteristic of a ‘complex network’ with many connections.

And while some people may see this as failure, in a complex network this is actually something we encourage. The emergent behaviour is a clear sign of where value is being derived from the experience. It can lead our design.

Flickr story. GNE.

Riding reductionism, we run into the hard wall of complexity. We have learned that nature is not a well-

designed puzzle with only one way to put it together…Yet nature assembles its pieces with grace and precision…It does

so by exploiting the all-encompassing laws of self-organisation, whose roots

are largely a mystery to us.

“

”

Albert Laslzo Barabasi is a recognised expert in the field of complex network theory. This is from his splendid work Linked. I highly recommend.

It is written in response to our natural urge towards reductionism.

Barabsi is talking about the laws of nature, but as he later observes, these pattern apply to any complex network.

The crucial word (or words?) here are self-organisation

As designers all we can do is create the spaces and objects (the interface) within which people interact, but–the interactions themselves, the dialogue, the behaviour–emerge from the inhabitants (the users) themselves.

Organised complexity

What Barabasi is talking about here is a particular kind of complexity.

When apparently random, chaotic or infinitely complex fragments organise themselves into elegant patterns.

These patterns occur regularly within nature, such as the florets in this sunflower. Or within ant colonies. Or even in cities.

It would be futile for us to try and pretend that we can design or even orchestrate this kind of network effect. The everyday social drama of a city for example is infinitely nuanced and unrepeatable. Here we have to resist the natural human urge to reduce this complexity into something understandable and formulaic.

Instead we wait for the patterns to emerge, the desire lines, the hacks. We than have a model to influence, encourage and nurture.

To open our data to the potential for network effects, we need to embrace the potential for recombination.

Forget traditional models of ownership. The page way.

Open our data to the potential of hyper-connections using machine-friendly formats like well-structured HTML, RSS, microformats, JSON and APIs.

Seek out ways of adding value to our own experiences through recombination with the existing services. Fireagle is a great starting point to making your experiences more contextual.

Look out for ways you can return your data back for others to build upon. Add value to the aggregate whole.

What out for ego-driven design and instead embrace hack-ability, allow users to create their own desire paths within your services. Don’t defy time. Be open to adaptation.

Looking back in to history we see the most successful design–those that are perhaps considered masterpieces–are those that endure. Those that adapt with time.

This is a photo of Piazza del Campo, Sienna, Italy which contains the Palazzo Publico.

The Palazzo Publico is championed in architecture schools as a model of successful architectural design.

This building owes much to time.

Owes much to its potential for adaptation.

The Ground floor was created in 1284

The First Floor added in 1310

The Spire in 1325

And the Clock in 1355

Not until 1680 did the building receive its defining crenelated tower

…and then sometime in the c18th the Belfry

“Age plus adaptability is what makes a building

come to be loved. The building learns from its

occupants and they learn from it.”

STEWART BRAND, HOW BUILDINGS LEARN

Leave you with this quote from one of my favourite books:

How Buildings Learn by Stewart Brand.

I couldn’t say it any better than this.

This presentation is licensed under a Creative Commons Attribution-Noncommercial-Share Alike license.

Photo credits:

http://www.flickr.com/photos/thelunch_box/2798522576/

http://www.flickr.com/photos/sarowen/2061784789/

http://www.flickr.com/photos/alexliam/951320552/

http://www.flickr.com/photos/minato/75160146/

http://www.flickr.com/photos/seraphimc/160305329/

http://www.flickr.com/photos/cornellfungi/2118908448/

http://www.flickr.com/photos/rdolishny/2760207306/

http://www.flickr.com/photos/esdrascalderan/358517026/

http://flickr.com/photos/flissphil/6416813/

http://flickr.com/photos/bramhall/2528499012/

http://www.flickr.com/photos/burnto/2885703536/

Thanks to these people for their photos.

Thanks!

I’d love to talk more so please come up and chat–I’ll be here all day.

And thank you all for listening.