• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interficie-resum
 

Interficie-resum

on

  • 779 views

 

Statistics

Views

Total Views
779
Views on SlideShare
778
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/