Web Directions Summit 2018 was held in the rebuilt convention centre, a new space in a familiar location.

Yiying Lu

The food was awesome and we were kept caffeinated thanks to amazing coffee by Sample, ordered with the Twilio SMS system. The meetup muster was in full swing, showcasing Sydney’s vibrant tech community; and Prospa hosted the speakers lounge.

WDS18 Day 2

Once again the Adobe XD challenge pitted design teams in a friendly competition, although I must protest Quantium were robbed, ROBBED I say… (I could not possibly be biased! ;))

WDS 18 Day 1

Disclaimer

These notes were hammered out very quickly and paraphrase what speakers were saying. If you need an exact quote, use a definitive source such as a recording or slide deck.

Image credits

The old school jump menu

Day one

Mark Pesce – opening keynote

Mark Pesce

“IN THE BEGINNING! God created heaven and the earth…” (first-person video of evolution, cutting to…) This is where the narrator usually extolls the virtues of human exceptionalism…. but this is not that story. Every story we tell about the past is a just-so story… all of the myths equally true.

Among all of the mammals man is unique in one respect… our relationship with time and reproduction. We’ve lost our reproductive time piece. There is no 'time to breed’. We are just ready…all the time…constantly basting in a human bath of human sexuality.

In taking the time out of sex, we released it and it enslaved us. We became the animals obsessed with sex.

The Venus of Holhe Fels is the earliest humaniform sculpture, notable for its exaggeration of form (a common theme of the very earliest artwork).

Fast forward to when neuroscience discovered how a frog’s eye communicated with a frog’s brain, becoming the foundation of our modern understanding of who we are… and the machines we build.

We developed a systematic approach… neurons, systems of neurons… but the more we discovered the more we realised everything is deeply embedded in everything else. We came to understand the world as a set of relationships. Neurons and the brain, brains and the world. This is the essential key to understanding learning.

(Reference: Maturana and Varela: The Tree of Knowledge)

All doing is knowing, and all knowing is doing.

Whenever two systems interact, they are exchanging information. The human retina is a little piece of brain tissue that escaped our skulls during evolution. Our brains live in the world.

As our minds shape form, those form inform us… and we respond. These forms mirror us. Not as we see ourselves, or as others see us, but as we emerge as coupled relation. Culture is the management of that relation. The myth, the custom, the laws, all form in the mind against the essential, timeless, sensual.

Culture acquires complexity, emerging from the eternal structure against this so-called animal nature that is at the core of ourselves. Culture becomes the clothing for our naked desire.

We arrive in the last billion seconds, exhausted trying to outrun who we are.

Gambling has always been a great draw, its randomness delivers a sweet excitation. But when it becomes part of the design, it becomes a design choice, an assault on will. Machinery designed to evoke a response, a structural coupling between man and machine. This design and excitation escaped the machine and moved into software.

We know our minds, we weaponise that and put it into our machines.

The power relationship between ourselves and our machines has changed… utterly. They stretch us out to meet their measure. If this were accident, it would be danger enough. But as there is intention, it is of a different order.

1 May 2017: clip of Mark on The Project about the ethics of Facebook; and the way Facebook was caught manipulating emotions of users. Facebook actually published a paper discussing how they were able to manipulate the way people felt going through their feed.

We are in a loop of knowing, doing, learning… knowing, doing, learning…

We have built a world where our machines couple with us, driving us to their specific ends. When machines are using that asymmetry to their advantage.

In this world, design choices made yesterday can change the shape of the world tomorrow.

Fortunately, we are weak. That’s our strength. We know our weaknesses! Our weaknesses are embedded in our myths. Lust, gluttony, greed… and yet still pride!

How do you get the genie back into the bottle?

When we recognise our weakness, less inspiring but part of us, when we exorcise the demon… we can acknowledge the temptations of power without going power mad. We can eat and be satisfied, we can be content with our own, we can even turn the other cheek. We can admit that these are all the hardest things to do.

We can admit our flaws. Maybe we can lean into that, because that admission provides protection. Where we trumpet our strength, we create things we cannot control. We create talismans to protect us from our demons.

Ponder our weaknesses, embrace imperfection, be human.

@mpesce

Peggy Rayzis – Graphql

Peggy Rayzis

Peggy’s team is responsible for making teams successful with GraphQL.

One thing that is sure is that GraphQL is here to stay. Adoption is growing and big names are trusting it in production, across industries. It’s not because it’s the new and shiny, it’s because it solves actual problems.

When building apps we have a huge challenge designing and building the data layer. We have tons of data to manage, and tons of clients to serve.

What is GraphQL? A specification for communicating about data. It’s unopinionated and very flexible.

(client: describe the data they need) ⟷ (GraphQL) ⟷ (Services: describe the data they have)

  1. With GraphQL you always start with your schema. It describes the data you have, essentially a set of types/interfaces (strongly typed, looks very like Typescript or Flow).
  2. Next you move on to writing queries, which describe the data you want. Get requests and listening to events.
  3. Resolvers are functions that transform queries into data.

For an example of this in practice, look up the GraphQL playground.

The thing that starts to really stand out about GraphQL is that you only get the content you request – request payloads are much smaller than traditional endpoints which usually send a great deal more information than the request really needed.

You always receive exactly what you ask for, nothing more or less. This is particularly valuable for people using mobiles. (Example where a REST endpoint is 35k, but the GraphQL equivalent was 1.3k)

