INTERFACES

Reglas/teoras
Prof: Moiss Maas Moimacar@esc.upv.es

diseo de interfaces El diseo interactivo de interfaces es un proceso independiente de la/s tcnica/s utilizada/s para llevarlo a cabo. Actualmente, el proceso del desarrollo de una interfaz se concibe como un ciclo que consta de 4 etapas, en varios niveles

1. 2. 3. 4.

Diseo Implementacin Medicin Evaluacin/Anlisis

1. 2. 3. 4.

Diseo Implementacin Medicin Evaluacin Diseo

Anlisis de requerimientos del producto. Anlisis de las tareas. Conocimiento del usuario. Generacin de posibles metforas y anlisis de tipo de dilogo. Revisin de posibilidades para la implementacin.

diseo de interfaces

Implementacin
Generacin de prototipos (profundos o amplios, para investigacin general o de ajustes). Desarrollo de la aplicacin, sitio o sistema.

Medicin (Test de usabilidad)

Planificacin (desarrollo del plan, definicin de las medidas, seleccin de participantes, formacin de observadores, preparacin de los materiales). Test (prueba piloto, tests con usuarios).

Evaluacin
Conclusin (anlisis de los datos, elaboracin del informe, resultados y recomendaciones). Comparacin contra estndares (internos y/o externos), versiones anteriores del mismo producto y productos competidores. Verificacin de las diferencias. Generacin de nuevas metas.

Reglas de oro del diseo de interfaces

8 REGLAS

diseo de interfaces

Esforzarse para conseguir consistencia

Deberamos exigirnos secuencias de acciones consistentes, utilizarse terminologa consistente en los mensajes, mens y pantallas de ayuda, emplearse de forma consistente el color, composicin, maysculas, fuentes, etc. Las excepciones, como la necesaria confirmacin de la orden de borrado o no mostrar los caracteres de las contraseas, deberan ser comprensibles y limitadas en nmero.

8 REGLAS

diseo de interfaces

Atender la usabilidad universal.

Reconocer las necesidades de los diversos usuarios, faciliatndo la transformacin del contenido. Diferencias entre segmentos : Principiante/experto, edades, discapacidades y diversidad tecnolgica .

8 REGLAS

diseo de interfaces

Ofrecer realimentacin informativa

Para cada accin del sistema debera haber una realimentacin por parte del sistema.

8 REGLAS

diseo de interfaces

Disear dilogos para conducir a la finalizacin

Crear sistemas claros de conduccin hasta el final del proceso de las secuencias de accin del usuario. Ej: Al final de una compra aparece una ventana o un texto que te indica que tu compra a finalizado.

8 REGLAS

diseo de interfaces

Prevenir errores
Disear el sistema de forma que los usuarios no puedan cometer errores serios. Ej: desabilitar elementos necesarios, etc Si fuera as el sistema debe de indicarle al usuario el error por medio de diferentes interfaces textuales o metafricos.

8 REGLAS

diseo de interfaces

Permitir deshacer acciones de forma fcil

En la medida que podamos disear nuestro interfaz, el usuario puede tener la posibilidad de remediar acciones errneas, por lo tanto construir un sistema reversible. Este sistema suaviza la ansiedad que se puede producir en el usuario. Ej: control + Z

8 REGLAS

diseo de interfaces

Dar soporte al control interno

Los operadores experimentados desean firmemente tener la sensacin de que estn al mando de la interfaz y que la interfaz responde a sus acciones. Las acciones sorprendentes por parte de la interfaz, las secuencias de entrada de datos tediosas, la incapacidad o dificultad para obtener la informacin necesaria y la incapacidad para producir acciones deseadas, crea ansiedad e insatisfaccin EJ: panel de control de windows

8 REGLAS

diseo de interfaces

Reducir la carga de la memoria a corto plazo

