Interfaces visuales

Interfaces VisualesUna aproximación desde el diseño

o un resumen de conceptos básicos de diseño

jueves 23 de septiembre de 2010

Interfaces Visuales

profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G.

IntroducciónAntecedentes

Conceptos y desarrollosCreadores

Concepto de InterfazDiseño de interfazProceso visual e información

Interfaz gráfica de usuarioUsabilidadSimplicidadWIMP / Post-WIMPInterfaz como sistema

Diseño de la interacción Percepción e interacciónApropiación de la tecnología

Interfaz extendida


Interfaces Visuales


Introducción


Interfaces Visuales


Bibliografía

The Humane Interface: New Directions for Designing Interactive Systems. Jef Raskin. Addison-Wesley Professional, 2000.Interfaces de las Comunidades Virtuales. Felipe C. Londoño L. Universidad de Caldas, 2005. Ergonomía. Fundamentos. Pedro Mondelo. UPC. AlfaOmega. El diseño de la interfaz en los programas de computador.Gui Bonsiepe. Interface. An approach to design. 1999.Interfaz e interactividad. Claudia Giannetti. Estética Digital. El lenguaje de los nuevos medios. Lev Manovich. The MIT Press.


Interfaces Visuales


Documentos para su lectura

Design as Tool for Cognitive Metabolism: From Knowledge Production to Knowledge Presentation", de Gui Bonsieppe.La Interficie como sistema, de Felipe C. Londoño.


Interfaces Visuales


Bibliografía complementaria.

Dix, Alan, J. Finlay, G. Abowd, R. Beale, Human Computer Interaction, second edition, Prentice-Hall, 1998.Lorés, Jesús (Editor), Curso de Introducción a la Interacción Persona-Ordenador, http://griho.udl.es/ipo/libroe.html.Mandel, Theo, The Elements of User Interface Design, John Wiley & Sons, 1997.Norman, Donald, The invisible computer, MIT Press, 1998.Norman, Donald, The design of everyday things, Doubleday, 1990.Preece, Jenny, Human Computer Interaction, Addison-Wesley, 1994.Shneiderman, Ben, Designing the User Interface, Addison-Wesley, 1987.


http://griho.udl.es/ipo/libroe.html

http://griho.udl.es/ipo/libroe.html

Interfaces Visuales


En el contexto tradicional, interfaz es el nombre que resume la interacción persona-ordenador: el hardware y el software a través del cual el usuario interactúa con un hipermedia o un sistema informático.


Interfaces Visuales


Hasta la Revolución Industrial, muy pocas personas sabían operar una máquina, pero, a partir del surgimiento de la tecnología, y con la aparición del televisor, las videocaseteras, la radio, la máquina lavadora o los automoviles, las personas han tenido la experiencia de un “acto de interfaz” con algún equipamiento


Interfaces Visuales


Antecedentes


Interfaces Visuales


Vannevar Bush (11 de marzo de 1890 - 30 de junio de 1974) fue un ingeniero y científico estadounidense. Es conocido por el rol político que tuvo en el desarrollo de la bomba atómica, por su idea Memex, que es un concepto precursor a la World Wide Web y por formar parte del proyecto de alto secreto Majestic 12.


Interfaces Visuales


Fue el inventor teórico, porque aún no existe físicamente, de un dispositivo que llamó MEMEX, Memory Expander. Bush identificó que el crecimiento en la investigación era muy grande y que la información disponible para investigación también creció, pero el acceso a esa información seguía haciéndose en la misma forma que hace 100 años y que esto retrasaba los resultados de los científicos e investigadores. Así, basándose en el funcionamiento de la mente humana pensó en un dispositivo que asociara información, es decir, que operar por asociación y eso fue el MEMEX.


Interfaces Visuales


