Once I got my ducks in a row (by perusing the MSDN documentation on the Win32 edit control, which is the foundation of the .NET TextBox anyway) I found a few resources online, but they either a) didn’t wrap the exact Win32 edit control behavior, or b) were just a one-off “send a message to the control like this”, when I’d prefer a more polished derived control with designer support, etc.

So I present CueTextBox.cs, CueComboBox.cs, and CueToolStripTextBox.cs. Here’s a simple example that hosts all 3 of them:

And, in the interest of making this as easy as possible to get, here is the code. It’s really a very simple extension – I’m not sure why this wasn’t included in the BCF (but I can guess: this will only work on Windows XP and higher, and only if visual styles are enabled).
Note that the downloaded versions have the license text, but I’ve left it off this page (the license from the downloaded files applies). Why do you care? Let Jeff Atwood tell you.

CueTextbox.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace Lerch.Samples
{
    public class CueTextBox : TextBox
    {
        #region PInvoke Helpers

        private static uint ECM_FIRST = 0x1500;
        private static uint EM_SETCUEBANNER = ECM_FIRST + 1;

        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = false)]
        private static extern IntPtr SendMessage(HandleRef hWnd, uint Msg, IntPtr wParam, String lParam);

        #endregion PInvoke Helpers

        #region CueText

        private string _cueText = String.Empty;

        /// <summary>
        /// Gets or sets the text the <see cref="TextBox"/> will display as a cue to the user.
        /// </summary>
        [Description("The text value to be displayed as a cue to the user.")]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string CueText
        {
            get { return _cueText; }
            set
            {
                if (value == null)
                {
                    value = String.Empty;
                }

                if (!_cueText.Equals(value, StringComparison.CurrentCulture))
                {
                    _cueText = value;
                    UpdateCue();
                    OnCueTextChanged(EventArgs.Empty);
                }
            }
        }

        /// <summary>
        /// Occurs when the <see cref="CueText"/> property value changes.
        /// </summary>
        public event EventHandler CueTextChanged;

        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected virtual void OnCueTextChanged(EventArgs e)
        {
            EventHandler handler = CueTextChanged;
            if (handler != null)
            {
                handler(this, e);
            }
        }

        #endregion CueText

        #region ShowCueTextOnFocus

        private bool _showCueTextWithFocus = false;

        /// <summary>
        /// Gets or sets a value indicating whether the <see cref="TextBox"/> will display the <see cref="CueText"/>
        /// even when the control has focus.
        /// </summary>
        [Description("Indicates whether the CueText will be displayed even when the control has focus.")]
        [Category("Appearance")]
        [DefaultValue(false)]
        [Localizable(true)]
        public bool ShowCueTextWithFocus
        {
            get { return _showCueTextWithFocus; }
            set
            {
                if (_showCueTextWithFocus != value)
                {
                    _showCueTextWithFocus = value;
                    UpdateCue();
                    OnShowCueTextWithFocusChanged(EventArgs.Empty);
                }
            }
        }

        /// <summary>
        /// Occurs when the <see cref="ShowCueTextWithFocus"/> property value changes.
        /// </summary>
        public event EventHandler ShowCueTextWithFocusChanged;

        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected virtual void OnShowCueTextWithFocusChanged(EventArgs e)
        {
            EventHandler handler = ShowCueTextWithFocusChanged;
            if (handler != null)
            {
                handler(this, e);
            }
        }

        #endregion ShowCueTextOnFocus

        #region Overrides

        protected override void OnHandleCreated(EventArgs e)
        {
            UpdateCue();

            base.OnHandleCreated(e);
        }

        #endregion Overrides

        private void UpdateCue()
        {
            // If the handle isn't yet created, 
            // this will be called when it is created
            if (this.IsHandleCreated)
            {
                SendMessage(new HandleRef(this, this.Handle), EM_SETCUEBANNER, (_showCueTextWithFocus) ? new IntPtr(1) : IntPtr.Zero, _cueText);
            }
        }
    }
}

