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
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
“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
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

What's hot

Dúisigh a Bhríd - Ceacht 38
Dúisigh a Bhríd - Ceacht 38Dúisigh a Bhríd - Ceacht 38
Dúisigh a Bhríd - Ceacht 38
Seomra Ranga
 
Hóra a Pháid - Ceacht 29
Hóra a Pháid - Ceacht 29Hóra a Pháid - Ceacht 29
Hóra a Pháid - Ceacht 29
Seomra Ranga
 
Hóra a Pháid - Ceacht 24
Hóra a Pháid - Ceacht 24Hóra a Pháid - Ceacht 24
Hóra a Pháid - Ceacht 24
Seomra Ranga
 
Hora a Pháid Ceacht 17
Hora a Pháid Ceacht 17Hora a Pháid Ceacht 17
Hora a Pháid Ceacht 17
Seomra Ranga
 
Hóra a Pháid - Ceacht 33
Hóra a Pháid - Ceacht 33Hóra a Pháid - Ceacht 33
Hóra a Pháid - Ceacht 33
Seomra Ranga
 
Hóra a Pháid - Ceacht 26
Hóra a Pháid - Ceacht 26Hóra a Pháid - Ceacht 26
Hóra a Pháid - Ceacht 26
Seomra Ranga
 
Hóra a Pháid - Ceacht 31
Hóra a Pháid - Ceacht 31Hóra a Pháid - Ceacht 31
Hóra a Pháid - Ceacht 31
Seomra Ranga
 
Hora a Pháid - Ceacht 34
Hora a Pháid - Ceacht 34Hora a Pháid - Ceacht 34
Hora a Pháid - Ceacht 34
Seomra Ranga
 
Hóra a Pháid - Ceacht 28
Hóra a Pháid - Ceacht 28Hóra a Pháid - Ceacht 28
Hóra a Pháid - Ceacht 28
Seomra Ranga
 
Hóra a Pháid - Ceacht 32
Hóra a Pháid - Ceacht 32Hóra a Pháid - Ceacht 32
Hóra a Pháid - Ceacht 32
Seomra Ranga
 
Hóra a Pháid - Ceacht 23
Hóra a Pháid - Ceacht 23Hóra a Pháid - Ceacht 23
Hóra a Pháid - Ceacht 23
Seomra Ranga
 
CodeWeek - Explaining how to Code to 12 yr old kids
CodeWeek - Explaining how to Code to 12 yr old kidsCodeWeek - Explaining how to Code to 12 yr old kids
CodeWeek - Explaining how to Code to 12 yr old kids
Mike Miello
 
Davis thomas
Davis thomasDavis thomas
Davis thomas
ApricotLaw_DSBio
 

What's hot (13)

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

Viewers also liked

Designing Data Visualisations & Dashboard in Web Applications
Designing Data Visualisations & Dashboard in Web ApplicationsDesigning Data Visualisations & Dashboard in Web Applications
Designing Data Visualisations & Dashboard in Web Applications
Des Traynor
 
Critical Design :: Restoring a sense of wonder to Interaction Design
Critical Design :: Restoring a sense of wonder to Interaction DesignCritical Design :: Restoring a sense of wonder to Interaction Design
Critical Design :: Restoring a sense of wonder to Interaction Design
Michael Smyth
 
Simplify by Orders of Magnitude
Simplify by Orders of MagnitudeSimplify by Orders of Magnitude
Simplify by Orders of Magnitude
Des Traynor
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
Rachel Hinman
 
Artificial emotional intelligence - Giles Colborne
Artificial emotional intelligence - Giles ColborneArtificial emotional intelligence - Giles Colborne
Artificial emotional intelligence - Giles Colborne
cxpartners
 
Culture + Design
Culture + DesignCulture + Design
Culture + Design
Erik Dahl
 
How Being a Jock Makes a Better Interaction Designer
How Being a Jock Makes a Better Interaction DesignerHow Being a Jock Makes a Better Interaction Designer
How Being a Jock Makes a Better Interaction Designer
Lis Hubert
 
All The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design StrategiesAll The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design Strategies
Theresa Neil
 
Designing Dashboards & Data Visualisations in Web Apps
Designing Dashboards & Data Visualisations in Web Apps  Designing Dashboards & Data Visualisations in Web Apps
Designing Dashboards & Data Visualisations in Web Apps
Des Traynor
 
Web Analytics Architecture
Web Analytics ArchitectureWeb Analytics Architecture
Web Analytics Architecture
Infosys
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
adil raja
 
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
Future Insights
 
ITC : Diversification
ITC : DiversificationITC : Diversification
ITC : Diversification
AJ Raina
 
Based Design Pattern Examples
Based Design Pattern ExamplesBased Design Pattern Examples
Based Design Pattern Examples
Abanoub Hanna
 
