Disseny d'interacció per a dispositius mòbils by Paquita Ribas

PAQUITA RIBAS TUR Disseny d’Interfícies Multimèdia - PAC 2 - 2012

: 9 09 1

s l Viru a i r o Edit

arr stta viis ov M Mo

Goo

gle

O LOG

oria

Edit

leg

Catà

ats

et Nov

tes

Ofer

Soc

nda

Age

DISSENY D’INTERACCIÓ PER A DISPOSITIUS MÒBILS 1

Arbre de contingut

Wireframes

Informe

Bibliografia

LLEGENDA

INICI [1]

EDITORIAL [1.1]

CONTACTA

[1.1.1]

IDIOMA

[1B] 1

TRUCAN’S [1.1.2]

Entrada al lloc

Envia

Pàgina

Truca

Grup de pàgines

Document

Grup de contingut

Pàgina externa

Número 1 (marca) 1

Va a número 1

DISTRIBUÏDORES [1.1.3]

CATÀLEG [1.2]

BUSCAR

LLIBRES + VENUTS

+ VENUTS 4

FITXA LLIBRE [1.2.1]

NOVETATS [1.3] 2

€ BUSCAR

BUSCAR

LLIBRES FITXA AUTOR

NOVETATS

[1.2.1.1]

BIBLIOGRAFÍA

OFERTES [1.4] 3

[1.2.1.1.1]

BUSCAR

LLIBRES

OFERTES

SOCIS

[1.5]

SOCIS

[1.5.1]

FES-TE SOCI [1.5.2]

AVANTATGES [1.5.3]

AGENDA

NOTÍCIES

[1.6]

VERSIÓ CLÀSSICA

CANVI D’IDIOMA 1

PRIVACITAT

LEGAL

AJUDA

CONTACTA 6

LLIBRES

Pàgina d’idioma WIREFRAME 1

Zona visible de pantalla

WIREFRAME 1B

09:19

Movistar

Editorial Virus

Google

Títol de pàgina

Editorial Virus: Idioma

Google

Logo de l’empresa

LOGO

Carret de la compra

Consultar carret

“Novetats” i “Ofertes” són accessos directes a un submenú de “Catàleg”

09:19

Movistar

LOGO

Logo de l’empresa

Menú general. S’economitza en paraules. Més directe i fàcil de llegir

Nom de l’empresa. Títol de pàgina

Tornar a la pàgina on es trobava l’usuari abans d’accedir a “Canviar Idioma”

tornar

Editorial

Castellano

Catàleg

Català

Novetats

English

Ofertes

Italian Versió mòbil | Versió clàssica

Socis

Privacitat | Legal | Ajuda | Contacta

Agenda

En aquesta pantalla “Canviar Idioma” desapareix del peu.

Versió mòbil | Versió clàssica

Zona visible amb l’scroll

Pàgina “Agenda” WIREFRAME 1.6

Pàgina “Socis”

09:22

Movistar

Editorial Virus: Agenda

Títol de pàgina

Google

WIREFRAME 1.5

09:19

Movistar

Editorial Virus: Socis

Títol de pàgina

Google

Accés a pàgina d’inici i carret de la compra

Més

Identifica’t

Novetats Abril 2012 Salutacions des d e Virus. U s feim arribar els últims títols rebuts durant les últimes setmanes. Destaquem una nova editorial...

E-mail

Accés del client com e-mail i contrasenya Si no és client pot fer-se soci i llegir els avantatges.

Contrasenya

Més

No ets soci d’Editorial Virus?

Avantatges

Fes-te soci

Editorial El menú principal s’ubica al final de la pàgina, abans del peu

Agenda La Convivencialitat Para Javier Rodríguez Hidalgo «La convivencialidad e s la mejor manera, no sólo de acercarse a la obra de Illich, sino también a la crítica antiindustrial»

