View
15.508
Download
4
Category
Preview:
DESCRIPTION
A talk given at CS Forum11. More information can be found in the supporting blog post here: http://contrast.ie/blog/the-language-of-interfaces/
Citation preview
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.#
Recommended