Sei sulla pagina 1di 53

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA

UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II


TRAYECTO: III TRIMESTRE: 2

Unidad 3: Diseo de
Interfaz de usuario
DOCENTE:
Prof. Jos Palmar
NOVIEMBRE; 2016

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)


El disear va ms alla del acomodo, ordenamiento y
edicin de elementos, representa una adicin de valor
y significado a la estructura que utilizamos para
desplegar contenido. Sin el diseo, no podramos dar
matices a la informacin que presentamos, es gracias a
l que podemos crear contrastes, iluminar lo que debe
resaltar, simplificar lo complejo y persuadir a la
interaccin.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Existen los Principios de interfaz, planteados por Jakob


Nielsen que plantea 12 y que se mencionan a
continuacin.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Realiza tu trabajo de manera clara y precisa


No hay nada ms importante que mantener la claridad en tus proyectos,
antes que cualquier otra cosa el usuario debe reconocer bien lo que esta
viendo, saber para qu se usa, y entender cmo la interfaz le ayudar a
interactuar con la sistema, la aplicacin o el sitio Web. Si somos precisos, el
usuario podr predecir que pasar si utiliza las partes que exponemos con
nuestro diseo y por supuesto esto llevar a una eventual interaccin. Las
interfaces son diseadas para provocar la interaccin entre el usuario y lo que
tu ofreces.
http://www.ivss.gov.ve/

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Da el control a los usuarios


Los humanos se sienten mucho ms seguros cuando tienen el
control de una situacin, si el entorno de tu sistema, aplicacin o
sitio no es seguro para el usuario, este optar por abandonar el
lugar. Debemos evitar forzar a la gente a realizar interacciones
imprevistas, los caminos confusos resultarn en usuarios perdidos.
http://bancocaroni.com.ve/

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Define bien tus acciones primarias y secundarias


No existe nada que rinda mejores resultados que una
manipulacin directa hacia la interaccin, debemos definir bien
cuales son las acciones principales que el usuario debe llevar a
cabo en nuestro sitio, para que despus, enfoquemos el diseo
de la interfaz. Para lograr un proceso exitoso, debemos evitar
que este tipo de acciones se vean interrumpidas por
distracciones. Trata de mantener una accin primaria por
pantalla.

https://linuxmint.com/

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Da importancia a la consistencia
Siguiendo con la base de los principios anteriores, debemos
establecer que el diseo de elementos debe realizarse de
manera consistente, tratando siempre de utilizar diseos
genricos y a partir de ah ir especificando lo necesario para
cada parte. Es un error caer en modas y perder la uniformidad
por ello, si bien es bueno innovar y utilizar tecnologas
emergentes, quizs sea necesario un rediseo para que se
aplique a todas las partes por igual.

http://www.digitel.com.ve/Personas/Default.aspx

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Utiliza la jerarqua visual


Cuando un usuario ve las mismas cosas, en el mismo orden y sin
alguna referencia, su inters se ir rpidamente, para evitar esto
debemos crear una visualizacin clara de los elementos que
componen nuestra interfaz, estableciendo niveles de
importancia que nos ayuden a determinar los estilos a aplicar.
https://www.ubuntu.com/

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Organiza tus elementos de manera adecuada


La organizacin inteligente de los elementos que se muestran en
una pgina, puede hacer la diferencia entre un diseo
adecuado o no, ya que si sabemos manejarla podemos crear la
impresin de que no existe una sobrecarga, y har que con
menos hagamos mucho ms. Para poder llevar nuestra interfaz a
la organizacin, debemos aprender a agrupar elementos,
relacionarlos, para que de esa manera podamos identificar la
orientacin y colocacin adecuada.

https://elementary.io/es/

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Provee un Siguiente Paso Natural


Realiza un buen Diseo de cada interaccin que una persona
deba hacer en tu interfaz. Anticipa cul ser la siguiente
interaccin y haz un diseo que la ayude a lograrlo, o sea, debes
guiar a tus visitantes en cada paso desde que entran a tu sitio
hasta que lo abandonan.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

La Apariencia revela el Comportamiento


Los seres humanos estamos ms cmodos con las cosas que
reaccionan como lo esperamos. Esto quiere decir, que la
apariencia de los elementos diseados debe revelar cul ser su
comportamiento.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