You can use REST selectors to accomplish the same thing, but if you are doing a lot of work to make REST work like GraphQL… maybe just use GraphQL where you get it out of the box? Also you don’t have to rewrite all your REST APIs to start using GraphQL – they complement each other. You can layer GraphQL over your existing REST APIs and that’s a really good migration path for teams that need to change over incrementally.

Apollo is a platform for doing this layering. It’s a specific way to implement GraphQL. They provide client and server packages (open source) which help teams follow best practices. They support all the tools you care about.

Apollo Client allows declarative data fetching, it’s framework agnostic – you just put your query into an ES6 template literal. Apollo Server sits between your data and your client layers; and connects to Apollo Engine, their cloud service which registers your schema. (This service has some paid features for usage analytics etc.)

Apollo’s VSCode plugin will be giving realtime metrics on query performance at author time! This helps address the concern many teams have about the potential performance impacts when non-data developers start hitting the data layer.

BETTER It’s simpler! Simpler to write, easier to get rid of when you don’t need it.

FASTER GraphQL lets you ship code faster by writing less code. State management is hard and has a lot of code to write and keep track of. Apollo handles lots of concerns like caching (both local and remote); and generally just lets you delete a lot of code. Apollo cache becomes the single source of truth.

STRONGER GraphQL makes your teams stronger by helping product teams collaborate more effectively… with schema-driven development. Once you agree on a schema, you have a contract both the frontend and backend can use. Frontend can be built against schema-compliant mock data; while the backend team works on providing the production data layer. Apollo CLI also gives schema validation checks that help you evaluate the impact of changes before you merge; and deprecate fields gracefully as your API evolves over time.

What about the pitfalls? GraphQL is not a silver bullet.

Its extreme flexibility makes it easy to do the wrong thing, eg. n+1 problems where a query hits the same data source multiple times. Apollo Server handles this by adding data sources that be cached.

Another issue is security – because queries can have unlimited depth and complexity, which is bad when devs do it and REALLY bad if a bad actor is doing it. Apollo operation registry can lock the system down to allowed queries – that limits what anyone can do if they get in.

How do you get started with GraphQL? Demo time!

(full walk through of building an app with GraphQL)

@peggyrayzis

Charlie Gerard – Machine learning for frontend developers

Charlie Gerard

Charlie points out she is not an expert in ML, but to remember that if she can learn enough to demo just tinkering in her own time… you can learn it too!

...

What is ML? Using statistical techniques to train code. For example a spam filter in the old style would be an epic IF statement; but a ML solution takes a model trained with example data and tests new data against it.

Types of algorithms:

  • Supervised learning
  • Unsuperised learning
  • Reinforcement learning

Supervised: create a predictive model based on a set of features and labels (inputs and outputs).

  • Labels – the name of how you would classify each entry ('dog’, 'cat’)
  • Features – characteristics of the entries in your datast ('dogs are more friendly’, 'cats have whiskers’)
  • Predictive model – mathematical representation of of the outcome of your training (how would you determine if the new entry is a dog or a cat?)

Basically it’s maths trying to understand the data you are giving it.

Example: predicting the price of a house. You can feed data like size, features, location into the model.

Classification vs regression – classification is dog vs cat, regression is a continuous response like the price of a house.

...

Unsupervised learning just uses characteristics.

(I was interrupted for a moment here so the notes are incomplete, sorry!)

Neural network – Charlie provided a link to a video, it’s a topic to itself.

Choosing the right algorithm:

  • What are you trying to do?
  • What is your dataset made of?

ML is more of an art than a science. You will really never stop at your first prediction, you will need to test and refine… it could be your data, it could be your params, it could be the wrong algorithm.

...

Applications of ML

  • Home automation – example of a system that watches a person closing their book; and turns out the light when they do
  • Art – we recently had an artwork created by a neural network sold for $400k, using code the sellers didn’t write… and it challenged the definition of art!
  • OCR – there are datasets available online. This is often how people get started, because you can be so certain of the results.
  • Accessibility
    • if speech interfaces are the future, what about people who can’t speak? People have created solutions to have devices like Alexa understand sign language.
    • Sarah Drasner has created a cool demo of a system to autogenerate ALT text.

So why do all this in JavaScript? Data scientists will object that there are better languages!

  • easier learning curve makes it more accessible to more people
  • big ecosystem, lots of modules you can use
  • why not?!

What you can do in the browser:

  • Import an existing pre-trained model
  • Retrain an imported model (transfer learning)
  • Define, train and run models entirely in browser

Tools – tensorflow.js, keras.js, ML5, MagentaJS (music)...

Demos!

The Willy Detector
Charlie had to create something that allowed people to draw on a canvas, which meant she needed to stop people drawing willies. She had to train it with hand-drawn willies, and also hand-drawn things that were not willies (from Google Quickdraw doodles). The model only has 40 examples of willies so it’s not very accurate. Then the model needed to be trained at different sizes; and you need 80% for training and 20% of your dataset for testing. Process – CNN useing Keras… training, then paramater tuning, prediction. The code in JS is surprisingly short.

Teachable Keyboard
Charlie was able to quickly train the camera to recognise left, right and enter based on the position of her head in the field of view; which meant she could type on a keyboard just by moving her head.
This one works by importing a pre-trained module (mobilenet), uses KNN classifer algorithm, define the number of classes (how many gestures), feed the examples into the module, then you can run predict which returns left/right/enter/neutral.

Face Pong
(playing pong by jumping up and down in front of the webcam) Taken directly from ML5 example using mobilenet.

...

