How to change the world – Mike Monteiro

Below is a video and summary of a recent talk by Mike Monteiro. A transcript is available. N.B. NSFW language.

The world is bad because we made it this way. “The world is designed to work this way.”

When people talk about changing the world, ask: “How? For who?”
For all the excitement about Uber and AirBnB, the service economy is nothing new. “There’s nothing disruptive about rich people getting richer.”

How to change the world

  1. Get ignorant.
  2. Realise that the world as designed works in our favour. What if that wasn’t the case?
    The Veil of Ignorance is “The single most important political and ethical concept in a designer’s toolbox.”

  3. Look like the world.
  4. “Our diversity is our strength, and we’re idiots for not leveraging it.”
    If people have narrow life experience, you just get “white boys solving problems for white boys”.
    “They’ve never been harrassed, so it doesn’t even occur to them that that’s a problem you have to solve for.”
    Similarly with cabs refusing to stop, or being assaulted,

    “Empathy is not enough – we need inclusion.”
    The point isn’t that any particular experience or classification makes you a better designer. People are just better informed about themselves than they are about others.
    Our teams need to reflect the diversity of who we design for. It’s not just about race or gender, but experiences, needs, thinking, solutions.

  5. Design the right thing
  6. The AK47 is easy to use, easy to manufacture. But design is about more than this.
    “Nothing who’s primary purpose is to kill can be said to be designed well.”
    “Attempting to separate an object from its function, in order to appreciate it for purely aesthetic reasons, or to be impressed by its minimal elegance is a coward’s way of justifying the death they have brought into the world and the money with which they’re lining their pockets.”

    “Design is a trade done for money, but we have a choice about how we make that money.”
    “Your role as a designer is to leave the world in a better state than you found it.”
    “You are responsible for what you make.”

There are big design problems for us to solve

  • Global warming
  • The migrant crisis
  • Guns in the US

We’re lucky people – so we’re responsible for helping others who weren’t as lucky.
Change how we design and who designs.
Use your time on this world in the interest of making others free.

Testing two WordPress Gutenberg prototypes

I carried out three user testing sessions of two prototypes of the new editor for WordPress. Users were confident in their digital skills. Here are the results.

Key observations

  • The overall design approach is successful. The idea of thinking of content in blocks was easy to grasp, and the context-sensitive popup options were intelligible.
  • The function of the up and down arrows to the left of content blocks wasn’t immediately clear.
  • Users quickly worked out what the block-positioning arrows did, and were happy with this approach. To my surprise, no one tried to drag and drop blocks after finding out how to reposition blocks.
  • In 1.0 people weren’t sure what the S means – is it strikethrough or the option to remove a link? Perhaps we can use proximity to make this clearer – associating this options clearly with presentation controls (underline, italics) or functionality controls (hyperlinks).
  • Some users tried to drag and drop images. How will dragging and dropping work – within and between blocks?

Full notes of the testing sessions

First prototype

Tester 1

Prototype: “A beautiful thing about Apple…”

prototype of a new editor for wordpress

Clicks into a block and sees and instantly understands the alignment options.

Clicks on the ¶ symbol but it doesn’t do anything.
Expected it to be interactive as the mouse changed to a hand pointer, suggesting interactivity.

Clicks on the up arrow, but nothing happens. Wasn’t really sure what it would do.

Enters a line return to break up the paragraph of text, but isn’t able to do this.
Thought that the arrows up and down might allow the insertion of a line break.

Highlights text to make it bold and expects to have to use a keyboard shortcut as nothing was previously visible on the screen. But then notices the popup.
Comfortable with the options presented.

Heading and blockquote options don’t behave as expected. (Dismissed as a limitation of the prototype)

Clicks on the image. The up and down buttons don’t do anything.
Tries to click on the image icon but it doesn’t do anything.
“I don’t understand what the symbols are. I expected them to be interactive but they don’t do anything.”

Tester 2

Understands the split between code and visual editors.

Likes the context-specific editing as it keeps the screen more focused.

Tester 3

Understands the concept of HTML and editable preview.

Wonders how valuable constant HTML visibility is to the average content editor. Will they break things?

Second prototype

“1.0 Is The Loneliest Number”

An early prototype of the new wordpress gutenberg editor

Tester 1

Clicks on the heading text block.
Then clicks on the up arrow.
Then clicks down on it. “Ah, that’s interesting. So these up arrows change the order of the boxes”

User expected to be able to insert line breaks. (How do we want to handle line breaks within paragraph blocks? Do we permit them, meaning that we have big text blocks, or do we take line breaks as denoting the start of a new paragraph block? I’d prefer the latter but haven’t thought about all use cases.)

Clicks on the paragraph of text, and then clicks on the ¶ symbol.
Changes to blockquote style from paragraph style.
Understands that this allows him to apply style to the block.

Scrolls down the page and clicks on the plus sign at the bottom.

When asked what this is, says that it’s “a shortcut to functions that you use regularly.”
When asked: what would you expect to happen if you clicked on one of these items?
“It would create a new paragraph, image, heading, quote, etc, which you’d then populate with content.”

Tester 2

Clicks into the block and manipulates alignment options – working as expected.

Clicks down arrow and block responds as expected. Understands that the page is made up of blocks and that these can be repositioned.

Clicks on “+” and explains that this will add a new block. More options than expected: expected just image or text, so the extra options are “a nice surprise”.

Drags and drops an image into the content block. (Is this something we want to design for?)

Clicks on ¶ – and changes the text block type

Tester 3

Clicks into the text block.
“I wonder what the arrow does” Clicks on the down arrow and sees the block move down. Understands it fine.

Looks at alignment options. “Does that do the whole block? It does”

In general, understands the popup text formatting and link options.
Not sure what the popup “S” with strikethrough icon means.

Clicks on image and manipulates text flow options.

Clicks image icon, but “nothing here”. Expects caption controls.

Clicks on the “+” sign, and understands that this is for adding blocks. Wonders how lists will interact with paragraph blocks, and how we could set levels of header.

Easily understood the blocks concept. Wondered how well this would handle more complex page layouts.