of 109
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&nt 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 $flu_e?& be0v@ur
T/ Sapir Wh%f T/s7 8 L-gu79c R:*iv3y
T! UI $flu_e?& 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
But No 4e Lik$ a m7s-g c*
Y1 sh1ldnt like a s$g%s C;h
But y( c= +1 >se 0-gs.
Y( get w?t y( @k f%...
W?ts ?+5-g?
W?ts 4 y(r m-d?
Its a2 > same. Its a2 diff"5t
Y( get w?t y( &sign f%.
Lik$ Be > cuC5cy - In'agram
WDds Influ_e?e R5;@nships
LDk we d4t n;d ) put a 6b: 4 3, do we?
I ?ve 281 fri5ds 4 FacebDk. But I w1ldnt crBs - road : say hi : 240 # -m
Im okay w3h fo2ow-g 459 peop1
54 fri5ds 7 clE" ) > mBk.
2. T! B"nk S"te fD new us%s
Ive 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
A simp1 solu94 w(ld be ) @k bo0 . QUal3y Valu_e:
2 Bad Examp3sW/n c4t5t go$ bad
Give y(r fri5d 3 l7t5s ov" Wifi
SquiE !Y$, Im 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.
1. Bad s;ds, bad samp1 c4t5t
2. Vagu_e c4cepts. New wave D4e
Y( s; w?t ?+5s?
Th-gs-E@i"-To-UL"'M-TH=-Wave
Weve &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. Its not = %rD, but ; - same Ame ' didnt 0*7, oh y,h G .4 0*7s w'h c=c5l$g emails / w5l, now .; I .$k ab1t '...HH.
A typical c6t7t qu_eI@n
A typical
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 d6t 0ve p%m4s@n
T6e
T6eC/ual & fri7dly
Bus$&s 7gl4h
Abu2=tly c3FCute & fuKy
Time
TimeOn next log$
By email iH
How?
How?By email?
By 6 sc(7 fl/h m&sage
Text $ a* (space?)By SMS
In -ir (cDds
Aud@ effect
Message for: Any user
To tell them: They dont need to archive, its 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