Via Case’s del.icio.us bookmarks, 30 Usability Issues To Be Aware Of.
Yeah, it’s totally Digg-fodder, but it’s a reasonably good summary of important UI rules and terms such as Fitts’s Law, banner blindness, and the fold.
Thursday, October 18, 2007
Wednesday, October 3, 2007
Defensive Design for the Web
Defensive Design for the Web [Amazon] is among the most eye-opening books written on web design. I cannot recommend this enough to anyone who hopes to have people use his site.
The structure of the book is quite simple: it is a series of annotated screenshots of websites getting user interaction right and websites getting it very, very wrong.
Besides keeping you out of Error’d, Defensive Design for the Web will also inspire you to handle odd and exceptional cases cleverly. It shows well-designed 404 pages, useful “no results” searches, and reasonable recourse when a product in your shopping cart is out-of-stock.
All programmers are lazy. Good programmers are just the ones who know when not to be. If it does nothing else, Defensive Design for the Web will splash some water in your face to keep you awake when handling the out-of-the-ordinary.
More information:
The structure of the book is quite simple: it is a series of annotated screenshots of websites getting user interaction right and websites getting it very, very wrong.
CDNow tells me my “Address Exceeds Maximum Allowable Length” but doesn’t tell me the actual maximum length I can use. As a result, I’m left with the tedious trial-and-error method as the only way to determine how much text is allowed. Plus, who uses language such as “exceeds maximum allowable length?”The primary takeaway from this book is that getting error handling right is hard but it’s worth it. As programmers too close to the machine, sometimes we’re tempted to have our software scream “ILLEGAL INPUT” at inept users and be done with it. This book will embarrass you into remembering that that is a tremendously bad idea. And people will make fun of you if you do it.—Defensive Design for the Web, p70
Besides keeping you out of Error’d, Defensive Design for the Web will also inspire you to handle odd and exceptional cases cleverly. It shows well-designed 404 pages, useful “no results” searches, and reasonable recourse when a product in your shopping cart is out-of-stock.
All programmers are lazy. Good programmers are just the ones who know when not to be. If it does nothing else, Defensive Design for the Web will splash some water in your face to keep you awake when handling the out-of-the-ordinary.
More information:
- Peachpit Press’ product page has a free chapter you can download in PDF format. It’ll tide you over until your copy arrives in the mail.
- Defensive Design for the Web was written by 37signals, the web shop you may know of from them being totally awesome.
XRAY
XRAY is a recent addition to the toolkit. It’s a bookmarklet that will let you click on any element on a page and get a HUD-like popup with computed style information: id, class, position, margin, padding, height, width, etc.
Though XRAY doesn’t give you anything that Firebug [wdt] doesn’t, what it does do it does across browsers, supporting IE6+, Safari 2+, and Camino. This makes it fairly useful for debugging cross-browser layout problems.
Tip: You can click on the element names under “inheritance hierarchy” to walk up the tree and inspect parents and grandparents.
Though XRAY doesn’t give you anything that Firebug [wdt] doesn’t, what it does do it does across browsers, supporting IE6+, Safari 2+, and Camino. This makes it fairly useful for debugging cross-browser layout problems.
Tip: You can click on the element names under “inheritance hierarchy” to walk up the tree and inspect parents and grandparents.
Firebug
Firebug is the single worst extension that you can add to Firefox [wdt] if you’re interested in browser performance and stability. I say this both as a bit of a warning and an endorsement, since its value far outweighs the damage it will do.
Firebug is an all-purpose tool for figuring out what the crap is happening on a web page. It has a JavaScript console (complete with REPL) and debugger (complete with breakpoints and stepping). It keeps track of all browser requests, either resources referenced from the HTML or XmlHttpRequests from JavaScript, and tells you how long they took as well as headers and content from both request and response.
On top of that, Firebug has a nice DOM inspector and CSS inspector, and rudimentary CSS editing. You’ll still want the Web Developer Toolbar for more advanced CSS editing, however.
Plus, Firebug helps feed any nostalgia you may have had for the Ye Olde Crashy Days of browsers past.
Tip: Use the bug icon’s menu to turn Firebug off for Gmail [wdt] or Firefox will get unhappy quickly. Though I recommend using Camino [wdt] for Gmail anyway.
Firebug is an all-purpose tool for figuring out what the crap is happening on a web page. It has a JavaScript console (complete with REPL) and debugger (complete with breakpoints and stepping). It keeps track of all browser requests, either resources referenced from the HTML or XmlHttpRequests from JavaScript, and tells you how long they took as well as headers and content from both request and response.
On top of that, Firebug has a nice DOM inspector and CSS inspector, and rudimentary CSS editing. You’ll still want the Web Developer Toolbar for more advanced CSS editing, however.
Plus, Firebug helps feed any nostalgia you may have had for the Ye Olde Crashy Days of browsers past.
Tip: Use the bug icon’s menu to turn Firebug off for Gmail [wdt] or Firefox will get unhappy quickly. Though I recommend using Camino [wdt] for Gmail anyway.
Use "Option click to position cursor" in Mac OS X Terminal
The Mac OS X Terminal application has a useful setting under Terminal > Window Settings… > Emulation to let you set the cursor by option-clicking.This is very handy when editing typos in file paths or other operations that would otherwise involve a lot of left-arrowing.
Even better, this works with GNU Screen!
Gmail
I will honestly say that I cannot imagine doing my job without Gmail. Using it from anywhere is a great plus, but the conversation view is Gmail’s total killer feature.
At least in my job, there are so many balls in the air at any one time, and so many people contributing to discussions and decisions made over e-mail, that being able to see every message in the context of its complete thread is indispensable.
Tip: Turn on Gmail’s keyboard shortcuts and use the M key to mute (or “murder”) threads on mailing lists that you don’t care about. Future replies will go directly to your archives.
At least in my job, there are so many balls in the air at any one time, and so many people contributing to discussions and decisions made over e-mail, that being able to see every message in the context of its complete thread is indispensable.
Tip: Turn on Gmail’s keyboard shortcuts and use the M key to mute (or “murder”) threads on mailing lists that you don’t care about. Future replies will go directly to your archives.
Google Browser Sync
Google Browser Sync is a very handy Firefox extension that lets you keep more than one copy of Firefox [wdt] in sync across the same or different computers. By “in sync” I mean that it copies over your bookmarks (and bookmarklets!), saved passwords, and even cookies between Firefox installs.
It won’t sync your Firefox extensions, but we can’t have everything.
Also, Google Browser Sync was written by Aaron Boodman, and he’s awesome.
It won’t sync your Firefox extensions, but we can’t have everything.
Also, Google Browser Sync was written by Aaron Boodman, and he’s awesome.
Firefox
I’m not 100% on Firefox being the best browser overall (I’ve been using Safari 3 for the past few weeks; I heart iPhone integration), but it’s far and away the best browser for web developmen
Besides its pretty-much-the-best standards support, Firefox shines with its extensions. They will make your web development, tweaking, troubleshooting, and debugging so much better.
You’ll want it for your Mac [wdt], but it’s worth putting on your Windows [wdt] machine as well. You can use Google Browser Sync [wdt] to keep everything in line.
See also: Web Dev Things’ Firefox extensions
Besides its pretty-much-the-best standards support, Firefox shines with its extensions. They will make your web development, tweaking, troubleshooting, and debugging so much better.
You’ll want it for your Mac [wdt], but it’s worth putting on your Windows [wdt] machine as well. You can use Google Browser Sync [wdt] to keep everything in line.
See also: Web Dev Things’ Firefox extensions
Mac OS X
I’m pretty much going to assume that you’re doing your work on a Mac. I could go on and on about this, but the whole “just works” thing is pretty important for getting stuff done.
You may ask, since Windows [wdt] is essential, whether or not you should just use Windows exclusively (since even Safari is no longer exclusive with Safari 3). If you ask this, I have nothing more to say to you.
You may ask, since Windows [wdt] is essential, whether or not you should just use Windows exclusively (since even Safari is no longer exclusive with Safari 3). If you ask this, I have nothing more to say to you.
Windows
It’s a bit of a sad fact, but you can’t do serious or even amateur web development without handy access to Windows. I mean, obviously you’re using Mac OS X [wdt] for doing actual work, but you’ll always need to check your work with our good friend Internet Explorer 6, still the #1 browser on this here Internet.
For Windows on your Intel Mac, Parallels is a pretty good bet (Boot Camp is not, unless it’s on a second Mac, since you don’t want to go through the whole shutdown-startup thing all the time).
If you’re running a separate Windows box, use Synergy as a software KVM. It’s elegant and seamless, and also handles syncing your clipboard back and forth, which is invaluable.
For Windows on your Intel Mac, Parallels is a pretty good bet (Boot Camp is not, unless it’s on a second Mac, since you don’t want to go through the whole shutdown-startup thing all the time).
If you’re running a separate Windows box, use Synergy as a software KVM. It’s elegant and seamless, and also handles syncing your clipboard back and forth, which is invaluable.
Subscribe to:
Posts (Atom)
