Interfaces visuales

Interfaces Visuales
Una aproximación desde el diseño
o un resumen de conceptos básicos de diseño

jueves 23 de septiembre de 2010

Interfaces Visuales
Introducción Interfaz gráﬁca de usuario
Antecedentes Usabilidad
Simplicidad
Conceptos y desarrollos
WIMP / Post-WIMP
Creadores
Interfaz como sistema
Concepto de Interfaz
Diseño de la interacción
Diseño de interfaz
Percepción e interacción
Proceso visual e información
Apropiación de la tecnología
Interfaz extendida

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

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 Interﬁcie 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.


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íﬁco
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 identiﬁcó 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íﬁcos 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
p a n t a l l a c o n s u c e n t ro d e
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 oﬁcina 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áﬁcos 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áﬁcos 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 ﬁló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

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 superﬁcie, 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ática
La interfaz como objeto


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

Las interfaces son sistemas de comunicación
Su diseño debe responder a estándares formales y estéticos
Las 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áﬁco
Diseño Industrial
Arquitectura
Cine


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ásicos
Una 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

Principios
Unidad
Reﬁnamiento
Buena forma


Interfaces Visuales

Reducción formas
http://absolut.com/
geométricas simples.
Tamaños y texturas
Variaciones tipográﬁcas


Interfaces Visuales
Errores comunes
Desorden y ruido visual.
Interferencia entre elementos competitivos.
Utilizar la estructura explícita como soporte.
Traducción literal.
Excesivo detalle y embellecimiento
Dimensionalidad gratuita
Presentarlo todo


Interfaces Visuales

Técnicas
Reducir el diseño a lo esencial
Regularizar los elementos del diseño
Combinar los elementos para sacarle el máximo provecho


Interfaces Visuales
Escala contraste proporción variables visuales

Principios
Claridad
Armonía
Actividad
Control


Interfaces Visuales

Figura y fondo
grupos identiﬁcables http://www.apple.com/

Caracterizaciones estéticas


Interfaces Visuales

Errores comunes
Contraste insuﬁciente
Excesivo contraste
Interferencias visuales
Tensión espacial
Exageradas o reducidas dimensiones


Interfaces Visuales

Técnicas
Test de “squint”.
Establecer capas perceptuales.
Agudizar las distinciones visuales.
integrar ﬁgura y fondo.


Interfaces Visuales
Organización y estructura visual.
Organización perceptual

Principios
Agrupar
Jerarquizar
Relacionar
Crear Balance


Interfaces Visuales
Estructura general
Jerarquía
http://www.vw.com/
Elementos en conjunto
Equilibrio
simetría
Alineación de Elementos
Ajustes ópticos
Espacios negativos


Interfaces Visuales
Errores comunes
Capas desorganizadas
simetrías conﬂictivas
relaciones internas ambiguas
Etiquetas alineadas pero no controladas
Falsa Estructura
Excesiva densidad en la pantalla


Interfaces Visuales

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


Interfaces Visuales
Módulo y secuencia
Diseño basado en retículas

Principios
Elementos enfocados.
Flexibilidad.
Aplicaciones consistentes.


Interfaces Visuales
Módulo y secuencia

cuadrícula de base
http://sunspotworld.com/
repetición
Uniﬁcación de los módulos
Iconos Flexibles


Interfaces Visuales
Módulo y secuencia

Errores comunes
Posición arbitraria de los componentes
Tamaños de ventanas y capas al azar
Tamaños de iconos y metáforas no relacionadas
Lenguaje visual inconstante


Interfaces Visuales
Módulo y secuencia

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


Interfaces Visuales
Imagen y representación
Elementos semióticos

Principios
Inmediatez
Generalización
Cohesividad
caracterización


Interfaces Visuales

Medios adecuados de
http://www.mozilla-europe.org/es/ﬁrefox/
representación
texto + iconografía
simplicidad visual
formatos de imagen


Interfaces Visuales
Errores comunes
Sintaxis engañosa
Ensamble confuso
Elementos secundarios dominantes
Usar tipografía como imagen
Usar imagen para concepto abstractos
imagen basada en oscuras alusiones
Lenguajes dependientes de una cultura
Metáforas ofensivas

Interfaces Visuales

Técnicas
Seleccionar la imagen correcta
Reﬁnar a partir de la abstracción progresiva
Asegurar la consistencia visual


Interfaces Visuales
Estilo

Principios
Distinción
Integridad
Comprensión
Apropiación


Interfaces Visuales
Estilo

Guías de estilo
Objetivo de los emisores http://whatisthematrix.warnerbros.com/
Reconocimiento del usuario
Variaciones de la aplicación
ﬁnal
Validación de la interfaz


Interfaces Visuales
Estilo

Errores comunes
Innovación injustiﬁcada
Combinar elementos no relacionados
Realización parcial
Inconsistencias internas y externas


Interfaces Visuales
Estilo

Técnicas
Respetar las guías de estilo.
Reconocer los emisores
Reconocer al público
Tener en cuenta el uso y las variaciones de la aplicación
Tener en cuenta los diferentes soportes


Interfaces visuales

Más contenido relacionado

Similar a Interfaces visuales (20)

Más de Mario Valencia (13)

Último (20)

Interfaces visuales