{"id":358,"date":"2013-04-17T16:04:49","date_gmt":"2013-04-17T15:04:49","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/?page_id=358"},"modified":"2014-03-28T11:22:40","modified_gmt":"2014-03-28T10:22:40","slug":"principals-entorns-dinteraccio","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/usab\/principals-entorns-dinteraccio\/","title":{"rendered":"Principales entornos de interacci\u00f3n"},"content":{"rendered":"<p>Los diferentes entornos para los que se desarrolla una aplicaci\u00f3n interactiva imponen unos requisitos espec\u00edficos. Por <em>entorno<\/em> entendemos aqu\u00ed el contexto en el que el usuario utilizar\u00e1 la aplicaci\u00f3n. Por ejemplo, en el caso de un diario digital, el dise\u00f1o final se tiene que concebir de diferente manera seg\u00fan el contexto en el que ser\u00e1 visualizado: desde un navegador web de escritorio, un <i>smartphone<\/i>, un <i>tablet pc<\/i>\u2026<br \/>\nAs\u00ed pues, el concepto <em>entorno<\/em> incluye dos factores:<\/p>\n<ul>\n<li>El <strong>dispositivo<\/strong> que va a soportar la aplicaci\u00f3n (ordenador de escritorio, <i>smartphone<\/i>, televisor, entre otros)<\/li>\n<li>El <strong>formato<\/strong> de la aplicaci\u00f3n (ya sea formato cerrado, como un CD o un punto de informaci\u00f3n, aplicaci\u00f3n web)<\/li>\n<\/ul>\n<h3>Aplicaciones en soporte CD<\/h3>\n<p>El CD-ROM es, hist\u00f3ricamente, uno de los primeros soportes de aplicaciones multimedia. Aunque en la actualidad el entorno web es el m\u00e1s extendido y el m\u00f3vil est\u00e1 ganando terreno de manera acelerada, hasta hace relativamente poco el CD era el soporte m\u00e1s utilizado.<br \/>\nEn el dise\u00f1o de interfaces para CD se pueden aplicar las pautas generales de usabilidad que se detallan en otros m\u00f3dulos de la asignatura. El CD-ROM es el soporte que impone menos requisitos t\u00e9cnicos al dise\u00f1o de la interfaz, puesto que no presenta problemas asociados al tiempo de descarga y est\u00e1 poco sujeto a las condiciones de visualizaci\u00f3n de cada usuario.<\/p>\n<p>M\u00e1s informaci\u00f3n:\u00a0<a href=\"..\/pautes-de-disseny-daplicacions-en-suport-CD\/\">Pautas de dise\u00f1o de aplicaciones en soporte CD<br \/>\n<\/a><\/p>\n<hr \/>\n<h3>Web<\/h3>\n<p>Adem\u00e1s de las pautas generales de dise\u00f1o de interfaces, en la producci\u00f3n de p\u00e1ginas web intervienen una serie de determinantes particulares. Las razones de esta especificidad son b\u00e1sicamente dos:<\/p>\n<ul>\n<li>El canal de distribuci\u00f3n \u2013Internet\u2013 establece l\u00edmites t\u00e9cnicos relacionados con el tiempo de descarga de la informaci\u00f3n. Por otro lado, el \u00e1mbito de difusi\u00f3n es universal (a pesar de que haya un <i>target<\/i> espec\u00edfico), de modo que los documentos web los pueden explorar usuarios que se encuentren en cualquier parte del mundo.<\/li>\n<li>Las p\u00e1ginas web pueden presentar un formato vertical, que implica la existencia de \u00e1reas visibles \u00fanicamente por desplazamiento de la ventana. Esto genera condiciones particulares para el dise\u00f1o de interfaces web.<\/li>\n<\/ul>\n<p>M\u00e1s informaci\u00f3n:\u00a0<a href=\"..\/pautes-de-disseny-de-pagines-web\/\">Pautas de dise\u00f1o de p\u00e1ginas web<br \/>\n<\/a><\/p>\n<hr \/>\n<h3>Puntos de informaci\u00f3n<\/h3>\n<p>Los puntos de informaci\u00f3n (tambi\u00e9n llamados quioscos) son terminales interactivos desde los que un usuario puede recibir informaci\u00f3n sobre un producto o servicio, o realizar transacciones (los cajeros autom\u00e1ticos son uno de los ejemplos m\u00e1s frecuentes de este tipo de aplicaci\u00f3n).<\/p>\n<figure id=\"attachment_359\" aria-describedby=\"caption-attachment-359\" style=\"width: 198px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/puntsInformacio.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-359\" alt=\"Punts d'Informaci\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/puntsInformacio.png\" width=\"198\" height=\"219\" \/><\/a><figcaption id=\"caption-attachment-359\" class=\"wp-caption-text\">Fuente: multimedia.bkrstudio.com\/images\/interactive_kiosk.jpg<\/figcaption><\/figure>\n<p>El dise\u00f1o de puntos de informaci\u00f3n presenta unas caracter\u00edsticas espec\u00edficas, ya que se trata de aplicaciones que puede utilizar un rango muy amplio y heterog\u00e9neo de usuarios, que en general quieren permanecer el menor tiempo posible ante el terminal. Por lo tanto, en un \u00e1mbito general, hay que tener presentes los siguientes factores:<\/p>\n<ul>\n<li>En la mayor\u00eda de ocasiones, los usuarios estar\u00e1n accediendo al sistema por primera vez. Debe haber una informaci\u00f3n introductoria y la interfaz tiene que ser sencilla y muy intuitiva.<\/li>\n<li>Los usuarios pueden presentar niveles muy diferentes de experiencia en el uso de interactivos. El dise\u00f1o de puntos de informaci\u00f3n debe tener en cuenta a los usuarios con bajo nivel de experiencia, as\u00ed como a los que presenten discapacidades.<\/li>\n<li>La informaci\u00f3n clave se tiene que proporcionar de manera r\u00e1pida y sencilla para satisfacer al usuario que desea dedicar poco tiempo a la interacci\u00f3n.<\/li>\n<li>El sistema tiene que volver a su estado inicial cuando no haya ning\u00fan usuario utiliz\u00e1ndolo.<\/li>\n<li>Un quiosco promocional (colocado en una feria profesional, por ejemplo) debe atraer a los usuarios y mostrar con claridad cu\u00e1l es su contenido.<\/li>\n<\/ul>\n<p>M\u00e1s informaci\u00f3n:\u00a0<a href=\"..\/pautes-de-disseny-de-punts-dinformacio\/\">Pautas de dise\u00f1o de puntos de informaci\u00f3n<br \/>\n<\/a><\/p>\n<hr \/>\n<h3>Dispositivos m\u00f3viles<\/h3>\n<p>Los dispositivos m\u00f3viles se usan en un <b>contexto muy variable<\/b>. El usuario puede tener interferencias ambientales que distraigan su atenci\u00f3n y, en general, es consciente de que el tiempo de conexi\u00f3n tiene un coste econ\u00f3mico.<br \/>\nPor otro lado, hay una gran\u00a0<b>heterogeneidad de los dispositivos<\/b>, en especial es importante en cuanto a la diversidad de formatos de pantalla.<br \/>\nTodos estos factores intervienen en la definici\u00f3n de unas especificaciones concretas en el dise\u00f1o de interfaces para dispositivos m\u00f3viles.<\/p>\n<p>M\u00e1s informaci\u00f3n:\u00a0<a href=\"..\/pautes-de-disseny-de-dispositius-mobils\/\">Pautas de dise\u00f1o de dispositivos m\u00f3viles<br \/>\n<\/a><\/p>\n<hr \/>\n<h3>Televisi\u00f3n interactiva<\/h3>\n<p>El dise\u00f1o de interfaces para pantalla de televisor est\u00e1 en proceso de expansi\u00f3n, debido a la televisi\u00f3n interactiva o a algunas plataformas de videojuegos.<br \/>\nLos dos factores fundamentales que hay que tener en cuenta son los siguientes:<\/p>\n<ul>\n<li>No todos los pa\u00edses utilizan el mismo\u00a0<b>formato de pantalla<\/b>\u00a0para televisi\u00f3n. En Europa, el est\u00e1ndar m\u00e1s habitual corresponde al PAL y, en los Estados Unidos, al NTSC.<\/li>\n<\/ul>\n<figure id=\"attachment_360\" aria-describedby=\"caption-attachment-360\" style=\"width: 172px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-360\" alt=\"Formats de televisi\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV-172x300.png\" width=\"172\" height=\"300\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV-172x300.png 172w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV.png 296w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><figcaption id=\"caption-attachment-360\" class=\"wp-caption-text\">Formatos de televisi\u00f3n<\/figcaption><\/figure>\n<ul>\n<li>La <b>actitud del usuario<\/b>\u00a0ante una pantalla de ordenador o un televisor es diferente a la que tiene respecto a un ordenador, lo que se debe tener en cuenta para optimizar el dise\u00f1o de la aplicaci\u00f3n.<\/li>\n<\/ul>\n<p>M\u00e1s informaci\u00f3n:\u00a0<a href=\"..\/pautes-de-disseny-per-a-televisio\/\">Pautas de dise\u00f1o para televisi\u00f3n<br \/>\n<\/a><\/p>\n<hr \/>\n<h3>Realidad virtual<\/h3>\n<p>El t\u00e9rmino <i>realidad virtual<\/i> naci\u00f3 en los a\u00f1os setenta del siglo xx y supone un caso especial en el desarrollo de interfaces gr\u00e1ficas, ya que permite generar entornos sint\u00e9ticos con los que el usuario interact\u00faa en tiempo real. Puede ser de dos tipos:<\/p>\n<ul>\n<li><b>Inmersiva.\u00a0<\/b>El usuario se introduce en un entorno tridimensional, en el que interact\u00faa con objetos u otras personas mediante diferentes dispositivos (como cascos o guantes).<\/li>\n<\/ul>\n<figure id=\"attachment_365\" aria-describedby=\"caption-attachment-365\" style=\"width: 272px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-365\" alt=\"Realitat virtual immersiva\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual-272x300.png\" width=\"272\" height=\"300\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual-272x300.png 272w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual.png 303w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><\/a><figcaption id=\"caption-attachment-365\" class=\"wp-caption-text\">Fuente: http:\/\/www.sxc.hu\/browse.phtml?f=download&amp;id=288584<\/figcaption><\/figure>\n<ul>\n<li><b>No inmersiva.\u00a0<\/b>El usuario interact\u00faa con otros objetos o personas, pero se mantiene fuera de la escena. SecondLife es un ejemplo de experiencia no inmersiva.<\/li>\n<\/ul>\n<figure id=\"attachment_366\" aria-describedby=\"caption-attachment-366\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-366\" alt=\"Realitat virtual no immersiva\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual2.jpg\" width=\"300\" height=\"219\" \/><\/a><figcaption id=\"caption-attachment-366\" class=\"wp-caption-text\">Fuente: http:\/\/secondlife.com\/showcase\/screenshots.php<\/figcaption><\/figure>\n<p>En ambos casos, el objetivo consiste en proporcionar al usuario la m\u00e1xima\u00a0<b>sensaci\u00f3n de libertad en la interacci\u00f3n<\/b>, mediante la simulaci\u00f3n de entornos reales, procesos de interacci\u00f3n naturales y respuestas del sistema en tiempo real.<br \/>\nLos sistemas de realidad virtual se dirigen a todos los sentidos del usuario mediante dispositivos de diferentes caracter\u00edsticas:<\/p>\n<ul>\n<li><b>Dispositivos de visualizaci\u00f3n<\/b>\u00a0(como cascos o binoculares). Son dispositivos que permiten tener una visi\u00f3n estereosc\u00f3pica en tiempo real, mediante la cual el usuario puede observar el entorno en tres dimensiones.<\/li>\n<\/ul>\n<figure id=\"attachment_368\" aria-describedby=\"caption-attachment-368\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-368\" alt=\"Dispositiu de visualitzaci\u00f3 de Realitat Virtual\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual3-300x195.jpg\" width=\"300\" height=\"195\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual3-300x195.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual3.jpg 320w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-368\" class=\"wp-caption-text\">Fuente: http:\/\/en.wikipedia.org\/wiki\/image:VR-Helm.jpg<\/figcaption><\/figure>\n<ul>\n<li><b>Dispositivos de interacci\u00f3n<\/b>\u00a0(como guantes, ratones o <i>joysticks<\/i>). Permiten que el sistema pueda reconocer las acciones y transmitir las respuestas adecuadas en tiempo real. Son dispositivos de entrada (en el sentido de que transmiten al sistema datos sobre el estado del usuario), pero tambi\u00e9n de salida, ya que transmiten al usuario las respuestas del sistema a sus acciones, por ejemplo movimiento de los objetos, peso o calidades t\u00e1ctiles.<\/li>\n<\/ul>\n<figure id=\"attachment_369\" aria-describedby=\"caption-attachment-369\" style=\"width: 272px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-369\" alt=\"Dispositi d'interacci\u00f3 de realitat virtual\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitatVirtual4.jpg\" width=\"272\" height=\"186\" \/><\/a><figcaption id=\"caption-attachment-369\" class=\"wp-caption-text\">Fuente: http:\/\/www.sxc.hu\/photo\/708174<\/figcaption><\/figure>\n<ul>\n<li><b>Dispositivos de seguimiento.<\/b>\u00a0Permiten detectar la posici\u00f3n del usuario dentro del entorno, as\u00ed como sus movimientos y giros. El objetivo de estos dispositivos es proporcionar una respuesta visual adecuada para mantener la simulaci\u00f3n del contexto.<\/li>\n<li><b>Dispositivos de audici\u00f3n.<\/b>\u00a0Son los que permiten transmitir el sonido del entorno al usuario. Permiten reforzar las condiciones de la simulaci\u00f3n, ya que dependen tanto de la ubicaci\u00f3n del usuario como de los sonidos generados por los objetos del entorno.<\/li>\n<\/ul>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Realidad aumentada<\/h3>\n<p>Es la aplicaci\u00f3n m\u00e1s reciente de la realidad virtual, y se est\u00e1 difundiendo a un ritmo acelerado. Es la entrada de un sistema que utiliza informaci\u00f3n generada por ordenador, para extender la realidad con efectos virtuales. Las im\u00e1genes virtuales y reales se mezclan, de modo que el usuario mantiene el contacto con el mundo real, en el que se introducen elementos generados sint\u00e9ticamente. Se basa en varios tipos de dispositivos:<\/p>\n<ul>\n<li><i>See-through HMD (head mounted display)<\/i>. Casos que mezclan im\u00e1genes del mundo real con im\u00e1genes generadas.<\/li>\n<li><i>See-through<\/i>\u00a0basado en v\u00eddeo. Mismo sistema que el anterior, pero basado en un v\u00eddeo.<\/li>\n<li>Otros. Por ejemplo, mostrando el resultado en un monitor o una pantalla de dispositivo m\u00f3vil.<\/li>\n<\/ul>\n<figure id=\"attachment_370\" aria-describedby=\"caption-attachment-370\" style=\"width: 237px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitataugmentada.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-370\" alt=\"Realitat Augmentada\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/realitataugmentada.jpg\" width=\"237\" height=\"297\" \/><\/a><figcaption id=\"caption-attachment-370\" class=\"wp-caption-text\">Fuente: http:\/\/www.flickr.com\/photos\/nilsmengedoht\/5109833017\/<\/figcaption><\/figure>\n<p><b>Lectura recomendada<\/b><\/p>\n<p>Algunos ejemplos de aplicaciones de realidad aumentada pueden verse en el art\u00edculo\u00a0<a href=\"http:\/\/recursostic.educacion.es\/observatorio\/web\/es\/cajon-de-sastre\/38-cajon-de-sastre\/922-realidad-aumentada\" target=\"_blank\">Realidad aumentada<\/a>\u00a0del Observatorio Tecnol\u00f3gico del Ministerio de Educaci\u00f3n.<\/p>","protected":false},"excerpt":{"rendered":"<p>Los diferentes entornos para los que se desarrolla una aplicaci\u00f3n interactiva imponen unos requisitos espec\u00edficos. Por entorno entendemos aqu\u00ed el contexto en el que el usuario utilizar\u00e1 la aplicaci\u00f3n. Por ejemplo, en el caso de un diario digital, el dise\u00f1o final se tiene que concebir de diferente manera seg\u00fan el contexto en el que ser\u00e1 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/usab\/principals-entorns-dinteraccio\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abPrincipales entornos de interacci\u00f3n\u00bb<\/span><\/a><\/p>\n","protected":false},"author":35,"featured_media":0,"parent":31,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-358","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":23,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":849,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/358\/revisions\/849"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/31"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}