Graphical user interface: Difference between revisions

Revision as of 06:33, 10 September 2024

Revision as of 09:24, 25 September 2024

Line 15:

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 }}</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 onesos 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".] </ref> [[self-checkout|self-service checkouts]] usede in a retail store, airline self-ticket and check-in, information kiosks in a public space,spA likeGUI a train station oruses a museum,combination andofhnoivices monitorstodeplrs orcan controlinteract screenswith, infor anthe embeddedtasks industrialof applicationgathering which employ a [[real-time operating system]]and (RTOS).producing

The WIMP style of interaction uses a virtual [[input device]] to represent the position of a [[pointing device|pointing device's interface]], most often a [[computer mouse|mouse]], and presents [[information]] organized in windows and represented with [[Icon (computing)|icons]]. Available commands are compiledpocompiled together in menus, and actions are performed making gestures with the pointing device. A [[window manager]] facilitatesfacilittes the interactions between windows, [[Application software|applications]], and the [[windowing system]]. The windowing system handles hardware devices such as pointing devices, graphics hardware, and positioning of th to produce a simulation called a [[desktop environment]] in which the pointerdispnts a desktop, on which documents and folders of documents can be placed. Window managers and other software combisimulate the desktop environment with varying degrees of realism

[[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.

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 inbetween exist, such as a list with multiple columns of items and a grid of items with rows of text extending sideways from the icon.<ref>{{cite web |last1=Babich |first1=Nick |title=Mobile UX Design: List View and Grid View |url=https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b |website=Medium |access-date=4 September 2021 |language=en |date=30 May 2020}}</ref>

== Examples ==

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

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

File:KDE Plasma 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]]

File:XFCE-4.12-Desktop-standard.png|[[Xfce]]

File:E17 bw screenshot.png|[[Enlightenment (software)|Enlightenment]]

File:Sugar-home-view-0.82.jpg|[[Sugar (software)|Sugar]]

File:X-Window-System.png|A [[twm]] [[X Window System]] environment

File:Dwm-shot.png|The [[dwm]] [[tiling window manager]]

File:Linux Mint 19.1 "Tessa" (Cinnamon).png|[[Cinnamon (desktop environment)|Cinnamon]]

File:Phosh 0.14.0.png|[[Phosh]]

</gallery>

== Components ==

[[File:Schema of the layers of the graphical user interface.svg|thumb|300px|Layers of a GUI based on a [[windowing system]]]]

{{Main|List of graphical user interface elements}}

{{Further|WIMP (computing)|Window manager|Desktop environment}}

A GUI uses a combination of technologies and devices to provide a platform that users can interact with, for the tasks of gathering and producing information.

A series of elements conforming a [[visual language]] have evolved to represent information stored in computers. This makes it easier for people with few computer skills to work with and use computer software. The most common combination of such elements in GUIs is the ''windows, icons, text fields, canvases, menus, pointer'' ([[WIMP (computing)|WIMP]]) paradigm, especially in [[personal computer]]s.<ref>{{Cite web|title=What is a graphical user interface (GUI)?|url=https://www.ionos.com/digitalguide/websites/web-development/what-is-a-gui/|access-date=2022-02-25|website=IONOS Digitalguide|date=14 September 2020 |language=en}}</ref>

The WIMP style of interaction uses a virtual [[input device]] to represent the position of a [[pointing device|pointing device's interface]], most often a [[computer mouse|mouse]], and presents [[information]] organized in windows and represented with [[Icon (computing)|icons]]. Available commands are compiled together in menus, and actions are performed making gestures with the pointing device. A [[window manager]] facilitates the interactions between windows, [[Application software|applications]], and the [[windowing system]]. The windowing system handles hardware devices such as pointing devices, graphics hardware, and positioning of the pointer.

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 inbetween exist, such as a list with multiple columns of items and a grid of items with rows of text extending sideways from the icon.<ref>{{cite web |last1=Babich |first1=Nick |title=Mobile UX Design: List View and Grid View |url=https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b |website=Medium |access-date=4 September 2021 |language=en |date=30 May 2020}}</ref>

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>.