Alan Mathison Turing (23 de junio de 1912 - 7 de junio de 1954). Fue un matemático, informático teórico, criptógrafo y filósofo inglés.Se le considera uno de los padres de la Ciencia de la computación siendo el precursor de la informática moderna. Proporcionó una influyente formalización de los conceptos de algoritmo y computación: la máquina de Turing. Formuló su propia versión de la hoy ampliamente aceptada Tesis de Church-Turing, la cual postula que cualquier modelo computacional existente tiene las mismas capacidades algorítmicas, o un subconjunto, de las que tiene una máquina de Turing, sele considera el padre de la inteligencia artificial


Interfaces Visuales


John von Neumann zu Margitta (28 de diciembre de 1903 - 8 de febrero de 1957) fue un matemático húngaro-estadounidense, de ascendencia judía, que realizó contribuciones importantes en física cuántica, análisis funcional, teoría de conjuntos, informática, economía, análisis numérico, hidrodinámica (de explosiones), estadística y muchos otros campos de la matemática. Recibió su doctorado en matemáticas de la Universidad de Budapest a los 23 años.Von Neumann le dio su nombre a la arquitectura de von Neumann, utilizada en casi todos los computadores, por su publicación del concepto; aunque muchos piensan que este nombramiento ignora la contribución de J. Presper Eckert y John William Mauchly, quienes aportaron al concepto durante su trabajo en ENIAC.1 Virtualmente, cada computador personal,microcomputador, minicomputador y supercomputador es una máquina de von Neumann. El término "máquina de von Neumann"


Interfaces Visuales


Douglas C. Engelbart (n. en Oregon, Estados Unidos, el 30 de enero de 1925).En otoño de 1968, en una conferencia de expertos en informática, Doug Engelbart hizo una presentación que duró 90 minutos. Además de hacer la primera demostración pública del ratón, incluyó una conexión en panta l la con su centro de investigación, es decir, fue la primera vídeo-conferencia de la historia.


Interfaces Visuales


Como operario de radar en las Filipinas durante la Segunda Guerra Mundial, Engelbart se inspiró en un artículo de Vannevar Bush, 'As We May Think', para buscar la manera de usar las computadoras para mejorar la sociedad. Cuando terminó la guerra, y siguiendo esta idea, Engelbart renunció a su trabajo como ingeniero y se fue a estudiar a UC Berkeley. Allí trabajó en la versión previa de Internet, la red militar ARPANET. Engelbart fue la fuerza motriz detrás del diseño del primer sistema en línea, On-Line System (también conocido como NLS), en el Stanford Research Institute. Su oficina fue el segundo nodo de la red. Junto con su equipo en el Augmentation Research Center desarrolló varios elementos básicos de la interfaz humana de las computadoras actuales, como pantallas con imágenes en bits, ventanas múltiples, y software multiusuario.


Interfaces Visuales


Ivan Edward Sutherland (nació en 1938 en Hastings, Nebraska) es programador informático y un pionero de Internet, entre otras cosas.Ivan Sutherland es considerado por muchos ser el creador de los gráficos de la computadora. Comenzando con su tesis de doctorado, Sketchpad o bloc de bocetos, Sutherland ha contribuido con numerosas ideas al estudio de los gráficos de la computadora y de la interacción de la computadora. Ivan introdujo conceptos tales como el modelado tridimensional de la computadora, simulaciones visuales, diseño automatizado (CAD) y realidad virtual.


Interfaces Visuales



Interfaces Visuales


En 1963, Ivan Sutherland realiza Sketchpad, un equipo con lápiz óptico fijo en la mesa que al moverlo en una dirección activaba acciones en un monitor conectado a una computadora, utilizando además un primer sistema con interfaz simbólico, con manipulación directa de símbolos gráficos. Un operador podía crear gráficos directamente en la pantalla al tocarla con un lapiz de luz. Al cambiar algo en la pantalla, también se cambiaba en la memoria del ordenador. La pantalla en tiempo real se hacía interactiva: “Vivimos en un mundo físico con cuyas propiedades nos hemos familiarizado con el tiempo y que podemos predecir y observar. Pero nos falta la misma familiaridad con conceptos no perceptibles en el mundo físico. Es en la ventana electrónica en donde mirar el maravilloso mundo matemático”.


