Stop trying to paint the hallway through the letterbox: UX techniques that help teams help...

Stop trying to paint the hallway through

the letterbox!

UX techniques that help teams help themselves

Chris Atherton

@finiteattention

what do these 3 things

have in common?

Person

/Learn/People

:MassMarketGuide

:Place

:ProgrammeOfStudy

:CurricularTopic :Study Guide

/Learn/Guides

is taught in

is appropriate for

is a non-curricular

equivalent of:Assetmentions/is about

/Learn/Places

is a type of

:National Curriculum is part of

/Learn/Programmes

of Study

is a type of

/Learn/Events

:Event

is a type of

is a type of

is a participant in

occursin

is part of

is appropriate for

is aimed at

:TemporalEntity

has

/Learn/Subjects

is a type of

:Subject

:Nation

UK

is part of

:Regionis part of

is a notable place in

This goes down to the level of Regional granularity to allow for the (future?) possibility of

prioritising local content.

:MassMarketTopic

is a notable person in

is a notable person in

is appropriate for

is appropriate for

is appropriate for

is a type of

is appropriate for

has

is a notable event in

is a notableplace in

is part of

is part of

is part of

is anotableevent

inis a

topicalevent in

is a topical event in

is a topical person in

is a topical person in

mentions/is about mentions/is about

Mass-market topics can be triggered by topical PPEs, whereas Curricular Topics

cannot (assumption that any topical stuff in curriculum will

be editorially curated?)

:TemporalEntity

is concurrent with

is concurrent with

has

is a type of

is a type of

Country

is a type of

:Country

is a type of

:TemporalEntit

has the part

One crucial distinction between Curricular and Mass-

Market learning journeys is that Study Guides are

appropriate for Programmes of Study, whereas mass-market

Guides are not. Generally, curricular assets, guides, etc. may be appropriate for mass-

market consunption, but mass-market materials may

not be appropriate for curricular study,

is in

:Exam Board

has

:Qualification awards

isassessed

by

:Sub-Subject

is a subclass of

is part of

has the part

information

architecture

Gave up reading this article on how ad tech destroys the reading experience@guardian #ux

Mikkel Bo Schmidt@mibosc

mobile UI

http://www.durhamregion.com/news-story/4760314-scugog-veterinarian-checks-dairy-cows-to-see-if-babies-are-coming/

… animal husbandry ?!





tackling big problems

via a tiny viewport

to deal with complexity,

you first need to see it

— @benholliday, about 20 minutes ago

Ben actually summarised my entire talk in one sentence. I would only want to add “ditto re communicating it”.

a designer starts to

see the patterns

(— ibid)

As observers of people and wranglers of visual media, UXers are well placed to identify these behaviours

project

viewport

In response to a question I got afterwards, I see this more often than you might suppose.

1. stuck

htt

p:/

/sta

tic.g

uim

.co

.uk/s

ys-

imag

es/

Ed

ucati

on/P

ix/p

ictu

res/

20

11/7

/28/1

311

85845832

8/T

he-re

searc

hers

-cho

se-che-0

07.jpg

http://static.guim.co.uk/sys-images/Education/Pix/pictures/2011/7/28/1311858458328/The-researchers-chose-che-007.jpg




2. why? (maybe)

3. what we can do

1. stuck

htt

p:/

/sta

tic.g

uim

.co

.uk/s

ys-

imag

es/

Ed

ucati

on/P

ix/p

ictu

res/

20

11/7

/28/1

311

85845832

8/T

he-re

searc

hers

-cho

se-che-0

07.jpg





You’re starting a new

project. Do you …

a) open your computer

OR

b) open a new doc

(your computer is already open)okay, it’s a trick question

CO header

Services Trusted Third Parties

CO individual Role title?

Manage services and TTPs SEARCH WITHIN YOUR SERVICES

might be nicer to have in-page

search across all management pages

for all users

Anywheretown care home

Anywheretown adult daycare facility

Name Subscriber?

Subscriber

Not subscribed

Latest activity should CO be able to

change a service's "subscriber" status from

here, or remove the service entirely? (Maybe

not, or maybe for very select CO users only) How do those things currently

work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards

Add new service or TTP

Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2

Services and subscribersYou can find a complete listing of Care Opinion services and trusted third parties below. Click on a service or TTP to view the page associated with that body.

Mark/Unmark

Blogs?

If not here, need to work out where CO

will add/remove TTPs and services, and where they will (dis)associate TTPs

with services.

need action(s) to become available when boxes are

checked, e.g. Save, Export, etc.

CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



zoomed in

CO header

Subscribers Trusted Third Parties


Services and subscribers

Manage your services

You can find a complete listing of Care Opinion services and trusted third parties below. Click on a service or TTP to view the page associated with that body.

SEARCH WITHIN YOUR SERVICES

Local adult social care watchdog

Name should CO be able to add or remove a

TTO's services from here? How does

that currently work?


links to TTPs and services go to the respective single-

service pages

Latest activity

Published stories read

1 month ago 49

Published stories commented on

TTPstatus

12

Mark/Unmark

Blogs?

Rejected stories read

49

Rejected stories commented on

12

National adult social care body 1 month ago 49 12 49 12

Local authority, Town 1 month ago 49 12 49 12

Local authority, City 1 year ago 49 12 49 12

Local watchdog 1 month ago 49 12 49 12



CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header













service pages

Latest activity


1 month ago 49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







CO header













service pages

Latest activity


1 month ago 49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







CO header

SubscribersTrusted Third Parties







Nameshould CO be able to add or remove a TTO's services from

here? How does that currently work?



service pages

Latest activity


1 month ago49


TTPstatus

12

Mark/Unmark

Blogs?


49


12

National adult social care body1 month ago49124912

Local authority, Town1 month ago49124912

Local authority, City1 year ago49124912

Local watchdog1 month ago49124912

need action(s) to become available

when boxes are checked, e.g. Save,

Export, etc.

CO header

ServicesTrusted Third Parties


Manage services and TTPsSEARCH WITHIN YOUR SERVICES



for all users



NameSubscriber?

Subscriber

Not subscribed

Latest activityshould CO be able to



not, or maybe for very select CO users only) How

do those things currently work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



Export, etc.

CO header






for all users



NameSubscriber?

Subscriber

Not subscribed






Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



Export, etc.

CO header






for all users



NameSubscriber?

Subscriber

Not subscribed






Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



Export, etc.

CO header












service pages

Latest activity


1 month ago49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







Export, etc.

CO header












service pages

Latest activity


1 month ago49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







Export, etc.

zoomed out

htt

p:/

/ww

w.c

uri

osi

tysh

oppe.c

om

/wp-co

nte

nt/

uplo

ad

s/2

012

/09

/Who

leF

oo

ds_

Cheese

_main

1.jp

g

http://www.curiosityshoppe.com/wp-content/uploads/2012/09/WholeFoods_Cheese_main1.jpg




we know this stuff

for UX projects

sometimes we

forget it elsewhere

http

://gifm

ovie

.tum

blr.c

om

/po

st/70

77750

672

7/a

-ra

bbit-

runnin

g-in

-circ

les-

in-fro

nt-

of-

my-car

this is a gif; it animates. the bunny goes around and around.

http://gifmovie.tumblr.com/post/70777506727/a-rabbit-running-in-circles-in-front-of-my-car




This observation is over 100 years oldbut we still haven’t agreed on a solution

uxreactionsofficial.tumblr.comanother gif, supposedly indicating perfect flow in unison

uxreactionsofficial.tumblr.comalso a gif; much better summary of how

communication can look if you’re not careful

htt

p:/

/ww

w.e

dw

ard

tuft

e.c

om

/tuft

e/g

raphic

s/new

ET_d

isco

urs

eg

if.g

if

some people out there still make docs like this

http://www.edwardtufte.com/tufte/graphics/newET_discoursegif.gif





if not us,

our colleagues

very few people start out perfectly fluentin communicating complexity — I know I didn’t

2. why? (maybe)

habit

we are rewarded at work for regularly returning to our inboxes (and thus to our computer screens)

your workflow

every dayyou use software tools to make other software-y stuff, right?

work culture of

being at computer

work

work not

work?

to at least some people, ‘work’ means ‘computer’

