PAC2_DIM.pdf

8/22/2019 PAC2_DIM.pdf

1/14

PROTOTIPAT FUNCIONAL RESPONSIVE PER A SMARTPHONE

rau

multimdia

disseny dinterfcies multimdia

Jaume Villarreal Quintana


2/14

disseny dinterfcies multimdia PAC2

Grau en Multimdia

- 2 -

Fonamentaci

Caracterstiques dels wireframes

Experincia de treball

Aspectes a millorar

Prototipat funcional responsive

WIREFRAMES

Recursos

Imatges

04

05

12

03


3/14

Aquest treball parteix dun estudi acurat i profund del disseny responsiu per a smartphones, recollint els

aspectes ms importants relacionats amb lentorn, el DCU i la usabilitat. Les caracterstiques fonamen-

tals dels wireframes es basen principalment en tres pilars: les particularitats ds de lentorn mbil, els

trets principals dels usuaris potencials i la necessitat de presentar una interfcie el ms invisible possible.

Els entorns web mbils es regeixen amb uns patrons diferents que les versions descriptori. Les dimen-

sions de la pantalla, la variabilitat del context ds, la despesa econmica que comporten i lheteroge-

netat de dispositius i navegadors obliguen a cercar solucions compositives i tcniques simples i alhora

robustes. Sense oblidar que, cada cop ms, lus dels smartphones est ms implantat entre els usuaris.

Per aquesta ra els wireframes presenten modicacions a nivell de composici i comportament dels

diferents elements que integren el site. Sha tingut en compte, entre altres aspectes que ms endavant

sespeciquen, la mida de la font, el posicionament dels blocs, laprotament de lample de pantalla,ladaptaci de continguts, la consistncia dels diferents comportaments o la coherncia dels enllaos.

Per altra banda, sha adoptat un sistema dorganitzaci ample i poc profund, evitant la concatenaci

de nivells de profunditat que desorientin a lusuari. Tots els enllaos dirigeixen a un o, com a mxim,

dos nivells de profunditat, fet que s possible grcies a la modicaci del comportament dels blocs de

continguts i ls dicones signicatives.

Totes les modicacions realitzades han tingut sempre present la tipologia dusuari potencial i el rang

dedat en qu es podria moure. Les caracterstiques del site centra el target en un entorn dusuaris

adolescents i adults amb molta experincia en ls de dispositius mbils. Aix obliga a lar prim a lhora

de dissenyar la resposta del site. Una mala experincia de navegaci faria que els usuaris es retiressin.

Finalment cal remarcar dos aspectes importants. En primer lloc destacar que sha obviat lapartat re-

lacionat amb els desenvolupadors. Per les seves caracterstiques, aquest collectiu probablement des-

estimar el desenvolupament en espais reduts. Per altra banda, les dimensions i la impossibilitat que

alguns dispositius mbils suportin Flash desaconsella obrir els jocs des del mbil. Se nassegura, per,

laccs a la seva informaci global.

>

>

>

>

>

>


Grau en Multimdia

- 3 -

caracterstiques dels wireframes


4/14


Grau en Multimdia

- 4 -

El treball dadaptaci del site ha passat per diferents estadis que han estat en la seva globalitat molt

enriquidors, tant a nivell conceptual com prctic. Per una banda ha comportat tot un treball previ de do-

cumentaci sobre dispositius mbils a diferents nivells (especicacions, entorns, comportament, adap-

taci als usuaris,...) i per altra banda la consolidaci del concepte de responsive design.

En un primer moment els esbossos es van dirigir cap a un model clarament app. Els dissenys daplica-

cions mbils cada cop estan ms integrats, tant a nivell compositiu com de comportament, ns al punt

que els OS sestan comenant a contagiar daquesta particular manera dorganitzar i interactuar amb la

interfcie.

Malgrat tot, desprs duns quants esbossos es va detectar que els primers dissenys eren poc responsive.

Algunes de les solucions que saportaven anaven ms enll del disseny responsiu i requerien modi -

cacions que prcticament suposaven una reformulaci de tot el projecte. Per aquest motiu la primeratasca de totes va ser la de centrar clarament qu suposa fer un disseny responsiu.

Aix doncs, sha encarat lencrrec de manera analtica, identicant els blocs de contingut i deixant que

segueixin el ux natural. A partir daqu sha vetllat perqu cada bloc aproti al mxim lespai respectant

lesquema compositiu i de comportament. Lentorn mbil requereix una experincia simple, slida i

consistent que noms saconsegueix amb una coherncia grca i de comportament.

