Major UI Overhaul

I was pretty proud of Regex Hero's simplicity in the beginning. But I've built Regex Hero little pieces at a time for the past year. As such, I've gone in a few different design directions and the usability has suffered a little. I'm a programmer 1st, designer 4th. That's no excuse, really. If I was a more disciplined designer I wouldn't have let this happen. But nothing in Silverlight development is final. So I sat down this weekend to solve some of these UI problems, and solve them well.

My Inspiration

Bill Buxton has talked about creating a common design language for an application. What he's getting at it is that the design of your application should be consistent throughout so that when you explore a new section of the application you'll instinctively know how things work. For instance, new dialog boxes, windows, and basic UI elements should always appear in a consistent, and therefore, predictable manner. Likewise, the color scheme of tabs should be consistent so that you can easily know which tab is selected. All of the tools the application has to offer should be grouped by function and should be easy for the user to find. So be consistent. It's such a simple design principle that even left-brained people like myself can grasp.

Beyond this, there was a quote I came across a few months ago:

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."
-- Antoine de Saint-Exuper

Words to live by. Every time I sit down, put on my turtle neck (not really), and do some design I think of this quote. It's all about simplifying the interface as much as possible for the given functionality.

The Improvements

First, I added a file menu...


The menu contains the following:

File
New
Open...
Save
Save as...

Tools
Public Library
.NET Regex Reference
Generate .NET Code
Benchmark
Permalink

Help
About

Everyone understands the ubiquitous file menu, so why fight it? The "New" and "Save" buttons offer completely new functionality. "New" will clear out the regular expression, target string, and replace text boxes for you so you can start fresh. "Save" will save your regular expression in a single click. And then the "New" and "Open..." commands will prompt you asking if you'd like to save your changes. All of this functionality is based on how Notepad works, even down to the wording of the dialog boxes. Oh yes, I took inspiration from Notepad as well.

By adding this menu I've also made the decision to remove some of the oddly placed buttons and links scattered through the application. For example, the buttons for .NET Regex Reference and Generate .NET Code are gone since they're now in the menu above. The same goes for the Benchmark and Permalink links that were on the right hand side of the app. It's a tough decision to simply remove buttons altogether but it does give me the ability to group all of these things by functionality and hopefully make everything easier to find and work with as a result.

By removing the Permalink and Benchmark links from the right-hand side I've also removed a purpose from the right-hand panel. For instance, instead of the Benchmark UI appearing in the right-hand panel, it now covers up the target string box just like everything else. This has allowed me to do a lot more with the Benchmarking feature thanks to the extra space:


The iterations per second concept is something that's been around a long time. And it is a useful term of measure so I've made that the prominent statistic. But I've also added a recent benchmarks section so that you can watch your progress as you tune and tweak your regular expression.

I also moved the error box 5 pixels downward so it won't cover up the last line of the regular expression box. And then I made the Grid splitter control 2 pixels thicker so it's easier to get your mouse cursor on it.

I think that about sums it up. Enjoy.