Els fraus de la crisi a Barcelona Pissarello fa un recorregut de l'obra de l'Observatorio Metropolitano i l a seva relació amb l'evolució del context polític, econòmic i social...

Accés a pàgina d’inici i carret de la compra.

S’han eliminat les imatges per a facilitat la descàrrega ràpida. Els títols són més curts i més directes. Es pot llegir part del primer paràgraf de la notícia.

Més

No a la presó preventiva dels estudiants El passat dijous 29 de març, durant les accions organitzades pels piquets de la vaga general a Zona Universitària, els Mossos d’Esquadra van detenir...

Catàleg Novetats

Més

Trobada del llibre anarquista La trobada es realitzarà el divendres 9, dissabte 10 i diumenge 11 de març, en el CSO K ike Mur, de Zaragoza, a la plaça de la Memòria... Més

Posterior

Editorial

Aquests enllaços permeten a l’usuari desplaçar-se per les notícies

Catàleg Novetats Ofertes Socis Versió mòbil | Versió clàssica Canviar Idioma

El menú i el peu s’ubiquen a final de la pàgina. En aquest cas el menú omet l’enllaç de ”Agenda” per considerar-lo innecessari.

Pàgina “Editorial”

Pàgina “Distribuïdores”

WIREFRAME 1.1

WIREFRAME 1.1.3

09:20

Movistar

Editorial Virus: Editorial

Google

Accés a pàgina d’inici i carret de la compra El text de presentació de la empresa figura comprimit. L’usuari té l’opció de llegir-lo (Wireframe 1.1B) o no.

09:22

Movistar

Editorial Virus: Editorial

Títol de pàgina

Google

Editorial Virus va néixer en 1991, empès per la lluita a favor del coneixement lliure i de la difusió oberta de continguts a través de la xarxa...

Distribuïdores Distribuidora 1 Nom fiscal Direcció, telèfon

Distribuidora 2

Més

Nom fiscal Direcció, telèfon

Contacta

Distribuidora 3 Nom fiscal Direcció, telèfon

Truca’ns

Distribuidora 4

Distribuïdores

Nom fiscal Direcció, telèfon

Distribuidora 5

Catàleg

Nom fiscal Direcció, telèfon

Novetats

Distribuidora 6 Nom fiscal Direcció, telèfon

Ofertes

Distribuidora 7 Nom fiscal Direcció, telèfon

Socis

Distribuidora 8

Agenda

Nom fiscal Direcció, telèfon

WIREFRAME 1.1B

Distribuidora 9

Versió mòbil | Versió clàssica Canviar Idioma

09:21

Movistar

Editorial Virus: Editorial

Privacitat | Legal | Ajuda | Contacta

Google

Nom fiscal Direcció, telèfon

Distribuidora 10 Nom fiscal Direcció, telèfon

Contacta Editorial Virus va néixer en 1991, empès per la lluita a favor del coneixement lliure i de la difusió oberta de continguts a través de la xarxa. Concebem el llibre com a una eina que no té sentit s i no é s per a pensar l a realitat de manera radicalment crítica. Virus ha considerat les llibreries especialitzades i els llibres com a l’únic espai e n el que, t ant e l llibre com e l lector, reben el respecte que mereixen. Hem apostat per u n model diferent, tant e n el que t oca als d rets d ’autor com al respecte al coneixement lliure. Procurem mantenir un tracte igualitari a tos aquells que amb e ls seu esforç intel·lectual contribueixen a donar vida a aquest projecte. Envia un correu electrònic.

Contacta

Truca a l’empresa per telèfon

Truca’ns Distribuïdores Catàleg

El menú i el peu s’ubiquen a final de la pàgina. En aquest cas el menú omet l’enllaç de “Editorial” per considerar-lo innecessari.

El títol de pàgina indica a que menú pertany el submenú “Distribuïdores”.

Pàgina “Catàleg” WIREFRAME 1.2

09:25

Movistar

Editorial Virus: Catàleg

Títol de pàgina

Google

