Programa Nacional de Formacin en Informtica

Unidad Curricular: Ingeniera del Software II

Mdulo: Fundamentos del Diseo de Software

En qu se basa el diseo de
Interfaz?
Aplicacin de principios y
estndares
Anlisis de interfaces exitosas
Evaluaciones de usabilidad
Resultados de estudios en el rea
cognitiva, social, educativa, entre
otros
Estudios empricos
2

Principios, Estndares o
Patrones?
Ventajas y desventajas del uso de
principios?
Ventajas y desventajas del uso de
estndares?
Otra opcin:
Uso de Patrones de Interaccin

Principios, Estndares o
Patrones?
Ventajas y desventajas del uso de
principios?
Ventajas y desventajas del uso de
estndares?
Otra opcin:
Uso de Patrones de Interaccin

Patrn de Interaccin
Un Patrn de
Interaccin
Describe una
solucin exitosa a un
problema recurrente
concerniente a la
interfaz de usuario,
en un contexto dado

Problema Contexto Solucin

5

Patrn de Interaccin:
Caractersticas
Promueven la
buenos diseos

reutilizacin

de

los

Acortan el tiempo en que un diseador

novato adquiere experiencia
Son una excelente alternativa para
desarrollar interfaces usables para la
WEB, ya que se definen a partir de los
criterios de usabilidad

Patrn de Interaccin:
Antecedentes
Patrn de Interaccin y Patrn de
Diseo de Software son conceptos
diferentes
Los Patrones de Interaccin describen
relaciones visuales, estticas y de
satisfaccin
Existen colecciones de patrones en el
Web.

Patrones
Patrones de arquitectura: expresan un
esquema
organizativo
estructural
fundamental para sistemas software
Patrones de diseo: expresan esquemas
para definir estructuras de diseo (o sus
relaciones) con las que se construirn
software
Idiomas: Patrones de bajo nivel especficos
para un lenguaje de programacin o entorno
concreto
Interaccin: Patrones que permiten el diseo
de interfaces web

Patrn de Interaccin: Utilidad

Describir un problema, su contexto y la
solucin
Generalizar una solucin
Facilitar la comunicacin entre miembros
de distintas disciplinas
Registrar el conocimiento y la experiencia
Facilitar el prototipaje de la interfaz de
usuario
La construccin de software usable

Patrn de Interaccin: Taxonoma

Notacin

Categora
Patrones de Dominio
Patrones de Sistema
Patrones de Tareas
Patrones de Elementos
Compuestos
Patrones de Elementos Simples
Patrones de Usuario

Patrn de Interaccin: Estructura

Nombre,
Clasificacin,
Confianza, Autor

El nombre comunica la idea central. La

clasificacin indica tipo de patrn. La
confianza es, segn el autor, la madurez del
patrn. El autor es quin realiza el patrn

Problema

Problema que resuelve este patrn

Solucin

Solucin que ha mostrado tener xito en este

contexto

Contexto

Condicin(es) en la(s) cual(es) se puede usar

el patrn

Fuerzas

Conflictos que pueden restringir la solucin

Usabilidad

Describe el impacto de usabilidad en la

interfaz al aplicar el patrn

Consecuencias

Describe los resultados de aplicar el patrn

Ejemplos/Contraej
emplos

Muestra soluciones exitosas y/o de mal uso

del patrn

Patrones
Relacionados

Otros patrones
2011 con los que est relacionado
este patrn

11

Patrn de Interaccin: Ejemplo

Nombre,
Autor

Formatos de datos de fechas

Martijn van Welie

Problema

El usuario desea introducir datos de fechas y no desea

preocuparse por la sintaxis del dato.

Solucin

Permitir que el usuario elija la fecha de

un calendario tal como se encuentra en
el mundo real y que slo realice
seleccin (el usuario no tipea).

Contexto

Todos los sistemas que requieran que el usuario

introduzca fechas (importante en interfaces
internacionales)

