when interface design attacks
DESCRIPTION
TRANSCRIPT
![Page 1: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/1.jpg)
Don’t let this be you
![Page 2: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/2.jpg)
it probably has been you
![Page 3: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/3.jpg)
when interface design
ATTACKS!Sanity in Interface Design for Developers
(Yes, it’s possible!)
Amy Hoy (http://www.slash7.com/), OSCON 2006
![Page 4: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/4.jpg)
Developer, n.Wears many
hats
![Page 5: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/5.jpg)
Development
![Page 6: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/6.jpg)
Development Security
![Page 7: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/7.jpg)
Development Security
Testing
![Page 8: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/8.jpg)
Development Security
Testing Interface Design??
![Page 9: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/9.jpg)
you want me to wear what??
![Page 10: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/10.jpg)
thesetupor, what i’m going to try toconvince you is good for you
![Page 11: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/11.jpg)
user interface is critical
![Page 12: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/12.jpg)
effectiveness is important,
but...
![Page 13: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/13.jpg)
people have feelings about
software.
![Page 14: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/14.jpg)
Photo © Malingering, http://www.flickr.com/people/malingering/
oh brother, not this
kumbaya BS again
![Page 15: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/15.jpg)
feelings can make or lose you
$$$$$$$$
![Page 16: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/16.jpg)
user interface is scienceand good business
THE SCIENCE PEOPLE SAY
![Page 17: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/17.jpg)
what isuser interface?or, all the bits and pieces you should worry about (and may not have been worrying about hitherto)
![Page 18: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/18.jpg)
the stuff you see and click on. durrrr.
![Page 19: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/19.jpg)
interfaceexpectations
interaction
behavior
![Page 20: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/20.jpg)
interfaceexpectations
interaction
behavior
expectationsthe stuff that your user brings
to the relationship—in some cases, baggage
![Page 21: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/21.jpg)
interfaceexpectations
interaction
behavior
interaction itselfwhat people typically think of as usability—what happens when i click here? how do i get to my
account?
![Page 22: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/22.jpg)
interfaceexpectations
interaction
behavior
oh, behavehumans love to attribute
personalities to inanimate things. your software has a personality. do
you know what it is?
![Page 23: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/23.jpg)
basicprinciplesdon’t leave home without it. don’t design interfaces without it.
![Page 24: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/24.jpg)
users’ brains are affected by
literacy
THE SCIENCE PEOPLE SAY
![Page 25: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/25.jpg)
your brain on UI
![Page 26: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/26.jpg)
your brain on UI
startemphasis
endno emphasis
line endingshave visualemphasis(the pause)
![Page 27: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/27.jpg)
users adapt to web design
THE SCIENCE PEOPLE SAY
![Page 28: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/28.jpg)
still visually prominent
tuned out
when not actively
searching
![Page 29: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/29.jpg)
if it looks like an ad, they’ll
ignore it
THE SCIENCE PEOPLE SAY
![Page 30: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/30.jpg)
users “satisfice” or give up
THE SCIENCE PEOPLE SAY
![Page 31: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/31.jpg)
below the “fold”
some users never scroll at all
![Page 32: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/32.jpg)
users scan in predictable
patterns
THE SCIENCE PEOPLE SAY
![Page 33: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/33.jpg)
when actively
searching12 3
4
almost always ignored
![Page 34: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/34.jpg)
30-40% of users have “low
literacy”
THE SCIENCE PEOPLE SAY
![Page 35: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/35.jpg)
I read slowly, but i’m not worthless.
:(
![Page 36: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/36.jpg)
takeactionreal stuff you can do right now to improve your interfaces
![Page 37: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/37.jpg)
Low Literacykeep it simple
highlight key text
take-action solutions for:
Use Headings• And• Bulleted Lists
break text into paragraphs
![Page 38: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/38.jpg)
Forms: LabelsUse label tags
take-action solutions for:
<input type=”checkbox” name=”field_name” /><label for=”field_name”>Checkbox</label>
Give inline hints for fieldslabel hint
Contents (possibly examples) and
behavior
![Page 39: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/39.jpg)
Forms: Label LayoutLabels on top
take-action solutions for:
label hint
Easier to scanEasier to read
Hints should stand out
![Page 40: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/40.jpg)
Forms: SegmentationSimple segmentation givesmomentum & direction
take-action solutions for:
HeadingsSimple horizontal rulesSubtle color blocksNumbered steps
![Page 41: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/41.jpg)
Forms: Segmentationtake-action solutions for:
segmentationdoesn't require tip
inline context
![Page 42: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/42.jpg)
Forms: Segmentation
tips in action
content clue
sectioning
scaling help messages
![Page 43: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/43.jpg)
Forms: Segmentationhelp message
sectioning
inline
context
![Page 44: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/44.jpg)
Forms: ButtonsMake it tough to accidentally click
take-action solutions for:
Describe results in clear English
De-emphasize or even remove negative action choices
Don’t Do This!
![Page 45: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/45.jpg)
Forms: Field TypesField types matter
take-action solutions for:
Users will “satisfice” when there are hidden options
Selects should be avoided
Provide both positive and negative choices (yes/no) when the user may want to “say no”
Especially multi-selects
Just one choice per line, please!
![Page 46: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/46.jpg)
Tip: Address Formstake-action solutions for:
here's another idea:save people even more time...place the most likely choices
at the top.
![Page 47: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/47.jpg)
Tip: Dates Selectstake-action solutions for:
![Page 48: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/48.jpg)
Tip: Ordering Pages
![Page 49: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/49.jpg)
Tip: Caveat Usertake-action solutions for:
People don’t know what they want. They just think they do.
![Page 50: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/50.jpg)
moreresourcesor, visit my web site for a list of these things so you don’t have to remember them all
![Page 51: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/51.jpg)
Books
![Page 52: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/52.jpg)
Sites & BlogsCreating Passionate Users
LukeW Interface DesignsKathy Sierra
Luke Wroblewski
UsabilityWorksMatthew Oliphant
UXD - User eXperience DesignSholom Sandalow, et al
UIE - User Interface Engineering
![Page 54: When Interface Design Attacks](https://reader030.vdocument.in/reader030/viewer/2022020217/54c17adc4a7959a6318b45d3/html5/thumbnails/54.jpg)
Abort
Retry
KILL!
An unexpected error has occured.