PAC1_DIM

7/27/2019 PAC1_DIM

1/16

ANLISI DINTERFCIES

PAC1

rau

multimdia

disseny

dinte

rfcies

multim

dia

Jaume Villarreal Quintana

7/27/2019 PAC1_DIM

2/16

DISSENY DINTERFCIES MULTIMDIA PAC1

Grau en Multimdia

- 2 -

LA CAPUTXETA VERMELLA

interfcie digital #1

PEQUELANDIA


INTERFCIE DUNA RENTADORA

interfcie analgica #1

INTERFCIE DUN AIRE CONDICIONAT

interfcie analgica #2

LA INTERFCIE TRANSPARENT

conclusions

Recursos

Grcs

06

09

12

14

16

03

7/27/2019 PAC1_DIM

3/16


Grau en Multimdia

- 3 -

La Caputxeta

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

grc. 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 aproxima-

dament.

Laplicaci sorganitza seguint lestructura de lobra original, tot i que simplica 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

etxes de navegaci i accs no linial a travs de laccs a lndex de continguts.


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

7/27/2019 PAC1_DIM

4/16


Grau en Multimdia

- 4 -

La interacci es basa en el sistema touch-screen,

fent-la senzilla i extremadament intutiva. Es pot

interactuar amb un gran nombre dobjectes de laIU, ja siguin del conte o dels jocs que hi ha in-

tercalats, dotant-la duna gran crrega manipu-

lativa.

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.

Grc 2 - Joc basat en el reconeixement del gestdarrossegament (sistema touch-screen)

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

7/27/2019 PAC1_DIM

5/16


Grau en Multimdia

- 5 -

Els recursos grfcs estan molt cuidats.

Tots els elements queden a la vista dins de

la nestra, 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 dels jocs, estan reforats amb

efectes visuals i acstics.

El projecte est molt arrelat als referents culturals occidentals. Laplicaci

se serveix de tot un bagatge simblic i gestual propi de la nostra cultura, aprotant

la interacci touch-screen per actuar directament sobre la pantalla. Per altra banda,

les icones i els gracs 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 grques 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 op-

cions. Aix fa que lusuari tingui una clara sensaci de control i se senti autnom per

endinsar-se ne la navegaci.

La sensaci de transparncias total. Lusuari no percep els elements dinterfcie

com quelcom ali al que fa,

sin que ho veu com de-

talls que formen part de

la naturalesa mateixa de

laplicaci.

Grc 4 - La composci de la interfcie est molt cuidada.

7/27/2019 PAC1_DIM

6/16


Grau en Multimdia

- 6 -

Pequelandia s un projecte web educatiu que ofereix, de maneraorganitzada, recursos digitals perqu els infants puguin reforar aprenen-

tatges 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.

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 comp-

te, 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.

Pequelandiainterfcie digital #2

Grc 5 - Sistema principal de navegaci.

Grc 6 - Captura de la web en un dispositiu mbil. Els continguts desborden la nestra.

7/27/2019 PAC1_DIM

7/16


Grau en Multimdia

- 7 -

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 siste-

ma 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 decincia destmuls audiovisuals enfront

de textos llargs i montons, una manca notabledanimacions i molt poca crrega emocional.

Per altra banda, no sofereixen instruccions cla-

res sobre lus del portal. Aix provoca que, per

exemple, es faci un mal s dels missatges que

pengen els usuaris.

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

tants fora de la nestra 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 usua-

ris. 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

perl baix. El sistema de navegaci primari s senzill, per la navegaci secundria i

Grc 7 - Composici poc adaptada al rang dedat.

7/27/2019 PAC1_DIM

8/16


Grau en Multimdia

- 8 -

la contextual no sn massa clares, ja que es troben en ubicacions poc adients i amb un

contrast decient. Per altra banda, no hi ha constncia dactualitzacions dels contin-

guts ni presncia dun mapa web. Tot plegat ofereix una baixa consistncia al sistema.

La nalitat del projecte s molt bona per la seva implementaci s fora decient.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 Peque-

landia ofereix una interfcie amb un baix nivell de transparncia.

Grc 8 - Exemples delements de navegaci poc contrastats.

7/27/2019 PAC1_DIM

9/16


Grau en Multimdia

- 9 -

Es valora en aquest apartat la interfcie de control duna rentadora doms-

tica. La mateixa consta duna roda de selecci de programa, botons de

modicaci destat i un display que fa el retorn visual de lacci seleccio-

nada.

La interfcie sordena seguint un esquema dorganitzaci exacte, ja que les accions i

la modicaci destats (revolucions, temperatura i durada) sn excloents entre ells.

