DISSENY DINTERFCIES MULTIMDIA

L A NO TRANSPARNCIA DE
LES INTERFCIES
PAC 1

JORDI LLONCH ESTEVE

CC BY-NC-SA

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

NDEX
ndex ................................................................................................................................. 2 Aplicaci mbil SkyDrive ............................................................................................ 3 Arquitectura de la informaci ............................................................................... 3 Comportament dels elements dinteracci .......................................................... 3 Ajust al perfil dusuari ............................................................................................ 3 s de recursos grfics ............................................................................................ 4 Convencions culturals ............................................................................................ 4 Relaci amb les caracterstiques prpies del dispositiu ...................................... 4 Contribuci a la usabilitat ...................................................................................... 4 Aplicaci mbil TravelCards ...................................................................................... 5 Arquitectura de la informaci ............................................................................... 5 Comportament dels elements dinteracci .......................................................... 5 Ajust al perfil dusuari ............................................................................................ 5 s de recursos grfics ............................................................................................ 6 Convencions culturals ............................................................................................ 6 Relaci amb les caracterstiques prpies del dispositiu ...................................... 6 Reproductor multimdia Boxee Box ....................................................................... 7 Arquitectura de la informaci ............................................................................... 7 Comportament dels elements dinteracci .......................................................... 7 Ajust al perfil dusuari ............................................................................................ 8 s de recursos grfics ............................................................................................ 8 Convencions culturals ............................................................................................ 8 Relaci amb les caracterstiques prpies del dispositiu ...................................... 8 Cmera Canon eos 600D + Magic Lantern ............................................................ 9 Arquitectura de la informaci ............................................................................... 9 Comportament dels elements dinteracci .......................................................... 9 Ajust al perfil dusuari ............................................................................................ 9 s de recursos grfics .......................................................................................... 10 Convencions culturals .......................................................................................... 10 Relaci amb les caracterstiques prpies del dispositiu .................................... 10 Contribuci a la usabilitat .................................................................................... 10 Conclusi ....................................................................................................................... 11 Bibliografia i altres recursos ..................................................................................... 12

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 2/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

A PLICACI MBIL S KY D RIVE

Laplicaci per a dispositius mbils SkyDrive s un gestor darxius que permet accedir, compartir i editar els documents disponibles a lespai demmagatzematge virtual de Microsoft, Skydrive.

A RQUITECTURA

DE LA INFORMACI

Lorganitzaci i el disseny estructural de laplicaci denoten que hi ha hagut un estudi previ de les necessitats a cobrir i un procs danlisi minucis per a desenvolupar laplicaci, els quals han resultat en una correcta aplicaci de larquitectura de la informaci. La presentaci de la informaci es porta a terme fent s de la interfcie dusuari Metro, heretada del sistema operatiu Windows 8, que mant una coherncia visual amb aquest i esdev una forma dinteractuar molt neta i transparent per a lusuari novell, alhora que satisf totes les necessitats de lusuari expert.

C OMPORTAMENT

DELS ELEMENTS D INTERACCI

Lusuari interactua amb una srie delements de laplicaci per a comunicar-se amb ella i portar a terme les tasques que necessita. Aquests elements es reparteixen en tres zones de la pantalla: Zona superior Zona central Zona inferior

Les zones superior i inferior es comporten de la mateixa manera: requereixen que lusuari premi els botons disponibles per a dur a terme cada tasca. La zona central tamb requereix que lusuari premi els botons per a dur a terme les tasques primries, per a ms, introdueix un comportament secundari als elements al qual shi accedeix prement-los durant un segon.

A JUST

AL PERFIL D USUARI

El perfil dusuari que fa servir aquesta aplicaci s aquell que utilitza altres productes i serveis de Microsoft, com ara la versi web dSkyDrive, la srie daplicacions ofimtiques MS Office, el correu web Outlook i el sistema operatiu Windows 8. Totes elles mantenen una mateixa interfcie dusuari, la qual cosa permet que lusuari no hagi dadaptar-se a cada aplicaci, sin que considera cadascuna delles com una extensi de les altres ja conegudes. Jordi Llonch Esteve CC BY-NC-SA Pg. 3/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

DE RECURSOS GRFICS

Com comento anteriorment, la lnia visual de laplicaci segueix lesttica Metro, una interfcie dusuari neta i simple que fa s duns recursos grfics molt minimalistes. Cada tipus delement disposa de la seva representaci grfica que el diferencia de la resta. A ms, laplicaci mostra miniatures de les imatges per a fer ms fcil la navegaci entre fotografies.