La Consecuencia Importa
Este principio tiene relacin con el anterior, un elemento no debe
parecer como consecuente de otro, al menos que acte
consecuentemente. Los elementos que acten igual deben lucir
igual, y es importante que los elementos que NO actan igual
NO luzcan igual.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Resalta con Color


Los Colores son una manera de llamar la atencin, define colores
que No sean tan distractivos, pero que a la vez resalten. Los
elementos NO importantes No deben tener colores que resalten.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

El Descubrimiento Progresivo
Muestra solo lo que es necesario en cada pgina. Si las personas
toman la decisin optarn por ver otro contenido de tu pgina.
NO muestres lo que No quieren ver, solo lo que han solicitado.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Principios de Interfaz (usabilidad y accesibilidad)

Ayuda a las personas en el Proceso


En las interfaces ideales esto no es necesario, pero en algunos
casos es necesaria. Muestra ayuda en aspectos singulares
nicamente a los que la puedan necesitar, la mejor manera es
mostrar iconos con texto desplegable a un lado del elemento.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Aspectos del diseo de interfaz

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Aspectos del diseo de interfaz


Diseo de informacin:
Sntesis de informacin,
interpretacin de
jerarquas y conceptos en
el diseo grfico

Diseo de la
interfaz

Identidad visual:
Interpretacin y
adaptacin de
manuales de norma
grficas.

Diseo segn soportes:


Aplicacin e integracin de
elementos segn los
aparatos en los que el
usuario usar la plataforma.
Dependiendo del proyecto,
puede ser mviles, televisores
y/o computadores de
escritorio.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Aspectos del diseo de interfaz


Full responsive: Crear un diseo que se adapte a las distintas
pantallas.
Accesibilidad web: Seguir las normas de accesibilidad que
consideran alternativas para incrementar los potenciales usuarios.

Desarrollo de la
interfaz

SEO: Incluir las etiquetas, plugins y cdigo necesario para la


optimizacin para motores de bsqueda.
Validacin: Cumplir con los estndares HTML/CSS para garantizar una
correcta visualizacin y aseguran el buen funcionamiento del sitio.
Compatibilidad cross browser: Asegurar la visualizacin y funcionamiento
adecuado del sitio en los distintos navegadores disponibles.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Modos de uso y Navegacin

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Modos de uso y Navegacin


Factores de desarrollo: ayudan a mejorar la comunicacin
visual. Esto incluye toolkits y libreras de componentes,
soportes para un rpido prototipado, y adaptabilidad.

Modos de Uso

Factores de viabilidad: tienen en cuenta factores humanos y


expresan una fuerte identidad visual. incluye habilidades
humanas, la identidad del producto, un claro modelo
conceptual, y mltiples representaciones.

Factores de aceptacin: aplica la


entrenamiento y aprobacin del sistema.

documentacin,

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Modos de uso y Navegacin

Proveer un foco inicial para la atencin del


usuario.

Tcnicas de
Navegabilidad

Dirigir la atencin a los items importantes,


secundarios o perifricos.

Asistir la navegacin a travs del material.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos,


fondo de letras, entre otros),

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),


El color es uno de los ms complejos elementos a la
hora de intentar disear una interfaz grfica correcta.
Puede ser una potente herramienta de comunicacin
usada correctamente.

Color

Los colores pueden ser combinados para tomar un


sentido visual.
Cuando el color es usado correctamente la gente
suele aprender ms.
La memoria para la informacin en color parece ser
mucho ms capaz que para la informacin presentada
en blanco y negro.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),

1.- Usar un mximo de cinco, ms menos dos colores. Cuatro


colores distintos son apropiados. Permite mayor sitio adicional
en la memoria a corto plazo (memoria de trabajo).

Gua del uso del


color

2.- Usar colores centrales y perifricos de forma apropiada.


Usar el color azul para reas grandes, no para detalles o texto.
El azul es apropiado para fondos de transparencias y
pantallas. Usar el rojo y el verde para captar la atencin es
una buena medida, el campo visual se adapta fcilmente a
esto.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),

Gua del uso del


color

3.- Usar el mismo color para agrupar elementos relacionados.


