Embed Size (px)
DESCRIPTION
Pac2 Disseny d'interfícies web
Citation preview
Disseny d'interacció per a dispositiu mòbil
Xavier de Sardi Garasa – Aula1
Disseny d'interfícies multimèdia – PAC2 10/04/2012
Índex
1. Arbre de continguts......................................................................................................... pàg.3
2. Wireframes per a l'aplicació
2.1. Wireframe pantalla catàleg........................................................................................... pàg.4
2.2. Wireframe pantalla sala de premsa.............................................................................. pàg.4
2.3. Wireframe pantalla best seller....................................................................................... pàg.5
2.4. Wireframe pantalla fitxa del llibre................................................................................. pàg.5
2.5. Wireframe pantalla cistella de compra......................................................................... pàg.6
2.6. Wireframe pantalla cercador........................................................................................ pàg.6
2.7. Wireframe pantalla atenció al client............................................................................. pàg.7
3. Informe ............................................................................................................................ pàg.8
4. Valoració.......................................................................................................................... pàg.10
5. Bibliografia....................................................................................................................... pàg.10
Disseny d'interfícies multimèdia – PAC2 10/04/2012
1. Arbre de continguts
3
Disseny d'interfícies multimèdia – PAC2 10/04/2012
2. Wireframes per a l'aplicació 2.1. Wireframe pantalla Catàleg 2.2. Wireframe pantalla Sala de premsa
4
Disseny d'interfícies multimèdia – PAC2 10/04/2012
2.3. Wireframe pantalla Best Seller 2.4. Wireframe pantalla Fitxa de llibre
5
Disseny d'interfícies multimèdia – PAC2 10/04/2012
2.5. Wireframe pantalla Cistella de compra 2.6. Wireframe pantalla Cercador
6
Disseny d'interfícies multimèdia – PAC2 10/04/2012
2.7. Wireframe pantalla Atenció al client
7
Disseny d'interfícies multimèdia – PAC2 10/04/2012
3. Informe
arbre de continguts
Sabem que per a traslladar els continguts d'una pàgina
web a una aplicació per a un dispositiu mòbil, necessitem
redimensionar la seva estructura per adaptar-la a les noves
necessitats de l'usuari i al context que l'envolta. Es recomana que
l'arbre de continguts sigui el més horitzontal possible, és a dir, que
el més recomanable és que el nivell de profunditat no passi d'un
tercer nivell. Aquesta és la manera en que l'usuari no perdrà el
temps passant per diverses pantalles, abans d'arribar al seu destí.
Consegüentment, això ens evita que l'usuari abandoni l'aplicació,
és perdi en ella o n'esgoti la seva paciència.
L'arbre original (imatge de la dreta) complia amb molts
d'aquests requisits. No era un estructura massa profunda, per
tant, per al que fa als nivells no hi hagut masses canvis. On sí
hem modificat més l'arquitectura original és en la ordenació dels
continguts. El què hem proposat és una concentració/supressió
de continguts basant-nos en l'ús que en faran els usuaris des del
dispositiu mòbil.
També hem suprimit aquells aspectes que semblaven
redundants o els hem agrupat . En la pàgina de “sala de premsa”,
se'n distingien branques com notícies, vídeos, entrevistes, etc.
Totes aquestes les hem agrupat sota l'etiqueta de notícies. Un
altre exemple ha estat la supressió de la pàgina de “l'editorial”, on
hi trobàvem informació legal, de contacte o corporativa de
l'empresa. El què hem fet ha estat escollir la informació que hem
trobat més indispensable i l'hem traslladat a la pàgina de “atenció
al client”.
El que hem volgut fer és alliberar l'aplicació de continguts
menys útils i donar prioritat a aquells que l'usuari en farà més ús.
8
Disseny d'interfícies multimèdia – PAC2 10/04/2012
wireframes
El disseny dels wireframes van dirigits a una aplicació de
smartphone amb pantalla tàctil de 854x480 píxels i sistema
operatiu android.
L'estructura dels wireframes ha estat modificada pensant
principalment en l'optimització de la pantalla i excloent tot aquell
contingut redundant. S'ha reduït la presència d'imatges a al mínim
i s'ha prioritzat una navegació senzilla i intuïtiva.
Bàsicament, l'aplicació són llistats d'objectes, ja siguin
llibres o notícies, ordenats segons el criteri de l'usuari. S'ha volgut
que aquests objectes siguin fàcilment identificables, prement-lo
ens dirigim a pantalla de detall de l'objecte. Poden ser afegits a la
cistella de compra en qualsevol i també, imprescindible avui en
dia, podem compartir-lo a través de qualsevol xarxa social, e-mail
o missatge.
Les pantalles tenen una navegació consistent, i gràcies al
botó back i les action bars, afegim sistemes de suport a aquestes.
La funció del primer és tornar-nos a la pantalla anterior, a la última
que haguem visitat. La funció de l'action bar és moure'ns de
manera jeràrquica a través de l'aplicació. Faria la funció del
breadcrumb en les pàgines web. Com hem dit, per optimitzar
l'espai de la pantalla i evitar llargs scrolls amunt i avall, hem
disposat un sistema de finestres que podem obrir i tancar a
voluntat, segons l'apartat que vulguem veure.
S'ha pensat que totes les operacions és puguin fer només
amb una ma, i aprofitant els avantatges de les pantalles actuals i
les seves funcions gestuals, ens desplacem i seleccionem amb
els dits, sense fer servir botons.
Per últim, el botó que ens obre el menú contextual, ens
oferirà diferents enllaços directes a diferents pantalles, les de més
importància i alta jerarquia.
A.I.
En línies generals, l'arquitectura de l'aplicació és prou
minimalista com per no confondre a l'usuari i que aquest tingui
una bona experiència d'ús. Una bona disposició del producte,
amb uns motors de cerca que serveixen al client el que demanda
9
Disseny d'interfícies multimèdia – PAC2 10/04/2012
amb la màxima precisió i rapidesa. Una maquetació ordenada ,
sense excessos, ja que la disposició en llistes del producte ha de
ser clara i senzilla, alhora que funcional. Una bona sincronització
amb les xarxes socials, per compartir els diferents elements de
l'aplicació.
Potser la col·locació en llistes de tots el productes,
s'hagués pogut resoldre amb pantalles paral·leles, o en imatges
que poguéssim anar passant amb el dit, però hem pensat que un
excés d'imatges perjudicarien la rapidesa de l'aplicació.
Sens dubte, un cop posada en marxa l'aplicació anirien
sorgint problemes d'usabilitat que s'haurien de resoldre sobre la
marxa.
4. Valoració
Optimització i concreció. Aquests són els conceptes, que ja
en l'assignatura d'arquitectura de la informació, van destacar per
sobre dels demés. I en aquesta pràctica, podem dir que s'han
elevat a alguna potència. Haver d'encabir tota la informació,
condensar-la, filtrar-la, exposar-la, connectar-la, en un espai molt
més reduït, és un repte apassionant i d'altra banda intentar
racionalitzar tots els factors, un treball de pragmatisme.
5. Bibliografia
Monjo Palau, Tona (2011). “Disseny d'interfícies multimèdia” .
Barcelona: Eureca Media, S.L. , 2011
Xoy Serra, Cristina (2011). “Proposta justificada de l'AI d'un lloc
web” Pràctica Final. U.O.C.
Android Design[Data última consulta: 10 abril del 2012].
http://developer.android.com/design/index.html
10
