Don of the Day

Don of the Day

Adventures in software development with Xamarin and the Web

Software developer, building things with code in sunny Scottsdale, AZ.



Naming User Interface Controls

Don FitzsimmonsDon Fitzsimmons

I do something weird when it comes to naming user interface elements. Whether it's a web app or mobile app, I do this thing. I learned it from a co-worker years ago. But before I show you how I name UI controls, let's take a look at some strategies because as software developers we know, naming things is hard.

There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton

I have seen developers use a few different naming conventions on UI controls, because really, there are few options. Got a label? Call it lblUserName. Got a button? Let's name it btnSubmit. How about a select list/combo box? Hmm...that's a tricky one. selectCountries? None of these have ever felt right to me, but I've used variations of them in the past. You could of course not preface UI controls with anything, but then how can you distinguish them from other variables?

Instead of succumbing to the above awkward naming conventions, I preface all of my UI controls with "ux". So, let's say I have a login form. My user name text field is: uxUsername. Password is: uxPassword and the submit button is uxSubmit. Why do this? There are two good reasons and they may seem trivial, but they're not.

The first reason the ux preface is a good thing, any time I'm looking at code (and can't use MVVM, in which case I don't have to name any UI controls) I know my UI variables from my non-UI variables. Again, it seems minor, but it really keeps things clear especially in a large code base. It's so much easier to spot a uxCustomerGrid than a grdCustomers when searching through code.

The second reason the ux preface is a good thing, my IDE will always list all of my UI controls together (intellisense, etc), which is really awesome. When setting lots of fields and labels and things, seeing all of my UI controls listed together is a huge time saver.

And this is why I use ux instead of ui: there are very few, if any, other things that have those two letters combined on any platform so, intellisense will always keep them grouped together. It also signifies that these variables are part of the user experience too...I guess. In iOS there are so many things prefaced with UI that using ui as the preface would defeat the purpose.

So the next time you find yourself using txtUsername, or tbUserName, or whatever, consider using uxUsername. Try prefacing all of your UI controls with ux and then watch them all appear, magically grouped together in your IDE. It's wonderful.

Software developer, building things with code in sunny Scottsdale, AZ.