CueComboBox.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace Lerch.Samples
{
    public class CueComboBox : ComboBox
    {
        #region PInvoke Helpers

        private static uint CB_SETCUEBANNER = 0x1703;

        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = false)]
        private static extern IntPtr SendMessage(HandleRef hWnd, uint Msg, IntPtr wParam, String lParam);

        #endregion PInvoke Helpers

        #region CueText

        private string _cueText = String.Empty;

        /// <summary>
        /// Gets or sets the text the <see cref="ComboBox"/> will display as a cue to the user.
        /// </summary>
        [Description("The text value to be displayed as a cue to the user.")]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string CueText
        {
            get { return _cueText; }
            set
            {
                if (value == null)
                {
                    value = String.Empty;
                }

                if (!_cueText.Equals(value, StringComparison.CurrentCulture))
                {
                    _cueText = value;
                    UpdateCue();
                    OnCueTextChanged(EventArgs.Empty);
                }
            }
        }

        /// <summary>
        /// Occurs when the <see cref="CueText"/> property value changes.
        /// </summary>
        public event EventHandler CueTextChanged;

        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected virtual void OnCueTextChanged(EventArgs e)
        {
            EventHandler handler = CueTextChanged;
            if (handler != null)
            {
                handler(this, e);
            }
        }

        #endregion CueText

        #region Overrides

        protected override void OnHandleCreated(EventArgs e)
        {
            UpdateCue();

            base.OnHandleCreated(e);
        }

        #endregion Overrides

        private void UpdateCue()
        {
            // If the handle isn't yet created, 
            // this will be called when it is created
            if (this.IsHandleCreated)
            {
                SendMessage(new HandleRef(this, this.Handle), CB_SETCUEBANNER, IntPtr.Zero, _cueText);
            }
        }
    }
}

CueToolStripTextBox.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace Lerch.Samples
{
    public class CueToolStripTextBox : ToolStripTextBox
    {
        public CueToolStripTextBox()
            : base()
        {
            if (this.Control != null)
            {
                this.Control.HandleCreated += new EventHandler(OnControlHandleCreated);
            }
        }

        public CueToolStripTextBox(string name)
            : base(name)
        {
            if (this.Control != null)
            {
                this.Control.HandleCreated += new EventHandler(OnControlHandleCreated);
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                if (this.Control != null)
                {
                    this.Control.HandleCreated -= new EventHandler(OnControlHandleCreated);
                }
            }

            base.Dispose(disposing);
        }

        void OnControlHandleCreated(object sender, EventArgs e)
        {
            UpdateCue();
        }

        #region PInvoke Helpers

        private static uint ECM_FIRST = 0x1500;
        private static uint EM_SETCUEBANNER = ECM_FIRST + 1;

        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = false)]
        private static extern IntPtr SendMessage(HandleRef hWnd, uint Msg, IntPtr wParam, String lParam);

        #endregion PInvoke Helpers

        #region CueText

        private string _cueText = String.Empty;

        /// <summary>
        /// Gets or sets the text the <see cref="TextBox"/> will display as a cue to the user.
        /// </summary>
        [Description("The text value to be displayed as a cue to the user.")]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string CueText
        {
            get { return _cueText; }
            set
            {
                if (value == null)
                {
                    value = String.Empty;
                }

                if (!_cueText.Equals(value, StringComparison.CurrentCulture))
                {
                    _cueText = value;
                    UpdateCue();
                    OnCueTextChanged(EventArgs.Empty);
                }
            }
        }

        /// <summary>
        /// Occurs when the <see cref="CueText"/> property value changes.
        /// </summary>
        public event EventHandler CueTextChanged;

        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected virtual void OnCueTextChanged(EventArgs e)
        {
            EventHandler handler = CueTextChanged;
            if (handler != null)
            {
                handler(this, e);
            }
        }

        #endregion CueText

        #region ShowCueTextOnFocus

        private bool _showCueTextWithFocus = false;

        /// <summary>
        /// Gets or sets a value indicating whether the <see cref="TextBox"/> will display the <see cref="CueText"/>
        /// even when the control has focus.
        /// </summary>
        [Description("Indicates whether the CueText will be displayed even when the control has focus.")]
        [Category("Appearance")]
        [DefaultValue(false)]
        [Localizable(true)]
        public bool ShowCueTextWithFocus
        {
            get { return _showCueTextWithFocus; }
            set
            {
                if (_showCueTextWithFocus != value)
                {
                    _showCueTextWithFocus = value;
                    UpdateCue();
                    OnShowCueTextWithFocusChanged(EventArgs.Empty);
                }
            }
        }

        /// <summary>
        /// Occurs when the <see cref="ShowCueTextWithFocus"/> property value changes.
        /// </summary>
        public event EventHandler ShowCueTextWithFocusChanged;

        [EditorBrowsable(EditorBrowsableState.Advanced)]
        protected virtual void OnShowCueTextWithFocusChanged(EventArgs e)
        {
            EventHandler handler = ShowCueTextWithFocusChanged;
            if (handler != null)
            {
                handler(this, e);
            }
        }

        #endregion ShowCueTextOnFocus

        private void UpdateCue()
        {
            // If the handle isn't yet created, 
            // this will be called when it is created
            if ((this.Control != null) && (this.Control.IsHandleCreated))
            {
                SendMessage(new HandleRef(this.Control, this.Control.Handle), EM_SETCUEBANNER, (_showCueTextWithFocus) ? new IntPtr(1) : IntPtr.Zero, _cueText);
            }
        }
    }
}

