2. Tool Containers
• Tool containers are used to house tools that are used in the
program, some can be manipulated such as docked on the side of
the main window or moved around to float above the window.
• There are two different types of tool containers, toolbars and tool
palettes.
– Toolbars are the bars that you see in Microsoft Word and they can
be removed or other toolbars can be added in the view settings.
Some toolbars can be moved to float above the main window and
resized.
– Tool Palettes are similar to toolbars, they can be moved to float
above the main window or even snapped to the edge but they
maintain their shape and size.
3. Text Entry Components• Text components are used to gather alphanumerical information for
many different reasons such as web page text entry, search bars, or
discussion boards. Text entry components are used on various
documents, websites, and programs.
• There are two types of text entry components, text boxes and text fields.
– Text Boxes are usually used to gather smaller amounts of information, they
do not offer a large viewing field but can handle large amounts of text
depending on what the developer allows. Since there is no built in indicator
for the purpose of a text box the developer can hint at what the input should
be, or use labels or captions.
– Text Fields are very similar to text boxes but they can have more than one
line of text entry which allows for the user to see what they have typed. When
you reach the end of a line the text wraps to the next and when you reach the
end of the text field a scroll bar appears to allow for scrolling up or down.
• Bounded/Unbounded and Validation
– Text boxes that allow any input are unbounded and text boxes that limits
what the user can input are bounded.
4. Lists• Lists are pre defined components that offer a limited choice to
the user which can either present all the choices at once or hide
the choices until the user selects or interacts with the list.
• There are four different types of lists, a list box, combobox,
spinner, and a slider.
– List boxes have choices that are visible to the user and the designer
can make the box larger or smaller depending on the amount of
items they want seen and the list box an accept one choice or many.
– Comboboxes are similar to list boxes containing a list but they can
also contain a search box and/or a spinner.
– Spinners are basically textboxes with up and down arrows that
allow for users to make choices in predetermined short lists, or for a
user to type their own text to search.
– Sliders are lists of values that are selected by dragging the sector to
the appropriate value such as the volume on your computer.
5. Controls
• Controls are used to navigate and make selections and can be
found in the form of a button or hyperlink. Buttons are
rectangular objects that are generally 3D looking and have two
visual states, depressed and pressed.
• The three types of controls are command buttons, toolbar
buttons, and hyperlinks.
– Command buttons issue simple commands such as ok, submit, save, open,
etc.
– Toolbar buttons are located on a toolbar and generally look like a simple
icon until the mouse hovers over them then they assume the appearance of a
button such as the bold, italic, and underline buttons found in Microsoft
Office applications.
– Hyperlinks can be words, pictures, or basically anything that has an address
attached to it which directs the user to that specific address which can lead
anywhere, from a web page to a specific point in the application or document
that your in.
6. Windows
• Windows are what house the applications graphical user
interface such as the window that opens when you open
Microsoft Word.
• Their are many factors to consider when it comes to windows
such as the
– Windows state which is the shape and size the window is,
– Windows components which is how the window is laid out such as where the
scroll bar is or where the exit, minimize or maximize buttons are located,
– Windows interface which depends on whether its predominantly an
application or document and from their consider wheather to use multiple
document, single document, controlled single document, tabbed, or
detachable tabbed.
7. Icons
• Icons are small images that are used for quick interpretation of
a task or application so that a user can perform tasks faster. A
properly designed and implemented icon will allow a user to
just see the small image and know what it does with little
knowledge of the application. Icons such as the ones used for
Bold, Italic, and Underline in Microsoft Office are a great
example because they are simple designs but the user knows
exactly what they do and can select them quickly.
8. Menus
• Menus are used for system functionality and they are accompanied by menu
titles which should give a clear depiction of what options the menu contains
such as the file button in almost ever application which contains menu items
such as save, open, new, print, etc.
• There should always be considerable consideration for the standard,
structure, presentation, and behavior of menus when developing them.
– Standards are based off the design of menus that are already in use and
should be looked at prior to discussions of structure, presentation, and
the behavior.
– Structure should contain two items or more, or combined into another
menu. They should contain separators between options,
– Presentation should be similar to other applications for familiarity
purposes.
– Behavior should be similar as well and options should have a visual que
when the mouse passes over them.
9. Pointers
• The pointer is extremely important and is used to manipulate
items on the screen through an input device such as a mouse.
Pointers can also show a user the system status by dynamically
changing through the use of multiple pointers.
• Pointers can show a user there is selectable text, selectable
objects, text fields or boxes, a program loading, etc. by showing a
vertical line for the text box, or a spinning wheel for when the
computer is thinking while loading an application.
10. References
Heim, S (2008). The Resonant Interface: HCI Foundations for Interaction
Design. Pearson Education: Addison-Wesley.
