{"id":14914,"date":"2020-12-09T13:16:27","date_gmt":"2020-12-09T11:16:27","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14914"},"modified":"2021-02-09T16:15:50","modified_gmt":"2021-02-09T14:15:50","slug":"graphical-user-interface","status":"publish","type":"post","link":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/graphical-user-interface\/","title":{"rendered":"<em>Graphical user interface<\/em> (GUI)"},"content":{"rendered":"<h2><strong>Descripci\u00f3n<\/strong><\/h2>\n<p>La <strong><em>graphical user interface<\/em> (GUI)<\/strong> es un tipo de interfaz que permite al usuario interactuar con los dispositivos a trav\u00e9s de iconos gr\u00e1ficos e indicadores visuales; es un t\u00e9rmino acu\u00f1ado en la d\u00e9cada de los setenta para distinguirlas de interfaces basadas en texto. As\u00ed, las GUI nacieron a ra\u00edz de las dificultades de aprendizaje para los usuarios que presentaban las tradicionales interfaces basadas en comandos. Se trata de un caso particular de la interfaz de usuario que permite interactuar con un sistema digital, empleando para ello im\u00e1genes gr\u00e1ficas, adem\u00e1s de texto, para representar la informaci\u00f3n y las acciones disponibles para el usuario. Las GUI se basan en manipulaci\u00f3n directa (se trata de un tipo de interacci\u00f3n), y las tecnolog\u00edas que hacen posible su uso son los diferentes dispositivos de entrada y salida: teclado, rat\u00f3n, l\u00e1piz, pantalla, pantalla t\u00e1ctil, etc. As\u00ed, podemos encontrar GUI que permiten diferentes tipos de interacci\u00f3n.<\/p>\n<p>De esta manera, las interfaces gr\u00e1ficas de usuario emplean com\u00fanmente elementos tales como ventanas, iconos, men\u00fas y punteros (acr\u00f3nimo anglosaj\u00f3n denominado WIMP) para lograr sus objetivos de comunicaci\u00f3n e interactividad. Las interfaces gr\u00e1ficas de usuario cl\u00e1sicas introdujeron el concepto de \u00abescritorio\u00bb en la pantalla dada su similitud con un entorno de trabajo; se trata de un elemento clave para su r\u00e1pida adopci\u00f3n por parte de una amplia variedad de usuarios. De esta manera, la GUI debe proporcionar una serie de principios de dise\u00f1o desde un punto de vista tanto funcional como est\u00e9tico, estos son:<\/p>\n<ul>\n<li><strong>Met\u00e1fora<\/strong>: conceptos esenciales presentados a trav\u00e9s de diferentes t\u00e9rminos e im\u00e1genes.<\/li>\n<li><strong>Modelo mental<\/strong>: organizaci\u00f3n de los datos, funciones, tareas y roles, as\u00ed como la navegaci\u00f3n a trav\u00e9s de men\u00fas, iconos, cuadros de di\u00e1logos y ventanas.<\/li>\n<li><strong>Aspecto<\/strong>: propiedades visuales, auditivas, elementos decorativos y controles.<\/li>\n<li><strong>Interacci\u00f3n<\/strong>: comportamiento de los controles y dispositivos de visualizaci\u00f3n.<\/li>\n<\/ul>\n<p>Sin embargo, debemos diferenciar las interfaces gr\u00e1ficas de usuario de otro tipo de interfaces existentes:<\/p>\n<ul>\n<li>CLI, interfaces de l\u00ednea de comandos (por ejemplo, MS-DOS, Unix)<\/li>\n<li>NUI, interfaces naturales de usuario (por ejemplo, Siri, sensor Kinect)<\/li>\n<li>OUI, interfaces de usuario org\u00e1nicas (por ejemplo, pantallas flexibles, realidad aumentada)<\/li>\n<li>VUI: interfaces de usuario por voz (por ejemplo, sistemas <em>speech to text<\/em>)<\/li>\n<\/ul>\n<h2><strong>Aplicaci\u00f3n<\/strong><\/h2>\n<p>El gran reto para los dise\u00f1adores de GUI es poder presentar grandes cantidades de informaci\u00f3n y funciones sobre un elemento de tipo visual de una manera clara y eficiente. Partiendo del concepto de escritorio, los sistemas de ventanas tradicionales dividen la pantalla en \u00e1reas funcionales donde se pueden interaccionar con diferentes elementos y gr\u00e1ficos. Sin embargo, algunas de las interfaces gr\u00e1ficas dise\u00f1adas no emplean los elementos est\u00e1ndar, aunque en su gran mayor\u00eda utilizan los sistemas de ventanas (<em>windowing system<\/em>). La apariencia y el comportamiento de este sistema vienen determinados por un conjunto de elementos comunes del sistema de ventanas, si bien las diferentes GUI hacen uso de ellos y su nomenclatura puede variar en cada caso. As\u00ed, algunos de los principales elementos de dise\u00f1o de una GUI son, entre otros:<\/p>\n<ul>\n<li><strong>Ventanas<\/strong>: componente que provee de una estructura visual que puede ser desplazada o redimensionada con independencia de la pantalla.<\/li>\n<li><strong>Men\u00fas<\/strong>: elemento que proporciona una lista de ejecuci\u00f3n de comandos que permite ver o se\u00f1alar en lugar de recordarlos y escribirlos.<\/li>\n<li><strong>Controles<\/strong>: cualquier componente que puede ser manipulado directamente con un teclado o rat\u00f3n.<\/li>\n<li><strong>Cuadros de di\u00e1logo<\/strong>: elemento que proporcionan un contexto visual y funcional para presentar opciones.<\/li>\n<li><strong>Elemento modal de di\u00e1logo<\/strong>: componente que se emplea cuando se requiere que el usuario responda antes de que cualquier otra acci\u00f3n pueda ser ejecutada.<\/li>\n<li><strong>Paneles de control<\/strong>: elementos de solicitud expl\u00edcita de par\u00e1metros que pueden modificarse mientras est\u00e9 visible.<\/li>\n<li><strong>Cuadros de consultas<\/strong>: elementos de consulta que pretenden dar respuesta (por ejemplo, S\u00ed o No) en el contexto en el que se presentan.<\/li>\n<li><strong>Cuadros de mensajes<\/strong>: elemento con el que se pretende proporcionar informaci\u00f3n cr\u00edtica al usuario.<\/li>\n<li><strong>Interfaces de rat\u00f3n y teclado<\/strong>: proporcionan un medio eficiente de realizar las tareas que requiere de manipulaci\u00f3n espacial, posicionamiento, etc., mientras que el teclado es m\u00e1s eficiente para las tareas que requieren entrada de texto.<\/li>\n<\/ul>\n<p>Sin embargo, la utilizaci\u00f3n de estos elementos debe ir en concordancia con los principios de dise\u00f1o de las interfaces gr\u00e1ficas de usuario, destac\u00e1ndose los siguientes:<\/p>\n<ul>\n<li><strong>Organizaci\u00f3n<\/strong>: se debe proporcionar una estructura conceptual consistente (el dise\u00f1o de la pantalla, las relaciones y la navegabilidad son aspectos relevantes en la organizaci\u00f3n). Desde el punto de vista de la consistencia interna (se establece que los mismos principios y reglas deben aplicarse a todos los elementos de la interfaz gr\u00e1fica de usuario) y la consistencia externa (los principios culturales deben considerarse en las interfaces de usuario).<\/li>\n<li><strong>Econom\u00eda<\/strong>: se debe maximizar la efectividad con un m\u00ednimo conjunto de est\u00edmulos. Deben considerarse en este aspecto cuatro puntos relevantes: <strong>simplicidad<\/strong> (solo deben incluirse los elementos que son m\u00e1s importantes y menos intrusivos), <strong>claridad<\/strong> (su significado no debe ser nunca ambiguo para el usuario), <strong>distinci\u00f3n<\/strong> (las caracter\u00edsticas de cada elemento deben ser distinguibles) y <strong>\u00e9nfasis<\/strong> (los elementos m\u00e1s importantes deben ser percibidos f\u00e1cilmente).<\/li>\n<li><strong>Comunicaci\u00f3n<\/strong>: se debe adecuar la presentaci\u00f3n de los elementos a las capacidades del usuario. Esta debe ser confiable (f\u00e1cil de identificar e interpretar, as\u00ed como atractiva), debe usar un conjunto limitado de tipograf\u00edas que deben ser legibles, claras y distintivas, y m\u00faltiples perspectivas (proporcionar m\u00faltiples posibilidades sobre la visualizaci\u00f3n de estructuras y procesos complejos).<\/li>\n<\/ul>\n<p>Otro aspecto esencial que debe considerarse, dentro de cada uno de los principios de dise\u00f1o presentados, es el <strong>color<\/strong>. El color es uno de los elementos m\u00e1s complejos para lograr una buena comunicaci\u00f3n visual; los colores se deben combinar de manera que tengan sentido visual. Como podemos intuir, tras la presentaci\u00f3n de los principales elementos de dise\u00f1o de las interfaces gr\u00e1ficas de usuarios, muchas de estas propuestas ya han sido creadas y aplicadas con mayor o menor \u00e9xito a lo largo de los a\u00f1os. Algunas de ellas funcionaron tan bien que los dise\u00f1adores comenzaron a usarlas repetidamente y, a ra\u00edz de esta popularidad, los usuarios finales ya las interiorizaban. Este fue el nacimiento de los denominados <strong>patrones de dise\u00f1o<\/strong>. Se trata de soluciones recurrentes de las interfaces gr\u00e1ficas de usuario que resuelven problemas de dise\u00f1o comunes y que son una referencia est\u00e1ndar para el dise\u00f1ador de interfaces gr\u00e1ficas de usuarios. El documento (f\u00edsico o digital) que representa estos patrones, as\u00ed como los estilos, las pr\u00e1cticas y principios de un sistema dise\u00f1ado, son las denominadas <strong>gu\u00edas de estilo<\/strong>. Estas surgen debido a la problem\u00e1tica de lograr una consistencia si varios dise\u00f1adores est\u00e1n involucrados en el dise\u00f1o de una interfaz gr\u00e1fica de usuario. Por ello, las gu\u00edas de estilo y los est\u00e1ndares de codificaci\u00f3n se emplean para mantener un dise\u00f1o consistente de las interfaces (por ejemplo, en sistemas operativos o servicios como Facebook o Google); sin embargo, existen otros muchos \u00e1mbitos que no cuentan con una gu\u00eda de estilo, lo que supone un reto mayor a la hora de dise\u00f1arlas.<\/p>\n<h2><strong>Ejemplos<\/strong><\/h2>\n<p>De esta forma, la GUI, tal como la conocemos hoy, se ha convertido en un est\u00e1ndar en la interacci\u00f3n persona-ordenador y el dise\u00f1o de interacci\u00f3n, y ha influido en el trabajo y las comunicaciones de varias generaciones. Las interfaces gr\u00e1ficas de usuario actuales son fruto de una evoluci\u00f3n continua a lo largo de los a\u00f1os.<\/p>\n<p>A continuaci\u00f3n, se presentan algunos de los hitos m\u00e1s relevantes en relaci\u00f3n con el dise\u00f1o y la evoluci\u00f3n de las GUI.<\/p>\n<p><strong>1968<\/strong>: se presenta NLS, un sistema algo rudimentario que hace uso de un rat\u00f3n y m\u00faltiples ventanas para trabajar con hipertexto.<\/p>\n<div id=\"attachment_84\" style=\"width: 666px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-84\" loading=\"lazy\" class=\"my-image wp-image-84 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_16.jpg&quot;\" alt=\"\" width=\"656\" height=\"437\" \/><p id=\"caption-attachment-84\" class=\"wp-caption-text\">Sistema NLS<br \/>Fuente: Wikipedia.<\/p><\/div>\n<p><strong>1970<\/strong>: se desarrolla el paradigma WIMP (ventanas, iconos, men\u00fas y punteros).<\/p>\n<p><strong>1973<\/strong>: se desarrolla el primer ordenador en emplear la met\u00e1fora de escritorio y la interfaz gr\u00e1fica de usuario, aunque no fue comercializado.<\/p>\n<div id=\"attachment_85\" style=\"width: 549px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-85\" loading=\"lazy\" class=\"my-image wp-image-85 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_17.jpg&quot;\" alt=\"\" width=\"539\" height=\"796\" \/><p id=\"caption-attachment-85\" class=\"wp-caption-text\">Entorno Net Executive, Xerox Alto<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<p><strong>1975<\/strong>: demostraci\u00f3n de una GUI incluyendo iconos y men\u00fas emergentes (Xerox).<\/p>\n<p><strong>1979<\/strong>: se presenta la estaci\u00f3n de trabajo PERQ, el primer ordenador que implementa una GUI y es comercializado.<\/p>\n<div id=\"attachment_86\" style=\"width: 679px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-86\" loading=\"lazy\" class=\"my-image wp-image-86 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_18.jpg&quot;\" alt=\"\" width=\"669\" height=\"835\" \/><p id=\"caption-attachment-86\" class=\"wp-caption-text\">Editor gr\u00e1fico, PERQ<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<p><strong>1981<\/strong>: se presenta una evoluci\u00f3n respecto a PERQ (Xerox Star), siendo la influencia de los desarrollos posteriores de GUI.<\/p>\n<div id=\"attachment_87\" style=\"width: 593px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-87\" loading=\"lazy\" class=\"my-image wp-image-87 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_19.jpg&quot;\" alt=\"\" width=\"583\" height=\"735\" \/><p id=\"caption-attachment-87\" class=\"wp-caption-text\">GUI de la Xerox Start<br \/>Fuente: Wikipedia.<\/p><\/div>\n<p><strong>1984<\/strong>: se desarrolla el sistema X Windows; se trata de una plataforma independiente del hardware que permite desarrollar GUI en sistemas tipo UNIX. Adem\u00e1s, aparece con Macintosh, que incorpora ventanas y elementos que se pueden mover y arrastrar con el rat\u00f3n.<\/p>\n<div id=\"attachment_88\" style=\"width: 588px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-88\" loading=\"lazy\" class=\" wp-image-88 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_20.jpg&quot;\" alt=\"\" width=\"578\" height=\"394\" \/><p id=\"caption-attachment-88\" class=\"wp-caption-text\">Escritorio de Apple II<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<p><strong>1985<\/strong>: se desarrolla Workbench v1.0, la GUI de Commodore, caracterizada por incorporar ya los elementos a color.<\/p>\n<div id=\"attachment_89\" style=\"width: 545px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-89\" loading=\"lazy\" class=\"my-image wp-image-89 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_21.jpg&quot;\" alt=\"\" width=\"535\" height=\"335\" \/><p id=\"caption-attachment-89\" class=\"wp-caption-text\">Escritorio de AmigaOS<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<p><strong>1987<\/strong>: se presenta Windows 2.X, que incorpora una GUI con mejoras de teclado, donde las ventanas pueden solaparse y redimensionarse.<\/p>\n<div id=\"attachment_90\" style=\"width: 589px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-90\" loading=\"lazy\" class=\"my-image wp-image-90 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_22.jpg&quot;\" alt=\"\" width=\"579\" height=\"436\" \/><p id=\"caption-attachment-90\" class=\"wp-caption-text\">Escritorio de Windows 2.X<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<p><strong>1991<\/strong>: se introduce la vista 3D en el Workbench de Commodore.<\/p>\n<p><strong>1992<\/strong>: se presenta Windows 3.1, que incluye fuentes TrueType, elementos multimedia y cuadros de di\u00e1logo.<\/p>\n<div id=\"attachment_91\" style=\"width: 663px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-91\" loading=\"lazy\" class=\"my-image wp-image-91 \" src=\"\/wp-content\/uploads\/2020\/12\/20110_23.jpg&quot;\" alt=\"\" width=\"653\" height=\"469\" \/><p id=\"caption-attachment-91\" class=\"wp-caption-text\">Escritorio de Windows 3.1<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<p><strong>1993<\/strong>: se presenta Windows NT donde los formularios HTML incorporan botones de opci\u00f3n, casillas de verificaci\u00f3n, listas desplegables, etc.<\/p>\n<p><strong>1995<\/strong>: se introduce la barra de tareas y el bot\u00f3n de inicio, as\u00ed como el elemento de v\u00eddeo en Windows 95.<\/p>\n<div id=\"attachment_92\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-92\" loading=\"lazy\" class=\"my-image wp-image-92 \" title=\"Escritorio de Windows 95\" src=\"\/wp-content\/uploads\/2020\/12\/20110_24.jpg&quot;\" alt=\"\" width=\"590\" height=\"441\" \/><p id=\"caption-attachment-92\" class=\"wp-caption-text\">Escritorio de Windows 95<br \/>Fuente: http:\/\/toastytech.com (inactivo).<\/p><\/div>\n<h2><strong>Referencias<\/strong><\/h2>\n<p><strong>Golden, K.<\/strong> (2015). <em>The Best Interface Is No Interface: The simple path to brilliant technology<\/em>. New Riders.<\/p>\n<p><strong>Helander, M. G.; Landauer, T. K.; Prabhu, P. V.<\/strong> (1997). <em>Handbook of Human-Computer Interaction<\/em> (2.\u00aa ed.). \u00c1msterdam: North-Holland.<\/p>\n<p><strong>Marcusin, A.<\/strong> (1995). <em>Graphical User Interfaces<\/em>. Nueva York: McGraw-Hill Publishers.<\/p>\n<p><strong>Webgraf\u00eda<\/strong><\/p>\n<p><strong>Little Big Details:<\/strong> &lt;<a href=\"http:\/\/littlebigdetails.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/littlebigdetails.com\/<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p><strong>User Interface Design Patterns:<\/strong> &lt;<a href=\"http:\/\/ui-patterns.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/ui-patterns.com\/<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p>Ejemplos de gu\u00edas de estilo de interfaces gr\u00e1ficas de usuario de servicios:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/es-es\/windows\/uwp\/design\/fluent-design-system\/index\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Design, Fluent design<\/a>.<\/li>\n<li><a href=\"https:\/\/design.google\/resources\/\" target=\"_blank\" rel=\"noopener noreferrer\">Resources &#8211; Google Design, A directory of essential design tools and resources to keep your projects moving forward<\/a>.<\/li>\n<li><a href=\"https:\/\/developer.apple.com\/design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Design \u2013 Apple developer, Human Interface Guidelines<\/a>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Descripci\u00f3n La graphical user interface (GUI) es un tipo de interfaz que permite al usuario interactuar con los dispositivos a trav\u00e9s de iconos gr\u00e1ficos e indicadores visuales; es un t\u00e9rmino acu\u00f1ado en la d\u00e9cada de los setenta para distinguirlas de interfaces basadas en texto. As\u00ed, las GUI nacieron a ra\u00edz de las dificultades de aprendizaje [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18147,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14914\/"}],"collection":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=14914"}],"version-history":[{"count":7,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14914\/revisions\/"}],"predecessor-version":[{"id":18002,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14914\/revisions\/18002\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18147\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=14914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=14914"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=14914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}