rau

ANLISI DINTERFCIES

Jaume Villarreal Quintana

disseny dinterfcies multimdia

PAC1

Gmultimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

LA CAPUTXETA VERMELLA interfcie digital #1

03 06 09 12 14 16

PEQUELANDIA interfcie digital #2

INTERFCIE DUNA RENTADORA interfcie analgica #1

INTERFCIE DUN AIRE CONDICIONAT interfcie analgica #2

LA INTERFCIE TRANSPARENT conclusions

Recursos Grfics

-2Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

La Caputxeta
interfcie digital #1

Caperucita Roja de los Hermanos Grimm, creat per lequip de

Ideal Binary, s un llibre Pop-up interactiu en 3-D multiplataforma per a dispositius mbils. Aquesta aplicaci implementa la tecnologia PopIrisTM, tecnologia que permet augmentar el nivell dinteracci i de disseny visual i grfic. Pel que fa al seu target, aquest projecte est dirigit principalment al pblic infantil, situant el seu rang dedat entre els 2 i 10 anys aproximadament.

Laplicaci sorganitza seguint lestructura de lobra original, tot i que simplifica el text per fer-la ms gil a lusuari. Els

continguts estan ordenats de manera se-

qencial, seguint el patr narratiu establert. Malgrat tot, laplicaci sadapta a la naturalesa del dispositiu i permet dos tipus daccs: accs seqencial mitjanant les fletxes de navegaci i accs no linial a travs de laccs a lndex de continguts.

Grfic 1 - Vista conjunta del sistema de navegaci seqencial i del sistema de navegaci no -linial

-3-

Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

La

interacci es basa en el sistema touch-screen,

fent-la senzilla i extremadament intutiva. Es pot interactuar amb un gran nombre dobjectes de la IU, ja siguin del conte o dels jocs que hi ha intercalats, dotant-la duna gran crrega manipulativa.
Grfic 2 - Joc basat en el reconeixement del gest darrossegament (sistema touch-screen)

Els

elements de la intefcie sassocien en dos grups:

icones basades en metfores visuals elements propis de la tecnologia touch-screen. Aquests elements es comporten de manera coherent i consistent. Totes les accions van acompanyades defectes acstics que permeten crear patrons dinteracci.

Laplicaci est destinada a un

pblic

eminentment infantil i es nota una cura

especial per ajustar-se a aquest rang dedat. Hi ha presncia defectes acstics i danimaci, elements sorpresius i un disseny cromtic ric. La histria est farcida de petits jocs que es converteixen en mini-aplicacions pensades per entretenir i oferir petits reptes. Hi ha una clara aposta per la creativitat.

Grfic 3 - Inclusi delements sorpresius dins de la narraci. En ocasions poden estar inspirats en referents que no sn propis de la histria original.

-4-

Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Els

recursos grfics

estan molt cuidats.

Tots els elements queden a la vista dins de la finestra, la mida de la font s correcta i el contrast afavoreix la llegibilitat. La grandria dels botons s notable i amplia la superfcie de contacte, pensant sobretot en els usuaris ms petits. Els canvis destat, com ara el pas de pgina i la fi dels jocs, estan reforats amb efectes visuals i acstics.
Grfic 4 - La composci de la interfcie est molt cuidada.

El projecte est molt arrelat als

referents culturals

occidentals. Laplicaci

se serveix de tot un bagatge simblic i gestual propi de la nostra cultura, aprofitant la interacci touch-screen per actuar directament sobre la pantalla. Per altra banda, les icones i els grafics evoquen accions, objectes, caracteritzacions i conceptes propis del mn real. El nivell dusabilitat de laplicaci s ptim. s una app molt senzilla demprar, s consistent, mant les constant grfiques i dinteracci i dna total llibertat a lusuari per explorar al mxim sense por a caure en vies mortes que no donin pas a ms opcions. Aix fa que lusuari tingui una clara sensaci de control i se senti autnom per endinsar-se ne la navegaci. La sensaci de transparncia s total. Lusuari no percep els elements dinterfcie com quelcom ali al que fa, sin que ho veu com detalls que formen part de la naturalesa mateixa de laplicaci.

-5Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Pequelandia
interfcie digital #2

Pequelandia s un projecte web educatiu que ofereix, de manera

organitzada, recursos digitals perqu els infants puguin reforar aprenentatges duna manera ldica i interactiva..

El projecte empra un sistema dorganitzaci basat en esquemes exactes, on els grups de

continguts sn excloents entre si. Lestructura dorganitzaci combina:

relacions jerrquiques, ubicades en els mens de navegaci. relacions hipertextuals, presents en els hipervincles. Destaca labsncia desquemes relacionals que permetin fer cerques de continguts.

Grfic 5 - Sistema principal de navegaci.

El portal est dissenyat pensant en

format web per a ordinador, fet que es nota

en els curts perodes de descrrega que en general presenta. No sha tingut en compte, per, laccs des daltres dispositius, ja que hi ha activitats que no responen si sempren des de tablets o smartphones. Per altra banda, el disseny no s responsiu i per tant no sadapta a les particularitats dels dispositius mbils.

Grfic 6 - Captura de la web en un dispositiu mbil. Els continguts desborden la finestra.

-6Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Els

elements dinteracci sn els propis del format web. El ratol pren molta

rellevncia i el seu comportament s lesperat, ja que destaca les etiquetes del sistema de navegaci i respon davant dels enllaos actius. Malgrat tot, la interacci amb el mouse es limita a la selecci de continguts o a la realitzaci de senzilles activitats.

Pequelandia est dirigit a un

pblic

infantil.

Tot i aix, no dna resposta als requisits del seu rang dedat. Es fa poc s de metfores, hi ha una clara deficincia destmuls audiovisuals enfront de textos llargs i montons, una manca notable danimacions i molt poca crrega emocional. Per altra banda, no sofereixen instruccions clares sobre lus del portal. Aix provoca que, per exemple, es faci un mal s dels missatges que pengen els usuaris.
Grfic 7 - Composici poc adaptada al rang dedat.

Els

recursos grfics no estan massa cuidats. Hi ha presncia delements impor-

tants fora de la finestra principal, fet que obliga a fer un s intensiu de les barres dscroll. Les fonts tenen una mida correcta per sn poc atractives, hi ha excs de text i manca dimatges i la composici dna sensaci de desordre. Aix li dna poca consistncia i no ofereix ni autonomia ni sensaci de control a lusuari. La interfcie treu poc rdit a les convencions culturals que empren els usuaris. Hi ha un abs del text en detriment de ls de metfores icniques que permetin la creaci dun model mental que permeti a lusuari ubicar-se en ls del portal. Amb lexposat anteriorment es pot concloure que la usabilitat del projecte s de perfil baix. El sistema de navegaci primari s senzill, per la navegaci secundria i

-7Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

la contextual no sn massa clares, ja que es troben en ubicacions poc adients i amb un contrast deficient. Per altra banda, no hi ha constncia dactualitzacions dels continguts ni presncia dun mapa web. Tot plegat ofereix una baixa consistncia al sistema.

Grfic 8 - Exemples delements de navegaci poc contrastats.

La finalitat del projecte s molt bona per la seva implementaci s fora deficient. La interfcie dinteracci es fa molt present a causa de les seves mancances, i ms quan sintenta accedir des de dispositius mbils. Es pot concloure, doncs, que Pequelandia ofereix una interfcie amb un baix nivell de

transparncia.

-8Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Interfcie duna rentadora

interfcie analgica #1 Es valora en aquest apartat la interfcie de control duna rentadora domstica. La mateixa consta duna roda de selecci de programa, botons de modificaci destat i un display que fa el retorn visual de lacci seleccionada. La interfcie sordena seguint un esquema dorganitzaci exacte, ja que les accions i la modificaci destats (revolucions, temperatura i durada) sn excloents entre ells. Queda clar, doncs, que els

continguts estaran classificats per tasques.

Grfic 9 - Esquema dorganitzaci exacta. Les tasques sn excloents entre elles.

Tal i com sha comentat, la interfcie s analgica i la seva interacci est basada en sistemes mecnics i electrnics de selecci i pulsaci. Ja que parlem dun element analgic, s evident que aquesta disposici dels elements dinteracci sajusta a les caracterstiques del dispostiu.

Aquests

elements estan molt ben integrats, doncs es comporten de manera pre-

visible i consistent i en tot moment sobt retorn per part de la mquina, ja sigui un senyal acstic, ja sigui mitjanant lactualitzaci del display. Aquest comportament ajuda a lusuari a orientar-se en la selecci de les seves accions.
-9Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Grfic 10 - Sistema analgic dinteracci.

Lusuari

tipus al que va dirigit aquest producte pertant a un ampli rang dedat,

que pot anar des dun usuari adolescent fins a un de snior. Aix significa que el seu model dinteracci ha de respondre a estndards amplis i neutres per adrear-se a qualsevol usuari potencial. Ls detiquetes concises, planeres i en llengua vernacla aix ho permeten. A ms a ms, els mecanismes de discriminaci visual i acstica reforcen aquesta intenci.