Queda clar, doncs, que els continguts estaran classicats per tasques.

Tal i com sha comentat, la interfcies 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.

Interfcie duna rentadorainterfcie analgica #1

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

7/27/2019 PAC1_DIM

10/16


Grau en Multimdia

- 10 -

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

que pot anar des dun usuari adolescent ns a un de snior. Aix signica que el seumodel 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 re-

forcen aquesta intenci.

Els recursos grfcs sn austers per acompleixen la seva funci. Un bon con-trast i una tipograa clara afavoreixen la llegibilitat del text, etiquetes que sn refor-

ades amb tot un seguit dicones metafricament signicatives. 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 recur-

sos grfcs arbitraris i molt arrelats en la iconograa 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.

Amb tots aquests elements exposats es pot armar que la interfcie mostra un alt grau

dusabilitat. El seu s possibilita una interacci senzilla, ofereix a lusuari una

Grc 10 - Sistema analgic dinteracci.

7/27/2019 PAC1_DIM

11/16


Grau en Multimdia

- 11 -

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. Lainteracci entre lusuari i la mquina no queda penalitzada per la comprensi de la

intercie, ja que la seva disposici i ls dels seus elements est molt integrat dins del

model cultural de lusuari potencial.

Grc 11 - Actualitzaci constant del display.

7/27/2019 PAC1_DIM

12/16


Grau en Multimdia

- 12 -

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 seleccio-

nades.

Igual que en el cas anterior, la interfcie es basa en un sistema dorganitzaci

exacte i les accions estan classicades per tasques. Val a dir que en aquest cas

saprota 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 matei -

xes.

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.

El perl dusuari es mou en un ampli rang dedat. Malgrat tot, la consola

dinteracci no contempla tot el ventall dusuaris. Dentrada s necessari tenir conei-

xements 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

Interfcie dun aire condicionatinterfcie analgica #2

Grc 12 - Sistema combinat detiquetat.

7/27/2019 PAC1_DIM

13/16


Grau en Multimdia

- 13 -

el rang dedat de lusuari. Si a aix li afegim la presncia de vocabulari tcnic, com

ara termosensor, la dicultat de comprensi s manifesta.

Els recursos grfcs tampoc ajuden gaire a millorar la interacci entre usuari iaparell. 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.

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 identicables.

Aix doncs, aquesta interfcie presenta un nivell dusabilitat fora baix, ja que

afavoreix a aquells usuaris que comparteixen el seu codi textual i grc 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.

Grc 13 - Detall dicones poc ajustades als estndards.

7/27/2019 PAC1_DIM

14/16


Grau en Multimdia

- 14 -

Quan els nens aprenen a llegir, cap all als 4 5 anys, la seva competncia lingsticas 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 grques i fonolgiques que cal aprendre. Al segon shi tro-

ba 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 decodicaci daquest sistema fontic i la balana es decanta clarament cap al

plat de la mecnica lectora, deixant poc espai a la comprensi. La decodicaci 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 modiquin la

seva conguraci. La mecnina perd pes i es consolida la comprensi, ns arribar a un

punt de maduresa en qu decodicar 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 transpa-

rent possible?

La interfcie transparentconclusions

7/27/2019 PAC1_DIM

15/16


Grau en Multimdia

- 15 -

Per una banda una cal tenir clar amb quin o quinsdispostius es vol treballar.

Fins fa poc el disseny web era el ms ests, per leclosi dels dispositius m-

bils 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 disposi-

tius 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 grfcs 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. Cal-

tenir molt present que cada cop lusuari s ms audiovisual.

No sha de perdre mai de vista el substrat cultural dels usuaris a qui va dirigi-

da laplicaci, aix com el rang dedat en qu es mouran. Tenir molt presents

aquests factors far que el dileg entre usuari i aplicaci sigui ut 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 perl 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)

7/27/2019 PAC1_DIM

16/16


- 16 -

Sobre Disseny dinterfcies

Qu es una interfaz?: importancia de una buena interfaz.

[data de consulta: 20 de setembre de 2013]

Carlos A. Scolari, El ideolgico retorno de las interfaces trans-

parentes. [data de consulta:

23 de setembre de 2013]

Wiki de Disseny dInterfcies [UOC]. [data de

consulta: 23 de setembre de 2013]

Luke Wroblewski, Mobile First. [data deconsulta: 1 doctubre e 2013] Mdul 1/2/3 de lassignatura Disseny dInterfcies Multimdia.

[UOC]

Sobre responsive design

Tona Monjo, Responsive web design. [data de con-

sulta: 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.

Documents

PAC1_DIM