Designing The Second Interface

Coleman Collins

ThoughtWorks Experience Design

@COLEMANICEWATER       #qconsf

I'm a designer

who looks at code a lot.

i'm also impatient.

Two Big Things I Learned
When Learning To Code:

1) It's Difficult!

2) There Are Humans On Both Ends Of This Thing.

Users are anyone who
uses a system.

This is an interface

this is also an interface

var uploadToImgur = function() {
  var imgDataURL = DOM.$saveImg.attr('src').replace(/^data:image\/(png|jpg);base64,/, '');
  $.ajax({
    method: 'POST',
    url: 'https://api.imgur.com/3/image',
    headers: {
      Authorization: 'Client-ID ' + imgur.clientId,
    },
    dataType: 'json',
    data: {
      image: imgDataURL,
      type: 'base64',
      title: 'made on make8bitart.com',
      description: 'made on make8bitart.com'
    },
    success: function(result) {

this is a talk about

interface design

this is a talk about

usability & UX

this is a talk about

clean code

Form Follows Function

Form Informs Function

An Interface is
like a joke

This is a function

parseHash = function() {
var hash = window.location.hash.slice(1),
slideNumberOrName = parseInt(hash, 10);
if (hash) {
if (slideNumberOrName) {
activateSlide(slideNumberOrName - 1);
} else {
deck.slides.forEach(function(slide, i) {
if (slide.getAttribute('data-bespoke-hash')) {
activateSlide(i);
}
});
}
}
},

form informs function

parseHash = function() {
  var hash = window.location.hash.slice(1),
    slideNumberOrName = parseInt(hash, 10);
    
  if (hash) {
    if (slideNumberOrName) {
      activateSlide(slideNumberOrName - 1);
    } else {
      deck.slides.forEach(function(slide, i) {
        if (slide.getAttribute('data-bespoke-hash')) {
          activateSlide(i);
        }
      });
    }
  }
},

Secondary Notation

parseHash = function() {
  var hash = window.location.hash.slice(1),
    slideNumberOrName = parseInt(hash, 10);
    
  if (hash) {
    if (slideNumberOrName) {
      activateSlide(slideNumberOrName - 1);
    } else {
      deck.slides.forEach(function(slide, i) {
        if (slide.getAttribute('data-bespoke-hash')) {
          activateSlide(i);
        }
      });
    }
  }
},

but Coleman, I don't
have an eye for this
kind of stuff

wHaTifYOUSAwafUnctIONNamedLiketHis = function() {
  // you would probably be furious
};

<div class="whatIfThisClassName"><div>
<div class="and_this_class_name"><div>
<div class="and-this-className"><div>
all appeared in the same template?

tabs
  versus
 spaces?

inconsistent indentation?
   seriously, how hard
   can horizontal 
   alignment be?

Typography

The selection and arrangement of type, with the
goal of enhancing readability, understandability,
and aesthetic appeal.

Interfaces Should
Be Consistent

Users should not have to wonder whether
different words, situations, or actions mean
the same thing. Follow platform conventions.

Heuristic 4, Nielsen's 10 Usability Heuristics for User Interface Design

What's the value
of consistency?

1) The Human Brain Is A Pattern Recognition Machine

2) The Human Brain Is A Pattern Recognition Machine

3) The Human Brain Is A Pattern Recognition Machine

4) And It Relies On Patterns To Reduce Cognitive Load

1 9 3 4 0 3 0 8 8 0 2 0 4 5 1 7 2 8 8 6
0 8 6 3 1 4 4 0 7 3 4 1 0 3 8 0 7 2 3 2
3 6 9 4 7 8 6 1 0 3 5 8 0 4 0 8 0 3 6 8
4 7 1 4 7 8 1 6 3 8 2 6 1 9 6 1 0 0 6 6
9 4 4 5 1 0 9 5 5 4 9 1 0 6 4 8 8 9 5 0
0 2 8 6 3 0 9 7 2 4 6 8 0 2 6 2 3 8 5 5

1 9 3 4 0 3 0 8 8 0 2 0 4 5 1 7 2 8 8 6
0 8 6 3 1 4 4 0 7 3 4 1 0 3 8 0 7 2 3 2
3 6 9 4 7 8 6 1 0 3 5 8 0 4 0 8 0 3 6 8
4 7 1 4 7 8 1 6 3 8 2 6 1 9 6 1 0 0 6 6
9 4 4 5 1 0 9 5 5 4 9 1 0 6 4 8 8 9 5 0
0 2 8 6 3 0 9 7 2 4 6 8 0 2 6 2 3 8 5 5

Visual Pattern
Recognition

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle
  while (0 !== currentIndex) {
    // Pick a remaining element
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

Interfaces Should
Employ Recognition
over Recall

Minimize the user's memory load by making objects,
actions, and options visible. The user should not
have to remember information from one part of
the [system] to another. Instructions for use of the
system should be visible or easily retrievable
whenever appropriate.

Heuristic 6, Nielsen's 10 Usability Heuristics for User Interface Design

Visual Pattern
Recognition

function recall() {
  return 'when does this string end? what if there\'s a bunch of \'escap
  ed\' single quotes in it? ' + 'I guess i'll have to pay attentio
  n for clues.'
};function recognition() {
  return 'this is a string because strings are green.' 
};

color can do more!

function example(varable) {
  // if comments looked like this
  // it would be harder to let them hang around
  // they'd only be used when necessary
}
          
(With regards to James Fisher)
https://medium.com/@MrJamesFisher/your-syntax-highlighter-is-wrong-6f83add748c9

Interfaces Should help
prevent errors

Even better than good error messages is a
careful design which prevents a problem
from occurring in the first place [...].

Heuristic 5, Nielsen's 10 Usability Heuristics for User Interface Design

Things That Look
the same but aren't

assignment != equivalency != math operators
but = 
has the same color as ==, !=, =<
has the same color as < + -
in coffeescript
the fat arrow =>
and the skinny arrow ->
share this color, too

Highlight deeper
code introspection

semantic
highlighting

semantic
highlighting

semantic
highlighting

But:

This is not
the place for
Fruit salad.

Interfaces Should
be Aesthetic
and Minimalist

[Interfaces] should not contain information which
is irrelevant or rarely needed. Every extra unit
of information in [an interface] competes with the
relevant units of information and diminishes their
relative visibility.

Heuristic 7, Nielsen's 10 Usability Heuristics for User Interface Design

Data-ink ratio

when everything
is highlighted

nothing is.

indentation

visually reflects
code structure

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

indentation
becomes
code structure

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

these are all
abstractions

this is all an
interface

and all Design
is design

the priniciples apply

Thanks

ccollins@thoughtworks.com

@colemanicewater

(and right here for questions)