Limits

  • you need a lot of data, unless you have a big pre-trained model
  • takes a lot of time to train your own model
  • think about the mobile experience – this code will chug on lower-powered processors
  • liability – some models are black boxes, you don’t really know what’s happening and how they work. So if you get sued over it you won’t even know how or why it did what it did.
  • bias and ethics – algorithms aren’t biased, we are. If you feed sexist data into an algorithm, you’ll get sexist results. A simple example is a translation tool which assigned gender-stereotyped jobs to men and women, and negative emotions to women rather than men.

How to get started

  • Start with ML5.js as they explain things so well
  • Start small
  • Follow a basic example – MNIST handwritten character recognition
  • try a few different classification algorithms
  • try to replicate a project – doesn’t matter if it has been done before, just do it to learn

Tips

  • Avoid training your model in the browser unless you have a really critical reason to do so
  • Retrain your model regularly (or your predictions will become wrong)
  • Be careful of overfitting (this is when you model gets too used to the training set – if the accuracy hits 1 it is probably wrong)
  • Think about mobile
  • Check quality of training data (a lot of bad data will create a bad result – beware the quality of open source content, if you don’t read and clean your data you will get crazy results)

Ideas

  • games
  • accessibility tools
  • design tools (font pairing, colours…)
  • OCR
  • sentiment recognition (eg. filtering nasty comments)
  • fraud detection
  • ...so much more!

@devdevcharlie | slides and links for Charlie’s talk

Joe Toscano – Speaking to machines

Joe Toscano

Why is conversation the next step in human/computer interaction?

If you think of a short history of HCI, we started from the true primitive – binary code. We moved along to command line code, which was better but still not mainstream-accessible. It was GUIs and point-and-click that really made computers accessible to the average person. Next came touch and gesture on mobiles and tablets.

The next step is conversation and voice. It’s the first time in computing history that the machine is learning our language, instead of the other way around. Of course that means we need to really understand language.

  • Starting with a letter: a letter is a symbol that has a defined meaning, based on the collective agreement of a language community. Once a human learns a letter, we can recognise that pattern even if the typeface changes.
  • Words: a group of letters that the majority of people in a language community agree how to pronounce.
  • Sentences: combinations of words… this is where machines really struggle, because sentences have phrasing, context, slang, all kinds of nuance that computers struggle to understand.

There are 46.2 quadrillion ways to create a five-word sentence.

Personifying conversation is another challenge. Bots have personalities – even choosing for it to have 'no personality’ is a choice and a form of personality. Humans will attribute personality to everything around us. It’s innate.

Defining voice is the first step of defining personality. You can use pitch, range, volume, speed in audio; in text and audio you have word choice, content choice, punctuation and grammar.

We can define personalities and know where people are from based on words they use – the choice of words between coke, pop and soda will tell you roughly where an American grew up. Women are more polite than men.

Character development comes next. Look to popular culture – radio and podcast hosts define a personality with nothing more than voice/sound. TV does it too.

Just as TV set cultural norms, conversational interfaces will play a huge role in the way children grow up. Kids are growing up to be more demanding. Could there be a link to using conversational interfaces?

Batman is a great character. Back story, quotes, voice… all highly recognisable.

Designing conversations…

  1. initiate
  2. listen
  3. respond

Initiating isn’t too hard at the moment – 'hey siri’, 'hey google’ – but it will get trickier, where the device will just be listening and you’ll speak to it in context.

One odd impact of voice is that character-based names don’t work. Brands which use tricky spelling don’t work when they’re read out, they just sound like 'tumbler’ and 'net flicks’.

Another problem is you may need a lot of information to do something like book a flight. People don’t speak the way the query needs to be constructed. In reality you have to go back and forward to clarify things, to get details and prompt for more information.

Responding has to be considered as well: quantity, relevance and clarity. Don’t give us a five minute monologue.

(Notes truncated, sorry! This was a great talk, but I had to stop to get ready, as I was in the next spot.)

Ben Buchanan – Things Designers and Developers Should Know

Interesting question! What I try to give is some sense of what it was like to be there in the audience, which I can’t truly know in this case. Perhaps you can get a sense from things people tweeted during the talk, particularly the threads by Georgie and Allison:

Slides include links at the end:

Allison Ravenhall – What WCAG 2.1 means for designers

Allison Ravenhall

WCAG is the Web Content Accessibility Guidelines. We’ve been working to 2.0 since 2008 and in June 2018 we got …. a point release. Yay! WCAG 2.1 adds 17 new success criteria over 2.0. It’s still unreadable, we’ve just added more…

Allison will run through ten of these new checkpoints.

“Define the data types of the form fields you use to collect personal information”
This means we need to have an autocomplete attribute, so the right stuff gets filled in. It’s not just convenient for all of us, it’s a massive win for people with limited mobility.

“Design responsive layouts”
...surely you’re already doing this?! But for accessibility your design should cope when a user zooms in by 400%. That’s a pretty big challenge, particularly when you realise you want to avoid scrollbars.

“Make keyboard shortcuts configurable”
Lots of apps set up their own shortcuts, but this seriously impacts people who use assistive technology. Let people switch them off.

“Define simple gestures”
This is the first version of WCAG to address touch devices. People with dexterity limits have trouble with complex gestures, including things people often take for granted like pinch-zoom. This is why Google Maps still has a +/- to go along with the touch gestures.

“Start element labels with contextual labels”
Basically make sure controls are differentiated. This needs to be a single piece of content. There are some odd tricks to the way this works so be sure to test across different tools like screenreaders and voice controls.

“Provide alternatives to motion functions”
As we get more motion-heavy interactions (think Nintendo Switch) this becomes more important. Zelda doesn’t give you an alternative to tilting the device to solve a puzzle; Mario Kart does give alternative controls! Be like Mario. The only exception is when motion is literally the only thing the interaction does, like a dance game.

