Disseny interactiu III

interfície

Mariona Grané. Laboratori de Mitjans Interactius. Universitat de Barcelona

disseny interactiu

Disseny interactiu de la interficie

Distribució visualSenzillesa visualAtenció visualModels i referents mentalsOrganització dels contingutsEstèticaLegibilitatColorSimplicitat a la interaccióUsabilitat en la interacció

Consistència en el dissenyUs de metàfores

Distribució visual

Composició: equilibri

Distribució visual

Composició: tensió

Distribució visual

Composició: nivellament i agudesa

Distribució visual

Tendim a agrupar els similars

el punt aïllatés un TOT

sobre 2centreml’atenció

més juntsmés agrupats

Distribució visual

Els iguals s’atrauen

i els contraris es repelen

Distribució visual

Visualment agrupem segons les qualitats

Distribució visual

La percepció dona forma allò que no en té iacaba allò inacabat

Distribució visual

Composició: una superficie es divideix en terços horitzontals i verticals per acolocar els elements de forma que es puguin percebre millor.

Alineació: Colocació d'elements alineats a les seves vores, centralment, a duesbandes, ...etc

Bona continuació: els elements distribuits com una recta o una línia suau esperceben com un grup.

Panorama-refugi: tendència a preferir els entorns amb espais oberts i lesàrees d'intimitat i recolliment.

Proximitat: els elements propers entre si es perceben com més relacionats queels separats entre si.

Similitud: els elements similars es perceben com més relacionats entre si queels que són diferents.

Tancament: tendencia a percebre un conjunt d'elements diferents com si fossinun sol objecte.

Distribució visual

http://www.almiron.org/

Distribució visual

http://www.alistapart.com/

Distribució visual

http://www.cadius.org/weblog/

Distribució visual

http://www.elpais.com/

Distribució visual

http://www.guigalaxy.com/

Distribució visual

http://www.halcourier.es/web/nueva.htm

Senzillesa visual

Llei de Hick: a més alternatives per triar més temps dedicarà l'usuari,s'aplica millor a dissenys per decisions simples.

Navalla d'Ockham: la simplicitat i senzillesa d'un entorn el fa mésusable.

Principi de Pareto: La majoria dels efectes venen provocats per unmínim de variables. Cal seleccionar aquelles funcions més rellevants idestacar-les o eliminar les no rellevants del disseny.

Proporció senyal - soroll: proporció de la informació rellevant iirrellevant.

Senzillesa visual

http://www.sindicat.net/

Senzillesa visual

http://www.teachers.tv/node

Senzillesa visual

Senzillesa visual

http://www.pauledwardfleming.com/

Senzillesa visual

http://www.arnoditnodar.com/

Atenció visual

Interferències: problema de disseny que implica soroll i provoca unralentiment del procés mental.

Punt d'entrada: espai o element d'atenció en un disseny, destacar, marcar,situar, ...

Realçament: sistemes per cridar l'atenció sobre un element.