Sense cap mena de dubte els aspectes a millorar sn mltiples, doncs lexperincia s encara limitada.

Al llarg del procs shan coms errades com ara la manca dinformaci, el desaprotament despais,

la concatenaci innecessria denllaos o la descontextualitzaci dels continguts dins de lestructuraglobal de navegaci.

Per aix encara hi ha molts aspectes a millorar. La publicitat, aspecte molt important, no ha acabat de

trobar encaix. Per altra banda shan comenat a introduir modicacions en el comportament de certs

elements, per aquest camp no ha estat massa explorat a causa del desconeixement dels seus lmits

en el disseny responsiu. Malgrat tot, hi ha molta satisfacci pel resultat aconseguit. Ha valgut la pena.

experincia de treball - aspectes a millorar

>

>

>

>

>

>


5/14

wireframe - mida completa >


Grau en Multimdia

- 5 -

wireframe_home_00

Pantalla dinici del site

Tots els elements han estat reubicats seguint el

ux natural establert.

Shan elminitat totes les regles destil que con-

tenien oats per tal de collocar un contenidor

genric a sota de laltre, aprotant tot lample

de pantalla.

Sha modicat el comportament del cotenidorCATEGORAS perqu actu com a men des-

plegable.

Els contenidors NOVEDADES, MEJOR VALO-

RADOS i JUEGOS DEL DA incorporen un ele-

ment cadascuna perqu lusuari vegi clarament

quines han estat les actualitzacions del site.

Els contenidors ESENCIALES, AHORA EST

JUGANDO, LTIMOS JUEGOS COMENTA-DOS i NUBE DE ETIQUETAS actuen com a

botons que enllacen amb el contingut propi del

seu mbit.

Els enllaos de peu de pgina shan agrupat al

desplegable MS OPCIONES.
https://app.box.com/s/5qyyv0b59uv3fhlouzurhttps://app.box.com/s/5qyyv0b59uv3fhlouzurhttps://app.box.com/s/5qyyv0b59uv3fhlouzur


6/14


wireframe - mida completa>


Grau en Multimdia

- 6 -

wireframe_home_01

wireframe_home_02

Men de categories

Sha modicat el comportament del cotenidor

CATEGORAS perqu actu com a men des-plegable.

El contenidor actua com un bot que replega

o expandeix la llista en funci del seu estat ac-

tual, desplaant la resta de contenidors.

Sha incls una icona per donar consistncia a

la navegaci.

Desplegament dels contenidors

Cada contenidor actua com un bot que replega

o expandeix la llista en funci del seu estat ac-

tual, desplaant la resta de contenidors.

El desplegament del contenidor retorna a lusuari

les darreres cinc entrades actualitzades i un bot

contextual de navegaci per poder accedir a la

resta de continguts.
https://app.box.com/s/wzhh8b2vii58q3kpmwz9https://app.box.com/s/wzhh8b2vii58q3kpmwz9https://app.box.com/s/03z2j46pgdvka93eittihttps://app.box.com/s/03z2j46pgdvka93eittihttps://app.box.com/s/03z2j46pgdvka93eittihttps://app.box.com/s/wzhh8b2vii58q3kpmwz9


7/14



Grau en Multimdia

- 7 -

wireframe_categoria

Pantalla dinici de categoria.

El contenidor de CATEGORAS modica el seu

comportament, canviant el nom inicial pel nomde la categoria escollida.

El contenidor CATEGORAS desplegar tot el

llistat de categories en el moment en qu es

torni a activar.

Sintrodueix laccs a un segon men desple-

gable amb el llistat de totes les subcategories.

Sassegura aix una bona contextualitzaci, un

rpid accs i una presentaci adient de tots elsenllaos, independenment de la llargria del

seu nom.

La resta de contenidors presenten el mateix

comportament que els seus homlegs a la p-

gina dinici.
https://app.box.com/s/cgqcf00k7syywnaoa6l3https://app.box.com/s/cgqcf00k7syywnaoa6l3https://app.box.com/s/cgqcf00k7syywnaoa6l3


8/14


Grau en Multimdia

- 8 -

wireframe_fitxaJoc

Pantalla dinici duna ftxa de joc

La mida de la pantalla i la possibilitat que dispo-

sitius mbils com iPhone no suportin el format

Flash desaconsella obrir els jocs des del mbil.

Malgrat tot, shabilita la txa per oferir informa-

ci i geti sobre qualsevol joc.

El contenidor de navegaci principal mostra el

nom de la categoria i subcategoria a qu per-

tany la selecci feta. El mateix contenidor des-

