Interficie-resum
Upcoming SlideShare
Loading in...5
×
 

Interficie-resum

on

  • 806 views

 

Statistics

Views

Total Views
806
Views on SlideShare
805
Embed Views
1

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Interficie-resum Interficie-resum Presentation Transcript

  • Disseny interactiu III interfície Mariona Grané. Laboratori de Mitjans Interactius. Universitat de Barcelona
  • disseny interactiu Disseny interactiu de la interficie Distribució visual Senzillesa visual Atenció visual Models i referents mentals Organització dels continguts Estètica Legibilitat Color Simplicitat a la interacció Usabilitat en la interacció Consistència en el disseny Us de metàfores
  • Distribució visual Composició: equilibri
  • Distribució visual Composició: tensió
  • Distribució visual Composició: nivellament i agudesa
  • Distribució visual Tendim a agrupar els similars sobre 2 més junts el punt aïllat centrem més agrupats és un TOT l’atenció
  • 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é i acaba allò inacabat
  • Distribució visual Composició: una superficie es divideix en terços horitzontals i verticals per a colocar els elements de forma que es puguin percebre millor. Alineació: Colocació d'elements alineats a les seves vores, centralment, a dues bandes, ...etc Bona continuació: els elements distribuits com una recta o una línia suau es perceben 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 que els separats entre si. Similitud: els elements similars es perceben com més relacionats entre si que els que són diferents. Tancament: tendencia a percebre un conjunt d'elements diferents com si fossin un 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és usable. Principi de Pareto: La majoria dels efectes venen provocats per un mínim de variables. Cal seleccionar aquelles funcions més rellevants i destacar-les o eliminar les no rellevants del disseny. Proporció senyal - soroll: proporció de la informació rellevant i irrellevant.
  • 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 un ralentiment 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 (centre d'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 La tensió visual es pot aguditzar perquè la nostra visió tendeix a localitzar primer l’angle inferior esquerra en una composició. Diagrama de Gutenberg zona forta zona primaria zona final 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 seva funció. Arquetips: Patrons universals de temes i formes. Efecte de l'expectativa: Té diferents sentits, en disseny interactiu implica conè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 mentals desenvolupades a partir de l'experiència. Reconeixement enfront de record: es mes fàcil reconèixer coses un cop les veiem que recordar-les del no res. Representació icònica: imatges i pictogrames per a la identificació, el record, 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/
  • Models i referents mentals http://www.iconwerk.de/
  • Models i referents mentals
  • Organització dels continguts Fragmentació: organització fragmentada de dades per millorar l'accés a la informació i la memorització. Modularitat: mètode per controlar la complexitat d'un sistema que implica partir-lo en diferents sistemes més simples i petits. Organització de la informació per capes: organitzar la informació en grups relacionats per controlar la complexitat i reforçar les relacions informatives Organització de la informació: sistemes universals d'organització de la informació: categoria, temps, ubicació, ordre alfabètic, continuat Piràmide invertida: Presentació de la informació en ordre descendent d'importància. Revelació progressiva: estratègia per controlar la complexitat de la informació que consisteix en mostrar només la info necessària en cada moment Profunditat de processat: la informació que s'analitza en profunditat es recorda 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ètica Efecte de superioritat de la imatge: les imatges es recorden millor que les paraules Estètica: La bellesa del disseny importa. La forma segueix a la funció: com una descripció de la bellesa o com una idea 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.queweb.org/ http://www.gmvallejo.com/
  • Estètica ttp://www.extremoweb.com.ar/home.html
  • Legibilitat Claredat: grau en que es pot comprendre un text en funció de la seva complexitat 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
  • Color Color: en disseny utilitzem el color per atraure atencions, agrupar elements, indicar significats, optimitzar l'estètica, millorar llegibilitat 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 probable que 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 un missatge? quan temps pot esperar un usuari sense abandonar? Equilibri entre flexibilitat i eficàcia: els dissenys flexibles tenen més funcions 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 dissenyar de forma que puguin ser utilitzats, sense cap modificació pel major nombre possible de persones. Control: el control que els usuaris poden tenir sobre el sistema ha d'estar dissenyat 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 les consequè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 i del 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
  • Usabilitat en la interacció http://www.kurtnoble.com/
  • Ú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àfores adients 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 sol element i no com la suma de molts elemenst diferents Imaginar entrar en una web i sense llegir res en absolut ja saber de que va o 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/