Relació figura-fons: els elements es perceben com figures (centred'atenció visual) o com a fons (resta del camp de percepció).

Atenció visual

http://www.tff.gob.mx/

Atenció visual

http://www.queweb.org/ http://www.eed.es/

Atenció visual

http://persuabilidad.com/

Atenció visual

http://www.sekisuiheim.com/desio-ae/

Atenció visual

Atenció visual

Atenció visual

Diagrama de Gutenberg

La tensió visual es pot aguditzar perquè la nostravisió tendeix a localitzar primer l’angle inferioresquerra en una composició.

zona primaria

zona final

zona forta

zona dèbil

Atenció visual

eyetracking

http://poynterextra.org/eyetrack2004/videos.htm

Models i referents mentals

Adequació: Les característiques físiques d'un objecte influeixen en la sevafunció.

Arquetips: Patrons universals de temes i formes.

Efecte de l'expectativa: Té diferents sentits, en disseny interactiu implicaconèixer els arquetips i experiència de l'usuari.

Imitació: copiar propietats d'objectes, d'organismes i d'entorns.

Models mentals: disseny d'entorns basats en les representacions mentalsdesenvolupades a partir de l'experiència.

Reconeixement enfront de record: es mes fàcil reconèixer coses un coples veiem que recordar-les del no res.

Representació icònica: imatges i pictogrames per a la identificació, elrecord, i l'organització.

Models i referents mentals

http://www.metropro.com.mx/

Models i referents mentals

http://www.elevatormoods.com/

Models i referents mentals

Models i referents mentals

http://www.dontclick.it/

http://www.iconwerk.de/

Models i referents mentals

Models i referents mentals

Organització dels contingutsFragmentació: organització fragmentada de dades per millorar l'accés a lainformació i la memorització.

Modularitat: mètode per controlar la complexitat d'un sistema que implicapartir-lo en diferents sistemes més simples i petits.

Organització de la informació per capes: organitzar la informació engrups relacionats per controlar la complexitat i reforçar les relacionsinformatives

Organització de la informació: sistemes universals d'organització de lainformació: categoria, temps, ubicació, ordre alfabètic, continuat

Piràmide invertida: Presentació de la informació en ordre descendentd'importància.

Revelació progressiva: estratègia per controlar la complexitat de lainformació que consisteix en mostrar només la info necessària en cadamoment

Profunditat de processat: la informació que s'analitza en profunditat esrecorda més que aquella que es treballa superficialment

Organització dels continguts

http://interacciones.wordpress.com/

Organització dels continguts

http://www.nosolousabilidad.com/

Organització dels continguts

EstèticaEfecte de superioritat de la imatge: les imatges es recorden millor que lesparaules

Estètica: La bellesa del disseny importa.

La forma segueix a la funció: com una descripció de la bellesa o com unaidea per assolir-la

Preferència pel llençol: preferència d'entorns semblants a un llençol net,corbes suaus.

Secció aurea: proporció entre els elements d'una forma (alçada,amplada,...) de aproximadament 0,618

Simetria: Equivalència visual entre els elements d'una forma

Estètica

http://www.vangogh-creative.it/index.php

Estètica

http://www.miraruido.com/mira.html

Estètica

http://www.whatyouchoosetoremember.com

Estètica

http://www.rhythmoflines.co.uk/

Estètica

Estètica

Estètica

Estètica

http://www.useit.com

Estètica

http://www.gmvallejo.com/http://www.queweb.org/

Estètica

ttp://www.extremoweb.com.ar/home.html

LegibilitatClaredat: grau en que es pot comprendre un text en funció de la sevacomplexitat

Legibilitat: qualitat visual dels textos, que implica tamany, color, estils,contrast, espaiat, ...

Visibilitat: l'us dels sistema millora quan millora la seva visibilitat

Legibilitat

http://www.residenciamenendezpelayo.com/

Legibilitat

http://www.sabena.com/

Legibilitat

http://www.lapalmaturismo.com/MARCO/MARCO1.htm

ColorColor: en disseny utilitzem el color per atraure atencions, agruparelements, indicar significats, optimitzar l'estètica, millorarllegibilitat i visibilitat d'elements, etc.

Color

http://www.limbus.fr/

Color

http://www.rittenhousedesign.com/

Color

http://www.estudioingenia.com/ingenia.htm

Color

http://www.paginanomade.com.ar/

Color

http://www.thanea.com/ars/

Color

http://www.nexuslondon.com/main.html

Color

http://www.relevare.com/site/

Simplicitat en la interacció

Càrrega de la tasca: si cal molt d'esforç per realitzar una tasca és probableque aquesta no es faci amb èxit.

Confirmació: tècnica de verificació de les accions abans de dur-les a terme,ralentitzen tasques i cal reservar-les per qüestions rellevants.

Economia, costos i beneficis: quantes paraules calen per explicar unmissatge? quan temps pot esperar un usuari sense abandonar?

Equilibri entre flexibilitat i eficàcia: els dissenys flexibles tenen mésfuncions i per aquesta raó són menys eficaços.

Limitació: reducció de les accions que es poden realitzar en un moment(desactivar botons quan no es poden fer servir).

Simplicitat en la interacció

http://llamamelola.com/

Simplicitat en la interacció

http://www.microsiervos.com/

Simplicitat en la interacció

http://www.dontclick.it/

Simplicitat en la interacció

http://www.ingreme.com/start.html

Simplicitat en la interacció

http://www.elastique.de/flash/index.php

Usabilitat en la interaccióAccessibilitat: Els objectes, els espais i els documents s'han de dissenyarde forma que puguin ser utilitzats, sense cap modificació pel major nombrepossible de persones.

Control: el control que els usuaris poden tenir sobre el sistema ha d'estardissenyat en relació a l'eficàcia del sistema i l'experiència dels usuaris.

Feedback: l'acció de l'usuari té unes consecuències al sistema i a la inversa

Indulgència: els dissenys han d'ajudar a evitar errors i minimitzar lesconsequències negatives quan aquests succeeixen.

Intruccions: relació entre els controls i el disseny de les instruccions.

Llei de Fitts: el temps per assolir un objectiu depèn de la distancia vers ell idel seu tamany

Usabilitat en la interacció

http://www.psoetv.es/index.html

Usabilitat en la interacció

http://www.albinoblacksheep.com/flash/blind.php

Usabilitat en la interacció

Llei de fitts

http://fww.few.vu.nl/hci/interactive/fitts/

Usabilitat en la interacció

Llei de fitts

http://www.kurtnoble.com/

Usabilitat en la interacció

Ús de metàfores

Ajuda a situar l’usuari, facilita la seva organització mental

Afavoreix els sistemes de navegació

Ajuda a donar consistència a l’entorn

Ús de metàfores

Ús de metàfores

http://myweb.rust.net/~no2pencl/

Ús de metàfores

http://www.stephanh.com/

Ús de metàfores

http://www.carlosevangelista.com.br/oldport/index.html

Ús de metàfores

http://www.md-extreme.pl

Ús de metàfores

http://www.tvcatalunya.com

Ús de metàfores

http://www.elpais.com/comunes/2005/arco/index.html

Ús de metàfores

http://www.peepshow.org.uk/

Ús de metàfores

http://www.diminuta.com/

Ús de metàfores

http://www.desclides.net/etienne/podfolio/

Ús de metàfores

http://www.srarushmore.com/html/flash.html

Ús de metàfores

¿Podriem pensar en metàforesadients per als nostres projectes?

Consistència en el disseny

Disseny consistent i adient als continguts que es treballen

Estil coherent dels elements de la pantalla.

Evitar fer barreges d’estils

Combinar estils i colors

Intentar pensar en el disseny de la interfície com un tot o com un solelement i no com la suma de molts elemenst diferents

Imaginar entrar en una web i sense llegir res en absolut ja saber de que vao quin tipus de continguts inclou.

Autosimilitud: una forma es composa de parts similars al tot entre si.

Consistència en el disseny

http://www.elblogsalmon.com/

Consistència en el disseny

http://www.bebesymas.com/

Consistència en el disseny

http://www.foxsearchlight.com

Consistència en el disseny

http://www.poesia.com

Consistència en el disseny

Consistència en el disseny

http://www.elutilitario.net/