C ONVENCIONS

CULTURALS

Laplicaci basa el seu funcionament en els costums adaptats dels ordinadors de sobretaula, els quals es van adaptar prviament de la vida real. Un gestor darxius s la representaci virtual dun espai fsic amb carpetes que contenen diferents tipus de documents al seu interior, una metfora que avui dia tots els gestors darxius han adoptat.

R ELACI

AMB LES CARACTERSTIQUES PRPIES DEL DISPOSITIU

Desprs de provar diferents gestors darxius per a dispositius mbils tctils he quedat altament satisfet amb la naturalesa i transparncia que atorga lSkyDrive. Aquesta aplicaci t en compte les possibilitats i limitacions del dispositiu i les adapta per a oferir una experincia dusuari optimitzada per a dispositius mbils. Hi ha altres aplicacions que permeten fer moltes ms accions i disposen de ms opcions, per a canvi de poder fer aquestes operacions, sacrifiquen les possibilitats del dispositiu dotant-lo de caracterstiques no prpies daquest. En aquest cas, lSkyDrive per a dispositius tctils noms fa s de dos tipus dinteracci entre lusuari i la mquina: prmer i prmer llarg, que podrien ser considerats els clic esquerra i clic dret en un ordinador tradicional.

C ONTRIBUCI

A LA USABILITAT

Ms que aconseguir que la interfcie sigui ms fcil dusar que altres, SkyDrive per a dispositius mbils ha sabut adaptar als dispositius tctils una aplicaci anteriorment disponible en ordinadors de sobretaula i integrar una mateixa interfcie dusuari duna manera tan transparent que fa que lexperincia dusuari sigui altament satisfactria.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 4/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

A PLICACI MBIL T RAVEL C ARDS

Laplicaci per a dispositius mbils TravelCards s un traductor multilinge per a viatgers que utilitza representacions pictriques de les paraules ms emprades durant les vacances.

A RQUITECTURA

DE LA INFORMACI

Com a desenvolupador de laplicaci puc afirmar que el procs que vaig seguir per a dissenyar-la va seguir tots els passos requerits a lhora de desenvolupar una aplicaci. Vaig estudiar i aplicar de manera detallada el disseny, lorganitzaci i la navegaci per a aconseguir una experincia dusuari ptima. Ls daquesta s tan senzill que qualsevol nen que encara no hagi aprs a parlar s capa de fer-la servir. Per extensi, qualsevol persona adulta sense experincia en el camp de les noves tecnologies, pot familiaritzar-se amb el seu s i fer-la servir sense necessitar ajuda externa.

C OMPORTAMENT

DELS ELEMENTS D INTERACCI

Els elements dinteracci de laplicaci compleixen amb escreix cadascuna de les seves funcions, per tenen un comportament massa esttic. La interacci entre lusuari i laplicaci es porta a terme prement cadascun dels botons de la pantalla inicial per a accedir a cada categoria i a les representacions pictriques. Inici Categoria Representaci pictrica

De tota manera, manquen transicions en canviar duna secci a una altra, retroalimentaci per part del dispositiu (com ara vibracions o sons) en la majoria delements dinteracci.

A JUST

AL PERFIL D USUARI

Laplicaci est pensada per a viatgers de qualsevol edat i nacionalitat possedors dun dispositiu mbil tctil (inicialment noms Android). Aquests usuaris poden ser viatgers freqents o espordics, per que comparteixen la mateixa necessitat de comunicar-se amb persones que no parlen el seu idioma all on viatgen. A ms a ms, s possible que aquests no disposaran de connexi a Internet mbil arreu del mn, aix que laplicaci funciona de manera completament fora de lnia i noms requereix que el dispositiu estigui carregat. Jordi Llonch Esteve CC BY-NC-SA Pg. 5/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

DE RECURSOS GRFICS

Tot i que laplicaci s molt fcil dutilitzar i resulta completament transparent per a qualsevol usuari, lesttica i el tractament de lestil grfic de laplicaci sha quedat a mig cam entre mantenir una composici minimalista i ls dun disseny molt poc atractiu. Tot i tenir un disseny poc atractiu, els pictogrames escollits mantenen una bona relaci entre icona i imatge real, la qual cosa permet que la majoria de les persones puguin entendre i identificar el significat de cadascun dells, amb un marge suficient per a poder fer servir una mateixa imatge amb significats diferents depenent del context.

C ONVENCIONS

CULTURALS