La ciencia cognitiva ha avanzado en la nocin de preparar y
el proceso preatento. En este contexto, puedes preparar al
usuario para eventos relacionados usando un cdigo de color
comn. Un grupo de imgenes sucesivas puede mostrarse
para relacionarse usando el mismo color. Colores similares
pueden evocar significados similares. Es preciso mantener el
color de fondo a no ser que exista una poderosa razn, por el
mismo motivo.
4.- Usar un cdigo de formas redundante de la misma manera
que el color. Hace la pantalla ms impermeable a distorsiones
en el color. Los cambios en la claridad del ambiente pueden
provocar cambios en el color percibido.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),


5.- Evitar azul para el texto, lneas finas, y formas pequeas.
Nuestro sistema visual no est nicamente diseado para
estmulos detallados y precisos en longitudes de onda corta.
Sin embargo, el azul es muy aconsejable para el color de
fondo, y se percibe de manera idnea en la periferia del
campo visual.

Gua del uso del


color

6.- Evitar que los colores adyacentes difieran nicamente en


la cantidad de azul. Los lmites que difieran nicamente en la
cantidad de azul se percibirn distintos.
7.- Evitar el rojo y el verde en la periferia de pantallas de gran
escala. Debido a la insensibilidad de la periferia retinal al rojo
y al verde, estos colores deben ser evitados en la periferia en
su forma saturada. El amarillo y el azul son buenos colores
perifricos.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),

Iconos

Iconos ambiguos y claros: Todos los componentes


deberan ser diseados para que su significado no sea
ambiguo.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),

Fondos de letras

Texto ilegible y legible.


La pantalla debe ser fcil de identificar e interpretar, adems de
atractiva y agradable.
Tipografa.
Incluye caractersticas de elementos individuales (tipos de letra y estilos)
y sus agrupamientos (tcnicas de estilo).
Se deber usar un nmero reducido de tipos de letra que sern legibles,
claros y singulares (por ejemplo, para distinguir diferentes clases de
informacin).

Recomendaciones:
- un mximo de 3 tipos de letra en un mximo de 3 tamaos de puntos.
- un mximo de 40-60 caracteres por lnea de texto.
- ajustar el texto a la izquierda y los nmeros a la derecha. En listas, usar
el centrado de texto.
Tipos de letra y estilos recomendados
- usar maysculas y minsculas siempre que sea posible.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Diseo visual (color, iconos, fondo de letras, entre otros),

Proveer de mltiples perspectivas en la pantalla de estructuras


y procesos complejos. Hacer uso de estas mltiples vistas:

Mltiples vistas

- Mltiples formas de representacin.


- Mltiples niveles de abstraccin.
- Vistas alternativas simultaneas.
- Conexiones y referencias cruzadas.
- Metadatos, metatexto y metagrficos.
- Mltiples vistas verbales y visuales.

Prxima clase Evaluacin

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Tiempo de respuesta y
retroalimentacin

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Tiempo de respuesta y retroalimentacin

RETROALIMENTACIN
La retroalimentacin permite el control de un sistema y que el mismo tome
medidas de correccin en base a la informacin retroalimentada. El tiempo
de respuesta del sistema es la primera queja sobre muchas aplicaciones
interactivas, en general se mide desde el punto en que el usuario realiza
alguna accin de control el tiempo se respuesta del sistema tiene dos
caractersticas importantes:
DURACIN
Si la respuesta del sistema se
demora mucho la frustracin y el
estrs del usuario son inevitables.

VARIABILIDAD
Es la desviacin del tiempo de respuesta
promedio. Una baja variabilidad permite
que el usuario establezca un ritmo de
interaccin, aunque el tiempo de
respuesta sea relativamente largo.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Localizacin e
Internacionalizacin

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Localizacin e Internacionalizacin

