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. T nguage t fac
    D Trayn
    @ rayn

    View full-size slide

  2. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. T peop come ad
    c t t

    View full-size slide

  13. T c t t c
    by peop

    View full-size slide

  14. T age old prob m

    View full-size slide

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

    View full-size slide

  16. Y c trol 3 gs

    View full-size slide

  17. Y c trol 3 gs
    1. T UI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 1. Us I face Microcopy

    View full-size slide

  21. L guage fl
    be v ur

    View full-size slide

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

    View full-size slide

  23. T UI fl
    Ac s & R nships

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. But y c +1 se gs.

    View full-size slide

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

    View full-size slide

  31. W t’s y r m d?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Tw t ab t tw ts

    View full-size slide

  35. Tw t ab t tw ts

    View full-size slide

  36. W ds Infl e R nships

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 54 fri ds cl m k.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. El rly P ts Faceb k...

    View full-size slide

  45. El rly P ts Faceb k...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. T “hug” ck.

    View full-size slide

  52. How did Qu a get so f mal?

    View full-size slide

  53. How did Qu a get so f mal?

    View full-size slide

  54. Get S fac k ps d cu n vil

    View full-size slide

  55. No exc m n m ks.

    View full-size slide

  56. No typ sh ng.

    View full-size slide

  57. 3. T C t t Defin n

    View full-size slide

  58. Who s w t a view ?

    View full-size slide

  59. Who s w t a view ?

    View full-size slide

  60. A S views e bad.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. Squi !
    Y , I’m s us

    View full-size slide

  67. “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 full-size slide

  68. So, W t w t wr g ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  75. 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 full-size slide

  76. Not always :)

    View full-size slide

  77. T ro C t t
    a sign

    View full-size slide

  78. 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 full-size slide

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

    View full-size slide

  80. 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 full-size slide

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

    View full-size slide

  82. 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 full-size slide

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

    View full-size slide

  84. 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 full-size slide

  85. 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 full-size slide

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

    View full-size slide

  87. 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 full-size slide

  88. “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 full-size slide

  89. How P ic say k y .

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  92. * 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 full-size slide

  93. T nk y !
    @ rayn

    View full-size slide