25
DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Embed Size (px)

Citation preview

Page 1: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

DISEÑO DE INTERFACES

Alejandra Ochoa FerrerMartha Vázquez Esteban

Page 2: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Interfaz Cuando uno usa una herramienta, o accede

e interactúa con un sistema, suele haber “algo” entre uno mismo y el objeto de la interacción.

Por Ejemplo: En una puerta, es el picaporte. En una

máquina expendedora o un ascensor, son los botones

Page 3: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Interfaz Este “algo” nos informa qué acciones son

posibles, el estado actual del objeto y los cambios producidos, y nos permite actuar con o sobre el sistema o la herramienta.

Ese “algo”, que es a la vez un límite y un espacio común entre ambas partes, es la interfaz.

La mejor interfaz es aquella que no se ve. Sin embargo, muchas de ellas, por nuevas y desconocidas, o por conocidas pero mal diseñadas, son visibles.

Page 4: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Importancia de la Interfaz Usabilidad Definimos Usabilidad de un sistema o

herramienta como una medida de su utilidad, facilidad de uso, facilidad de aprendizaje y apreciación para una tarea, un usuario y un contexto dado.

El peso relativo de cada una de estas medias está relacionado con el usuario, la tarea y el contexto. Por ejemplo, la facilidad de aprendizaje puede ser crucial para un producto y poco importante en otro.

Page 5: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Diseño de Interfaces El diseño de interfaces es una disciplina que

estudia y trata de poner en práctica procesos orientados a construir la interfaz más usable posible, dadas ciertas condiciones de entorno.

El entorno dentro del cual se inscribe el diseño de una interfaz y la medida de su usabilidad, está dado por tres factores:

Una persona. Una tarea. Un contexto.

Page 6: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Diseño de Interfaces El diseño de interfaces pertenece a un

campo mayor del conocimiento humano, de origen altamente interdisciplinario, llamado Human Computer Interaction

Page 7: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Tipos de Interfaces

Page 8: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Interfaz de UsuarioLa interfaz de usuario es la forma en que los

usuarios pueden comunicarse con una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo. Sus principales funciones son:

Manipulación de archivos y directorios Herramientas de desarrollo de aplicaciones Comunicación con otros sistemas Información de estado Configuración de la propia interfaz y entorno Intercambio de datos entre aplicaciones Control de acceso Sistema de ayuda interactivo.

Page 9: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Interfaz de Usuario2 tipos de interfaz de usuario:

Interfaces alfanuméricas (intérpretes de mandatos).

Interfaces gráficas de usuario (GUI, Graphics User Interfaces), las que permiten comunicarse con el ordenador de una forma muy rápida e intuitiva.

Page 10: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Interfaz de UsuarioY pueden ser de hardware o de software:

En el primer caso se trata de un conjunto de dispositivos que permiten la interacción hombre-máquina, de modo que permiten ingresar y tomar datos del ordenador.

También están las interfaces de software que son programas o parte de ellos que permiten expresar nuestros deseos al ordenador.

Page 11: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

GUI La interfaz gráfica de usuario (en inglés Graphical

User Interface, GUI) es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos (iconos, ventanas, tipografía) para representar la información y acciones disponibles en la interfaz. Habitualmente las acciones se realizan mediante manipulación directa para facilitar la interacción del usuario con la computadora.

Page 12: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

GUI La interfaz gráfica de usuario es el artefacto tecnológico de

un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.

Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico.

Page 13: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Principios de Diseño El modelo de procesamiento de información que

prevalece en la ha permitido los siguientes principios de diseño: El interfaz tendría que compensar las limitaciones

humanas, tanto físicas como cognitivas, siempre que sea posible. No obstante, tendría que ser "transparente", no ponerse en el camino de las acciones del usuario o impedir su progreso. Por otra parte, el interfaz no tendría que sobrecargar al usuario con complejidades innecesarias o distraerlo de su labor.

Los componentes físicos del interfaz tendrían que ser diseñados ergonómicamente, teniendo presente el confort y la salud del usuario tanto como sus necesidades.

El interfaz tendría que ser consistente.

Page 14: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Principios de Diseño El estilo de interacción no mandado como manipulación

directa y menús son preferibles al lenguaje de orden. Como mínimo, el usuario experimentado tendría que tener capacidad de moverse rápidamente a través de las capas de los menús.

El interfaz tendría de poder tener acciones reversibles. El interfaz tendría que estar sujeto a pruebas al principio