Interfaces Visuales


Theodore Holm Nelson es un filósofo, sociólogo y pionero de la tecnología de la información estadounidense. Actualmente es profesor de Environmental Information en la Universidad de Keio, Japón, y profesor de multimedia en la Universidad de Southampton, Inglaterra. Pero por lo que es más conocido es por acuñar los términos hipertexto e hipermedia y por ser el fundador del proyecto Xanadu en la década del 60. La idea de Xanadu -surgida después de una visita al Xerox PARC- era crear una biblioteca en línea con toda la literatura de la humanidad. Su padre era Ralph Nelson, director premiado con un Emmy de la Academia, y su madre, Celeste Holm, actriz americana de televisión, también premiada con dicho galardón. El empuje principal de su trabajo ha sido hacer que los ordenadores sean fácilmente accesibles a la gente normal. Su lema es: “el interfaz debe ser tan simple que un principiante en una emergencia pueda entenderlo en un plazo de 10 segundos”.


Interfaces Visuales



Interfaces Visuales


Concepto de Interfaz


Interfaces Visuales


El primer concepto de interfaz se relaciona con el proceso de comunicación del hombre y la máquina. Usualmente se vincula interfaz con una pantalla o una membrana que contiene instrucciones, y su nombre es sinónimo de elementos tangibles dibujados en la superficie, como mapas, dibujos o diseños diversos.


Interfaces Visuales


Un concepto más evolucionado de interfaz, incluye también aspectos cognitivos y emocionales de la experiencia del usuario.


Interfaces Visuales


Dos perspectivas desde el diseño visual

La interfaz como pantalla estáticaLa interfaz como objeto


Interfaces Visuales


La interfaz como pantallaDiseño de interfaces visuales tomando como base las técnicas orientadas a la comunicación

Las interfaces son sistemas de comunicaciónSu diseño debe responder a estándares formales y estéticosLas técnicas que proporcionan mecanismos para el diseño de pantallas estáticas hacen parte de sistemas dinámicos

Principio: El diseño visual es la primera y ultima parte de la interfaz observada por el usuario


Interfaces Visuales


Se retoman las raíces estéticas y funcionales de disciplinas como

Diseño gráficoDiseño IndustrialArquitecturaCine


Interfaces Visuales


En el diseño de interfaces visuales la comunicación se articula a través de un lenguaje (visual) que integra:

Un vocabulario Formal, que parte de elementos básicosUna sintaxis visual que describe y controla la articulación de los elementos en el sistema

“El diseño visual resuelve problemas de comunicación en una forma que va entre la efectividad funcional y el placer estético” Felipe C Londoño 2005.


Interfaces Visuales


Categorías del Proceso visual (Lenguaje).

Elegancia y simplicidad.Escala, contraste, proporción, variables visuales.Organización y estructura visual, organización perceptual.Módulo y secuencia, Diseño basado en retículas.Imagen y representación, Elementos semióticos.Estilo

“La historia del diseño es la histria de la tecnología y las habilidaddes del hombre” Philip Meggs, 1992.


Interfaces Visuales


Elegancia y simplicidad.

PrincipiosUnidad Refinamiento Buena forma


Interfaces Visuales


Reducción formas geométricas simples.

Tamaños y texturasVariaciones tipográficas


http://absolut.com/


http://absolut.com

http://absolut.com

Interfaces Visuales


Elegancia y simplicidad.Errores comunes

Desorden y ruido visual.Interferencia entre elementos competitivos.Utilizar la estructura explícita como soporte.Traducción literal.Excesivo detalle y embellecimientoDimensionalidad gratuitaPresentarlo todo


