Interfaces

Diseo y programacin

Temas

Introduccin

Reglas doradas

Anlisis y Diseo

Anlisis

Etapas de Diseo

Construccin

Evaluacin de Diseo

Introduccin

Introduccin

Qu es una interfaz?

Quin lo hace?

Por qu es importante?

Introduccin

Qu es una interfaz?

Medio de comunicacin persona-computadora.

Identifica objetos y acciones de cada uno de

ellos

Quin lo hace?

Por qu es importante?

Introduccin

Qu es una interfaz?

Quin lo hace?

Programadores, diseadores involucrados en el

proceso de desarrollo de software

Por qu es importante?

Introduccin

Qu es una interfaz?

Quin lo hace?

Por qu es importante?

Software difcil de usar

Errores del usuario

Software desagradable

Reglas Doradas

Reglas doradas

3 Reglas

Base de un conjunto de principios de diseo de

interfaces

Guas de el procesos de diseos de IU

Reglas doradas

Regla I: Dejar el control al usuario

Dejar el control al usuario

El usuario necesita controlar el sistema

Se debe simplificar el modo de interaccin

Cuidado

Interfaz fcil de construir = Sistema difcil de

utilizar

Dejar el control al usuario

Principios para cumplir con esta regla

Definir modos de interaccin de manera que no

se obligue al usuario a realizar acciones
innecesarias o no deseadas.

Dar una interaccin flexible

Teclado, mouse, touch

Dejar el control al usuario

Principios para cumplir con esta regla

Permitir interaccin interrumpible y reversible

Facilitar la interaccin a medida que aumenta la

habilidad y permitir que se personalice

Dejar el control al usuario

Principios para cumplir con esta regla

Ocultar tecnicismos internos al usuario ocasional

Disear la interaccin directa con objetos que

aparezcan en pantalla

Maximizar, minimizar

Reglas doradas

Regla II: Reducir la necesidad de que el usuario

memorice

Reducir la necesidad de
que el usuario memorice

Ms cosas por recordar, mayor probabilidad de

errores

Permitir el recordar informacin pertinente

Reducir la necesidad de
que el usuario memorice

Principios para cumplir con esta regla

Reducir la demanda de memoria a corto plazo

Definir atajos intuitivos

Distribucin visual

Metfora del mundo real o conocido

Revelar informacin de manera progresiva

Reglas doradas

Regla III: Hacer consistente la interfaz

Hacer consistente la interfaz

Qu implica?

Cumplir con reglas de diseo en todas las

pantallas

Limitar mecanismos de entradas a un conjunto

pequeo

Definir mecanismos de transicin de actividades

Reglas doradas

Principios para cumplir con esta regla

Permitir el poner la tarea en un contexto

significativo

Dar indicaciones (ttulos, iconos, cdigo de

colores)

Mantener la consistencia en la familia de

aplicaciones

Anlisis y diseo de la
interfaz de usuario

Anlisis y diseo de Interfaz

Proceso iterativo, similar al modelo en espiral

Incluye 4 tareas

Anlisis y modelado de interfaz

Diseo de interfaz

Construccin

Validacin

Anlisis y diseo de Interfaz

Anlisis de interfaz

Centrado en perfil de los usuarios

Consideraciones

Nivel de habilidad

Comprensin de los procesos

Receptividad al nuevo sistema

Anlisis y diseo de Interfaz

Anlisis de interfaz

Considera caractersticas fsicas:

Ubicacin fsica de la interfaz

Posicin y tareas del usuario

Hardware de la interfaz (espacio, iluminacin, ruido)

Consideraciones especiales (humanas,

ambientales)

Anlisis y diseo de Interfaz

Diseo de la interfaz

Definir objetos y acciones

Construccin de la interfaz

Poder efectuar todas las tareas definidas

Creacin de prototipos

Validacin de interfaz

Capacidad de implementar las tareas

Facilidad de uso y aprendizaje

Aceptacin del usuario

Anlisis y diseo de Interfaz