Fuerzas

Los datos de fechas tienen mltiples sintaxis

Convenciones culturales determinan la sintaxis esperada

Usabilidad

Minimizar carga cognitiva y prevenir errores

Patrn de Interaccin:
Organizacin
D

T2

T1

Men

Se muestra un lenguaje de
patrones, inicia con un
patrn de dominio
Comercio Electrnico que
referencia uno de sistema
amazon.com cuyas tareas
son buscar producto y
preparar orden.
La representacin en la
interfaz de la tarea preparar
orden contiene un elemento
compuesto denominado
carrito de compras.

Patrn de Interaccin: Desarrollo

de Software
Modelo de desarrollo de software OO y la
construccin de la IU

Patrn de Interaccin: Mtodo

CIU
Mtodo para la Construccin de
Interfaz de Usuario
El objetivo principal del mtodo es el desarrollo
de un prototipo de la interfaz de usuario
El mtodo se inscribe en los modelos de
desarrollo de software evolutivos y basados en el
prototipaje
El mtodo debe ser incorporado a un proceso de
desarrollo de software OO que contemple el
resto del ciclo de vida del sistema

Patrn de Interaccin: Mtodo

CIU
El proceso de desarrollo OO debe cumplir
ciertas
caractersticas:
Basado en las funcionalidades del
sistema
Soportado en arquitecturas
Iterativo
Incremental

Patrn de Interaccin: Mtodo

CIU

Patrn de Interaccin: Mtodo

CIU

Prototipo

Mtodo CIU (el proceso)

Mtodo CIU: caractersticas

Facilita la construccin de software
usable
Requiere la participacin del usuario en
la construccin de la interfaz
Provee un medio de comunicacin
sencillo y legible, a ser utilizado por el
grupo de desarrollo multidisciplinario
Facilita la integracin entre la Ingeniera
de Software y la Interaccin HumanoComputador

Mtodo CIU: caractersticas

Minimiza el tiempo de desarrollo de la
interfaz de usuario, promoviendo el
reuso.
Incorporar el prototipaje de la IU al
proceso de desarrollo de software.
Patrones
=
Nuevo Problema:
Gestin
Componentes
de componentes
reutilizables

Repaso
Modelo de Casos de Uso
Define todos los escenarios posibles a partir de las
interacciones del usuario
Modelo Objeto del Dominio
Para su realizacin se identifican los objetos que se
encuentran en el dominio de la aplicacin, las
relaciones entre ellos, la conformacin de los
objetos, operaciones, etc. Se analiza el modelo de
Casos de Uso, las listas de trminos por categoras,
etc.

Ahorcado: Modelos Iniciales

Ejemplo

Ahorcado: Modelo de Casos de

Uso

Ahorcado: Modelo del Dominio

Ahorcado: Patrn de Interaccin

Grupo de Fund. De Diseo

Ahorcado: Patrn de Interaccin

Ahorcado: Patrn de Interaccin

Grupo de Fund. De Diseo

Ahorcado: Patrn de Interaccin

Ahorcado: Lenguaje de Patrones

Ahorcado: Modelo Objetos de

Interfaz
Reificacin

Ahorcado: Modelo Objetos de

Interfaz

Prototipo

Importante . . .

El Proceso de
construir el
Lenguaje de
Patrones es una
forma de construir
la Usabilidad de la
Interfaz

Consultar
http://www.colorschemer.com/online.html
Collection of Patterns in Users Interface Design. Martijn van
Welie (www.welie.com)
Common Ground: a Pattern Language for Human-Computer
Interface Design. Jenifer Tidwell
(http://www.mit.edu/~jtidwell/interaction_patterns.html),
Brighton Usability Pattern Collection
Usability Group at the University of Brighton
(http://www.cmis.brighton.ac.uk/research/patterns/home.html)
Librera de patrones Yahoo
(http://developer.yahoo.com/ypatterns/)