plegar tot el llistat de categories en el moment

en qu es torni a activar.

Les captures de pantalla modiquen el seu com-

portament per presentar-se en format slider.

El nombre total de vots sha collocat a prop delbot de votaci per tal de contextualitzar la in-

formaci.

Sincorpora a les opcions desplegables un indi-

cador de que es despleguen perqu lusuari no

els identiqui com a botons.

https://app.box.com/s/6w10lvmxd07wui5wuy52https://app.box.com/s/6w10lvmxd07wui5wuy52https://app.box.com/s/6w10lvmxd07wui5wuy52


9/14


Grau en Multimdia

- 9 -

wireframe_cerca

Pantalla de retorn duna cerca

Shabilita un primer contenidor actualitzat amb

els jocs ms buscats pels usuaris. El seu com-

portament segueix el mateix patr que els an-

teriors.

Shabilita una caixa de cerca amb les mateixes

funcions que la caixa de cerca de la part supe-

rior de la interfcie.

Shabiliten dues llistes desplegables just a sota

de la caixa de cerca. Aquests desplegables mjul-

tiselecci contenen els criteris de cerca buscar

por i buscar en.

El criteri categoras ha estat eliminat de buscar

por, ja que el criteri buscar en ja permet fer

una cerca directa sobre categories. Per tal desimplicar el procs de cerca shan obviat les

subcategories.

La caixa de retorn presenta els deu primers jocs

i un bot de navegaci contextual que indica el

nombre de pgines totals.

https://app.box.com/s/d7vvgn6djv2g3b6bs7zohttps://app.box.com/s/d7vvgn6djv2g3b6bs7zohttps://app.box.com/s/d7vvgn6djv2g3b6bs7zo


10/14


Grau en Multimdia

- 10 -

wireframe_iniciSessi

Pantalla dinici de sessi

Shabilita el formulari dinici de sessi per donar

accs als usuaris registrats.

Juntament amb el formulari shi habilita el con-

tenidor de promoci per donar-se dalta i el

bot que enllaa amb el formulari de registre.

https://app.box.com/s/3m3ubpl0s01itqwj9orzhttps://app.box.com/s/3m3ubpl0s01itqwj9orzhttps://app.box.com/s/3m3ubpl0s01itqwj9orz


11/14


Grau en Multimdia

- 11 -

wireframe_usuariRegistrat

Pantalla dinici dusuari registrat

Per tal de no sobrecarregar la pgina amb con-

tinguts, sofereix a lusuari noms els blocs de

gesti ms importants.

Shabilita la gesti de dades i edici del perl

i foto.

Es presenta lactualitzaci de les darreres inter-

vencions.

Shabilita la gesti de dades i ledici de les llis-tes de favorits

La resta de continguts (amics, missatges, activi-

tats i foros) sn accessibles a partir dels enllaos

del desplegable de la part superior de la pan-

talla.

https://app.box.com/s/ceo8jw0hc2j02v4j5xf0https://app.box.com/s/ceo8jw0hc2j02v4j5xf0https://app.box.com/s/ceo8jw0hc2j02v4j5xf0


12/14

Sobre Disseny dinterfcies

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

[data de consulta: 10 doctubre

de 2013]

Carlos A. Scolari, El ideolgico retorno de las interfaces transparentes.

[data de consulta: 10 doctubre de 2013]

Wiki de Disseny dInterfcies [UOC].

[data de consulta:

12 doctubre de 2013]

Luke Wroblewski, Mobile First.

[data de consulta: 12 doctubre de 2013] Mdul 1/2/3 de lassignatura Disseny dInterfcies Multimdia. [UOC]

Sobre responsive design

This is responsive


Design Process In The Responsive Age

[data de con-sulta: 15 doctubre de 2013]

Diseo Web Responsivo (Responsive Web Design)


Mediaqueries



Grau en Multimdia

- 12 -


13/14

Tona Monjo, Responsive web design.

[data de consulta: 23 de

setembre de 2013]

Sobre dispositius mbils

iPhone


Especifcacions iPhone


Dissenyant per a iOS7


Consideracions bsiques per al disseny i desenvolupament daplicacions mbils


Sobre les imatges: Totes les imatges han estat dissenyades i realitzades per lautor, a excepci de lisotip de la UOC.


Grau en Multimdia

- 13 -


14/14

No es permet un s comercial de lobra original ni de les possibles obres derivades,

la distribuci de les quals sha de fer amb una llicncia igual a la que regula lobra original.


Grau en Multimdia

- 14 -

Documents

PAC2_DIM.pdf