1. Reason*
   Rationality, morality, and logic.
2. Intellect
   Collecting and analyzing evidence, weighing feasibility, assessing situations, clarifying assumptions, etc.
3. Emotion
   Feelings, intuition, and instinct.

* Depending on how you interpret the word, Reason can be somewhat closely associated with both Intellect and Emotion. Still, I felt like separating them out.

Ground breaking, eh? You know, my sister just got her Masters degree in Psychology from Northwestern University – maybe some of it rubbed off on me? Yeah. But anyway, as I think about the 3 components I mentioned, something is missing. I think there’s a critical fourth component that we (at least in the western world) too often ignore: Community.

I think many people would recognize that in the western world we’ve grown much more individualistic than people have been historically. Families are “different”–more scattered, for example–and we no longer have structures like tribes or villages, all of which incorporate close nit communities of people living together day-by-day. I’m not saying there aren’t valid reasons for our move away from small tight communities, or that it’s inherently bad, but I do think we’ve lost something in the process.

When we factor only Reason, Intellect, and Emotion into a decision, absent from Community, we miss all the other perspectives of Reason, Intellect, and Emotion that other people bring to the same situation–often more experienced perspectives. Of course, we still need to be the ones that make the decision, and definitely I’m not advocating Groupthink.

Bringing It Back Home to UI Design

So then I started thinking, how does this relate to User Interface design in particular, and application design in general? When we make decisions surrounding user interfaces, which of the four components are we actively engaging?

Example: a “Tools->Options” dialog. (C’mon, you know you’ve got one in your app, everybody’s doin’ it!)
Decision: What options should we expose?
(Sub-decision: How should we expose those options?)

Intellect, and to a certain extent Reason, tend to be the big drivers when deciding which configuration options to include. Which options should we include? All of them, naturally! And how should we expose them? Numbers should be specified via a slider, textbox, or spin control, and a boolean flag should be a checkbox, etc. Makes sense, and offers the user maximum control. How should we organize it? Just slap them on some property sheets and be done with it. Just as long as they’re getting exposed.

But what about Emotion? I could expose all those options, but users are going to feel dirty every time they are forced to open the Options dialog. Or Reason/Morality: is it irrational or even immoral to offer esoteric configuration options? Is it tantamount to actually inflicting pain on someone if we make them try to grok what the difference is between using “the default value”, “an override”, or “an override-then-the-default-depending on option C”, and to do so in such a way that seemingly doesn’t make sense on purpose?

What we really need, is to incorporate all 3 components along with Community in the decision making process. In too many smaller software companies it’s developers using their Intellect, and nothing more. Community provides the necessary ballast. What is the intent of the application? What do we even want users to be able to configure in the first place? How will users most likely use the app? Will it line up with our intention, or will it diverge? The questions can be endless, but of great value. And they should be asked!

How can we gain this communal component to decisions? Roy Osherove has some pretty good ideas, for a start. But the real key, however you do it, is to actually ask people what they think, feel, and believe.

Let me start by saying that I really agree with Jeff Atwood’s assessment of icons, toolbars, etc. and how they relate to a user’s ability to interact with and understand an application. (I alluded to this in my last post.) I think this is evidenced by some of the improvements in Office 2007 – those guys spend a lot of time and money on usability, and it shows in the new interface.

Skype’s user interface has done a really good job with “fitting a lot into a little” by incrementally showing more information to the user, as they ask for it. Sometimes the user directly asks for it. Consider below where I progressively want to get more options about my Skype account:

Other times the user doesn’t directly ask for more information. Watch what happens as I increase the horizontal width of the window. I might be asking myself “What does the flag with the zero mean?”

These are two examples of how User Interface design, or at worst just putting some extra thought into your UI can make a big difference. These are also unfortunately the types of things that take extra time that is often not accounted for in the development schedule when the goal is to roll out a new feature, not a well-designed user interface. Maybe that’s where agile software development approaches like Scrum make a difference, I don’t know.

Update: I apologize for the poor quality of the images, I had to take them using Alt+PrintScreen over Remote Desktop. I would’ve rather used Kenny Kerr’s Window Clippings, but it doesn’t work over terminal services–something about needing a 32-bit color display.