“Don’t make users read sideways (orientation)”
Respect the orientation settings of an application. Some people mount devices in a stand, which means they can’t easily switch orientation. People have set orientation for a reason!

“Colour”
We already have a requirement for 3:1 contrast for headings and 4.5:1 for text. New:
element outlines, like form inputs and buttons 3:1
icons and graphics 3:1
state styles like hover, focus, error, selected 3:1
Disabled state is an exception – they can be pale, because making them have higher contrast makes them look interactive..!

“Make interactive things big”
44×44 css pixels is the minimum size for something you interact with. Make touch targets big enough to hit.
Exceptions: if there’s an equivalent that’s big (ie. it’s a duplicate control), inline line text, browser-controlled elements, or if the size of the thing is critical to work.

“Tell users in advance about timeouts”
Many people can’t fill out forms fast enough for your timeout. This includes people with anxiety triggered by time limits and deadlines. Don’t spring it on them with 30 seconds to go. Tell people as early as possible that a time limit exists.

That’s ten… you’ve learned over half of the new requirements!

@ravenally

Maria Giudice – Changemakers

Maria Giudice

Designers! We have finally arrived! We are now in great demand. Over the past ten years, design agencies have been acquired by big companies at a great rate. We now have a seat at the table, at the highest leadership levels. We no longer have to justify our value to the business. Design-driven companies outperform their competitors. Design is good for business!

Maria went to Autodesk to help them transition from old school business to design-driven culture. The company was 35 years old and had over 400 designers, but Maria was the first designer to enter at a senior leadership level. She perhaps under-estimated how big a task organisation change is at such a large company.

Changemakers

  • see patterns around them
  • identify the problems
  • organise fluid teams
  • lead collective action
  • continually adapt

(definition by Bill Drayton, founder of Ashoka)

As a changemaker where do you begin? Treat every problem like a design problem; and start with people. She went on a listening tour, visiting all the offices. She hung out with the teams (everyone at every level) and asked five questions.

  1. tell me your story
  2. why did you choose to work here
  3. what’s keeping you up at night
  4. what are your hopes and dreams
  5. how can i help you?

The same problems kept coming up:

  • engineering-focused culture focused on execution
  • no cohesive design community
  • imbalance of power on product teams
  • fragmented access to customers and research
  • quantity of features over quality of experience

Familiar problems, but what to do about them?

Silos kill innovation! They create organisations of efficiency, but they create fiefdoms, self-interested parties. Many companies even intentionally set them to compete. Silos are like mob bosses, they defend their territory and make people stay in their own lane. The end result is maintaining the status quo, which is death to a changemaker.

So the first order of business: bust the silos. Find the coalition of the willing who will support your mission. Create safety in numbers.

For autodesk Maria settled on four guiding principles:

  • ship quality
  • connect experiences
  • focus on customers
  • build community

A key step was organising an internal design conference. A big challenge for someone new, who has never organised an event that big! This meant she had to find the coalition of the willing very quickly, to build the volunteer army required to make it happen. It was a massive shift for the company to begin celebrating design in such a way.

When you join a company as a changemaker, you are optimistic and imagine it will be a clear path to success… but in reality there are very big ups and downs. Failure is inevitable. It sucks. It hurts. It takes time to recover. But it is necessary! If you haven’t failed at anything you probably haven’t taken enough risks.

Many people quit when they hit the big lows. But you have to persist. Bouncing back from failure makes you stronger.

Lessons from the battlefield

  1. Build a coalition of the willing
  2. Executive support is required – continued evangelism from enlightened leaders must be there
  3. Align your work to customer needs and business goals – quantify progress as much as possible
  4. Get shit done – think big, but execute in small chunks. Vision without execution is hallucination!
  5. Make your work visible and memorable – overcommunicate and be transparent
  6. Celebrate and give credit – be inclusive, make it their idea. Share your success by giving it away. Reinforce the fact their idea was brilliant. Create celebration rituals.
  7. You can’t win them all – give up perfection, embrace the art of compromise. Sometimes we have to let things go. Instigate the 'fucks given’ scale. Everyone has ten fucks to give, so how many of those are you going to spend right now?
  8. Stay true to yourself – authenticity generates respect and trust

Change is hard, uncomfortable and messy. In some cases it’s not worth the fight. But if you think the change is worth fighting for, then fight!

@mguidice

Day two

Oliver Reichenstein – Forming thoughts and actions

WDS18 Day 2

(A few quotes unattributed as I couldn’t see the cite from my particular seat)

This talk is about…

  1. ethics as a trend
  2. ethics as a bridge
  3. shaping action
  4. forming thought
  5. connecting the dots between design and philosophy

Ethics has been coming up a lot in this industry. Mark Zuckerberg said some pretty stupid things about not taking down holocaust denial posts from Facebook… Apple’s ethics have been in the spotlight too, having launched the iphone, then the ipad, then the iwatch to enslave us…

We believe that privacy is a fundamental human right. – Tim Cook

The UN believes that too, not just Apple.

Then you discover that Salesforce is the biggest employer in the bay area… it’s not actually Apple!

What really got Oliver worried is when ethics was included in a list of trends. It was only #9 so not too bad, but give it a year and maybe it’ll be the new blockchain.

He never thought someone could make money with ethics… but now people are predicting that business consultants, book keepers and IBM will stop selling design and sell ethics instead. Unicorn has become a symbol for money these days!

What is the difference between morals and ethics anyways? – Cennyd Bowles, Future Ethics

