The new Find feature introduced in Safari 3 Public Beta delights us with Apple’s famous attention to detail.

Even its initial appearance onscreen reveals surprises. When you invoke Find in Safari, a banner slides down from above. Other animated user interface elements also slide down from above: sheets hover above but do not disturb the page content, while overlays like Safari’s RSS reader replace the window contents entirely.

But because Safari’s Find is modeless, the find banner pushes the window’s contents downwards by the height of the banner, allowing both banner and content to coexist within the window and remain selectable.

Straightforward enough in concept, but there’s an elegant touch in the implementation. A simpler effort might have pushed the content down by the height of the banner, and slid the banner into the resulting gap, something like this:

That would certainly have worked, but pushing the content down like that lacks grace. Notice in the picture above how the woman’s face is 25 pixels lower on the right. You didn’t want everything to slide down—you just wanted to find something!

Apple’s Safari solution? While pushing the content downward to make room for the find banner, scroll the content upward by a corresponding amount. In the screenshot below, note how Safari has automatically scrolled the image by 25 pixels, the exact height of the find banner. This keeps the window content in place, undisturbed. And, because the window contents no longer appear to move at all, the eye is drawn to the find banner sliding down into place.

This happens dynamically, too. Watch carefully and you can see banner and scrollbar animating synchronously. Lovely attention to detail specifically applied so that you don’t even notice.

There are other nice touches. Once that find banner appears, Safari starts looking ahead for matching text as you type, and darkens the page to highlight each occurrence of the matching text in a white rectangle with drop-shadow. The current match is specially highlighted in an orange rounded rectangle with a strong white border and drop-shadow. To distinguish the current match even further, the orange rounded rectangle sproings! into place with an animated squash-and-stretch. That little touch of animation makes the selection jump off the page for a moment, the motion drawing your eye to it.

Take a look in Safari’s Find menu to see other helpful options, including Jump to Selection. When you’ve selected text on the page then scrolled elsewhere on the page, hiding the selection, Jump to Selection auto-scrolls the selection back into view with another squash-and-stretch sproing!.

Nice work, Safari team!

Update: The final version of Safari that shipped in Leopard added even more refinements.

Saturday, September 8th, 2007, 7:19 pm    Trackback.