Els

recursos grfics sn austers per acompleixen la seva funci. Un bon con-

trast i una tipografia clara afavoreixen la llegibilitat del text, etiquetes que sn reforades amb tot un seguit dicones metafricament significatives. Per la seva banda, el display agrupa els blocs dinformaci principals i realitza una actualitzaci constant i destacada de la informaci.

Com sol passar en la majoria dels aparells domstics, ls dicones respon a

sos grfics arbitraris i molt arrelats en la iconografia collectiva. Aix doncs, el fet
que la seva comprensi parteixi del substrat cultural propi fa que la seva interpretaci sigui clara i no dugui a confusi.

recur-

Amb tots aquests elements exposats es pot afirmar que la interfcie mostra un alt grau dusabilitat. El seu s possibilita una interacci senzilla, ofereix a lusuari una

- 10 Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

clara sensaci de control i li permet ser plenament autnom perqu totes les accions sn reversibles i no hi ha accions sense retorn.

Estem doncs, davant duna interfcie amb un alt ndex de

transparncia.

La

interacci entre lusuari i la mquina no queda penalitzada per la comprensi de la interficie, ja que la seva disposici i ls dels seus elements est molt integrat dins del model cultural de lusuari potencial.

Grfic 11 - Actualitzaci constant del display.

- 11 Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Interfcie dun aire condicionat

interfcie analgica #2 Es valora en aquest apartat la interfcie de control dun aparell daire condicionat GENERAL. La mateixa consta duna consola de botons de selecci i un display que actualitza la informaci de les accions seleccionades. Igual que en el cas anterior, la interfcie es basa en un sistema dorganitzaci exacte i les accions estan classificades per tasques. Val a dir que en aquest cas saprofita el revers de la tapa de la consola per presentar les instruccions.

De manera anloga, el fet destar treballant sobre una

interfcie analgica impli-

ca, com en el cas de la rentadora, ls de sistemes mecnics de pulsaci per activar accions i la presncia dun display per actualitzar la informaci relativa a les mateixes.

Els

elements dinteracci es prensenten

en un format combinat dicona i etiqueta, tot i que el text de les mateixes est en angls. En aquest cas, el desconeixment de lidioma pot dur a confusi si no sinterpreten les icones de manera correcta. A ms, no hi ha cap tipus de retorn acstic que pugui indicar a lusuari canvis dacci o destat.
Grfic 12 - Sistema combinat detiquetat.

El perfil dusuari es mou en un ampli

rang dedat.

Malgrat tot, la consola

dinteracci no contempla tot el ventall dusuaris. Dentrada s necessari tenir coneixements de la llengua anglesa per assolir una comprensi total del missatge (botons i intruccions), coneixement que anir minvant de manera notria a mida que augmenta
- 12 Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

el rang dedat de lusuari. Si a aix li afegim la presncia de vocabulari tcnic, com ara termosensor, la dificultat de comprensi s manifesta.

Els

recursos grfics tampoc ajuden gaire a millorar la interacci entre usuari i

aparell. Malgrat que el contrast i la composici sn adients i afavoreixen la llegibilitat, algunes de les icones emprades no responen als estndards icnics dels usuaris, ja que han estat dissenyades per al propi sistema i la seva interpretaci poc dur a equvoc.

Grfic 13 - Detall dicones poc ajustades als estndards.

Aix ens remet a la baixa connexi que hi ha entre la disposici de la interfcie i lusuari: per una banda destaca la implementaci de la llengua anglesa, tant a nivell detiquetes com dinstruccions. Aquest factor penalitza a totes aquelles persones que siguin desconeixedores de lidioma. per altra banda es troben les icones prpies del sistema, poc estandaritzades i allunyades del substrat cultural collectiu que les podria fer identificables. Aix doncs, aquesta interfcie presenta un nivell dusabilitat fora baix, ja que afavoreix a aquells usuaris que comparteixen el seu codi textual i grfic per penalitza a tots aquells que no el coneixen.

Per aquest motiu la interfcie es fa poc

transparent

. Possiblement un nombre

important dusuaris experimentin sensaci de poc control sobre laparell i un baix nivell dautonomia, alhora que mostra poca facilitat ds i poca adaptaci als usuaris per part de la marca.

- 13 Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

