FACULTAD DE INGENIERA ELECTRNICA E INFORMTICA

INGENIERIA DE
SISTEMAS E
INFORMACION II
TEMA:CUARTA SEMANA
-Herramientas de Diseo

-Tipos de herramientas
-Objetivos de las herramientas de diseo
- Categoras de las herramientas de desarrollo
-Diseo de la interfaces de usuarios
-Objetivos de la interfaz de usuario
-Tipos de interfaz
-Normas la interfaz
-La retroalimentacin

INTEGRANTES:: Guadamur Cauti Thersi

Huamn Crdenas Mijail
Snchez Callirgos Osmar

Introduccin
Etapas del Diseo del Sistema
El Diseo de los datos
El Diseo Arquitectnico
El Diseo de la Interfaz
El Diseo de procedimientos

Tipos de herram ientas

Herramientas de especificacin

Apoyan el proceso de formular las

caractersticas que deben tener una
aplicacin
Herramientas para presentacin
Se utilizan para describir la posicin de
datos

H erram ientas C A SE
ComputerAidedSoftwareEngineering,inge
niera de softwareasistida porcomputadora
El empleo de herramientas Case permiten
integrar el proceso de ciclo de vida:
Anlisis de datos y procesos integrados
mediante un repositorio.
Generacin de interfaces entre el anlisis
y el diseo.
Generacin del cdigo a partir del diseo.
Control de mantenimiento.

Tipos de H erram ientas Case

No existe una nica clasificacin de
herramientas CASE y, en ocasiones, es difcil
incluirlas en una clase determinada. Podran
clasificarse atendiendo a:

Las plataformas que soportan.

Las fases del ciclo de vida del

desarrollo de sistemas que cubren.

La arquitectura de las aplicaciones
que producen.
Su funcionalidad.

Ejemplo: Utilizando la
funcionalidad como criterio
principal, es la siguiente
Herramientas de planificacin de sistemas de
gestin
Herramientas de anlisis y diseo
Herramientas de integracin y prueba
Herramientas de gestin de prototipos
Herramientas de mantenimiento
Herramientas de gestin de proyectos
Herramientas de soporte

O bjetivos de las herram ientas de diseo

Satisfacer los requerimientos de los usuarios:

Especificar los elementos de diseo lgico
Proporcionar las especificaciones de software
Ajustarse a estndares de diseo
Fcil de usar

Categoras de las herram ientas de

desarrollo

Herramientas de tipo front-end

Herramientas de tipo back-end
Herramientas integrales

 Front-end: lado del cliente (HTML, CSS,

HTML5, CSS3, Javascript, jQuery)
Son los encargados de maquetar la estructura semntica del contenido
(HTML), codificar el diseo en hojas de estilo (CSS) y agregar la
interaccin con el usuario (Javascript).

 Back-end: Orientado hacia el lado del

servidor (PHP, Ruby on Rails, Django,
Node.js, .NET)
En Facebook, por ejemplo, PHP manda la estructura bsica del sitio
web, pero son mltiples programas y servidores hechos en C++ o
Erlang los que procesan la informacin en tiempo real (chats,
comentarios, notificaciones) y las envan y reciben a travs de
Javascript en el navegador.

D iseo de la interfaces de usuarios

Q u es una diseo interfaz de usuario?

El diseo de la interfaz de usuario

crea un medio de eficaz de

comunicacin entre los seres
humanos y la computadora.
Siguiendo un conjuntos de principios
de diseo de interfaz , el diseo
identifica los objetos y acciones de
esta y luego crea un plantilla de
pantalla que constituye la base del
prototipo de la interfaz de usuario

Existen tres reglas para el

diseo de la interfaz

Dar el control al usuario

Es decir un sistema que reaccione a las necesidades del

usuario y que le ayude a hacer las cosas.
Reducir la carga en la memoria del usuario
Una interfaz de usuario bien diseada no depender de
la
memoria del usuario. Siempre que sea posible, el
sistema debe recordar la informacin pertinente y ayudar
al usuario con un escenario de interaccin que le facilite el
uso de la memoria.
Lograr que la interfaz sea consistente
Toda la informacin visual este organizada de acuerdo con
un estndar de diseo que se mantenga en todas la
presentaciones de pantalla.

Recortar pasos alusuario

Excel

W ord

 El Diseador de la Interfaz debe

cumplir el principio ms importante del

diseo de la interfaz de usuario:
quien conoce al usuario, conoce las
tareas .
El proceso de diseo de las interfaces

de usuario es iterativo y se puede

representar mediante un modelo
espiral.

D iseo
Anlisis de requerimientos de

producto
Anlisis de las tareas
Conocimiento del usuario
Revisin de posibilidades para la
implementacin