Accés a pàgina d’inici i carret de la compra. Cercador per a buscar obres.

Buscar en Editorial Virus

Novetats

+ venuts

Ofertes

WIREFRAME 1.3

Títol del llibre

La pàgina principal de catàleg, accedeix directament a la llista de més venuts.

Pàgina “Novetats”

Autor EUROS 0,00 Breu descripció...

09:25

Movistar

Editorial Virus: Catàleg

Títol del llibre Autor EUROS 0,00 Breu descripció...

Les obres s’organitzen segons la puntuació dels clients. Si es selecciona una obra, s’accedeix directament a la fitxa del llibre

Google Buscar en Editorial Virus

Títol del llibre Autor EUROS 0,00 Breu descripció...

+ venuts

Autor EUROS 0,00 Breu descripció...

Es pot navegar per les obres o accedir a la llista de tots els llibres. El menú i el peu s’ubiquen a final de la pàgina. En aquest cas el menú omet l’enllaç de “Catàleg” per considerar-lo innecessari.

Tots els llibres

+ venuts

Les obres s’organitzen per data de publicació, les més noves al principi. Si se selecciona una, s’accedeix directament a la fitxa del llibre

Títol del llibre

Títol del llibre Autor EUROS 0,00 Breu descripció...

Títol del llibre

Autor EUROS 0,00 Breu descripció...

Títol del llibre

Autor EUROS 0,00 Breu descripció...

Novetats Ofertes Socis

Tots els llibres

Les obres s’organitzen per preu, les més econòmiques al principi. Si se selecciona una, s’accedeix directament a la fitxa del llibre

Autor EUROS 0,00 Breu descripció...

Agenda

Accés a la fitxa del llibre.

Autor EUROS 0,00 Breu descripció...

Editorial

Ofertes

Accés a pàgina d’inici i carret de la compra. Cercador per a buscar obres.

Autor EUROS 0,00 Breu descripció...

Posterior

Novetats

Títol del llibre

Autor EUROS 0,00 Breu descripció...

Títol del llibre

Buscar en Editorial Virus

Autor EUROS 0,00 Breu descripció...

Títol del llibre

Autor EUROS 0,00 Breu descripció...

Google

Autor EUROS 0,00 Breu descripció...

Títol de pàgina

Editorial Virus: Catàleg

Títol del llibre

09:25

Movistar

Autor EUROS 0,00 Breu descripció...

Pàgina “Ofertes” WIREFRAME 1.4

Títol del llibre

Ofertes

Títol del llibre

Autor EUROS 0,00 Breu descripció...

Novetats

Autor EUROS 0,00 Breu descripció....

Títol del llibre

Posterior

Editorial

Autor EUROS 0,00 Breu descripció...

Catàleg

Títol del llibre

Autor EUROS 0,00 Breu descripció....

Ofertes Socis

Títol del llibre Autor EUROS 0,00 Breu descripció...

Tots els llibres

Posterior

Fitxa llibre

Fitxa autor

WIREFRAME 1.2.1

WIREFRAME 1.2.1.1

09:25

Movistar

El títol de la pàgina ens indica que estem en la fitxa d’un llibre

Editorial Virus: Fitxa

Primeres frases de la sinopsi del llibre. Versió comprimida. Al pulsar “Més” es pot llegir el text complet.

09:25

Editorial Virus: Autor

Títol del llibre

Autor

Autor Gènere Idioma Pàgines ISBN

Miniatura de la portada, títol, autor, gènere, idioma, pàgines, ISBN i valoració dels clients. Opció de compra en diferents versions

Movistar

Nom i fotografia de l’autor

Versió digital

Compra

Versió digital

Compra

EUROS 0,00 EUROS 0,00

Primeres línies de la biografia de l’autor. al pulsar “Més” es pot llegir el text complet

L’anarquisme ha tingut poca presència en el ámbit acadèmic, a diferència del marxisme... Més

Més

Autor

