PRÀCTICA: Finalització del prototipat gràfic multiplataforma [Disseny d’Interfícies Multimèdia]

evolució

Quan es treballa en el disseny d’un projecte de responsive web design, el format dels diferents dispositius de sortida pot comportar variacions gràfiques, que tinguin com a objectiu que el contingut de les diferents pàgines es pugui veure bé, que tot el text sigui llegible, i que els elements interactius tinguin la mida suficient com per ser seleccionats amb facilitat.
Cal tenir en compte, però, que un projecte de responsive web design ha de resultar coherent tot i les variacions comportades per la visualització en els diferents dispositius. És a dir, l’usuari ha d’obtenir una experiència visual i d’ús semblant, sigui quin sigui el dispositiu des del que visualitzi el web.
Aquesta Pràctica consisteix en optimitzar i completar, a partir dels comentaris del consultor i de la reflexió personal per part de l’estudiant, el prototip gràfic iniciat en la PAC3, tant per web com per a mòbil, i en reflexionar sobre el procés dut a terme.

El lliurament de la Pràctica consisteix en dues parts:

  • el disseny gràfic de totes les pàgines incloses en els protips funcionals (wireframes) per a escriptori i per a smartphone.
  • l’argumentació que exposi quin ha estat el procés de disseny i que justifiqui les decisions preses per a la gràfica. Aquest document ha d’incloure els següents continguts: criteris d’optimització, procés d’optimització i finalització dels prototips i millores de futur

Data: curs 2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

Si el consultor/a ho suggereix, és altament recomanable compartir al fòrum de l’assignatura els wireframes que es van dissenyant. Aquesta dinàmica permet afinar els dissenys propis i ajuda a desenvolupar col·lectivament els projectes amb la resta de companys d’aula.

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana/alta

Durada: 10/12 hores aproximadament.

Valoració: A


DOCUMENTS ADJUNTS

Anuncis

PAC3: Prototipat gràfic responsiu [Disseny d’Interfícies Multimèdia]

evolució

A més del prototipat funcional, la preparació de la línia gràfica d’una aplicació forma part del disseny de la seva interfície. El disseny visual té molta importància, perquè és el que posa en contacte l’usuari amb el contingut de l’aplicació. Ha de tenir en compte, entre d’altres, dos factors fonamentals: la gràfica d’una aplicació i el disseny visual. Aquesta PAC consisteix a realitzar el prototip (disseny) gràfic de la versió web per a escriptori i smartphone (prototipat d’alta fidelitat) a partir dels wireframes que estaven inclosos en l’enunciat i entregats per part de l’alumne a la PAC2, i a definir la guia d’estil corresponent.

Per fer-ho caldrà treballar sobre tres grans blocs:

  • FASE 1 – PROTOTIP GRÀFIC PER A ESCRIPTORI
    es prendran com a base 3 wireframes (la plana d’inici i dues pàgines de segon nivell, a triar per l’estudiant) subministrats amb l’enunciat de la PAC2.
  • FASE 2 – PROTOTIP GRÀFIC PER A SMARTPHONE
    es prendran com a base 3 wireframes entregats per l’alumne a la PAC2 (la plana d’inici i les mateixes dues pàgines de segon nivell triades per a la versió escriptori).
  • FASE 3 – GUIA D’ESTIL
    a partir de les decisions de disseny i de l’aplicació que s’ha ealitzat anteriorment, cal preparar una guia d’estil que descrigui les pautes de disseny del web, i que servirà per a garantir la coherència en la identitat visual en els diferents dispositius. Aquesta guia d’estil ha de descriure de manera molt visual, és a dir, intentant incloure només el text que sigui realment imprescindible.

Data: curs  2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

Si el consultor/a ho suggereix, és altament recomanable compartir al fòrum de l’assignatura els wireframes que es van dissenyant. Aquesta dinàmica permet afinar els dissenys propis i ajuda a desenvolupar col·lectivament els projectes amb la resta de companys d’aula.

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana/alta

Durada: 8/10 hores aproximadament.

Valoració: A


DOCUMENTS ADJUNTS

PAC 2: Prototipat funcional responsive per a smartphone [Disseny d’Interfícies Multimèdia]

evolució

El disseny funcional per a dispositius mòbils ha de tenir en compte alguns factors diferents als que es tenen presents quan es treballa per a escriptori. Específicament en el cas de l’smartphone, cal accentuar la importància de la simplicitat i l’agilitat en la descàrrega de la informació, i tenir en compte quins continguts realment utilitzarà l’usuari en aquest dispositiu. L’objectiu d’aquesta pràctica consisteix a realitzar el prototip funcional (wireframes) de la versió responsive per a smartphone, d’un disseny preexistent per a escriptori.*

*El projecte triat per desenvolupar els wireframes ha estat el de ‘JuegosJuegos.com’.

