I!"com.#

T! "nguage # $t%fac&

D$ Trayn%@&'rayn%

The web is being rebuilt around people.

The content is created by the people.

Websites are turning into web-apps.

A web-app is a gamble on content.

The people use the interface to do this.

Interfaces are the language of software.

Language influences behaviour

C.S. plays an integral part in app design

We need to think skills not roles

Web S'& A( Turn$g I)oWeb A*s

A bombs!+

“Five y,rs from now, -(’+ be no such .$g / a webpage.”

- Jim B(l)n

W0t A*s?

F%ums Netw%ks

Loc*#n-a+s

Pho)-a+sSo,al sho+-g

FB a+s

W0t A*s?

T! Web Is Be$g RebuiltAr12 Peop3

Paul Adams @pa.ay

Th4 4 a trav5 webs'e. But a+ - c6t7t 4 from my fri7ds. Always.

S8 w0t I m,n?

Build$g a so9al web a* 4 a gamb3 6 c6t7t

T/se guys bet 0* peop1 w(ld fi2 0* box.

T/se guys bet 0* peop1 w(ld wr3e 4 “wa2s”

T!se guys bet peop3 w1ld know w0t a “Wave” w/

T!se guys bet peop3 w1ld know w0t a “Wave” w/

T! peop3 come : (ad - c6t7t

T! c6t7t 4 c(;< by - peop3

T/ age old prob1m

Th4 do&n’t m,n '’s luck. C6t7t c6trols '.

Y1 c6trol 3 .$gs

1. T/ UI

3.T/ C4t5t Defin3#n

Y1 c6trol 3 .$gs

1. T/ UI

3.T/ C4t5t Defin3#n

Y1 c6trol 3 .$gs

1. T/ UI 2. T/ b6nk s6te

3.T/ C4t5t Defin3#n

Y1 c6trol 3 .$gs

1. T/ UI 2. T/ b6nk s6te

3.T/ C4t5t Defin3#n

1. Us% I)%face Microcopy

L=guage $fl>?& be0v@ur

T/ Sapir Wh%f T/s7 8 L-gu79c R:*iv3y

T! UI $fl>?& AcA6s & R5;@nships

INSERT INTO tweets NEW TWEET VALUES ("11012314", "destraynor", "Just ate breakfast LOL!", "Dublin, Ireland");

Tw;9ng - Not so sexy now, 7 3?

T!y c1ld 0ve ca+< ' S0(, upd;e, pBt, =y.$g

It’s not A+<,*e. Love. Ag<e.

But No 4e “Lik$” a m7s-g c*

Y1 sh1ldn’t ‘like’ a s$g%s C;h

But y( c= +1 >se 0-gs.

Y( get w?t y( @k f%...

W?t’s ?+5-g?

W?t’s 4 y(r m-d?

It’s a2 > same. It’s a2 diA"5t

Y( get w?t y( &sign f%.

Lik$ Be > cuC5cy - In'agram

Tw3t" 7 ab(t > <tw;ts

Tw3t" 7 ab(t > <tw;ts

WDds Infl>?e R5;@nships

“LDk we d4’t n;d ) put a 6b: 4 3, do we?”

I ?ve 281 fri5ds 4 FacebDk. But I w1ldn’t crBs - road : say hi : 240 # -m

I’m okay w3h “fo2ow-g” 459 peop1

54 fri5ds 7 clE" ) > mBk.

L-kFIn @ks > diAicult qG'#n,Thus, fri5d 7n’t mHn-g1I /<.

2. T! “B"nk S"te” fD new us%s

I’ve z"o fri5ds,W?t s%t 8 0-gs do peop1 wr3e 4 07?

El&rly PB5ts 4 FacebDk...

El&rly PB5ts 4 FacebDk...

Why sh(ld I say =y0-g? No 4e :se 7.

Talk rad#. DJ sets > )ne.Ev"y4e :se fo2ows 3.

How did Y(tube coJ5ts get so m%4ic?

How did Y(tube coJ5ts get so m%4ic?

YahD! Answ"s. W/< id#cy & ir4y co2i&

T/ “hug” ?ck.

How did Qu%a get so f%mal?

How did Qu%a get so f%mal?

Get S*7fac94 k;ps d7cuI#n ,vil

No exc6m*#n mBks.

No typF sh(9ng.

3. T! C6t7t Defin'@n

Who &,&s w?t a <view 7?

Who &,&s w?t a <view 7?

A+ S)< <views Be bad.

Peop1 give low <views g<*, but exp5sive a+s

A simp1 solu94 w(ld be ) @k bo0 . QUal3y ★★★★★ ValG: ★★★☆☆

2 Bad Examp3sW/n c4t5t go$ bad

Give y(r fri5d 3 l7t5s ov" Wifi

G<* fHtu<. N;ds a name...

SquiE !Y$, I’m s"#us

“I w=t ) squiK y( a pictu< 8 my kids. Y( c= squiK me back a vi&o 8 y(r vac*#n. T?t's a s8twBe exp"i5ce.”

So, W?t w5t wr4g /<?

1. Bad s;ds, bad samp1 c4t5t

2. VagG c4cepts. “New wave” “D4e”

Y( s; w?t ?+5s?

Th-gs-E@i"-To-UL"'M-TH=-Wave

Peop1 wr3e ) be “LikF”.Peop1 tw;t ) be <tw;tF.

Peop1 fo2ow 6b:s, M c?se numb"s

Y( get > c4t5t y( &s"ve.

So w0t...

We’ve &tabl4!d .; wDds Fe impDt=t

$ web a*s. Way ) p6y ) > crowd, D$

Wireframe

Visual Design

Build

Q.A.

Release

“Submit”

“Submit”

T/ sw7s c/$e mo&l 8 &fects

C4t5t 0*’s “alright” surviv$

Wireframe

Visual Design

Build

Q.A.

Release

OMG_REPLACE_ME

Share

T/ sw7s c/$e mo&l 8 &fects

C4t5t 0*’s obv#usly sh3, 7 usua2y caught.

Not always :)

T! ro3 # C6t7t $ a* Csign

Way ) p6y ) > crowd, D$

I!"com.#

W0t do we say 6 - sc(7 w!( - us% 0s click< Fchive, but - m&sage w/ al(ady Fchiv< by some6e 6 -ir t,m so -y c=’t d1b3 Fchive. It’s not = %rD, but ; - same Ame ' didn’t 0*7, oh y,h G .4 0*7s w'h c=c5l$g emails / w5l, now .; I .$k ab1t '...HH. ”

A typical c6t7t q>I@n

A typical <qG'

Who?

Who?New vs (turn$g

P(mium vs f(e

Adm$ vs (gu"r us%“ev%y us%”

W0t?

W0t?C0nge y1r seJ$g

UpgraC y1r p"n

Th4 c=’t be d6eY1 d6’t 0ve p%m4s@n

T6e

T6eC/ual & fri7dly

Bus$&s 7gl4h

Abu2=tly c3FCute & fuKy

Time

Time“On next log$”

“By email iH<Lt5y”

On sc(7 Iraight away Dur$g wDk$g h1rs $

-ir Ame z6e

How?

How?By email?

By 6 sc(7 fl/h m&sage

Text $ a* (space?)By SMS

In -ir (cDds

Aud@ eMect

Message for: Any user

To tell them: They don’t need to archive, it’s already been done

So they: Stop trying, and move on

Displayed via: Flash box on app (60 char max)

When: After user tries to archive already archived message

Tone: Clear, personal, like a work colleague.

Microcopy framew%k

Bad =sw"s

NRO: Duplic;e Archive

EPD m&sage 4 al(ady Fchiv<

Y1 c=’t Fchive a m&sage $ A+ m&sag&

Th4 m&sage 0s b8n Fchiv< by y1 D 6e # y1r co+,g>s

Y1 c=’t Fchive a m&sage $ A+ m&sag&

Bump

Bad =sw"s

“David al<ady BchivF 07 two m-ut$ ago”

Message for: Purchasing users

To tell them: Their order is enroute

So they: Know what’s up, and feel happy

Displayed via: Email

When: Immediately upon order

Tone: Fun. Make this user laugh at their damn keyboard.

Microcopy framew%k

“Thanks for your order with CD Baby!

Your CD has been gently taken from our CD Baby shelves with

sterilized contamination-free gloves and placed onto a satin pillow.

A team of 50 employees inspected your CD and polished it to make

sure it was in the best possible condition before mailing.

Our packing specialist from Japan lit a candle and a hush fell over

the crowd as he put your CD into the finest gold-lined box that

money can buy.

We all had a wonderful celebration afterwards and the whole party

marched down the street to the post office where the entire town of

Portland waved 'Bon Voyage!' to your package, on its way to you,

in our private CD Baby jet on this day, Wednesday, September

19th.

I hope you had a wonderful time shopping at CD Baby. We sure

did. Your picture is on our wall as 'Customer of the Year'. We're all

exhausted but can't wait for you to come back to

CDBABY.COM!!”

How P=ic say 0=k y(.

How A"L-gus say 0=k y(. Badly.

C4t5t - a+s 7 always = o+%tun3y ) &light y(r us"s

* C4t5t p6ys a m@sive ro1 - us" be?v#ur* C4t5t begets c4t5t* T/ w%ds y( put 4 some0-g, be 3 = ac94 % a <694ship, &fine y(r a+* C4t5t 7 4e p6ce y(r a+ c= sh-e.

Wrap ' up, D&

T0nk y1!@&'rayn%

I!"com.#