Disear sistemas de visualizacin simples, la frecuencia de movimiento de ventana se reduzca y que se asigne suficiente tiempo de entrenamiento para cdigos y secuencias de acciones. * La regla general que los humanos pueden recordar siete ms /menos dos elementos de informacin)

Capacidades relativas de humanos y mquinas

Fuente: Brown, C.Marlin, Human-Computer Interface Design Guidelines, Ablex, Norwood, NJ, 1988

Capacidades relativas de humanos y mquinas

Los humanos generalmente son mejores
Percepcin de estmulos de bajo nivel Detectar estmulos en ambientes ruidosos Reconocer patrones constantes en situaciones diversas Percepcin de eventos inusuales e inesperados Recordar principios y estrategias Recuperar los detalles pertinentes sin una conexin a priori Recurrir a la experiencia y adaptar decisiones a la situacin Seleccionar alternativas si la aproximacin original falla Razonar inductivamente: generalizar a partir de las observaciones Actuar ante emergencias no previstas y situaciones nuevas Aplicar principios para resolver diversos problemas Hacer evaluaciones subjetivas Desarrollar nuevas soluciones Concentrarse en tareas importantes cuando hay sobrecarga

Las mquinas generalmente son mejores

Percepcin de estmulos fuera del rango humano Contar o medir cantidades fsicas Almacenar con exactitud cantidades de informacin codificada Monitorizar eventos preestablecidos Crear respuestas rpidas y consistentes para seales de entrada Memorizar cantidades de informacin detallada con exactitud Procesar datos cuantitativos en las formas establecidas Razonar de forma deductiva: inferir a partir de un principio general Realizar de forma fiable acciones repetitivas preprogramadas Ejercer una fuerza fsica grande y altamente controlada Realizar varias actividades de forma simultnea Mantener las operaciones bajo gran carga de informacin Mantener el rendimiento a lo largo de periodos de timepo extensos Adaptar la respuesta fsica a cambios en la situacin

Modelo de cuatro niveles de interfaz

Desarrollado a finales de:

1970
Conceptual Semntico

Sintctico

Lxico

Fuente: Foley, James D.; van Dam, Andries, Feiner, Steven K, y Hughes, John F., Computer Graphics: Principles and practice in C, Second Edition, Addison-Wesley, Reading, MA, 1995

Modelo de cuatro niveles de interfaz

El nivel conceptual:
Es el modelo mental del usuario del sistema interactivo. Los programas de dibujo artstico, que manipulan pxeles y vectores, operan sobre objetos, son dos modelos mentales para la creacin de imgenes.

Fuente: Foley, James D.; van Dam, Andries, Feiner, Steven K, y Hughes, John F., Computer Graphics: Principles and practice in C, Second Edition, Addison-Wesley, Reading, MA, 1995

Modelo de cuatro niveles de interfaz

El nivel conceptual:
Es el modelo mental del usuario del sistema interactivo. Los programas de dibujo artstico, que manipulan pxeles y vectores, operan sobre objetos, son dos modelos mentales para la creacin de imgenes.

El nivel semntico:
Describe el significado asociado a la entrada del usuario y a la visualizacin de salida de la computadora. Ej: Eliminar un objeto de photoshop.

Fuente: Foley, James D.; van Dam, Andries, Feiner, Steven K, y Hughes, John F., Computer Graphics: Principles and practice in C, Second Edition, Addison-Wesley, Reading, MA, 1995

Modelo de cuatro niveles de interfaz

El nivel sintctico:
Define como las asociaciones del usuario, que tienen asociada semntica, conforman sentencias completas que dan instrucciones a la computadora para realizar tareas. Ej. Eliminar archivo >>>>>seleccin objeto >>tecla enter >>> confirmacin

El nivel lxico:
Se encarga de las dependencias entre dispositivos y de los mecanismos precisos con los que los usuarios especifican la sintaxis. Ej: tecla o doble click de ratn en menos de 200 milisegundos.

