{"id":59428,"date":"2020-08-28T18:37:35","date_gmt":"2020-08-28T16:37:35","guid":{"rendered":"https:\/\/www.carolinacampalans.com\/glossary\/interfaz-de-usuario\/"},"modified":"2020-08-28T18:37:35","modified_gmt":"2020-08-28T16:37:35","slug":"interfaz-de-usuario","status":"publish","type":"glosario","link":"https:\/\/www.carolinacampalans.com\/?glosario=interfaz-de-usuario","title":{"rendered":"interfaz de usuario"},"content":{"rendered":"
<\/div>

Elemento de conexi\u00f3n entre un hardware o software y la persona usuaria.<\/p>\n<\/div>

\n<\/div><\/div><\/div><\/div><\/div>

Descripci\u00f3n<\/h2><\/div>

En el \u00e1mbito de la inform\u00e1tica y el dise\u00f1o de sistemas, la IU es el conjunto de elementos, herramientas y protocolos que permiten la comunicaci\u00f3n y el intercambio de informaci\u00f3n entre un ser humano y una m\u00e1quina. Es el \u00abespacio de contacto\u00bb donde las intenciones de la persona usuaria se traducen en comandos para el sistema y donde el sistema devuelve resultados comprensibles para la persona.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

Tipos de interfaces<\/h2><\/div>

La evoluci\u00f3n de la IU refleja la simplificaci\u00f3n y, en cierto sentido, la democratizaci\u00f3n de la tecnolog\u00eda:<\/p>\n

<\/span>Interfaz de l\u00ednea de comandos<\/span><\/h3>\n

El usuario escribe c\u00f3digo o comandos de texto (ej. MS-DOS). Requiere un alto capital cognitivo y t\u00e9cnico.<\/p>\n

<\/span>Interfaz gr\u00e1fica de usuario (GUI)<\/span><\/h3>\n

Una GUI utiliza elementos visuales como iconos, ventanas o men\u00fas (ej., Windows, iOS). Introdujo la met\u00e1fora del \u00abescritorio\u00bb, haciendo la inform\u00e1tica accesible a profesionales no t\u00e9cnicos.<\/p>\n

<\/span>Interfaz natural de usuario<\/span><\/h3>\n

Se basa en acciones naturales del cuerpo, como el tacto (pantallas t\u00e1ctiles), la voz (Siri, Alexa) o el gesto.<\/p>\n

<\/span>Interfaz cerebro-computadora<\/span><\/h3>\n

En fase experimental, busca la comunicaci\u00f3n directa mediante se\u00f1ales neuronales.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

Estilos de dise\u00f1o de IU<\/h2><\/div>

<\/span>Esquemorfismo<\/span><\/h3>\n

El <\/span>esqueumorfismo<\/span> es un concepto de dise\u00f1o donde los elementos digitales imitan la apariencia, los materiales y las texturas de objetos del mundo real. <\/span>B\u00e1sicamente, es el arte de hacer que un bot\u00f3n digital parezca un bot\u00f3n f\u00edsico, que realmente se puede presionar, o que una aplicaci\u00f3n de notas parezca una libreta de papel amarillo con renglones.<\/span><\/p>\n<\/div>

<\/span>Flat design (dise\u00f1o plano)<\/span><\/h3>\n

El flat design<\/em> es la respuesta minimalista al esquemorfirmo. Elimina sombras y texturas en favor de colores s\u00f3lidos y formas simples.<\/p>\n<\/div>

<\/span>Neumorfismo<\/span><\/h3>\n

El neumorfismo es una tendencia reciente que mezcla elementos del esquemorfismo y del flat design<\/em>. Utiliza sombras muy suaves para que los elementos parezcan \u00absalir\u00bb del fondo de la pantalla, manteniendo un estilo limpio pero t\u00e1ctil.<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>

Ejemplos<\/h2><\/div>

<\/i><\/i><\/span>El escritorio de Windows\/macOS (interfaz gr\u00e1fica - GUI)<\/span><\/a><\/h4><\/div>
\n

Es el ejemplo cl\u00e1sico. En lugar de escribir c\u00f3digo para abrir un archivo, interactuamos con iconos, carpetas y una papelera de reciclaje.<\/p>\n

Utiliza la met\u00e1fora de una oficina f\u00edsica (\u00abmet\u00e1fora de escritorio\u00bb).<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>El cajero autom\u00e1tico <\/span><\/a><\/h4><\/div>
\n

Es una interfaz de usuario f\u00edsica y digital combinada, ya que emplea botones f\u00edsicos o pantalla t\u00e1ctil y un software espec\u00edfico.<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>El volante y el tablero de un coche<\/span><\/a><\/h4><\/div>
\n

No todas las interfaces son digitales. El volante, los pedales y las palancas son la IU que permite a un humano controlar una m\u00e1quina compleja, como el motor de un veh\u00edculo.<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>El feed de scroll infinito<\/span><\/a><\/h4><\/div>
\n

El feed<\/em> de una red social -como Instagram o TikTok, por ejemplo- es una interfaz dise\u00f1ada espec\u00edficamente para dispositivos m\u00f3viles. Los usuarios solo necesitan un gesto (deslizar el pulgar) para recibir contenido nuevo.<\/p>\n

Es el ejemplo perfecto de una interfaz dise\u00f1ada para maximizar la retenci\u00f3n y el tiempo de uso. El gesto es tan natural que reduce la \u00abfricci\u00f3n\u00bb al m\u00ednimo, facilitando el consumo compulsivo.<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>El altavoz inteligente<\/span><\/a><\/h4><\/div>
\n

Dispositivos como Alexa o Apple HomePod son la cara f\u00edsica de una interfaz de voz. Su dise\u00f1o elimina casi por completo los elementos visuales (botones, pantallas) para centrarse en el audio.<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>Sistemas IVR avanzados<\/span><\/a><\/h4><\/div>
\n

Los men\u00fas telef\u00f3nicos de atenci\u00f3n al cliente que te piden que indiques con pocas palabras el motivo de tu consulta, en lugar de pulsar n\u00fameros.<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>Modo manos libres en veh\u00edculos<\/span><\/a><\/h4><\/div>
\n

Permite dictar mensajes de texto o cambiar la ruta del GPS sin apartar la vista de la carretera.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

<\/div><\/div><\/div><\/div><\/div><\/div>\n
<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"template":"","meta":{"inline_featured_image":false,"_vp_format_video_url":"","_vp_image_focal_point":[]},"glosario_categoria":[],"glosario_tag":[7091,7151,7152],"class_list":["post-59428","glosario","type-glosario","status-publish","hentry","glosario_tag-desarrollo-web","glosario_tag-ui","glosario_tag-ux"],"_links":{"self":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=\/wp\/v2\/glosario\/59428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=\/wp\/v2\/glosario"}],"about":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=\/wp\/v2\/types\/glosario"}],"wp:attachment":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=59428"}],"wp:term":[{"taxonomy":"glosario_categoria","embeddable":true,"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=%2Fwp%2Fv2%2Fglosario_categoria&post=59428"},{"taxonomy":"glosario_tag","embeddable":true,"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=%2Fwp%2Fv2%2Fglosario_tag&post=59428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}