class diagram
class diagramclass diagram
class diagram
Shohan Ean
 
Interaction Design History
Interaction Design HistoryInteraction Design History
Interaction Design History
Marc Rettig
 
Inspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface DesignInspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface Design
Stephen Anderson
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture Heuristics
Abby Covert
 
Android 4.0 UI Design Tips
Android 4.0 UI Design TipsAndroid 4.0 UI Design Tips
Android 4.0 UI Design Tips
Justin Lee
 
Class diagrams
Class diagramsClass diagrams
Class diagrams
Nadia_Nazeer
 

Viewers also liked (20)

Designing Data Visualisations & Dashboard in Web Applications
Designing Data Visualisations & Dashboard in Web ApplicationsDesigning Data Visualisations & Dashboard in Web Applications
Designing Data Visualisations & Dashboard in Web Applications
 
Critical Design :: Restoring a sense of wonder to Interaction Design
Critical Design :: Restoring a sense of wonder to Interaction DesignCritical Design :: Restoring a sense of wonder to Interaction Design
Critical Design :: Restoring a sense of wonder to Interaction Design
 
Simplify by Orders of Magnitude
Simplify by Orders of MagnitudeSimplify by Orders of Magnitude
Simplify by Orders of Magnitude
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
 
Artificial emotional intelligence - Giles Colborne
Artificial emotional intelligence - Giles ColborneArtificial emotional intelligence - Giles Colborne
Artificial emotional intelligence - Giles Colborne
 
Culture + Design
Culture + DesignCulture + Design
Culture + Design
 
How Being a Jock Makes a Better Interaction Designer
How Being a Jock Makes a Better Interaction DesignerHow Being a Jock Makes a Better Interaction Designer
How Being a Jock Makes a Better Interaction Designer
 
All The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design StrategiesAll The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design Strategies
 
Designing Dashboards & Data Visualisations in Web Apps
Designing Dashboards & Data Visualisations in Web Apps  Designing Dashboards & Data Visualisations in Web Apps
Designing Dashboards & Data Visualisations in Web Apps
 
Web Analytics Architecture
Web Analytics ArchitectureWeb Analytics Architecture
Web Analytics Architecture
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
Getting There Faster: Rapid Prototyping and Iteration (Billy Kiely)
 
ITC : Diversification
ITC : DiversificationITC : Diversification
ITC : Diversification
 
Based Design Pattern Examples
Based Design Pattern ExamplesBased Design Pattern Examples
Based Design Pattern Examples
 
class diagram
class diagramclass diagram
class diagram
 
Interaction Design History
Interaction Design HistoryInteraction Design History
Interaction Design History
 
Inspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface DesignInspiration from The Edge: New Patterns for Interface Design
Inspiration from The Edge: New Patterns for Interface Design
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture Heuristics
 
Android 4.0 UI Design Tips
Android 4.0 UI Design TipsAndroid 4.0 UI Design Tips
Android 4.0 UI Design Tips
 
Class diagrams
Class diagramsClass diagrams
Class diagrams
 

Similar to The Language of Interfaces

Sticky Presentations
Sticky PresentationsSticky Presentations
Sticky Presentations
Libby Spears
 
How To Build A Presentation Like A Hand Grenade.pdf
How To Build A Presentation Like A Hand Grenade.pdfHow To Build A Presentation Like A Hand Grenade.pdf
How To Build A Presentation Like A Hand Grenade.pdf
Oje Ojeaga
 
Presentation Redux @ Lanco Infratch
Presentation Redux @ Lanco InfratchPresentation Redux @ Lanco Infratch
Presentation Redux @ Lanco Infratch
Mohit Chhabra
 
Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...
Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...
Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...
Kate Rutter
 
Yes - 50 scientifically proven ways to be persuasive
Yes - 50 scientifically proven ways to be persuasiveYes - 50 scientifically proven ways to be persuasive
Yes - 50 scientifically proven ways to be persuasive
Jussi Laakkonen
 
Student led Confrence
Student led ConfrenceStudent led Confrence
Student led Confrence
guest9c9930
 