ANALISIS DE INTERFAZ

De donde sacamos la informacin?

Entrevistas

Usuarios

Otros sistemas

Anlisis y diseo de Interfaz

ANALISIS DE INTERFAZ

Paso 1: Anlisis de usuario

Nivel de educacin

Idioma

Importancia del software en su da a da

Anlisis y diseo de Interfaz

ANALISIS DE INTERFAZ

Paso 2: Anlisis y modelado de las tareas

Qu trabajo realizar el usuario?

Qu tareas y subtareas se realizan?

Qu dominio de problema se manipular?

Secuencia de tareas?

Jerarqua de las tareas?

Anlisis y diseo de Interfaz

ANALISIS DE INTERFAZ

Paso 2: Anlisis y modelado de las tareas

Tcnicas de apoyo

Casos de uso

Diagrama de actividades

Diagrama de secuencia

Requerimientos del sistema

Anlisis y diseo de Interfaz

ANALISIS DE INTERFAZ

Paso 3: Anlisis de contenido de pantalla

Se debe considerar la esttica y el formato del contenido

Uso de color

Entrega de reportes

Modificacin de ubicaciones del contenido

Mensajes de error y advertencias

Anlisis y diseo de Interfaz

ANALISIS DE INTERFAZ

Paso 4: Anlisis del ambiente de trabajo

Tipo de dispositivo

Lugar fsico

Compartir informacin

Iluminacin

Altura de pantalla

Anlisis y diseo de Interfaz

DISEO DE INTERFAZ

Al igual que un proceso ingenieril, es un proceso

Definir objetos y acciones de la interfaz

Definir eventos que hacen cambiar el estado de la interfaz de usuario

Acciones del usuario

Ilustrar estados de la interfaz

Operaciones

Visiones reales

Indicar interpretaciones del usuario

Anlisis y diseo de Interfaz

DISEO DE INTERFAZ

Se debe comenzar con bosquejos (prototipos no

funcionales)

Considerar

Apegarse a Reglas Doradas

Modelar de la misma forma en que se implementar la

interfaz

Considerar ambiente (Pantalla, SO, Lenguaje de

desarrollo)

Anlisis y diseo de Interfaz

DISEO DE INTERFAZ

Aspectos del diseo

Tiempo de respuesta

Herramientas de ayuda

Manejo de errores

Leyenda de mens y comandos

Accesibilidad de la aplicacin

Internacionalizacin

Anlisis y diseo de Interfaz

CONSTRUCCIN DE INTERFAZ

Principios y lineamientos

Previsin: Intuir el siguiente movimiento

Comunicacin: Informar estado de las

actividades

Consistencia: Seguir patrones y diseos.

Tipografas, colores, etc.

Anlisis y diseo de Interfaz

CONSTRUCCIN DE INTERFAZ

Principios y lineamientos

Autonoma controlada: Permitir libertad, no

libertinaje

Eficiencia: Optimizar tiempos de respuesta y

de accesos

Flexibilidad: Accesos directos o ms largos

Anlisis y diseo de Interfaz

CONSTRUCCIN DE INTERFAZ

Principios y lineamientos

Centrar: Enfocar el sistema en las tareas actuales del

usuario

Ley de Fitt: Tiempo para llegar a un objetivo est en

funcin de la distancia que hay hasta l y del tamao
que tenga

Aprendizaje: Minimizar el tiempo de aprendizaje,

minimizar tiempo de reaprendizaje

Anlisis y diseo de Interfaz

CONSTRUCCIN DE INTERFAZ

Principios y lineamientos

Metforas: El uso de metforas permite un

aprendizaje veloz

Integridad de productos

Legibilidad

Anlisis y diseo de Interfaz

CONSTRUCCIN DE INTERFAZ

Principios y lineamientos

Seguimiento al estado: Seguimiento a las

acciones

Navegacin visible: Ubicacin

Anlisis y diseo de Interfaz

EVALUACIN DE DISEO