O’Reilly Webcast Presentation Available
I presented Designing Web Interfaces on the O’Reilly Webcast today. Almost 1400 people signed up and the actual attendance hit 862. We set the record for an O’Reilly webcast 
And we had overwhelmingly positive responses to the talk. If you liked the talk & the material then I think you will enjoy the book.
If you did not hear the webcast, check out the slideshare presentation below. It will give you the best flavor for what our book is about (keep in mind much more is in the book with lots more details and guidelines).
The audio will be available in a week or so. Look for a post here when I get the audio to share.
**UPDATE. The actual video & audio of the screencast can be seen on YouTube. Watch it in high resolution.
Nelson Mendes Said,
February 5, 2009 @ 5:41 am
Hi Bill, I would like to thank you for your pro insights on WUI. It was an enriching experience despite the depressive experience with the Webex interface and the sound quality (I wasn’t able to dial in via skype to the webex audio feed). I’m looking forward to the audio bit so I can review all the presentation. I’m now patiently waiting for you book to arrive to my mailbox.
Bill Scott Said,
February 5, 2009 @ 9:56 am
@Nelson,
Yep, I think we completely went past the max of what WebEx was capable of. I felt bad about a number of comments on the poor audio quality.
As soon as O’Reilly makes the audio available I will add it to the slideshare presentation (they have a feature to supply mp3). I will also post it here.
Thanks for the purchase. Love to hear how of practical ways the book helps you in your daily work.
Nelson Mendes Said,
February 10, 2009 @ 3:37 am
Hey, The book as just arrived. I can’t wait for the moment to dive into it.
I’ve just took a peek and found out that some pictures are really blurry and needed an higher quality file (like in page 245), maybe that will be addressed in the next book edition.
Bill Scott Said,
February 10, 2009 @ 8:45 am
@Nelson. Just checked that page in my copy. You are right. For some reason that page seems to have a color registration alignment issue. Just slightly off in the printing process. I have not noticed that on other pages. In fact I was pleasantly surprised with how nice the images came out in the book.
Remember that I have also placed ALL of the images on the companion Flickr site. The figures on p. 245, Figures 12-18 and 12-19 can be found here:
http://flickr.com/photos/designingwebinterfaces/3121483346/in/set-72157611426334282/
http://flickr.com/photos/designingwebinterfaces/3120657237/in/set-72157611426334282/
http://flickr.com/photos/designingwebinterfaces/3121483406/in/set-72157611426334282/
http://flickr.com/photos/designingwebinterfaces/3121483430/in/set-72157611426334282/
I will let O’Reilly know of this issue for that press run for that page.
Thanks!
Bill Scott Said,
February 10, 2009 @ 8:48 am
And just to make a finer point. It is not a problem with the image file but a slight error in the printing process. You can tell because there is a very fine line of color to the edge of the screenshot. The good news is that for that one page, the illustrations don’t require reading the fine text in the screenshot but glancing at the overall page represented.
Nelson Mendes Said,
February 12, 2009 @ 10:59 am
Bill, yes it’s not a big issue. It was just a call for attention. I know you put tall the screens on flickr and that’s was a really good solution.
Loving the book so far.
Nelson Mendes Said,
February 17, 2009 @ 3:52 am
I’ve not found a better entry to post this comment, so here it goes.
I’ve just finished the 2nd chapter of the book – Drag and Drop.
One thing that came to mind after reading it is the problem that can create a default behavior on Mac OS X. If you open a webpage in Safari or Firefox, you’ll find out that it’s possible to drag any image in that page. The image “ghost” is displayed with the cursor movement while dragging it.
In my opinion this can really raise a usability problem with the drag and drop pattern, tricking the user into thinking that some wrong elements are draggable.
This behavior is avoided if the images are actually applied as CSS backgrounds, but that’s a solution that can raise some other technical and accessibility issues.
Please find a screenshot that illustrates this problem here:
http://skitch.com/zyon/br98n/drag-and-drop-in-mac-os-x-problems-with-image-ghosts
Bill Scott Said,
February 17, 2009 @ 7:59 am
@Nelson.
Yes, the default drag and drop behavior in the browsers can definitely confuse users.
You point out one way: using background images. However, in FF3 the second attempt at dragging will be allowed
Actually there is an easy way to prevent the default browser event from firing. Simply add a listener to all your images and in the the listener do an event.preventDefault().
Most drag and drop libraries do this for you which is why once you register drag and drop with say an image it does not get the default behavior (of dragging).
I have done this in the past for hyperlinks (wrote a tool that you could drag links from the page and harvest them into a clipping service). When the user would click on the hyperlink it would activate it so I had to add preventDefault to stop the browser from navigating away from the page when I released on drag.
stopPropogation is another way to control event bubbling, although it completely stops propogation to any listeners while preventDefault simply stops the default browser event.
Here is a nice short article on this: http://develobert.blogspot.com/2008/10/disable-firefox-image-drag.html
For IE it seems a more global way is needed to turn it off:
document.ondragstart = function () { return false; };
Here is what I did (currently turned on for this site using jquery)
$(’img’).bind(’mousedown’, function(e) {
e.preventDefault();
});
document.ondragstart = function () { return false; };
It worked for IE, FF3 & Safari.
Nelson Mendes Said,
February 17, 2009 @ 10:07 am
@Bill
Thanks for the complete explanation. Yes, I’ve never used the drag & drop behaviour before, and after posting the comment I also did some digging into this matter…
If you are not using the drag and drop behavior in your interface, there can be some good reasons to disable it.
Mostly I use jQuery for my web development… and you can stop this behaviour in FF by directly binding the draggesture event:
$(document).bind(”draggesture”,function(){
return false;
})
I’ve not tested but I think you can do the same for IE using the “drag” event instead of “draggesture”
This should work for every draggable element in the document.
Mitch Hazam Said,
March 5, 2009 @ 5:33 pm
I was delighted to see my work featured in your book in the overlays area. Being a designer of UI its easy to always be behind the scenes; so its nice to be recognized for your hard work and have it be appretiated. Great book
Bill Scott Said,
March 5, 2009 @ 5:54 pm
@Mitch.
That would be the AOL Finance work, right? Good stuff. If you have any anecdotes or insights into what led to the approach that would be good to hear.
mitch hazam Said,
May 21, 2010 @ 9:56 am
Bill, sorry for the immensely delayed response. We just redesigned the entire AOL Money site in a re-brand effort to DailyFinance.com. I’d love for you to check it out. I would also love to give you an insights of my work. I am the lead UI for all the news and information sites at AOL and i focus on structured data, mobile and web applications as well as site designs.
I failed to recheck this post and missed your response, but email will always make it to me. Thanks again
Mitch