Pushing Buttons

While the title of today's post could describe my feelings toward Neverwinter Nights 2, it has been too long since I went over my work on Dozen Days of Tiles. Still, one of the best ways to improve your design skills is to look at problems other games have so I will probably take a break in the future and look at how NWN2 could have been a much better game.

While the work involved in coding my user interface components didn't take long at all, explaining the decisions that I made will take a bit of time so the next few articles will be more focused on my thought-process than on coding as a lot of options were available. Like with most things in life, there is no one best way of doing things.

When it comes to user interface components, everything revolves around buttons. If you can create a versatile button, it is easy to extend that component to form much more complicated components. So the first thought is how will the button work. On the surface, buttons only have 2 states. They can be up or down. When developing low level interface on other platforms, I have always had a third state. Disabled. In fact, when I started playing around with Flash, I was shocked to discover that it didn't have a disabled state for buttons. I tended to just make Flash buttons invisible when de-active, but a better solution is to have a disabled image underneath the button so that when made invisible there would be a visible "disabled" version of the button visible. I always intend to do this but usually would run out of development time before doing this.

The purpose of having a disabled state is to let the user know that the option exists but is not appropriate at the time. While such a state is not absolutely necessary, it is a nice feedback mechanism and doesn't cost much so it is worth supporting. It is also handy for larger projects so future features can be put into the interface and disabled until implemented.

While the default Flash buttons do not support a disabled state, they do have an over state which allows the button to look different when the mouse is over it. As we move towards touch devices, this feedback no longer exists as most touch devices have no idea where your finger is until you actually touch the device. For mice/trackpad users, this is a really nice feedback mechanism so is well worth supporting.

This means that we need to worry about four states. Disabled, Normal, Over, and Pushed. If we were creating an image-button, such a button would need four images to cover the display requirements. For a more general-purpose button, it is a bit more complicated than that but we will cover that next time.