La realització de la PAC es basa en el desenvolupament de les següents fases:

  • FASE 1: tenint en compte els requeriments de disseny per a smartphone i partint de l’arbre de continguts per a escriptori, caldrà seleccionar els continguts que realment cal traslladar a aquest dispositiu, tenint en compte que els wireframes per a smartphone es basaran en aquest nou arbre de continguts, i no en els continguts per a escriptori, molt més extensos.
  • FASE 2: preparar els wireframes per a smartphone de totes les pantalles que teníem en escriptori, exceptuant aquelles que hagin estat eliminades en el nou arbre de continguts.
  • FASE 3: escriure un informe que inclogui quines són les característiques fonamentals dels wireframes per a smartphone que s’han preparat, quins factors s’han tingut en compte per a l aseva creació i quina ha estat l’experiència en la realització dels mateixos (dificultats i reptes).

Data: curs 2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

Si el consultor/a ho suggereix, és altament recomanable compartir al fòrum de l’assignatura els wireframes que es van dissenyant. Aquesta dinàmica permet afinar els dissenys propis i ajuda a desenvolupar col·lectivament els projectes amb la resta de companys d’aula.

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana/alta

Durada: 8/10 hores aproximadament.

Valoració: A

DOCUMENTS ADJUNTS

PAC1: Anàlisi d’interfícies [Disseny d’Interfícies Multimèdia]

evolució

En aquesta PAC s’analitzen diverses interfícies gràfiques, analògiques i digitals, per veure el seu grau de transparència i detectar quins elements fomenten la percepció de naturalitat en l’usuari i quins no.

Per fer-ho caldrà desenvolupar el treball en quatre fases:

  • FASE 1: millorar la comprensió del concepte de transparència de la interfície a partir de la lectura del següent article.
  • FASE 2: seleccionar dues interfícies digitals i dues interfícies físiques. En ambdòs casos, una de les interfícies ha de ser un exemple d’interfície que afavoreix la sensació de transparència, mentre que l’altra ha de ser un exemple de disseny menys transparent.
  • FASE 3: una vegada seleccionades les quatre interfícies CAL analitzar-les tenint en compte els punts forts i febles.
  • FASE 4: s’ha d’incloure una conclusió final que reuneixi els trets que fan que les interfícies en general siguin més o menys transparents, fent referència a les diferències i semblances entre interfícies digitals i analògiques i incloent les referències bibliogràfiques o digitals que heu utilitzat.
Data: curs 2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana
Durada: 7/8 hores aproximadament.

Valoració: A

L’evolució de la interfície d’usuari

Noves interfícies d'usuariHeu vist algun cop “Minority Report”? Si l’heu vista, probablement no recordeu amb exactitud quina era la trama de la pel·lícula, però segur que recordeu al protagonista enfundant-se uns guants negres que li donaven control absolut sobre una interfície que sorgia d’una pantalla transparent. Al sortir de la sala tenies la sensació que potser els guionistes s’havien passat una mica… però tots pensàvem que seria estimulant poder-ho tocar amb les mans.

“Minority Report” va suposar un repte d’imaginació i implementació pels desenvolupadors del MIT que van participar a la pel·lícula. I a més va ser el tret de sortida per iniciar un procés que feia anys que no es donava: l’evolució de la interfície d’usuari (UI). La UI tal i com la coneixem va ser proposada per Apple amb els seus primers ordinadors. Interfícies netes, ordenades, que permetien classificar els documents de manera jeràrquica i estructurada, donant sensació de pulcritud i seguretat… al meu ordinador no es perd res! Però aquesta UI, que després ha estat adoptada per la majoria d’interfícies d’altres sistemes operatius, no va poder trencar la gran barrera que separa el binomi home-ordinador: l’espai. Quan interactuem amb l’ordinador la variable espai queda fragmentada, perquè al moviment del ratolí sobre la taula li correspon el moviment del punter sobre la pantalla. Les tablets, amb l’iPad al capdavant, han començat a trencar aquesta tendència. Les pantalles sensibles al tacte i la pressió comencen a aproximar l’usuari i el dispositiu, el moviment dintre de l’espai comença a tenir certa lògica i certa relació, però encara es pot anar un pas més enllà.

Fa pocs mesos John Underkoffler presentava una nova manera d’entendre la UI. Per primer cop “Minority Report” trenca la barrera de l’imaginari i es converteix en realitat. El moviment és captat i integrat completament en les estructures de control. El límit entre usuari i interfície queda dissolt perquè la barrera entre l’espai real i el virtual es fonen, permetent que la informació sigui soluble, que passi materialment d’un lloc a un altre. Com si d’una coreografia es tractés, l’usuari tindrà la interfície com a parella de ball, prendrà amb les seves mans el control real del moviment i durà els bytes allà on ell vulgui. La interacció serà plena i en un mateix pla dialogaran els objectes reals i la informació codificada. Imagineu-vos per un moment que sou mestres amb guants negres…

Passeu i mireu. El futur de la interfície està servit!

LA INTERFÍCIE DEL FUTUR.

Ens llegim!