Content deleted Content added
m Reverted edit by 75.137.33.113 (talk) to last version by ClueBot NG Tags: Rollback Disambiguation links added |
Updated KDE-P 6 screenshot |
||
| (30 intermediate revisions by 27 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'''
▲[[File:Example of a GUI.png|thumb|240px|A graphical user interface (GUI) showing various elements: radio buttons, checkboxes, and other elements]]
▲A '''graphical user interface''', or '''GUI''' ({{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}}), is a form of [[user interface]] that allows [[user (computing)|users]] to [[human–computer interaction|interact with electronic devices]] through 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]].
The actions in a GUI are usually performed through [[direct manipulation interface|direct manipulation]] of the graphical elements.<ref>{{Cite web|url=https://www.sciencedaily.com/terms/graphical_user_interface.htm|title=Graphical user interface|website=ScienceDaily|language=en|access-date=2019-05-09}}</ref><ref>Levy, Steven. "[https://www.britannica.com/technology/graphical-user-interface Graphical User Interface (GUI)]". Britannica.com. Retrieved 2019-06-12.</ref><ref>{{cite encyclopedia |url=https://www.pcmag.com/encyclopedia/term/44001/gui |title=GUI |access-date=2019-06-12|encyclopedia=PC Magazine Encyclopedia. pcmag.com}}</ref> Beyond computers, GUIs are used in many handheld [[mobile device]]s such as [[MP3]] players, portable media players, gaming devices, [[smartphone]]s and smaller household, office and [[Distributed control system|industrial controls]]. The term ''GUI'' tends not to be applied to other lower-[[display resolution]] [[User interface#Types|types of interfaces]], such as [[video game]]s (where [[Heads-up display (video games)|head-up displays]] (''HUDs'')<ref>{{cite web|url=http://www.gamasutra.com/features/20060203/wilson_01.shtml|title=Off with Their HUDs!: Rethinking the Heads-Up Display in Console Game Design|author=Greg Wilson|year=2006|work=[[Gamasutra]]|url-status=dead|archive-url=https://web.archive.org/web/20100119031340/http://www.gamasutra.com/features/20060203/wilson_01.shtml|archive-date=January 19, 2010|access-date=February 14, 2006}}</ref> are preferred), or not including flat screens like [[volumetric display]]s<ref>{{cite web |url=http://www.linfo.org/gui.html |title=GUI definition |access-date=12 November 2008 |work=Linux Information Project |date=October 1, 2004}}</ref> because the term is restricted to the scope of [[Two-dimensional Euclidean space|2D]] display screens able to describe generic information, in the tradition of the [[computer science]] research at the [[PARC (company)|Xerox Palo Alto Research Center]].
Line 12 ⟶ 10:
[[File:Linux kernel INPUT OUPUT evdev gem USB framebuffer.svg|thumb|350px|The GUI is presented (displayed) on the computer screen. It is the result of processed user input and usually the main interface for human-machine interaction. The [[touch user interface|touch UI]]s popular on small mobile devices are an overlay of the visual output to the visual input.]]
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.
A GUI may be designed for the requirements of a [[vertical market]] as application-specific GUIs. Examples include [[automated teller machine]]s (ATM), [[point of sale]] (POS) touchscreens at restaurants,<ref>Bisson, Giselle. [http://www.atarimagazines.com/startv2n6/gettingdowntobusiness.html "The ViewTouch restaurant system".]
[[Mobile phone|Cell phones]] and handheld game systems also employ application specific touchscreen GUIs. Newer automobiles use GUIs in their navigation systems and multimedia centers, or navigation multimedia center combinations.
== Examples ==
<gallery mode="nolines" widths="
File:GNOME Shell.png|[[GNOME Shell]]
File:KDE Plasma 6.3.6 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 48 ⟶ 46:
In [[personal computer]]s, all these elements are modeled through a [[desktop metaphor]] to produce a simulation called a [[desktop environment]] in which the display represents a desktop, on which documents and folders of documents can be placed. Window managers and other software combine to simulate the desktop environment with varying degrees of realism.
Entries may appear in a list to make space for text and details, or in a grid for compactness and larger icons with little space underneath for text. Variations
Multi-row and multi-column layouts commonly found on the web are "shelf" and "waterfall". The former is found on [[image search engine]]s, where images appear with a fixed height but variable length, and is typically implemented with the CSS property and parameter <code>display: inline-block;</code>. A waterfall layout found on [[Imgur]] and [[TweetDeck]] with fixed width but variable height per item is usually implemented by specifying <code>column-width:</code>.
Line 54 ⟶ 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>
== Interaction ==
[[Human interface device]]s, for the efficient interaction with a GUI include a [[computer keyboard]], especially used together with [[keyboard shortcut]]s, [[pointing device]]s for the [[
There are also actions performed by programs that affect the GUI. For example, there are components like [[inotify]] or [[D-Bus]] to facilitate communication between computer programs.
Line 71 ⟶ 69:
The Xerox PARC GUI consisted of graphical elements such as [[window (computing)|windows]], [[menu (computing)|menus]], [[radio button]]s, and [[check box]]es. The concept of [[icon (computing)|icons]] was later introduced by [[David Canfield Smith]], who had written a thesis on the subject under the guidance of Kay.<ref name="MIT">Lieberman, Henry. [http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.125.4685&rep=rep1&type=pdf "A Creative Programming Environment, Remixed"], MIT Media Lab, Cambridge.</ref><ref name="Nader">Salha, Nader. [http://www.sierke-verlag.de/shop/index.php/aesthetics-and-art-in-the-early-development-of-human-computer-interfaces-648.html "Aesthetics and Art in the Early Development of Human-Computer Interfaces"] {{Webarchive|url=https://web.archive.org/web/20200807092951/https://www.sierke-verlag.de/shop/index.php/aesthetics-and-art-in-the-early-development-of-human-computer-interfaces-648.html |date=2020-08-07 }}, October 2012.</ref><ref name="Pygmalion">Smith, David (1975). [https://books.google.com/books/about/Pygmalion.html?id=mihHAAAAIAAJ "Pygmalion: A Creative Programming Environment".]</ref> The PARC GUI employs a [[pointing device]] along with a keyboard. These aspects can be emphasized by using the alternative term and acronym for ''windows, icons, menus, [[pointing device]]'' ([[WIMP (computing)|WIMP]]). This effort culminated in the 1973 [[Xerox Alto]], the first computer with a GUI, though the system never reached commercial production.
The first commercially available computer with a GUI was the 1979 [[PERQ|PERQ workstation]], manufactured by Three Rivers Computer Corporation. Its design was heavily influenced by the work at Xerox PARC. In 1981, Xerox eventually commercialized the ideas from the Alto in the form of a new and enhanced system – the Xerox 8010 Information System – more commonly known as the [[Xerox Star]].<ref>[http://www.catb.org/~esr/writings/taouu/html/ch02s05.html The first GUIs<!-- Bot generated title -->]</ref><ref>[https://www.youtube.com/watch?v=Cn4vC80Pv6Q Xerox Star user interface demonstration, 1982]</ref> These early systems spurred many other GUI efforts, including [[Lisp
Apple, Digital Research, IBM and Microsoft used many of Xerox's ideas to develop products, and IBM's [[IBM Common User Access|Common User Access]] specifications formed the basis of the GUIs used in Microsoft Windows, IBM [[OS/2]] [[Presentation Manager]], and the Unix [[Motif (software)|Motif]] toolkit and [[window manager]]. These ideas evolved to create the interface found in current versions of Microsoft Windows, and in various [[desktop environment]]s for [[Unix-like]] [[operating system]]s, such as macOS and [[Linux]]. Thus most current GUIs have largely common idioms.
Line 78 ⟶ 76:
=== Popularization ===
[[File:Hewlett Packard 200LX.jpg|thumb|[[System Manager (HP LX)|HP LX System Manager]] running on a [[HP 200LX]]]]
GUIs were a hot topic in the early 1980s. The [[Apple Lisa]] was released in 1983, and various windowing systems existed for [[DOS]] operating systems (including [[Graphics Environment Manager|PC GEM]] and [[GEOS (16-bit operating system)|PC/GEOS]]). Individual applications for many platforms presented their own GUI variants.<ref>{{cite web|url=http://toastytech.com/guis/magdesk.html|title=Magic Desk I for Commodore 64}}</ref> Despite the
In 1984, Apple [[1984 (advertisement)|released a television commercial]] which introduced the Apple Macintosh during the telecast of [[Super Bowl XVIII]] by [[CBS]],<ref>{{cite web|url=http://www.duke.edu/~tlove/mac.htm |title=Apple's 1984: The Introduction of the Macintosh in the Cultural History of Personal Computers |archive-url=https://web.archive.org/web/19991005015117/http://www.duke.edu/~tlove/mac.htm |archive-date=October 5, 1999 |first=Ted |last=Friedman |date=October 1997 |url-status=dead }}</ref> with [[allusion]]s to [[George Orwell]]'s noted novel ''[[Nineteen Eighty-Four]]''. The goal of the commercial was to make people think about computers, identifying the user-friendly interface as a personal computer which departed from prior business-oriented systems,<ref name=friedman>{{cite book |chapter-url=http://tedfriedman.com/electric-dreams/chapter-5-apples-1984/ |title=Electric Dreams: Computers in American Culture |chapter=Chapter 5: 1984 |access-date=October 6, 2011 |last=Friedman |first= Ted |year=2005 |publisher= [[New York University Press]]|isbn=978-0-8147-2740-9}}</ref> and becoming a signature representation of Apple products.<ref>{{cite web |title= Review of ''Pirates of Silicon Valley'' Movie |url=http://www.dotjournal.com/review-pirates-silicon-valley-movie |archive-url=https://web.archive.org/web/20061107170215/http://www.dotjournal.com/review-pirates-silicon-valley-movie |archive-date= November 7, 2006 |date= October 29, 2006 |publisher= DotJournal.com |first= Patrick |last= Grote |access-date= January 24, 2014}}</ref>
Line 91 ⟶ 89:
== Comparison to other interfaces ==
{{quote|People said it's more of a right-brain machine and all that—I think there is some truth to that. I think there is something to dealing in a graphical interface and a more kinetic interface—you're really ''moving'' information around, you're seeing it move as though it had substance. And you don't see that on a PC. The PC is very much of a conceptual machine; you move information around the way you move formulas, elements on either side of an equation. I think there's a difference.|[[Andrew Fluegelman]] on the Macintosh, 1985<ref name="microtimes198505">{{Cite magazine |last=Erokan |first=Dennis |date=May 1985 |title=Andrew Fluegelman - PC-Talk and Beyond |url=https://archive.org/details/microtimes00donh/page/n17/mode/1up?view=theater |access-date=2025-03-12 |magazine=MicroTimes |pages=19–26}}</ref>}}
=== Command-line interfaces ===
[[File:Bash screenshot.png|thumb|A modern Command-Line Interface (CLI)]]
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]] (
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=
=== In science fiction ===
Line 135:
* [[Rich web application]]
* [[Skeuomorph]]
* [[Text entry interface]]
* [[Transportable Applications Environment]]
Line 142 ⟶ 141:
* [[Vector-based graphical user interface]]
{{div col end}}
== Notes ==
{{Noteslist}}
== References ==
Line 157 ⟶ 159:
* [http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.103.5038&rep=rep1&type=pdf 3D Graphical User Interfaces] (PDF) by Farid BenHajji and Erik Dybner, Department of Computer and Systems Sciences, Stockholm University
* [http://hdl.handle.net/10045/51725 Topological Analysis of the Gibbs Energy Function (Liquid-Liquid Equilibrium Correlation Data). Including a Thermodinamic Review and a Graphical User Interface (GUI) for Surfaces/Tie-lines/Hessian matrix analysis] – University of Alicante (Reyes-Labarta et al. 2015–18)
* [https://cllax.com/innovative-ways-to-use-information-visualization-across-a-variety-of-fields.html Innovative Ways to Use Information Visualization across a Variety of Fields] {{Webarchive|url=https://web.archive.org/web/20240620150613/https://cllax.com/innovative-ways-to-use-information-visualization-across-a-variety-of-fields.html |date=2024-06-20 }} by Ryan Erwin Digital marketing specialist (CLLAX) (2022-05)
{{User interfaces}}
| |||