This question bothered Oliver as it went on to broadly lump the two together, which is bad.

When we look at the roots of the words it makes sense…

Morals: latin “mores” (what are we used to, what is allowed, what we accept)
Ethics: greek “ethos” (custom, norms, traditions, character)

...so the words are similar. And ethics is often called 'moral philosophy’. But we deal with many other words that seem similar, but are different.

What is the difference between dude and mate anyway? They have a similar meaning too…

Different people, different context and different use makes the words different, but you have to really dive into it to work that out.

Ethics are often taught formally, by experts… but morals are everywhere, by everyone. They have a very different use.

Ethics makes you think and ask questions of yourself. Morals give you answers and are mostly directed at other people.

You can discuss ethics at a very high level and still be an arsehole. You shouldn’t, but it’s possible! But if you’re moralising to people and you’re an arsehole, that’s a different story…

Morals are emotional but ethics try to contain emotion in a system. Ethics is a philosophical term, and ethics ultimately don’t know; they don’t judge. You can say 'Facebook sucks’ but it’s not an ethical statement.

So what’s the use of ethics then?

Good design makes a product understandable… – Dieter Rams

From a forthcoming documentary he also says:

The times of thoughtless design for thoughtless consumption are over. – Dieter Rams

Much as there’s an element of literally old man shouting at cloud, there’s definitely an element of thoughtlessness in much of what’s happened until now.

Rams thinks of things and shapes them into real products. Turns thoughts into things. And we use these things. Because we use these things, design shapes action.

What does it mean when we use something? We see it, we think about using it, then use it… via its interface.

Reference: book, Moral Interfaces by Jef Raskin

The interface is how we achieve tasks with a product. – Jef Raskin

This is a powerful statement when you consider the interface as a how not a what.

[The interface is] what you do and how it responds. – Jef Raskin

There are many axes to think about all this.. Interfaces respond to a need, there are expectations, perceptions…

When you use a really nicely designed product, you feel a connection with the designer that put their hard work into it, it’s really nice. But when it goes wrong we also have a bad experience. The connection doesn’t only happen for nice products.

Something philosophers could learn from designers:

  1. interface, don’t preach (Oliver notes he’s preaching now..).
  2. don’t speculate
  3. engage in dialog

There’s a laziness to philosophy, once it’s written down it’s done and they don’t really care if others don’t understand it. Which would be terrible with design! Speculation is also a dangerous thing if people don’t understand it.

What can designers learn from philosophers?

It isn’t too hard to get into philosophy, wikipedia does in fact give a pretty good overview. Don’t dive straight into the hardest, weirdest stuff though.

Slide: As designers we work on interfaces. And through them we premeditate and predefine action. ... That’s ethics, not morals, right there mate!

Plato formed things into thought, following Socrates for 20 years… flipping this around from thought into things.

This is the original philosophical mindfuck:

World ⟷ Mind

Is the world in our mind, or is our mind in the world?

'Idea’ used to mean 'form’, from the greek 'eidos’. Ideas are shapes.

There are three big ideas, according to Plato:

  1. goodness
  2. beauty
  3. justice

These ideas are the same. What is good is also beautiful, there is more than simple aesthetic pleasure in a really great design. And justice is beautiful too. The reality of justice billionaires can buy is awful, but the pure idea of it is beautiful.

There is a connection between ethics and aesthetics.

A lot happened between Plato and Kant… not going to explain it all…

Kant formed thought into structured thought. He wanted to be the Newton of philosophy. Newton worked out how the world worked physically, Kant wanted to do the same with philosophy. In reality he did a lot of it in a rush (he believed he was going mad and had to write everything before it happened), leading to some sloppy writing.

Kant stated a variation on the golden rule of 'do unto others’, instead saying 'do as if that action would become the universal law’. He was trying to get to the underlying reasoning behind decisions, the spirit and intention.

If you want to act ethically, it’s not a matter of your heart. If you follow your heart you might fall into traps and do terrible things. To do what’s right we have to follow what we know, to switch off the heart. In order to be free, we need to first guarantee there is peace that allows freedom. Without law there is no freedom, which would be very difficult to explain to people in the White House these days. We have to accept some duties along with freedom.

If you see someone who needs help, your knowledge of ethics creates a duty to help them. Action needs freedom, and freedom needs duty. Duty is good.

“Never lie” is an ethical principle that is really difficult to argue against. People can argue there are situations where you could lie to protect someone from evil… but if nobody could lie, the big evils would be difficult to perpetrate in the first place.

How does it work that when we do good things, something magical happens? It’s a sort of universal magic, that we struggle to explain. Kant did go on to suggest there must be a god bringing all of this together.

The magic of experience is something we can use as designers. It is everybody’s duty to make people free. We can ask not just 'is this beautiful?’ but 'is this good?’.

If we ask ourselves if what we do makes people free, rather than encage them, that is good.

Philosophers form thought by observing the inner and outer world, and shaping emotion into language.

Designers shape thought into action.

Both can learn from each other.

@reichenstein

Cyd Harrell – Metaphors in UX Research and Analysis: A Secret Superpower

WDS18 Day 2

User research is the most powerful and accessible practice in design. Everything we do in the field is an advanced application of a basic human capability.

It’s crazy. It’s creepy. It’s like I agreed to coffee with this company and then suddenly they’re proposing marriage. – feedback in user research

While this user could have just said “It makes me uncomfortable” the participant’s metaphor makes the feedback far more powerful. It explained the company was presuming a relationship they had not earned, and people did not want them to earn it anyway.

It’s like a wall in my face

