{"id":76337,"date":"2015-08-13T19:03:06","date_gmt":"2015-08-13T19:03:06","guid":{"rendered":"http:\/\/diseno-visual"},"modified":"2024-08-05T21:58:30","modified_gmt":"2024-08-05T21:58:30","slug":"diseno-visual","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/diseno-visual\/","title":{"rendered":"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.16&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_row _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_accordion _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;][et_pb_accordion_item title=\u00bbConcepto de interfaz\u00bb open=\u00bbon\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n<p>En el v\u00eddeo \u00abStuff From the Future- What is the future of the user interface?\u00bb conocer\u00e1s las posibilidades futuras de las interfaces de usuario.<\/p>\n<p><iframe loading=\"lazy\" title=\"Stuff From the Future- What is the future of the user interface?\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/7VV7eJ9DQNM?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"color: #999999;\"><em>Fuente: <b><a href=\"https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM\" class=\"extiw\" title=\"en:Stuff From the Future- What is the future of the user interface?\" style=\"color: #999999;\">Stuff From the Future- What is the future of the user interface?<\/a><\/b> by HowStuffWorks at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM3<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<blockquote>\n<p>La\u00a0<b>Teor\u00eda de los procesos de\u00a0<\/b><a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\"><b>interacci\u00f3n<\/b><\/a>\u00a0persona-ordenador define la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>\u00a0de un sistema interactivo como un dispositivo tecnol\u00f3gico que permite una\u00a0<em><a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a>\u00a0amigable<\/em>\u00a0con dicho sistema a trav\u00e9s de modelos de representaci\u00f3n de distinto tipo (textual, visual, sonoro, etc.).<\/p>\n<\/blockquote>\n<p>La teorizaci\u00f3n sobre el dise\u00f1o de interfaces podemos abordarla desde distintas disciplinas que van desde el \u201cDise\u00f1o gr\u00e1fico\u201d a la \u201cInteracci\u00f3n persona-ordenador\u201d pasando por la \u201cPsicolog\u00eda del Arte\u201d (Fechner, Arheim, Vygotski, Gardner\u2026) o la \u201c<a href=\"http:\/\/www.alzado.org\/articulo.php?id_art=147\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Psicolog\u00eda cognitiva<\/a>\u201d (Norman).<\/p>\n<p>Habitualmente se utiliza el t\u00e9rmino <em><a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz-grafica-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Interfaz gr\u00e1fica de usuario<\/a><\/em> <em>(GUI<\/em><em>, Graphical user Interface)<\/em> para hacer referencia a un modelo concreto de representaci\u00f3n que hace uso de distintos objetos gr\u00e1ficos e im\u00e1genes para mostrar la informaci\u00f3n disponible dentro de un sistema. Aunque realmente los modelos de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> son extremadamente variados y no aluden de forma exclusiva a los sistemas digitales, el concepto de <em>GUI<\/em> qued\u00f3 definido a partir de los sistemas orientados a objetos, en los que el usuario puede manipular directamente los elementos que conforman la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> cambiando su estado, propiedades e incluso naturaleza.<\/p>\n<p>Desde el an\u00e1lisis semi\u00f3tico, para Scolari (2004) el t\u00e9rmino se ha convertido en los \u00faltimos a\u00f1os en un <em>concepto-paraguas <\/em>que ha terminado definiendo cosas de naturaleza bastante diversa que mantienen entre s\u00ed, solamente, una l\u00f3gica de intercambio informacional. Sin embargo, de todas las definiciones que trae a colaci\u00f3n en su obra nos interesa la interpretaci\u00f3n de Pierre L\u00e9vy (1992) cuando conceptualiza la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> como <em>una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/red\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">red<\/a> cognitiva de interacciones<\/em>. El propio Scolari proyecta un modelo metaf\u00f3rico que no pretende definir tanto la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> como comprender los tipos de met\u00e1fora que se esconden tras su uso (conversacional, instrumental, capilar-osm\u00f3tica, espacial, y <a href=\"http:\/\/comunicaciondigital.es\/glosario\/sociosemiotica\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sociosemi\u00f3tica<\/a>)<\/p>\n<p>No podemos olvidar, en cualquier caso, que las interfaces son elementos evolutivos que van mutando en funci\u00f3n de m\u00faltiples circunstancias que tienen que ver con los contextos de uso, con las competencias lectoras, con las necesidades de los usuarios, con las tendencias, con los criterios de desarrollo, etc. As\u00ed, por ejemplo, Forest Key (responsable de interfaces de usuario de la empresa Microsoft) plantea c\u00f3mo las nuevas versiones del <a href=\"http:\/\/comunicaciondigital.es\/glosario\/so\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">SO<\/a> de la compa\u00f1\u00eda ha sustituido los men\u00fas por cintas contextuales y ventanas emergentes, disponibles en cualquier parte de la pantalla, como una evoluci\u00f3n l\u00f3gica del proceso del modelo de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. En esta l\u00ednea de secuenciaci\u00f3n ling\u00fc\u00edstica a la que responden a\u00fan los sistemas operativos y los nuevos medios, Pablo Manzini (2006) se\u00f1alaba en un art\u00edculo de Educ.ar: \u201cLo interesante de la discusi\u00f3n no es tanto qui\u00e9n tiene raz\u00f3n como el problema que emerge de ella, que nos advierte directamente sobre la cuesti\u00f3n de las interfaces actuales de los sistemas operativos que usamos y del c\u00famulo de objetos vagamente agrupados como \u201cnuevos medios\u201d.<\/p>\n<blockquote class=\"wp-block-quote\">\n<p>Para <a href=\"http:\/\/www.gaiasur.com.ar\/infoteca\/siggraph99\/diseno-de-interfaces-y-usabilidad.html#3\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Eduardo Mercovich<\/a> la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> <em>\u201cno es s\u00f3lo el programa o lo que se ve en la pantalla. Desde el momento que el usuario abre la caja, comienza a interactuar con el producto y por lo tanto, comienza su experiencia\u201d<\/em>.<\/p>\n<\/blockquote>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bb\u00bfPor qu\u00e9 es importante la interfaz?\u00bb open=\u00bboff\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n<blockquote class=\"wp-block-quote\"><\/blockquote>\n<p>Antonio Fern\u00e1ndez-Coca destaca en su libro\u00a0<a href=\"http:\/\/fernandezcoca.com\/descargas\/libros\/paidos_intro.pdf\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">\u201cProducci\u00f3n y dise\u00f1o gr\u00e1fico de la WWW\u201d<\/a>\u00a0que el funcionamiento correcto de una\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz de usuario<\/a>\u00a0descansa en las siguientes bases:<\/p>\n<ul>\n<li><b>Facilidad de aprendizaje<\/b>: conviene utilizar elementos que tengan un significado global o no variar determinadas costumbres extendidas entre los usuarios para facilitar el aprendizaje del uso del\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>(por ejemplo: mantener el bot\u00f3n \u201cX\u201d de cerrar las pantallas siempre en el mismo sitio o utilizar el color rojo para se\u00f1alar alg\u00fan problema).<\/li>\n<li><b>Facilidad de uso<\/b>: no es mala idea apoyar los iconos dif\u00edciles de entender, por ejemplo, mediante palabras. Se ha de lograr que el<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>\u00a0resulte lo m\u00e1s f\u00e1cil posible para el manejo del usuario.<\/li>\n<li><b>Inmediatez<\/b>: Si logramos facilidad y simplicidad lograremos una respuesta r\u00e1pida por parte del usuario. Si la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>\u00a0tiene menos datos visuales en los que distraer su mirada, el usuario podr\u00e1 reaccionar con mayor celeridad.<\/li>\n<li><b>S\u00edmbolos \u00fatiles y reconocibles<\/b>: un ejemplo cl\u00e1sico para entender esta caracter\u00edstica ser\u00eda el de los botones de un v\u00eddeo; si cambiaran el s\u00edmbolo del play se complicar\u00eda el uso del aparato.<\/li>\n<li><b>Unidad de imagen gr\u00e1fica<\/b>: esto es algo b\u00e1sico. Ser\u00eda un error garrafal cambiar de estilo gr\u00e1fico en las distintas ventanas y elementos del\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. Crear\u00eda confusi\u00f3n en el usuario.<\/li>\n<li><a href=\"http:\/\/comunicaciondigital.es\/glosario\/estandar\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\"><b>Est\u00e1ndar<\/b><\/a>: viene a decir lo mismo que el anterior: toda la iconograf\u00eda as\u00ed como todo el aspecto general de la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>\u00a0constituir\u00e1 la imagen corporativa de la informaci\u00f3n que estamos ofreciendo. El estilo gr\u00e1fico y las normas de navegaci\u00f3n han de mantenerse para no confundir al usuario. Saltarse este principio constituye un error bastante extendido.<\/li>\n<\/ul>\n<p>Existe un dise\u00f1o tradicional de interfaces sobre el que el dise\u00f1ador pod\u00eda controlar hacia donde quer\u00eda que fuera el usuario y cu\u00e1ndo. Pero la proliferaci\u00f3n de\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/motores-de-busqueda\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">motores de b\u00fasqueda<\/a>\u00a0ha hecho que esto quede en desuso.\u00a0Ahora, el usuario tiene el control total de navegaci\u00f3n por la p\u00e1gina. Los usuarios pueden llegar a un sitio de forma inesperada y siguiendo caminos que el dise\u00f1ador no habr\u00eda imaginado. Es muy habitual hoy en d\u00eda llegar a un sitio sin haber pasado por su p\u00e1gina de inicio. \u00bfQui\u00e9n no ha buscado informaci\u00f3n en un\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/buscador\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">buscador<\/a>\u00a0y ha entrado en una p\u00e1gina de un sitio que jam\u00e1s hab\u00eda visto y despu\u00e9s ha ido a su p\u00e1gina de inicio? Actualmente, es muy habitual que se produzca este efecto.\u00a0Por todo ello, los dise\u00f1adores, cuando planifican una\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>, deben hacerlo para que haya libertad de movimientos y una navegaci\u00f3n flexible.<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbTipolog\u00eda de interfaces\u00bb open=\u00bboff\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n<blockquote class=\"wp-block-quote\"><\/blockquote>\n<p>Podemos hablar de cinco tipos distintos de interfaces:<\/p>\n<h3>PARC (PUI)<\/h3>\n<p>Conocido tambi\u00e9n como <a href=\"http:\/\/comunicaciondigital.es\/glosario\/wimp\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">WIMP<\/a>, se estructura por medio de una representaci\u00f3n que combina objetos gr\u00e1ficos como ventanas, men\u00fas, botones de radio, botones de marcar e iconos, dentro de un entorno contextualizado por alg\u00fan tipo de met\u00e1fora (v.g. escritorio). Utiliza como dispositivos de entrada, adem\u00e1s del teclado, alg\u00fan instrumento apuntador que permite seleccionar qu\u00e9 parte del entorno manipularemos como usuarios.<br \/>https:\/\/www.youtube.com\/watch?v=2B-XwPjn9YY<br \/><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>The Lost 1984 Video: young Steve Jobs introduces the Macintosh<\/b> by mcessentials at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=2B-XwPjn9YY\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=2B-XwPjn9YY<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>Las primeras interfaces PUI surgieron de los desarrollos llevados a cabo en los laboratorios de Xerox PARC (Palo Alto Research Center) a finales de los a\u00f1os setenta, si bien el primer <a href=\"http:\/\/comunicaciondigital.es\/glosario\/sistema-operativo\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sistema operativo<\/a> que instrumentaliz\u00f3 la idea fue la compa\u00f1\u00eda Apple, con sus ordenadores Macintosh, entrados ya en la d\u00e9cada de los setenta. En el v\u00eddeo \u00abThe Lost 1984 Video: young Steve Jobs introduces the Macintosh\u00bb podr\u00e1s ver la presentaci\u00f3n de este exitoso modelo. El \u00e9xito obtenido anim\u00f3 a IBM y Microsoft para acoger estas ideas en sus especificaciones Common User Access, que son la base de las interfaces de los sistemas operativos Microsoft Windows e IBM OS\/2, adem\u00e1s de las de otros interfaces para otros entornos basado en Unix. Actualmente vivimos rodeados digitalmente de estos modelos de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>.<\/p>\n<h3>Touchscreen (TUI)<\/h3>\n<p>Son todas aquellas interfaces basadas en el uso de pantallas t\u00e1ctiles. Creada por Eugene Mosher, uno de los pioneros de la Teor\u00eda de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> hombre-m\u00e1quina, su l\u00f3gica representacional es muy similar a las PUI, dado que la forma de organizar la informaci\u00f3n y mostrarla en pantalla responde a criterios muy homog\u00e9neos cuando no id\u00e9nticos. La diferencia fundamental radica en la forma de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> que se le propone al usuario; en este caso, gracias a la capacidad sensitiva de la capa de contacto (pantalla), el dispositivo apuntador no es una extensi\u00f3n electr\u00f3nica, si no que esta responde a la presi\u00f3n efectuada en uno o en varios puntos.<\/p>\n<p>Su utilizaci\u00f3n comenz\u00f3 en puestos electr\u00f3nicos (cajeros, sistemas electr\u00f3nicos de control\u2026) en sistema de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/control-domotico\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">control dom\u00f3tico<\/a>, y, de forma profusa en los \u00faltimos a\u00f1os, en dispositivos de inform\u00e1tica y comunicaci\u00f3n m\u00f3vil (PDAs, m\u00f3viles, etc.) donde es, actualmente, el modelo predominante.<\/p>\n<p>El desarrollo que han experimentado las interfaces TUI en los \u00faltimos a\u00f1os, ha integrado en muchos casos las funcionalidades de las denominadas i<b>nterfaces Zooming (ZUI)<\/b>. Se trata de un sistema avanzado de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> basado en realidad virtual, en el que se mezclan elementos 3D con sistemas planos multicapa. Este modelo aporta mayor realismo y flexibilidad al tradicional concepto de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. Su utilidad est\u00e1 enfocada hacia los dispositivos de pantalla reducida, fundamentalmente los de movilidad, por lo que las l\u00edneas de investigaci\u00f3n est\u00e1n dirigidas a la b\u00fasqueda de modelos que optimicen las prestaciones de estos entornos reducidos mediante sistemas de representaci\u00f3n complejos en los que sea sencillo pasar entre escalas y representar distintos niveles de detalle.<\/p>\n<p><iframe loading=\"lazy\" title=\"Pad++ with PadPrints and GrayMatters\" width=\"1080\" height=\"810\" src=\"https:\/\/www.youtube.com\/embed\/62KcJ09k7cE?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>Pad++ with PadPrints and GrayMatters<\/b> by Ben Benderson at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=62KcJ09k7cE\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=62KcJ09k7cE<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>Los elementos de informaci\u00f3n en una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> ZUI son mostrados directamente en un escritorio virtual \u201cinfinito\u201d, usando <a href=\"http:\/\/comunicaciondigital.es\/glosario\/graficos-vectoriales\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">gr\u00e1ficos vectoriales<\/a> en vez de ventanas. Los usuarios pueden pasar de un plano general del escritorio virtual y hacer zoom en los objetos de su inter\u00e9s\u2026 (2007)<\/p>\n<p>Entre los proyectos m\u00e1s conocidos que usan la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> de Zooming destaca <a href=\"http:\/\/maps.google.es\/maps?hl=es&amp;tab=wl\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Maps<\/a> y <a href=\"http:\/\/www.google.es\/intl\/es\/earth\/index.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Earth<\/a>, donde el usuario puede cambiar la escala del visionado (hacer zoom) para obtener m\u00e1s detalle de una zona en concreto. Los primeros intentos para desarrollar el <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> ZUI fue el proyecto Pad++, llevado a cabo por la New York University y continuado por la University of New Mexico, con el que se desarroll\u00f3 <a href=\"http:\/\/www.cs.umd.edu\/hcil\/piccolo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Piccolo<\/a>. En el v\u00eddeo \u00abPad++ with PadPrints and GrayMatters\u00bb podr\u00e1s aprender m\u00e1s sobre este proyecto.<\/p>\n<h3>Interfaces 3D<\/h3>\n<p>Las interfaces 3D tratan de vencer el modelo tradicional 2D basado en modelo lineales, para ofrecer sistemas de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> m\u00e1s complejos, con mayores funcionalidades integradas, con arquitecturas menos r\u00edgidas y predefinidas, y que permitan modelos de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> m\u00e1s cognitivos que f\u00edsicos. En v\u00eddeo \u00ab3D Multi-touch Prototype for Augmented and Virtual Reality\u00bb ver\u00e1s un ejemplo de este tipo de interfaz.<\/p>\n<p><iframe loading=\"lazy\" title=\"3D Multi-touch Prototype for Augmented and Virtual Reality\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/Tw1mXjMshJE?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>3D Multi-touch Prototype for Augmented and Virtual Reality<\/b> by Georg Hackenberg at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=Tw1mXjMshJE\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=Tw1mXjMshJE<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>En este campo se hallan iniciativas como el proyecto de Sun Microsystems, <a href=\"http:\/\/www.sun.com\/software\/looking_glass\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Looking Glass<\/a>, una plataforma abierta que trata de explorar las posibilidades de las Interfaces de usuario en 3D. En esa misma l\u00ednea, se encuentra el proyecto <a href=\"http:\/\/www.opencroquet.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Open Croquet<\/a>, de la fundaci\u00f3n \u201cThe Croquet Consortium\u201d, que ampl\u00eda el concepto de GUI 3D a\u00f1adi\u00e9ndole el concepto de multiusuario, o el proyecto Virtual Objet System (VOS) que incorpora una tecnolog\u00eda inform\u00e1tica para crear sistemas distribuidos de objetos. Los avances m\u00e1s recientes integran elementos de realidad virtual y aumentada con sistemas multit\u00e1ctiles.<\/p>\n<p>Las caracter\u00edsticas b\u00e1sicas que definen este modelo de interfaces son:<\/p>\n<ul>\n<li>Aprovechan las posibilidades del desarrollo Cloud, pues trabajan en modelos de proceso en servidor (aplicaciones y sistemas operativos en l\u00ednea)<\/li>\n<li>Ofrecen un sistema de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> 3D como los modelos de los videojuegos.<\/li>\n<\/ul>\n<h3>Interfaces inmersivas y Realidad Virtual<\/h3>\n<p>Las interfaces inmersivas ofrecen una experiencia integral en la que, a trav\u00e9s de dispositivos hardware complementarios, como cascos, gafas de realidad virtual, sistemas de audio en 3D, etc. permiten \u201cintegrar\u201d al usuario dentro de una experiencia inmersiva.<\/p>\n<p>En el siguiente v\u00eddeo, el director del proyecto Morpheus detalla algunas de las posibilidades de la Realidad Virtual.<\/p>\n<p><iframe loading=\"lazy\" title=\"El director del PlayStation Magic Lab te muestra &quot;Morpheus&quot;, el sue\u00f1o de la realidad virtual\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/071Spcadshc?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>3D El director del PlayStation Magic Lab te muestra \u00abMorpheus\u00bb, el sue\u00f1o de la realidad virtual<\/b> by El Futuro Es Apasionante de Vodafone at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=071Spcadshc\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=071Spcadshc<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<h3>Interfaces Multimdoales (IMM)<\/h3>\n<p>Se trata de interfaces que utilizan simult\u00e1neamente varios sentidos (vista, o\u00eddo y voz) para ofrecer a los usuarios una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/experiencia-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">experiencia de usuario<\/a> m\u00e1s natural y sencilla. Se trata de un sistema novedoso, que soporta los est\u00e1ndares industriales b\u00e1sicos: WML, <a href=\"http:\/\/comunicaciondigital.es\/glosario\/html\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">HTML<\/a>, <a href=\"http:\/\/comunicaciondigital.es\/glosario\/xhtml\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">XHTML<\/a> , <a href=\"http:\/\/comunicaciondigital.es\/glosario\/voicexml\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">VoiceXML<\/a>, C++ y <a href=\"http:\/\/comunicaciondigital.es\/glosario\/java\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Java<\/a>.<\/p>\n<p>Aplicada al campo de los dispositivos m\u00f3viles permite enriquecer las aplicaciones de contenidos para m\u00f3viles a trav\u00e9s de interfaces de usuario multimodales y biom\u00e9tricas, que se han convertido en elementos b\u00e1sicos de interacci\u00f3n con este tipo de dispositivos, tanto para el acceso al mismo (reconocimiento de imagen, por ejemplo), como para la transmisi\u00f3n de indicaciones (sistemas como <a href=\"http:\/\/www.apple.com\/es\/ios\/siri\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Siri de Apple<\/a>). Tambi\u00e9n, las interfaces multimodales son de las m\u00e1s adaptadas para usuarios con discapacidades y permiten acceder a una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a> desde diferentes dispositivos. Seg\u00fan Caicedo Castro y Rueda Fajardo, la aproximaci\u00f3n m\u00e1s b\u00e1sica consiste en codificar la informaci\u00f3n en varios formatos.<\/p>\n<p><iframe loading=\"lazy\" title=\"HBB-Next Multimodal Interface Demonstration\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/WANRbjW4ph4?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>HBB-Next Multimodal Interface Demonstration<\/b> by IcoMinarik at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=WANRbjW4ph4\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=WANRbjW4ph4<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>La mayor\u00eda del dise\u00f1o de las interfaces de usuario se ha centrado en el aspecto cognitivo y en la representaci\u00f3n visual de la informaci\u00f3n. Sin embargo, en este terreno de las interfaces multimodales es donde se sit\u00faan las fronteras que m\u00e1s se est\u00e1n explorando. Emergen nuevos dispositivos y con ellos nuevas interfaces donde el cuerpo y la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> con \u00e9l cobran protagonismo. Donde se han producido algunos de los avances m\u00e1s interesantes es en las interfaces gestuales. Puedes ver un ejemplo el el v\u00eddeo \u00abHBB-Next Multimodal Interface Demonstration\u00bb. Como casi siempre, los videojuegos han sido punteros en aplicar est\u00e1 tecnolog\u00eda (Wii, Kinect, etc.) pero los usos se han ido extendiendo a muchos otros dispositivos, como las SmartTV, etc.<\/p>\n<p>A partir de esta tecnolog\u00eda, Microsoft elabor\u00f3 una visi\u00f3n del futuro de nuestra <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> con los datos virtuales. En esta visi\u00f3n se apuntan las caracter\u00edsticas con las que evolucionar\u00e1n las interfaces y c\u00f3mo habr\u00e1n de tener en cuenta no solo el aspecto visual. Jakob Nielsen, uno de los expertos mundiales m\u00e1s reputados en el tema de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/usabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">usabilidad<\/a>, public\u00f3 una lista con las que, a su juicio, eran las 10 mejores interfaces de usuario que pod\u00edan encontrarse en <a href=\"http:\/\/comunicaciondigital.es\/glosario\/internet\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Internet<\/a>. Son las siguientes:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.mediamind.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Campaing Monitor. EyeBlaster (Israel)<\/a><\/li>\n<li><a href=\"http:\/\/www.cmsbox.com\/de\/cms\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">CMSBox. CMSBox (Suiza)<\/a><\/li>\n<li><a href=\"http:\/\/www.oce.com\/en\/Software\/prismaprepare\/default.htm\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">PRISMAprepare. Oc\u00e9 (Holanda)<\/a><\/li>\n<li><a href=\"http:\/\/fotoflexer.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">FotoFlexer. Arbor Labs (EEUU<\/a>)<\/li>\n<li><a href=\"http:\/\/www.profitstreams.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Seating Management. Magellan Network and DesingBox (EEUU)<\/a><\/li>\n<li><a href=\"http:\/\/www.idera.com\/Products\/SQL-Server\/SQL-diagnostic-manager\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">SQL Diagnostic Manager. Idera (EEUU)<\/a><\/li>\n<li><a href=\"https:\/\/www.sugarsync.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">SugarSync. Sharpcast (EEUU)<\/a><\/li>\n<li><a href=\"http:\/\/www.supersaas.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">SuperSaaS. SuperSaas (Holanda<\/a>)<\/li>\n<li><a href=\"http:\/\/wufoo.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Wufoo. Infinity Box Inc. (EEUU)<\/a><\/li>\n<li><a href=\"http:\/\/www.xero.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Xero. Xero (Nueva Zelanda)<\/a><\/li>\n<\/ul>\n<h3>Interfaz hologr\u00e1fica (holograf\u00eda t\u00e1ctil)<\/h3>\n<p>En el v\u00eddeo \u00abNuestros ordenadores ser\u00e1n transparentes, manejados por hologramas\u00bb se explica qu\u00e9 es un holograma.<\/p>\n<p><iframe loading=\"lazy\" title=\"Nuestros ordenadores ser\u00e1n transparentes, manejados por hologramas\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/Fd-wwOmqzYc?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>Nuestros ordenadores ser\u00e1n transparentes, manejados por hologramas<\/b> by El Futuro Es Apasionante de Vodafone at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=Fd-wwOmqzYc\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=Fd-wwOmqzYc<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>Las interfaces hologr\u00e1ficas, cuyo antecedente se remonta en el imaginario colectivo al <a href=\"http:\/\/cdn1.sciencefiction.com\/wp-content\/uploads\/2014\/06\/leias_message.jpg\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">holograma de Leia<\/a> en Star Wars, y t\u00e9cnicamente a las primeras <a href=\"https:\/\/es.wikipedia.org\/wiki\/Holograf%C3%ADa_t%C3%A1ctil\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">holograf\u00edas t\u00e1ctiles<\/a> de los a\u00f1os 60, es un tipo de interfaz corp\u00f3rea que, si bien est\u00e1 a\u00fan en fase de desarrollo, se extender\u00e1 en los pr\u00f3ximos a\u00f1os ofreciendo un nuevo modelo de control de objetos hologr\u00e1ficos de una definici\u00f3n asombrosa.<\/p>\n<p><iframe loading=\"lazy\" title=\"Takee - world&#039;s first holographic 3D smartphone\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/4tM5qJFsXeM?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>Takee &#8211; world&#8217;s first holographic 3D smartphone<\/b> by TeleKineza.com at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=4tM5qJFsXeM\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=4tM5qJFsXeM<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>Una de las soluciones, desarrollada por la empresa Laia, cuenta con pantallas hologr\u00e1ficas e interactivas para dispositivos m\u00f3viles, \u201cque permitir\u00e1 a la gente proyectar hologramas con sus propias manos e interactuar con ellos, para materializar el mundo digital en sus manos\u201d. En el v\u00eddeo \u00abTakee &#8211; world&#8217;s first holographic 3D smartphone\u00bb podr\u00e1s descubrir m\u00e1s.<\/p>\n<p>Al proyectar im\u00e1genes fuera del dispositivo, ello permite no s\u00f3lo ampliar el campo de acci\u00f3n y el tama\u00f1o de las im\u00e1genes proyectadas, sino interactuar con ellas como si se tratase de objetos reales.<\/p>\n<p>Algunos desarrollos, como este que se muestra en el v\u00eddeo, permiten ya crear im\u00e1genes hologr\u00e1ficas 3D directamente con un smartphone.<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbPrincipios del dise\u00f1o de interfaces\u00bb open=\u00bboff\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n<blockquote class=\"wp-block-quote\"><\/blockquote>\n<p>La pr\u00e1ctica del dise\u00f1o de interfaces y los diversos estudios sobre el tema, han generado numerosas listas de principios que deben aplicarse. Algunos de estos principios son:<\/p>\n<h3>Familiaridad<\/h3>\n<p>El principio de familiaridad del usuario sugiere que los usuarios no deben ser obligados a adaptarse a una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> s\u00f3lo porque sea inconveniente implementarla. La <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe utilizar t\u00e9rminos familiares para los usuarios, y los objetos que el sistema manipula deben estar directamente relacionados con el entorno de trabajo del usuario.<\/p>\n<h3>Uniformidad<\/h3>\n<p>El principio de uniformidad de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz de usuario<\/a> significa que los comandos y menus del sistema deben tener el mismo formato, los par\u00e1metros deben pasarse a todos los comandos de la misma forma, y la puntuaci\u00f3n de los comandos debe ser similar. Las interfaces uniformes reducen el tiempo de aprendizaje del usuario. Por lo tanto, el conocimiento aprendido en un comando o aplicaci\u00f3n es aplicable en otras partes del sistema o en aplicaciones relacionadas. La uniformidad de la<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> a lo largo de las aplicaciones tambi\u00e9n es importante. En lo posible, los comandos con significados similares en aplicaciones diferentes se deben expresar de la misma forma.<\/p>\n<h3>M\u00ednima sorpresa<\/h3>\n<p>El principio de m\u00ednima sorpresa es apropiado debido a que las personas se irritan demasiado cuando el sistema se comporta de forma inesperada. Cuando se utiliza un sistema, los usuarios construyen un modelo mental de la forma en que trabaja dicho sistema. Si una acci\u00f3n en alg\u00fan contexto provoca un tipo de cambio particular, es razonable pensar que la misma acci\u00f3n en un contexto diferente cause un cambio comparable. Si sucede algo completamente diferente, el usuario se sorprende y confunde.<\/p>\n<h3>Recuperabilidad<\/h3>\n<p>El principio de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/recuperabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">recuperabilidad<\/a> es importante debido a que los usuarios inevitablemente cometen errores cuando utilizan un sistema. El dise\u00f1o de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> puede minimizar estos errores, pero los errores nunca pueden eliminarse completamente. Por consiguiente, se deben incluir recursos que permitan a los usuarios recuperarse de sus errores. Estos ueden ser de tres tipos:<\/p>\n<ul>\n<li>Confirmaci\u00f3n de acciones destructivas<\/li>\n<li>Proporcionar un recurso para deshacer<\/li>\n<li>Generar puntos de control<\/li>\n<\/ul>\n<h3>Asistencia al usuario<\/h3>\n<p>Un principio relacionado es el de asistencia al usuario o caracter\u00edsticas de ayuda. \u00c9stas se deben integrar en el sistema y proporcionar diferentes niveles de ayuda y asesoramiento. El principio de diversidad de usuarios ajustandose a los diferentes tipos de usuarios del sistema<br \/>La perspectiva desde la que se elaboran estos principios es el llamado <a href=\"http:\/\/comunicaciondigital.es\/glosario\/diseno-centrado-en-el-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Dise\u00f1o Centrado en el Usuario<\/a> (<a href=\"http:\/\/comunicaciondigital.es\/glosario\/ucd\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">UCD<\/a>). La base de todo el proceso es c\u00f3mo la gente usar\u00e1 el producto; se centra en el usuario a trav\u00e9s de las diferentes fases. En la siguiente figura se ilustra el proceso de dise\u00f1o general de la UI (user interface)<\/p>\n<figure class=\"aligncenter\"><div id=\"attachment_81092\" style=\"width: 1034px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/09\/Asistencia-al-usuario.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-81092\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/09\/Asistencia-al-usuario-1024x515.png\" width=\"1024\" height=\"515\" alt=\"Diagrama Asistencia al usuario\" class=\"wp-image-81092 size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/09\/Asistencia-al-usuario-1024x515.png 1024w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/09\/Asistencia-al-usuario-980x493.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/09\/Asistencia-al-usuario-480x241.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><p id=\"caption-attachment-81092\" class=\"wp-caption-text\">Diagrama Asistencia al usuario<\/p><\/div><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>Dise\u00f1o general UI<\/b> by Manuel Gertrudix at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/e9e8a-elprocesod-1440398904-87.jpg\" style=\"color: #999999;\">https:\/\/cibercambio.files.wordpress.com\/2021\/04\/e9e8a-elprocesod-1440398904-87.jpg<\/a>. Licensed under the terms of the cc-by-2.0.<\/em><\/span><\/p>\n<p>Tambi\u00e9n es recomendable tener muy presente otras caracter\u00edsticas para dise\u00f1ar \u00a0una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> profesionalmente adecuada:<\/p>\n<h3>Color<\/h3>\n<p>Una decisi\u00f3n importante a tener en cuenta es el color. Muchas personas no le prestan la menor atenci\u00f3n, pero el dise\u00f1ador debe tener cuidado con \u00e9l.<\/p>\n<p>Al hablar de color hay que distinguir entre el color como fen\u00f3meno f\u00edsico, donde intervienen la luz y la visi\u00f3n, y el color como fen\u00f3menos sensorial, que es el que nos ocupa.<\/p>\n<p>Como fen\u00f3meno que percibimos a trav\u00e9s de los sentidos, el color est\u00e1 sometido a criterios de an\u00e1lisis subjetivos. Depende de las preferencias personales, la relaci\u00f3n que mantenga con otros colores dentro del campo visual, el estado de \u00e1nimo, etc.<\/p>\n<p>A grandes rasgos podemos distinguir entre colores fr\u00edos y c\u00e1lidos. Los primeros son los violetas, azules y verdes y dan la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/impresion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">impresi\u00f3n<\/a> de frescor, tristeza, reducci\u00f3n del espacio\u2026 Los segundos son los amarillos, naranjas, rojos, etc., que producen una sensaci\u00f3n de alegr\u00eda y de amplitud del espacio. Por ejemplo: un bot\u00f3n amarillo sobre fondo azul se ve como si fluyera hacia fuera tomando as\u00ed el primer plano para el espectador.<\/p>\n<p>El color en la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Web<\/a> se convierte en una herramienta de comunicaci\u00f3n, adem\u00e1s de llamar la atenci\u00f3n: por un lado transmiten informaci\u00f3n, y por otro, establecen el tono del sitio. Una mala elecci\u00f3n del color puede conllevar una err\u00f3nea interpretaci\u00f3n del significado. Por este motivo hay que tener en cuenta el factor cultural y clim\u00e1tico de algunos pa\u00edses porque afectar\u00e1 a la percepci\u00f3n que se pueda tener de los mismo. Estas son algunas de las asociaciones m\u00e1s b\u00e1sicas por colores individuales:<\/p>\n<ul>\n<li>Blanco: inocencia, limpieza, bueno<\/li>\n<li>Negro: miedo, muerte, malo, oscuridad<\/li>\n<li>Marr\u00f3n: sucio, tierra<\/li>\n<li>Amarillo: precauci\u00f3n, agobio<\/li>\n<li>Rojo: pasi\u00f3n, prohibido, calor<\/li>\n<li>Verde: naturaleza, campo, tranquilidad<\/li>\n<li>Azul: fr\u00edo, tristeza, relajaci\u00f3n<\/li>\n<\/ul>\n<p>Otra de las opciones que tienen que ver con el color es retocar una de sus cualidades: el contraste. Variando esta propiedad se puede crear un<a href=\"http:\/\/comunicaciondigital.es\/glosario\/patron\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">patr\u00f3n<\/a> jer\u00e1rquico que el usuario identifique a simple vista.<\/p>\n<p>El objetivo del color en el sitio <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, como el de otros elementos, es garantizar la mayor <a href=\"http:\/\/comunicaciondigital.es\/glosario\/usabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">usabilidad<\/a> del mismo. Por esta raz\u00f3n debe de adecuarse a la finalidad que persiga el dise\u00f1ador.<\/p>\n<h3>Equilibrio<\/h3>\n<p>Como las p\u00e1ginas <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Web<\/a> pueden incluir texto, botones, iconos, fotograf\u00eda, etc. , es necesario organizarla de forma eficaz y dise\u00f1arla de modo que quede equilibrada.<\/p>\n<p>El <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a> hace referencia, al igual que ocurre en composici\u00f3n fotogr\u00e1fica, a la distribuci\u00f3n del peso \u00f3ptico en la disposici\u00f3n, es decir, a un correcto reparto de los elementos de la composici\u00f3n. El peso \u00f3ptico es la capacidad de un elemento de atraer la mirada del usuario. Este viene determinado por el color, el aspecto o el tama\u00f1o del elemento.<\/p>\n<p>El <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a> puede ser sim\u00e9trico o asim\u00e9trico, aunque tambi\u00e9n puede no disponer de tal caracter\u00edstica. Es sim\u00e9trico cuando lo elementos se organizan horizontal o verticalmente a ambos lados de una l\u00ednea central. Esto causa una sensaci\u00f3n de rigor, fuerza y <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a>. Un ejemplo:<\/p>\n<p>Una composici\u00f3n asim\u00e9trica no presenta esta estructura regular, pero s\u00ed est\u00e1 ordenada por el juego de vol\u00famenes, colores, etc., y el conjunto queda equilibrado en el formato. Este tipo de dise\u00f1o es din\u00e1mico e informal. Utilizado sobre todo para sitios l\u00fadicos o de entretenimiento.<\/p>\n<p>En el dise\u00f1o sin <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a> hay elementos organizado en la p\u00e1gina, pero sin tener en cuenta su <a href=\"http:\/\/comunicaciondigital.es\/glosario\/peso-visual-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">peso visual<\/a>.<\/p>\n<h3>Intuici\u00f3n<\/h3>\n<p>Seg\u00fan el diccionario de la RAE, \u2018intuici\u00f3n\u2019 es la \u201cpercepci\u00f3n clara e inmediata de una idea o situaci\u00f3n, sin necesidad de razonamiento l\u00f3gico\u201d y, por tanto, cuando decimos que una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> es intuitiva hacemos referencia a su capacidad para que un nuevo usuario consiga de un simple vistazo entender su estructura, captar sus contenidos e interactuar con ella con casi la misma familiaridad que si ya la conociera de antes. Lograr que la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> dise\u00f1ada sea intuitiva a la vez que novedosa y creativa es un reto que, en muchas ocasiones, obliga a sacrificar en alguna medida una u otra caracter\u00edstica.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c3c6e-interfacesi-1440399322-35.jpg\" alt=\"En esta imagen intuimos f\u00e1cilmente que los objetos est\u00e1n relacionados dos a dos\" \/><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>Relaci\u00f3n de objetos<\/b> by Manuel gertrudix at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c3c6e-interfacesi-1440399322-35.jpg\" style=\"color: #999999;\">https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c3c6e-interfacesi-1440399322-35.jpg<\/a>. Licensed under the terms of the cc-by-2.0.<\/em><\/span><\/p><figcaption>En esta imagen intuimos f\u00e1cilmente que los objetos est\u00e1n relacionados dos a dos<\/figcaption><p>.<\/p>\n<\/figure>\n<p>Daniel Mordecki, profesor universitario y director de Concreta -empresa uruguaya especializada en la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/usabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">usabilidad<\/a> y estrategia en <a href=\"http:\/\/comunicaciondigital.es\/glosario\/internet\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">internet<\/a>&#8211; apunta algunas indicaciones que es conveniente tener presentes en la b\u00fasqueda de un dise\u00f1o intuitivo para la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. Partiendo de la base de que toda<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> de un usuario con un sitio <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a> se desarrolla simult\u00e1neamente (y de manera inconsciente) en los niveles de \u2018mirar\u2019, \u2018leer\u2019 y \u2018pensar\u2019, en Concreta han desarrollado un modelo denominado, precisamente, <a href=\"http:\/\/www.mordecki.com\/html\/miroleopienso.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">\u201cMiro, Leo, Pienso\u201d<\/a> que se divide en varios niveles de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> de menor a mayor complejidad.<\/p>\n<p>El m\u00e1s b\u00e1sico ser\u00eda el nivel de \u201cMiro y entiendo\u201d que supone un escaso esfuerzo por parte del usuario de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. De un solo vistazo, y en base a la experiencia de navegaci\u00f3n acumulada, la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe poder trasmitir su estructura casi de manera inconsciente. Por ejemplo, en la imagen de la derecha se intuye f\u00e1cilmente que los cuadrados est\u00e1n relacionados de dos en dos.Si el dise\u00f1o tuvo en cuenta este nivel, entonces \u201cla agrupaci\u00f3n visual, los efectos crom\u00e1ticos, los espacios, la ubicaci\u00f3n, los tama\u00f1os, entre otros elementos, permiten al visitante comprender m\u00faltiples aspectos de la p\u00e1gina que ve sin esfuerzo alguno y de forma pr\u00e1cticamente inmediata, aumentando enormemente la facilidad de uso\u201d (Mordecki: \u201cInterfaces e Intuici\u00f3n\u201d, n\u00ba 1 revista Faz 2007).<\/p>\n<p>El segundo nivel requiere m\u00e1s esfuerzo y Mordecki lo denomina \u201cLeo y entiendo\u201d. Aqu\u00ed el usuario debe leer los textos y etiquetas y, si responde a un buen dise\u00f1o, ese texto deber\u00eda ser suficientemente autoexplicativo para no requerir ninguna informaci\u00f3n complementaria acerca de su uso o utilidad: \u201cEs muy importante NO asumir que los visitantes tienen m\u00e1s conocimientos o <em>background<\/em> que los que realmente tienen, en particular con respecto al propio sitio\u201d (Mordecki, <em>op.cit<\/em>.). \u201cPienso y entiendo\u201d ser\u00eda el nivel superior al que solo se deber\u00eda acudir si el contenido que se ofrece y para el que se requiere ese esfuerzo complementario, al final debe merecer la pena al usuario ya que, en caso contrario, se puede sentir defraudado. Seg\u00fan Mordecki: \u201cSi estoy dentro del <a href=\"http:\/\/comunicaciondigital.es\/glosario\/publico-objetivo\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">p\u00fablico objetivo<\/a>, se supone que cualquier contenido publicado por un sitio debiera ser para m\u00ed comprensible en el nivel \u2018Pienso y entiendo\u2019.<\/p>\n<h3>Claridad<\/h3>\n<p>Crear una\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>\u00a0con todas estas caracter\u00edsticas es complicado, pero Alfred Astort, dise\u00f1ador de interfaces de Microsoft, afirma en una entrevista a infonom\u00eda.com que \u201cel siguiente paso deben ser los interfaces que podr\u00edamos llamar fluidos, donde podremos movernos de una aplicaci\u00f3n a otra sin darnos cuenta; el escritorio tampoco ser\u00e1 como lo conocemos ahora, ser\u00e1 un espacio sin l\u00edmite donde accederemos a la informaci\u00f3n \u00abzambull\u00e9ndonos\u00bb en ella. No m\u00e1s carpetas con ficheros dentro, el ordenador deber\u00e1 superar estos anacronismos del pasado y crear un lenguaje visual propio.\u201d<\/p>\n<p>Adem\u00e1s de poseer un dise\u00f1o equilibrado e intuitivo, una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe tener un dise\u00f1o claro, ya que debe evitar la ambig\u00fcedad y dejar lo suficientemente claro los distintos elementos a trav\u00e9s del lenguaje, la jerarqu\u00eda y las met\u00e1foras para los elementos visuales. Tambi\u00e9n debe ser concisa, ya que a veces se crea una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> con demasiadas etiquetas y especificaciones, sobrecarg\u00e1ndola de manera que el usuario no encuentra f\u00e1cilmente aquello que busca, as\u00ed como familiar, con elementos que le resulten conocidos al usuario, empleando, por ejemplo, met\u00e1foras de la vida real.Debe tener capacidad de respuesta, ser veloz y no hacer esperar al usuario adem\u00e1s de proporcionar un buen <a href=\"http:\/\/comunicaciondigital.es\/glosario\/feedback\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">feedback<\/a> al usuario, y ser consistente para permitir al usuario reconocer determinados patrones de uso y as\u00ed evitar confusiones.Sin ser un objetivo principal, una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe tener un dise\u00f1o est\u00e9tico, ya que eso ayudar\u00e1 a que la experiencia de los usuarios sea m\u00e1s positiva, pero tambi\u00e9n debe ser eficiente y permitir realizar un mayor n\u00famero de tareas en menos tiempo y gestionar los errores de manera que sea posible deshacer acciones o poder recuperar archivos borrados.<\/p>\n<\/figure>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbDise\u00f1ar en funci\u00f3n del comportamiento del usuario\u00bb open=\u00bboff\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n<blockquote class=\"wp-block-quote\"><\/blockquote>\n<p>En el dise\u00f1o de las interfaces es fundamental entender c\u00f3mo procedemos los usuarios a la hora de recorrer y manipular esta. En la siguiente infograf\u00eda se muestra el comportamiento registrado mediante el sistema <i>eye tracking<\/i>.<\/p>\n<figure class=\"hideprint\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/067b3-101oneyet-1534372208-69.png\" alt=\"\" \/><\/figure>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>101 on eye tracking. How your eyes move on a website.<\/b> by CrazyEgg and SingleGrain at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/067b3-101oneyet-1534372208-69.png\" style=\"color: #999999;\">https:\/\/cibercambio.files.wordpress.com\/2021\/04\/067b3-101oneyet-1534372208-69.png<\/a>. License by owner of copyright. <\/em><\/span><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbRecomendaciones tipogr\u00e1ficas generales para la Web\u00bb open=\u00bboff\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n<p><iframe loading=\"lazy\" title=\"Introducci\u00f3n a la tipograf\u00eda web I (parte 1)\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/bVT6tQWtxxE?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span id=\"fuente01\" style=\"color: #999999;\"><em>Fuente: <b>Introducci\u00f3n a la tipogaf\u00eda web I (parte 1)<\/b> by iDESWEB UA at <a rel=\"nofollow\" class=\"external free\" href=\"https:\/\/www.youtube.com\/watch?v=bVT6tQWtxxE&amp;t=2s\" style=\"color: #999999;\">https:\/\/www.youtube.com\/watch?v=bVT6tQWtxxE&amp;t=2s<\/a>. License by owner of copyright.<\/em><\/span><\/p>\n<p>La elecci\u00f3n de la tipograf\u00eda y su tratamiento en un contenido digital resulta esencial para lograra adecuadamente los objetivos de comunicaci\u00f3n.<\/p>\n<h3>Recomendaciones<\/h3>\n<ul>\n<li>Priorizar la legibilidad por encima de todo<\/li>\n<li>Usar fuentes\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/sans-serif-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sans-serif<\/a>\u00a0para mostrar en pantalla<\/li>\n<li>Usar medidas relativas (porcentajes, \u201cems\u201d) e integradas en\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/css-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">CSS<\/a>\u00a0(nunca p\u00edxeles)<\/li>\n<li>Alto contraste letra-fondo<\/li>\n<li>Evitar fondos excesivamente llenos<\/li>\n<li>Reducir, al m\u00ednimo, los textos en movimiento, en may\u00fasculas (seg\u00fan las reglas de\u00a0<a href=\"http:\/\/www.netiqueta.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Netiqueta<\/a>\u00a0equivale a gritar, y est\u00e1 demostrado que reducen la velocidad de lectura en un 10%) y el texto gr\u00e1fico.<\/li>\n<li>No utilizar \u201ccursivas\u201d<\/li>\n<\/ul>\n<ul>\n<li>Indicar siempre una fuentes \u201cseguras\u201d: Arial, Verdana y Georgia como alternativa, por si no estuviese disponible la fuente web utilizada.<\/li>\n<li>Evitar utilizar, durante el dise\u00f1o, textos falsos (como el famoso \u201c<a href=\"http:\/\/comunicaciondigital.es\/glosario\/lorem-ipsum\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">lorem ipsum<\/a>\u201d, para poder detectar problemas de legibilidad\/comprensi\u00f3n en el texto real.<\/li>\n<li>Evitar el uso de anti-<a href=\"http:\/\/comunicaciondigital.es\/glosario\/aliasing-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">aliasing<\/a>\u00a0(suavizado de los bordes dentados de las formas y el texto basado en vectores) pues tiende a generar textos m\u00e1s borrosos.<\/li>\n<\/ul>\n<p>Los autores m\u00e1s puristas insisten en la permanencia de determinadas reglas, como, por ejemplo, que los textos enlazados vayan en azul y est\u00e9n subrayados. No obstante, hay que se\u00f1alar que sobre esto, considerando los h\u00e1bitos actuales de los internautas, existe cierta controversia.<\/p>\n<h3>Reglas<\/h3>\n<p>Podemos decir que, cuando alguien\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/visita\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">visita<\/a>\u00a0un sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0que hemos dise\u00f1ado, lo m\u00e1s probable es que por encima de los colores, im\u00e1genes o sonidos, se base en el texto para encontrar aquello por lo que\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/visita\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">visita<\/a>\u00a0el sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. Esto deber\u00eda hacer que la tipograf\u00eda, el arte de la organizaci\u00f3n del tipo, sea una prioridad para cualquier dise\u00f1ador\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. As\u00ed y teniendo en cuenta las recomendaciones referidas anteriormente, podemos tener en cuenta estas reglas b\u00e1sicas en el desarrollo de un proyecto <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>:<\/p>\n<ol>\n<li><strong>Debe leerse el texto \u00edntegramente:<\/strong> si \u00a0un dise\u00f1ador no comprende la gran mayor\u00eda del texto, tendr\u00eda dificultades para reunir la tipograf\u00eda que hace que el sitio realmente funcione. Motivo por el cual el dise\u00f1ador debe leer lo que escribe para poder determinar la tipograf\u00eda que mejor se adapte a aqu\u00e9l.\u00a0Algunos dise\u00f1adores de p\u00e1ginas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0creen que s\u00f3lo con copiar y pegar un archivo de texto quedan completadas todas las funciones textuales. Si bien, debemos tener en cuenta que cuando se lee un texto ha de proporcionarse al menos una idea b\u00e1sica de c\u00f3mo puede ser integrado en un sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, evitando la desconexi\u00f3n entre la escritura y el dise\u00f1o del mismo; se busca una lectura f\u00e1cil de la l\u00ednea textual, evitando que lleve demasiado tiempo leerlas y que resulte engorrosa su lectura.<\/li>\n<li><strong>Volcado de\u00a0<em style=\"font-size: 1rem;\"><a href=\"http:\/\/es.lipsum.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Lorem Ipsum<\/a><\/em>, tan pronto como sea posible<\/strong>:\u00a0El sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0es muy dependiente de la palabra escrita as\u00ed como de palabras muy espec\u00edficas. El cuerpo del texto en s\u00ed puede suponer que se le preste una especial atenci\u00f3n con una letra capital y alguna que otra modificaci\u00f3n del mismo, atenci\u00f3n que podr\u00eda no ser posible con el denominado \u201c<a href=\"http:\/\/comunicaciondigital.es\/glosario\/lorem-ipsum\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">lorem ipsum<\/a>\u201d (texto falso).\u00a0A menos que el texto sea en realidad\u00a0<em style=\"font-size: 1rem;\"><a href=\"http:\/\/comunicaciondigital.es\/glosario\/lorem-ipsum\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">lorem ipsum<\/a><\/em>, el texto de relleno no tendr\u00e1 ninguna similitud con la realidad. Esto significa que cualquier ajuste podr\u00eda hacer que el texto o el dise\u00f1o que lo rodea tengan que esperar hasta que se consiga una visi\u00f3n real. Preguntar y obtener el texto por parte del usuario tan pronto como sea posible en el proceso, supondr\u00e1 una gran capacidad para ajustar el dise\u00f1o y la tipograf\u00eda en su conjunto.<\/li>\n<li><strong>Mostrar una clara jerarqu\u00eda:<\/strong> Cuando se\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/visita\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">visita<\/a>\u00a0una p\u00e1gina<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, uno debe saber de forma casi inmediata d\u00f3nde debe comenzar a leer. Utilizando la tipograf\u00eda se puede establecer una jerarqu\u00eda clara entre los distintos conceptos que se representan en la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. Cada sitio tiene una jerarqu\u00eda bien desarrollada con indicadores de por d\u00f3nde y c\u00f3mo se debe empezar a leer. Al pensar sobre el tama\u00f1o y tipos de letra, se puede resaltar un trozo de texto como si de un titular se tratase, predominando sobre el resto del texto a tratar.<\/li>\n<li><strong>Mostrar atenci\u00f3n a la Macro y Micro-tipograf\u00eda:<\/strong> Cuando hablamos de Macro-tipograf\u00eda nos referimos a la estructura general de su tipo, la forma en que aparece en el contexto de su dise\u00f1o y su est\u00e9tica, se considera el texto como un bloque en s\u00ed mismo. Es la oportunidad para que el texto sea visto de forma atractiva en su conjunto, para lo cual juegan un papel fundamental la elecci\u00f3n de los tipos de letra y colores.\u00a0Mientras que si hablamos de Micro-tipograf\u00eda nos estamos preocupando m\u00e1s por los detalles de la separaci\u00f3n, las cuestiones que determinan si las palabras son f\u00e1ciles de leer. As\u00ed la Micro-tipograf\u00eda se convierte en una necesidad absoluta cuando tratamos de configurar un texto en s\u00ed mismo: si no es legible, no tiene sentido.<\/li>\n<li><strong>Hay que tener especial cuidado con los colores de tipo:<\/strong> Cuando un dise\u00f1ador de p\u00e1ginas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0trabaja con el tipo de color, la atenci\u00f3n del internauta se considera absolutamente necesaria, por lo que deben tenerse muy en cuenta las combinaciones de colores de la p\u00e1gina; por ejemplo, si escribimos un texto en color rojo sobre un fondo rojo no ser\u00e1 f\u00e1cilmente legible, lo que provocar\u00e1 la desatenci\u00f3n del usuario. La soluci\u00f3n m\u00e1s f\u00e1cil para esta situaci\u00f3n es asegurarse de que el color de su tipo es totalmente diferente al del fondo sobre el cual se asienta.<\/li>\n<li><strong>Las\u00a0<em style=\"font-size: 1rem;\"><a href=\"http:\/\/es.wikipedia.org\/wiki\/Hojas_de_estilo_en_cascada\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Cascading Style Sheets<\/a><\/em>\u00a0(<a href=\"http:\/\/comunicaciondigital.es\/glosario\/css-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">CSS<\/a>) han de ser tomado realmente en serio:<\/strong> Estas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/hojas-de-estilo\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Hojas de Estilo<\/a>\u00a0en Cascada consisten en un mecanismo que detalla la forma en que va a mostrarse un determinado documento en la pantalla del ordenador, c\u00f3mo se va a exponer la informaci\u00f3n que el mismo contiene o incluso c\u00f3mo va a imprimirse el mismo.\u00a0Si la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/css-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">CSS<\/a>\u00a0es clara, el usuario puede moverse entre las p\u00e1ginas de un sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a> sin problemas, as\u00ed como garantizar la coherencia de la tipograf\u00eda de la cual se compone el mismo. Tambi\u00e9n podemos afirmar que si se rompe en un peque\u00f1o lapso la coherencia del texto en s\u00ed, podr\u00edamos conseguir dar importancia a lo que realmente queremos destacar, consiguiendo un dise\u00f1o efectivo.<\/li>\n<li><strong>Preferencia por la tipograf\u00eda <em style=\"font-size: 1rem;\"><a href=\"http:\/\/comunicaciondigital.es\/glosario\/sans-serif\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sans serif<\/a><\/em>:<\/strong> Si echamos un vistazo a los distintos sitios\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0de la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/red\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">red<\/a>, casi todos los grandes bloques de texto se fijan en un tipo de letra\u00a0<em style=\"font-size: 1rem;\"><a href=\"http:\/\/comunicaciondigital.es\/glosario\/sans-serif\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sans serif<\/a><\/em>, mucho m\u00e1s f\u00e1cil de leer. Aspecto que destaca sobre todo en los titulares y otros bloques m\u00e1s peque\u00f1os de texto, creando lo que podemos llegar a determinar como un <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a>\u00a0entre los dos.<\/li>\n<\/ol>\n<p>Estos diez pasos pueden resumirse en tres premisas b\u00e1sicas que han de ser tenidas en cuenta a la hora de elegir una tipograf\u00eda para la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>:<\/p>\n<ul>\n<li><b>Visibilidad.\u00a0<\/b>Grado en que las letras pueden distinguirse unas de otras. Depende, entre otros factores, de:\u00a0Blanco interno de mayor tama\u00f1o (ojo medio), el tama\u00f1o individual de las letra, los rasgos del dise\u00f1o de algunos tipos, el grosor, el color y contraste, etc.<br \/><b>Legibilidad.\u00a0<\/b>Rapidez con la que el ojo identifica un car\u00e1cter, letra, palabra o grupo de palabras\u00a0Depende de muchos factores: letras may\u00fasculas o min\u00fasculas, del n\u00famero de palabras por l\u00ednea, cursiva, negrita, si hay muchos n\u00fameros o signos de puntuaci\u00f3n, graf\u00eda con remates\u2026<\/li>\n<li><b>Lecturabilidad. <\/b>Facilidad y confort con la que el texto es le\u00eddo. Depende de factores como el inter\u00e9s del lector, la forma y tipo de texto, el tama\u00f1o, el ancho de l\u00ednea, el espacio e interlineado, el contraste crom\u00e1tico, etc.<\/li>\n<\/ul>\n<p>[\/et_pb_accordion_item][\/et_pb_accordion][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<iframe loading=\"lazy\" src=\"https:\/\/anchor.fm\/comunica-digital\/embed\/episodes\/Estrategias-y-tcnicas-de-composicin-visual-e1ogo5l\" height=\"160px\" width=\"100%\" frameborder=\"0\" scrolling=\"no\"><\/iframe>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76337?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\" ><img decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Versi\u00f3n en PDF<\/span><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>En el v\u00eddeo \u00abStuff From the Future- What is the future of the user interface?\u00bb conocer\u00e1s las posibilidades futuras de las interfaces de usuario. https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM Fuente: Stuff From the Future- What is the future of the user interface? by HowStuffWorks at https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM3. License by owner of copyright. La\u00a0Teor\u00eda de los procesos de\u00a0interacci\u00f3n\u00a0persona-ordenador define la\u00a0interfaz\u00a0de un&hellip; <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/diseno-visual\/\">Continua leyendo<span> Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual<\/span><\/a><\/p>","protected":false},"author":4,"featured_media":77239,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Concepto de interfaz<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"center\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:pullquote {\"align\":\"right\"} -->\n<figure class=\"wp-block-pullquote alignright\"><blockquote><p>La&nbsp;<b>Teor\u00eda de los procesos de&nbsp;<\/b><a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\"><b>interacci\u00f3n<\/b><\/a>&nbsp;persona-ordenador define la&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>&nbsp;de un sistema interactivo como un dispositivo tecnol\u00f3gico que permite una&nbsp;<em><a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a>&nbsp;amigable<\/em>&nbsp;con dicho sistema a trav\u00e9s de modelos de representaci\u00f3n de distinto tipo (textual, visual, sonoro, etc.).&nbsp;<\/p><\/blockquote><\/figure>\n<!-- \/wp:pullquote -->\n\n<!-- wp:paragraph -->\n<p>La teorizaci\u00f3n sobre el dise\u00f1o de interfaces podemos abordarla desde distintas disciplinas que van desde el \u201cDise\u00f1o gr\u00e1fico\u201d a la \u201cInteracci\u00f3n persona-ordenador\u201d pasando por la \u201cPsicolog\u00eda del Arte\u201d (Fechner, Arheim, Vygotski, Gardner\u2026) o la \u201c<a href=\"http:\/\/www.alzado.org\/articulo.php?id_art=147\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Psicolog\u00eda cognitiva<\/a>\u201d (Norman).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Habitualmente se utiliza el t\u00e9rmino <em><a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz-grafica-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Interfaz gr\u00e1fica de usuario<\/a><\/em> <em>(GUI<\/em><em>, Graphical user Interface)<\/em> para hacer referencia a un modelo concreto de representaci\u00f3n que hace uso de distintos objetos gr\u00e1ficos e im\u00e1genes para mostrar la informaci\u00f3n disponible dentro de un sistema. Aunque realmente los modelos de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> son extremadamente variados y no aluden de forma exclusiva a los sistemas digitales, el concepto de <em>GUI<\/em> qued\u00f3 definido a partir de los sistemas orientados a objetos, en los que el usuario puede manipular directamente los elementos que conforman la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> cambiando su estado, propiedades e incluso naturaleza.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Desde el an\u00e1lisis semi\u00f3tico, para Scolari (2004) el t\u00e9rmino se ha convertido en los \u00faltimos a\u00f1os en un <em>concepto-paraguas <\/em>que ha terminado definiendo cosas de naturaleza bastante diversa que mantienen entre s\u00ed, solamente, una l\u00f3gica de intercambio informacional. Sin embargo, de todas las definiciones que trae a colaci\u00f3n en su obra nos interesa la interpretaci\u00f3n de Pierre L\u00e9vy (1992) cuando conceptualiza la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> como <em>una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/red\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">red<\/a> cognitiva de interacciones<\/em>. El propio Scolari proyecta un modelo metaf\u00f3rico que no pretende definir tanto la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> como comprender los tipos de met\u00e1fora que se esconden tras su uso (conversacional, instrumental, capilar-osm\u00f3tica, espacial, y <a href=\"http:\/\/comunicaciondigital.es\/glosario\/sociosemiotica\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sociosemi\u00f3tica<\/a>)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>No podemos olvidar, en cualquier caso, que las interfaces son elementos evolutivos que van mutando en funci\u00f3n de m\u00faltiples circunstancias que tienen que ver con los contextos de uso, con las competencias lectoras, con las necesidades de los usuarios, con las tendencias, con los criterios de desarrollo, etc. As\u00ed, por ejemplo, Forest Key (responsable de interfaces de usuario de la empresa Microsoft) plantea c\u00f3mo las nuevas versiones del <a href=\"http:\/\/comunicaciondigital.es\/glosario\/so\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">SO<\/a> de la compa\u00f1\u00eda ha sustituido los men\u00fas por cintas contextuales y ventanas emergentes, disponibles en cualquier parte de la pantalla, como una evoluci\u00f3n l\u00f3gica del proceso del modelo de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. En esta l\u00ednea de secuenciaci\u00f3n ling\u00fc\u00edstica a la que responden a\u00fan los sistemas operativos y los nuevos medios, Pablo Manzini (2006) se\u00f1alaba en un art\u00edculo de Educ.ar: \u201cLo interesante de la discusi\u00f3n no es tanto qui\u00e9n tiene raz\u00f3n como el problema que emerge de ella, que nos advierte directamente sobre la cuesti\u00f3n de las interfaces actuales de los sistemas operativos que usamos y del c\u00famulo de objetos vagamente agrupados como \u201cnuevos medios\u201d.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Para <a href=\"http:\/\/www.gaiasur.com.ar\/infoteca\/siggraph99\/diseno-de-interfaces-y-usabilidad.html#3\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Eduardo Mercovich<\/a> la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> <em>\u201cno es s\u00f3lo el programa o lo que se ve en la pantalla. Desde el momento que el usuario abre la caja, comienza a interactuar con el producto y por lo tanto, comienza su experiencia\u201d<\/em>. <\/p><\/blockquote>\n<!-- \/wp:quote -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfPor qu\u00e9 es importante la interfaz?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Antonio Fern\u00e1ndez-Coca destaca en su libro&nbsp;<a href=\"http:\/\/fernandezcoca.com\/descargas\/libros\/paidos_intro.pdf\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">\u201cProducci\u00f3n y dise\u00f1o gr\u00e1fico de la WWW\u201d<\/a>&nbsp;que el funcionamiento correcto de una&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz de usuario<\/a>&nbsp;descansa en las siguientes bases:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>\n<b>Facilidad de aprendizaje<\/b>: conviene utilizar elementos que tengan un significado global o no variar determinadas costumbres extendidas entre los usuarios para facilitar el aprendizaje del uso del&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>(por ejemplo: mantener el bot\u00f3n \u201cX\u201d de cerrar las pantallas siempre en el mismo sitio o utilizar el color rojo para se\u00f1alar alg\u00fan problema).\n<\/li><li>\n<b>Facilidad de uso<\/b>: no es mala idea apoyar los iconos dif\u00edciles de entender, por ejemplo, mediante palabras. Se ha de lograr que el<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>&nbsp;resulte lo m\u00e1s f\u00e1cil posible para el manejo del usuario.\n<\/li><li>\n<b>Inmediatez<\/b>: Si logramos facilidad y simplicidad lograremos una respuesta r\u00e1pida por parte del usuario. Si la&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>&nbsp;tiene menos datos visuales en los que distraer su mirada, el usuario podr\u00e1 reaccionar con mayor celeridad.\n<\/li><li>\n<b>S\u00edmbolos \u00fatiles y reconocibles<\/b>: un ejemplo cl\u00e1sico para entender esta caracter\u00edstica ser\u00eda el de los botones de un v\u00eddeo; si cambiaran el s\u00edmbolo del play se complicar\u00eda el uso del aparato.\n<\/li><li>\n<b>Unidad de imagen gr\u00e1fica<\/b>: esto es algo b\u00e1sico. Ser\u00eda un error garrafal cambiar de estilo gr\u00e1fico en las distintas ventanas y elementos del&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. Crear\u00eda confusi\u00f3n en el usuario.\n<\/li><li>\n<a href=\"http:\/\/comunicaciondigital.es\/glosario\/estandar\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\"><b>Est\u00e1ndar<\/b><\/a>: viene a decir lo mismo que el anterior: toda la iconograf\u00eda as\u00ed como todo el aspecto general de la&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>&nbsp;constituir\u00e1 la imagen corporativa de la informaci\u00f3n que estamos ofreciendo. El estilo gr\u00e1fico y las normas de navegaci\u00f3n han de mantenerse para no confundir al usuario. Saltarse este principio constituye un error bastante extendido.\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Existe un dise\u00f1o tradicional de interfaces sobre el que el dise\u00f1ador pod\u00eda controlar hacia donde quer\u00eda que fuera el usuario y cu\u00e1ndo. Pero la proliferaci\u00f3n de&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/motores-de-busqueda\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">motores de b\u00fasqueda<\/a>&nbsp;ha hecho que esto quede en desuso.&nbsp;Ahora, el usuario tiene el control total de navegaci\u00f3n por la p\u00e1gina. Los usuarios pueden llegar a un sitio de forma inesperada y siguiendo caminos que el dise\u00f1ador no habr\u00eda imaginado. Es muy habitual hoy en d\u00eda llegar a un sitio sin haber pasado por su p\u00e1gina de inicio. \u00bfQui\u00e9n no ha buscado informaci\u00f3n en un&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/buscador\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">buscador<\/a>&nbsp;y ha entrado en una p\u00e1gina de un sitio que jam\u00e1s hab\u00eda visto y despu\u00e9s ha ido a su p\u00e1gina de inicio? Actualmente, es muy habitual que se produzca este efecto.&nbsp;Por todo ello, los dise\u00f1adores, cuando planifican una&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>, deben hacerlo para que haya libertad de movimientos y una navegaci\u00f3n flexible.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Tipolog\u00eda de interfaces<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Podemos hablar de cinco tipos distintos de interfaces:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>PARC (PUI)<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Conocido tambi\u00e9n como <a href=\"http:\/\/comunicaciondigital.es\/glosario\/wimp\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">WIMP<\/a>, se estructura por medio de una representaci\u00f3n que combina objetos gr\u00e1ficos como ventanas, men\u00fas, botones de radio, botones de marcar e iconos, dentro de un entorno contextualizado por alg\u00fan tipo de met\u00e1fora (v.g. escritorio). Utiliza como dispositivos de entrada, adem\u00e1s del teclado, alg\u00fan instrumento apuntador que permite seleccionar qu\u00e9 parte del entorno manipularemos como usuarios. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=2B-XwPjn9YY\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"right\",\"className\":\"wp-embed-aspect-4-3 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=2B-XwPjn9YY\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>Las primeras interfaces PUI surgieron de los desarrollos llevados a cabo en los laboratorios de Xerox PARC (Palo Alto Research Center) a finales de los a\u00f1os setenta, si bien el primer <a href=\"http:\/\/comunicaciondigital.es\/glosario\/sistema-operativo\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sistema operativo<\/a> que instrumentaliz\u00f3 la idea fue la compa\u00f1\u00eda Apple, con sus ordenadores Macintosh, entrados ya en la d\u00e9cada de los setenta. El \u00e9xito obtenido anim\u00f3 a IBM y Microsoft para acoger estas ideas en sus especificaciones Common User Access, que son la base de las interfaces de los sistemas operativos Microsoft Windows e IBM OS\/2, adem\u00e1s de las de otros interfaces para otros entornos basado en Unix. Actualmente vivimos rodeados digitalmente de estos modelos de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Touchscreen (TUI)<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Son todas aquellas interfaces basadas en el uso de pantallas t\u00e1ctiles. Creada por Eugene Mosher, uno de los pioneros de la Teor\u00eda de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> hombre-m\u00e1quina, su l\u00f3gica representacional es muy similar a las PUI, dado que la forma de organizar la informaci\u00f3n y mostrarla en pantalla responde a criterios muy homog\u00e9neos cuando no id\u00e9nticos. La diferencia fundamental radica en la forma de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> que se le propone al usuario; en este caso, gracias a la capacidad sensitiva de la capa de contacto (pantalla), el dispositivo apuntador no es una extensi\u00f3n electr\u00f3nica, si no que esta responde a la presi\u00f3n efectuada en uno o en varios puntos.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/-->\n\n<!-- wp:paragraph {\"fontSize\":\"small\"} -->\n<p class=\"has-small-font-size\">Jeff Han. Fuente: TED<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Su utilizaci\u00f3n comenz\u00f3 en puestos electr\u00f3nicos (cajeros, sistemas electr\u00f3nicos de control\u2026) en sistema de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/control-domotico\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">control dom\u00f3tico<\/a>, y, de forma profusa en los \u00faltimos a\u00f1os, en dispositivos de inform\u00e1tica y comunicaci\u00f3n m\u00f3vil (PDAs, m\u00f3viles, etc.) donde es, actualmente, el modelo predominante.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El desarrollo que han experimentado las interfaces TUI en los \u00faltimos a\u00f1os, ha integrado en muchos casos las funcionalidades de las denominadas i<b>nterfaces Zooming (ZUI)<\/b>. Se trata de un sistema avanzado de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> basado en realidad virtual, en el que se mezclan elementos 3D con sistemas planos multicapa. Este modelo aporta mayor realismo y flexibilidad al tradicional concepto de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. Su utilidad est\u00e1 enfocada hacia los dispositivos de pantalla reducida, fundamentalmente los de movilidad, por lo que las l\u00edneas de investigaci\u00f3n est\u00e1n dirigidas a la b\u00fasqueda de modelos que optimicen las prestaciones de estos entornos reducidos mediante sistemas de representaci\u00f3n complejos en los que sea sencillo pasar entre escalas y representar distintos niveles de detalle.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=62KcJ09k7cE\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"right\",\"className\":\"wp-embed-aspect-4-3 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=62KcJ09k7cE\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>Los elementos de informaci\u00f3n en una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> ZUI son mostrados directamente en un escritorio virtual \u201cinfinito\u201d, usando <a href=\"http:\/\/comunicaciondigital.es\/glosario\/graficos-vectoriales\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">gr\u00e1ficos vectoriales<\/a> en vez de ventanas. Los usuarios pueden pasar de un plano general del escritorio virtual y hacer zoom en los objetos de su inter\u00e9s\u2026 (2007)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Entre los proyectos m\u00e1s conocidos que usan la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> de Zooming destaca <a href=\"http:\/\/maps.google.es\/maps?hl=es&amp;tab=wl\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Maps<\/a> y <a href=\"http:\/\/www.google.es\/intl\/es\/earth\/index.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Earth<\/a>, donde el usuario puede cambiar la escala del visionado (hacer zoom) para obtener m\u00e1s detalle de una zona en concreto. Los primeros intentos para desarrollar el <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> ZUI fue el proyecto Pad++, llevado a cabo por la New York University y continuado por la University of New Mexico, con el que se desarroll\u00f3 <a href=\"http:\/\/www.cs.umd.edu\/hcil\/piccolo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Piccolo<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Interfaces 3D<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Las interfaces 3D tratan de vencer el modelo tradicional 2D basado en modelo lineales, para ofrecer sistemas de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> m\u00e1s complejos, con mayores funcionalidades integradas, con arquitecturas menos r\u00edgidas y predefinidas, y que permitan modelos de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> m\u00e1s cognitivos que f\u00edsicos. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=Tw1mXjMshJE\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"right\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=Tw1mXjMshJE\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>En este campo se hallan iniciativas como el proyecto de Sun Microsystems, <a href=\"http:\/\/www.sun.com\/software\/looking_glass\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Looking Glass<\/a>, una plataforma abierta que trata de explorar las posibilidades de las Interfaces de usuario en 3D. En esa misma l\u00ednea, se encuentra el proyecto <a href=\"http:\/\/www.opencroquet.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Open Croquet<\/a>, de la fundaci\u00f3n \u201cThe Croquet Consortium\u201d, que ampl\u00eda el concepto de GUI 3D a\u00f1adi\u00e9ndole el concepto de multiusuario, o el proyecto Virtual Objet System (VOS) que incorpora una tecnolog\u00eda inform\u00e1tica para crear sistemas distribuidos de objetos. Los avances m\u00e1s recientes integran elementos de realidad virtual y aumentada con sistemas multit\u00e1ctiles.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Las caracter\u00edsticas b\u00e1sicas que definen este modelo de interfaces son:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Aprovechan las posibilidades del desarrollo Cloud, pues trabajan en modelos de proceso en servidor (aplicaciones y sistemas operativos en l\u00ednea)\n<\/li><li>Ofrecen un sistema de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> 3D como los modelos de los videojuegos.\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>Interfaces inmersivas y Realidad Virtual<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Las interfaces inmersivas ofrecen una experiencia integral en la que, a trav\u00e9s de dispositivos hardware complementarios, como cascos, gafas de realidad virtual, sistemas de audio en 3D, etc. permiten \u201cintegrar\u201d al usuario dentro de una experiencia inmersiva.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En el siguiente v\u00eddeo, el director del proyecto Morpheus detalla algunas de las posibilidades de la Realidad Virtual.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=071Spcadshc\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"center\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=071Spcadshc\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:heading -->\n<h2>Interfaces Multimdoales (IMM)<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Se trata de interfaces que utilizan simult\u00e1neamente varios sentidos (vista, o\u00eddo y voz) para ofrecer a los usuarios una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/experiencia-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">experiencia de usuario<\/a> m\u00e1s natural y sencilla. Se trata de un sistema novedoso, que soporta los est\u00e1ndares industriales b\u00e1sicos: WML, <a href=\"http:\/\/comunicaciondigital.es\/glosario\/html\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">HTML<\/a>, <a href=\"http:\/\/comunicaciondigital.es\/glosario\/xhtml\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">XHTML<\/a> , <a href=\"http:\/\/comunicaciondigital.es\/glosario\/voicexml\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">VoiceXML<\/a>, C++ y <a href=\"http:\/\/comunicaciondigital.es\/glosario\/java\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Java<\/a>. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Aplicada al campo de los dispositivos m\u00f3viles permite enriquecer las aplicaciones de contenidos para m\u00f3viles a trav\u00e9s de interfaces de usuario multimodales y biom\u00e9tricas, que se han convertido en elementos b\u00e1sicos de interacci\u00f3n con este tipo de dispositivos, tanto para el acceso al mismo (reconocimiento de imagen, por ejemplo), como para la transmisi\u00f3n de indicaciones (sistemas como <a href=\"http:\/\/www.apple.com\/es\/ios\/siri\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Siri de Apple<\/a>). Tambi\u00e9n, las interfaces multimodales son de las m\u00e1s adaptadas para usuarios con discapacidades y permiten acceder a una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a> desde diferentes dispositivos. Seg\u00fan Caicedo Castro y Rueda Fajardo, la aproximaci\u00f3n m\u00e1s b\u00e1sica consiste en codificar la informaci\u00f3n en varios formatos.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=WANRbjW4ph4\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"right\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=WANRbjW4ph4\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>La mayor\u00eda del dise\u00f1o de las interfaces de usuario se ha centrado en el aspecto cognitivo y en la representaci\u00f3n visual de la informaci\u00f3n. Sin embargo, en este terreno de las interfaces multimodales es donde se sit\u00faan las fronteras que m\u00e1s se est\u00e1n explorando. Emergen nuevos dispositivos y con ellos nuevas interfaces donde el cuerpo y la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> con \u00e9l cobran protagonismo. Donde se han producido algunos de los avances m\u00e1s interesantes es en las interfaces gestuales. Como casi siempre, los videojuegos han sido punteros en aplicar est\u00e1 tecnolog\u00eda (Wii, Kinect, etc.) pero los usos se han ido extendiendo a muchos otros dispositivos, como las SmartTV, etc. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>A partir de esta tecnolog\u00eda, Microsoft elabor\u00f3 una visi\u00f3n del futuro de nuestra <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> con los datos virtuales. En esta visi\u00f3n se apuntan las caracter\u00edsticas con las que evolucionar\u00e1n las interfaces y c\u00f3mo habr\u00e1n de tener en cuenta no solo el aspecto visual. Jakob Nielsen, uno de los expertos mundiales m\u00e1s reputados en el tema de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/usabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">usabilidad<\/a>, public\u00f3 una lista con las que, a su juicio, eran las 10 mejores interfaces de usuario que pod\u00edan encontrarse en <a href=\"http:\/\/comunicaciondigital.es\/glosario\/internet\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Internet<\/a>. Son las siguientes:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>\n<a href=\"http:\/\/www.mediamind.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Campaing Monitor. EyeBlaster (Israel)<\/a>\n<\/li><li>\n<a href=\"http:\/\/www.cmsbox.com\/de\/cms\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">CMSBox. CMSBox (Suiza)<\/a>\n<\/li><li>\n<a href=\"http:\/\/www.oce.com\/en\/Software\/prismaprepare\/default.htm\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">PRISMAprepare. Oc\u00e9 (Holanda)<\/a>\n<\/li><li>\n<a href=\"http:\/\/fotoflexer.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">FotoFlexer. Arbor Labs (EEUU<\/a>)\n<\/li><li>\n<a href=\"http:\/\/www.profitstreams.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Seating Management. Magellan Network and DesingBox (EEUU)<\/a>\n<\/li><li>\n<a href=\"http:\/\/www.idera.com\/Products\/SQL-Server\/SQL-diagnostic-manager\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">SQL Diagnostic Manager. Idera (EEUU)<\/a>\n<\/li><li>\n<a href=\"https:\/\/www.sugarsync.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">SugarSync. Sharpcast (EEUU)<\/a>\n<\/li><li>\n<a href=\"http:\/\/www.supersaas.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">SuperSaaS. SuperSaas (Holanda<\/a>)\n<\/li><li>\n<a href=\"http:\/\/wufoo.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Wufoo. Infinity Box Inc. (EEUU)<\/a>\n<\/li><li>\n<a href=\"http:\/\/www.xero.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Xero. Xero (Nueva Zelanda)<\/a>\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>Interfaz hologr\u00e1fica (holograf\u00eda t\u00e1ctil)<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=Fd-wwOmqzYc\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"right\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=Fd-wwOmqzYc\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>Las interfaces hologr\u00e1ficas, cuyo antecedente se remonta en el imaginario colectivo al <a href=\"http:\/\/cdn1.sciencefiction.com\/wp-content\/uploads\/2014\/06\/leias_message.jpg\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">holograma de Leia<\/a> en Star Wars, y t\u00e9cnicamente a las primeras <a href=\"https:\/\/es.wikipedia.org\/wiki\/Holograf%C3%ADa_t%C3%A1ctil\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">holograf\u00edas t\u00e1ctiles<\/a> de los a\u00f1os 60, es un tipo de interfaz corp\u00f3rea que, si bien est\u00e1 a\u00fan en fase de desarrollo, se extender\u00e1 en los pr\u00f3ximos a\u00f1os ofreciendo un nuevo modelo de control de objetos hologr\u00e1ficos de una definici\u00f3n asombrosa. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=4tM5qJFsXeM\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"right\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=4tM5qJFsXeM\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>Una de las soluciones, desarrollada por la empresa Laia, cuenta con pantallas hologr\u00e1ficas e interactivas para dispositivos m\u00f3viles, \u201cque permitir\u00e1 a la gente proyectar hologramas con sus propias manos e interactuar con ellos, para materializar el mundo digital en sus manos\u201d.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Al proyectar im\u00e1genes fuera del dispositivo, ello permite no s\u00f3lo ampliar el campo de acci\u00f3n y el tama\u00f1o de las im\u00e1genes proyectadas, sino interactuar con ellas como si se tratase de objetos reales. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Algunos desarrollos, como este que se muestra en el v\u00eddeo, permiten ya crear im\u00e1genes hologr\u00e1ficas 3D directamente con un smartphone.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Principios del dise\u00f1o de interfaces<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>La pr\u00e1ctica del dise\u00f1o de interfaces y los diversos estudios sobre el tema, han generado numerosas listas de principios que deben aplicarse. Algunos de estos principios son:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Familiaridad<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>El principio de familiaridad del usuario sugiere que los usuarios no deben ser obligados a adaptarse a una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> s\u00f3lo porque sea inconveniente implementarla. La <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe utilizar t\u00e9rminos familiares para los usuarios, y los objetos que el sistema manipula deben estar directamente relacionados con el entorno de trabajo del usuario.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Uniformidad<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>El principio de uniformidad de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz-de-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz de usuario<\/a> significa que los comandos y menus del sistema deben tener el mismo formato, los par\u00e1metros deben pasarse a todos los comandos de la misma forma, y la puntuaci\u00f3n de los comandos debe ser similar. Las interfaces uniformes reducen el tiempo de aprendizaje del usuario. Por lo tanto, el conocimiento aprendido en un comando o aplicaci\u00f3n es aplicable en otras partes del sistema o en aplicaciones relacionadas. La uniformidad de la<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> a lo largo de las aplicaciones tambi\u00e9n es importante. En lo posible, los comandos con significados similares en aplicaciones diferentes se deben expresar de la misma forma.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>M\u00ednima sorpresa<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>El principio de m\u00ednima sorpresa es apropiado debido a que las personas se irritan demasiado cuando el sistema se comporta de forma inesperada. Cuando se utiliza un sistema, los usuarios construyen un modelo mental de la forma en que trabaja dicho sistema. Si una acci\u00f3n en alg\u00fan contexto provoca un tipo de cambio particular, es razonable pensar que la misma acci\u00f3n en un contexto diferente cause un cambio comparable. Si sucede algo completamente diferente, el usuario se sorprende y confunde.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Recuperabilidad<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>El principio de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/recuperabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">recuperabilidad<\/a> es importante debido a que los usuarios inevitablemente cometen errores cuando utilizan un sistema. El dise\u00f1o de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> puede minimizar estos errores, pero los errores nunca pueden eliminarse completamente. Por consiguiente, se deben incluir recursos que permitan a los usuarios recuperarse de sus errores. Estos ueden ser de tres tipos:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Confirmaci\u00f3n de acciones destructivas<\/li><li>Proporcionar un recurso para deshacer<\/li><li>Generar puntos de control<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>Asistencia al usuario<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Un principio relacionado es el de asistencia al usuario o caracter\u00edsticas de ayuda. \u00c9stas se deben integrar en el sistema y proporcionar diferentes niveles de ayuda y asesoramiento. El principio de diversidad de usuarios ajustandose a los diferentes tipos de usuarios del sistema<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>La perspectiva desde la que se elaboran estos principios es el llamado <a href=\"http:\/\/comunicaciondigital.es\/glosario\/diseno-centrado-en-el-usuario\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Dise\u00f1o Centrado en el Usuario<\/a> (<a href=\"http:\/\/comunicaciondigital.es\/glosario\/ucd\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">UCD<\/a>). La base de todo el proceso es c\u00f3mo la gente usar\u00e1 el producto; se centra en el usuario a trav\u00e9s de las diferentes fases. En la siguiente figura se ilustra el proceso de dise\u00f1o general de la UI (user interface)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/e9e8a-elprocesod-1440398904-87.jpg\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Tambi\u00e9n es recomendable tener muy presente otras caracter\u00edsticas para dise\u00f1ar &nbsp;una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> profesionalmente adecuada:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Color<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Una decisi\u00f3n importante a tener en cuenta es el color. Muchas personas no le prestan la menor atenci\u00f3n, pero el dise\u00f1ador debe tener cuidado con \u00e9l.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Al hablar de color hay que distinguir entre el color como fen\u00f3meno f\u00edsico, donde intervienen la luz y la visi\u00f3n, y el color como fen\u00f3menos sensorial, que es el que nos ocupa.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Como fen\u00f3meno que percibimos a trav\u00e9s de los sentidos, el color est\u00e1 sometido a criterios de an\u00e1lisis subjetivos. Depende de las preferencias personales, la relaci\u00f3n que mantenga con otros colores dentro del campo visual, el estado de \u00e1nimo, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>A grandes rasgos podemos distinguir entre colores fr\u00edos y c\u00e1lidos. Los primeros son los violetas, azules y verdes y dan la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/impresion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">impresi\u00f3n<\/a> de frescor, tristeza, reducci\u00f3n del espacio\u2026 Los segundos son los amarillos, naranjas, rojos, etc., que producen una sensaci\u00f3n de alegr\u00eda y de amplitud del espacio. Por ejemplo: un bot\u00f3n amarillo sobre fondo azul se ve como si fluyera hacia fuera tomando as\u00ed el primer plano para el espectador.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El color en la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Web<\/a> se convierte en una herramienta de comunicaci\u00f3n, adem\u00e1s de llamar la atenci\u00f3n: por un lado transmiten informaci\u00f3n, y por otro, establecen el tono del sitio. Una mala elecci\u00f3n del color puede conllevar una err\u00f3nea interpretaci\u00f3n del significado. Por este motivo hay que tener en cuenta el factor cultural y clim\u00e1tico de algunos pa\u00edses porque afectar\u00e1 a la percepci\u00f3n que se pueda tener de los mismo. Estas son algunas de las asociaciones m\u00e1s b\u00e1sicas por colores individuales: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Blanco: inocencia, limpieza, bueno\n<\/li><li>Negro: miedo, muerte, malo, oscuridad\n<\/li><li>Marr\u00f3n: sucio, tierra\n<\/li><li>Amarillo: precauci\u00f3n, agobio\n<\/li><li>Rojo: pasi\u00f3n, prohibido, calor\n<\/li><li>Verde: naturaleza, campo, tranquilidad\n<\/li><li>Azul: fr\u00edo, tristeza, relajaci\u00f3n\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Otra de las opciones que tienen que ver con el color es retocar una de sus cualidades: el contraste. Variando esta propiedad se puede crear un<a href=\"http:\/\/comunicaciondigital.es\/glosario\/patron\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">patr\u00f3n<\/a> jer\u00e1rquico que el usuario identifique a simple vista.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El objetivo del color en el sitio <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, como el de otros elementos, es garantizar la mayor <a href=\"http:\/\/comunicaciondigital.es\/glosario\/usabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">usabilidad<\/a> del mismo. Por esta raz\u00f3n debe de adecuarse a la finalidad que persiga el dise\u00f1ador.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Equilibrio<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Como las p\u00e1ginas <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Web<\/a> pueden incluir texto, botones, iconos, fotograf\u00eda, etc. , es necesario organizarla de forma eficaz y dise\u00f1arla de modo que quede equilibrada.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a> hace referencia, al igual que ocurre en composici\u00f3n fotogr\u00e1fica, a la distribuci\u00f3n del peso \u00f3ptico en la disposici\u00f3n, es decir, a un correcto reparto de los elementos de la composici\u00f3n. El peso \u00f3ptico es la capacidad de un elemento de atraer la mirada del usuario. Este viene determinado por el color, el aspecto o el tama\u00f1o del elemento.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a> puede ser sim\u00e9trico o asim\u00e9trico, aunque tambi\u00e9n puede no disponer de tal caracter\u00edstica. Es sim\u00e9trico cuando lo elementos se organizan horizontal o verticalmente a ambos lados de una l\u00ednea central. Esto causa una sensaci\u00f3n de rigor, fuerza y <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a>. Un ejemplo:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Una composici\u00f3n asim\u00e9trica no presenta esta estructura regular, pero s\u00ed est\u00e1 ordenada por el juego de vol\u00famenes, colores, etc., y el conjunto queda equilibrado en el formato. Este tipo de dise\u00f1o es din\u00e1mico e informal. Utilizado sobre todo para sitios l\u00fadicos o de entretenimiento.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En el dise\u00f1o sin <a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a> hay elementos organizado en la p\u00e1gina, pero sin tener en cuenta su <a href=\"http:\/\/comunicaciondigital.es\/glosario\/peso-visual-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">peso visual<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Intuici\u00f3n<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Seg\u00fan el diccionario de la RAE, \u2018intuici\u00f3n\u2019 es la \u201cpercepci\u00f3n clara e inmediata de una idea o situaci\u00f3n, sin necesidad de razonamiento l\u00f3gico\u201d y, por tanto, cuando decimos que una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> es intuitiva hacemos referencia a su capacidad para que un nuevo usuario consiga de un simple vistazo entender su estructura, captar sus contenidos e interactuar con ella con casi la misma familiaridad que si ya la conociera de antes. Lograr que la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> dise\u00f1ada sea intuitiva a la vez que novedosa y creativa es un reto que, en muchas ocasiones, obliga a sacrificar en alguna medida una u otra caracter\u00edstica.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c3c6e-interfacesi-1440399322-35.jpg\" alt=\"En esta imagen intuimos f\u00e1cilmente que los objetos est\u00e1n relacionados dos a dos\"\/><figcaption>En esta imagen intuimos f\u00e1cilmente que los objetos est\u00e1n relacionados dos a dos<\/figcaption><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Daniel Mordecki, profesor universitario y director de Concreta -empresa uruguaya especializada en la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/usabilidad\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">usabilidad<\/a> y estrategia en <a href=\"http:\/\/comunicaciondigital.es\/glosario\/internet\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">internet<\/a>- apunta algunas indicaciones que es conveniente tener presentes en la b\u00fasqueda de un dise\u00f1o intuitivo para la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>. Partiendo de la base de que toda<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> de un usuario con un sitio <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a> se desarrolla simult\u00e1neamente (y de manera inconsciente) en los niveles de \u2018mirar\u2019, \u2018leer\u2019 y \u2018pensar\u2019, en Concreta han desarrollado un modelo denominado, precisamente, <a href=\"http:\/\/www.mordecki.com\/html\/miroleopienso.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">\u201cMiro, Leo, Pienso\u201d<\/a> que se divide en varios niveles de <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interaccion\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interacci\u00f3n<\/a> de menor a mayor complejidad.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El m\u00e1s b\u00e1sico ser\u00eda el nivel de \u201cMiro y entiendo\u201d que supone un escaso esfuerzo por parte del usuario de la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. De un solo vistazo, y en base a la experiencia de navegaci\u00f3n acumulada, la <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe poder trasmitir su estructura casi de manera inconsciente. Por ejemplo, en la imagen de la derecha se intuye f\u00e1cilmente que los cuadrados est\u00e1n relacionados de dos en dos.Si el dise\u00f1o tuvo en cuenta este nivel, entonces \u201cla agrupaci\u00f3n visual, los efectos crom\u00e1ticos, los espacios, la ubicaci\u00f3n, los tama\u00f1os, entre otros elementos, permiten al visitante comprender m\u00faltiples aspectos de la p\u00e1gina que ve sin esfuerzo alguno y de forma pr\u00e1cticamente inmediata, aumentando enormemente la facilidad de uso\u201d (Mordecki: \u201cInterfaces e Intuici\u00f3n\u201d, n\u00ba 1 revista Faz 2007).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>El segundo nivel requiere m\u00e1s esfuerzo y Mordecki lo denomina \u201cLeo y entiendo\u201d. Aqu\u00ed el usuario debe leer los textos y etiquetas y, si responde a un buen dise\u00f1o, ese texto deber\u00eda ser suficientemente autoexplicativo para no requerir ninguna informaci\u00f3n complementaria acerca de su uso o utilidad: \u201cEs muy importante NO asumir que los visitantes tienen m\u00e1s conocimientos o <em>background<\/em> que los que realmente tienen, en particular con respecto al propio sitio\u201d (Mordecki, <em>op.cit<\/em>.). \u201cPienso y entiendo\u201d ser\u00eda el nivel superior al que solo se deber\u00eda acudir si el contenido que se ofrece y para el que se requiere ese esfuerzo complementario, al final debe merecer la pena al usuario ya que, en caso contrario, se puede sentir defraudado. Seg\u00fan Mordecki: \u201cSi estoy dentro del <a href=\"http:\/\/comunicaciondigital.es\/glosario\/publico-objetivo\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">p\u00fablico objetivo<\/a>, se supone que cualquier contenido publicado por un sitio debiera ser para m\u00ed comprensible en el nivel \u2018Pienso y entiendo\u2019.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Claridad<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:group {\"align\":\"right\",\"className\":\"alignright is-style-border\"} -->\n<div class=\"wp-block-group alignright is-style-border\"><!-- wp:paragraph -->\n<p>Crear una&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a>&nbsp;con todas estas caracter\u00edsticas es complicado, pero Alfred Astort, dise\u00f1ador de interfaces de Microsoft, afirma en una entrevista a infonom\u00eda.com que \u201cel siguiente paso deben ser los interfaces que podr\u00edamos llamar fluidos, donde podremos movernos de una aplicaci\u00f3n a otra sin darnos cuenta; el escritorio tampoco ser\u00e1 como lo conocemos ahora, ser\u00e1 un espacio sin l\u00edmite donde accederemos a la informaci\u00f3n \u00abzambull\u00e9ndonos\u00bb en ella. No m\u00e1s carpetas con ficheros dentro, el ordenador deber\u00e1 superar estos anacronismos del pasado y crear un lenguaje visual propio.\u201d<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Adem\u00e1s de poseer un dise\u00f1o equilibrado e intuitivo, una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe tener un dise\u00f1o claro, ya que debe evitar la ambig\u00fcedad y dejar lo suficientemente claro los distintos elementos a trav\u00e9s del lenguaje, la jerarqu\u00eda y las met\u00e1foras para los elementos visuales. Tambi\u00e9n debe ser concisa, ya que a veces se crea una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> con demasiadas etiquetas y especificaciones, sobrecarg\u00e1ndola de manera que el usuario no encuentra f\u00e1cilmente aquello que busca, as\u00ed como familiar, con elementos que le resulten conocidos al usuario, empleando, por ejemplo, met\u00e1foras de la vida real.Debe tener capacidad de respuesta, ser veloz y no hacer esperar al usuario adem\u00e1s de proporcionar un buen <a href=\"http:\/\/comunicaciondigital.es\/glosario\/feedback\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">feedback<\/a> al usuario, y ser consistente para permitir al usuario reconocer determinados patrones de uso y as\u00ed evitar confusiones.Sin ser un objetivo principal, una <a href=\"http:\/\/comunicaciondigital.es\/glosario\/interfaz\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">interfaz<\/a> debe tener un dise\u00f1o est\u00e9tico, ya que eso ayudar\u00e1 a que la experiencia de los usuarios sea m\u00e1s positiva, pero tambi\u00e9n debe ser eficiente y permitir realizar un mayor n\u00famero de tareas en menos tiempo y gestionar los errores de manera que sea posible deshacer acciones o poder recuperar archivos borrados.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Dise\u00f1ar en funci\u00f3n del comportamiento del usuario<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>En el dise\u00f1o de las interfaces es fundamental entender c\u00f3mo procedemos los usuarios a la hora de recorrer y manipular esta. En la siguiente infograf\u00eda se muestra el comportamiento registrado mediante el sistema <i>eye tracking<\/i>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/067b3-101oneyet-1534372208-69.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Recomendaciones tipogr\u00e1ficas generales para la Web<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=bVT6tQWtxxE\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"center\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=bVT6tQWtxxE\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p>La elecci\u00f3n de la tipograf\u00eda y su tratamiento en un contenido digital resulta esencial para lograra adecuadamente los objetivos de comunicaci\u00f3n.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Recomendaciones<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Podemos sintetizar algunas de las principales recomendaciones en las que coinciden la mayor parte de los autores y dise\u00f1adores profesionales en las siguientes:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Priorizar la legibilidad por encima de todo\n<\/li><li>Usar fuentes&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/sans-serif-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sans-serif<\/a>&nbsp;para mostrar en pantalla\n<\/li><li>Usar medidas relativas (porcentajes, \u201cems\u201d) e integradas en&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/css-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">CSS<\/a>&nbsp;(nunca p\u00edxeles)\n<\/li><li>Alto contraste letra-fondo\n<\/li><li>Evitar fondos excesivamente llenos\n<\/li><li>Reducir, al m\u00ednimo, los textos en movimiento, en may\u00fasculas (seg\u00fan las reglas de&nbsp;<a href=\"http:\/\/www.netiqueta.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Netiqueta<\/a>&nbsp;equivale a gritar, y est\u00e1 demostrado que reducen la velocidad de lectura en un 10%) y el texto gr\u00e1fico.\n<\/li><li>No utilizar \u201ccursivas\u201d<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:list -->\n<ul><li>Indicar siempre una fuentes \u201cseguras\u201d: Arial, Verdana y Georgia como alternativa, por si no estuviese disponible la fuente web utilizada.\n<\/li><li>Evitar utilizar, durante el dise\u00f1o, textos falsos (como el famoso \u201c<a href=\"http:\/\/comunicaciondigital.es\/glosario\/lorem-ipsum\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">lorem ipsum<\/a>\u201d, para poder detectar problemas de legibilidad\/comprensi\u00f3n en el texto real.\n<\/li><li>Evitar el uso de anti-<a href=\"http:\/\/comunicaciondigital.es\/glosario\/aliasing-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">aliasing<\/a>&nbsp;(suavizado de los bordes dentados de las formas y el texto basado en vectores) pues tiende a generar textos m\u00e1s borrosos.\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Los autores m\u00e1s puristas insisten en la permanencia de determinadas reglas, como, por ejemplo, que los textos enlazados vayan en azul y est\u00e9n subrayados. No obstante, hay que se\u00f1alar que sobre esto, considerando los h\u00e1bitos actuales de los internautas, existe cierta controversia.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Reglas<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Podemos decir que, cuando alguien&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/visita\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">visita<\/a>&nbsp;un sitio&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>&nbsp;que hemos dise\u00f1ado, lo m\u00e1s probable es que por encima de los colores, im\u00e1genes o sonidos, se base en el texto para encontrar aquello por lo que&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/visita\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">visita<\/a>&nbsp;el sitio&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. Esto deber\u00eda hacer que la tipograf\u00eda, el arte de la organizaci\u00f3n del tipo, sea una prioridad para cualquier dise\u00f1ador&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. As\u00ed y teniendo en cuenta las recomendaciones referidas anteriormente, podemos tener en cuenta 10 reglas b\u00e1sicas en el desarrollo de un proyecto&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li>Debe leerse el texto \u00edntegramente: si \u00a0un dise\u00f1ador no comprende la gran mayor\u00eda del texto, tendr\u00eda dificultades para reunir la tipograf\u00eda que hace que el sitio realmente funcione. Motivo por el cual el dise\u00f1ador debe leer lo que escribe para poder determinar la tipograf\u00eda que mejor se adapte a aqu\u00e9l.\u00a0Algunos dise\u00f1adores de p\u00e1ginas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0creen que s\u00f3lo con copiar y pegar un archivo de texto quedan completadas todas las funciones textuales. Si bien, debemos tener en cuenta que cuando se lee un texto ha de proporcionarse al menos una idea b\u00e1sica de c\u00f3mo puede ser integrado en un sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, evitando la desconexi\u00f3n entre la escritura y el dise\u00f1o del mismo; se busca una lectura f\u00e1cil de la l\u00ednea textual, evitando que lleve demasiado tiempo leerlas y que resulte engorrosa su lectura.\n<\/li>\n<li>Volcado de\u00a0<em style=\"font-size:1rem;\"><a href=\"http:\/\/es.lipsum.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Lorem Ipsum<\/a><\/em>, tan pronto como sea posible:\u00a0El sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0es muy dependiente de la palabra escrita as\u00ed como de palabras muy espec\u00edficas. El cuerpo del texto en s\u00ed puede suponer que se le preste una especial atenci\u00f3n con una letra capital y alguna que otra modificaci\u00f3n del mismo, atenci\u00f3n que podr\u00eda no ser posible con el denominado \u201c<a href=\"http:\/\/comunicaciondigital.es\/glosario\/lorem-ipsum\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">lorem ipsum<\/a>\u201d (texto falso).\u00a0A menos que el texto sea en realidad\u00a0<em style=\"font-size:1rem;\"><a href=\"http:\/\/comunicaciondigital.es\/glosario\/lorem-ipsum\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">lorem ipsum<\/a><\/em>, el texto de relleno no tendr\u00e1 ninguna similitud con la realidad. Esto significa que cualquier ajuste podr\u00eda hacer que el texto o el dise\u00f1o que lo rodea tengan que esperar hasta que se consiga una visi\u00f3n real. Preguntar y obtener el texto por parte del usuario tan pronto como sea posible en el proceso, supondr\u00e1 una gran capacidad para ajustar el dise\u00f1o y la tipograf\u00eda en su conjunto.\n<\/li>\n<li>Mostrar una clara jerarqu\u00eda: Cuando se\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/visita\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">visita<\/a>\u00a0una p\u00e1gina<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, uno debe saber de forma casi inmediata d\u00f3nde debe comenzar a leer. Utilizando la tipograf\u00eda se puede establecer una jerarqu\u00eda clara entre los distintos conceptos que se representan en la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. Cada sitio tiene una jerarqu\u00eda bien desarrollada con indicadores de por d\u00f3nde y c\u00f3mo se debe empezar a leer. Al pensar sobre el tama\u00f1o y tipos de letra, se puede resaltar un trozo de texto como si de un titular se tratase, predominando sobre el resto del texto a tratar.\n<\/li>\n<li>Mostrar atenci\u00f3n a la Macro y Micro-tipograf\u00eda: Cuando hablamos de Macro-tipograf\u00eda nos referimos a la estructura general de su tipo, la forma en que aparece en el contexto de su dise\u00f1o y su est\u00e9tica, se considera el texto como un bloque en s\u00ed mismo. Es la oportunidad para que el texto sea visto de forma atractiva en su conjunto, para lo cual juegan un papel fundamental la elecci\u00f3n de los tipos de letra y colores.\u00a0Mientras que si hablamos de Micro-tipograf\u00eda nos estamos preocupando m\u00e1s por los detalles de la separaci\u00f3n, las cuestiones que determinan si las palabras son f\u00e1ciles de leer. As\u00ed la Micro-tipograf\u00eda se convierte en una necesidad absoluta cuando tratamos de configurar un texto en s\u00ed mismo: si no es legible, no tiene sentido.\n<\/li>\n<li>Hay que tener especial cuidado con los colores de tipo: Cuando un dise\u00f1ador de p\u00e1ginas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0trabaja con el tipo de color, la atenci\u00f3n del internauta se considera absolutamente necesaria, por lo que deben tenerse muy en cuenta las combinaciones de colores de la p\u00e1gina; por ejemplo, si escribimos un texto en color rojo sobre un fondo rojo no ser\u00e1 f\u00e1cilmente legible, lo que provocar\u00e1 la desatenci\u00f3n del usuario. La soluci\u00f3n m\u00e1s f\u00e1cil para esta situaci\u00f3n es asegurarse de que el color de su tipo es totalmente diferente al del fondo sobre el cual se asienta.\n<\/li>\n<li>Las\u00a0<em style=\"font-size:1rem;\"><a href=\"http:\/\/es.wikipedia.org\/wiki\/Hojas_de_estilo_en_cascada\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Cascading Style Sheets<\/a><\/em>\u00a0(<a href=\"http:\/\/comunicaciondigital.es\/glosario\/css-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">CSS<\/a>) han de ser tomado realmente en serio: Estas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/hojas-de-estilo\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">Hojas de Estilo<\/a>\u00a0en Cascada consisten en un mecanismo que detalla la forma en que va a mostrarse un determinado documento en la pantalla del ordenador, c\u00f3mo se va a exponer la informaci\u00f3n que el mismo contiene o incluso c\u00f3mo va a imprimirse el mismo.\u00a0Si la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/css-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">CSS<\/a>\u00a0es clara, el usuario puede moverse entre las p\u00e1ginas de un sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0sin problemas, as\u00ed como garantizar la coherencia de la tipograf\u00eda de la cual se compone el mismo. Tambi\u00e9n podemos afirmar que si se rompe en un peque\u00f1o lapso la coherencia del texto en s\u00ed, podr\u00edamos conseguir dar importancia a lo que realmente queremos destacar, consiguiendo un dise\u00f1o efectivo.\n<\/li>\n<li>Picar el texto de forma centrada: La elecci\u00f3n de una alternativa al texto centrado puede hacer que un sitio\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>sea f\u00e1cil de leer, evitando as\u00ed una posible distorsi\u00f3n del resto de los dise\u00f1os de diversas pantallas que se presenten en la<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. En algunos c\u00edrculos, el tipo de centro es s\u00f3lo un paso hasta el uso de la\u00a0<em style=\"font-size:1rem;\">Comic Sans<\/em>\u00a0en un dise\u00f1o de p\u00e1gina\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>. Es posible que se considere por un t\u00edtulo, pero en general, la alineaci\u00f3n del texto a la izquierda har\u00e1 que los lectores se sientan mucho m\u00e1s c\u00f3modos leyendo.\n<\/li>\n<li>Problem\u00e1tica a la hora de tratar con las comillas tipogr\u00e1ficas y otros s\u00edmbolos: Muchos sitios\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0est\u00e1n llenos de s\u00edmbolos que un\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/navegador\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">navegador<\/a>\u00a0no puede mostrar ya que la mayor parte de un texto creado por un dise\u00f1ador de p\u00e1ginas\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0probablemente se hubiese realizado con el programa Microsoft Word u otro programa de\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/software-2\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">software<\/a>\u00a0de procesamiento de palabras, chocando en ciertos aspectos con el lenguaje\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/html\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">HTML<\/a>.\u00a0As\u00ed nos podemos encontrar con diversos problemas como el uso de las comillas tipogr\u00e1ficas o trabajar con un texto que ha sido escrito en otro idioma, lo que conllevar\u00eda tener que efectuar modificaciones posteriores. Por todo ello, a la hora de desarrollar el dise\u00f1o de nuestra p\u00e1gina\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, debemos centrarnos en elegir aquel texto que mejor se vaya a ajustar a nuestro dise\u00f1o, y viceversa; as\u00ed, si queremos que, por ejemplo, las comillas se reflejen en nuestra\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>, deberemos romper con las entidades<a href=\"http:\/\/comunicaciondigital.es\/glosario\/html\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">HTML<\/a>.\n<\/li>\n<li>Idear un planteamiento para que el texto aumente: Al aumentar el tama\u00f1o del texto en la p\u00e1gina\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0podemos crear una mejor visualizaci\u00f3n del mismo y conseguir as\u00ed una mejor lectura. Podemos considerar usar una fuente de tama\u00f1o 10, dado que la mayor\u00eda de la gente est\u00e1 acostumbrada a la lectura de fuentes de este tama\u00f1o.\u00a0No debemos olvidar que el tama\u00f1o del\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/navegador\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">navegador<\/a>\u00a0puede variar de forma dr\u00e1stica, ya que los distintos usuarios pueden tener configurada la visi\u00f3n de los mismos de formas muy variables y distintas, por lo que el dise\u00f1o del texto tiene que ser capaz de adaptarse a ese hecho a fin de no distorsionar el propio dise\u00f1o en s\u00ed.\n<\/li>\n<li>Mostrar una preferencia por la tipograf\u00eda\u00a0<em style=\"font-size:1rem;\"><a href=\"http:\/\/comunicaciondigital.es\/glosario\/sans-serif\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sans serif<\/a><\/em>: Si echamos un vistazo a los distintos sitios\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>\u00a0de la\u00a0<a href=\"http:\/\/comunicaciondigital.es\/glosario\/red\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">red<\/a>, casi todos los grandes bloques de texto se fijan en un tipo de letra\u00a0<em style=\"font-size:1rem;\"><a href=\"http:\/\/comunicaciondigital.es\/glosario\/sans-serif\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">sans serif<\/a><\/em>, mucho m\u00e1s f\u00e1cil de leer. Aspecto que destaca sobre todo en los titulares y otros bloques m\u00e1s peque\u00f1os de texto, creando lo que podemos llegar a determinar como un<a href=\"http:\/\/comunicaciondigital.es\/glosario\/equilibrio\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">equilibrio<\/a>\u00a0entre los dos.\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>Conclusiones<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Estos diez pasos pueden resumirse en tres premisas b\u00e1sicas que han de ser tenidas en cuenta a la hora de elegir una tipograf\u00eda para la&nbsp;<a href=\"http:\/\/comunicaciondigital.es\/glosario\/web\/\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">web<\/a>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><b>Visibilidad.&nbsp;<\/b>Grado en que las letras pueden distinguirse unas de otras. Depende, entre otros factores, de:&nbsp;Blanco interno de mayor tama\u00f1o (ojo medio), el tama\u00f1o individual de las letra, los rasgos del dise\u00f1o de algunos tipos, el grosor, el color y contraste, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><b>Legibilidad.&nbsp;<\/b>Rapidez con la que el ojo identifica un car\u00e1cter, letra, palabra o grupo de palabras&nbsp;Depende de muchos factores: letras may\u00fasculas o min\u00fasculas, del n\u00famero de palabras por l\u00ednea, cursiva, negrita, si hay muchos n\u00fameros o signos de puntuaci\u00f3n, graf\u00eda con remates\u2026<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><b>Lecturabilidad. <\/b>Facilidad y confort con la que el texto es le\u00eddo. Depende de factores como el inter\u00e9s del lector, la forma y tipo de texto, el tama\u00f1o, el ancho de l\u00ednea, el espacio e interlineado, el contraste crom\u00e1tico, etc.<\/p>\n<!-- \/wp:paragraph -->","_et_gb_content_width":"1080","footnotes":""},"categories":[221,225],"tags":[],"class_list":["post-76337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-banco-conocimiento","category-periodismo-digital"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual - Portal de proyectos multimedia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/diseno-visual\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"En el v\u00eddeo &quot;Stuff From the Future- What is the future of the user interface?&quot; conocer\u00e1s las posibilidades futuras de las interfaces de usuario. https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM Fuente: Stuff From the Future- What is the future of the user interface? by HowStuffWorks at https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM3. License by owner of copyright. La\u00a0Teor\u00eda de los procesos de\u00a0interacci\u00f3n\u00a0persona-ordenador define la\u00a0interfaz\u00a0de un&hellip; Continua leyendo Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/diseno-visual\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-13T19:03:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-05T21:58:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manuel Gertrudix Barrio\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/\"},\"author\":{\"name\":\"Manuel Gertrudix Barrio\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337\"},\"headline\":\"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual\",\"datePublished\":\"2015-08-13T19:03:06+00:00\",\"dateModified\":\"2024-08-05T21:58:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/\"},\"wordCount\":6539,\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg\",\"articleSection\":[\"banco-conocimiento\",\"Periodismo digital\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/\",\"name\":\"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg\",\"datePublished\":\"2015-08-13T19:03:06+00:00\",\"dateModified\":\"2024-08-05T21:58:30+00:00\",\"author\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337\"},\"breadcrumb\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg\",\"width\":1200,\"height\":800,\"caption\":\"Dise\u00f1o visual\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/proyectos.comunicaciondigital.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/\",\"name\":\"Portal de proyectos multimedia\",\"description\":\"Grupo Ciberimaginario\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337\",\"name\":\"Manuel Gertrudix Barrio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1776700774\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1776700774\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1776700774\",\"caption\":\"Manuel Gertrudix Barrio\"},\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/gertrudix\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual - Portal de proyectos multimedia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proyectos.comunicaciondigital.es\/en\/diseno-visual\/","og_locale":"en_GB","og_type":"article","og_title":"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual - Portal de proyectos multimedia","og_description":"En el v\u00eddeo \"Stuff From the Future- What is the future of the user interface?\" conocer\u00e1s las posibilidades futuras de las interfaces de usuario. https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM Fuente: Stuff From the Future- What is the future of the user interface? by HowStuffWorks at https:\/\/www.youtube.com\/watch?v=7VV7eJ9DQNM3. License by owner of copyright. La\u00a0Teor\u00eda de los procesos de\u00a0interacci\u00f3n\u00a0persona-ordenador define la\u00a0interfaz\u00a0de un&hellip; Continua leyendo Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/diseno-visual\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2015-08-13T19:03:06+00:00","article_modified_time":"2024-08-05T21:58:30+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg","type":"image\/jpeg"}],"author":"Manuel Gertrudix Barrio","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/"},"author":{"name":"Manuel Gertrudix Barrio","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"headline":"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual","datePublished":"2015-08-13T19:03:06+00:00","dateModified":"2024-08-05T21:58:30+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/"},"wordCount":6539,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg","articleSection":["banco-conocimiento","Periodismo digital"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/","url":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/","name":"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg","datePublished":"2015-08-13T19:03:06+00:00","dateModified":"2024-08-05T21:58:30+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#primaryimage","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2015\/08\/disen\u0303o-visual.jpg","width":1200,"height":800,"caption":"Dise\u00f1o visual"},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/diseno-visual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"Estrategias y t\u00e9cnicas de composici\u00f3n y dise\u00f1o visual"}]},{"@type":"WebSite","@id":"https:\/\/proyectos.comunicaciondigital.es\/#website","url":"https:\/\/proyectos.comunicaciondigital.es\/","name":"Portal de proyectos multimedia","description":"Grupo Ciberimaginario","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337","name":"Manuel Gertrudix Barrio","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1776700774","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1776700774","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1776700774","caption":"Manuel Gertrudix Barrio"},"url":"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/gertrudix\/"}]}},"_links":{"self":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/comments?post=76337"}],"version-history":[{"count":18,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76337\/revisions"}],"predecessor-version":[{"id":81921,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76337\/revisions\/81921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media\/77239"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=76337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=76337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=76337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}