opening a doc =

starting as close to

the end as possible*

(right?)

* Kurt Vonnegut only do this when you’re sure it’s the right medium for the story you are telling — so know your story first.

they don’t seem like

complicated tasks

…but they are

http://brucesterling.tumblr.com/post/110823669363/tragedy-is-when-i-cut-my-finger-comedy-is-when

if there’s one gif you look up, make it this one. Ouch. I hope he was okay.





things that trip us up:

you see what I did there

the single

dimensionscreen

document

64-page doc

in portrait

that we read

in landscape

list

seriously, why do we do this? I dislike ‘slideuments’, but at least a corporate slide-deck fits the viewing format.

not helping,

BTW

unless you just can’t get enough of that widescreen ‘letterbox’ experience

another gif — this one glitches about once per second obscuring the fact that a change is occuring in the pic.

change blindness

search YouTube for change blindness — our brains sorta reset and forget detail when there are brief discontinuities.

lost detail

lost detail

lost detail

unknown

unknown

unknown

all that exists

this is a Finding Nemo reference, but cognitively speaking it could also be seen as kind of a self-portrait

"Serial position" by Obli (talk) (Uploads) - Obli (talk) (Uploads). Licensed under CC BY-SA 3.0 via Wikipedia - https://en.wikipedia.org/wiki/File:Serial_position.png#/media/File:Serial_position.png

‘serial position curve’ from recalling a list of sequentially presented items.

Long TermMemory

Rehearsal

or Meaning

Short TermMemory

STM is a leaky bucket. Do something with the info or lose it forever (more or less). Meaning helps with encoding.

Rehearsed/Lacks

interference

Still in the leaky

bucket

My brief and incomplete explanation of why we see primacy and recency effects.

7 ± 2

Miller, 1956Miller, 1956: number of unrelated items you can hold in

working (short-term) memory. Often misapplied; still useful.

4 ± ?

Cowan, 2001Cowan, 2001. Sorry; it’s worse than we thought. It also varies between people, with context, type of task, etc.

fuzzy

OK

OKgreat

If all the information in a big piece of work is new to you and it seems discontinuous, good luck remembering it all.

what if

working memory

is a letterbox?

Or a throttle, if you prefer. NB: This is an idea rather than a scientifically proven thing.

attention

We. Are. So. Flaky.

… it’s really hard to

think about 50 things

freaking impossible

htt

p:/

/alienpapacy.t

um

blr

.co

m/p

ost

/9

85459

056

12/i

nit

iati

ng

-m

axi

mum

-o

verb

ird

http://alienpapacy.tumblr.com/post/98545905612/initiating-maximum-overbird




unevolved zoom UIs

http://brickellvision.com/wp-content/uploads/2014/10/eye-diagram

.jpg

We’ve had ages to evolve this. It’s amazing.

http://brickellvision.com/wp-content/uploads/2014/10/eye-diagram.jpg



‘zoom lens’ of

attention

Eriksen & St James (1986) Look it up if you’re interested — more than just a metaphor.

htt

p:/

/silve

rso

ra.t

um

blr

.co

m/p

ost

/7349

90

59

90

9/

dave

-fu

ck-o

ff-sh

aun-i-

am

-ta

kin

g-a-pic

ture

Zoomed all the way in.

http://fuckyeahvolcanoes.tumblr.com/post/113633681320/silversora-dave-fuck-off-shaun-i-am-taking-a




Zoomed all the way out

cells with a nucleusmammals

apes

humans

software+ UIs

our evolutionApes may be in their stone age … UIs are still amoebas.

Random mind-mapping software. You can see that there’s a real zoom issue: seeing the whole vs. seeing the details.

http

://ww

w.te

lepre

senceo

ptio

ns.c

om

/asse

ts_c/2

013

/01/vz-

8plu

s4_fro

nt2

.jpg

mechanical

eyes

The engineering of visualizers is amazing. But our eyes still win over mechanical versions, nearly every time.

http://www.telepresenceoptions.com/assets_c/2013/01/vz-8plus4_front2.jpg




To keep up with the eyes, zoom in UIs must be fast, frictionless, and unconscious of any effort at all. Ha ha.