Bibliografia

Valoracions socis Un gran llibre

Valoracions dels clients. Al seleccionar, es pot llegir el missatge.

Buscar en Editorial Virus

Sorprenent Curiós

Editorial

Molt útil Anteriors

Catàleg

Posteriors

Els clients que han comprat aquest llibre també han comprat

Novetats

Títol - Autor

Llista d’obres que han comprat altres clients. Si es selecciona, s’accedeix a la fitxa del llibre

Ofertes

Títol - Autor

Socis

Títol - Autor Títol - Autor

Agenda Buscar en Editorial Virus

Editorial

Cercador per a buscar obres.

Accés a la bibliografia de l’autor Cercador per a buscar obres.

Nous wireframes Aquests són els paràmetres que s’han tingut en compte per a crear els nous wireframes: La tipografia és de mida gran per a facilitar la lectura Els botons són amples per a facilitar la selecció S’han integrat les mínimes imatges. El logotip de l’empresa apareix només en la pàgina d’inici i en la pàgina de canvi d’idioma. En la resta només figura el nom de l’empresa en el títol de pàgina. S’han eliminat o modificat les grans quantitats de text. Quan el text ha estat imprescindible, s’ha reduït al màxim. S’ha integrat el bloc de menú en totes les pàgines, per poder accedir-hi fàcilment. En qualsevol moment l’usuari pot canviar l’idioma, canviar de versió d’interfície o contactar amb l’empresa, ja que aquestes opcions es troben al peu de totes les pàgines. Les pàgines tenen la mateixa construcció tant si es miren verticalment com de manera horitzontal, ja que el contingut s’adapta a l’espai.

arribar a aquestes zones des de “Catàleg”, aquests botons permeten accedir-hi directament des de la pantalla d’inici o des de qualsevol pantalla. La intenció és afavorir les vendes. Finalment, en quint lloc es troba el botó “Socis” i “Agenda” s’ha col•locat en últim lloc. La icona del carret de la compra és molt útil a la pàgina d’inici. Si l’usuari ja es soci, possiblement vulgui consultar directament, el seu carret de la compra. En el peu, situat en la zona que es visualitza amb l’scroll de pantalla, apareixen els següents enllaços: Canvi de versió mòbil / clàssica Accés al canvi d’idioma Documents de privacitat i legal “Ajuda”, situada abans en “Atenció al client”, ara es troba en el peu, accessible des de totes les pantalles. “Contacta”. Permet enviar un correu electrònic a l’empresa, de forma directa.

“Canviar Idioma” (Wireframe 1B)

Nou arbre de continguts L’arbre de contingut de la web clàssica és molt extens. Algunes de les pàgines tenen blocs de text molt grans i els menús consten massa submenús. La proposta web a l’iPhone és crear un arbre més ample i menys profund, eliminant alguns menús i recol•locant informació important dels menús eliminats a altres llocs. A continuació, es defineixen les característiques principals de l’arquitectura de la informació i del nou arbre de contingut, pantalla per pantalla.

La pàgina de canvi d’idioma és molt bàsica. Tant sols apareixen: el títol de pàgina (en la part superior de totes les pantalles, i indica a l’usuari on es troba), el logotip de l’empresa, els quatre botons que permeten a l’usuari canviar el idioma i el botó de “Tornar”, que porta el visitant a la pàgina on es trobava abans d’accedir a “Canviar d’idioma”. Les opcions del peu també figuren, però en aquest cas, sense l’enllaç “Canviar Idioma”.

“Editorial” (Wireframe 1.1)

Pàgina d’inici (Wireframe 1)

Des del menú d’inici ja es produeixen molts de canvis en comparació a la versió web clàssica. En primer lloc, s’han economitzat els noms dels menús, per a facilitar la ràpida lectura : “L’editorial” passa a ser “Editorial”, “Sala de premsa” passa a ser “Agenda”, “Atenció al client” queda com “Socis” i “Distribució” s’elimina del menú principal i passa a formar part d’un submenú de ”Editorial”. L’ordre de presentació dels botons també ha canviat. En el cas de la interfície per a mòbil, s’organitzen segons la seva importància. “Editorial” queda en primer lloc perquè

