Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Language of Interfaces

Des Traynor
September 15, 2011

The Language of Interfaces

Supporting blog posts
http://blog.intercom.io/writing-an-interface/
http://contrast.ie/blog/the-language-of-interfaces/

A presentation discussing the role of content in interfaces, what it influences, and why it is so important.

Des Traynor

September 15, 2011
Tweet

More Decks by Des Traynor

Other Decks in Design

Transcript

  1. I com.

    View Slide

  2. T nguage t fac
    D Trayn
    @ rayn

    View Slide

  3. 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

    View Slide

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

    View Slide

  5. A bombs

    View Slide

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

    View Slide

  7. W t A s?

    View Slide

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

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. T peop come ad
    c t t

    View Slide

  17. T c t t c
    by peop

    View Slide

  18. T age old prob m

    View Slide

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

    View Slide

  20. Y c trol 3 gs

    View Slide

  21. Y c trol 3 gs
    1. T UI

    View Slide

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

    View Slide

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

    View Slide

  24. 1. Us I face Microcopy

    View Slide

  25. L guage fl
    be v ur

    View Slide

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

    View Slide

  27. T UI fl
    Ac s & R nships

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. But y c +1 se gs.

    View Slide

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

    View Slide

  35. W t’s g?

    View Slide

  36. W t’s y r m d?

    View Slide

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

    View Slide

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

    View Slide

  39. Tw t ab t tw ts

    View Slide

  40. Tw t ab t tw ts

    View Slide

  41. W ds Infl e R nships

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. 54 fri ds cl m k.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. El rly P ts Faceb k...

    View Slide

  50. El rly P ts Faceb k...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. T “hug” ck.

    View Slide

  57. How did Qu a get so f mal?

    View Slide

  58. How did Qu a get so f mal?

    View Slide

  59. Get S fac k ps d cu n vil

    View Slide

  60. No exc m n m ks.

    View Slide

  61. No typ sh ng.

    View Slide

  62. 3. T C t t Defin n

    View Slide

  63. Who s w t a view ?

    View Slide

  64. Who s w t a view ?

    View Slide

  65. A S views e bad.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  71. Squi !
    Y , I’m s us

    View Slide

  72. View Slide

  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.”

    View Slide

  74. So, W t w t wr g ?

    View Slide

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

    View Slide

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

    View Slide

  77. Y s w t s?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. Not always :)

    View Slide

  84. T ro C t t
    a sign

    View Slide

  85. I com.

    View Slide

  86. 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
    A typical q

    View Slide

  87. Who?

    View Slide

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

    View Slide

  89. W t?

    View Slide

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

    View Slide

  91. T e

    View Slide

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

    View Slide

  93. Time

    View Slide

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

    View Slide

  95. How?

    View Slide

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

    View Slide

  97. 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

    View Slide

  98. Bad sw s

    View Slide

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

    View Slide

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

    View Slide

  101. 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

    View Slide

  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!!”

    View Slide

  103. How P ic say k y .

    View Slide

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

    View Slide

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

    View Slide

  106. View Slide

  107. * 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.
    Wrap up, D

    View Slide

  108. T nk y !
    @ rayn

    View Slide

  109. I com.

    View Slide