Coding for Humans

Using Design, Psychology and Empathy to Make Code Better

Fel-low huMANS. Greetings. I travel far today to speak with you about you. You are humans, confirm? And one of developers, coders, programmers, misc?

“Damon Muma”

@thedamon

Sr Front End Developer, Digital Services, London Life

In the past I've put a picture of myself on my slides, but then I realized you can all just look at me to see what I look like. redundant

Interface and Experience Design

Coding for humans.when we code we create an interface between humans and computers, a bridge of communicationLow level - high level.Coding for humans means moving that language closer to how WE communicate. not english, or even spoken language, but also visual, auditory? cognition in general, communication.Perception, cognitionI want to talk about how that is beneficial and call out some specific examples of things we can do to further this goal.

Identifying your target market

A big part of UX and good design is understanding your users. The better you understand your users, the better a system you can build.

You and Your Team

But what do we know? Well... we're humans !(?)

Humans

Rational
Forthcoming
Super chill
Remember all things always

document.querySelectorAll(
  '.page-List_of_cognitive_biases .wikitable td > b:first-child'
).length

  //172

Humans

Occasionally rational
Make mistakes under stress
Easily confused, distracted
Can solve hella problems, though
We deserve to be happy *

I mainly bring this up because a lot of people say things like "well a person should do it THIS way". or "we built it this way".. I think our great strength as a species is to overcome our weaknesses. But we have to be aware of them. And decide that we can try to change things.

Developers

Special and unique
Deadlines
Tooling Fatigue
Much time debugging
Rarely old problems (at least to us) (ideally)

we get our own category. deadlines - back of the funnel. things change fast, they get better, but it's a lot to keep up with. we sink hours into a hard to find error. we do the things we know how to do without noticing.

Hell is other people

Jean-Paul Sartre

Hell is other people's code

anonymous Very specific domain knowledge, working together.

Requirements

So lets say we have a new project. Make a system where coders get more work done and are happier. We don't know anything about what it looks like yet because we're still in the strategy phase We did the user research part.

What are we gonna do?

Maximize productivity
Decrease frustration
Increase happiness
Decrease errors
Increase adaptability

Our Toolbox:

Process, Tooling, Code

There's 3 categories of things we have to Make Everything Better(tm): Process, Tooling, Code. They also stand in the "potentially make everything worse(tm) category

Process

Code review
Deployments
Documenting Requirements
Task management
Developer Development
Knowledge sharing

such a huge difficult beast. so huge and difficult in fact that I will largely ignore it. But you shouldn't.

Tooling

Linting
IDEs, your own tools
Minifiers, transpilers
Package management
Version control
Testing
Module Bundlers
Task runners
Virtual machines
Database migrations

big and should be bigger. tooling is in a way like metaprogramming. it takes work away from you. it's great. but difficult to get into. I'm going to touch on some of these as I talk about more specific techniques.

Code

Languages
Libraries
Legacy
Style
Syntax
Structure
etc.

pretty self explanatory. but note some of the code you wrote. some of the code other people wrote.

Intuitive code 🍼

See code

↕

time = n

Understand Code

See code

↕

time = n/10

Understand Code

2m: find function
2s: read function
8s: reread function, more carefully
3m: get distracted by email
2s: read function
20s: try to figure out what it's doing
3m: google/stack overflow!
3m: distracted by context switch

How much does that add up in one year? What will your ROIs look like afterwards?

User Interface Design

Discoverability
Clarity
Hierarchy of information
Context
Consistency
Error prevention and recovery

These are some of the most important tenets of user interface design. I ripped them off of Greg Neely. It's almost eerie how exactly they apply to code. It's really about thinking. and understanding humans and feelings. easily derailed, not always great at making decisions. Decision paralysis.

Noise Reduction 🎵

this is such an issue in our time. the damn UI designers and their sticky apps. Chantelle would probably have some great way to get some of the noise out of your life. I find the idea of noise very powerful.

Signal:Noise Ratio