Tant se val el pas dorigen, la cultura a la qual es pertanyi o lidioma que una persona pugui parlar; una de les primeres coses totes les persones aprenem a fer quan som petits s tocar i senyalar objectes amb els dits. Laplicaci TravelCards fa s daquesta convenci cultural, que es entesa i compartida per a qualsevol persona del planeta.

R ELACI

AMB LES CARACTERSTIQUES PRPIES DEL DISPOSITIU

Les persones ens podem comunicar amb els dispositius mbils fent servir una srie de gestos que ja es consideren naturals, per laplicaci TravelCards no t en compte aquestes possibilitats. Lnica caracterstica que aplica s la de prmer per a accedir a cada opci de laplicaci. En cada categoria, seria necessari afegir lopci de desplaar-se entre categories movent el dit en leix horitzontal, alhora que el carrusel de botons superior es desplaa i canvia de mida al mateix temps, generant una sensaci de fludesa i coherncia amb lacci. Dins de cada representaci pictrica shauria dafegir lopci de magnificar i reduir cada imatge amb ls dels dits polze i ndex per a permetre augmentar la mida de les imatges amb ms detalls. Per a les daccions que resulten de prmer els botons, el dispositiu hauria de donar una resposta sonora i/o hptica per a que lusuari se nadons que la seva acci sha dut a terme correctament.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 6/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

R EPRODUCTOR MULTIMDIA B OXEE B OX

El Boxee Box s un reproductor multimdia de sal que, a part de reproduir tot tipus de contingut audiovisual digital de qualsevol dispositiu demmagatzematge (disc dur, USB o SD), escaneja la xarxa domstica i Internet per a trobar vdeos de programes de televisi i pellcules disponibles gratutament. A ms, permet accedir a plataformes de distribuci de pellcules sota demanda (Netflix, Vudu i Mubi) i disposa de multitud daplicacions dels serveis ms populars dInternet, com ara Youtube, Vimeo, Pandora, Flickr, etc. A part daquestes funcions, tamb disposa de la secci Veure desprs, que permet afegir qualsevol vdeo des del navegador web o el propi dispositiu a una llista per a ser visualitzat desprs en la comoditat del televisor. Al mateix temps permet compartir el contingut que tha agradat ms mitjanant Facebook i Twitter amb els teus amics i seguidors.

A RQUITECTURA

DE LA INFORMACI

El Boxee Box inclou tres elements que fan s de larquitectura de la informaci: el reproductor multimdia, el comandament a distncia i la interfcie dusuari. Reproductor Comandament Interfcie dusuari

La integraci gaireb perfecte daquests elements denota que hi ha hagut un procs elaborat danlisi de les necessitats que es pretenien satisfer que ha resultat en un disseny atractiu i diferent daltres dispositius similars, alhora que disposa dun disseny funcional que dna resposta a unes necessitats no cobertes fins el moment i que ha aconseguit una organitzaci i una navegaci transparent i senzilla daprendre a utilitzar.

C OMPORTAMENT

DELS ELEMENTS D INTERACCI

El reproductor noms t un bot per engegar-se i apagar-se, per que no cal fer servir, ja que el comandament disposa de les mateixes funcions. A ms, la dualitat o trialitat comandament-teclat-ratol permet desplaar-se entre els elements i mens del dispositiu, fer cerques alfanumriques a la biblioteca i navegar per la Web com si es tracts dun ordinador tradicional. Pel que fa al comandament, es troba a faltar la retroilluminaci de les tecles i una petita pantalla que mostri les lletres escrites, com tenen altres dispositius similars. Pel que fa a la interfcie dusuari, encara no est acabada al 100% i algunes vegades no es comporta de manera prou fluda o satura completament i requereix un reinici del dispositiu.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 7/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

A JUST

AL PERFIL D USUARI

El Boxee Box s un reproductor multimdia posat a la venda per primer cop al mercat a finals de 2010, quan encara no shavien popularitzat les televisions intelligents (o smart TV en angls). En aquell moment el mercat estava saturat de reproductors multimdia de tot tipus, per sobretot, que oferien una mala experincia dusuari. Boxee Box va nixer per a satisfer a totes aquelles persones insatisfetes amb les solucions existents fins llavors que volien accedir a contingut audiovisual disponible a Internet des de la comoditat del sof per sense la dificultat de complicats sistemes operatius no adaptats a les televisions. En aquell moment va complir amb escreix les necessitats dels usuaris, ja que va saber adaptar-se al qu aquests necessitaven.

