[Disseny d'interfícies multimèdia] PAC 1: La no transparència de les interfícies

DISSENY D’INTERFÍCIES MULTIMÈDIA

L A NO TRANSPARÈNCIA DE LES INTERFÍCIES PAC 1

JORDI LLONCH ESTEVE CC BY-NC-SA

Disseny d’interfícies multimèdia PAC 1: La no transparència de les interfícies

Í NDEX Índex ................................................................................................................................. 2 Aplicació mòbil SkyDrive ............................................................................................ 3 Arquitectura de la informació ............................................................................... 3 Comportament dels elements d’interacció .......................................................... 3 Ajust al perfil d’usuari ............................................................................................ 3 Ús de recursos gràfics ............................................................................................ 4 Convencions culturals ............................................................................................ 4 Relació amb les característiques pròpies del dispositiu ...................................... 4 Contribució a la usabilitat ...................................................................................... 4 Aplicació mòbil TravelCards ...................................................................................... 5 Arquitectura de la informació ............................................................................... 5 Comportament dels elements d’interacció .......................................................... 5 Ajust al perfil d’usuari ............................................................................................ 5 Ús de recursos gràfics ............................................................................................ 6 Convencions culturals ............................................................................................ 6 Relació amb les característiques pròpies del dispositiu ...................................... 6 Reproductor multimèdia Boxee Box ....................................................................... 7 Arquitectura de la informació ............................................................................... 7 Comportament dels elements d’interacció .......................................................... 7 Ajust al perfil d’usuari ............................................................................................ 8 Ús de recursos gràfics ............................................................................................ 8 Convencions culturals ............................................................................................ 8 Relació amb les característiques pròpies del dispositiu ...................................... 8 Càmera Canon eos 600D + Magic Lantern ............................................................ 9 Arquitectura de la informació ............................................................................... 9 Comportament dels elements d’interacció .......................................................... 9 Ajust al perfil d’usuari ............................................................................................ 9 Ús de recursos gràfics .......................................................................................... 10 Convencions culturals .......................................................................................... 10 Relació amb les característiques pròpies del dispositiu .................................... 10 Contribució a la usabilitat .................................................................................... 10 Conclusió ....................................................................................................................... 11 Bibliografia i altres recursos ..................................................................................... 12

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 2/12


A PLICACIÓ MÒBIL S KY D RIVE L’aplicació per a dispositius mòbils SkyDrive és un gestor d’arxius que permet accedir, compartir i editar els documents disponibles a l’espai d’emmagatzematge virtual de Microsoft, Skydrive.

A RQUITECTURA

DE LA INFORMACIÓ

L’organització i el disseny estructural de l’aplicació denoten que hi ha hagut un estudi previ de les necessitats a cobrir i un procés d’anàlisi minuciós per a desenvolupar l’aplicació, els quals han resultat en una correcta aplicació de l’arquitectura de la informació. La presentació de la informació es porta a terme fent ús de la interfície d’usuari Metro, heretada del sistema operatiu Windows 8, que manté una coherència visual amb aquest i esdevé una forma d’interactuar molt neta i transparent per a l’usuari novell, alhora que satisfà totes les necessitats de l’usuari expert.

C OMPORTAMENT

DELS ELEMENTS D ’ INTERACCIÓ

L’usuari interactua amb una sèrie d’elements de l’aplicació 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 l’usuari premi els botons disponibles per a dur a terme cada tasca. La zona central també requereix que l’usuari premi els botons per a dur a terme les tasques primàries, però a més, introdueix un comportament secundari als elements al qual s’hi accedeix prement-los durant un segon.

A JUST

AL PERFIL D ’ USUARI

El perfil d’usuari que fa servir aquesta aplicació és aquell que utilitza altres productes i serveis de Microsoft, com ara la versió web d’SkyDrive, la sèrie d’aplicacions ofimàtiques MS Office, el correu web Outlook i el sistema operatiu Windows 8. Totes elles mantenen una mateixa interfície d’usuari, la qual cosa permet que l’usuari no hagi d’adaptar-se a cada aplicació, sinó que considera cadascuna d’elles com una extensió de les altres ja conegudes. Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 3/12


ÚS

DE RECURSOS GRÀFICS

Com comento anteriorment, la línia visual de l’aplicació segueix l’estètica Metro, una interfície d’usuari neta i simple que fa ús d’uns recursos gràfics molt minimalistes. Cada tipus d’element disposa de la seva representació gràfica que el diferencia de la resta. A més, l’aplicació mostra miniatures de les imatges per a fer més fàcil la navegació entre fotografies.

C ONVENCIONS

CULTURALS

L’aplicació basa el seu funcionament en els costums adaptats dels ordinadors de sobretaula, els quals es van adaptar prèviament de la vida real. Un gestor d’arxius és la representació virtual d’un espai físic amb carpetes que contenen diferents tipus de documents al seu interior, una metàfora que avui dia tots els gestors d’arxius han adoptat.

R ELACIÓ

AMB LES CARACTERÍSTIQUES PRÒPIES DEL DISPOSITIU

Després de provar diferents gestors d’arxius per a dispositius mòbils tàctils he quedat altament satisfet amb la naturalesa i transparència que atorga l’SkyDrive. Aquesta aplicació té en compte les possibilitats i limitacions del dispositiu i les adapta per a oferir una experiència d’usuari optimitzada per a dispositius mòbils. Hi ha altres aplicacions que permeten fer moltes més accions i disposen de més opcions, però a canvi de poder fer aquestes operacions, sacrifiquen les possibilitats del dispositiu dotant-lo de característiques no pròpies d’aquest. En aquest cas, l’SkyDrive per a dispositius tàctils només fa ús de dos tipus d’interacció entre l’usuari i la màquina: prémer i prémer llarg, que podrien ser considerats els clic esquerra i clic dret en un ordinador tradicional.

C ONTRIBUCIÓ

A LA USABILITAT

Més que aconseguir que la interfície sigui més fàcil d’usar que altres, SkyDrive per a dispositius mòbils ha sabut adaptar als dispositius tàctils una aplicació anteriorment disponible en ordinadors de sobretaula i integrar una mateixa interfície d’usuari d’una manera tan transparent que fa que l’experiència d’usuari sigui altament satisfactòria.

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 4/12


A PLICACIÓ MÒBIL T RAVEL C ARDS L’aplicació per a dispositius mòbils TravelCards és un traductor multilingüe per a viatgers que utilitza representacions pictòriques de les paraules més emprades durant les vacances.

A RQUITECTURA

DE LA INFORMACIÓ

Com a desenvolupador de l’aplicació puc afirmar que el procés que vaig seguir per a dissenyar-la va seguir tots els passos requerits a l’hora de desenvolupar una aplicació. Vaig estudiar i aplicar de manera detallada el disseny, l’organització i la navegació per a aconseguir una experiència d’usuari òptima. L’ús d’aquesta és tan senzill que qualsevol nen que encara no hagi après a parlar és capaç de fer-la servir. Per extensió, qualsevol persona adulta sense experiència en el camp de les noves tecnologies, pot familiaritzar-se amb el seu ús i fer-la servir sense necessitar ajuda externa.

C OMPORTAMENT


Els elements d’interacció de l’aplicació compleixen amb escreix cadascuna de les seves funcions, però tenen un comportament massa estàtic. La interacció entre l’usuari i l’aplicació es porta a terme prement cadascun dels botons de la pantalla inicial per a accedir a cada categoria i a les representacions pictòriques. Inici

Categoria

Representació pictòrica

De tota manera, manquen transicions en canviar d’una secció a una altra, retroalimentació per part del dispositiu (com ara vibracions o sons) en la majoria d’elements d’interacció.

A JUST


L’aplicació està pensada per a viatgers de qualsevol edat i nacionalitat posseïdors d’un dispositiu mòbil tàctil (inicialment només Android). Aquests usuaris poden ser viatgers freqüents o esporàdics, però que comparteixen la mateixa necessitat de comunicar-se amb persones que no parlen el seu idioma allà on viatgen. A més a més, és possible que aquests no disposaran de connexió a Internet mòbil arreu del món, així que l’aplicació funciona de manera completament fora de línia i només requereix que el dispositiu estigui carregat. Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 5/12


ÚS


Tot i que l’aplicació és molt fàcil d’utilitzar i resulta completament transparent per a qualsevol usuari, l’estètica i el tractament de l’estil gràfic de l’aplicació s’ha quedat a mig camí entre mantenir una composició minimalista i l’ús d’un 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 d’ells, 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 país d’origen, la cultura a la qual es pertanyi o l’idioma 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. L’aplicació TravelCards fa ús d’aquesta convenció cultural, que es entesa i compartida per a qualsevol persona del planeta.

R ELACIÓ


Les persones ens podem comunicar amb els dispositius mòbils fent servir una sèrie de gestos que ja es consideren naturals, però l’aplicació TravelCards no té en compte aquestes possibilitats. L’única característica que aplica és la de prémer per a accedir a cada opció de l’aplicació. En cada categoria, seria necessari afegir l’opció de desplaçar-se entre categories movent el dit en l’eix horitzontal, alhora que el carrusel de botons superior es desplaça i canvia de mida al mateix temps, generant una sensació de fluïdesa i coherència amb l’acció. Dins de cada representació pictòrica s’hauria d’afegir l’opció de magnificar i reduir cada imatge amb l’ús dels dits polze i índex per a permetre augmentar la mida de les imatges amb més detalls. Per a les d’accions que resulten de prémer els botons, el dispositiu hauria de donar una resposta sonora i/o hàptica per a que l’usuari se n’adonés que la seva acció s’ha dut a terme correctament.

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 6/12


R EPRODUCTOR MULTIMÈDIA B OXEE B OX El Boxee Box és un reproductor multimèdia de saló que, a part de reproduir tot tipus de contingut audiovisual digital de qualsevol dispositiu d’emmagatzematge (disc dur, USB o SD), escaneja la xarxa domèstica i Internet per a trobar vídeos de programes de televisió i pel·lícules disponibles gratuïtament. A més, permet accedir a plataformes de distribució de pel·lícules sota demanda (Netflix, Vudu i Mubi) i disposa de multitud d’aplicacions dels serveis més populars d’Internet, com ara Youtube, Vimeo, Pandora, Flickr, etc. A part d’aquestes funcions, també disposa de la secció “Veure després”, que permet afegir qualsevol vídeo des del navegador web o el propi dispositiu a una llista per a ser visualitzat després en la comoditat del televisor. Al mateix temps permet compartir el contingut que t’ha agradat més mitjançant Facebook i Twitter amb els teus amics i seguidors.

A RQUITECTURA

DE LA INFORMACIÓ

El Boxee Box inclou tres elements que fan ús de l’arquitectura de la informació: el reproductor multimèdia, el comandament a distància i la interfície d’usuari. Reproductor

Comandament

Interfície d’usuari

La integració gairebé perfecte d’aquests elements denota que hi ha hagut un procés elaborat d’anàlisi de les necessitats que es pretenien satisfer que ha resultat en un disseny atractiu i diferent d’altres dispositius similars, alhora que disposa d’un disseny funcional que dóna resposta a unes necessitats no cobertes fins el moment i que ha aconseguit una organització i una navegació transparent i senzilla d’aprendre a utilitzar.

C OMPORTAMENT


El reproductor només 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 més, la dualitat o “trialitat” comandament-teclat-ratolí permet desplaçar-se entre els elements i menús del dispositiu, fer cerques alfanumèriques a la biblioteca i navegar per la Web com si es tractés d’un ordinador tradicional. Pel que fa al comandament, es troba a faltar la retroil·luminació de les tecles i una petita pantalla que mostri les lletres escrites, com tenen altres dispositius similars. Pel que fa a la interfície d’usuari, encara no està acabada al 100% i algunes vegades no es comporta de manera prou fluïda o s’atura completament i requereix un reinici del dispositiu.

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 7/12


A JUST


El Boxee Box és un reproductor multimèdia posat a la venda per primer cop al mercat a finals de 2010, quan encara no s’havien popularitzat les televisions intel·ligents (o smart TV en anglès). En aquell moment el mercat estava saturat de reproductors multimèdia de tot tipus, però sobretot, que oferien una mala experiència d’usuari. Boxee Box va néixer 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.

ÚS


La composició i el tractament estètic presents al Boxee Box són uns dels aspectes més elaborats del producte i fan que aquest es pugui considerar un producte de disseny. En contrast amb altres reproductors multimèdia, l’enorme esforç que els dissenyadors i desenvolupadors del Boxee Box han aplicat per a aconseguir aquesta estètica fa que l’usuari no hi presti atenció i que ho consideri una extensió natural de la seva televisió.

C ONVENCIONS

CULTURALS

Les televisions existeixen des de fa més de 100 anys i el comandament a distància va ser un dels grans avenços que aquestes van sofrir (a part de l’arribada del color). Des de llavors, no es van produir canvis substancials. Més endavant, amb l’arribada d’Internet els usuaris es van familiaritzar amb el teclat i el ratolí. I és en aquest moment quan l’equip de Boxee es decideix a integrar un teclat, un comandament i un ratolí en un sol dispositiu que permet interactuar amb el centre d’entreteniment 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 ràpida 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Ó


El comandament, l’eina amb la qual l’usuari interactua amb el Boxee Box, té molt en compte les possibilitats de qualsevol comandament a distància i s’adapta de manera natural a les accions que l’usuari porta a terme. Respecte a les limitacions, s’ha millorat l’experiència d’usuari afegint la comunicació amb el reproductor mitjançant ones radioelèctriques que no requereixen que el comandament apunti en línia recta al reproductor per a transmetre informació.

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 8/12


C ÀMERA C ANON EOS 600D + M AGIC L ANTERN La Canon EOS 600D és una càmera rèflex d’entrada, la qual cosa significa que disposa d’algunes de les funcions de les càmeres professionals a un preu molt més reduït. És una càmera molt versàtil, que permet fer fotos i gravar vídeo. A través del programari Magic Lantern, les possibilitats de la càmera es multipliquen i aquesta és capaç de realitzar les mateixes funcions que una càmera molt superior, alhora que introdueix millores que no poden fer altres càmeres.

A RQUITECTURA

DE LA INFORMACIÓ

El Magic Lantern és un programari desenvolupat per un grup d’aficionats a la fotografia que res tenen a veure amb Canon, per tant, la seva feina d’arquitectura de la informació ha estat molt complexa en no tenir l’opció d’afegir ni modificar els controls físics de la càmera. La majoria dels botons presents a la càmera han modificat el seu comportament per a poder afegir funcionalitats noves a la càmera a canvi de sacrificar la usabilitat i la navegació entre aquestes noves funcions. Programari original

C OMPORTAMENT

Magic Lantern


D’una banda, de la mateixa manera que l’usuari interactua amb el programari oficial de la càmera, Magic Lantern manté un comportament similar per a les seves funcions bàsiques. D’altra banda, aquest programari permet realitzar tantes funcions noves, que implica haver d’afegir més controls. Com que no es poden afegir nous botons ni rodetes a la càmera, s’ha hagut de modificar el comportament d’alguns botons, els quals passen a tenir dues o més funcions noves depenent del mode en el que l’usuari es trobi. Això ha repercutit en una corba d’aprenentatge molt més lenta que la del programari oficial, que obliga a fer servir l’ajuda per aprendre l’ús d’algunes funcionalitats.

A JUST


L’usuari que decideix instal·lar el programari Magic Lantern a la seva càmera és un usuari avançat que ja ha exprimit totes les possibilitats del programari oficial i que necessita més control sobre la seva càmera. Per això és capaç de sacrificar experiència d’usuari si a canvi obté funcionalitats extra.

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 9/12


ÚS


Magic Lantern disposa de vàries 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 estètic s’allunyen molt de ser transparents i l’usuari és conscient en tot moment que està fent servir una interfície d’usuari. Aquesta interfície d’usuari s’acosta més a les antigues formes de comunicació entre la persona i la màquina, que a les actuals interfícies que aconsegueixen fer oblidar aquelles arcaiques i complexes maneres d’interacció.

C ONVENCIONS

CULTURALS

Les càmeres fotogràfiques basen el seu funcionament en una sèrie de paràmetres que gairebé no han canviat des de la invenció de la fotografia al segle XIX. Cada fabricant decideix com disposar aquests paràmetres a les seves càmeres, la qual cosa requereix d’un període d’adaptació per part de l’usuari. Magic Lantern no és diferent de la resta i també requereix que l’usuari es familiaritzi amb les seves funcions abans de poder-les aplicar correctament. De tota manera, la seva forma d’ús és la mateixa que la majoria de càmeres rèflex, ja que fa ús dels botons físics de la càmera per a interactuar-hi.

R ELACIÓ


Com comento anteriorment, aquest programari ha estat desenvolupat per un grup d’aficionats a la fotografia que volien millorar el que Canon proveeix de fàbrica. Per això, no hi ha hagut l’opció de modificar, afegir o canviar botons ni afegir rodetes que portin a terme les noves funcions. Així doncs, la tasca d’adaptar aquest nou programari a les característiques i limitacions físiques de la càmera ha estat tot un repte i, tot i que se n’han sortit prou bé, hi ha moltes funcions que resulten una mica complicades d’utilitzar per culpa de les limitacions físiques pròpies de la càmera.

C ONTRIBUCIÓ

A LA USABILITAT

Cal dir que no tot són males notícies respecte el Magic Lantern. A part de sacrificar disseny, navegació i experiència d’usuari, hem de recordar que aquest programari pretén satisfer els usuaris avançats que volen treure el màxim profit a la seva càmera. Una de les seves funcions més útils són les zebres, les quals permeten veure d’un cop d’ull les parts sobre exposades i les sota exposades.

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 10/12


C ONCLUSIÓ En resum, l’aplicació per a mòbils SkyDrive i el reproductor multimèdia Boxee Box tenen unes interfícies que afavoreixen la sensació de transparència i el seu ús resulta natural i intuïtiu. En canvi, l’aplicació Travel Cards i la càmera Canon 600D amb el Magic Lantern causen una experiència d’usuari més complicada en la interacció. Això no vol dir que les interfícies poc transparents no compleixin amb les seves tasques, sinó que l’usuari és conscient en tot moment que hi ha un pas intermedi per a complir aquestes tasques. Un exemple d’això és l’ús del ratolí per a moure el cursor per la pantalla, que no significa que per haver de fer servir un dispositiu extern, l’experiència final serà pitjor, ja que avui dia tothom entén el funcionament del ratolí i el considera una extensió natural de la seva mà per a comunicar-se amb els ordinadors. Així doncs, després d’analitzar les quatre interfícies anteriors, que són extrapolables a tot tipus d’interfícies, puc afirmar de la mateixa manera que Carlos Alberto Scolari 1 que una interfície no ha de ser sempre transparent per a donar bons resultats. El que sí ha de complir cada interfície, ja sigui digital o analògica, és adaptar-se a l’usuari que la farà servir i a les seves necessitats.

El ideológico 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

Pàg. 11/12


B IBLIOGRAFIA I ALTRES RECURSOS Tona Monjo Palau. Disseny d’interfícies multimèdia. Barcelona. Fundació per a la Universitat Oberta de Catalunya, 2011. Wiki de l’assignatura. [en línia]. Disponible a Internet només a través del campus virtual. Hipermediaciones. [en línia]. 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 información [en línia]. 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 línia]. 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 són de domini públic, de producció pròpia o s’emparen a l’ús raonable (fair use).

Jordi Llonch Esteve

CC BY-NC-SA

Pàg. 12/12

[Disseny d'interfícies multimèdia] PAC 1: La no transparència de les interfícies

Recommend Documents