Noisy

Incomprehensible algorithms
Exact Repetition
Near Repetition
"^$*\d{3}$*( |-)*\d{3}( |-)*\d{4}$"
Side effects
Inexplicable integers
syntax?

UI is a bridge btwn human language and computer language

var newList;
for (var i = list.length - 1; i >= 0; i -= 1) {
  newList[] = transform(list[i]);
}

  //vs

newlist = list.map(transform);

there's also a great lodash function:

"There are " + data.string1.numDogs + " dogs attacking my "
  + data.string1.target"

  //vs

const {numDogs, target} = data.string1;

`There are ${numDogs} dogs attacking my ${target}`

{
  numDogs: numDogs,
  target: target
}

  //same as

{numDogs, target}

extract repetitive and complex behaviours.hide them behind a nice function call.

Repetitive tasks prone to human error

Cognitive Load 🚚

This is sort of the cause of the other things like, noise, clarity, ease of understanding.

Your brain is a finite resource.

//..
  qok = foo()
  bar(qok)

  //...
  myThing = [bar + '', pseudo]

  } else {  //else what?
    doThis();
    return false;
  }
}

if (!requiredCondition) return false;

//...etc

function classMethodNumber45(name, context, arr, mode, elem, data, url, language){
   if {
     //...
     //...line 125
     if (data){
        url = url + "data"
        fetch(url).then(function(returnData){
          for (var i = returnData.length - 1; i >= 0; i -= 1) {
            // do some stuff here
          }
        });
     }
   } else if (){

   }
  //etc
  }

function length
number of parameters in a function
levels of indent
long files

these are all ESlintable, too.

J++

and the curious case of the nested loop

Cyclomatic complexity 😵

The number of unique paths through your application

ESLint rules 👌

complexity
max-depth
max-len
max-nested-callbacks
max-params
max-statements

Reduce the information necessary to understand a given statement 🏖

Can you say what it does it in a sentence?

Encapsulation & composition 🌍⭐️⭕️

Emily Weiss is doing an awesome talk right now about how to share these encapsulations with designers for User Interface development. Atomic design. that everything can be understood at its own level and other levels only care about the result. SRP

convention. style guides. airbnb eslint.

Clarity 🌞️

Naming things 😰

If you don’t know what a thing should be called, you cannot know what it is. If you don’t know what it is, you cannot sit down and write the code.

Drop hints

const isValid //> valid
const numFerrets || ferretCount //> ferret

//get, fetch, find, create

Use design patterns, carefully

formatter, adapter, service

Specific and Succinct

*watch for easily confused or vague words

Parsing

investmentProductCollectionincomeProductCollection

78% similarity

SavingsPlans, incomeProducts

Talk to people

if you call it what business calls it who calls it what the designers call it... that's good

Don't not name things

So what?

You are a user interface designer

you're a lot of other things, too. But I think it's really valuable to think in these terms.

Build habits

start slow. adopt some techniques. see if you can find what's stopping you (blockers). I switched to using webstorm bc i realized i was hesitant to create new files bc it was difficult to rename them and i wanted to skip that part where i was figuring out what to call them.

Your process is a design project

code is a user interface. keep iterating. introduce tooling. keep reviewing. you can't do it perfect and ship. but you can track what you want to do better next time. track the frustrations and the stuff that drives you up the wall. try things, evaluate them. not necessarily to quantify it, but. do you like it. why. why. why. (user research) talk about it with your team, but try to also be positive. celebrate improvements

Higher and higher

UI is how humans communicate with machines. the more successful it is, the more human it is. machines are getting better and better at the machine stuff. that shit is programmed. we have compilers and minifiers and all sorts of stuff. high level? take your code higher! we will be better off focusing on what humans are good at as machines become better and better at what they're good at.

Coding for Humans – Using Design, Psychology and Empathy to Make Code Better – “Damon Muma”

thedamon

Coding for Humans – Using Design, Psychology and Empathy to Make Code Better – “Damon Muma”

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();