SlideShare a Scribd company logo
I   com.
T   nguage       t fac
       D Trayn
                 @   rayn
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
Web S     A Turn g I o
        Web A s
A bombs
“Five y rs from now,
     ’ be no such g
   a webpage.”
             - Jim B l n
W t A s?
F ums       Netw ks
Loc   n-a s
        W t A s?
So al sho     g
            Pho -a s FB a s
T   Web Is Be g Rebuilt
    Ar       Peop
               Paul Adams
                @pa ay
The Language of Interfaces
Build g a so al web a
   a gamb      c t t
T se guys bet   peop w ld fi   box.
T se guys bet   peop w ld wr e   “wa s”
T se guys bet peop w ld know w t a “Wave” w
T se guys bet peop w ld know w t a “Wave” w
T peop come    ad
       c t t
T c t t c
  by peop
T age old prob m
Th do n’t m n ’s luck.
  C t t c trols .
Y   c trol 3   gs
Y    c trol 3   gs
1. T UI
Y    c trol 3     gs
1. T UI   2. T b nk s te
Y    c trol 3     gs
1. T UI   2. T b nk s te
3.T C t t Defin n
1. Us I   face Microcopy
L guage fl
    be v ur
T Sapir Wh f T s   L gu c R   iv y
T UI fl
Ac s & R   nships
INSERT INTO tweets NEW
TWEET VALUES ("11012314",
"destraynor", "Just ate
breakfast LOL!", "Dublin,
Ireland");

Tw   ng - Not so sexy now,   ?
T y c ld ve ca   S   , upd e, p t, y   g
It’s not A   e. Love. Ag e.
But No e “Lik ” a m s g c
Y   sh ldn’t ‘like’ a s g s   h
But y   c +1   se   gs.
Y   get w t y   k f ...
W t’s   g?
W t’s   y r m d?
It’s a   same. It’s a diff   t
Y get w t
y   sign f .
Lik e
cu cy
In agram
Tw t   ab t   tw ts
Tw t   ab t   tw ts
W ds Infl   eR   nships
“L k we d ’t n d   put a b   , do we?”
I ve 281 fri ds                       Faceb k.
 But I w ldn’t cr s   road   say hi    240   m
I’m okay w h “fo ow g” 459 peop
54 fri ds cl   m k.
L k In ks difficult q    n,
Thus, fri d n’t m n g     .
2. T “B nk S te”
   f new us s
I’ve z o fri ds,
W ts t          gs do
 peop wr e          ?
El rly P   ts   Faceb k...
El rly P   ts   Faceb k...
Why sh ld I say y   g?
     No e se .
Talk rad .
DJ sets    ne.
Ev y e se fo ows .
How did Y tube co   ts get so m   ic?
How did Y tube co   ts get so m   ic?
Yah ! Answ s. W   id cy & ir y co i
T “hug” ck.
How did Qu a get so f mal?
How did Qu a get so f mal?
Get S   fac   k ps d cu   n vil
No exc m   n m ks.
No typ sh   ng.
3. T C t t Defin n
Who   s w t a view ?
Who   s w t a view ?
A S   views e bad.
Peop give low views g   , but exp sive a s
A simp solu   w ld be   k bo .
QUal y              Val :
2 Bad Examp s
    W n c t t go bad
Give y r fri d 3 l t s ov Wifi
G   f tu . N ds a name...
Squi !
 Y , I’m s   us
The Language of Interfaces
“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.”
So, W t w t wr g   ?
1. Bad s ds, bad samp c t t
2. Vag c cepts. “New wave” “D e”
Y   s w t   s?
Th gs-E i -To-U   -TH -Wave
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.
We’ve tabl d
w ds e imp t t
      web a s.
T sw s c                      e mo l           fects
                                       Release

                                Q.A.

                       Build

       Visual Design
                                                     “Submit”
 Wireframe




“Submit”




       C t t                   ’s “alright” surviv
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.
Not always :)
T ro    C t t
    a    sign