Im plem entacin
Generacin de prototipos (profundos

o amplios , para investigacin

general o de ajustes)
Desarrollo de la aplicacin, sitio o
sistema

Por ejem plo tenem os

herram ientas com o:
BALSAMIQ

O tras herram ientas son:

HOTGLOO
MOCKFLOW
MOCKUP BUILDER
INVISION
PROTO.IO

M ED ICIO N (test de usabilidad)

Planificacin (desarrollo de plan,

definiciones de la medidas, seleccin

de participantes ,formacin de
observadores)
Test(prueba piloto, tests con
usuarios)

Evaluacin
Conclusin (anlisis de los datos,

elaboracin de informe, resultado y

recomendaciones)
Comparacin contra estndares
(internos y/ o externos) versiones
anteriores del mismo producto y
productos competidores
Verificacin de las deferencias
Generacin de nuevas metas


C iclo de evaluacin del diseo
de la interfaz de usuario

O bjetivos de la interfaz de usuario

Es definir un conjunto de objetos y

acciones de interfaz que permitan al

usuario llevar a cabo todas las tareas
definidas para que cumplir con todos
los objetivos de usabilidad definidos
por el sistema.
La actividad de implementacin

comienza con la creacin de un

prototipo que permita evaluar los

Cules M ejor para el

U suario?

Consideraciones
La interfaz de usuario debe ser diseada
considerando las habilidades, experiencia y
expectativas de los usuarios
Los usuarios muchas veces juzgan al
sistema por su interfaz ms que por su
funcionalidad
Una interfaz mal diseada puede causar
que un usuario cometa errores catastrficos
Muchos sistemas nunca son usados debido
a un mal diseo de la interfaz de usuario

TIP O S D E IN TER FA Z

Interfaces de lenguaje
natural
El usuario emite
comandos en lenguaje natural
.
Accesible a usuarios casuales
Fcil de ampliar
Se requiere teclear ms .
Los sistemas de comprensin de lenguaje
natural no son fiables.

Ejemplo: Sistemas de horarios, sistemas www de

recuperacin de la informacin.

Interfaz
P regunta/R espuesta
En la pantalla se despliega una pregunta para el

usuario.
El usuario introduce una respuesta.
La computadora despus acta con en esa
informacin de entrada de acuerdo con su
programa.
Para instalar un software se usan asistentes.

Interface tipo M en
Proporciona al usuario una lista en la

pantalla de las opciones disponibles.

El usuario est limitado a las opciones
desplegadas.
El usuario no necesita conocer el sistema.
La consistencia es importante en el diseo
de una interfaz de tipo men.
Pueden anidar dentro de otro para llevar a
un usuario a las opciones de un programa.

Lin eam ien to d el in terface

tip o m en

Siempre de despliega la barra de men

principal.
El men principal de usar palabras
simples.
Las opciones de men principal siempre
despliegan mens desplegables
secundarios.
Las artculos de men en gris no estn
disponibles para la actividad.

In terface d e en trad a /
salid a
Esta tcnica de interfaz tambin se

conoce como mtodo basado en el

formulario y en formularios de
entrada/salida.
Las interfaces de entrada/salida consisten
de formularios en la pantalla que se basan
en la Web.
El formulario a menudo es un facsmil de
un formulario impreso que ya es familiar
para el usuario

Interface de lenguaje de
comandos
Permite al usuario controlar la aplicacin
con una serie de pulsaciones del teclado.
El lenguaje de comandos no tiene un
significado inherente para el usuario.
Es una interfaz
refinada.

popular

que

es

ms

El lenguaje de comandos ofrece al usuario

mayor flexibilidad y control.
Los lenguajes de comandos
memorizar las reglas de sintaxis.

requieren

Los usuarios experimentados tienden a

preferir los lenguajes de comandos,
posiblemente porque les permite trabajar

Interfaces grafi
cas de usuario

Permiten la manipulacin directa de la

representacin grfica en pantalla.

La clave para las interfaces graficas es

la retro-alimentacin constante que
proporcionan.

La creacin de las interfaces graficas

representa un reto, debido a que se
debe inventar un modelo apropiado.

Retroalim entacin
Es un proceso por el que una cierta

proporcin de la seal de salida de un

sistema se redirige de nuevo a la entrada.
Compara el comportamiento actual con

los objetivos predeterminados y devuelve

la informacin que describe el vaco entre
el desempeo actual y el esperado.
Incrementa la confianza humana.

Tipos de retroalim entacin

Reconociendo la aceptacin de la entrada.
Reconociendo que la entrada es correcta.
Notificando que la entrada es incorrecta.

 Explicando un retraso en el procesamiento.

Reconociendo que una peticin est

completa.
Ofreciendo a los usuarios retroalimentacin
ms detallada