La pàgina “Editorial” equival a “L’editorial” de la versió clàssica, però no té res a veure. En el cas de la interfície per a mòbil només es fa una petita referència a l’empresa amb un curt text de presentació, que l’usuari pot o no llegir-lo. Per altra banda, es facilita el contacte amb dos botons: un que envia un correu electrònic a l’empresa i l’altra que la truca. Des de l’enllaç “Distribuïdores” (Wireframe 1.1.3) s’accedeix a la llista de distribuïdores amb les seves direccions completes i els seus telèfons. Des d’aquesta pantalla també es pot trucar o enviar un missatge de correu electrònic. La icona del carret de la compra, al igual que la que permet tornar a la pàgina d’inici, figuren en totes les pantalles.

representa la targeta de visita de l’empresa; en segon lloc s’ha respectat “Catàleg” i en tercer i quart lloc s’han introduït els botons nous de “Novetats” i “Ofertes”. Encara que es pot

“Catàleg”, “Novetats” i “Ofertes”. (Wireframe 1.2 / Wireframe 1.3 / Wireframe 1.4)

La pàgina “Catàleg” està més depurada que en la versió clàssica. Quan s’accedeix, el primer que es troba és la llista d’obres més venudes. També s’hi troben els botons de “Novetats” i “Ofertes”. Les tres pàgines són pràcticament iguals. Si no fos perquè en “Catàleg” els llibres s’ordenen segons la puntuació dels clients, en “Novetats” segons la data de publicació (els més nous en primer lloc) i en “Ofertes” s’organitzen per preu (els més econòmics en primer lloc). Les tres pàgines disposen d’un buscador per a cercar les

“Contactar amb virus” es traslladen al peu com “Ajuda” i “Contacta”, a més, “Zona de descàrregues” s’elimina. Si com a “descarregues” s’entén la compra virtual, aquesta funció ja es realitza des de la fitxa del llibre, per tant és innecessària en l’apartat de clients. Quan l’usuari accedeix a “Socis” es troba amb els camps d’introducció de correu i contrasenya. Com és possible que sigui la primera vegada que entra, té l’oportunitat de llegir els avantatges que li suposa ser client, o directament, fer-se client.

obres, les col•leccions o els autors; d’aquesta manera s’evita

Agenda

incloure els deu submenús de “Col·leccions” que té la pàgina

(Wireframe 1.6)

clàssica. Des d’un ordinador, tal vegada l’usuari gaudeix

Las pàgina “Agenda” equival a “Sala de Premsa” de la versió

navegant entre col·leccions, autors i llistes; però des d’un

clàssica, però en aquest cas, la versió mòbil no consta de

mòbil, l’usuari espera trobar el contingut amb immediatesa.

submenús. Consisteix en una llista de notícies, ordenades

Des de qualsevol de les tres pàgines, es pot accedir a la fitxa

cronològicament, on figura el títol de la notícia i part del

del llibre seleccionat per l’usuari o a la llista de tots els llibres.