Kidding Around: Designing Digital Activities (#mw2012)
Kidding Around: Designing Digital Activities (#mw2012)Kidding Around: Designing Digital Activities (#mw2012)
Kidding Around: Designing Digital Activities (#mw2012)
Shelley Mannion
 
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
webdagene
 
Unit 4
Unit 4Unit 4
Unit 4
wachirakiat
 
Presentationskillsv1 090808075730 Phpapp01
Presentationskillsv1 090808075730 Phpapp01Presentationskillsv1 090808075730 Phpapp01
Presentationskillsv1 090808075730 Phpapp01
gvanesa
 
The Visual Presentation Era
The Visual Presentation EraThe Visual Presentation Era
The Visual Presentation Era
Mohamad Badr
 
Presentationskillsv1 090808075730-phpapp01
Presentationskillsv1 090808075730-phpapp01Presentationskillsv1 090808075730-phpapp01
Presentationskillsv1 090808075730-phpapp01
loramparlove
 
Scott_Herron_Portfolio
Scott_Herron_PortfolioScott_Herron_Portfolio
Scott_Herron_Portfolio
Scott Herron
 
Final_Presentation
Final_PresentationFinal_Presentation
Final_Presentation
arielwollek
 
Presentation_Final
Presentation_FinalPresentation_Final
Presentation_Final
arielwollek
 
EIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My Vibe
EIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My VibeEIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My Vibe
EIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My Vibe
European Innovation Academy
 
Communication for success[1] (1) 1
Communication for success[1] (1) 1Communication for success[1] (1) 1
Communication for success[1] (1) 1
Grp Tirpude
 
Future of Conferences John Allsopp
Future of Conferences John AllsoppFuture of Conferences John Allsopp
Future of Conferences John Allsopp
nswkmforum
 
The Art of Presentation. Following the Zen path
The Art of Presentation. Following the Zen pathThe Art of Presentation. Following the Zen path
The Art of Presentation. Following the Zen path
Alberto de Vega Luna
 
Wishes or Woes: Santa Knows How to Help
Wishes or Woes: Santa Knows How to HelpWishes or Woes: Santa Knows How to Help
Wishes or Woes: Santa Knows How to Help
Allen Interactions
 

Similar to The Language of Interfaces (20)

Sticky Presentations
Sticky PresentationsSticky Presentations
Sticky Presentations
 
How To Build A Presentation Like A Hand Grenade.pdf
How To Build A Presentation Like A Hand Grenade.pdfHow To Build A Presentation Like A Hand Grenade.pdf
How To Build A Presentation Like A Hand Grenade.pdf
 
Presentation Redux @ Lanco Infratch
Presentation Redux @ Lanco InfratchPresentation Redux @ Lanco Infratch
Presentation Redux @ Lanco Infratch
 
Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...
Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...
Notebook Neophyte to Whiteboard Warrior [d.school Pop-up Class, Oct 25 + Nov ...
 
Yes - 50 scientifically proven ways to be persuasive
Yes - 50 scientifically proven ways to be persuasiveYes - 50 scientifically proven ways to be persuasive
Yes - 50 scientifically proven ways to be persuasive
 
Student led Confrence
Student led ConfrenceStudent led Confrence
Student led Confrence
 
Kidding Around: Designing Digital Activities (#mw2012)
Kidding Around: Designing Digital Activities (#mw2012)Kidding Around: Designing Digital Activities (#mw2012)
Kidding Around: Designing Digital Activities (#mw2012)
 
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
Des Traynor: Slik skriver du mikrotekster (Webdagene 2012)
 
Unit 4
Unit 4Unit 4
Unit 4
 
Presentationskillsv1 090808075730 Phpapp01
Presentationskillsv1 090808075730 Phpapp01Presentationskillsv1 090808075730 Phpapp01
Presentationskillsv1 090808075730 Phpapp01
 
The Visual Presentation Era
The Visual Presentation EraThe Visual Presentation Era
The Visual Presentation Era
 
Presentationskillsv1 090808075730-phpapp01
Presentationskillsv1 090808075730-phpapp01Presentationskillsv1 090808075730-phpapp01
Presentationskillsv1 090808075730-phpapp01
 
Scott_Herron_Portfolio
Scott_Herron_PortfolioScott_Herron_Portfolio
Scott_Herron_Portfolio
 
Final_Presentation
Final_PresentationFinal_Presentation
Final_Presentation
 
Presentation_Final
Presentation_FinalPresentation_Final
Presentation_Final
 
EIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My Vibe
EIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My VibeEIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My Vibe
EIA2018ITALY - Bianca Praetorius - Pitch Don’t Kill My Vibe
 
Communication for success[1] (1) 1
Communication for success[1] (1) 1Communication for success[1] (1) 1
Communication for success[1] (1) 1
 
Future of Conferences John Allsopp
Future of Conferences John AllsoppFuture of Conferences John Allsopp
Future of Conferences John Allsopp
 
The Art of Presentation. Following the Zen path
The Art of Presentation. Following the Zen pathThe Art of Presentation. Following the Zen path
The Art of Presentation. Following the Zen path
 
Wishes or Woes: Santa Knows How to Help
Wishes or Woes: Santa Knows How to HelpWishes or Woes: Santa Knows How to Help
Wishes or Woes: Santa Knows How to Help
 

Recently uploaded

一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
RashmitaSwain3
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 

Recently uploaded (20)

一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 

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
  • 10.
  • 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
  • 72.
  • 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
  • 106.
  • 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.