Skip navigation

Community

Currently Being Moderated

LabWindows/CVI Tip: How to Best Use Tab Controls to Improve UI Design

VERSION 4  Click to view document history
Created on: Mar 9, 2012 9:42 AM by Anna_K. - Last Modified:  May 30, 2012 6:41 PM by Anna_K.

UI Design Tip - Use a Tab Control to Maximize Screen Space of your User Interface Without Leaving Anything Out

 

Table of Contents

1. General GUI Design Rules

2. Why Use Tab Controls?

3. When Should You / Should Not Use Tab Controls?

4. How to Implement a Tab Control in LabWindows/CVI


Tab example cvi.png

1. General GUI Design Rules

A graphical user interface is the way your application's user gives commands and receives feedback from your application.  For those of you who develop applications to sell, the UI is often the “cover” to your book – the crucial first impression.  A good UI implies a thorough, professional development team whereas a sloppy UI can turn potential clients off.

 

A good UI makes the user’s job easier since they spend less time trying to figure out how to complete their task (which often translates to less questions for the developer).   I bet you can name a few applications off the top of your head where an unintuitive UI makes using that application more difficult than it should be which translates into inefficiency, frustration and resentment from you, the user.

 

Your job as the UI developer is to predict the points of frustration and lay out an interface that helps the user get their job done.  Getting the job done is most people’s primary concern. Here are some general rules to follow when designing your GUI:


  1. Don't be innovative, copy familiar design patterns. This lowers the learning curve for your user.
  2. Less is more. Avoiding clutter avoids confusion.
  3. Think about your user. Explain what buttons do and keep the user informed about what your program is doing.


2. Why Use Tab Controls?

The Tab control lets you maximize the screen space on your user interface without sacrificing the amount of information presented at once. Content on the tab control is separated into different panes and each pane is viewable one at a time. A tab control on your user interface helps us apply rules 1 and 2 above. Take for example, LabWindows/CVI development environment, your Internet browser or Microsoft excel, all these software user interfaces use tabs and you can expect your end user to be very familiar with navigating through a tabbed display of information. Additionally, you don't have to pack in all the controls and inputs into one window which makes your UI easier to navigate because it's more obvious what the user should be focusing on.

 

3. When Should You / Should Not Use Tab Controls?

The primary goal of the tab control in UI design is to permit users to view a group of related data one at a time, which in turn allows designers to modularize this group of information in a compacted manner, saving  valuable screen real estate. Here is a guideline on when you should use the tab control: [1]


  • Information that is related - all items on a single tab page must have some connection to each other so that users can make a logical correlation towards the content of the tab page.
  • Information that Doesn't Need to be Compared or Accessed Simultaneously - if information on tab pages must be compared to each other, or when the information is better presented  simultaneously, it’s best not to use a tab control because it can produce an annoying experience.
  • Information that can Have Short Categorical Names - use only one to three key words for tab labels.
  • Tab Pages are for Terse Content - tabs are meant to contain modular and easily digested  information, and as such, a tab control is only appropriate for data that is succinct and to the point such as lists, graphs or other visual controls or one to two short paragraphs of text.


4. How to Implement a Tab Control in LabWindows/CVI & Best Practices

Tab Control in LabWindows/CVI

The tab control was introduced in LabWindows/CVI version 8.0 as a replacement to the old EasyTab instrument driver - which by the way is considered obsolete so if you are using EasyTab then I recommend switching to the tab control because it has better UI editor integration, a full-featured API and Windows theming.

 

I have some suggestions to get started with using the tab control. There are two very nice examples that ship with LabWindows/CVI called tabpanels.cws and tabexample.cws. The first shows you how to convert multiple panels into multiple tab pages within a single tab control and the second is great for learning how to programmatically manipulate the appearance and characteristics of your tab control. Both appear in the NI Example Finder under Building User Interfaces >> General or just search 'tab'.

 

Of course I also suggest reading through the LabWindows/CVI Help topics on operating and programming the tab control, which you can find here. I do want to point out an important detail: When you add a tab page to a tab control, LabWindows/CVI automatically creates a panel that is associated with this tab. You can call GetPanelHandleFromTabPage to obtain a panel handle for the tab and then pass that panel handle to the NewCtrl function as the panelHandle parameter to create controls on the page, and you can pass that panel handle to other functions that you can use to customize the controls on the tab page.

 

Next, please review these Best Practices to keep in mind when using a tab control in LabWindows/CVI or other [1]

 

  • Show tab controls in a single row - tab controls typically use horizontally-oriented tab controls  (though if you wish, can change the Tabs location attribute to appear on right, left or bottom of the tab control) We don't recommend setting the Tab fit mode to multiple rows, this makes the interaction confusing.When you have more than one row of tab controls, it implies a hierarchical relationship where lower-positioned tab controls are children of (or the subcategory of)  higher-positioned tab controls.The need for more than one row of tab controls is indicative  of having too many panes and/or that  the tab control text is too long and  should be revised for terseness.

 

  • Use Short and Logical Names for Tab Control Text - Tab controls are meant to be as narrow as possible to  accommodate multiple tabs without the need to lay them out in multiple rows. It is also very important to use relevant and logical key  words to describe the content of the panes, so the tab control text should  be well thought out.

 

  • Don’t Use Scrolling Inside Panes - Scrollbars are an added encumbrance to users interacting  with module tabs: to access the information that they are looking for, not only  do they have to click on tab controls, but they also need to use scrollbars to  see if the content they want is farther down the pane. The need for scrollbars inside panes outlines an issue with  regards to the length of the pane information or the design of the module tabs; either the content being presented is too long for the module tabs design  pattern, or that the pane area is not tall enough for your content. Consider  revising content for terseness, extending the height of the pane area, and/or  allowing for variable height of the pane area depending on the pane information  length of the active pane.

 

  • Use High-Contrast Colors for Active and Inactive Tabs - Users with low-vision must be able to see which tab control is the active tab control. Using highly contrasted background colors to distinguish the active tab control from the  inactive tab control is good practice.

 

  • Use Icons in Tab Controls to Create Visual Context for Pane Content - Using relevant icons that portray the content within the  module tab panes is a great way of enhancing tab control context. Avoid using icons to  substitute tab control text because symbols can mean different things to  different people – the safest bet is using plain text to describe pane  information.

 

 

References

[1] Smashing Magazine article Module Tabs in Web Design: Best Practices and Solutions.

[2] UI Patterns article Navigation Tabs Design Pattern

 

Did you find this tip useful? Rate this document or add a comment below.

If you give this a try, share your experience! Add a comment below.

Comments (1)