primer paràgraf. Encara que les notícies són les mateixes que en el web, els títols són més curts (amb la intenció que

Fitxa d’un llibre (Wireframe 1.2.1)

Una vegada seleccionat una obra, s’accedeix a la seva fitxa. En ella figuren: Una miniatura de la portada, el títol, l’autor, el idioma, les pàgines, el número d’ISBN i un fragment de la sinopsi (ampliable amb el botó “més”). També disposa de l’opció de comprar en línia la versió digital de l’obra o la versió en paper. Si es navega amb l’scroll vertical, es troba “Autor” des d’on es pot accedir a la fitxa de l’autor. Més avall es poden llegir les valoracions o l’elecció d’altres clients. Aquesta pàgina també disposa d’un buscador per a cercar obres dintre del catàleg.

Fitxa de l’autor (Wireframe 1.2.1.1)

Des de la fitxa del llibre es pot accedir a la fitxa de l’autor del llibre. També s’hi accedeix desde el cercadors de les pàgines “Catàleg” o “Fitxa”. S’hi pot trobar el nom complet i una fotografia de l’autor, la seva biografia, un accés a la bibliografia, un cercador per a buscar obres.

“Socis” (Wireframe 1.5)

Si la comparem amb “Atenció al Client” de la versió clàssica, aquesta pàgina ha patit un gran canvi. El enllaç de “FAQ” i

ocupi una sola línia) i el missatge més directe,

Opinió personal Per a poder desenvolupar correctament aquest treball, he comparat com es veuen varies pàgines web des d’un iPhone i després com es veuen des d’un ordinador de sobretaula. He trobat l’experiència força interessant perquè no disposo d’iPhone. Ha estat la primera vegada que l’utilitzo. He descobert de manera pràctica, les “necessitats especials” que tenen aquest tipus de dispositius. Per a finalitzar, aquesta pac m’ha servit , especialment, per a complementar els coneixements que tinc d’arquitectura de la informació: una bona base per a dissenyar webs ben construïdes.

Bibliografia consultada Monjo Palau Tona (). Disseny centrat en l’usuari. Barcelona: UOC. Monjo Palau Tona (). Usabilitat. Barcelona. UOC. Wiki UOC (2012) Entorns [en línia]. http://cv.uoc.edu/webapps/classroom/081_common/jsp/eventFS.jsp?domainId=362178&domainTemplate=uoc_112_06.519&s=63f67c9981ea8b44cd637cd1abdc88c8c67b0d4786c6 511a6050aae4d85411bda3e70a21988bd4d70cb397474dbd2d21c4e0ad125e0aa771b18cc28cf502120d&idLa ng=a&eventsId=607099&opId=view&userTypeId=ESTUDIANT&canCreateEvent=false&ajax=true. [Març/2012] Wiki UOC (2012) Especificacions tècniques de disseny [en línia]. http://cv.uoc.edu/webapps/classroom/081_ common/jsp/eventFS.jsp?domainId=362178&domainTemplate=uoc_112_06.519&s=63f67c9981ea8b44cd637 cd1abdc88c8c67b0d4786c6511a6050aae4d85411bda3e70a21988bd4d70cb397474dbd2d21c4e0ad125e0aa 771b18cc28cf502120d&idLang=a&eventsId=607099&opId=view&userTypeId=ESTUDIANT&canCreateEvent=f alse&ajax=true. [Març/2012]

Recursos complementàris Sorey Garcia (2009) Consideraciones para el Desarrollo de Aplicaciones Móviles [En línia] http://www.slideshare. net/soreygarcia/consideraciones-basicas-para-el-desarrollode-aplicaciones-mviles [Abril/2012] Ringlein Martin (2010) Designing iPhone & iPad Apps [En línia] http://www.slideshare.net/mringlein/designingiphone-ipad-apps [Abril/2012] Create with Context (2008) How people really use the iPhone [En línia] http://www.slideshare.net/createwithcontext/how-people-really-use-the-iphonepresentation [Abril/2012] Stephen Anderson (2007) 7 User Experience Lessons from the iPhone [En línia] http://www.slideshare.net/ stephenpa/7-user-experience-lessons-from-the-iphoneintroducing-ux [Abril/2012] Android Design (2012) Android Design [En línia] http://developer.android.com/design/index.html [Abril/2012]

Recursos gràfics SpeckyBoy (2012) iPhone and iPad Development GUI Kits, Stencils and Icons [En línia] http://speckyboy. com/2010/04/30/iphone-and-ipad-development-gui-kits-stencils-and-icons/ [Abril/2012]

Paquita Ribas, 2012