The most-tearful research Cyd ever did was for an ancestry research site, that put up a paywall just before showing people the results of their research. They had done the work of investigation and were about to find our what their ancestor looked like, only to find the paywall demanding money first. People were really emotional, literally crying. The paywall…....felt like a wall. Granted that the company needs to get paid to keep operating, you can’t just take it away. But they could then explore the wall metaphor – what kind of wall should this be? What should the experience be?

The essence of metaphor is understanding and experiencing one kind of thing in terms of another. – George Lakoff, Metaphors we live by

Metaphor works a lot like colour – we may not all see the same thing when we see something “red”. But we can all agree the thing is red.

Travel poster for going on a grand tour to Mars Travel poster advertising the Cloud 9 Observatory on Venus

(reference: NASA created posters in the style of travel/tourism posters, about the places we could go in space)

A really common metaphor is “user journey”, although do we really think about the full experience of travelling somewhere? When you travel you change. Do we maybe think user commute, user trip, user jaunt… what kind of 'journey’ are they on and what expectations do they have around that?

This is just an errand for me. I don’t need a steed and a herald.

Qualitative transcripts are full of metaphor. You go and do research but it’s daunting to make sense of it all. We use tools like failure rates, conversion rates and other analytics.

Cyd actually feels metaphor is a more useful and valid tool than empathy. Can we really, truly empathise with people from wildly different socio-economic backgrounds? Often… no, and it’s arrogant to suggest we can. But we can use metaphor to understand and explore across boundaries.

Reference: book, Thinking Fast And Slow

The book talks about two thinking modes, the fast System 1 thinking that draws connections almost instantly; and System 2 where it is slowly and deliberately explored.

Example: a line from a poem is very hard to turn into data. But the metaphor is powerful.

In a very big study of how people consume news, they noticed the word “gem” kept coming up. Not just the term but the way people were using it. Gems are precious, high value. In folklore gems are hoarded, displayed as signs of wealth and given as important gifts. The team looked at whether those folkloric behaviours were being displayed… and they were! People were hoarding, displaying and gifting pieces of news.

This is a messy process, but metaphor helped researchers both identify and explain the ideas coming from the research. Keywords like 'anchor’ and 'sail’ led to using images of boats, where previously there’d been broad but separate concepts of 'heavy’ (anchor) and 'light’ (sail, take me somewhere).

Going back to the coffee/marriage comments, exploring the idea clearly they didn’t mean 'coffee’ as a drink; they meant coffee as the safe first date.

Good prompt question: Can you say that another way? This may lead to the metaphor that unlocks it.

Millers Law: In order to understand what another person is saying, you must assume it is true and try to imagine what it is true of.

Can we do more to set ourselves up to use metaphor in research? Of course.

Grounded Theory (book: Constructing Grounded Theory)

Look for metaphors and metaphor-ish analogies that spark your interest. This includes 'dead metaphors’ that aren’t in general use any more. Metaphor is really accessible to non-design roles that are collaborating in the process.

Metaphors to look for, or even bring up

  • love, sex and friendship – what kind of attraction does a participant have to what you’re researching?
  • food and shelter – what kind of meal, or house, equates to their wishes?
  • status and competition – are people trying to win something, or be the most outrageous
  • places – where could the experience they’re describing be ordinary?
  • animals – hat creature show similar behaviour

Tools… use spreadsheets to trawl your transcripts for key words like 'wall’.

Bolder metaphor can be easier.

  • victory over winning
  • madness over rule-bending
  • etc

...but it has to work when you dial it back down to the less dramatic version.

The NASA space travel posters are easy to understand. We aren’t 'taming the red planet’ we’re taking a tour there. That required taming, but it’s not the experience that people dream of.

How do you tell if it fits? Good metaphors fit, enhance the conversation, form connections. Wrong metaphors feel itchy and bullshit.

slide: the bicycle of lifelong learning, a cautionary example of trying to force metaphor.

Two adventures

How do I get business people to come along into research sessions?

Both the Wizard of Oz and Charlie and Chocolate Factory were adventures… Dorothy and Charlie had exciting, dangerous adventures. But at the end for Dorothy it was all an illusion, leaving her to get back to reality as if it had never happened; but for Charlie, everything ended as it had been promised. Even the people who broke the rules went home with truckloads of chocolate.

If we’re going to take people along on a metaphorical adventure, you should tell them. Don’t pick them up like a cyclone and dump them in an unfamiliar place. Be real and keep your promises. Explain that you may not get the right answer the first time.

Invite your team along. Show them what you’re doing, make the rules clear, and send them home with gifts. Give them real things to take back to their work.

Work boldly in the world of colour and connection.

@cydharrell | slides – Metaphor and Synthesis with speaker notes

Holger Bartel – The Untold Benefits of Ethical Design

WDS18 Day 2

Holger does a lot of client work; and that means you usually have budget restrictions. He wanted to work on something where they were free to put ideals into it; to build it the way they wanted to. So he got together with some like minded people and built Colloq.io, a conference platform.

Some ideals…

  • Build a “better” product
  • User interests & benefits
  • Challenge the status quo about how products are built
  • Put ethics at the core of everything they do

When Holger speaks about design he means the broad discipline, not just visual or interface design.

Ethical design: design created with the intent to do good.

Isn’t all design done with the intent do good? Even design with good intent can still go wrong.

We spend a lot of time thinking about tooling, tech and frameworks; but how much time do we spend thinking about the impact of what we’re building?

Are we making the world a better place? – it’s an easy thing to say, easy to claim, very common with startups.