I   com.
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
Who?
P mium vs f e
New vs turn g


                Who?
Adm vs gu r us
                        “ev y us ”
W t?
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
T e
Bus   s gl h
      C ual & fri dly


                   T e
Abu    tly c
                        Cute & fu y
Time
“By email i     t y”
        “On next log ”


                        Time
On sc          raight
        away              Dur g w k g h rs
                                ir me z e
How?
By   sc        fl h m sage
         By email?


                     How?        In    ir c ds
Text   a (space?)
                            By SMS
           Aud effect
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.
Bad sw s
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
“David al ady chiv   two
         m ut ago”
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.
“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   ky .
How A L gus say   k y . Badly.
C t t a s always
o tun y  light y r
us s
The Language of Interfaces
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.
T nk y !
 @   rayn
I   com.

More Related Content

PPTX
Hora a Pháid - Ceacht 14
PPTX
Hóra a Pháid - Ceacht 22
PPTX
Hóra a Pháid - Ceacht 19
PPTX
Hóra a Pháid Ceacht 18
PPTX
Hóra a Pháid - Ceacht 27
PPTX
Hóra a Pháid - Ceacht 21
PPTX
Hora a Pháid Ceacht 13
PPTX
Hora a Pháid - Ceacht 16
Hora a Pháid - Ceacht 14
Hóra a Pháid - Ceacht 22
Hóra a Pháid - Ceacht 19
Hóra a Pháid Ceacht 18
Hóra a Pháid - Ceacht 27
Hóra a Pháid - Ceacht 21
Hora a Pháid Ceacht 13
Hora a Pháid - Ceacht 16

What's hot (13)

PPTX
Dúisigh a Bhríd - Ceacht 38
PPTX
Hóra a Pháid - Ceacht 29
PPTX
Hóra a Pháid - Ceacht 24
PPTX
Hora a Pháid Ceacht 17
PPTX
Hóra a Pháid - Ceacht 33
PPTX
Hóra a Pháid - Ceacht 26
PPTX
Hóra a Pháid - Ceacht 31
PPTX
Hora a Pháid - Ceacht 34
PPTX
Hóra a Pháid - Ceacht 28
PPTX
Hóra a Pháid - Ceacht 32
PPTX
Hóra a Pháid - Ceacht 23
PDF
CodeWeek - Explaining how to Code to 12 yr old kids
PPTX
Davis thomas
Dúisigh a Bhríd - Ceacht 38
Hóra a Pháid - Ceacht 29
Hóra a Pháid - Ceacht 24
Hora a Pháid Ceacht 17
Hóra a Pháid - Ceacht 33
Hóra a Pháid - Ceacht 26
Hóra a Pháid - Ceacht 31
Hora a Pháid - Ceacht 34
Hóra a Pháid - Ceacht 28
Hóra a Pháid - Ceacht 32
Hóra a Pháid - Ceacht 23
CodeWeek - Explaining how to Code to 12 yr old kids
Davis thomas
Ad

Viewers also liked (20)