del diseño del proceso y durante su desarrollo. El principio más básico del interfaz sería estar

diseñado alrededor de las necesidades del usuario hasta después de que el sistema haya sido completado, atendiéndose de esta manera las restricciones impuestas por el sistema.

Page 15: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Pasos para Crear una Interfaz Una buena Interfaz permite destinar los esfuerzos

del usuario a una lectura y comprensión más rápida y eficiente del contenido.

Define y aplica los conceptos de Diseño y Diagramación.

Define la cromática y tipografías. Diseña la iconografía y le da sentido y ubicuidad

al accionar de las personas en un medio digital. Construye las Experiencias y entrega las claves

para obtener un aprecio estético. Construye el aspecto de la pieza comunicacional.

Page 16: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Dato Extra

Page 17: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de Fitts En ergonomía, la ley de Fitts es un modelo del movimiento

humano, que predice el tiempo necesario para moverse rápidamente desde una posición inicial hasta una zona destino final como una función de la distancia hasta el objetivo y el tamaño de éste. La ley de Fitts se usa para modelar el acto de apuntar, tanto en el mundo real, por ejemplo con una mano o dedo, como en los ordenadores, por ejemplo con un ratón. Fue publicada por Paul Fitts en 1954.

Page 18: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de Fitts Matemáticamente, la ley de Fitts ha sido

formulada de varias formas diferentes. Una forma común es la formulación de Shannon (propuesta por Scott MacKenzie, y llamada así por su semejanza con el teorema de Shannon) para movimiento sobre una única dimensión:

Page 19: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de FittsDonde: T es el tiempo medio necesario para completar el

movimiento. (Tradicionalmente, los investigadores han usado el símbolo MT, para indicar movement time, «tiempo del movimiento» en inglés.)

a y b son constantes empíricas, y pueden ser determinadas aproximando los datos medidos con una línea recta.

D es la distancia desde el punto inicial hasta el centro del objetivo. (Tradicionalmente, los investigadores han usado el símbolo A para esto, indicando la amplitud del movimiento.)

W es la anchura (width es inglés) del objetivo medida sobre el eje del movimiento. También puede entenderse W como la tolerancia de error permitida en la posición final, dado que el punto final del movimiento debe quedar a +/- W/2 del centro del objetivo.

Page 20: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de Fitts Desde la llegada de interfaces gráficas de usuario (GUI), la

ley de Fitts ha sido aplicada a tareas en las que el usuario debe mover la posición del cursor sobre un objetivo de la pantalla, como un botón u otro widget. La ley de Fitts puede modelar las acciones de point-and-click (señalar y pinchar)

y de drag-and-drop (arrastrar y soltar).

Page 21: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de Fitts Si, como suele afirmarse, la ley sigue siendo correcta para

la acción de señalar con un ratón, algunas consecuencias para el diseño de interfaces de usuario son:

Los botones y otros widgets que hayan de ser señalados en las GUI deben tener un tamaño razonable, siendo muy difícil pinchar en los que sean pequeños.

Page 22: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de Fitts Los bordes (por ejemplo la barra de menús en Mac OS) y esquinas de la pantalla son particularmente fáciles de alcanzar porque el puntero queda en el borde de la misma independientemente de cuánto más se mueva el ratón, por lo que puede considerarse que tienen ancho infinito.

Page 23: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Ley de Fitts Los menús popup pueden ser usados más rápidamente

que los pull-down, al ahorrar desplazamiento el usuario. Los elementos de los menús radiales se seleccionan más

rápidamente y con una tasa de error menor que los de los menús lineales, por dos razones: porque todos están a la misma corta distancia del centro del menú, y porque sus áreas de selección con forma de cuña (que suele extenderse hasta el borde de la pantalla) son muy grandes.

Page 24: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

Resumen Una interfaz es un dispositivo que permite

comunicar dos sistemas que no hablan el mismo lenguaje. Restringido a aspectos técnicos, se emplea el término interfaz para definir el juego de conexiones y dispositivos que hacen posible la comunicación entre dos sistemas.

Sin embargo, cuando hablamos de interfaz (GUI) nos referimos a la cara visible de los programas tal y como se presenta a los usuarios para que interactúen con la máquina.

La interfaz gráfica implica la presencia de un monitor de ordenador o pantalla constituida por una serie de menús e iconos que representan las opciones que el usuario puede tomar dentro del sistema.

Page 25: DISEÑO DE INTERFACES Alejandra Ochoa Ferrer Martha Vázquez Esteban

DISEÑO DE INTERFACES