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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
832
On Slideshare
831
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 1

http://a0.twimg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Disseny interactiu III interfície Mariona Grané. Laboratori de Mitjans Interactius. Universitat de Barcelona
  • 2. 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
  • 3. Distribució visual Composició: equilibri
  • 4. Distribució visual Composició: tensió
  • 5. Distribució visual Composició: nivellament i agudesa
  • 6. 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ó
  • 7. Distribució visual Els iguals s’atrauen i els contraris es repelen
  • 8. Distribució visual Visualment agrupem segons les qualitats
  • 9. Distribució visual La percepció dona forma allò que no en té i acaba allò inacabat
  • 10. 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.
  • 11. Distribució visual http://www.almiron.org/
  • 12. Distribució visual http://www.alistapart.com/
  • 13. Distribució visual http://www.cadius.org/weblog/
  • 14. Distribució visual http://www.elpais.com/
  • 15. Distribució visual http://www.guigalaxy.com/
  • 16. Distribució visual http://www.halcourier.es/web/nueva.htm
  • 17. 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.
  • 18. Senzillesa visual http://www.sindicat.net/
  • 19. Senzillesa visual http://www.teachers.tv/node
  • 20. Senzillesa visual
  • 21. Senzillesa visual http://www.pauledwardfleming.com/
  • 22. Senzillesa visual http://www.arnoditnodar.com/
  • 23. 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ó).
  • 24. Atenció visual http://www.tff.gob.mx/
  • 25. Atenció visual http://www.queweb.org/ http://www.eed.es/
  • 26. Atenció visual http://persuabilidad.com/
  • 27. Atenció visual http://www.sekisuiheim.com/desio-ae/
  • 28. Atenció visual
  • 29. Atenció visual
  • 30. 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
  • 31. Atenció visual eyetracking http://poynterextra.org/eyetrack2004/videos.htm
  • 32. 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ó.
  • 33. Models i referents mentals http://www.metropro.com.mx/
  • 34. Models i referents mentals http://www.elevatormoods.com/
  • 35. Models i referents mentals
  • 36. Models i referents mentals http://www.dontclick.it/
  • 37. Models i referents mentals http://www.iconwerk.de/
  • 38. Models i referents mentals
  • 39. 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
  • 40. Organització dels continguts http://interacciones.wordpress.com/
  • 41. Organització dels continguts http://www.nosolousabilidad.com/
  • 42. Organització dels continguts
  • 43. 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
  • 44. Estètica http://www.vangogh-creative.it/index.php
  • 45. Estètica http://www.miraruido.com/mira.html
  • 46. Estètica http://www.whatyouchoosetoremember.com
  • 47. Estètica http://www.rhythmoflines.co.uk/
  • 48. Estètica
  • 49. Estètica
  • 50. Estètica
  • 51. Estètica http://www.useit.com
  • 52. Estètica http://www.queweb.org/ http://www.gmvallejo.com/
  • 53. Estètica ttp://www.extremoweb.com.ar/home.html
  • 54. 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
  • 55. Legibilitat http://www.residenciamenendezpelayo.com/
  • 56. Legibilitat http://www.sabena.com/
  • 57. Legibilitat http://www.lapalmaturismo.com/MARCO/MARCO1.htm
  • 58. 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.
  • 59. Color http://www.limbus.fr/
  • 60. Color http://www.rittenhousedesign.com/
  • 61. Color http://www.estudioingenia.com/ingenia.htm
  • 62. Color http://www.paginanomade.com.ar/
  • 63. Color http://www.thanea.com/ars/
  • 64. Color http://www.nexuslondon.com/main.html
  • 65. Color http://www.relevare.com/site/
  • 66. 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).
  • 67. Simplicitat en la interacció http://llamamelola.com/
  • 68. Simplicitat en la interacció http://www.microsiervos.com/
  • 69. Simplicitat en la interacció http://www.dontclick.it/
  • 70. Simplicitat en la interacció http://www.ingreme.com/start.html
  • 71. Simplicitat en la interacció http://www.elastique.de/flash/index.php
  • 72. 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
  • 73. Usabilitat en la interacció http://www.psoetv.es/index.html
  • 74. Usabilitat en la interacció http://www.albinoblacksheep.com/flash/blind.php
  • 75. Usabilitat en la interacció Llei de fitts http://fww.few.vu.nl/hci/interactive/fitts/
  • 76. Usabilitat en la interacció Llei de fitts
  • 77. Usabilitat en la interacció http://www.kurtnoble.com/
  • 78. Ú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
  • 79. Ús de metàfores
  • 80. Ús de metàfores http://myweb.rust.net/~no2pencl/
  • 81. Ús de metàfores http://www.stephanh.com/
  • 82. Ús de metàfores http://www.carlosevangelista.com.br/oldport/index.html
  • 83. Ús de metàfores http://www.md-extreme.pl
  • 84. Ús de metàfores http://www.tvcatalunya.com
  • 85. Ús de metàfores http://www.elpais.com/comunes/2005/arco/index.html
  • 86. Ús de metàfores http://www.peepshow.org.uk/
  • 87. Ús de metàfores http://www.diminuta.com/
  • 88. Ús de metàfores http://www.desclides.net/etienne/podfolio/
  • 89. Ús de metàfores http://www.srarushmore.com/html/flash.html
  • 90. Ús de metàfores ¿Podriem pensar en metàfores adients per als nostres projectes?
  • 91. 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.
  • 92. Consistència en el disseny http://www.elblogsalmon.com/
  • 93. Consistència en el disseny http://www.bebesymas.com/
  • 94. Consistència en el disseny http://www.foxsearchlight.com
  • 95. Consistència en el disseny http://www.poesia.com
  • 96. Consistència en el disseny
  • 97. Consistència en el disseny http://www.elutilitario.net/