PDF
Designing Data Visualisations & Dashboard in Web Applications
PDF
Critical Design :: Restoring a sense of wonder to Interaction Design
PDF
Simplify by Orders of Magnitude
PDF
The Mobile Frontier
PDF
Artificial emotional intelligence - Giles Colborne
PDF
Culture + Design
KEY
How Being a Jock Makes a Better Interaction Designer
PDF
All The Screens: Cross Platform Design Strategies
PDF
Designing Dashboards & Data Visualisations in Web Apps
PDF
Web Analytics Architecture
PDF
Design Patterns
PDF
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
PDF
ITC : Diversification
PPTX
class diagram
PPT
Interaction Design History
PDF
Inspiration from The Edge: New Patterns for Interface Design
PDF
Information Architecture Heuristics
PDF
Android 4.0 UI Design Tips
PPT
Class diagrams
PPT
Class diagrams
Designing Data Visualisations & Dashboard in Web Applications
Critical Design :: Restoring a sense of wonder to Interaction Design
Simplify by Orders of Magnitude
The Mobile Frontier
Artificial emotional intelligence - Giles Colborne
Culture + Design
How Being a Jock Makes a Better Interaction Designer
All The Screens: Cross Platform Design Strategies
Designing Dashboards & Data Visualisations in Web Apps
Web Analytics Architecture
Design Patterns
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
ITC : Diversification
class diagram
Interaction Design History
Inspiration from The Edge: New Patterns for Interface Design
Information Architecture Heuristics
Android 4.0 UI Design Tips
Class diagrams
Class diagrams
Ad

Similar to The Language of Interfaces (20)

KEY
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
ODP
PDF
Facebook for starters
PDF
TBWA\ Backslash1
PDF
Cm417.intro part 1 updated for Spring 2013
PDF
Get Kudos from customers (without bribing them)
PDF
Digital Review Sept 2011
PDF
Cracking the Digital Code
PDF
Language for technology
PDF
Technology and Human Communication, Social Interaction
PDF
2011 NASA Open Source Summit - Pascal Finette
ZIP
Making Waves - Web Directions 09 Keynote
PDF
Voice and Tone: Creating content for humans (Kate Kiefer Lee)
PDF
Fundamentals of Creative Development: An Introductory Lecture (2 and 3)
PDF
Blogging Tips
PPT
8th grade presentation for slideshare
PDF
Inglés profesional para atención al cliente en comercio. Día 3 de 4.
PDF
Harvard Ext Oct.2008.Ppt
PPT
"Going for the look"EAP Unit Presentation
KEY
The Facebook Effect
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
Facebook for starters
TBWA\ Backslash1
Cm417.intro part 1 updated for Spring 2013
Get Kudos from customers (without bribing them)
Digital Review Sept 2011
Cracking the Digital Code
Language for technology
Technology and Human Communication, Social Interaction
2011 NASA Open Source Summit - Pascal Finette
Making Waves - Web Directions 09 Keynote
Voice and Tone: Creating content for humans (Kate Kiefer Lee)
Fundamentals of Creative Development: An Introductory Lecture (2 and 3)
Blogging Tips
8th grade presentation for slideshare
Inglés profesional para atención al cliente en comercio. Día 3 de 4.
Harvard Ext Oct.2008.Ppt
"Going for the look"EAP Unit Presentation
The Facebook Effect

Recently uploaded (20)

PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
DOCX
actividad 20% informatica microsoft project
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PDF
Africa 2025 - Prospects and Challenges first edition.pdf
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PPTX
Implications Existing phase plan and its feasibility.pptx
PDF
Urban Design Final Project-Site Analysis
PPT
Package Design Design Kit 20100009 PWM IC by Bee Technologies
PPTX
HPE Aruba-master-icon-library_052722.pptx
PDF
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
PDF
High-frequency high-voltage transformer outline drawing
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PPTX
6- Architecture design complete (1).pptx
PPTX
Fundamental Principles of Visual Graphic Design.pptx
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
AD Bungalow Case studies Sem 2.pptxvwewev
Wisp Textiles: Where Comfort Meets Everyday Style
actividad 20% informatica microsoft project
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
Africa 2025 - Prospects and Challenges first edition.pdf
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
Implications Existing phase plan and its feasibility.pptx
Urban Design Final Project-Site Analysis
Package Design Design Kit 20100009 PWM IC by Bee Technologies
HPE Aruba-master-icon-library_052722.pptx
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
High-frequency high-voltage transformer outline drawing
pump pump is a mechanism that is used to transfer a liquid from one place to ...
6- Architecture design complete (1).pptx
Fundamental Principles of Visual Graphic Design.pptx

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