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/

1. I com.

2. T nguage t fac
D Trayn
@ rayn

3. Websites are turning into web-apps.
The web is being rebuilt around people.
A web-app is a gamble on content.
The content is created by the people.
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

4. Web S A Turn g I o
Web A s

5. A bombs

6. “Five y rs from now,
’ be no such g
a webpage.”
- Jim B l n

7. W t A s?

8. F ums Netw ks
Loc n-a s
W t A s?
So al sho g
Pho -a s FB a s

9. T Web Is Be g Rebuilt
Ar Peop
Paul Adams
@pa ay

11. Build g a so al web a
a gamb c t t

12. T se guys bet peop w ld fi box.

13. T se guys bet peop w ld wr e “wa s”

14. T se guys bet peop w ld know w t a “Wave” w

15. T se guys bet peop w ld know w t a “Wave” w

16. T peop come ad
c t t

17. T c t t c
by peop

18. T age old prob m

19. Th do n’t m n ’s luck.
C t t c trols .

20. Y c trol 3 gs

21. Y c trol 3 gs
1. T UI

22. Y c trol 3 gs
1. T UI 2. T b nk s te

23. Y c trol 3 gs
1. T UI 2. T b nk s te
3.T C t t Defin n

24. 1. Us I face Microcopy

25. L guage fl
be v ur

26. T Sapir Wh f T s L gu c R iv y

27. T UI fl
Ac s & R nships

28. INSERT INTO tweets NEW
TWEET VALUES ("11012314",
"destraynor", "Just ate
breakfast LOL!", "Dublin,
Ireland");
Tw ng - Not so sexy now, ?

29. T y c ld ve ca S , upd e, p t, y g

30. It’s not A e. Love. Ag e.

31. But No e “Lik ” a m s g c

32. Y sh ldn’t ‘like’ a s g s h

33. But y c +1 se gs.

34. Y get w t y k f ...

35. W t’s g?

36. W t’s y r m d?

37. It’s a same. It’s a diff t

38. Y get w t
y sign f .
Lik e
cu cy
In agram

39. Tw t ab t tw ts

40. Tw t ab t tw ts

41. W ds Infl eR nships

42. “L k we d ’t n d put a b , do we?”

43. I ve 281 fri ds Faceb k.
But I w ldn’t cr s road say hi 240 m

44. I’m okay w h “fo ow g” 459 peop

45. 54 fri ds cl m k.

46. L k In ks difficult q n,
Thus, fri d n’t m n g .

47. 2. T “B nk S te”
f new us s

48. I’ve z o fri ds,
W ts t gs do
peop wr e ?

49. El rly P ts Faceb k...

50. El rly P ts Faceb k...

51. Why sh ld I say y g?
No e se .

52. Talk rad .
DJ sets ne.
Ev y e se fo ows .

53. How did Y tube co ts get so m ic?

54. How did Y tube co ts get so m ic?

55. Yah ! Answ s. W id cy & ir y co i

56. T “hug” ck.

57. How did Qu a get so f mal?

58. How did Qu a get so f mal?

59. Get S fac k ps d cu n vil

60. No exc m n m ks.

61. No typ sh ng.

62. 3. T C t t Defin n

63. Who s w t a view ?

64. Who s w t a view ?

65. A S views e bad.

66. Peop give low views g , but exp sive a s

67. A simp solu w ld be k bo .
QUal y Val :

68. 2 Bad Examp s
W n c t t go bad

69. Give y r fri d 3 l t s ov Wifi

70. G f tu . N ds a name...

71. Squi !
Y , I’m s us

73. “I w t squi y a
pictu my kids. Y c
squi me back a vi o
y r vac n. T t's a
s tw e exp i ce.”

74. So, W t w t wr g ?

75. 1. Bad s ds, bad samp c t t

76. 2. Vag c cepts. “New wave” “D e”

77. Y s w t s?

78. Th gs-E i -To-U -TH -Wave

79. So w t...
Peop wr e be “Lik ”.
Peop tw t be tw t .
Peop fo ow b s, c se numb s
Y get c t ty s ve.

80. We’ve tabl d
w ds e imp t t
web a s.

81. T sw s c e mo l fects
Release
Q.A.
Build
Visual Design
“Submit”
Wireframe
“Submit”
C t t ’s “alright” surviv

82. T sw s c e mo l fects
Release
Q.A.
Build
Visual Design
Share
Wireframe
OMG_REPLACE_ME
C t t ’s obv usly sh , usua y caught.

83. Not always :)

84. T ro C t t
a sign

85. I com.

86. A typical q
W t do we say sc w us s click
chive, but m sage w al ady chiv by
some e ir t m so y c ’t d b chive. It’s
not r , but same me didn’t , oh
y h s w h c c l g emails w l, now
I k ab t ...H . ”
A typical c t t q n

87. Who?

88. P mium vs f e
New vs turn g
Who?
Adm vs gu r us
“ev y us ”

89. W t?

90. Upgra y r p n
C nge y r se g
W t?
Th c ’t be d e
Y d ’t ve p m s n

91. T e

92. Bus s gl h
C ual & fri dly
T e
Abu tly c
Cute & fu y

93. Time

94. “By email i t y”
“On next log ”
Time
On sc raight
away Dur g w k g h rs
ir me z e

95. How?

96. By sc fl h m sage
By email?
How? In ir c ds
Text a (space?)
By SMS
Aud effect

97. Microcopy framew k
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.

98. Bad sw s

99. E m sage
R : Duplic e al ady chiv
Archive
Bump
Bad sw s
Y c ’t chive a Y c ’t chive a
m sage A m sag m sage A m sag
Th m sage s b n chiv
by y e y r co g s

100. “David al ady chiv two
m ut ago”

101. Microcopy framew k
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.

102. “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!!”

103. How P ic say ky .

104. How A L gus say k y . Badly.

105. C t t a s always
o tun y light y r
us s

107. Wrap up, D
*C t t p ys a m sive ro us be v ur
*C t t begets c t t
*T w ds y put some g, be ac
a ship, fine y r a
*C t t e p ce y r a c sh e.

108. T nk y !
@ rayn

109. I com.