Many products are simply part of surveillance capitalism, which is likely to end up violating human rights. Systems that make decisions about people using data can often cause harm.

Some products actively use dark patterns to push users into making decisions they didn’t want to make; or to stop them completing an action they’ve already decided to do. It’s fundamentally wrong.

Question to the room: how many people like going on holidays? Most people! Holger likes to travel without making all the bookings ahead of time, so he uses a lot of hotel booking systems on the road; and on his mobile. They are full of stress triggers, alerts that you are going to miss your booking, that others are already booking it, etc.

Human centred design is a powerful tool to do good work. But that means you have to consider a lot of factors, many outside UX. When designing we have a responsibility to the user.

Data breaches are out of control, breaches of less than 100m peoples data barely get mentioned. How much time do we spend thinking about collecting data, and how much time thinking about how to secure it? Should you collect it at all without a good reason? The data you don’t have can’t be leaked, lost or stolen.

Web performance is really important. 8meg hero images? Really? That could mean someone simply can’t get to checkout in your system, because they’re on a slow connection.

The Vivino application has a nice way of handling a slow connection – where it 'admits’ it’s going to take a long time and suggests you go do something else and it will notify when the results arrive.

Rethinking the approach

The internet is still very young. We are still basically experimenting. It’s important to try things even if they fail.

We take things for granted. We have cool things like modern electric cars. (walking through the history of cars…) In terms of evolution, the internet is up to the Model T Ford. It’s another 40 years before the first car with seatbelts; and another decade after that before the first seat belt law (in Australia).

So the internet is still very young. Should we be adjusting the trajectory?

We have learned how to do stuff. After twenty years we can vertically centre things which is great. Now it’s time to start building in user centred things as part of the base.

We lots of technical fundamentals and standards, but nothing on the ethical and moral side.

web standards: html, css, js
web essentials: privacy, responsibility, security

These essentials should become the standard. Currently people tend to say things like accessibility are too hard, too expensive, or “we don’t have those users”. Do we ever say “we don’t have a budget for CSS”?

Coming back to Colloq, a big question was “how do you want to be treated (as a user)”... and what are you willing to do for it?

They built it to principles of accessibility, inclusivity, responsibility; built it to be progressively enhanced. Progressive enhancement saved them from a JS error, because the fallbacks kept everything working (it wasn’t even urgent to fix it!).

Security gave peace of mind to both users and developers. They handled all the standard OWASP stuff, honoured do-not-track, and so on. They integrated Have I Been Pwned so they could stop users setting a compromised password.

We need to get our values right.

By thinking about the users a bit better, we can provide a better experience including performance and security. It makes us better designers, developers and product owners. Follow your moral compass. Start with the small things and incrementally improve the experience.

Design with the intent to good. If that’s too much, simply design with the intent to do better. And do better every day.

@foobartel

Alex Danilo – Compiling for the web with web assembly

What is WASM? A new binary format for executable code. An instruction set for a stack-based virtual machine. The result – code that runs really fast.

WASM comes from a community group including people from all the major vendors. The spec only went on to a formal working group to be finalised. It has been shipped in all the modern browsers.

WASM is designed to be a compilation target for other languages. So you can write something like C++ and run it in the browser.

Some history – asm.js and (P)NaCl came before, then lessons learned from there were taken forward into WASM.

WASM is not actually web! There’s nothing tying it to web browser. ...and it’s not actually assembly either, it’s just a binary format.

WASM is not a replacement for JavaScript, it’s a complement to JavaScript. JS pulls in WASM modules and sends workloads off to it; and if you want to manipulate the DOM you still have to go through JavaScript.

What is it good for?

  • High performance code like video/CODECs, media editing, games.
  • Great for the huge amount of existing C/C++/Rust codebases out there – thousands of open source libraries that can be used in browser.
  • Existing C projects can be cross-compiled and shipped on the web from a single codebase. Autocad was put on the web this way.
  • Nodejs
  • Blockchain stuff in the browser

Very basic way to get started… install an SDK, then compile it with emscripten – you get two files, a .js file to load the module; and a .wasm file with your compiled code.

Every WASM binary is a module. WASM modules can only be accessed/used via their imports and exports. You can call it in JS:

module.exports.myfunction()

WASM and JS can be interleaved.

WASM is designed for efficient streaming, validation, compilation to native machine code.

Modules define functions, globals, imports, exports, memory requirements.

There are only 4 value types: 32 and 64 bit INT, and 32 and 64 bit FLOAT. Other types can be handled but they are not first class citizens.

Demos

  • Hourglass SVG which uses a C++ physics engine to determine how the grains of sand fall.
  • Live video processing – demo of an app that takes a live webcam feed and applies advanced filters on the fly.
  • New-generation video CODEC AV1, uses less bandwidth (big buck bunny is just 20megs)

Getting started

  • Go to webassembly.org
  • Install Emscripten
  • Run WASM modules in web workers, to offload heavy CPU work
  • Compile and link with `-O3`
  • Compile with `-Os` for the smallest file size

Debugging tips:

  • opening Chrome Dev Tools triggers an interpreter (stops JIT), so you can’t have them open if you are testing performance.
  • source map support coming in Chrome 71, debugging is currently pretty basic (console log)

Future of WASM, remembering it’s very much MVP at this point

  • SIMD instructions
  • fifth data type: 'anyref’ for opaque object handles
  • host bindings (direct to DOM)
  • GC (garbage collection)

@alexanderdanilo

Jared Wyles – Beyond Stringly Typed

WDS18 Day 2