DE RECURSOS GRFICS

La composici i el tractament esttic presents al Boxee Box sn uns dels aspectes ms elaborats del producte i fan que aquest es pugui considerar un producte de disseny. En contrast amb altres reproductors multimdia, lenorme esfor que els dissenyadors i desenvolupadors del Boxee Box han aplicat per a aconseguir aquesta esttica fa que lusuari no hi presti atenci i que ho consideri una extensi natural de la seva televisi.

C ONVENCIONS

CULTURALS

Les televisions existeixen des de fa ms de 100 anys i el comandament a distncia va ser un dels grans avenos que aquestes van sofrir (a part de larribada del color). Des de llavors, no es van produir canvis substancials. Ms endavant, amb larribada dInternet els usuaris es van familiaritzar amb el teclat i el ratol. I s en aquest moment quan lequip de Boxee es decideix a integrar un teclat, un comandament i un ratol en un sol dispositiu que permet interactuar amb el centre dentreteniment digital connectat al televisor. Com que els usuaris ja coneixien el teclat, el ratol i el comandament, les convencions culturals emprades han estat adaptades de manera molt rpida pels usuaris, ja que no hi ha cap novetat completament nova, sin que simplement consisteix a unir tres costums mpliament enraigats pels usuaris.

R ELACI

AMB LES CARACTERSTIQUES PRPIES DEL DISPOSITIU

El comandament, leina amb la qual lusuari interactua amb el Boxee Box, t molt en compte les possibilitats de qualsevol comandament a distncia i sadapta de manera natural a les accions que lusuari porta a terme. Respecte a les limitacions, sha millorat lexperincia dusuari afegint la comunicaci amb el reproductor mitjanant ones radioelctriques que no requereixen que el comandament apunti en lnia recta al reproductor per a transmetre informaci.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 8/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

C MERA C ANON EOS 600D + M AGIC L ANTERN

La Canon EOS 600D s una cmera rflex dentrada, la qual cosa significa que disposa dalgunes de les funcions de les cmeres professionals a un preu molt ms redut. s una cmera molt verstil, que permet fer fotos i gravar vdeo. A travs del programari Magic Lantern, les possibilitats de la cmera es multipliquen i aquesta s capa de realitzar les mateixes funcions que una cmera molt superior, alhora que introdueix millores que no poden fer altres cmeres.

A RQUITECTURA

DE LA INFORMACI

El Magic Lantern s un programari desenvolupat per un grup daficionats a la fotografia que res tenen a veure amb Canon, per tant, la seva feina darquitectura de la informaci ha estat molt complexa en no tenir lopci dafegir ni modificar els controls fsics de la cmera. La majoria dels botons presents a la cmera han modificat el seu comportament per a poder afegir funcionalitats noves a la cmera a canvi de sacrificar la usabilitat i la navegaci entre aquestes noves funcions. Programari original Magic Lantern

C OMPORTAMENT

DELS ELEMENTS D INTERACCI

Duna banda, de la mateixa manera que lusuari interactua amb el programari oficial de la cmera, Magic Lantern mant un comportament similar per a les seves funcions bsiques. Daltra banda, aquest programari permet realitzar tantes funcions noves, que implica haver dafegir ms controls. Com que no es poden afegir nous botons ni rodetes a la cmera, sha hagut de modificar el comportament dalguns botons, els quals passen a tenir dues o ms funcions noves depenent del mode en el que lusuari es trobi. Aix ha repercutit en una corba daprenentatge molt ms lenta que la del programari oficial, que obliga a fer servir lajuda per aprendre ls dalgunes funcionalitats.

A JUST

AL PERFIL D USUARI

Lusuari que decideix installar el programari Magic Lantern a la seva cmera s un usuari avanat que ja ha exprimit totes les possibilitats del programari oficial i que necessita ms control sobre la seva cmera. Per aix s capa de sacrificar experincia dusuari si a canvi obt funcionalitats extra.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 9/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

DE RECURSOS GRFICS

Magic Lantern disposa de vries combinacions de colors que intenten adaptar-se a les necessitats de cada usuari i situaci. De tota manera, el disseny visual, la composici i el tractament esttic sallunyen molt de ser transparents i lusuari s conscient en tot moment que est fent servir una interfcie dusuari. Aquesta interfcie dusuari sacosta ms a les antigues formes de comunicaci entre la persona i la mquina, que a les actuals interfcies que aconsegueixen fer oblidar aquelles arcaiques i complexes maneres dinteracci.

