« | Home | »

A Better Text Find & Replace User Interface

I have never been happy with the Text Find & Replace panel in my applications (Script Debugger and Affrus). I started with a version of the Find panel that first appeared in Apple’s Text Edit and many other early Mac OS X applications. Here’s an example from the currently shipping version of Script Debugger 4.5:

SD 4.5 Find Panel

The problem here is that the user has to switch their focus away from the text they are editing to the Find & Replace panel. They have to manage the Find panel window by summoning it, closing it, and moving it out of the way if the text they search for lies behind the window.

Then, Xcode came along with its Find & Replace panel integrated directly into the text editor window (similar to how Safari integrated its text search directly into the web browser window):

xCode 3 Inline Find Panel

I came to admire this UI in my day-to-day development and copied it for Affrus 2. However, very quickly my Tech Writer and collaborator Matt Neuburg complained that he didn’t like it because he could not easily see or control the find options (Regular Expressions, Match Words, Ignore Case, etc.). I had a search field popup menu that provided access to these features, but it was not obvious and was clumsy to use. To solve this problem I expanded the inline find panel a little to make these options visible and easily changed. Here’s how this appears in Affrus 2 Alpha:

Affrus 2.0a5 Inline Find Panel

The problem here is that the inline Find & Replace panel is starting to use up too much valuable vertical space in the window and there are a lot of tightly packed small controls that are difficult to use.

As I was working on a related problem in Script Debugger 5, I came across an idea. Script Debugger 4.5’s dictionary window has a search field in its toolbar. This search field includes a popup menu where the user can control the scope of the search:

SD4.5 Dictioanry Search Field

This UI was a total failure. The users who were lucky enough to discover these search options found the menu difficult to use as they had to make several trips through the menu to configure the search.

I came across Matt Gemmell’s MAAttachedWindow NSWindow implementation which gave me the idea of placing the search options in a window that only appears when keyboard focus is in the search field:

SD5.0 Dictionary Search Field

While I still am not totally happy with the popup window’s appearance and reability, its functionally is dramatically better than the Script Debugger 4.5 approach. The problem of users failing to discover these options totally goes away.

Applying this design to the inline Text Find & Replace, I came up with this:

Affrus 2 Inline Find Options

This design seems to allow one to have a minimalist Find & Replace panel within an editing window while still offering a usable and discoverable range of search options to the user.

About this entry