Skip to main content

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...
Tools 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:
Recent Benchmarks

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.

Comments

Popular posts from this blog

Regex Hero for Windows 10 is Underway

Awhile back I began working on an HTML5 / JavaScript version of Regex Hero . However, it was a huge undertaking essentially requiring a complete rewrite of the entire application. I have not had enough time to dedicate to this lately. So I've begun again, this time rewriting Regex Hero to work in WPF. It'll be usable in Windows 10 and downloadable from the Microsoft Store. This is a much easier task that also has the advantage of running the .NET regex library from the application itself. This will allow for the same speedy experience of testing your regular expressions and getting instant feedback that Regex Hero users have always enjoyed. I expect the first release to be ready in Q4 of 2019.

Silverlight 4 Coming in April, or Maybe Sooner

The exact release date has not been announced. But Visual Studio 2010 RTM is coming out in April and I think it's safe to assume that Silverlight 4 will be released no later than that. Each release of Silverlight has brought massive improvements over the previous version. And once again, Silverlight 4 does not disappoint. There is a long list of improvements but the ones that I think that will affect Regex Hero are as follows: RichTextBox My plan is to use this in place of all 4 major textboxes in Regex Hero. The new RichTextBox has built-in multiple undos & redos, so I can ditch my home-brewed code. It should be nice to use for syntax highlighting for the regular expressions I intend to create. It also has a built-in API to determine the pixel position of the text. I should be able to use this API and build a new highlighting scheme based off of it. This should do a couple things. First, I should be able to finally fix the problem I had with the ScrollViewer and

Installer for Desktop version of Regex Hero

As Firefox just dropped support for Silverlight I really needed a solution for Regex Hero. So I created an installer for it. It's still Silverlight, but by using the installer you can install it directly to your computer and never need to open it in a browser. If you visit regexhero.net/tester and don't have a browser that supports Silverlight (IE is the only one left), then you'll see download links for 64-bit and 32-bit versions of the installer. When you install it you'll see a link over on the right hand side that says "Activate Regex Hero". This process connects your desktop version of Regex Hero with your online account. So if you're a licensed user this is how you'll gain access to all of those licensed features. Note: Currently there will be a security warning when you try to run either one of these installers. I'm in the process of obtaining a code signing certificate and will update them as soon as possible. You may be wondering a