The emergence of pinch-to-zoom has improved things a lot

zoomed inBut it’s still a bit haphazard using

pinch-to-zoom to go from this

zoomed out

…to this

our UIs for UI

kinda suck

cognitive load

This is a concept closely related to the stuff about working memory, begging the question of why I didn’t put it earlier.

intrinsic vs.

extrinsic

Intrinsic = difficulty inherent in understanding a given thing.Extrinsic = difficulty added by how thing is communicated

holding an idea

holding an idea

holding an idea

understanding

this new idea

For complex information, high extrinsic load means there’s less working memory left for understanding the idea

t

http://hilarioushumorfromouterspace.tumblr.com/post/112655656484

I feel like this before coffee sometimes



Infinite scrolling came and went … there’s high cognitive load in retracing one’s steps. Pagination is information too.

3. what we can do

how do we avoid this?

use big surfacesInfinite canvas for your working memory, and for zoom.

CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



zoomed in

Instead of having to compromising between this …

CO header













service pages

Latest activity


1 month ago 49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header






for all users



Name Subscriber?

Subscriber

Not subscribed





work?

Stories submitted

4 days ago

1 week ago

49

3

Serviceawards


Storiespublished

Storiesrejected

Servicestatus

38

0

11

3

2


Mark/Unmark

Blogs?



with services.



CO header













service pages

Latest activity


1 month ago 49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







CO header













service pages

Latest activity


1 month ago 49


TTPstatus

12

Mark/Unmark

Blogs?


49


12







zoomed out

… and this …

use a frictionless,

zoomable medium

…put it on a large surface where you can zoom between both without thinking about it (using your eyes and/or legs)

yes, zoomableYou get zero points for using 10-point font.

Writing the entire project taxonomy on a whiteboard helped us work on just one part and see how it fit with the whole

this vs. 64-page doc

the client read the strategy document but for them and us it didn’t fully click until we showed the whole thing on 1 page

show the whole cheese

DEPLOY THE

STATIONERY

FIREHOSE!

it looks messy but wow is it effective for thinking and communication

card sort complex things

We had a long document. The easiest way to understand the big picture was to cut it up and rearrange the bits.

clear CTA

Card sorting is easy because actions and goals are clear. “Take this thing, put it somewhere. Repeat with next thing.”

organise many

small things

create one big thing

Building this talk, I wrote short statements until I had run out, then moved them around until they made a coherent story.

think with objects

Objects have the attractive quality of being specific and, unless you make more of them, non-duplicate.

all the 4±2

you can eatYou don’t need working memory to retain piles of things; the

pile is still there when you come back to it later. Amazing.

you can only put

one thing

at the top of

a prioritised listPeople are amazingly good at the kind of

compartmentalisation that leads to having five #1 priorities

more players

does not buy you

more items

at the top of the list

Often everyone has their own ideas about the items and the order they’re in. Making it physical surfaces assumptions.

we can do better

than one dimension

the hypothetical

third dimensionsecond

Even just taking a list (like a Word doc or whatever) …

… and making it into a spreadsheet, buys you an extra dimension with which to think about and organise your info.

use tools that

create opportunities

for richer encoding

This is Sublime Text, which has a handy ‘you are here’ pane, so you can see where you are and it’s easier to navigate.

speaking of richer

encoding …

totally a

letterbox

People lose their minds a little bit when they write emails. Sending one is no guarantee of having been understood.

we could …

talk to people?

Since, y’know, we do that for a living.

1. stuck

htt

p:/

/sta

tic.g

uim

.co

.uk/s

ys-

imag

es/

Ed

ucati

on/P

ix/p

ictu

res/

20

11/7

/28/1

311

85845832

8/T

he-re

searc

hers

-cho

se-che-0

07.jpg





2. why? (maybe)

3. what we can do

we are well-placed

to help our teams

… so maybe we should use all that visual thinking nous to help them, and thereby help us, all do better.

talk to me?I’m here all day

@finiteattention

[email protected]

Stop trying to paint the hallway through the letterbox: UX techniques that help teams help...

Software

Transcript of Stop trying to paint the hallway through the letterbox: UX techniques that help teams help...