SlideShare ist ein Scribd-Unternehmen logo
1 von 109
Downloaden Sie, um offline zu lesen
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.

Más contenido relacionado

Was ist angesagt?

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 38Seomra 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 29Seomra 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 24Seomra Ranga
 
Hora a Pháid Ceacht 17
Hora a Pháid Ceacht 17Hora a Pháid Ceacht 17
Hora a Pháid Ceacht 17Seomra 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 33Seomra 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 26Seomra 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 31Seomra Ranga
 
Hora a Pháid - Ceacht 34
Hora a Pháid - Ceacht 34Hora a Pháid - Ceacht 34
Hora a Pháid - Ceacht 34Seomra 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 28Seomra 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 32Seomra 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 23Seomra 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 kidsMike Miello
 

Was ist angesagt? (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
 

Andere mochten auch

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 ApplicationsDes 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 DesignMichael Smyth
 
Simplify by Orders of Magnitude
Simplify by Orders of MagnitudeSimplify by Orders of Magnitude
Simplify by Orders of MagnitudeDes Traynor
 
Artificial emotional intelligence - Giles Colborne
Artificial emotional intelligence - Giles ColborneArtificial emotional intelligence - Giles Colborne
Artificial emotional intelligence - Giles Colbornecxpartners
 
Culture + Design
Culture + DesignCulture + Design
Culture + DesignErik 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 DesignerLis 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 StrategiesTheresa 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 ArchitectureInfosys
 
Design Patterns
Design PatternsDesign Patterns
Design Patternsadil 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 : DiversificationAJ Raina
 
Based Design Pattern Examples
Based Design Pattern ExamplesBased Design Pattern Examples
Based Design Pattern ExamplesAbanoub Hanna
 
Interaction Design History
Interaction Design HistoryInteraction Design History
Interaction Design HistoryMarc 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 DesignStephen Anderson
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture HeuristicsAbby Covert
 
Android 4.0 UI Design Tips
Android 4.0 UI Design TipsAndroid 4.0 UI Design Tips
Android 4.0 UI Design TipsJustin Lee
 

Andere mochten auch (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
 

Ähnlich wie The Language of Interfaces

Sticky Presentations
Sticky PresentationsSticky Presentations
Sticky PresentationsLibby 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.pdfOje Ojeaga
 
Presentation Redux @ Lanco Infratch
Presentation Redux @ Lanco InfratchPresentation Redux @ Lanco Infratch
Presentation Redux @ Lanco InfratchMohit 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 persuasiveJussi Laakkonen
 
Student led Confrence
Student led ConfrenceStudent led Confrence
Student led Confrenceguest9c9930
 
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
 
Presentationskillsv1 090808075730-phpapp01
Presentationskillsv1 090808075730-phpapp01Presentationskillsv1 090808075730-phpapp01
Presentationskillsv1 090808075730-phpapp01loramparlove
 
Presentationskillsv1 090808075730 Phpapp01
Presentationskillsv1 090808075730 Phpapp01Presentationskillsv1 090808075730 Phpapp01
Presentationskillsv1 090808075730 Phpapp01gvanesa
 
The Visual Presentation Era
The Visual Presentation EraThe Visual Presentation Era
The Visual Presentation EraMohamad Badr
 
Fearless Drawing. Illustrated Adventures for Overcoming Artistic Adversity
Fearless Drawing. Illustrated Adventures for Overcoming Artistic AdversityFearless Drawing. Illustrated Adventures for Overcoming Artistic Adversity
Fearless Drawing. Illustrated Adventures for Overcoming Artistic AdversityE-knowledge Library Solution
 
Scott_Herron_Portfolio
Scott_Herron_PortfolioScott_Herron_Portfolio
Scott_Herron_PortfolioScott Herron
 
Final_Presentation
Final_PresentationFinal_Presentation
Final_Presentationarielwollek
 
Presentation_Final
Presentation_FinalPresentation_Final
Presentation_Finalarielwollek
 
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 VibeEuropean Innovation Academy
 
Communication for success[1] (1) 1
Communication for success[1] (1) 1Communication for success[1] (1) 1
Communication for success[1] (1) 1Grp Tirpude
 
Future of Conferences John Allsopp
Future of Conferences John AllsoppFuture of Conferences John Allsopp
Future of Conferences John Allsoppnswkmforum
 
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 pathAlberto de Vega Luna
 

Ähnlich wie 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
 
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
 
Fearless Drawing. Illustrated Adventures for Overcoming Artistic Adversity
Fearless Drawing. Illustrated Adventures for Overcoming Artistic AdversityFearless Drawing. Illustrated Adventures for Overcoming Artistic Adversity
Fearless Drawing. Illustrated Adventures for Overcoming Artistic Adversity
 
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
 

Último

F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 

Último (20)

F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 

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.