The top half of the device is a typical Sudoku grid. To the left is a closer view of the controls on the lower half. The first thing that stands out is that there is zero text except for the name of the game, and the difficulty levels. We are expected to either a) read an instruction manual, (not likely) — assuming we even have it — or b) guess what each button does by trial and error. Let me ask you when the last time was that you sat down and read a gadget’s instruction manual before even turning it on? No way! You rip the thing open, and start playing. While I recognize the need for instructions and manuals (systems are complicated, more often than not), a UI designer (and/or software developer) should work as hard as possible to enable a first-time user to enter the system and discover by exploring.

Given that’s what I did with this Sudoku game, the only buttons that I immediately understood were the directional arrows and the X (which cleared a square). Even a single word next to (or under) each button would make a world of difference. And I’m sorry, but what on earth is the book supposed to mean? Easy, Medium, Hard, and Scholarly? The button with four horizontal lines reminded me of something from the movie The Fifth Element, I was hopeful that pressing it would produce ultimate Love and banish evil forever, but nope, it actually didn’t even do anything (although I suppose it’s possible that at that moment in another universe a living meteor that was heading for earth simply “shut down” and I’ll never know).

All I have left to say is if you have this device, do not press the “Play” button during your game, because it instantly and irrevocably clears the board and starts a new game. <sigh> That was frustrating.

Anyway, I was recently promoted to a Team Lead in the client team (which is sort of a sub-team lead, actually), with my responsibilities being over the applications that are “user”-centric (bad description, I realize). A better way to put it is the applications that end-users will use to interact with our system, as opposed to administrative applications, web-based applications (whether user or admin focused), or third-party development APIs.

In our first team meeting we discussed several things, but I brought up two items specifically. The first was a quote from Joel Spolsky’s online (and print) book User Interface Design for Programmers. He says:

“A user interface is well-designed when the program behaves exactly how the user thought it would.”

This is especially relevant to my team since our goal is not a “flashy” or “pretty” application (even though we desire both of them, and they both have their place). We will ultimately be successful when our applications behave exactly like the user thinks it should and the little annoyances they experience every second from using our applications are removed.

The second thing I brought up was a principle I learned from several years ago when I used to participate in the photoshop contests at Worth 1000. I don’t remember where I read it on the web site, but some advice offered by a more advanced “chopper” to wannabes included a final reminder that the difference between a good submission and a great submission—between 3rd place and 1st place—is the extra five percent effort put in at the end. Often one does a good job on something and then whether due to the fatigue from working hard, complacency born from over-familiarity with the project, or some other unnamed factor, the end result is “good enough” and submitted. It’s true that a good job was indeed done—something very functional was created, for example—but with 5% more effort it could go from good to great. And I don’t necessarily mean great in that flashy, pretty, Mac kind of great, but great in that it’s-so-usable-I-don’t-even-know-I’m-using-it sense.

I think a really good example of this principle was highlighted in a post by Jan Miksovsky where he writes about a well thought through, and extremely subtle feature of Microsoft Outlook.

I’m going to be keeping my eyes open for work done on the web or the desktop that exhibit “the extra five percent” and look at what was done and how it was done. Maybe if I find something interesting I’ll post it here… otherwise it’s back to tech posts for me!

“Now an entire generation has grown up with a different set of games than any before it. The last thing they do is read the manual. Instead, they pick up the controller and start mashing buttons to see what happens. This isn’t a random process; it’s the essence of the scientific method and it’s a fundamentally different take on problem-solving than the linear, read-the-manual-first approach of their parents. The fact that they are learning in a totally new way – means they’ll treat the world as a place for creation, not consumption.” – Dream Machines

I really resonated with this, because I myself am very much someone they are describing. I don’t read manuals (unless it’s really really complicated-looking), I just pick it up and start mashing buttons. That posed problems when I purchased my new table saw, but that’s another story…

When it comes to application design/development, my own tendancies force me to lean heavily towards an application design that seeks to be intuitive, and works well for people who like to “see what happens”. I want descriptive text that is simple and offers enough information that I get the gist of what will happen if I click the button/menu/link, but I still have to click to find out details, or to watch it work. I want logically grouped options, I want to drill-down as far as I want to go, and then pop back out. I don’t want any single action to initiate a never-ending action that has a <gasp>progress bar!</gasp>. (Unless I’m installing something, then I never want to touch it after it starts.) I always want the option to cancel, save, or apply my changes at any moment.

The way I figure it, what I want is what users of my applications will want (on some level) and what I enjoy about a well-designed application is what my users will enjoy also.

via Functioning Form

Here’s the article

The Importance of User Experience
Originally uploaded by soldierant.