The Language of Interfaces

15,666
-1

Published on

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/

0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,666
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
73
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

The Language of Interfaces

  1. 1. I com.
  2. 2. T nguage t fac D Trayn @ rayn
  3. 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 behaviourC.S. plays an integral part in app design We need to think skills not roles
  4. 4. Web S A Turn g I o Web A s
  5. 5. A bombs
  6. 6. “Five y rs from now, ’ be no such g a webpage.” - Jim B l n
  7. 7. W t A s?
  8. 8. F ums Netw ksLoc n-a s W t A s?So al sho g Pho -a s FB a s
  9. 9. T Web Is Be g Rebuilt Ar Peop Paul Adams @pa ay
  10. 10. Build g a so al web a a gamb c t t
  11. 11. T se guys bet peop w ld fi box.
  12. 12. T se guys bet peop w ld wr e “wa s”
  13. 13. T se guys bet peop w ld know w t a “Wave” w
  14. 14. T se guys bet peop w ld know w t a “Wave” w
  15. 15. T peop come ad c t t
  16. 16. T c t t c by peop
  17. 17. T age old prob m
  18. 18. Th do n’t m n ’s luck. C t t c trols .
  19. 19. Y c trol 3 gs
  20. 20. Y c trol 3 gs1. T UI
  21. 21. Y c trol 3 gs1. T UI 2. T b nk s te
  22. 22. Y c trol 3 gs1. T UI 2. T b nk s te3.T C t t Defin n
  23. 23. 1. Us I face Microcopy
  24. 24. L guage fl be v ur
  25. 25. T Sapir Wh f T s L gu c R iv y
  26. 26. T UI flAc s & R nships
  27. 27. INSERT INTO tweets NEWTWEET VALUES ("11012314","destraynor", "Just atebreakfast LOL!", "Dublin,Ireland");Tw ng - Not so sexy now, ?
  28. 28. T y c ld ve ca S , upd e, p t, y g
  29. 29. It’s not A e. Love. Ag e.
  30. 30. But No e “Lik ” a m s g c
  31. 31. Y sh ldn’t ‘like’ a s g s h
  32. 32. But y c +1 se gs.
  33. 33. Y get w t y k f ...
  34. 34. W t’s g?
  35. 35. W t’s y r m d?
  36. 36. It’s a same. It’s a diff t
  37. 37. Y get w ty sign f .Lik ecu cyIn agram
  38. 38. Tw t ab t tw ts
  39. 39. Tw t ab t tw ts
  40. 40. W ds Infl eR nships
  41. 41. “L k we d ’t n d put a b , do we?”
  42. 42. I ve 281 fri ds Faceb k. But I w ldn’t cr s road say hi 240 m
  43. 43. I’m okay w h “fo ow g” 459 peop
  44. 44. 54 fri ds cl m k.
  45. 45. L k In ks difficult q n,Thus, fri d n’t m n g .
  46. 46. 2. T “B nk S te” f new us s
  47. 47. I’ve z o fri ds,W ts t gs do peop wr e ?
  48. 48. El rly P ts Faceb k...
  49. 49. El rly P ts Faceb k...
  50. 50. Why sh ld I say y g? No e se .
  51. 51. Talk rad .DJ sets ne.Ev y e se fo ows .
  52. 52. How did Y tube co ts get so m ic?
  53. 53. How did Y tube co ts get so m ic?
  54. 54. Yah ! Answ s. W id cy & ir y co i
  55. 55. T “hug” ck.
  56. 56. How did Qu a get so f mal?
  57. 57. How did Qu a get so f mal?
  58. 58. Get S fac k ps d cu n vil
  59. 59. No exc m n m ks.
  60. 60. No typ sh ng.
  61. 61. 3. T C t t Defin n
  62. 62. Who s w t a view ?
  63. 63. Who s w t a view ?
  64. 64. A S views e bad.
  65. 65. Peop give low views g , but exp sive a s
  66. 66. A simp solu w ld be k bo .QUal y Val :
  67. 67. 2 Bad Examp s W n c t t go bad
  68. 68. Give y r fri d 3 l t s ov Wifi
  69. 69. G f tu . N ds a name...
  70. 70. Squi ! Y , I’m s us
  71. 71. “I w t squi y apictu my kids. Y c squi me back a vi o y r vac n. T ts a s tw e exp i ce.”
  72. 72. So, W t w t wr g ?
  73. 73. 1. Bad s ds, bad samp c t t
  74. 74. 2. Vag c cepts. “New wave” “D e”
  75. 75. Y s w t s?
  76. 76. Th gs-E i -To-U -TH -Wave
  77. 77. 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.
  78. 78. We’ve tabl dw ds e imp t t web a s.
  79. 79. T sw s c e mo l fects Release Q.A. Build Visual Design “Submit” Wireframe“Submit” C t t ’s “alright” surviv
  80. 80. T sw s c e mo l fects Release Q.A. Build Visual Design Share WireframeOMG_REPLACE_MEC t t ’s obv usly sh , usua y caught.
  81. 81. Not always :)
  82. 82. T ro C t t a sign
  83. 83. I com.
  84. 84. A typical qW t do we say sc w us s click chive, but m sage w al ady chiv bysome e ir t m so y c ’t d b chive. It’snot r , but same me didn’t , ohy h s w h c c l g emails w l, now I k ab t ...H . ” A typical c t t q n
  85. 85. Who?
  86. 86. P mium vs f eNew vs turn g Who?Adm vs gu r us “ev y us ”
  87. 87. W t?
  88. 88. 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
  89. 89. T e
  90. 90. Bus s gl h C ual & fri dly T eAbu tly c Cute & fu y
  91. 91. Time
  92. 92. “By email i t y” “On next log ” TimeOn sc raight away Dur g w k g h rs ir me z e
  93. 93. How?
  94. 94. By sc fl h m sage By email? How? In ir c dsText a (space?) By SMS Aud effect
  95. 95. Microcopy framew kMessage for: Any userTo tell them: They don’t need to archive, it’s already been doneSo they: Stop trying, and move onDisplayed via: Flash box on app (60 char max)When: After user tries to archive already archived messageTone: Clear, personal, like a work colleague.
  96. 96. Bad sw s
  97. 97. E m sage R : Duplic e al ady chiv Archive Bump Bad sw s Y c ’t chive a Y c ’t chive am sage A m sag m sage A m sag Th m sage s b n chiv by y e y r co g s
  98. 98. “David al ady chiv two m ut ago”
  99. 99. Microcopy framew kMessage for: Purchasing usersTo tell them: Their order is enrouteSo they: Know what’s up, and feel happyDisplayed via: EmailWhen: Immediately upon orderTone: Fun. Make this user laugh at their damn keyboard.
  100. 100. “Thanks for your order with CD Baby!Your CD has been gently taken from our CD Baby shelves withsterilized contamination-free gloves and placed onto a satin pillow.A team of 50 employees inspected your CD and polished it to makesure it was in the best possible condition before mailing.Our packing specialist from Japan lit a candle and a hush fell overthe crowd as he put your CD into the finest gold-lined box thatmoney can buy.We all had a wonderful celebration afterwards and the whole partymarched down the street to the post office where the entire town ofPortland waved Bon Voyage! to your package, on its way to you,in our private CD Baby jet on this day, Wednesday, September19th.I hope you had a wonderful time shopping at CD Baby. We suredid. Your picture is on our wall as Customer of the Year. Were allexhausted but cant wait for you to come back toCDBABY.COM!!”
  101. 101. How P ic say ky .
  102. 102. How A L gus say k y . Badly.
  103. 103. C t t a s alwayso tun y light y rus s
  104. 104. 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.
  105. 105. T nk y ! @ rayn
  106. 106. I com.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×