Interfaces Visuales



TécnicasReducir el diseño a lo esencialRegularizar los elementos del diseñoCombinar los elementos para sacarle el máximo provecho


Interfaces Visuales


Escala contraste proporción variables visuales

PrincipiosClaridadArmoníaActividadControl


Interfaces Visuales



Figura y fondogrupos identificables

Caracterizaciones estéticashttp://www.apple.com/


http://www.apple.com

http://www.apple.com

Interfaces Visuales



Errores comunesContraste insuficienteExcesivo contrasteInterferencias visualesTensión espacialExageradas o reducidas dimensiones


Interfaces Visuales



TécnicasTest de “squint”.Establecer capas perceptuales.Agudizar las distinciones visuales.integrar figura y fondo.


Interfaces Visuales


Organización y estructura visual.Organización perceptual

PrincipiosAgruparJerarquizarRelacionarCrear Balance


Interfaces Visuales



Estructura generalJerarquía

Elementos en conjuntoEquilibrio

simetríaAlineación de Elementos

Ajustes ópticosEspacios negativos

http://www.vw.com/


http://www.vw.com

http://www.vw.com

Interfaces Visuales



Errores comunesCapas desorganizadassimetrías conflictivasrelaciones internas ambiguasEtiquetas alineadas pero no controladas Falsa EstructuraExcesiva densidad en la pantalla


Interfaces Visuales



TécnicasUsar la simetría para asegurar balance.Usar alineamiento para establecer relaciones visualesRealizar ajustes ópticos para la visión humana.Conformar la pantalla con espacios negativos


Interfaces Visuales


Módulo y secuenciaDiseño basado en retículas

PrincipiosElementos enfocados.Flexibilidad.Aplicaciones consistentes.


Interfaces Visuales



cuadrícula de baserepetición

Unificación de los módulosIconos Flexibles

http://sunspotworld.com/


http://sunspotworld.com

http://sunspotworld.com

Interfaces Visuales



Errores comunesPosición arbitraria de los componentesTamaños de ventanas y capas al azarTamaños de iconos y metáforas no relacionadasLenguaje visual inconstante


Interfaces Visuales



TécnicasReforzar la estructura a través de la repetición.Establecer unidades modulares.Establecer secuencias con base a mallas


Interfaces Visuales


Imagen y representaciónElementos semióticos

PrincipiosInmediatezGeneralizaciónCohesividadcaracterización


Interfaces Visuales



Medios adecuados de representación

texto + iconografíasimplicidad visual

formatos de imagen

http://www.mozilla-europe.org/es/firefox/




Interfaces Visuales



Errores comunesSintaxis engañosaEnsamble confusoElementos secundarios dominantesUsar tipografía como imagenUsar imagen para concepto abstractosimagen basada en oscuras alusionesLenguajes dependientes de una culturaMetáforas ofensivas


Interfaces Visuales



TécnicasSeleccionar la imagen correctaRefinar a partir de la abstracción progresivaAsegurar la consistencia visual


Interfaces Visuales


Estilo

PrincipiosDistinciónIntegridadComprensiónApropiación


Interfaces Visuales


Estilo

Guías de estiloObjetivo de los emisores

Reconocimiento del usuarioVariaciones de la aplicación

finalValidación de la interfaz

http://whatisthematrix.warnerbros.com/


http://whatisthematrix.warnerbros.com

http://whatisthematrix.warnerbros.com

Interfaces Visuales


Estilo

Errores comunesInnovación injustificadaCombinar elementos no relacionadosRealización parcialInconsistencias internas y externas


Interfaces Visuales


Estilo

TécnicasRespetar las guías de estilo.Reconocer los emisoresReconocer al públicoTener en cuenta el uso y las variaciones de la aplicaciónTener en cuenta los diferentes soportes


Interfaces visuales

Design

Transcript of Interfaces visuales