Fuente: Foley, James D.; van Dam, Andries, Feiner, Steven K, y Hughes, John F., Computer Graphics: Principles and practice in C, Second Edition, Addison-Wesley, Reading, MA, 1995

ETAPAS DE ACCIN
3 2 1

Etapas de accin

Norman identifica siete etapas de accin, organizadas en un patrn cclico, como modelo explicativo de la interaccin persona-computadora (HCI)

1. Formulacin del objetivo 2. Formulacin de la intencin 3. Especificacin de la accin 4. Ejecucin de la accin 5. Interpretacin del estado del sistema 6. Evaluacin de resultados 7. Ciclo de accin y evaluacin

Fuente: Norman, Donald A, The psychology of everyday things, Basic Books, New York, 1988

MODELO GOMS
Un grupo de investigadores de la Carnegie Mellon University continuaron con la idea de los niveles de anlisis con la descomposicin de las acciones de usuario en pequeas etapas que se pudieran medir.

Propusieron dos modelos:

1. El modelo objetivos, operadores, mtodos y reglas de seleccin (Goals, Operators, Methods + Selection rules) GOMS

2. El modelo nivel de pulsacin

El modelo GOMS postulaba que los usuarios comienzan formulando objetivos (editar documentos) y subobjetivos (insertar palabra).

MODELO GOMS
El modelo objetivos, operadores, mtodos y reglas de seleccin (Goals, Operators, Methods + Selection rules) GOM

1. El modelo GOMS postulaba que los usuarios comienzan formulando objetivos (editar documentos) y subobjetivos (insertar palabra). 2. Luego piensa en trminos de operadores, que son actos elementales, perceptivos, motores o cognitivos cuya ejecucin es necesaria para cambiar cualquier estado mental del usuario(presionar la tecla del cursor UP, DOWN, llevar la mano al ratn, recordar el nombre del archivo) 3. Los usuarios alcanzan sus objetivos utilizando procedimientos , mtodos.(mover el cursor a la situacin deseada) 4. Las reglas de seleccin son las estructuras de control para elegir entre los diversos mtodos disponibles para llevar a cabo un doble objetivo (borrar pulsando repetidamente la tecla de retroceso o borrar seleccionando y pulsando suprimir)

Modelo de interfaz Objeto-accin

Modelos de interfaz objeto-accin (Object-action-interface, OAI )
Estn basados en la representacin visual de objetos y acciones de la tarea del usuario. Hacer un diseo-accin comienza con la comprensin de la tarea. Esa tarea incluye el universo de objetos del mundo real con que trabajan los usuarios para llevar a cabo sus intuiciones y las acciones que aplican a esos objetos.

OAI
Una vez que hay acuerdo sobre los objetos y acciones de tarea y sobre su descomposicin, podemos crear las representaciones metafricas de los objetos y acciones de la interfaz.

Modelo de interfaz Objeto-accin

Modelo de interfaz Objeto-accin

Conceptos de tarea e interfaz , separados por jerarquas de objetos y acciones

universo

intencin

metfora

plan

tomos

etapas

pxeles

Clics

Objetivos
TAREA

Acciones

Objetivos

Acciones

INTERFAZ

Modelo de interfaz Objeto-accin

Resumiendo el modelo OAI es un modelo descriptivo y explicativo que se centra en objetos y acciones de tarea de interfaz. Los detalles sintcticos son mnimos, los usuarios que conocen los objetivos y acciones del dominio de tarea pueden aprender la interfaz de forma sencilla. El modelo OAI est en armona con el conocido mtodo de ingeniera del software del diseo orientado a objetos.

Modelo de interfaz Objeto-accin

Objetos de interfaz:
Un conjunto de objetos de interfaz se encarga del almacenamiento. Los usuarios llegan a comprender que las computadoras almacenan informacin. Esta puede ms tarde refinarse en objetos, como un directorio y los archivos de informacin que contiene. El objeto directorio se refina en un conjunto de entradas de directorio, cada una de ellas tiene un nombre, tamao, fecha de creacin, etc. Mantienen un estructura de bajo nivel

