SlideShare une entreprise Scribd logo
1  sur  54
Don’t let this be you
it probably has been
        you
when
   interface design
ATTACKS!
Sanity in Interface Design for Developers
            (Yes, it’s possible!)



   Amy Hoy (http://www.slash7.com/), OSCON 2006
Developer, n.
Wears many
        hats
Development
Security
Development
Security
Development




   Testing
Security
Development




   Testing    Interface Design??
you want me to
  wear what??
the
setup
or, what i’m going to try to
convince you is good for
you
user interface
    is critical
effectiveness is
     important,
          but...
people have
feelings about
     software.
oh brother,
                                not this
                               kumbaya BS
                                  again




Photo © Malingering, http://www.flickr.com/people/malingering/
feelings can
make or lose you
     $$$$$$$$
THE SCIENCE PEOPLE SAY
 user interface
     is science
        and good business
what is
user
interface?
or, all the bits and pieces you
should worry about (and may
not have been worrying about
hitherto)
the stuff you
see and click
 on. durrrr.
interface
 expectations

 interaction

  behavior
interface
          expectations

           interaction

            behavior




 expectations
the stuff that your user brings
 to the relationship—in some
        cases, baggage
interface
           expectations

            interaction

             behavior




interaction itself
what people typically think of as
usability—what happens when i
 click here? how do i get to my
           account?
interface
            expectations

             interaction

              behavior




      oh, behave
     humans love to attribute
 personalities to inanimate things.
your software has a personality. do
       you know what it is?
basic
principles
don’t leave home without it.
don’t design interfaces without it.
THE SCIENCE PEOPLE SAY
  users’ brains
are affected by
       literacy
your brain on UI
start
emphasis
                              line endings
                              have visual
                              emphasis
                              (the pause)




                              end
                              no emphasis



           your brain on UI
THE SCIENCE PEOPLE SAY
 users adapt to
    web design
still visually prominent




when not
  actively
searching




                       tuned out
THE SCIENCE PEOPLE SAY
 if it looks like
  an ad, they’ll
        ignore it
THE SCIENCE PEOPLE SAY
           users
     “satisfice”
      or give up
below the “fold”


              some users never scroll at all
THE SCIENCE PEOPLE SAY
  users scan in
   predictable
      patterns
4

    when
                  1
  actively   2                   3
searching




             almost always ignored
THE SCIENCE PEOPLE SAY

30-40% of users
     have “low
      literacy”
I read slowly,
  but i’m not
  worthless.
       :(
take
action
real stuff you can do right
now to improve your
interfaces
take-action solutions for:
           Low Literacy
        keep it simple
        break text into paragraphs
        highlight key text
        Use Headings
            • And
            • Bulleted Lists
take-action solutions for:
           Forms: Labels
        Use label tags
        <input type=”checkbox” name=”field_name” />
          <label for=”field_name”>Checkbox</label>


     Give inline hints for fields
                                       Contents (possibly
             label         hint
                                         examples) and
                                            behavior
take-action solutions for:
     Forms: Label Layout
                               Easier to scan
        Labels on top          Easier to read


        Hints should stand out
                label        hint
take-action solutions for:
     Forms: Segmentation
        Simple segmentation gives
        momentum & direction
        Headings
        Simple horizontal rules
        Subtle color blocks
        Numbered steps
take-action solutions for:
     Forms: Segmentation
                             doesn't require tip
       segmentation




      inline context
Forms: Segmentation
scaling help messages




 tips in
                          sectioning
 action



content
  clue
Forms: Segmentation
        help message




sectioning




  inline
 context
take-action solutions for:
     Forms: Buttons
    Make it tough to accidentally click
    Describe results in                   Don’t Do
                                          This!

    clear English
      De-emphasize or
      even remove
      negative action
      choices
take-action solutions for:
     Forms: Field Types
     Field types matter
     Users will “satisfice” when there
     are hidden options
     Selects should be avoided
     Especially multi-selects
       Provide both positive and
       negative choices (yes/no)
       when the user may want to
       “say no”

         Just one choice per line,
         please!
take-action solutions for:
     Tip: Address Forms




                      here's another idea:
                 save people even more time...
                  place the most likely choices
                           at the top.
take-action solutions for:
     Tip: Dates Selects
Tip: Ordering Pages
take-action solutions for:
     Tip: Caveat User




        People don’t know what they
        want. They just think they do.
more
resources
or, visit my web site for a list
of these things so you don’t
have to remember them all
Books
Sites & Blogs
Creating Passionate Users
Kathy Sierra

LukeW Interface Designs
Luke Wroblewski

UsabilityWorks
Matthew Oliphant

UXD - User eXperience Design
Sholom Sandalow, et al

UIE - User Interface Engineering
www.slash7.com
An unexpected error
   has occured.

       Abort

       Retry

       KILL!

Contenu connexe

En vedette

Vacaciones De Invierno
Vacaciones De InviernoVacaciones De Invierno
Vacaciones De Invierno
brianblu
 
富士山Vs賞櫻
富士山Vs賞櫻富士山Vs賞櫻
富士山Vs賞櫻
honan4108
 
sist solar
sist solarsist solar
sist solar
noraznar
 
這是你的船
這是你的船這是你的船
這是你的船
honan4108
 
Sintesis Mod2
Sintesis Mod2Sintesis Mod2
Sintesis Mod2
Clota
 
Dbi Advanced Talk 200708
Dbi Advanced Talk 200708Dbi Advanced Talk 200708
Dbi Advanced Talk 200708
oscon2007
 
Os Vanlindberg
Os VanlindbergOs Vanlindberg
Os Vanlindberg
oscon2007
 
El Mundo De Los Copleros 2
El  Mundo De Los Copleros 2El  Mundo De Los Copleros 2
El Mundo De Los Copleros 2
liliC
 

En vedette (20)

Mobile Monday Delhi - Fourth Edition
Mobile Monday Delhi - Fourth EditionMobile Monday Delhi - Fourth Edition
Mobile Monday Delhi - Fourth Edition
 
Decimoctava Cata
Decimoctava CataDecimoctava Cata
Decimoctava Cata
 
Vacaciones De Invierno
Vacaciones De InviernoVacaciones De Invierno
Vacaciones De Invierno
 
Os Khera
Os KheraOs Khera
Os Khera
 
富士山Vs賞櫻
富士山Vs賞櫻富士山Vs賞櫻
富士山Vs賞櫻
 
Fractais
FractaisFractais
Fractais
 
sist solar
sist solarsist solar
sist solar
 
這是你的船
這是你的船這是你的船
這是你的船
 
Sintesis Mod2
Sintesis Mod2Sintesis Mod2
Sintesis Mod2
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Dbi Advanced Talk 200708
Dbi Advanced Talk 200708Dbi Advanced Talk 200708
Dbi Advanced Talk 200708
 
CumpleañOs En El ZoolóGico
CumpleañOs En El ZoolóGicoCumpleañOs En El ZoolóGico
CumpleañOs En El ZoolóGico
 
ApresentaçãO11
ApresentaçãO11ApresentaçãO11
ApresentaçãO11
 
Dios te dice
Dios te diceDios te dice
Dios te dice
 
calesitas
calesitascalesitas
calesitas
 
Os Vanlindberg
Os VanlindbergOs Vanlindberg
Os Vanlindberg
 
sist sol
sist solsist sol
sist sol
 
Umahistoriadeamor
UmahistoriadeamorUmahistoriadeamor
Umahistoriadeamor
 
El Mundo De Los Copleros 2
El  Mundo De Los Copleros 2El  Mundo De Los Copleros 2
El Mundo De Los Copleros 2
 
Contenidos Digitales Colaborativos
Contenidos Digitales ColaborativosContenidos Digitales Colaborativos
Contenidos Digitales Colaborativos
 

Similaire à When Interface Design Attacks

Website Usability | Day 3
Website Usability | Day 3Website Usability | Day 3
Website Usability | Day 3
studiokandm
 
UPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer TidwellUPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer Tidwell
guestf59d1c4
 
UPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer TidwellUPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer Tidwell
nikrao
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
CenergyDave
 

Similaire à When Interface Design Attacks (20)

Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesYikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
 
Usability - what is it & why is it important
Usability - what is it & why is it importantUsability - what is it & why is it important
Usability - what is it & why is it important
 
Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
UIDB - Day 1
UIDB -  Day 1UIDB -  Day 1
UIDB - Day 1
 
Website Usability | Day 3
Website Usability | Day 3Website Usability | Day 3
Website Usability | Day 3
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
UPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer TidwellUPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer Tidwell
 
UPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer TidwellUPA2007 Designing Interfaces Jenifer Tidwell
UPA2007 Designing Interfaces Jenifer Tidwell
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
Being a designer
Being a designerBeing a designer
Being a designer
 
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015
 
Usability
UsabilityUsability
Usability
 
Scopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
 
Ui design
Ui designUi design
Ui design
 

Plus de oscon2007

J Ruby Whirlwind Tour
J Ruby Whirlwind TourJ Ruby Whirlwind Tour
J Ruby Whirlwind Tour
oscon2007
 
Solr Presentation5
Solr Presentation5Solr Presentation5
Solr Presentation5
oscon2007
 
Os Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman WiifmOs Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman Wiifm
oscon2007
 
Performance Whack A Mole
Performance Whack A MolePerformance Whack A Mole
Performance Whack A Mole
oscon2007
 
Os Lanphier Brashears
Os Lanphier BrashearsOs Lanphier Brashears
Os Lanphier Brashears
oscon2007
 
Os Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman SwpOs Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman Swp
oscon2007
 
Os Berlin Dispelling Myths
Os Berlin Dispelling MythsOs Berlin Dispelling Myths
Os Berlin Dispelling Myths
oscon2007
 
Os Keysholistic
Os KeysholisticOs Keysholistic
Os Keysholistic
oscon2007
 
Os Jonphillips
Os JonphillipsOs Jonphillips
Os Jonphillips
oscon2007
 
Os Urnerupdated
Os UrnerupdatedOs Urnerupdated
Os Urnerupdated
oscon2007
 

Plus de oscon2007 (20)

J Ruby Whirlwind Tour
J Ruby Whirlwind TourJ Ruby Whirlwind Tour
J Ruby Whirlwind Tour
 
Solr Presentation5
Solr Presentation5Solr Presentation5
Solr Presentation5
 
Os Borger
Os BorgerOs Borger
Os Borger
 
Os Harkins
Os HarkinsOs Harkins
Os Harkins
 
Os Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman WiifmOs Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman Wiifm
 
Os Bunce
Os BunceOs Bunce
Os Bunce
 
Yuicss R7
Yuicss R7Yuicss R7
Yuicss R7
 
Performance Whack A Mole
Performance Whack A MolePerformance Whack A Mole
Performance Whack A Mole
 
Os Fogel
Os FogelOs Fogel
Os Fogel
 
Os Lanphier Brashears
Os Lanphier BrashearsOs Lanphier Brashears
Os Lanphier Brashears
 
Os Tucker
Os TuckerOs Tucker
Os Tucker
 
Os Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman SwpOs Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman Swp
 
Os Furlong
Os FurlongOs Furlong
Os Furlong
 
Os Berlin Dispelling Myths
Os Berlin Dispelling MythsOs Berlin Dispelling Myths
Os Berlin Dispelling Myths
 
Os Kimsal
Os KimsalOs Kimsal
Os Kimsal
 
Os Pruett
Os PruettOs Pruett
Os Pruett
 
Os Alrubaie
Os AlrubaieOs Alrubaie
Os Alrubaie
 
Os Keysholistic
Os KeysholisticOs Keysholistic
Os Keysholistic
 
Os Jonphillips
Os JonphillipsOs Jonphillips
Os Jonphillips
 
Os Urnerupdated
Os UrnerupdatedOs Urnerupdated
Os Urnerupdated
 

Dernier

Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Dipal Arora
 
Call Girls In Noida 959961⊹3876 Independent Escort Service Noida
Call Girls In Noida 959961⊹3876 Independent Escort Service NoidaCall Girls In Noida 959961⊹3876 Independent Escort Service Noida
Call Girls In Noida 959961⊹3876 Independent Escort Service Noida
dlhescort
 
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
dlhescort
 
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service BangaloreCall Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
amitlee9823
 
0183760ssssssssssssssssssssssssssss00101011 (27).pdf
0183760ssssssssssssssssssssssssssss00101011 (27).pdf0183760ssssssssssssssssssssssssssss00101011 (27).pdf
0183760ssssssssssssssssssssssssssss00101011 (27).pdf
Renandantas16
 
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
lizamodels9
 

Dernier (20)

Falcon's Invoice Discounting: Your Path to Prosperity
Falcon's Invoice Discounting: Your Path to ProsperityFalcon's Invoice Discounting: Your Path to Prosperity
Falcon's Invoice Discounting: Your Path to Prosperity
 
Dr. Admir Softic_ presentation_Green Club_ENG.pdf
Dr. Admir Softic_ presentation_Green Club_ENG.pdfDr. Admir Softic_ presentation_Green Club_ENG.pdf
Dr. Admir Softic_ presentation_Green Club_ENG.pdf
 
John Halpern sued for sexual assault.pdf
John Halpern sued for sexual assault.pdfJohn Halpern sued for sexual assault.pdf
John Halpern sued for sexual assault.pdf
 
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
 
Monthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptxMonthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptx
 
It will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 MayIt will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 May
 
Falcon Invoice Discounting platform in india
Falcon Invoice Discounting platform in indiaFalcon Invoice Discounting platform in india
Falcon Invoice Discounting platform in india
 
Call Girls In Noida 959961⊹3876 Independent Escort Service Noida
Call Girls In Noida 959961⊹3876 Independent Escort Service NoidaCall Girls In Noida 959961⊹3876 Independent Escort Service Noida
Call Girls In Noida 959961⊹3876 Independent Escort Service Noida
 
Phases of Negotiation .pptx
 Phases of Negotiation .pptx Phases of Negotiation .pptx
Phases of Negotiation .pptx
 
B.COM Unit – 4 ( CORPORATE SOCIAL RESPONSIBILITY ( CSR ).pptx
B.COM Unit – 4 ( CORPORATE SOCIAL RESPONSIBILITY ( CSR ).pptxB.COM Unit – 4 ( CORPORATE SOCIAL RESPONSIBILITY ( CSR ).pptx
B.COM Unit – 4 ( CORPORATE SOCIAL RESPONSIBILITY ( CSR ).pptx
 
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
 
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service BangaloreCall Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
 
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
 
Ensure the security of your HCL environment by applying the Zero Trust princi...
Ensure the security of your HCL environment by applying the Zero Trust princi...Ensure the security of your HCL environment by applying the Zero Trust princi...
Ensure the security of your HCL environment by applying the Zero Trust princi...
 
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
 
Organizational Transformation Lead with Culture
Organizational Transformation Lead with CultureOrganizational Transformation Lead with Culture
Organizational Transformation Lead with Culture
 
0183760ssssssssssssssssssssssssssss00101011 (27).pdf
0183760ssssssssssssssssssssssssssss00101011 (27).pdf0183760ssssssssssssssssssssssssssss00101011 (27).pdf
0183760ssssssssssssssssssssssssssss00101011 (27).pdf
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
 
Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023
 
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
 

When Interface Design Attacks