WD14, The Big Stonking Post™

Contents

Yes a jump nav is old school, but this is a BIG stonking post...

Disclaimer & photo credits

These notes were hammered out very quickly because doing so seems to help me remember the talks. However due to the haste, errors occur and you should always assume I'm paraphrasing - if you need an exact quote, please check the session recording later.

Photo credits:

Trends

  • Keywords: empathy and intertwingled.
  • Recurrent slide theme: retro futurism; and cats on robot vacuum cleaners.
  • Prevalent tech toy: wearable fitness trackers (fuelbands, fitbits, etc). Not that they were ostentatiously displayed or talked about, it just seems lots of people had them; and nothing else was especially notable. Of course I'm not including the Tesla as a 'tech toy', although it would win hands down for the most coveted item...
  • Most-asked question at the after party: "so what are you going to spend your 100 hours on?"

Web Directions 2014

Sideshows

Along with the conference proper, the sideshows were great. I made it to the coffee crawl and the SydCSS 1st Birthday event - no surprise on either count there ;) I was particularly chuffed with SydCSS (and not just because ansarada sponsored the food).

I had quite an amazing moment, realising there were people in the room from every job I've had in 14 years - colleagues, bosses and members of my own team... and as Steve pointed out later, this was a good thing! We have an amazing community, we're very lucky.

There are some photos from the night over at meetup.com.

The Venue

Web Directions 2014

Web Directions moved to the Seymour Centre this year. The smaller venue gave the event a vibe more akin to the early years at UTS than the gigantic convention centre. There was a sense of a reboot, which so often comes from a change of scenery.

[Edit: despite what we all thought, the crowd was not smaller! John informs me it was in fact the biggest by 10%.]

The coffee hit a new high, with Sample providing espresso, hot filter and cold brew... and unlike the convention centre, there was no problem taking it into the theatre. Oh yes :)

Opening Credits

This year's opening credits were really slick and atmospheric, which I loved. I think it was a pity to break the mood with the fake error joke, but still an excellent job. You can see it here: People Behind the Pixels.

Opening Keynote: Matt Webb – Interconnected

Shots from paleo future. Amazing to see what people thought the future would be like... how close they were on some things, how far off on others.

Kubrick did get the video chat experience right in 2001 – the dad's sitting down being serious on a phone call... but the kid's flopping about, doesn't care that she's chatting with daddy who is in space. This is entirely the Skype experience.

2001, like music, succeeds in short-circuiting the rigid surface cultural blocks that shackle our consciousness to narrowly limited areas of experience and is able to cut directly through to areas of emotional comprehension. - Kubrick

The death of HAL is actually very sad, you actually feel that someone is dying.

Matt also loved the movie War Games... although his childhood self probably had a huge crush on Ally Sheedy...

INTERCONNECTED

Myths have long memories. The land has a memory of history, humans have a memory of history. Matt feels Australian history has imbued us, culturally, with an egalitarianism; an unwillingness to allow people to inherit privilege.

Theory of bottleneck events – there is some genetic evidence that human population massively dropped 50,000 years ago (possibly caused by a massive volcanic eruption) and recovered again.

Origins matter. What was there when the world was writ small will be there when it is writ large.

Curious case of the myths of the Dogon people in Africa – their myths about Sirius included the accurate information that Sirius is actually two stars. Were they really visited by aliens? Or did some astronomers visit them...

There is a myth that stellar dust is sentient and it drags matter together to be reborn as stars. It's a nice thought...

The japanese have the notion of 'artefact spirits', Tsukumogami. When an object reaches 100 years old it becomes sentient, has emotional reactions to its life. However the idea is not applied to modern items... do new things not have souls?

> The network is the new electricity

> Connecting products is the 21st century equivalent of electricification

Edison had to launch a power station as well as a lightbulb... and then get cables laid. The first station in NYC powered a whopping 400 bulbs. He also had to create the electricity meter so he could bill people. It was all very startup.

Station Jim at Slough railway station – a much beloved dog that rode the trains and had a charity collection satchell. So when he died they taxidermied Station Jim and stuck him on Platform 5. “Yes... this is weird.” So Matt tweeted about it... AND GOT A REPLY ON TWITTER from @stationjim … with some cheeky attitude!

Where we start matters.

Electricity led to electric motors. This didn't immediately replace factories but it created small appliances... fractional horsepower motors were successful because they were less powerful, but small.

[At some point Matt brought the house down by showing this...

...and then after talking over it for a minute, observing "none of you have heard a word I've said, have you?"

Too true!]

Around the time Doug Englebart delivered the Mother Of All Demos, a book “Computer Lib” was released – with the tagline “You can and must understand computers NOW”. Features lines like “Everything is deeply intertwingled”.

Book: “A commentary on the unix operating system” - John Lions, UNSW. A seminal text distributed illegally for years.