LOCALIZACIN
Nos referimos a la operacin por la que, sobre un conjunto de
programas que ya han sido internacionalizados, se le
proporciona al programa toda la informacin necesaria para
que pueda manejar su entrada y su salida de un modo que sea
correcto respecto a determinados hbitos lingsticos y culturales
(por ejemplo el signo de la moneda de un pas, el orden en que
se expresan mes, da y ao en una fecha.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Localizacin e Internacionalizacin

INTERNACIONALIZACIN
Es la operacin por medio de la cual se modifica un
programa, o conjunto de programas en un paquete,
para que pueda adecuarse a mltiples idiomas y
convenciones culturales.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Modelos metafricos y
conceptuales

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Modelos metafricos y conceptuales

LA METFORA
Antes de comenzar a disear la interfaz es imprescindible pensar
el concepto que se necesita expresar. Elegir una metfora
adecuada apoya y refuerza el concepto y el proceso de
comunicacin sin distraer, proporcionando una realidad fsica
para el entorno abstracto en el que se tienen que introducir los
usuarios.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Modelos metafricos y conceptuales

CONCEPTUALES
Son los que realmente no estn en el plano, pero se pueden
deducir:
Punto: en donde predomina un color.
Plano: Una rea de cualquier forma geomtrica coloreada.
Volumen: Objetos que tengan profundidad volumtrica.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Psicologa de interfaz de
usuario (HCI)

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Psicologa de interfaz de usuario (HCI)


Las expectativas extradas de los estudios de la psicologa
cognitiva acerca de que las palabras con mayor ndice de
familiaridad serian ms fciles de aprender fueron contradichas
por el hallazgo de que estas fueron las menos precisas de todas.
La psicologa cognoscitiva ha jugado un papel importante en el
diseo de interfaces pues provee las bases tericas sobre cmo
procesa informacin el ser humano. Sin embargo, las
implicaciones del diseo de interfaz llegan ms all de lo
estrictamente tcnico o cognitivo, llegando a poner en duda la
esencia misma de nuestras personas y nuestras relaciones.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de
Interfaz

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de Interfaz


Los patrones de diseo son la base para la bsqueda de soluciones a
problemas comunes en el desarrollo de software y otros mbitos referentes al
diseo de interaccin o interfaces.
Un patrn de diseo resulta ser una solucin a un problema de diseo. Para
que una solucin sea considerada un patrn debe poseer ciertas
caractersticas. Una de ellas es que debe haber comprobado su efectividad
resolviendo problemas similares en ocasiones anteriores. Otra es que debe ser
reutilizable, lo que significa que es aplicable a diferentes problemas de diseo
en distintas circunstancias.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de Interfaz


En 1979 el arquitecto Christopher Alexander aport al mundo de la
arquitectura el libro The Timeless Way of Building; en l propona el aprendizaje
y uso de una serie de patrones para la construccin de edificios de una mayor
calidad, en la que esa mayor calidad se refera a la arquitectura antigua y la
menor calidad corresponda a la arquitectura moderna, que el romper con la
arquitectura antigua haba perdido esa conexin con lo que las personas
consideraban que era calidad.
En palabras de este autor, "Cada patrn describe un problema que ocurre
infinidad de veces en nuestro entorno, as como la solucin al mismo, de tal
modo que podemos utilizar esta solucin un milln de veces ms adelante sin
tener que volver a pensarla otra vez."

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de Interfaz


Los patrones de diseo pretenden:
Proporcionar catlogos de elementos reusables en el diseo de sistemas
software.
Evitar la reiteracin en la bsqueda de soluciones a problemas ya
conocidos y solucionados anteriormente.
Formalizar un vocabulario comn entre diseadores.
Estandarizar el modo en que se realiza el diseo.
Facilitar el aprendizaje de las nuevas generaciones de diseadores
condensando conocimiento ya existente.
Asimismo, no pretenden:
Imponer ciertas alternativas de diseo frente a otras.
Eliminar la creatividad inherente al proceso de diseo.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de Interfaz


Segn la escala o nivel de abstraccin:
Patrones de arquitectura: Aquellos que expresan un esquema organizativo
estructural fundamental para sistemas de software.

Patrones de diseo: Aquellos que expresan esquemas para definir


estructuras de diseo (o sus relaciones) con las que construir sistemas de
software.
Dialectos: Patrones de bajo nivel especficos para un lenguaje de
programacin o entorno concreto.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de Interfaz


La plantilla ms comn es la utilizada precisamente por el GoF y consta de los
siguientes apartados:

Nombre del patrn: nombre estndar del patrn por el cual ser reconocido en la
comunidad (normalmente se expresan en ingls).
Clasificacin del patrn: creacional, estructural o de comportamiento.
Intencin: Qu problema pretende resolver el patrn?
Tambin conocido como: Otros nombres de uso comn para el patrn.
Motivacin: Escenario de ejemplo para la aplicacin del patrn.

Aplicabilidad: Usos comunes y criterios de aplicabilidad del patrn.


Estructura: Diagramas de clases oportunos para describir las clases que intervienen en
el patrn.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Patrones de Diseo de Interfaz (cont.)


Participantes: Enumeracin y descripcin de las entidades abstractas (y sus roles) que
participan en el patrn.
Colaboraciones: Explicacin de las interrelaciones que se dan entre los participantes.
Consecuencias: Consecuencias positivas y negativas en el diseo derivadas de la
aplicacin del patrn.
Implementacin: Tcnicas o comentarios oportunos de cara a la implementacin del
patrn.
Cdigo de ejemplo: Cdigo fuente ejemplo de implementacin del patrn.
Usos conocidos: Ejemplos de sistemas reales que usan el patrn.
Patrones relacionados: Referencias cruzadas con otros patrones.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Estndares de Interfaz

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Estndares de Interfaz

Existen 15 Estndares de interfaz planteados por Bruce


Tognazinni y que se presentan a continuacion.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Estndares de Interfaz
Anticipacin: Anticipa las necesidades del usuario y evitar que pierda
tiempo en la bsqueda de sus soluciones.
Autonoma: Otorgar al usuario la sensacin de control en cualquier
momento y en un entorno abarcable y finito.
Colores distinguibles: Controlar el uso inadecuado de colores debido a los
problemas de distincin por parte de ciertos usuarios.
Consistencia: Cumple con las expectativas de los usuarios y no generar
desconfianza (en tal caso es necesario previamente realizar testeos y
pruebas de usuarios sobre comprobacin y evaluacin con continuidad).
Valor por defecto: Evita desorientar al usuario (en tal caso es conveniente
no utilizar esta denominacin y llamarlo en su lugar valor estndar o
normal).

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Estndares de Interfaz (cont.)


Eficiencia del usuario: Basada en la productividad del usuario y no de la
mquina de forma que hay que mantener al usuario ocupado. No es
aceptable que este est esperando respuesta del sistema.
Interfaces explorables: Otorgar al usuario una clara la ruta que tiene que
seguir para ir adelante o hacia atrs, teniendo la sensacin de un control
total sobre la navegacin.
Ley de Fitts: (sintticamente la ley afirma que el tiempo para obtener un
objetivo est en funcin de la distancia y del tamao del objetivo), para
considerar utilizar grandes iconos para grandes funciones y permitir que
stas se ejecuten de forma ms rpida.
Reduccin de la latencia: Minimiza el tiempo de espera de los usuarios y
permitir que puedan realizar otras tareas mientras el sistema les da
respuesta.
Aprendizaje: Consigue que el tiempo de aprendizaje sea mnimo y permitir
utilizar el sitio de forma los ms completa posible desde el primer momento.

PROGRAMA NACIONAL DE FORMACION EN INFORMATICA


UNIDAD CURRICULAR: INGENIERIA DE SOFTWARE II
TRAYECTO: III TRIMESTRE: III

Estndares de Interfaz (cont.)


Utilizacin de metforas: Plantea analogas que simplifiquen las tareas
(para evitar confundir ms que ayudar es conveniente emplearlas
adecuada y austeramente)
Proteccin del trabajo del usuario: Evita la prdida del trabajo del usuario
en caso de error del sitio y permitir que restaurada la conexin el
usuario encuentre la misma situacin al momento del fallo.
Legibilidad: Facilita la visibilidad en diversos tipos de monitores estndar,
utilizando colores para el texto que aseguren niveles de contraste con el
fondo de pantalla y tamaos adecuado de la fuente.
Seguimiento de las operaciones del usuario: Facilita accesos rpidos
a diferentes partes del sitio.
Interface visible: Evita elementos invisibles de navegacin que impliquen
esfuerzos de memoria en los usuarios Ejemplos de estos elementos podran
ser: mens desplegables, donde el usuario tiene que recordar que el paso
por este men nos abre el submen que nos interesa, indicaciones ocultas,
que aparecen cuando el usuario se aproxima a ciertos espacios de la web

Prxima clase Evaluacin