Modelo de interfaz Objeto-accin

Acciones de interfaz:
Las acciones de alto nivel, como hacer una copia de seguridad de una archivo de datos, requieren acciones de seleccin, duplicacin y de guardar. La accin de nivel medio de guardar un archivo se refina en las acciones de seleccionar un destino y mover el archivo sobre un disco remoto, proporcionando un contrasea, sobrescribir versiones previas, asignar nombre al archivo.

Los usuarios llevan a cabo cada accin de bajo nivel seleccionando un botn en un cuadro de dilogo o haciendo click en un elemento de un men desplegable

Modelo de interfaz Objeto-accin

Ej: Carta con editor de TXT
Al escribir una carta utilizando un software informtico los usuario tienen que integrar su conocimiento de los objetivos y acciones de tarea y de los objetos y acciones de interfaz.

Los usuarios deben tener el concepto de Alto nivel de escribir (accin de tarea) una carta (objeto de tarea) y conocer que la carta se guardar como documento (objeto interfaz) y conocer los detalles de la orden guardar (accin de interfaz). Medio nivel , componer una frase y deben reconocer los mecanismo de comenzar a escribir y terminar un frase. Bajo nivel, ortografa de cada palabra (objeto de tarea de bajo nivel), debe conocer dnde estn las teclas para cada carcter (objeto de interfaz de bajo nivel)

Interfaces colaborativos

Interfaces colaborativos

Existen tres tipos de interfaces colaborativos: 1.- Interfaces distributivos asncronos: lugar diferente, instante diferentes

Correo electrnico Grupo de noticias Listas de distribucin Foros de discusin Reuniones Blogs wikis Comunidades en linea

Interfaces colaborativos

Existen tres tipos de interfaces colaborativos: 2.- Interfaces distributivos sncronos: lugar diferente, mismo instante

Chat (IRC) Mensajeria (Messenger) MUD ( Dimensional Multi-Usuarios) MOOS (MUDs orientados a objetos) SMS Audio conferencia /video conferencia (Skype, CU-Seeme, Netmeeting, Live Meeting)

Interfaces colaborativos

Existen tres tipos de interfaces colaborativos: 3.- Interfaces F2F (Face2Face): mismo lugar, mismo instante

Sala de reuniones (Cognito de Group Systems*) (SMART BOARD [Pizarra electrnica]*), Salas de control Espacios pblicos Aulas electrnicas
(Atravs de Porttiles, dispositivos mviles, Bluetooth)

www.groupsystems.com / Universidad de Arizona www.smarttech.com

Interfaces antropomrficos

Recomendaciones no antropomrficas

Ser prudentes a la hora de presentar la computadoras como personas, bien con personajes sintetizados o de dibujos animados Disear interfaces comprensibles, predecibles y controladas por el usuario. Usar humanos adecuados para las presentaciones u orientaciones de audio o video Usar personajes de dibujos en juegos o en software para nios, pero no de forma general en cualquier parte. No usar YO cuando la computadora responde a acciones humanas Usar TU para guiar a os usuarios o para establecer hechos

http://www.alicebot.org/

 Norman, Donald A, The psychology of everyday things, Basic Books, New York, 1988 Brown, C.Marlin, Human-Computer Interface Design Guidelines, Ablex, Norwood, NJ, 1988 Ben Shneiderman, Catherine Plaisant. Designing the User Interface: Strategies for Effective Human-Computer Interaction, 4/E , Addison-Wesley, 2005 Eduardo Mercovich, Siggraph 99 - http://www.gaiasur.com.ar/infoteca/siggraph99/testde-usabilidad-de-un-sitio.html

:)

Prof: Moiss Maas Moimacar@esc.upv.es