{"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\/ca\/usab\/principals-entorns-dinteraccio\/","title":{"rendered":"Principals entorns d&#8217;interacci\u00f3"},"content":{"rendered":"<p>Els diferents entorns per als quals es desenvolupa una aplicaci\u00f3 interactiva imposen uns requisits espec\u00edfics. Per <em>entorn<\/em> entenem aqu\u00ed el context en el qual l&#8217;usuari utilitzar\u00e0 l&#8217;aplicaci\u00f3. Per exemple, en el cas d&#8217;un diari digital, el disseny final s&#8217;ha de concebre de diferent manera segons el context en qu\u00e8 ser\u00e0 visualitzat: des d&#8217;un navegador web d&#8217;escriptori, un tel\u00e8fon intel\u00b7ligent (<em>smartphone<\/em>), un <em>tablet pc<\/em>&#8230;<br \/>\nEl concepte <em>entorn<\/em> inclou, doncs, dos factors:<\/p>\n<ul>\n<li>El <strong>dispositiu<\/strong> que funcionar\u00e0 amb l&#8217;aplicaci\u00f3 (ordinador d&#8217;escriptori, tel\u00e8fon intel\u00b7ligent, televisi\u00f3, etc.).<\/li>\n<li>El <strong>format<\/strong> de l&#8217;aplicaci\u00f3 (format tancat, com CD o punt d&#8217;informaci\u00f3, aplicaci\u00f3 web, etc.).<\/li>\n<\/ul>\n<h3>Aplicacions en suport CD<\/h3>\n<p>El CD-ROM \u00e9s, hist\u00f2ricament, un dels primers suports d&#8217;aplicacions multim\u00e8dia. Encara que en l&#8217;actualitat l&#8217;entorn web \u00e9s el m\u00e9s est\u00e8s i el m\u00f2bil est\u00e0 guanyant terreny acceleradament, fins fa relativament poc era el CD el suport m\u00e9s utilitzat.<br \/>\nEn el disseny d&#8217;interf\u00edcies per a CD es poden aplicar les pautes generals d&#8217;usabilitat que es detallen en altres m\u00f2duls de l&#8217;assignatura. El CD-ROM \u00e9s el suport que imposa menys requisits t\u00e8cnics en el disseny de la interf\u00edcie, ja que no presenta problemes associats al temps de desc\u00e0rrega i est\u00e0 poc subjecte a les condicions de visualitzaci\u00f3 de cada usuari.<\/p>\n<p>M\u00e9s informaci\u00f3: <a href=\"..\/pautes-de-disseny-daplicacions-en-suport-CD\">Pautes de disseny d&#8217;aplicacions en suport CD<\/a><\/p>\n<hr \/>\n<h3>Web<\/h3>\n<p>A m\u00e9s de les pautes generals de disseny d&#8217;interf\u00edcies, en la producci\u00f3 de p\u00e0gines web intervenen una s\u00e8rie de determinants particulars. Les raons d&#8217;aquesta especificitat s\u00f3n b\u00e0sicament dues:<\/p>\n<ul>\n<li>El canal de distribuci\u00f3 -Internet- estableix l\u00edmits t\u00e8cnics relacionats amb el temps de desc\u00e0rrega de la informaci\u00f3. D&#8217;altra banda, l&#8217;\u00e0mbit de difusi\u00f3 \u00e9s universal (tot i que hi hagi un <em>target<\/em> espec\u00edfic), de manera que els documents web poden ser explorats per usuaris que es trobin en qualsevol part del m\u00f3n.<\/li>\n<li>Les p\u00e0gines web poden presentar un format vertical, que implica l&#8217;exist\u00e8ncia d&#8217;\u00e0rees visibles \u00fanicament per despla\u00e7ament de la finestra. Aix\u00f2 genera condicions particulars per al disseny d&#8217;interf\u00edcies web.<\/li>\n<\/ul>\n<p>M\u00e9s informaci\u00f3: <a href=\"..\/pautes-de-disseny-de-pagines-web\">Pautes de disseny de p\u00e0gines web<\/a><\/p>\n<hr \/>\n<h3>Punts d&#8217;informaci\u00f3<\/h3>\n<p>Els punts d&#8217;informaci\u00f3 (tamb\u00e9 anomenats <em>quioscos<\/em>), s\u00f3n terminals interactius des dels quals un usuari pot rebre informaci\u00f3 sobre un producte o servei, o fer transaccions (els caixers autom\u00e0tics s\u00f3n un dels exemples m\u00e9s freq\u00fcents d&#8217;aquest tipus d&#8217;aplicaci\u00f3).<\/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\" target=\"_blank\"><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\">Font: http:\/\/multimedia.bkrstudio.com\/images\/interactive_kiosk.jpg<\/figcaption><\/figure>\n<p>El disseny de punts d&#8217;informaci\u00f3 presenta unes caracter\u00edstiques espec\u00edfiques, ja que es tracta d&#8217;aplicacions que poden ser utilitzades per un rang molt ampli i heterogeni d&#8217;usuaris, que generalment volen romandre el m\u00ednim temps possible davant del terminal. Per tant, en general cal tenir presents els seg\u00fcents factors:<\/p>\n<ul>\n<li>En la majoria d&#8217;ocasions, els usuaris accediran al sistema per primera vegada. Hi ha d&#8217;haver una informaci\u00f3 introduct\u00f2ria, i la interf\u00edcie ha de ser senzilla i molt intu\u00eftiva.<\/li>\n<li>Els usuaris poden presentar nivells molt diferents d&#8217;experi\u00e8ncia en l&#8217;\u00fas d&#8217;interactius. El disseny de punts d&#8217;informaci\u00f3 ha de tenir en compte els usuaris amb baix nivell d&#8217;experi\u00e8ncia, aix\u00ed com els que presentin discapacitats.<\/li>\n<li>La informaci\u00f3 clau s&#8217;ha de proporcionar de manera r\u00e0pida i senzilla per satisfer a l&#8217;usuari que vol dedicar poc temps a la interacci\u00f3.<\/li>\n<li>El sistema ha de retornar a l&#8217;estat inicial quan no hi hagi cap usuari utilitzant-lo.<\/li>\n<li>Un quiosc promocional (col locat en una fira professional, per exemple) ha d&#8217;atreure els usuaris, mostrant clarament quin \u00e9s el seu contingut.<\/li>\n<\/ul>\n<p>M\u00e9s informaci\u00f3: <a href=\"..\/pautes-de-disseny-de-punts-dinformacio\">Pautes de disseny de punts d&#8217;informaci\u00f3<\/a><\/p>\n<hr \/>\n<h3>Dispositius m\u00f2bils<\/h3>\n<p>Els dispositius m\u00f2bils es fan servir en un <strong>context molt variable<\/strong>. L&#8217;usuari pot tenir interfer\u00e8ncies ambientals que distreguin la seva atenci\u00f3, i generalment \u00e9s conscient que el temps de connexi\u00f3 t\u00e9 un cost econ\u00f2mic.<br \/>\nD&#8217;altra banda, hi ha una gran <strong>heterogene\u00eftat de dispositius<\/strong>, especialment important pel que fa a la diversitat de formats de pantalla.<br \/>\nTots aquests factors intervenen en la definici\u00f3 d&#8217;unes especificacions concretes en el disseny d&#8217;interf\u00edcies per a dispositius m\u00f2bils.<\/p>\n<p>M\u00e9s informaci\u00f3: <a href=\"..\/pautes-de-disseny-de-dispositius-mobils\">Pautes de disseny de dispositius m\u00f2bils<\/a><\/p>\n<hr \/>\n<h3>Televisi\u00f3 interactiva<\/h3>\n<p>El disseny d&#8217;interf\u00edcies per a pantalla de televisor est\u00e0 en proc\u00e9s d&#8217;expansi\u00f3, a causa de la televisi\u00f3 interactiva o algunes plataformes de videojoc.<br \/>\nEls dos factors fonamentals que cal tenir en compte s\u00f3n:<\/p>\n<ul>\n<li>No tots els pa\u00efsos utilitzen el mateix <strong>format de pantalla<\/strong> per a televisi\u00f3. A Europa, l&#8217;est\u00e0ndard m\u00e9s habitual correspon al PAL i als Estats Units, a l&#8217;NTSC.\n<p><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\" target=\"_blank\"><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\">Formats de televisi\u00f3<\/figcaption><\/figure><\/li>\n<li>L&#8217;<strong>actitud de l&#8217;usuari<\/strong> davant d&#8217;una pantalla d&#8217;ordinador o un televisor \u00e9s diferent de la que t\u00e9 respecte a un ordinador, fet que s&#8217;ha de tenir en compte per a optimitzar el disseny de l&#8217;aplicaci\u00f3.<\/li>\n<\/ul>\n<p>M\u00e9s informaci\u00f3: <a href=\"..\/pautes-de-disseny-per-a-televisio\">Pautes de disseny per a televisi\u00f3<\/a><\/p>\n<hr \/>\n<h3>Realitat virtual<\/h3>\n<p>El terme <em>realitat virtual<\/em> va n\u00e9ixer als anys setanta, i suposa un cas especial en el desenvolupament d&#8217;interf\u00edcies gr\u00e0fiques, ja que permet generar entorns sint\u00e8tics amb els quals l&#8217;usuari interactua en temps real. Pot ser de dos tipus:<\/p>\n<ul>\n<li><strong>Immersiva. <\/strong>L&#8217;usuari s&#8217;introdueix en un entorn tridimensional, en qu\u00e8 interactua amb objectes o altres persones mitjan\u00e7ant diferents dispositius (auriculars, guants, etc.).\n<p><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\" target=\"_blank\"><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\">Font: http:\/\/www.sxc.hu\/browse.phtml?f=download&amp;id=288584<\/figcaption><\/figure><\/li>\n<li><strong>No immersiva. <\/strong>L&#8217;usuari interactua amb altres objectes o persones, mantenint-se fora de l&#8217;escena. SecondLife \u00e9s un exemple d&#8217;experi\u00e8ncia no immersiva.\n<p><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\" target=\"_blank\"><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\">Font: http:\/\/secondlife.com\/showcase\/screenshots.php<\/figcaption><\/figure><\/li>\n<\/ul>\n<p>En ambd\u00f3s casos, l&#8217;objectiu consisteix a proporcionar a l&#8217;usuari la m\u00e0xima <strong>sensaci\u00f3 de llibertat en la interacci\u00f3<\/strong>, mitjan\u00e7ant la simulaci\u00f3 d&#8217;entorns reals, processos d&#8217;interacci\u00f3 naturals i respostes del sistema en temps real.<br \/>\nEls sistemes de realitat virtual es dirigeixen a tots els sentits de l&#8217;usuari mitjan\u00e7ant dispositius de diferents caracter\u00edstiques:<\/p>\n<ul>\n<li><strong>Dispositius de visualitzaci\u00f3<\/strong> (auriculars, binoculars, etc.). S\u00f3n dispositius que permeten tenir una visi\u00f3 estereosc\u00f2pica en temps real, mitjan\u00e7ant la qual l&#8217;usuari pot observar l&#8217;entorn en tres dimensions.\n<p><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\" target=\"_blank\"><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\">Font: http:\/\/en.wikipedia.org\/wiki\/Image:VR-Helm.jpg<\/figcaption><\/figure><\/li>\n<li><strong>Dispositius d&#8217;interacci\u00f3<\/strong> (guants, ratolins, palanques de control, etc.). Permeten que el sistema pugui recon\u00e8ixer les accions, transmetent les respostes adequades en temps real. S\u00f3n dispositius d&#8217;entrada (en el sentit que transmeten al sistema dades sobre l&#8217;estat de l&#8217;usuari), per\u00f2 tamb\u00e9 de sortida, ja que transmeten a l&#8217;usuari les respostes del sistema a les seves accions: moviment dels objectes, pes, qualitats t\u00e0ctils, etc.\n<p><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\" target=\"_blank\"><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\">Font: http:\/\/www.sxc.hu\/photo\/708174<\/figcaption><\/figure><\/li>\n<li><strong>Dispositius de seguiment.<\/strong> Permeten detectar la posici\u00f3 de l&#8217;usuari dins de l&#8217;entorn, aix\u00ed com els seus moviments i girs. L&#8217;objectiu d&#8217;aquests dispositius \u00e9s proporcionar una resposta visual adequada per a mantenir la simulaci\u00f3 del context.<\/li>\n<li><strong>Dispositius d&#8217;audici\u00f3.<\/strong>\u00a0Permeten transmetre el so de l&#8217;entorn a l&#8217;usuari. Permeten refor\u00e7ar les condicions de la simulaci\u00f3, ja que depenen tant de la ubicaci\u00f3 de l&#8217;usuari, com dels sons generats pels objectes de l&#8217;entorn.<\/li>\n<\/ul>\n<hr \/>\n<h3>Realitat augmentada<\/h3>\n<p>\u00c9s l&#8217;aplicaci\u00f3 m\u00e9s recent de la realitat virtual, i s&#8217;est\u00e0 difonent a un ritme accelerat. \u00c9s l&#8217;entrada d&#8217;un sistema que utilitza informaci\u00f3 generada per ordinador, per estendre la realitat amb efectes virtuals. Les imatges virtuals i reals es barregen, de manera que l&#8217;usuari mant\u00e9 el contacte amb el m\u00f3n real, en el qual s&#8217;introdueixen elements generats sint\u00e8ticament. Es basa en diversos tipus de dispositius:<\/p>\n<ul>\n<li><i>See-through HMD (<\/i>head mounted display<i>)<\/i>. Casos que barregen imatges del m\u00f3n real amb imatges generades.<\/li>\n<li><i>See-through<\/i> basat en v\u00eddeo. Mateix sistema que l&#8217;anterior, per\u00f2 basat en un v\u00eddeo.<\/li>\n<li>Altres. Per exemple, mostrant el resultat en un monitor o una pantalla de dispositiu m\u00f2bil.<\/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\" target=\"_blank\"><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\">Font: http:\/\/www.flickr.com\/photos\/nilsmengedoht\/5109833017\/<\/figcaption><\/figure>\n<p><strong>Lectura recomanada<\/strong><\/p>\n<p>Alguns exemples d&#8217;aplicacions de realitat augmentada poden veure&#8217;s en l&#8217;article &#8220;<a href=\"http:\/\/recursostic.educacion.es\/observatorio\/web\/es\/cajon-de-sastre\/38-cajon-de-sastre\/922-realidad-aumentada\" target=\"_blank\">Realitat augmentada<\/a>&#8221; de l&#8217;Observatori Tecnol\u00f2gic del Ministeri d&#8217;Educaci\u00f3.<br \/>\n<\/p>","protected":false},"excerpt":{"rendered":"<p>Els diferents entorns per als quals es desenvolupa una aplicaci\u00f3 interactiva imposen uns requisits espec\u00edfics. Per entorn entenem aqu\u00ed el context en el qual l&#8217;usuari utilitzar\u00e0 l&#8217;aplicaci\u00f3. Per exemple, en el cas d&#8217;un diari digital, el disseny final s&#8217;ha de concebre de diferent manera segons el context en qu\u00e8 ser\u00e0 visualitzat: des d&#8217;un navegador web &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/usab\/principals-entorns-dinteraccio\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abPrincipals entorns d&#8217;interacci\u00f3\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\/ca\/wp-json\/wp\/v2\/pages\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":23,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":849,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/358\/revisions\/849"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/31"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}