Interfaces
Upcoming SlideShare
Loading in...5
×
 

Interfaces

on

  • 752 views

Ejemplo de interfaces

Ejemplo de interfaces

Statistics

Views

Total Views
752
Views on SlideShare
752
Embed Views
0

Actions

Likes
0
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Interfaces Interfaces Presentation Transcript

  • Interacción Hombre-MáquinaInteracción Hombre-Máquina Diseño de Interfaces Prof. Adelaide Bianchini Depto. de Computación y Tecnología de la Información Universidad Simón Bolívar - Caracas. Enero 2006
  • Interacción Hombre-MáquinaAgenda  Motivación
  • Interacción Hombre-MáquinaAgenda  Motivación  Aspectos históricos
  • Interacción Hombre-MáquinaAgenda  Motivación  Aspectos históricos  Estilos de interfaces
  • Interacción Hombre-MáquinaAgenda  Motivación  Aspectos históricos  Estilos de interfaces  HCI – Human Computer Interaction
  • Interacción Hombre-MáquinaAgenda  Motivación  Aspectos históricos  Estilos de interfaces  HCI – Human Computer Interaction  Conceptos generales
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?“Medio de comunicación y lenguaje de algo no necesariamente trivial"
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?“Medio de comunicación y lenguaje, de algo no necesariamente trivial"“La superficie de contacto entre dos entes disímiles”
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?“Medio de comunicación y lenguaje, de algo no necesariamente trivial"“La superficie de contacto entre dos entes disímiles”“Todos los intercambios que suceden entrela persona y el computador (o cualquier dispositivo)”
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?La interfaz es la parte (hardware y software) delsistema informático que facilita al usuario elacceso a los recursos del computador.
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?La interfaz es la parte (hardware y software) delsistema informático que facilita al usuario elacceso a los recursos del ordenador.Para saber acerca de las interfaces, se requiereconocer las tareas de interacción que puederealizar un individuo.
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?Para saber diseñar interfaces, se requiere conoceralgunos aspectos relacionados con los individuos.Es decir, se requiere analizar las peculiaridades delos usuarios.
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?Para saber diseñar interfaces, se requiere conoceralgunos aspectos relacionados con los individuos.Es decir, se requiere analizar las peculiaridades delos usuarios.Se requiere además, conocer las características delos dispositivos que se utilizarán.
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?El diseño de interfaces y el diseño de interacciónson áreas de interés de la disciplina llamadaFactores Humanos (Human Factors) , tambiénllamada Interacción Humano-Computador (HCI –Human-Computer Interaction).
  • Interacción Hombre-MáquinaMotivación  ¿Qué es la Interfaz?El diseño de interfaces y el diseño de interacción esson áreas de interés de la disciplina llamadaFactores Humanos (Human Factors) , tambiénllamada Interacción Humano-Computador (HCI –Human-Computer Interaction).El objetivo primordial de esta disciplina esdesarrollar técnica y métodos para mejorar lainteracción entre los humanos y las máquinas (elcomputador, entre ellas).
  • Interacción Hombre-MáquinaAspectos históricos
  • Interacción Hombre-MáquinaAspectos históricos1963. Ivan Sutherland. SketchPad.El sistema soportaba la manipulación de objetos gráficosmediante un lápiz óptico, permitiendo coger los objetos,moverlos y cambiarles el tamaño utilizando algunasrestricciones.1963. Elgerbart. Diseña el primer “mouse”.
  • Interacción Hombre-MáquinaAspectos históricos1968. MIT’s Lincoln Labs. AMBIT/G. Estesistema incluyó representaciones de iconos,reconocimiento de gestos, menús dinámicos con laayuda de dispositivos apuntadores y selección deiconos apuntándolos.
  • Interacción Hombre-MáquinaAspectos históricosAños 70. Xerox PARC.Crearon el modelo y los dispositivos para lasinterfaces que incluían ventanas, menúes, íconos,botones, etc. Era la antesala de las interfaces quehoy conocemos como manipulación directa.Otro importante hito de aquellas investigacionesfue la idea de WYSIWYG (What You See Is What YouGet)
  • Interacción Hombre-MáquinaAspectos históricos1977. ALAN KAY, Xerox PARC: Dynabook.1981. Xerox Star. Sale al mercado el primer sistemacomercial que hace extenso el uso de la ManipulaciónDirecta: Xerox Star . Le siguen el Apple Lisa en 1982y el Macintosh en 1984.1982. Ben Shneiderman, Universidad deMaryland. Acuñó el término “Manipulación directa”,identificando además los distintos componentes.
  • Interacción Hombre-MáquinaEstilos de Interfaces
  • Interacción Hombre-MáquinaEstilos de interfacesLos estilos de interfaces predominantes son: • La interfaz por línea de comandos • Menús y formularios • Manipulación directa - GUI • Interfaces con interacción asistida
  • Interacción Hombre-Máquina HCI – HumanComputer Interaction
  • Interacción Hombre-MáquinaHCI – Human Computer InteractionEs la disciplina que se encarga de los siguientesprocesos: • diseñar • evaluar • implementar artefactos en sistemas interactivos utilizados por humanos + el estudio de los fenómenos que rodean estos procesos
  • Interacción Hombre-MáquinaHCI – Human Computer Interaction¿Cómo diseñar para mejorar la interacciónhombre-máquina? Contextos básicos a considerar
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina? Contextos básicos a considerar Físicos  relacionados con el hardware y dispositivos de interfaz
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina? Contextos básicos a considerar Físicos  relacionados con el hardware y dispositivos de interfaz Sintácticos  • presentación de información • secuencia, orden de las acciones
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina? Contextos básicos a considerar Físicos  relacionados con el hardware y dispositivos de interfaz Sintácticos  • presentación de información • secuencia, orden de las acciones Semánticos  • significado de los objetos • significado de las acciones
  • Interacción Hombre-MáquinaHCI – Human Computer Interaction Usos y contextos Aspectos sociales Áreas de aplicación y organizacionales y tareas Humanos Máquinas Diálogos Procesamient o de información Metáforas Lenguajes y comunicación Dispositivos Diseño Ergonomía I/O Gráfico
  • Interacción Hombre-MáquinaHCI – Human Computer Interaction Psicología Computación Cognitiva Psicología Social Ergonomía HCI Ingeniería y Diseño Lingüística Inteligencia Artificial Filosofía, Sociología y Antropología
  • Interacción Hombre-MáquinaObservar al usuarioAnálisis del usuarioLengua y lenguajeCanales de comunicación  TiposIntegración HumanosInteracción  Primitivas Procesamient o de información Lenguajes y comunicación Ergonomía
  • Interacción Hombre-MáquinaConceptos generales – Análisis del usuarioImplica conocer aspectos como:  Habilidades físicas y sensoriales.  Habilidades cognitivas.  Diferencias de personalidad.  Diferencias culturales.  Escenarios: • Las tareas. • Entorno físico y social.
  • Interacción Hombre-MáquinaConceptos generales – Lengua y lenguaje• El lenguaje natural del hombre es la capacidad multisensorial y multimedial del hombre para comunicarse entre si.
  • Interacción Hombre-MáquinaConceptos generales – Lengua y lenguaje• El lenguaje natural del hombre es la capacidad multisensorial y multimedial del hombre para comunicarse entre si.• El lenguaje natural es a la vez un fenómeno individual y social: el individuo habla el (o los) idiomas de uno o varios grupos humanos.
  • Interacción Hombre-MáquinaConceptos generales – Lengua y lenguaje• La lengua es el lenguaje hablado y escrito, enseñado, cuidado y transmitido por una determinada comunidad a lo largo de un período histórico significativo.• La lengua es estudiada por la lingüística.
  • Interacción Hombre-MáquinaConceptos generales – Lengua y lenguaje• La lengua es artificial y puede alejar al hombre de sus raíces más profundas. Una lengua puede morir si no logra transformarse constantemente al contacto con el lenguaje natural.
  • Interacción Hombre-MáquinaConceptos generales – Lengua y lenguaje• La lengua es artificial y puede alejar al hombre de sus raíces más profundas. Una lengua puede morir si no logra transformarse constantemente al contacto con el lenguaje natural.• El lenguaje es un fenómeno natural. La lengua es producto de una civilización.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Los canales de comunicación dependen de un medio de transmisión, de los equipos de transducción y traducción y del aparato sensori-motor del hombre, capaz de producir y recibir mensajes por estos canales.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Se utilizan normalmente tres canales: • el visual, • el auditivo y • el háptico o gestual.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Se utilizan normalmente tres canales: • el visual, • el auditivo y • el háptico o gestual.• El hombre trata de ampliar el ancho de banda de los canales de comunicación.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Canal háptico o gestual: El gesto es un signo no persistente y funciona por medio del contacto físico directo o mediante la percepción de posturas del cuerpo humano.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Canal háptico o gestual: El gesto es un signo no persistente y funciona por medio del contacto físico directo o mediante la percepción de posturas del cuerpo humano. La computación entiende ciertos gestos bien definidos, pero es en general muy pobre para producir gestos.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Canal auditivo: Es el primer canal de contacto con el mundo del hombre. Es el primer canal lingüístico de cada hombre. Es un canal bidireccional.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Canal auditivo: Es el primer canal de contacto con el mundo del hombre. Es el primer canal lingüístico de cada hombre. Es un canal bidireccional. La computación produce y empieza a entender los signos auditivos.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Canal visual: El canal visual tiene el ancho de banda más importante de todos los canales de comunicación. La comunicación visual es la más importante para la existencia y utilización de símbolos para la comunicación.
  • Interacción Hombre-MáquinaConceptos generales – Canales de comunicación• Canal visual: La historia de la computación es al mismo tiempo la historia de la ampliación y plena integración de este canal en las aplicaciones. La computación produce y empieza a entender signos visuales.
  • Interacción Hombre-MáquinaConceptos generales – Integración• La interfaz es el indicio del esfuerzo del hombre para integrar la computación en la comunicación general del hombre.
  • Interacción Hombre-MáquinaConceptos generales – Integración• La interfaz es el indicio del esfuerzo del hombre para integrar la computación en la comunicación general del hombre.• Es el reconocimiento que un programa antes de ser cálculo y evaluación lógica es un lenguaje y un intento de comunicación.
  • Interacción Hombre-MáquinaConceptos generales – Integración• Las interfaces tienden a utilizar de manera natural todos los canales de comunicación que se disponen.• En la evolución histórica se podrá observar este hecho.
  • Interacción Hombre-MáquinaConceptos generales – Interacción• El intercambio de información entre un usuario y un sistema informático.
  • Interacción Hombre-MáquinaConceptos generales – Interacción• El intercambio de información entre un usuario y un sistema informático.• El intercambio tiene asociado un lenguaje, por consiguiente una sintáxis y una semática.
  • Interacción Hombre-MáquinaConceptos generales – Interacción• El intercambio de información entre un usuario y un sistema informático.• El intercambio tiene asociado un lenguaje, por consiguiente una sintáxis y una semática.• Se interactúa con objetos para activar acciones y eventos.
  • Interacción Hombre-MáquinaConceptos generales – Interacción• Todo está basado en las primitivas de interacción:  Posicionamiento Obtención de una posición u orientación (2D y 3D) Ejm. Aplicación de dibujo
  • Interacción Hombre-MáquinaConceptos generales – Interacción• Todo está basado en las primitivas de interacción:  Introducir Valor Obtención de un dato cuantificable (numérico, porcentual, etc.) Ejm. Datos sensibles en una aplicación
  • Interacción Hombre-MáquinaConceptos generales – Interacción• Todo está basado en las primitivas de interacción:  Introducir Texto Introducción de un texto o identificador Ejm. Nombre de un archivo
  • Interacción Hombre-MáquinaConceptos generales – Interacción• Todo está basado en las primitivas de interacción:  Selección Obtención de una alternativa (entre varias posibles. Puede ser sobre un conjunto finito o un conjunto de cardinalidad variable.
  • Interacción Hombre-MáquinaConceptos generales – Interacción• Todo está basado en las primitivas de interacción:  Arrastre Secuencia de posiciones entre un punto inicial y otro final. Ejm. Mover un documento hacia otra carpeta.
  • Interacción Hombre-MáquinaConceptos generales – Interacción
  • Interacción Hombre-MáquinaConceptos generales – Interacción
  • Interacción Hombre-MáquinaConceptos generales – Interacción
  • Interacción Hombre-MáquinaConceptos generales – Interacción ¿Cómo interactúa el usuario con esta aplicación?
  • Interacción Hombre-MáquinaConceptos generales – Interacción
  • Interacción Hombre-MáquinaDiseño de interfaces
  • Interacción Hombre-MáquinaObjetivos de una buena interfaz:• Maximizar la velocidad de aprendizaje• Minimizar la tasa de errores• Maximizar la velocidad de uso• Estética adecuada
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina? Diseño centrado en el usuarioPrincipiosReglas • Estándares • Directrices  Guías de estilo
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Principios Son conceptos de muy alto nivel que deben ser utilizados en el diseño de aplicaciones.
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Principios – A modo de ejemplo Aliviar la carga cognitiva • Confiar en el reconocimiento • Proporcionar pistas visuales • Proporcionar opciones por defecto • Proporcionar atajos
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Principios – A modo de ejemplo (cont.) Aliviar la carga cognitiva • Promover la sintaxis objeto–acción • Emplear metáforas del mundo real • Emplear la revelación progresiva para evitar abrumar al usuario. • Promover la claridad visual
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Reglas de diseño Guían al diseñador con el fin de incrementar la “usabilidad”. Se clasifican en estándares y directrices.
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Estándares Son requisitos, reglas o recomendaciones basadas en principios probados y en práctica.
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Directrices Las directrices recomiendan acciones que se basan en un conjunto de principios de diseño. Son más específicas que los principios y requieren menos experiencia para entenderlas e interpretarlas que éstos.
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Guías de estilo Llamadas también guías corporativas. Están basadas en principios y contienen directrices que se concretan a muy bajo nivel.
  • Interacción Hombre-Máquina¿Cómo diseñar para mejorar la interacciónhombre-máquina?Guías de estilo Llamadas también guías corporativas. Están basadas en principios y contienen directrices que se concretan a muy bajo nivel. Las guías de estilo corporativas se centran en presentaciones comunes, comportamientos y técnicas que deben ser implementadas por todos los productos en una compañía.
  • Interacción Hombre-MáquinaObjetos de las interfaces
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasVentanasMenúesÍconosBotonesCamposetc.
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasVentanas
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasVentanas tipo diálogo
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMenúes
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasÍconos
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasBotones
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasCampos
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficas ¿Qué es?MetáforasEs un tropo fundamental de la retórica.Es una descripción de una situación desconocidautilizando una situación conocida.
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforasExisten metáforas visuales: • Basados en en lenguaje visual • Se asocian a estructuras, clases, objetos, atributos a nombres y operaciones • Se pueden asociar procesos y algoritmos a verbos
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforasEjm. (palabras)TV: programas, canales, redes, anuncios, guías,noticiasJuegos: reglas del juego, piezas del juego, tablerodel juegoÁrboles: raíces, tronco, ramas, hojas
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforasExisten metáforas verbales, basadas en lautilización de verbos para “denotar” acciones.Ejm. Mover: navegar, conducir, volar Localizar: apuntar Seleccionar: tocar un elemento, poner el dedo sobre.... Crear: añadir (nuevo), copiar Borrar: botar, destruir, perder, cortar
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforasExisten metáforas verbales, basadas en lautilización de verbos para “denotar” acciones.Ejm. Mover: navegar, conducir, volar Localizar: apuntar Seleccionar: tocar un elemento, poner el dedo sobre.... Crear: añadir (nuevo), copiar Borrar: botar, destruir, perder, cortar
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforasExisten metáforas del mundo realEjms.: Semáforo (¿aplicaciones?) Colores A.K. + S.J. Escritorio (global) Levantamiento y diagramación de textos (acciones)
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforas  UtilidadUtilidad práctica: se espera que permita unentendimiento más rápido de la situacióndesconocida y que acelere el aprendizaje de unaherramienta mediante el conocimiento que setiene del mundo real.
  • Interacción Hombre-MáquinaObjetos de las interfaces gráficasMetáforasUtilidad comunicacional: La metáfora va creandocomunicación mediante su posibilidad de dejar deser metafórica y convertirse en expresión directa dela lengua, así la metáfora crea lengua ampliandolos elementos básicos de comunicación y dandoposibilidades nuevas de comunicación.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasConsistenciaLa consistencia en un interfaz permite a losusuarios transferir sus conocimientos y destrezasde una aplicación a otra.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasConsistenciaLa consistencia en un interfaz permite a losusuarios transferir sus conocimientos y destrezasde una aplicación a otra.La consistencia en las interfaces gráficas ayuda alos usuarios a aprender y reconocer fácilmente ellenguaje gráfico de esa interfaz.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasConsistenciaLa consistencia en el comportamiento de unainterfaz significa que los usuarios aprenden cómohacer las cosas, por ejemplo apuntar y seleccionar,una sola vez.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasControl del usuarioEl usuario y no el computador (o aplicación)inicia y controla las actividades.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasControl del usuarioEl usuario y no el computador (o aplicación)inicia y controla las actividades.ToleranciaPosibilidad de ofrecerle al usuario la capacidad derecuperarse de los errores.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasRetroalimentación y diálogoEl usuario debe estar constantemente informadode lo que está ocurriendo con los procesos.Diálogo simple al alcance del usuarioLa información que recibe el usuario debe serentendible y a su alcance.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasIntegridad estéticaLa información se encuentra organizada en formaadecuada y consistente con los principios dediseño visual.El número de elementos y su respectivocomportamiento debe ser limitado para aumentarla “usabilidad” de la interfaz.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasIntegridad estéticaSe debe asegurar de mantener la semántica dellenguaje gráfico o del lenguaje asociado a lainterfaz.No cambiar el significado de los objetos que sonestándares.
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficasUso de metáforasManipulación directa de los objetos • • • • •
  • Interacción Hombre-MáquinaAlgunos principios de diseño de interfaces gráficas
  • Interacción Hombre-MáquinaContinuará .....