Deciphering Usability
Typical work flow:
- Boss describes a feature
- Artist designs the UI
- Hacker develops the UI
Deciphering Usability
Today I will show you:
- Developers can improve usability
- Hover effects
- JavaScript animations
- CSS 3D animations
Deciphering Usability
What's missing from the design?
- Mouse Cursors
- Hover Effects
- Animations
Don't Make Me Think
Don't Make Me Think
Users like interfaces that are
- obvious
- predictable
- reassuring
Mouse Cursors
If it's clickable, use
cursor:pointer 
If it's draggable, use
cursor:move 
Hover Effects
If it's clickable, consider a hover effect
- underline
#button:hover {
text-decoration: underline
}
Hover Effects
If it's clickable, consider a hover effect
- colour
#button:hover {
background: yellow
}
Hover Effects
If it's clickable, consider a hover effect
- movement
#button:hover {
box-shadow: 3px 3px 6px #000;
margin-left: -5px;
margin-top: -5px;
}
Animations
Slide animations
- eg. open a menu or section
Animations
Fade animations
- eg. fade in an error message
Animations
Movement animations
- eg. add to shopping cart
Animations
Resize animations
- eg. open popup
-
Animations
Flip animations
- eg. have content on "back"
-
FRONTBACK
Deciphering Usability
Today you've seen
- Hover Effects
- jQuery Animations
- CSS 3D Animations
- How developers can boost usability