GUI elements

When designing and using a GUI, there are a number of common elements (often called widgets) that need to be considered. The following is a non-exhaustive list of widgets, and the options available, which may be limited by the graphical framework used:

• Input controls:
  • Buttons: A widget that provides a simple way to trigger an event, such as confirming an action. The following screenshot shows an example of it:

• • Text fields: Boxes that accept text input from the user:

• Checkboxes: Allows the user to make a binary (on/off) selection for a particular option:

• • Radio buttons: Allows the user to make a single option from a set of mutually exclusive choices:

• • Drop-down lists: Normally shows a single item; when the drop-down arrow is clicked, more items are displayed, though only one item can be selected. The following screenshot shows an example of it:

• • List boxes: Similar to drop-down lists, list boxes allow one or more choices to be made. The following screenshot shows an example of it:

• • Toggles: Buttons, sliders, or other widgets that allow on/off functionality. The following diagram shows an example of it:

• • Date fields: The following screenshot shows a date field:

• Navigational tools:
  • Breadcrumbs: Graphical navigation aid that shows a user where they are currently located within a directory structure. Commonly seen on websites and in filesystem tools, such as Windows File Explorer.

Attribution: User:EnEdC [GPLv2 (https://www.gnu.org/licenses/old-licenses/gpl-2.0.html)], from Wikimedia Commons

• • Sliders: Allows the user to move an indicator along a line to select a value; often allows the user to click on a position to set the indicator:

• • Search fields: Normally a single-line textbox that allows the user to enter text to search for within a filesystem, database, and so on. Real-time results can populate a drop-down list, such as Google Search or Wikipedia:

Attribution: screenshot by DTankersley (WMF) [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], through Wikimedia Commons

• • Pagination: Used to inform the user how many pages are present within a document. Normally indicated by a page number on printed documents, electronic documents may show how many pages are present overall, as well as allowing one or more ways to move between pages:

Attribution: Moharnab Saikia [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia Commons

• • Tags: Metadata comprised of keywords or terms associated with a particular piece of information, often selected by a file uploader, site administrator, users, and so on:

Attribution: Original by Markus Angermeier; vectorized and linked version by Luca Cremonini [CC BY-SA 2.5 (https://creativecommons.org/licenses/by-sa/2.5)], through Wikimedia Commons

• • Icons: Graphical images used to supplement textual information. They can provide a visual representation of an operation, links to files or web pages, activate programs, and so on:

• Informational tools:
  • Tooltips: When hovering over an item, such as a hyperlink, a small pop-up window appears with more information about the item:

• • Progress bars: Visual representation of the completion progress for a computer operation, such as downloading or uploading a file, installing software, and so on:

Attribution: Simeon87 [GPL (http://www.gnu.org/licenses/gpl.html)], through Wikimedia Commons

• • Pop-up notifications: Graphical communication tool that displays information without forcing the user to immediately respond to the notice:

Attribution: Mudd1 [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], through Wikimedia Commons

• • Message boxes: Also called dialog boxes, these are small windows to display information to the user and require a response before disappearing. Boxes can be modal (requiring user action before any other action on the system can be performed) or non-modal (the user can still use the system without responding to the box):

Attribution: Bruce89 at en.Wikipedia [GPL (http://www.gnu.org/licenses/gpl.html], through Wikimedia Commons

• Containers:
  • Accordion: A set of vertically-stacked items list. Clicking on an item expands the information content for that item:

Attribution: http://melaychie.deviantart.com/ [CC BY 3.0 (https://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons

• • Tabs: Displays the titles of multiple windows within a single pane, like tabs in a filing cabinet. Each tab has its own information, so selecting different tabs displays different data:

Attribution: Maria Sieglinda von Nudeldorf [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], from Wikimedia Commons