If we look to Tsukumogami, perhaps all the new devices were waiting for electricity to become 100 years old! (“...ok, serious face... I don't really believe the devices are coming to life”)

Familiar concepts cause us to think along predictable lines – Xerox made an operating system that modeled the ideas of moving bits of paper around.

Metaphors shape how we think and they allow us to imagine the future.

The dominant trope of product design in 2014 is Apple.

Jony Ive quote “Why do we assume that simple is good? Because with physical products, we feel we can dominate them. As you bring order to complexity, you find a way to make the product defer to you.”

But you can't be a maestro of an iphone, the way you can be a maestro of the violin. Has product design topped out?

We humanise technology – Little Printer was a prime example, using the face to indicate the state of the network and the device.

Most cultures classify entities into four broad categories:

  • humans
  • animals
  • plants
  • nonliving objects

Web Directions 2014

[slide: Homeostatic Ultrastability Loop... designed by Welsh cyberneticist Stafford Beer to model companies. He tried to model this with a pond...!]

Everything starts somewhere. [slide: top of JFK's head backed by the sky...] JFK set down the dream of going to the moon. It took ~ 100 million man-hours of effort after that. Yet only about 12 people walked on the moon for a total of 160 hours.

So what's the equivalent of the moon landing for our generation?

Wikipedia took about the same amount of hours, the same amount of human effort.

So which do we prefer to have? 12 people on the moon, or wikipedia available to all humanity?

So what would happen if you put aside 100 hours over summer (an 8 hour day a week), then choose something to spend those 100 hours on. Ask people at #wd14 what they will use their 100 hours.

Matt got an email from someone who used their 100 hours to set up Pork Camp – a food festival from farm to plate. Later on Matt got in touch again and he'd done it again and TV producers were interested in the next food journey...

Beginnings matter. Culture is established at the beginning.

EGALITARIAN

The web is egalitarian. It's a level playing field. It routes around deference... “in a way, the web is an Australian medium.”

@genmon

Scott Thomas – Doing Simple. Honest. Work.

Four years since Scott has been at WD! Wow time flies.

The brief for the Obama campaign was simple and powerful – to design everything in front and behind the campaign. Everything from the website to the placards and podium graphics.

Took a messy site and designed the now-famous Obama Brand. After the campaign Scott didn't want to move to DC... but he did create the Designing Obama book, which is now out of print. But this is what he spoke about last time, so moving on...

Scott's company is named Simple.Honest.Work. They feel technology should be used to humanise us.

His guiding principles as he built (hired) the company:

  1. Be Collaborative
  2. Solve Problems
  3. Process Driven

Fast Company came to SHW wanting to launch a new website. They took inspiration from Fast Company's awesome magazine cover design – that was being lost on the website they had. “Everything just ended up in boxes.”

thenounproject.com – attempting to get a consistency of icon meaning. Huge shared project, 50k icons and growing.

Great work doesn't happen on its own.

Creation is a process.

All processes need structure.

You have to constantly iterate on your process – keep getting better, keep working to solve the points of frustration.

“Just be creative” - argh! We hear these things all the time. But we need to stop rolling our eyes at this and be the guides, the leaders. We should provide the structure within a project.

Talking through the process of creating the New America Foundation's new brand.

SHW's process includes:

  1. Understand – clarifying strategy, questioning, planning, workshopping, requirements gathering
  2. Approach
  3. Accomplish – the actual creation, the nitty gritty of launching
  4. Analyse – data gathering, come back to questioning (ask the questions again), a/b testing, user testing (qualitative), surveys
  5. Enhance

The process is more of a cycle than a linear path. Iteration, not waterfall.

UNDERSTAND

What's a brand? When people say they want a new brand, a new identity... they built a “periodic table of brand elements”, to break up the concept of a brand into manageable pieces. eg. Logo, imagery, colour, typography... naming, products, processes... what do you do for the world? What is your culture while you do it? How do you describe what you do to other people? What is your brand voice? How do you visualise it all?

Web Directions 2014

Getting to the core: Vision, Misson, Values.

What are your brand attributes? (innovative or traditional, simple or complex, fun or serious..?)

SHW actually created a set of brand keyword cards, with the opposites on either side. They do an exercise where they get participants to choose their cards; then strip it down to a small set of core values.

They also get people to imagine their brand as a car, as a fashion brand, as a celebrity, an animal. It helps people understand the idea of identity and personality and helps them express what they want for their own brand.

People struggle with questions like... Describe the brand's style? What images describe the company? Do you like a serif or sans-serif?

They created mood board sheets - ~8 images with numbers, then have people rate them. Each mood board had an overall theme or concept.

Then ask... What do you do? What differentiates you from competitors?

This leads into voice, naming, taglines. This is where you can see if the brand is really working.

(margaret mark quote - “the most successful brands are those that most effectively correspond to fundamental patterns in the unconscious mind known as archetypes”)

What archetype aligns with your business? Regular guy/gal? The caregiver? The ruler? The explorer? The sage? The hero? Etc...

Scott finds it's a challenge to keep his own team from going straight to sketching, drawing. It's a natural reaction to jump ahead, just as devs like to start building. “Just wait until you understand the brand... you're not creating it for you.” You have to stop, learn, only start creating when you properly understand the goals.

APPROACH

Research, qualitative, interviews, competitor analysis (for the New America Foundation, every single competitor was using blue as their brand), gut test.

20 Second Gut Test: you can begin to test your hypothesis. You can get the group aligned with a quick test. They put up lots of quick images and get data from it with a survey → they turn gut reaction into data. The participants only have 20 seconds to tick ratings/numbers.

Then when they present actual on-brand designs, they continue using quick surveys. They set the tone and make the client expect to do homework, give feedback, provide detailed numbers on how they rate different options.

Make people feel part of the process by making them part of the process.

“Designers and engineers I don't think are that different. They both have a spirit of creativity.”

Start somewhere. The problems are massive and can be overwhelming.

Be empirical. Try to get numbers, remove subjectivity.

Keep iterating.

Bring people into the process.

Use process to distract dissent. If someone said they liked something at the start, it's harder to suddenly say they don't like it later on.

Wear many hats. Step out of your comfort zone.

Q&A

Q: despite your process, do you get people saying “give me Obama!”

A: It happens - but he has to say well, you're not Obama, you're doing something else so that won't work for you. You need to build your own brand.

Q: do you think your background in coding influences your design process?

A: absolutely. Noun project was a bit like github for icons. Design needs to be more like open source, more democratic, more open. People see it as a closed magic box that produces amazing things.

Q: if your empirical data suggested what you have isn't working, how do you deal with that?

A: well if the data says it, then you need to change things! But you should still ask whether the 'problem' really is a problem - will it prevent the project reaching its goals? When someone looked at the New America Foundation's revised logo, and said it “looks like a guy lying on a mattress”, it was fair feedback but it didn't impact the mission of the brand.

@simplescott

Emily Nakashima – The operable front end

Web Directions 2014

(missed a couple of minutes of the talk)

“make your software more operable” ...whuh???

Build code to be more friendly to the build and release cycle.

Be able to:

  • detect when there are problems
  • diagnose and fix them
  • deploy the fix to production (efficiently!)

Operability is about everything that happens after a feature is ready for production.

Automate things, test things, have monitoring endpoints, dashboard everything!

The attitude that used to be... (worked fine in dev, ops problem now – burning house girl meme)

Web Directions 2014

...became “it's a user problem now!” Understand that problems are an issue for everyone – the user, support team who has to field the calls, etc.

Notion of “frontend ops” - while not a common job title or well-defined role, it's definitely a concept that is out there and should be discussed. It's probably going to become more common as more code shifts from the back end into the front end.

(reference a smashing mag article from 2013 “front-end ops”)

Emily's day starts by checking some dashboards. Looking for things which aren't normal – a new pattern, a new error, something that's a bit suspicious.

In one case she found a problem with a license text injection menu – a feature she didn't even know existed! It was built before she joined and not a hugely popular feature. First thing she did was check the issue queue to see if a user has already spotted the issue (in this case, yes). She knew having just looked into it, she was “the company's leading expert on this one bug...” so she was able to answer the issue, saving the support team a few minutes.

JS ERROR MONITORING

They have a short script that collects contextual information for JS errors. The browser provides lots of detail including message, filename, line number, the error and even a stack trace. Then they also grab document.ready state and time since load. Capture the target of the event (what were they clicking?).

They filter out quite a few errors and send it to an app called Haystack, which is an internal github system built originally for backend errors. But since all errors are just objects they adapted it to track JS errors as well.

They use chat to query the error API, partly as it gives the team visibility on who's working on an issue.

PERFORMANCE

Two main categories: synthetic metrics (debugging tools and systems) and real user metrics (from the users browser).

Specific callout – lots of third party code insists on a SCRIPT in the HEAD which really causes problems if that third party is down. You can have blank pages being served but it may not trigger traditional monitoring (eg. It's still a 200ok status, for a successfully-delivered-but-totally-empty page).

  • Loading metrics - Monitoring response time, domcomplete time, etc gives more detail so you can work out where problems are occurring.
  • Simulated loading metrics (ajax, pjax, etc) – pjax lets you time navigation actions
  • Interactive performance (jank) – harder to track but awful for the user. Github has a “hacky FPS measure” that runs in the background, but it doesn't give a lot of detail. There's an API coming (frame timing) that will make this better.

USER METRICS

Nothing is as good as instrumenting the user experience directly. Google Analytics can provide some of this...

War story: she accidentally broke the “create pull request button” one time... they now monitor how many PRs have been created in the past few minutes and alert if it drops.

GA can actually provide alerts for these metrics!

CANARIES

Tests never really capture all the weird things users do in real life. You need as many canaries as possible... but ultimately coworkers

ACCESSIBILITY MONITORING

They are building a set of a11y checks in JS; this fires a custom error class, console.logs and gets reported to Haystack. They detect images with no alt, links with no text, form labels not connected, inputs with no label, etc.

Why not put this in your test suite? It's actually hard to get the tools to test every view; but running the checks in staff mode/dev mode runs on everything.

HOW TO START

“OK cool but I don't have Haystack...”

There are services that can help:

New Relic, errorception, Raygun, LogNormal (SOASTA), Google Analytics.

Graphs and alerts – Circonus, Graphite+Nagios+your ops team, GA again.

“The best answer is talk to your ops team, find out what they use and then use that too.” It's good to collaborate!

Anything you can send an event to GA you can get alerts on.

SO WHAT?

Putting all this together gives you some really good tools and techniques that will help you write better code. It can change the way you code.

People wouldn't use XHTML 1 Strict because it was too hard to know if you were serving broken pages. People liked using jQuery because it doesn't throw errors much. But if you are monitoring you want errors so you know things have gone wrong.

Why not just write tests? You don't want to write tests for everything! Some things are better to simply monitor results than write massive, complex tests.

Tests won't catch everything – monitoring will find errors that occur when your users upgrade their browser, even if your tests aren't running that version yet.

Monitoring makes for fewer 'code janitors' – you find bugs sooner, so you can usually get the author of the bug to fix it (opposed to someone having to dig through and reverse engineer it again later).

Front End Ops Engineer – quite a title. But worth remembering that even if you have some people named “javascript developers” usually everyone is writing some JS. So her job is to put the tools in place to make it easy and safe for people to write and deply frontend code.

Q&A

Q: why did you roll your own app instead of using sommething like new relic?

A: github just prefers to roll their own to customise things... they obviously prefer open source too.

Q: are there performance hits from the actual monitoring code?

A: this is a question they ask a lot – and how do you monitor the monitoring code? - but they keep an eye on the impacts; plus they can run the site in “staff mode” so users aren't taking the hit.

Q: how do they manage alert-itis, too many alerts or too much noise?

A: something's that's really critical will send an SMS, but something not so urgent might get a chat message from Hubot.

Q: do your devops people care about the FE monitoring/errors? How do you get everyone to care?

A: they don't automatically get ops involved, they naturally work together when they need to. The teams also generate a lot more empathy for each other and get on more easily.

Q: how bad are the cross-browser issues?

A: they have a pretty modern user base so they actually get issues from really new versions of chrome rather than the really old browsers...

bit.ly/operable-fe

@eanakashima

Sarah Mei – Unpacking technical decisions

“I can't see you too well – it's very bright. I can just see your glowing apples...”

Awesome bit of geek social hacking: Sarah literally calling to people to come talk to her during breaks, “even if I'm on my phone!” ...because she doesn't know people here, it's a long way from her usual conferences.

Sarah started in backend but now does about 50/50 Ruby and Javascript. Interesting shift over the years! This talk is about how we make decisions about code; and how we can get better at that kind of decision. While the talk uses Ruby examples it's not specific to Ruby... but the talk is also about humans; and that's the hardest stuff we do. Human relationships are much harder than code.

Code and humans are inseparable. You can't just have one or the other.

[Conway's Law: organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.]

You can tell a lot about programmers by looking at their code – how much pressure they were under, how clear the scope was, what their coding background is (backenders write very different javascript than frontenders).

There are some key groups that turn up at conferences like Fluid... backenders, design+ux, and frontenders. But although they are very different in many ways, but they also all end up with the “which js framework to use?” question.

There are absolutely tons of options out there. But it's not specific to Javascript, all technical groups have these quesitons. Which data store, which x, which y.

There's heaps of data; there are always pro- and anti- blogs or presentations for every option. Our job is to make a decision and it is scary as there's a cost to that decision.

Many companies just live with the drag of past choices. However this is a great way to get disrupted by a startup who can move faster than you. It's usually not a catastrophe, more of a slow decline.

Because we don't make these choices often, we don't get the benefit of repetition – which is a key way we learn. So we don't have a lot of opportunity to get really good at making these decisions. Think about the 10000 hours meme – even though it's mostly untrue, there's a kernal of truth. We learn well by repeating – practicing – and evaluating the outcome then trying it again.

Decision frequency: we don't choose languages very often, we choose libraries on github more often and we choose names for variables all the time. The process is usually pretty opaque – we usually can't explain our choices very well. We tend to say it's gut, or experience.

How do people evaluate github projects? They usually start with the readme. You could also start looking into the API, look at the style of code. Commonly people look at the activity levels on the project, ask around for opinions of coworkers/peers.

Issues with this? Not everyone evaluates the same way; lots of the data is social data rather than technical data; not everyone does as many evaluations.

You can split it up:

  • Interface – readme, use gem
  • activity – commits, issues, Prs, etc
  • popularity – community strength
  • accessibility – reading the code, how accessible is this to my mental process, my style of code?

The Mei System:

  internal  
people Accessibility Interface project
Popularity Activity
  external  

Many times the options will rate pretty evenly on all counts except accessibility. The different options will often feel different, and do you identify with the style of the code?

Angular feels very familiar to backend (Java) devs. This means there is less cognitive load as it doesn't require the java dev to learn an entirely new programming paradigm. Of course to non-java devs it's pretty disorienting to learn.

Ember meanwhile feels familiar to Rails devs. Backbone is older and will feel familiar to people who are used to a more traditional rending model, where JS works on top of a server-side rendered page.

So, accessibility can be very hard to evaluate – partly because people don't realise where the frameworks come from. The frameworks don't really advertise it, consumers may not realise their own bias.

So how do you see the bias? You don't have to necessarily know what the bias is, but you'll feel the results. How hard does it feel to use it?

Plus you don't always want to choose the easiest option for accessibility – sometimes the team is ready and wanting to learn a new way, sometimes they don't have the time or energy.

[Tweet: “the only reason nimrod isn't adopted instantly is because people don't evaluate things logically”]

[“A change of perspective is worth 80 IQ points.”]

Q&A

Q: how do you balance the New And Shiny aspect?

A: part of a project's success is how enthusiastic people are. If you have people who are bored and frustrated, it will be hard to retain them if they can't work on something fresh and new. So it has value to the business to keep them!

@sarahmei

Tom Armitage – Some of these Things are not like the others

Internet of Things (IoT) – not such a great term as it “others” the things from their context. Tom prefers “connected objects”.

Why are some objects different and what can we learn from that?

Hello Lamp Post – entered into the Playable City competition.

“If the city is a platform, you should be able to play with it!”

The term Smart City is as divisive and inaccurate as IoT - “networked city” makes more sense.

[Adam Greenfield quote about networked cities being “made of declarative actors and objects/spaces that have their own networked identities and shadows”]

The first thing Tom put on the web was a bot that tweeted the opening and closing of the Tower Bridge in London. He partly did it to see what it would be like to have the information in his twitter stream like any other identity – “bleating about what it's up to.”

The city is a surface and a platform to build on. It's already playable, could we draw that out? Can we use existing infrastructure? A lot of street furniture items have unique IDs on them (lamp post ID numbers, postbox ID numbers, etc). They thought a lot about the idea the city is a diary of your experiences within it. It maps out places where things happened, things you remember happening there.

So their ultimate idea (in technical terms) was to allow people to SMS the codes from street furniture – no smartphone needed. You would then enter a dialog with the object... you'd find out what other people had said about the object or the place.

Hello Lamp Post - YouTube:

The system was very simple. There were “hero objects” with the full instructions on them, which is where most people would start. But then they knew how it worked so they'd try other things, which didn't need the detailed instructions.

The writing of the SMS messages was careful – the objects had a limited personality, they did not change mood, they didn't pretend they were really sentient. It was friendly but didn't get too deep. It would ask questions like “what is your favourite memory of Bristol?”; some of the responses were really interesting, many quite lovely.

The connected city breaks away from the most common focus – objects owned by just one person or household.

Connected objects are not just Things With Wifi, they are things made more useful. This is why the networked bus stop is useful – it brings the information “when is the bus coming” right to the place where you need it. Meanwhile the bus itself is on the network, broadcasting its location so the bus stop can know when it's going to arrive. But it's worth noting the bus stop is not personified.

The tower bridge was personified because it was on twitter, so it spoke in the first person. Curiously, it didn't matter that it was just tweeting the timetable – because if it was a bit inaccurate it didn't matter. If you really need to know if the bridge is opening you can't rely on a twitter bot repeating the timetable, you'd need to monitor the actual motors, or the boom gates.

Hello Lamp Post used a lot of “cold reading” tricks – like a psychic reading it would say things that couldn't be wrong. It ensured the object prompted the person correctly - they had to iterate to get it all right, some phrasing didn't work and people would respond to the wrong part of the message. One message would respond to the user's last comment with "Really?" then ask a new question, but people would respond to the 'really' and not the question.

Columba – a public/shared bike compass that always points to the nearest empty bike rack, so you can return it when you get to your destination.

Noting the idea that prototyping connected objects can hit the same old problem of people not differentiating an object created to test an idea, vs. something intended for sale.

For the bike, he started with a web app – which let him become familiar with the data set. He then created a small physical device – this let him explore the experience. He learned how often to show the lights, to let the user press a button to interrogate the data, he discovered the OLED screen was more legible than expected.

Two conceptual ideas: the big stick and the binoculars. One lets you see a long distance, the other lets you poke something from a distance. So seeing your washing machine's status on your phone is the binoculars; being able to turn it on or off from a distance (or from a different time – thinking of time as distance) is the big stick.

These are the most common things that are done with connected objects.

Richer interactions go beyond these two primitives. The connected pill bottle doesn't just replace the cap, it hooks in to the entire context of medical care (filling prescriptions, notifying caregivers if you haven't taken the medication).

We talk about “seamlessness” a lot, but sometimes you need seams! Doors are there to be a speed bump to entering your house.

[Example of an electronic lock that failed to let in the owner and failed to stop a stranger entering the house... The August Smart Lock Works Like Magic—When It Works | WIRED]

Some seams are meaningful. Some should be exposed to the user. Some are valuable when they are exposed.

There are questions that need to be asked about connected devices – what happens if the service that drives an object is not there any more? Can you still boil water with a smart kettle, if the service is down? Will the object work if the owner moves to a new city or country?

Trust is a big thing to ask. People invest in objects, they use them in their lives. If they lose trust it's a big failure.

A big seam in the tower bridge twitter bot is that when he manually replies to people, the tone is clearly different. It breaks the magic.

A big seam in hello lamp post is you have to get the format absolutely right or it doesn't work. Once you're past that seam it's ok, but it's a lot of friction up front. That's why they had the hero objects, to help people through that hump rather than pretending it wasn't there.

Connected objects need to be resiliant to failure. The bus still arrives even if the bus stop doesn't announce the timetable. The bike compass is quite vague so it's “wrong” less often.

“The default for a city is resiliance.”

Don't just consider things we can easily connect to the network. We should think about things that are useful, to look for the potential.

Communally owned, public connected objects are more interesting than those hidden in the homes of the affluent.

tomarmitage.com

Closing Keynote: Dan Hon – An internet for humans, too

Web Directions 2014

Dan showed some ads created for Facebook while he was working at an agency – trying to improve its perception. One very fun (cosplayers finding people to hang out with), one very deeply emotional (a journey through cancer).

This was a key moment in the conference - Dan showed a great deal of emotion on stage, something people usually try to hide. He also owned the fact it was a little weird that it's possible to actually kind of make us like Facebook, even just a little bit more.

“That was basically weaponised empathy...”

Now Dan's at Code For America.

“I'm excited about the future but I'm also really angry about the present.”

Over the past 40 years computers have been getting smaller and cheaper and better... and now we are so close to realising that future. But we're pushing to build an internet of Things rather than an internet for people.

There's an empathy gap between people and the companies building things.

[another page from the Usborne Book Of The Future... showing the way people imagined an iWatch.]

If the network is the new electricity, then that network should be for people not of things.

“I wanted a flying car and all I got was a way for the entire planet to communicate instantly via massively powerful pocket computers.” - @fraserspeirs

We have a responsibility as people who build things, to remember we are building them for people.

We know Google Glass... we know there are bars that have banned them, there are people who viscerally hate Glass. “The segway for the face”, “glassholes”... why do we have such a reaction to this technology? Part of this is a failure to understand the context in which regular people operate. Sure there's a possibility we could see the world like Tony Stark or the Terminator, but we forget the intrusiveness of technology in social contexts.

Glass came from a place where it was considered awesome to strap a camera to your face, and keep other people on the periphery of their vision.

We have lots of activity monitors – personal metrics and data, thanks to things like fitbit and fuelband. But there's a problem with what to do with the information. Charts and graphs. Cool, but what does it mean? What action should I now take? Is that number good or bad? Should I tell my doctor about this information so they can explain it all to me?

Have you ever had a situation where you felt a company might have been doing something that wasn't in your best interest? People often say “phone companies”. AT&T have some awful clauses in the T&Cs that you can opt out of... by writing a letter, to which you never get a response. Tivo did the same thing.

“There are lots of opinions about Apple and it's easier to have them now that Steve Jobs has passed away.” ...but they did put something into peoples iTunes library without asking. This didn't go over well. We can't say whether Steve Jobs would have done it or not... and it was actually Bono who (kind of) apologised, not Apple.

Government examples... What if the data being moved without consent was your medical information? This happened with care.data in the UK – which had a panic driven last minute opt-out process that nobody understood. Cal Fresh is a food stamp system in America – in San Francisco the signup process is 50 screens long. About 25% of people who do sign up drop out due to administrative problems. This is actively user-hostile; and given food stamps is about survival, it's simply inhumane. You could be forgiven for thinking they didn't really want you to sign up for it.

But we don't have to have technology that is dehumanising. We can cross this chasm of understanding.

Let's close the gap.

Web Directions 2014

In the UK, MPs were refusing to deal with people if they didn't send a letter (as in snail mail)... but it turned out you could fax them. So someone created a “fax your MP” service. Later when they were supposed to be sending a letter to their GP to opt out of medical data being collected, they adapted it to “fax your GP”. This was not hard to build. Why wasn't it built immediately? ...why was it built by a third party and not the government which knowingly created the need?

Why be hostile to users?

Dropbox allows you to opt out of enforced arbitration with a simple online form. Why didn't AT&T or Tivo? Isn't it causing them more work, losing them money manually processing letters?

Zappos do a great thing where they will help you find the shoes you need, even if they don't have them. If you ring up and what you need is out of stock at Zappos, they will send you to a competitor that does have them... because they still want to solve the problem you came to them to solve.

The UK Government is doing some work to make things more usable:

  • The bank holiday information used to be a big table with everything; but now the page tells you when the next one is. They realised from the search data that people just wanted to know when the next holiday is coming up.
  • The process to set up enduring power of attorney was simplified – it's an awful process often done under stress. Making it easier to do is a human thing.

(referring to the power of attorney form) “This isn't new... it doesn't rely on webGL, it doesn't rely on a framework that's two weeks old... although it is responsive.” It turns out part of the future we imagined and wanted was a future where things worked.

A lot things aren't hard, you just have to care about them. The more time people spend with users, the better products get.

Remember that users are simply people.

Not trying is a signal.

“It's the basics” … it's not about the new, the surprise and delight. It would actually be better if we just fixed the damn thing and made it work. Get those absolutely simple things right, like sending a form.

Let's close that gap.

Help at codeforaustralia.org

tinyletter.com/danhon

@hondanhon

Opening Keynote: Genevieve Bell, Being human in a digital world

Genevieve grew up in and around indigenous Australian communities and probably learned more by going bush than going to school. This left a great impact on her world view.

She was starting a successful academic career (tenure track at Stanford) when she had a life-changing conversation, with someone who said “couldn't you do better?”. He tracked her down (on her home number, no less, after her employer blithely gave the information out) and got her to come out to lunch with a lot of tech people, ultimately running into people from Intel.

She had a truly weird interview, as Intel was trying “behavioural interviewing”. They were trying to get her reaction to “constructive confrontation” - which she found meant “men yelling at her”. Being strong and Aussie she “got a bit Bolshy” and fought back – and they loved it, offered a job on the spot. She said no; and they chased for six months...

Eventually she decided that she wanted to be part of making a digital future. If she didn't, it would be left to these crazy engineers who didn't seem to really understand humans.

On her first day they said “we need you to help with two things... first, women”... on further investigation this meant all women. “I wrote down 'women, all' with lots of underlining under the 'all'” This was such a huge topic, it was a couple of days before she remembered they didn't actually get to the second thing. When she asked they said it was “an ROW problem”... what? Rest Of World. Meaning “non America”.

Web Directions 2014

So her job was to find out what women – all women in the world – want... and what everyone who is not in America wants. Or to put it another she had to explain everyone who was not in the building to the people who were in the building.

This has turned out to be an extraordinary job. In addition to finding out what people want now, it involves imagining what the future might be – and what we want it to be.

[slide: 1950s nuclear family playing a board game in a self-driving car.]

While many future predictions, eg. From the 1950s, weren't far off, many are and remain indefinitely deferred. Jetpacks definitely, self-driving cars... maybe. But the nuclear family with the father all dressed up in a tie for a trip in the car... probably not. The social context changes.

How fast do things really change? Genevieve illustrates this with the extraordinary changes to cricket since the 1980s. The players have different physiques, different styles; the broadcasting has changed; the umpiring technology has changed. But underneath all that some things about cricket haven't changed in 100 years – we still want to beat the English, we still chant from the stand. It's about a collective activity.

Sometimes it's easy to be very taken with the things that change, but not the things that don't. We forget to look at the things which aren't changing.

Five things about humans that don't really change:

  1. We need friends and family. We are social creatures. We may imagine a different family, but we still imagine a family. Our social circles and how we interact with them have changed, but we still have an enduring need to have a social circle. People connect to other people.
  2. We want to belong to a community. We want to be around people who share our values, interests, skills. Over the years it could be guilds, unions, clubs. Online there are communities around collecting things, watching/enjoying things, sharing activities.
  3. We want to have meaning in our lives. We have a desire to belong to something bigger than ourselves. In the 20th century that has often been nation states, churches... online now people gather around ideologies in a similar way. Hashtags on twitter give people a way to find things bigger than themselves that they agree with or want to belong to.
  4. We use objects to talk about who we are. We have an “ongoing twitch” where we need to use stuff to talk about ourselves. What brands you choose, the clothes you wear, the objects you use. We use these to show who we are, what we do, what we believe in.
  5. We need to keep secrets and tell lies. This makes us indelibly human. This is not just the active lies we tell, it's the omissions and white lies. Which is interesting when we live in an era that makes it tremendously hard to keep things secret on the internet. Studies have shown 100% of surveyed participants admitted to lying on their online dating profiles. We actually have a notion of permissable lies... less permissable lies...

These things have all been impacted by technology – particularly thinking today of everything from electricity onwards.

There are many things which are now in flux:

We worry about our reputations. People do not want their television to automatically tell their friends what they are really watching. They want to filter – and in fact to lie. People also have interesting worries that a household that's connected to the network will be gossiping about us - that the fridge is telling the washing machine what we've been eating.

We have a deep seated fear that we are deeply uncool and wish we weren't.

Technology has had social impacts around revealing the truth of our lives, ever since electricity lit our homes at night and revealed when we were at home. There were fears that advertising our presence at night would 'put women and children at risk'.

We need to be bored and we want to be surprised. In 1919 Heidegger lamented the loss of boredom and argued we needed boredom to be creative. Medical science shows that actually we do need be bored to create a different neurological state, we need to pass through it. It's problematic if we never do pass through it, or habitually prevent or defer that state.

Needing to be bored is tremendously difficult in a world full of devices to keep us entertained. There is an interesting challenge here. We live in a world of algorithms designed to send you content that interests you – even whole books being recommended.

But interestingly if people read a lot of similar books, or consume a lot of similar things of any kind... eventually people get bored and want something new. Game Of Thrones surprised people, which contributed to its massive success.

There's something unnerving about a world in which we can't reinvent ourselves, because everything we have already done is remembered. We are caught in a tension where a form of consistency is expected, so it's hard to leave behind things in the past.

Our technology is also relatively simple and focused on removing surprise. What if your device not only told you about the nearest coffee, but it told you to stop and admire some surprising public art first because it might challenge you and make you think?

We want to be different. Is the internet making us more global or more local? This is a question that is long standing – when shipping opened up nations to each other, there were fears that there would be a loss or dilution of culture.

We use differences to understand boundaries, to know what makes people “us” or “other”. We do want to be different from other people.

We want to feel time. As long as there have been techologies, we have shaped our notion of time. Clocks, obviously, stabilised something which used to be extremely local. Clocks fixed time in place. Electricity messed with this! It changed what you could do and when; it certainly changed the way we sleep and think about sleep. While our devices function best when they are full of charge and data... humans need downtime. Humans function best when they can be “off” for a while, but our devices do not respect this.

We now have the concept of “digital detox” (often terribly unsuccessful). There are companies turning off their email servers over the weekend and having staff leave their devices work - because they are more productive if they actually switch off when they are out of the office. We have people trying to decide on rules about what devices are allowed in the bedroom.

We want to be forgotten. We want to have the capacity to not be remembered, we need to be able to forget. If we literally remembered everything we'd ever said and heard, we would struggle to process it. Being forgotten is important because it allows us to be forgiven and to reinvent ourselves.

In silicon valley there is a persistent preoccupation that “everything is different” and everything is moving fast. But it's not true. Some things are moving very slowly, some things don't change much. Human nature is quite stable.

Web Directions 14

[Stable: friends and family, shared interest, something bigger, our objects, our secrets

In flux: reputation, surprise/boredom, difference, time, forgetting]

If there was one request from Genevieve it would be to tackle the challenges in the flux side, because there is a great deal of opportunity there.

We should make sure we are asking the harder questions and doing the harder work.

@feraldata

Jonny Mack – Building trust

Tagline: communication, conflict, teamwork

Rather than jumping straight into the work – our natural desire to start building, start drawing and designing – how can we create a team dynamic where great work will occur?

A tale of two teams... a main team and a side project.

On the main team there was no real way for people to deal with conflict. People simply wouldn't budge. There was a lot of heirarchy, everyone was a stakeholder... a lot of product decisions were being made behind closed doors. Nobody was talking about barriers to success. Communication was terrible – information wouldn't come out to the rest of the team, just decisions from behind the curtain.

The other team was essentially the opposite: they communicated openly, they had trust. They could deal with conflict, they could work through decisions and challenges. They felt that they could make something together that was better than anything they could do alone.

So, Jonny wondered how can you create the good team? How can you go in and set things up so the good dynamic was created?

[book: Developmental Sequence in Small Groups. Tuckman, 1984. The forming, storming, norming, performing model.]

So how can you see this play out? The movie Cool Runnings!

  • Forming – they just get the group together, they want to be accepted so they don't really have conflict, they're observing each other and gathering information. It can actually be a very comfortable stage to be in, due to the lack of conflict.
  • Storming – now the team has built up enough trust, they start challenging each others opinions and … well, having arguments. This can be very difficult for people on the team who don't like conflict. But it's an important stage as it facilitates growth. Many teams get stuck in this stage, though, and it can be very unhappy.
  • Norming – agree on rules, goals, methodologies; even when that means accepting disagreement but putting it aside. Set the norms of the group.
  • Performing – the group an operate very smoothly, with minimal supervision. The team's a well oiled machine. It's frustratingly rare but it's where the best work happens.

[Showed some clips:

Jony Ive – talking about how he will remember his team(s) at Apple as much or more than the products they created

Rick Rubin - “I trust the artists... I want them to feel this is their record...” and how in his early career he insisted on His Way and it did not create the best result.

Nick Cave – talking about collaboration in 20,000 Days On Earth... “these strange collaborator creatures”

]

The common thread through all of this is trust.

People trust each other, trust each others' talents, trust each other to make the right decisions.

So how do you create trust? “I don't really know... I have some thoughts... I'm still learning this and asking the questions...”

  • Trust yourself – trust you are bringing value to the team, to what you are doing. In doing this you gain confidence, you know that when you speak up it's valuable.
  • You need to have humility, you need to be humble and realise that while you might have good ideas someone else may have a better one. Which is tough when you think you're right or you have a key insight.
  • There are trust exercises and personality evaluations that can help a team learn to understand each other.
  • Team building activities can be really good – shared experiences... indoor skydiving “was great because we ALL looked like idiots!” People were laughing and joking around... so hokey as this stuff can seem, it really can work if you commit to it.
  • A lot of trust concepts also apply to your users. You need to build trust with your users; and if you lose their trust you are in trouble. Case study of AirBNB responding to a host who wrote a very unhappy post about getting their place trashed... although they didn't handle it well at first, they came through with changes ($50k guarantee, identity verification) to try to stop it happening again.
  • Consistency is huge – companies often say one thing and do another, which is a trust killer.

What we build is not lasting – the web is ephemeral. What can last is the experiences you have building it, the teams you build to do it. So create great teams.

@jnymck

Jonathon Colman – Build better content

Web Directions 2014

Ambiguity makes people guess – content strategists are enemies of ambiguity.

Hey wait, a content strategist for Facebook... but isn't it all user-generated? Actually no, his team creates content experiences so you get the best out of Facebook.

Example: they are making a new privacy checker to remove ambiguity about who can see the things you are posting.

Language is an interface. (concept Jonathon got from Andrew Hinton)

Content strategy != copywriting, managing people or content marketing. It is interaction design, user experience.

Page views are not your goal, much as it might seem like it... you have a goal, a mission and that's why you are out there. Page views are just a measure, or side effect.

Content experiences have a hierarchy of needs, just as our broader lives do... if you want to hit the peak, “joy”, you need to make a great deal of use out of the brief moment of time you have the user's attention.

So how does Facebook do it?

Start with why – it's always more interesting than the what. Then move on the how and finally the what (the actual design, engineering, content, research, etc..).

FB's core values: focus on impact, be open, be bold, build social value, move fast.

Yes, FB usedto say things like “done is better than perfect” and “move fast and break things”... but through a process of double-loop learning, questioning their norms, their values changed. Now they say things like “nothing at facebook is someone else's problem” and “measure twice, cut once” or “give more than you take”. Jon's favourite: “slow down and fix your shit” - people put post-it notes over the Y to make it “fix our shit”.

Web Directions 2014

Minimum viable content: the minimum they ask of all their products.

Content principles:

  1. keep it simple
  2. get to the point
  3. talk like a person

These things form Facebook's voice.

Error messages make good illustrative examples, as they are common to all systems and they tend to be very obscure and not human at all.

“Sorry, there's a temporary issue with your post. Please try again in a minute.”

This tells you what has happened; where it happened; and what you can do to fix it and when can you try to do it. This deals with fear, anxiety, relief and impatience.

A good error message can speak to the feelings that your users will have when things go wrong.

Things learned working on four products:

“Saved” essentially a bookmarking system for FB.

  • Less content is more difficult. He had to use four lines of copy to explain a great deal of information.
  • Don't get in the way. “Save (name of the link)”, not “Save this awesome content...”
  • Make the most of small spaces. Use less words... noting that after they are translated out of English they are often much longer!

Login

  • great content is invisible
  • optimise for clarity and show examples
  • break apart big decisions – let the user consider each part, in some cases you actually want them to slow down and think before they decide

Anonymous login

  • it's hard to tell where design ends and content begins
  • use research to iterate rapidly

Nearby friends

  • empathy is the hardest thing we do every day – the hardest part is not the technical, it's the people.
  • The product had a lot of opt-in considerations, it's a double-opt-in system. It had to be easy to decide to opt in and easy to opt out again.

Great concept of the five layers where content strategy works – see the slides!

Slides: bit.ly/fixourshit

@jcolman

Doug Bowman – A voice for everyone

Web Directions 2014

(My notes are a bit brief for this as I tended to get drawn into the story.)

If eyes are the windows to the soul, the voice is the gateway to the heart.

But a voice can only be powerful if it's heard.

When Doug was a kid he was really shy, but he discovered he could draw – and let the artwork speak for him. So it's interesting from that start for him to work at twitter, which is about letting peoples voices be heard...

Doug formed the design team at Twitter from scratch. He got to set it in motion and scale it. He worked there from the days it was a tiny little loft, to its current massive headquarters.

“Twitter has always been about people.” It is fundamentally a human service, for the people by the people.

The usual definition of a network is that it connects you with people you know... Twitter also connects you to people you want to know.

Doug ended up in a twitter conversation with Seal (the musician) after Seal complained about the new twitter app; and Doug replied that he was listening if he had feedback. This is not something Doug would ever have imagined would occur...

Because people can listen in and drop into conversations, you can end up with some delightful or at least surprising interactions. Businesses are often more human than they are in any other channel; and more playful.

Web Directions 2014

Not everyone gets twitter at first. Takes a lot people some time to work out a way to get any value out of it. Roger Ebert said he'd never join, until he lost his vocal cords. After that, he took to twitter and posted the way he would have spoken. He used it as a second voice.

[Amazing quote from Roger Ebert about what twitter is and what it's for.]

Twitter is a series of moments. The small moment tweets often become fascinating in the aggregate – tracking the hashtags #hungry and #tired show some really clear patterns. Tracking “feeling happy” tweets shows a really clear bias to the second half of the year. Also twitter is very clearly “hung over” on New Years Day, the day after St Patrick's Day...

Big moments on twitter bring lots of people together at once. Great events, terrible tragedies... twitter celebrates and mourns, or shares the tension of an escalating situation.

James Buck was covering the Egypt protests and when he was arrested he could tweet “arrested”. His family was able to take action and he later tweeted “free”.

Twitter now has 500m tweets every day. This has grown from 2m/day in 2009.

Twitter often plays a supporting role for people doing great things. It is not Twitter doing these things, so much as a tool people use to add something to what they're doing. It can amplify a voice.

Social media did not create the Make A Stand lemonade story but it certainly played a role:

Although these stories have been rooted in Twitter, the message applies to everything we make.

We are the creators of the modern age and we have a responsibility to make sure peoples voices are heard.

@stop

Closing Keynote: Tobias Revell – Haunted machines

Web Directions 2014

(themed around Halloween and horror movies..)

Any sufficiently advanced technology is indistinguishable from magic.

Technological literacy is not as high as we might imagine. People (not many but some) were duped by pranks getting them to put their iPhone in water or the microwave..!

Our devices are so networked they talk to a huge number of other machines, yet we have a very low level of understanding of them or control over them.

  • The OSX Yosemite update had an opt-out to stop Spotlight sending all your keystrokes to Apple (here's how to fix that)
  • Some books disappear from your Kindle in Singapore because they are banned there – you didn't truly buy the book, you rented access under a set of conditions you didn't particularly know about.
  • Someone was able to hack a wifi printer and replace the firmware with Doom (2014 hack)

Any sufficiently advanced hacking is indistinguishable from haunting.

Nest devices were hacked last year and used to launch a DDoS attack. You can be haunted by your own house. The more devices that are connected the more devices can be hacked.

Some ghosts are friendly of course... it's a very common trope in horror. They do tend to be relatively subtle and mostly unseen.

Should we offset the existential burden of being human onto a machine? Nest is great as it can reduce your impact on the planet in terms of energy use... but what are the implications of handing that off to a machine? How do you know it's truly doing it properly?

[Telecommunications of the 1990s by BT... where the amazing new futuristic chat actually doesn't work very well. Surprisingly realistic...]

(To the gathered crowd:) “You can speak machine!” but most people can't...

Paro – companionship robot... it has therapeutic benefits for the elderly. “But you're still just lying to old people! It's an algorithm in a seal suit!”

We can't tell the difference between people and bots – there are many cases where people thought something was a bot and it turned out to be a human... and people felt a bit cheated. There was a telemarketing system which sounded like a robot, but it was actually a person sitting and hitting pre-recorded sound bites. Apparently telemarketers no longer trust their employees to speak?!

Any sufficiently advanced render is indistinguishable from reality.

There are people building computers in Minecraft... in fact they are trying to build a computer in Minecraft that can play Minecraft. Minecraft is a child of the network. If the internet had a physical landscape it would probably be Minecraft.

Ghostbusting... How do non-developers deal with connected devices?

[theongoingcollapse.com – bits of data that reflect the state of the human race. It doesn't really mean anything...]

Tobias created a film The Monopoly of Fair Use, and finds the sparked conversations reveal that people didn't realise they could do things like that... they don't have to follow the rules.

The cloud is strange as it is so different from what it sounds like – we talk as though it's light and fluffy and amazing, but it's actually incredibly heavy equipment buried underground or in buildings. Our websites require masses of cables and servers and resources ripped from the earth and turned into computers.

There are no ghosts on the internet, there are just people. But we deal with the unknown by talking of ghosts. The internet is a ghost story.

“You control the perception of objective reality.” The way developers show things to the rest of the community shapes the way they understand it.

Happy Halloween!

@tobias_revell

Thank You Maxine

Web Directions 2014

WD14's wrap up included a thank you and standing ovation for Maxine Sherrin, who is moving on to new things after ten years as an organiser.

Like many others, my first impression of Web Directions came from Maxine. I turned up to pre-registration in 2005 feeling a long way from home (having travelled down from Brisbane ahead of colleagues) and Maxine immediately made me feel welcome. A little thing perhaps, but little things can often set the tone for bigger things to come.

Last thoughts

WD14 was probably the most human and emotional Web Direction ever. Many talks went deeply into human motivations, relationships and identity. I suspect more than a few people had tears in their eyes as Dan Hon shared the 'cancer journey' video, an arresting moment on many levels. Ricky Onsman has an excellent post which talks about it.

Although not for the first time, we were powerfully reminded that our industry is responsible for building things with huge societal impacts. Our projects and organisations may not have the immense reach of Twitter, Facebook, Intel and github; but we still build products for people. We have a responsibility to do our work with a good heart, building for humans first and machines second.

It may seem slightly contradictory that many speakers challenged us to tackle problems which are important rather than impressive. The web as a whole is changing society; but in our own working life it may be that we have forgotten the need to 'slow down and fix our shit', to make the simple things actually simple.

So all in all, WD14 was something of a reframing: a reboot of the event and a shift in industry thinking. We've talked about the web a lot; we've talked about the internet of things. But this year the focus was nudged back to the people using the web, the humans living in increasingly connected homes rather than the devices they own.

And with that, we adjourned to the pub to poke fun at ourselves and talk about music :)

wd14 after party

Labels: , , ,

about

Web development and standards, as seen by Ben Buchanan.