Graphical user interface: Difference between revisions

Revision as of 21:50, 16 April 2025

Latest revision as of 05:59, 23 August 2025

(7 intermediate revisions by 6 users not shown)

Line 2:

{{Redirect|GUI|other uses|Gui (disambiguation)}}

{{More citations needed|date=May 2022}}

[[File:Example of a GUI.png|thumb|240px|A graphical user interface (GUI) showing various elements: radio buttons, checkboxes, and other elements. The image shown uses the [[KDE]] [[desktop environment]].]]

A '''graphical user interface''', or '''GUI'''{{efn|{{IPAc-en|ˈ|ɡ|u:|i}},<ref>{{cite book |last=Wells |first=John |author-link=John C. Wells |title=Longman Pronunciation Dictionary |publisher=Pearson Longman |edition=3rd |year=2009 |isbn=978-1-4058-8118-0}}</ref><ref>{{Cite web|url=https://dictionary.cambridge.org/us/pronunciation/english/gui|title=How to pronounce GUI in English|website=Cambridge Dictionary |language=en-US|access-date=2020-04-03}}</ref> {{Respell|GOO|ee}}; {{IPAc-en|ˈ|dʒ|iː|j|uː|aɪ}}, {{Respell|JEE|YOO|AI}}<ref>{{Cite MW|GUI|access-date=2024-12-07}}</ref>}}, is a form of [[user interface]] that allows [[user (computing)|users]] to [[human–computer interaction|interact with electronic devices]] through [[Graphics|graphical]] [[icon (computing)|icons]] and visual indicators such as [[secondary notation]]. In many applications, GUIs are used instead of [[text-based user interface|text-based UI]]s, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep [[learning curve]] of [[command-line interface]]s (CLIs),<ref name="computerhope.com">{{Cite web|url=https://www.computerhope.com/issues/ch000619.htm|title=Command line vs. GUI|website=Computer Hope |language=en|access-date=2020-04-03}}</ref><ref>{{cite web |date=2007-03-12 |url=https://learn.microsoft.com/en-us/archive/blogs/mscom/the-gui-versus-the-command-line-which-is-better-part-1 |title=The GUI versus the Command Line: Which is better? (Part 1) |department=Microsoft.com Operations |website=[[Microsoft Learn]] |access-date=2024-01-30 }}</ref><ref>{{Cite web |date=2007-03-26 |url=https://learn.microsoft.com/en-us/archive/blogs/mscom/the-gui-versus-the-command-line-which-is-better-part-2 |title=The GUI versus the Command Line: Which is better? (Part 2) |department=Microsoft.com Operations |website=[[Microsoft Learn]] |access-date=2024-01-30}}</ref> which require commands to be typed on a [[computer keyboard]].

Line 12:

Designing the visual composition and temporal behavior of a GUI is an important part of [[software application]] programming in the area of [[human–computer interaction]]. Its goal is to enhance the efficiency and ease of use for the underlying logical design of a stored [[computer program|program]], a design discipline named ''[[usability]]''. Methods of user-centered design are used to ensure that the visual language introduced in the design is well-tailored to the tasks.

The visible graphical interface features of an application are sometimes referred to as ''chrome'' or ''GUI''.<ref>{{Cite web|url=http://www.catb.org/~esr/jargon/html/C/chrome.html|title=chrome|website=www.catb.org|access-date=2020-04-03}}</ref><ref>{{cite web|url=http://www.useit.com/alertbox/ui-chrome.html|title=Browser and GUI Chrome|author=Nielsen, Jakob |date=January 29, 2012|website=Nngroup|access-date=May 20, 2012|archive-date=August 25, 2012|archive-url=https://web.archive.org/web/20120825022734/http://www.useit.com/alertbox/ui-chrome.html|url-status=dead}}</ref><ref>{{Cite journal|last=Martinez|first=Wendy L.|date=2011-02-23|title=Graphical user interfaces: Graphical user interfaces|url=https://onlinelibrary.wiley.com/doi/10.1002/wics.150|journal=Wiley Interdisciplinary Reviews: Computational Statistics|language=en|volume=3|issue=2|pages=119–133|doi=10.1002/wics.150|s2cid=60467930 |url-access=subscription}}</ref> Typically, users interact with information by manipulating visual [[Widget (GUI)|widgets]] that allow for interactions appropriate to the kind of data they hold. The widgets of a well-designed interface are selected to support the actions necessary to achieve the goals of users. A [[model–view–controller]] allows flexible structures in which the interface is independent of and indirectly linked to application functions, so the GUI can be customized easily. This allows users to select or design a different ''skin'' or ''[[theme (computing)|theme]]'' at will, and eases the designer's work to change the interface as user needs evolve. Good GUI design relates to users more, and to system architecture less.

Large widgets, such as [[Window (computing)|windows]], usually provide a frame or container for the main presentation content such as a web page, email message, or drawing. Smaller ones usually act as a user-input tool.

Line 20:

== Examples ==

<gallery mode="nolines" widths="180px180" heights="180" caption="Sample graphical environments">

File:GNOME Shell.png|[[GNOME Shell]]

File:KDE_Plasma_6KDE Plasma 6.3_desktop_screenshot3.webp6 screenshot.png|[[KDE Plasma 6]]

File:Ubuntu Mate 18.04.1 with MATE 1.20.1.png|[[MATE (software)|MATE]]

File:Wayland demo 2.png|Windows on an example [[Wayland (display server protocol)#Wayland compositors|Wayland compositor]]

Line 52:

== Post-WIMP interface ==

{{Main|Post-WIMP}}

Smaller app mobile devices such as [[personal digital assistant]]s (PDAs) and [[smartphone]]s typically use the WIMP elements with different unifying metaphors, due to constraints in space and available input devices. Applications for which WIMP is not well suited may use newer [[interaction technique]]s, collectively termed ''[[post-WIMP]]'' UIs.<ref>{{cite journal | url=https://doi.org/10.1109/38.814559 | doi=10.1109/38.814559 | title=Beyond WIMP | year=2000 | last1=Van Dam | first1=A. | journal=IEEE Computer Graphics and Applications | volume=20 | pages=50–51 | url-access=subscription }}</ref>

As of 2011, some touchscreen-based operating systems such as Apple's [[iOS]] ([[iPhone]]) and [[Android (operating system)|Android]] use the class of GUIs named post-WIMP. These support styles of interaction using more than one finger in contact with a display, which allows actions such as pinching and rotating, which are unsupported by one pointer and mouse.<ref>[https://www.cs.tufts.edu/~jacob/papers/chi08.pdf "Reality-Based Interaction: A Framework for Post-WIMP Interfaces".]</ref>

Line 108:

{{About|uniquely software 3D UIs|both software and hardware 3D input/output devices|3D UIs|section=yes}}

Many environments and games use the methods of [[3D graphics]] to project 3D GUI objects onto the screen. The use of 3D graphics has become increasingly common in mainstream operating systems (ex. [[Windows Aero]], and [[Aqua (user interface)|Aqua]] (MacOSmacOS)) to create attractive interfaces, termed eye candy (which includes, for example, the use of [[drop shadow]]s underneath windows and the [[Cursor (user interface)|cursor]]), or for functional purposes only possible using three dimensions. For example, user switching is represented by rotating a cube with faces representing each user's workspace, and window management is represented via a [[Rolodex]]-style flipping mechanism in [[Windows Vista]] (see [[Windows Flip 3D]]). In both cases, the operating system transforms windows on-the-fly while continuing to update the content of those windows.

The GUI is usually WIMP-based, although occasionally other metaphors surface, such as those used in [[Microsoft Bob]], 3dwm, File System Navigator, [[File System Visualizer]], 3D Mailbox,<ref>{{Cite web |date= |title=3D Mailbox – 3-Dimensional Email Software. Bring e-mail to life! Email just got cool and fun. |url=http://www.3dmailbox.com/ |url-status=usurped |archive-url=https://web.archive.org/web/20190721225321/http://www.3dmailbox.com/ |archive-date=2019-07-21 |access-date=2022-07-14 |website=3dmailbox.com}}</ref><ref>{{Cite web |title=3D Mailbox |url=https://download.cnet.com/3D-Mailbox/3000-2367_4-10699471.html |access-date=2022-07-14 |website=Download.com |date=14 February 2017 |language=en}}</ref> and [[GopherVR]]. [[zooming user interface|Zooming]] (ZUI) is a related technology that promises to deliver the representation benefits of 3D environments without their usability drawbacks of orientation problems and hidden objects. In 2006, [[Hillcrest Labs]] introduced the first ZUI for television.<ref name="Moren">''Macworld.com'' November 11, 2006. Dan Moren. [http://gadgets.macworld.com/video/ces_unveiledny_07_point_and_cl.php CES Unveiled@NY ‘07: Point and click coming to set-top boxes?] {{webarchive|url=https://web.archive.org/web/20111108015801/http://gadgets.macworld.com/video/ces_unveiledny_07_point_and_cl.php|date=2011-11-08}}</ref> Other innovations include the menus on the [[PlayStation 2]],; the menus on the [[Xbox (console)|Xbox]],; Sun's [[Project Looking Glass]],; [[Metisse]], which was similar to Project Looking Glass,;<ref>{{cite web |date=29 June 2004 |title=Metisse – New Looking Glass Alternative |url=https://developers.slashdot.org/story/04/06/29/229243/metisse---new-looking-glass-alternative |access-date=2 July 2020}}</ref> [[BumpTop]], where users can manipulate documents and windows with realistic movement and physics as if they were physical documents,; [[Croquet OS]], which is built for collaboration,;<ref>{{Cite web |last1=Smith |first1=David A. |last2=Kay |first2=Alan |last3=Raab |first3=Andreas |last4=Reed |first4=David P. |date= |title=Croquet – A Collaboration System Architecture |url=http://www.croquetconsortium.org/images/2/2b/2003_Croquet_Collab_Arch.pdf |url-status=dead |archive-url=https://web.archive.org/web/20070927082900/http://www.croquetconsortium.org/images/2/2b/2003_Croquet_Collab_Arch.pdf |archive-date=2007-09-27 |access-date=2022-09-17 |website=croquetconsortium.org |quote=The efforts at Xerox PARC under the leadership of Alan Kay that drove the development of [...] powerful bit-mapped display based user interfaces was key. In some ways, all we are doing here is extending this model to 3D and adding a new robust object collaboration model.}}</ref> and [[compositing window manager]]s such as [[Enlightenment (software)|Enlightenment]] and [[Compiz]]. [[Augmented reality]] and [[virtual reality]] also make use of 3D GUI elements.<ref>{{Cite web |last=Purwar |first=Sourabh |date=2019-03-04 |title=Designing User Experience for Virtual Reality (VR) applications |url=https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96 |access-date=2022-05-06 |website=Medium |language=en}}</ref>

=== In science fiction ===

Line 135:

* [[Rich web application]]

* [[Skeuomorph]]

* [[Theme (computing)]]

* [[Text entry interface]]

* [[Transportable Applications Environment]]