{"id":20626,"date":"2020-01-30T14:20:25","date_gmt":"2020-01-30T14:20:25","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/graphical-user-interface-gui"},"modified":"2026-09-27T09:02:57","modified_gmt":"2026-09-27T09:02:57","slug":"graphical-user-interface-gui","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/graphical-user-interface-gui","title":{"rendered":"Graphical User Interface (GUI)"},"content":{"rendered":"<p><img decoding=\"async\" class=\"boxpad alignright wp-image-80727 size-full\" src=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/graphical-user-interface-gui-glosario-600.jpg\" alt=\"Graphical User Interface (GUI)\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/graphical-user-interface-gui-glosario-600.jpg 600w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/graphical-user-interface-gui-glosario-600-300x300.jpg 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/graphical-user-interface-gui-glosario-600-150x150.jpg 150w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/graphical-user-interface-gui-glosario-600-360x360.jpg 360w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><strong>Definition:<\/strong><\/p>\n<p>A <strong>graphical user interface (GUI)<\/strong> is a visual environment that allows people to interact with a digital system through elements such as windows, icons, menus, buttons, and pointers.<\/p>\n<p>The GUI converts actions performed with a mouse, keyboard, touchscreen, or another input device into instructions that the system processes. It does not necessarily remove the command line or guarantee that every function is graphical, but it provides a visual alternative to entering commands directly.<\/p>\n\n<h2>How a graphical interface works<\/h2>\n<p>A GUI presents visual objects that represent content, functions, or system states. When one of these objects is selected or changed, <strong>the interface interprets the event, performs the corresponding action, and displays a response<\/strong>.<\/p>\n<p>Basic interaction usually follows this sequence:<\/p>\n<ol>\n<li><strong>Input:<\/strong> the system receives a click, keystroke, gesture, voice command, or another supported action.<\/li>\n<li><strong>Identification:<\/strong> the interface determines which control is active and which event has occurred.<\/li>\n<li><strong>Processing:<\/strong> the application or operating system performs the associated function.<\/li>\n<li><strong>Feedback:<\/strong> the GUI reflects the result through a visual change, message, animation, or content update.<\/li>\n<\/ol>\n<p>This model is used in operating systems, applications, websites, ATMs, industrial panels, and game consoles. The input method may vary, but <strong>the relationship between action, state, and response should be understandable<\/strong>.<\/p>\n<h2>Evolution of the graphical interface<\/h2>\n<p>Graphical interfaces emerged from several lines of research into human-computer interaction. The mouse was developed before commercial GUIs, and during the 1970s Xerox PARC created experimental systems that combined a pointer, windows, icons, and menus.<\/p>\n<p>Commercial products such as Xerox Star, Apple Lisa, and Macintosh appeared during the 1980s. Microsoft Windows and other desktop environments later extended this model. <strong>The graphical interface evolved from representing a desktop to supporting many devices and contexts<\/strong>.<\/p>\n<p>The expansion of the web and smartphones introduced hypermedia navigation, multi-touch gestures, responsive layouts, and controls designed for small screens. Graphical interfaces are now also used in televisions, vehicles, wearable devices, virtual reality, and embedded systems.<\/p>\n<h2>Elements of a GUI<\/h2>\n<p>Interface components depend on the device and application. Not every GUI uses windows or pointers, especially on touchscreens, but graphical interfaces often share several resources for organizing interaction.<\/p>\n<p>Common elements include:<\/p>\n<ul>\n<li><strong>Windows and panels:<\/strong> define workspaces, documents, or groups of functions.<\/li>\n<li><strong>Menus and navigation:<\/strong> organize options and allow movement between sections.<\/li>\n<li><strong>Icons:<\/strong> represent objects, tools, states, or actions through visual symbols.<\/li>\n<li><strong>Controls:<\/strong> buttons, fields, selectors, switches, and other <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/widget\">widgets<\/a> receive or modify information.<\/li>\n<li><strong>Pointer and focus:<\/strong> indicate which object can be selected or which element is ready to receive input.<\/li>\n<li><strong>Feedback:<\/strong> confirms an action, reports progress, or communicates an error and possible solutions.<\/li>\n<\/ul>\n<p>Layout, size, contrast, and visual language help people recognize the function of each component. <strong>An element should behave consistently<\/strong> when it appears in different parts of the same system.<\/p>\n<h2>Usability of a graphical interface<\/h2>\n<p>A GUI is not effective simply because it is visual. Its quality depends on <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/usability\">usability<\/a>, accessibility, performance, and suitability for the tasks that people need to complete.<\/p>\n<p>An understandable interface usually applies these criteria:<\/p>\n<ul>\n<li><strong>Consistency:<\/strong> maintains predictable patterns, names, and positions.<\/li>\n<li><strong>Visibility:<\/strong> shows relevant options and the current state of the system.<\/li>\n<li><strong>Response:<\/strong> confirms actions without unnecessary delays or ambiguity.<\/li>\n<li><strong>Prevention and recovery:<\/strong> reduces errors and makes it easier to correct them or undo actions.<\/li>\n<li><strong>Accessibility:<\/strong> supports keyboard navigation, sufficient contrast, labels, and assistive technologies.<\/li>\n<li><strong>Adaptation:<\/strong> preserves functions and legibility across screen sizes and input methods.<\/li>\n<\/ul>\n<p>The GUI contributes to the overall experience, but it does not determine it entirely. Information architecture, content, response times, and service operation also matter. <strong>A visually attractive interface can still be difficult to use<\/strong> if it hides options, responds inconsistently, or excludes alternative methods of interaction.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A graphical user interface (GUI) enables interaction with a system through visual elements. Learn how it works, its evolution, components, and usability.<\/p>\n","protected":false},"author":6,"featured_media":80729,"template":"","encyclopedia-tag":[1271],"class_list":["post-20626","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","encyclopedia-tag-web-styling"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/20626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media\/80729"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=20626"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=20626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}