People tend to associated types with C and Java, which is a shame. Jared works on one of the oldest and largest codebases on the planet – Photoshop. It has millions of lines of code, some of it persisting from the first version. Yet it only has six unit tests, essentially no tests. It just has types.

Let’s define what types are. Most people think this is roughly what types give you:

  • String
  • Bool
  • Int

...and it’s tempting to say you don’t need types because you can already work out what’s a string or number. But what is a Bool, really? It’s an enum of true and false.

(Jared will use Flow from here on..)

While most programmers use those three types, they usually combine them into classes.

It’s risky to use unmarked Bool values – will you remember that true is for is_admin, or are we at risk of accidentally creating admin users because we copy and pasted?

Another problematic pattern is that people write localised type checks inside functions, which get copied into other functions; and eventually they get out of sync. Or an error is thrown way outside a useful context.

We can avoid a lot of troubles with enums. Instead of ruling out the huge variation of bad values you can’t accept, you just define the specifics of the values you want – like 1 | 2 | 3 | 4 | 5 for a star rating.

Types and tests are best of friends. Types give you feedback quickly; and they reduce the cases you have to test for by preventing bad values getting passed in.

Typed code can be optimised much more efficiently.

Problem case: URLs in strings. They break so much!

With types (specific example using phantom types) you can define absolute and relative paths, so your code won’t try to combine two absolute paths – this is how you get the broken link www.google.comlinkyoujustclicked.com

Keep your untyped code as small as possible, use types to prevent impossible states from occurring in the first place. Write tests to cover user input you don’t control.

@rioter

Georgina Laidlaw – Word Design 101

What is “word design”? No, it’s not about WordArt™. It’s microcopy – text that appears in your product interfaces. Not marketing microcopy, product microcopy.

Three basic goals:

  1. help users get stuff done
  2. don’t confuse people (use plain language, be clear)
  3. work with visual elements (don’t repeat what the interface is already saying, although the words do still need to work on their own)

Example: a screen used to collect a mobile phone number from a user.

The process

  1. audience – who is using this? what is their context?
  2. context – where are they and what’s happening, how are they feeling when they get to the page
  3. component specifications
  4. messaging – what is the page saying
  5. refinement – craft the actual text and refine it

In the case of the mobile phone number screen, the user may be a first-time user setting up their account; or a returning user trying to recover their account. Very different contexts – the new user is probably impatient, the returning user is probably stressed or cranky. The page is made up of components like title, label+input, legals, button, opt-out.

Messaging is not writing – it’s not about the words, it’s about the message. What fundamental thing does this page need to say to users?

Link your phone to your account.
Then you’ll never be locked out.
(We’ll also use your number, by the way.)

The page actually has three things to say.

Refinement tools include house style guides, voice and tone guidelines, design guidelines, reading level calculators, IBM Globalisation guidelines (which helps write translatable English).

Biggest tip to take away: When you have a title and a button on a screen, you want the button to answer the title. It makes it clear whether you are going to be finished when you are done with this page.

The hardest part to sort out is the legals. The reading score for the average bit of legal text is quite high. Many people don’t have the required reading level to confidently process it – non-native English speakers, people with lower education levels, distracted or otherwise intellectually compromised, etc can struggle. We are all contextually compromised on a regular basis! When you change legals you often have to get the resulting text vetted, but you can reduce repetition without removing key meaning.

A useful principle: don’t write things you wouldn’t say.

@georginalaidlaw | tinyletter.com/MelbourneWordSchool

Caroline Sinders – The Experimental Future (The Future Is Going To Be Weird)

In the 50s and 60s, the future looked like the Jetsons. Cartoonish illustrations painted a world of mechanised home servants.

In the 80s and 90s the vision of the future became sci-fi dystopia. Think cyberpunk, Blade Runner, Akira. Everything became dark, gritty, cold and blue. While we might enjoy that as fiction, is it what we truly want?

But where are we now? Much of our current technology has gone a bit wrong, like in-home devices spontaneously laughing – very very creepy. Or the issues of sexist chatbots and AIs that almost immediately learn to be extreme-right racists. What future are we setting now?

Caroline’s dream is of a collaborative future.

What if we stopped making humanoid servants (with ML, AI, etc), and instead create machine agents that collaborate with us? Augmented intelligence, rather than artificial intelligence.

We should be skeptical about the ways people are using or planning to use data. We should expect products to be collecting the minimum amount of data they need to do what you want them to do.

IoT is creating a lot of data; and we need to think about the type of data it’s collecting and where it goes. There aren’t any widely accepted standards for IoT data or security.

What about IoT for good? There are networks that monitor floodwaters across communities. It collects very specific data that is very helpful. There are farming applications like monitors for livestock that track health and development of the animals.

So what about robots? As creepy as current robotics research is, we are going to use robots more in future. Not just impersonal machines for relatively industrial applications, but very personal things like robotic assistance animals.

Is it possible to use AI for good? For the public good and the civic good? How can we use AI for more than just predictions. What about applications where very dumb AI can be used, simple processing and monitoring. Can AI help with the by-products of humans, particularly in cities? Can AI help with things like sewage, rubbish, rats?

AI as a curatorial assistant. A system pairing photos produced the combination of a painting of a church; and a pile of guns. While a human may not have made the pairing because it’s so unlikely, the AI paid attention to direct similarities and not the context a human would have applied. Humans added the poetry and meaning of the paired images.

The future is gonna be weird

We need to stop rehashing the old visions of the future and create our own. We must critique where we are now, but what if we imagined warmer futures – where technology creates a better world and not a dark, blue dystopia. Let’s build what we can imagine.

@carolinesinders