Articles Comments

GUI Journal » Controls

GUI Design: Check Box Checkup

I am still amazed when I find current examples of standard GUI controls being used with non-standard functionality. The roles and purposes of check boxes and radio buttons, for example, have long been established. They should not be used interchangeably or have their functionality changed to match the other. Anything a designer or programmer might hope to gain by such a decision is far out-weighed by the confusion imposed on the user. ECLIPSE® MISUSING CHECK BOXES Figure 1 is a screen shot of the Eclipse® Preferences dialog showing the list of Installed JREs.   Notice the check boxes along the left side of each item in the list. One could easily get the impression that these check boxes are for selecting items in the list. They are not. The check box actually indicates which of … Read entire article »

Filed under: Controls, GUI Design, Mistakes

GUI Design: Primary & Secondary Buttons

It is beginning to be more common for GUIs to attempt to help the user distinguish the most likely button (primary) from the lesser likely selections (secondary). In principle it’s an idea that can be helpful. But the implementation needs to be consistent with good GUI design.   IMPLEMENTATIONS THAT CONFUSE STANDARDS I recently logged into the web site for my car insurance and started the process of scheduling a payment. Figure 1 is a portion of a screen shot of the popup window that was displayed, which is the first panel of a wizard. There are actually several problems with this dialog, but for the purposes of this article I want to point out the Continue and Previous buttons below the table of data. Continue is the primary button as evidenced by its color and location. The Previous button … Read entire article »

Filed under: Controls, GUI Design

GUI Design: Links vs. Buttons

   Real Link? Buttons have been around as long as GUIs have. They were initially only used to perform actions. When hyperlinks (or links) were first created, their usage was obvious: it was a method for linking documents to each other and for quickly jumping from one to another (hence the name hyperlink). Unfortunately, the difference between the two has been blurred such that in many GUIs there appears to be no rhyme or reason as to when either is used, other than the whim of the designer or developer. Buttons are often made to look like links and vice versa. Part of the reason for this is probably the fact that menu items usually look more like links, but often act more like actions; this is also true for the controls … Read entire article »

Filed under: Controls, GUI Design, Mistakes, Navigation

GUI Design: Text Field Help

For years there has been a gradual trend toward providing help text in empty input text fields in GUIs. It became so common that when mobile apps began to be developed, help text was simply expected and is the standard for native mobile apps. Unfortunately, there is a wide variety of implementations in non-mobile environments, some of which are not very well done.   MOBILE APPS Figure 1 is a combination of portions of screen shots of the Chase® Bank app on iOS 5.1. The upper left graphic shows the login screen before focus is placed in either of the text input fields (User ID or Password). (Note the help text in the User ID and Password input fields.) The lower right graphic shows the screen after text has been entered in the User ID  field and … Read entire article »

Filed under: Controls, GUI Design, Mistakes