C ONVENCIONS

CULTURALS

Les cmeres fotogrfiques basen el seu funcionament en una srie de parmetres que gaireb no han canviat des de la invenci de la fotografia al segle XIX. Cada fabricant decideix com disposar aquests parmetres a les seves cmeres, la qual cosa requereix dun perode dadaptaci per part de lusuari. Magic Lantern no s diferent de la resta i tamb requereix que lusuari es familiaritzi amb les seves funcions abans de poder-les aplicar correctament. De tota manera, la seva forma ds s la mateixa que la majoria de cmeres rflex, ja que fa s dels botons fsics de la cmera per a interactuar-hi.

R ELACI

AMB LES CARACTERSTIQUES PRPIES DEL DISPOSITIU

Com comento anteriorment, aquest programari ha estat desenvolupat per un grup daficionats a la fotografia que volien millorar el que Canon proveeix de fbrica. Per aix, no hi ha hagut lopci de modificar, afegir o canviar botons ni afegir rodetes que portin a terme les noves funcions. Aix doncs, la tasca dadaptar aquest nou programari a les caracterstiques i limitacions fsiques de la cmera ha estat tot un repte i, tot i que se nhan sortit prou b, hi ha moltes funcions que resulten una mica complicades dutilitzar per culpa de les limitacions fsiques prpies de la cmera.

C ONTRIBUCI

A LA USABILITAT

Cal dir que no tot sn males notcies respecte el Magic Lantern. A part de sacrificar disseny, navegaci i experincia dusuari, hem de recordar que aquest programari pretn satisfer els usuaris avanats que volen treure el mxim profit a la seva cmera. Una de les seves funcions ms tils sn les zebres, les quals permeten veure dun cop dull les parts sobre exposades i les sota exposades.

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 10/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

C ONCLUSI
En resum, laplicaci per a mbils SkyDrive i el reproductor multimdia Boxee Box tenen unes interfcies que afavoreixen la sensaci de transparncia i el seu s resulta natural i intutiu. En canvi, laplicaci Travel Cards i la cmera Canon 600D amb el Magic Lantern causen una experincia dusuari ms complicada en la interacci. Aix no vol dir que les interfcies poc transparents no compleixin amb les seves tasques, sin que lusuari s conscient en tot moment que hi ha un pas intermedi per a complir aquestes tasques. Un exemple daix s ls del ratol per a moure el cursor per la pantalla, que no significa que per haver de fer servir un dispositiu extern, lexperincia final ser pitjor, ja que avui dia tothom entn el funcionament del ratol i el considera una extensi natural de la seva m per a comunicar-se amb els ordinadors. Aix doncs, desprs danalitzar les quatre interfcies anteriors, que sn extrapolables a tot tipus dinterfcies, puc afirmar de la mateixa manera que Carlos Alberto Scolari 1 que una interfcie no ha de ser sempre transparent per a donar bons resultats. El que s ha de complir cada interfcie, ja sigui digital o analgica, s adaptar-se a lusuari que la far servir i a les seves necessitats.

El ideolgico retorno de las interfases transparentes: http://hipermediaciones.com/2009/11/23/el-ideologico-retorno-de-lasinterfaces-transparentes/

1

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 11/12

Disseny dinterfcies multimdia PAC 1: La no transparncia de les interfcies

B IBLIOGRAFIA I ALTRES RECURSOS

Tona Monjo Palau. Disseny dinterfcies multimdia. Barcelona. Fundaci per a la Universitat Oberta de Catalunya, 2011. Wiki de lassignatura. [en lnia]. Disponible a Internet noms a travs del campus virtual. Hipermediaciones. [en lnia]. Carlos Alberto Scolari. Disponible a Internet a http://hipermediaciones.com/2009/11/23/el-ideologico-retorno-delas-interfaces-transparentes/ [Consulta: octubre 2012] Wikipedia. Arquitectura de la informacin [en lnia]. 26 de setembre de 2012. Disponible a Internet a http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n [Consulta: octubre 2012] Ted. Technolog, Entertainment, design. John Underkoffler: Pointing to the future of UI [en lnia]. John Underkoffler, febrer de 2010. Disponible a Internet a http://www.ted.com/talks/lang/en/john_underkoffler_drive_3d_data_w ith_a_gesture.html [Consulta: octubre 2012] Les imatges presents en aquest document sn de domini pblic, de producci prpia o semparen a ls raonable (fair use).

Jordi Llonch Esteve

CC BY-NC-SA

Pg. 12/12