La interfcie transparent
conclusions Quan els nens aprenen a llegir, cap all als 4 5 anys, la seva competncia lingstica s com una balana que t dos plats. A un plat hi descansa la mecnica lectora i a laltre la comprensi. Al primer shi recolza ladquisici dun sistema arbitrari format per un conjunt de normes grfiques i fonolgiques que cal aprendre. Al segon shi troba la culminaci de la competncia lectora, que no s altra que entendre el que es llegeix per poder-ho gaudir, interpretar i transmetre. Aix doncs, quan el nen tot just comena a llegir, totes les seves energies se centren en la decodificaci daquest sistema fontic i la balana es decanta clarament cap al plat de la mecnica lectora, deixant poc espai a la comprensi. La decodificaci del sistema s un pas necessari alhora que s un gran impediment per gaudir del que es llegeix. Per aix als nens els agrada que els expliquin contes. Per amb el pas del temps el nen es va fent ms competent, va integrant les normes i millora la seva mecnica, fet que permet que els plats de la balana modifiquin la seva configuraci. La mecnina perd pes i es consolida la comprensi, fins arribar a un punt de maduresa en qu decodificar es converteix en un procs natural. El codi sha fet transparent. Amb la interfcie passa el mateix. Quan un usuari ha dinvertir massa energies en dominar la interacci duna aplicaci menys possibilitats t dassolir lobjectiu que shavia plantejat. Igual que passa amb un nen que aprn a llegir, els dissenyadors dinterfcies han daconseguir establir sistemes dinteracci que estiguin integrats dins dels models mentals dels usuaris, ja sigui a tant a nivell mecnic com a nivell cultural i metafric. Qu cal tenir en compte, doncs, per intentar dissenyar una interfcie el ms transparent possible?
- 14 Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Per una banda una cal tenir clar amb quin o quins dispostius es vol treballar. Fins fa poc el disseny web era el ms ests, per leclosi dels dispositius mbils i els seus sistemes operatius ha revolucionat molts conceptes compositius. El disseny responsiu prendr molta importncia. La interfcie i els seus elements esdeven clau en aquesta evoluci. Els dispositius mbils implementen nivells dinteracci molt alts que tamb cal tenir presents si es vol que aquesta sigui el ms transparent possible. Cal cuidar molt lorganitzaci dels

continguts.

Ordenar de manera clara,

lgica i senzilla els continguts i la seva cerca far ms fcil lexperincia a lusuari i ser una de les claus de lxit, malgrat que pugui semblar una tasca desvinculada de la resta. Els

elements grfics tamb tenen una gran rellevncia dins de qualsevol

projecte. El primer contacte que lusuari t amb laplicaci s audiovisual. Una composici desequilibrada, una base cromtica poc contrastada o una mida de lletra poc ajustada convidar al client a desestimar la navegaci. Caltenir molt present que cada cop lusuari s ms audiovisual. No sha de perdre mai de vista el substrat cultural dels usuaris a qui va dirigida laplicaci, aix com el rang dedat en qu es mouran. Tenir molt presents aquests factors far que el dileg

entre usuari i aplicaci sigui flut o

que, per contra, suposi una crrega difcil de gestionar. La conjunci de tots aquests factors far que la interacci sigui ms senzilla de dur a terme. La usabilitat millora notablement si en la base de qualsevol disseny shi troba el perfil de lusuari, les seves caracterstiques i les seves necessitats. s quan totes les peces encaixen que, com per art de mgia, la interfcie es fa transparent.

la millor interfcie s la que desapareix

(Carlos A. Scolari)

- 15 Grau en Multimdia

DISSENY DINTERFCIES MULTIMDIA

PAC1

Sobre Disseny dinterfcies Qu es una interfaz?: importancia de una buena interfaz. <http://albertolacalle.com/hci/interfaz.htm 20 de septiembre de 2013> [data de consulta: 20 de setembre de 2013] Carlos A. Scolari, El ideolgico retorno de las interfaces transparentes. <http://hipermediaciones.com/2009/11/23/el-ideologico-retorno-de-las-interfaces-transparentes/> [data de consulta: 23 de setembre de 2013] Wiki de Disseny dInterfcies [UOC]. <http://cv.uoc.edu/app/ mediawiki16/wiki/P%C3%A0gina_principal?ajax=true 23> [data de consulta: 23 de setembre de 2013] Luke Wroblewski, Mobile First. <http://www.lukew.com/ff/entry.asp?933> [data deconsulta: 1 doctubre e 2013] Mdul 1/2/3 de lassignatura Disseny dInterfcies Multimdia. [UOC] Sobre responsive design Tona Monjo, Responsive web design. <http://www.slideshare. net/tonamonjo/responsive-web-design-17713036> [data de consulta: 23 de setembre de 2013] Sobre les imatges: Totes les imatges han estat dissenyades i realitzades per lautor, a excepci de lisotip de la UOC.

- 16 Grau en Multimdia