Centro de Electricidad

Electrnica y Telecomunicaciones
Anlisis y Desarrollo de Sistemas de Informacin
1320652 (Grupo 2)

Disear la Interfaz Grfica del Usuario

Jhonnatan Fernando Rodrguez Avila

Bogot D.C
2017
 Centro de Electricidad
Electrnica y Telecomunicaciones
Anlisis y Desarrollo de Sistemas de Informacin
1320652 (Grupo 2)

Jhonnatan Fernando Rodrguez Avila

(99091201620)

Instructor: Miguel ngel

Bogot D.C
2017

3.1 Actividades de Reflexin inicial.

 Por qu es importante el diseo de la interfaz del usuario?
Para que el aplicativo sea ms atractivo y que la interaccin con el usuario sea lo ms
intuitiva posible.
Por qu considera importante que las interfaces se ajusten a las habilidades,
expectativas y experiencias de los usuarios del sistema de informacin?
Porque la mayora de la poblacin tiende a tener memoria a corto plazo, por lo tanto
si se le presenta demasiada informacin, es posible que se dificulte asimilarla.
Mencione las diferencias entre cada uno de los siguientes conceptos sketch, mokup,
wireframe y prototipo?

Sketch: Bosquejo rpido que se realiza a mano (con

lpiz o bolgrafo) sobre papel para reflejar la primera
idea o concepto, constituyendo as el punto de partida
de lo que ser el producto final. Es un bosquejo
esttico de baja calidad.

Wireframe: Se emplea para definir cul ser el contenido y

dnde se ubicarn los distintos elementos. Es tambin una
representacin de baja calidad, y suele entregarse como un
archivo de imagen en lugar de en papel como en el caso
anterior.
 Mockup: Permite representar estticamente de forma ms
visual el proyecto. Su calidad es media alta y tambin se
entrega en formato de imagen.

Prototipo: Ya no se trata de una representacin esttica,

sino que es posible navegar para probar el producto. Su
calidad oscila entre media y alta. Debido a que permite la
navegabilidad, se entrega como fichero HTML, como una
animacin, o similares.

En conclusin, segn la etapa de diseo en que nos encontremos, es necesario elaborar

un tipo de boceto u otro, para as poder expresar nuestra idea y poder dar a conocerla al
resto del equipo y a nuestros clientes.
 3.2 Actividades de contextualizacin e identificacin de conocimientos necesarios para
el aprendizaje.)

a. Realice una investigacin sobre los siguientes conceptos:

Mencione, describa e ilustre con ejemplo cada uno de los Principios de diseo de las
Interfaces de Usuario?

Anticipacin
Las aplicaciones deberan intentar
anticiparse a las necesidades del
usuario y no esperar a que el
usuario tenga que buscar la
informacin, recopilarla o invocar
las herramientas que va a utilizar.

En la Figura 2 se ilustra como el

procesador de texto se anticipa a
las necesidades del usuario,
proporcionando las caractersticas
del texto seleccionado -fuente,
tamao, alineacin, etc.-
permitiendo que el usuario pueda Figura 2. Ejemplo de caractersticas anticipadas
modificarlas gilmente.
 Autonoma
La computadora, la IU y el
entorno de trabajo deben
estar a disposicin del
usuario. Se debe dar al
usuario el ambiente flexible
para que pueda aprender
rpidamente a usar la
aplicacin. Sin embargo, est
comprobado que el entorno
de trabajo debe tener ciertas Figura 3. Ejemplo de ambiente complejo
cotas, es decir, ser explorable
pero no azaroso.
En la Figura 3 se visualiza un diseo incorrecto de interfaz de usuario. La cantidad de
opciones propuestas propone un grado de complejidad que no permite que el usuario
pueda aprender a utilizar el sistema en forma progresiva.
Es importante utilizar mecanismos indicadores de estado del sistema que mantengan a
los usuarios alertas e informados. No puede existir autonoma en ausencia de control, y
el control no puede ser ejercido sin informacin suficiente. Adems, se debe mantener
informacin del estado del sistema en ubicaciones fciles de visualizar
En la Figura 4 se
ejemplifica una incorrecta
disposicin de
componentes en la IU. El
reloj no debe ser
incorporado en el men del
sistema ya que aporta
confusin al usuario. Para
mantenerlo informado sera
mas adecuado colocarlo en
la barra de estado del Figura 4. Ejemplo de informacin de estado inadecuada
sistema.

Percepcin del Color

Aunque se utilicen convenciones
de color en la IU, se deberan usar
otros mecanismos secundarios para
proveer la informacin a aquellos
usuarios con problemas en la
visualizacin de colores
Figura 5. Ejemplo de color e inconsistencia

En la Figura 5 se representa un mecanismo secundario muy utilizado para ejecucin de

comandos: los comandos abreviados (shortcut-keys). Sin embargo la aplicacin presenta
 un problema de inconsistencia ya que define combinaciones de teclas que difieren a lo
esperado por el usuario, por ejemplo Alt+< en lugar de Alt+B.

Valores por Defecto

No se debe utilizar la palabra Defecto en una aplicacin o servicio. Puede ser
reemplazada por Estndar o Definida por el Usuario, Restaurar Valores Iniciales
o algn otro trmino especifico que describa lo que est sucediendo. Los valores por
defecto deberan ser opciones inteligentes y sensatas. Adems, los mismos tienen que
ser fciles de modificar.

Consistencia
Para lograr una mayor consistencia en la IU se requiere profundizar en diferentes
aspectos que estn catalogados en niveles. Se realiza un ordenamiento de mayor a
menor consistencia:
1. Interpretacin del comportamiento del usuario: la IU debe comprender el
significado que le atribuye un usuario a cada requerimiento. Ejemplo:
mantener el significado de las los comandos abreviados (shortcut-keys)
definidos por el usuario.
2. Estructuras invisibles: se requiere una definicin clara de las mismas, ya que
sino el usuario nunca podra llegar a descubrir su uso. Ejemplo: la
ampliacin de ventanas mediante la extensin de sus bordes.
3. Pequeas estructuras visibles: se puede establecer un conjunto de objetos
visibles capaces de ser controlados por el usuario, que permitan ahorrar
tiempo en la ejecucin de tareas especficas. Ejemplo: cono y/o botn para
impresin.
4. Una sola aplicacin o servicio: la IU permite visualizar a la aplicacin o
servicio utilizado como un componente nico. Ejemplo: La IU despliega un
nico men, pudiendo adems acceder al mismo mediante comandos
abreviados.
5. Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicacin o
servicio utilizado como un conjunto de componentes. Ejemplo: La IU se
presenta como un conjunto de barras de comandos desplegadas en diferentes
lugares de la pantalla, pudiendo ser desactivadas en forma independiente.
6. Consistencia del ambiente: la IU se mantiene en concordancia con el
ambiente de trabajo. Ejemplo: La IU utiliza objetos de control como menes,
botones de comandos de manera anloga a otras IU que se usen en el
ambiente de trabajo.
7. Consistencia de la plataforma: La IU es concordante con la plataforma.
Ejemplo: La IU tiene un esquema basado en ventanas, el cual es acorde al
manejo del sistema operativo Windows.

Figura 6. Ejemplo de consistencia

 En la Figura 6 puede observarse la mejora en la consistencia de las pequeas estructuras
visibles (3.) para los sistemas grficos basados en ventanas. La inclusin de la opcin X
para cerrar la ventana operacin comunmente utilizada en estas aplicaciones-
simplifica la operatividad del mismo.
La inconsistencia en el comportamiento de componentes de la IU debe ser fcil de
visualizar. Se debe evitar la uniformidad en los componentes de la IU. Los objetos
deben ser consistentes con su comportamiento. Si dos objetos actan en forma diferente,
deben lucir diferentes. La nica forma de verificar si la IU satisface las expectativas del
usuario es mediante testeo.

Eficiencia del Usuario

Se debe considerar la productividad del usuario antes que la productividad de la
mquina. Si el usuario debe esperar la respuesta del sistema por un perodo prolongado,
estas prdidas de tiempo se pueden convertir en prdidas econmicas para la
organizacin. Los mensajes de ayuda deben ser sencillos y proveer respuestas a los
problemas. Los menes y etiquetas de botones deberan tener las palabras claves del
proceso.

Figura 7. Ejemplo de definicin incorrecta de botones de accin

En la Figura 7 se demuestra como una incorrecta definicin de las palabras clave de las
etiquetas de los botones de comando puede confundir al usuario. Los botones OK y
Apply aparentan realizar el mismo proceso. Esto puede solucionarse suprimiendo uno
de ellos si realizan la misma tarea o etiquetndolos con los nombres de los procesos
especficos que ejecutan.

Ley de Fitt
El tiempo para alcanzar un objetivo es una funcin de la distancia y tamao del
objetivo. Es por ello, que es conveniente usar objetos grandes para las funciones
importantes.

Figura 8. Ejemplo de percepcin visual

En la Figura 8 se puede apreciar la relacin entre los elementos de diseo de pantalla y
su percepcin visual. El nmero de elementos visuales que perciben son: en el caso a) 1
(el fondo); en b) 3 (la lnea, lo que est encima y lo que est debajo); en c) son 5 (el
espacio fuera del recuadro, el recuadro, la lnea y el espacio encima y debajo de sta);
finalmente, en d) el nmero se eleva a 35, siguiendo el mismo criterio. Conclusin: cada
elemento nuevo que se aade influye ms de lo que se piensa en el usuario.

Interfaces Explorables
Siempre que sea posible se debe permitir que el usuario pueda salir gilmente de la IU,
dejando una marca del estado de avance de su trabajo, para que pueda continuarlo en
otra oportunidad.

Para aquellos usuarios que sean noveles en el uso de la aplicacin, se deber proveer de
guas para realizar tareas que no sean habituales.
Es conveniente que el usuario pueda incorporar elementos visuales estables que
permitan, no solamente un desplazamiento rpido a ciertos puntos del trabajo que est
realizando, sino tambin un sentido de casa o punto de partida.
La IU debe poder realizar la inversa de cualquier accin que pueda llegar a ser de
riesgo, de esta forma se apoya al usuario a explorar el sistema sin temores.
Siempre se debe contar con un comando Deshacer. Este suprimir la necesidad de
tener que contar con dilogos de confirmacin para cada accin que realice en sistema.
El usuario debe sentirse seguro de poder salir del sistema cuando lo desee. Es por ello
que la IU debe tener un objeto fcil de accionar con el cual poder finalizar la aplicacin.

Objetos de Interfaz Humana

Los objetos de interfaz
humana no son
necesariamente los objetos
que se encuentran en los
sistemas orientados a
objetos. Estos pueden ser
vistos, escuchados, tocados
o percibidos de alguna
forma. Adems, estos
objetos deberan ser
entendibles, consistentes y Figura 9. Ejemplo de barras de controles
estables.

En la Figura 9 se presentan barras de controles que simplifican la operacin de un

sistema. A travs de las ilustraciones que poseen los mismos, el usuario puede aprender
fcilmente su uso. Si se mantienen para estos botones las mismas asignaciones de
procesos en diferentes sistemas, la comprensin del funcionamiento de los mismos se
hace mas sencilla.

Uso de Metforas

Las buenas
metforas crean
figuras mentales
fciles de recordar.
La IU puede
contener objetos
asociados al modelo
conceptual en forma
visual, con sonido u
otra caracterstica
perceptible por el
usuario que ayude a Figura 10. Ejemplo de metforas
simplificar el uso del
sistema.

En la Figura 10 se compara la aplicacin de metforas en el desarrollo de una IU. En

el primer caso, se utiliza incorrectamente la metfora de una cmara de video para
representar el procesamiento de un documento por una impresora. Se puede observar
que el botn << carece de sentido, ya que no se puede volver atrs un trabajo que ya
ha sido impreso. En el segundo caso, la metfora de la agenda es utilizada
correctamente para la implementacin de una agenda electrnica.
Curva de Aprendizaje
El aprendizaje de un producto y su usabilidad no son mutuamente excluyentes. El ideal
es que la curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el
dominio total de la aplicacin sin esfuerzo.

Reduccin de Latencia
Siempre que sea posible, el uso de tramas (multi-threading) permite colocar la latencia
en segundo plano (background). Las tcnicas de trabajo multitarea posibilitan el trabajo
ininterrumpido del usuario, realizando las tareas de transmisin y computacin de datos
en segundo plano.

Proteccin del Trabajo

Se debe poder asegurar que el usuario nunca pierda su trabajo, ya sea por error de su
parte, problemas de transmisin de datos, de energa, o alguna otra razn inevitable.

Auditora del Sistema

La mayora de los navegadores de Internet (browsers), no mantienen informacin acerca
de la situacin del usuario en el entorno, pero para cualquier aplicacin es conveniente
conocer un conjunto de caractersticas tales como: hora de acceso al sistema, ubicacin
del usuario en el sistema y lugares a los que ha accedido, entre otros. Adems, el usuario
debera poder salir del sistema y al volver a ingresar continuar trabajando en lugar
dnde haba dejado.

Legibilidad
Para que la IU favorezca la usabilidad del sistema de software, la informacin que se
exhiba en ella debe ser fcil de ubicar y leer. Para lograr obtener este resultado se deben
tener en cuenta algunas como: el texto que aparezca en la IU debera tener un alto
contraste, se debe utilizar combinaciones de colores como el texto en negro sobre fondo
blanco o amarillo suave. El tamao de las fuentes tiene que ser lo suficientemente
grande como para poder ser ledo en monitores estndar. Es importante hacer clara la
presentacin visual (colocacin/agrupacin de objetos, evitar la presentacin de
excesiva informacin.

Figura 11. Ejemplo de legibilidad

 En la Figura 11 se describe una comparacin de disposicin de los objetos en
pantalla. La figura de la izquierda, combina una disposicin asimtrica de la
informacin con un conjunto de colores que no facilita la lectura. La figura de la
derecha realiza la presentacin de la informacin utilizando una gama de colores
homognea y una alineacin del texto que favorece a la legibilidad del mismo.

Interfaces Visibles
El uso de Internet, ha favorecido la implementacin de interfaces invisibles. Esto
significa que el usuario siempre ve una pgina especfica, pero nunca puede conocer la
totalidad del espacio de pginas de Internet. La navegacin en las aplicaciones debe ser
reducida a la mnima expresin. El usuario debe sentir que se mantiene en un nico
lugar y que el que va variando es su trabajo. Esto no solamente elimina la necesidad de
mantener mapas u otras ayudas de navegacin, sino que adems brindan al usuario una
sensacin de autonoma.

Mencione, describa e ilustre con un ejemplo cada uno de los Tipos de Interfaz de
usuario.

Tipos de interfaces de usuario

Dentro de las Interfaces de Usuario se puede distinguir bsicamente tres tipos:

Una interfaz de hardware, a nivel de los dispositivos utilizados para ingresar,

procesar y entregar los datos: teclado, ratn y pantalla visualizadora.

Una interfaz de software, destinada a entregar informacin acerca de los procesos y

herramientas de control, a travs de lo que el usuario observa habitualmente en la
pantalla.

Una interfaz de Software-Hardware, que establece un puente entre la mquina y las

personas, permite a la mquina entender la instruccin y a el hombre entender el
cdigo binario traducido a informacin legible.

Segn la forma de interactuar del usuario:

Atendiendo a como el usuario puede interactuar con una interfaz, nos encontramos
con varios tipos de interfaces de usuario:
 Interfaces alfanumricas (intrpretes de comandos) que solo presentan texto.

Interfaces grficas de usuario (GUI, graphic user interfaces), las que permiten
comunicarse con el ordenador de una forma muy rpida e intuitiv a representando
grficamente los elementos de control y medida.

Interfaces tctiles, que representan grficamente un "panel de control" en una

pantalla sensible que permite interactuar con el dedo de forma similar a si se
accionara un control fsico.

Segn su construccin la cual puede ser de hardware o de software:

Interfaces de hardware: Se trata de un conjunto de controles o dispositiv os que

permiten que el usuario intercambie datos con la mquina, ya sea introducindolos
(pulsadores, botones, teclas, reguladores, palancas, maniv elas, perillas) o
leyndolos (pantallas, diales, medidores, marcadores, instrumentos).

Interfaces de software: Son programas o parte de ellos, que permiten expresar

nuestros deseos al ordenador o visualizar su respuesta.

Valoracin

El principal objetivo de una interfaz de usuario es que ste se pueda comunicar a

travs de ella con algn tipo de dispositivo. Conseguida esta comunicacin, el
segundo objetivo que se debera perseguir es el de que dicha comunicacin se
pueda desarrollar de la forma ms fcil y cmoda posible para el usuario. Sin
embargo, las interfaces no siempre son intuitivas, tal como es el caso de las
interfaces de lnea de rdenes (CLI), que se encuentran por ejemplo en algunos
sistemas operativos como los NOS de los Routers o algunos shell de Unix, DOS,
etc. Estas interfaces son las primeras que utilizaron los ordenadores y estn
anticuadas, aunque los nostlgicos las siguen prefiriendo debido a que han
memorizado sus comandos.

Tambin es importante reconocer las interfaces de lnea de comandos, como el

mejor medio para que el administrador del sistema pueda llev ar a cabo tareas
complejas; de ah que se sigan utilizando y que todo sistema operativ o disponga de
 un intrprete de comandos (shell en Unix, consola o smbolo del sistema en
Windows) como parte fundamental de la interfaz del usuario. Si se toma como
ejemplo la creacin de un usuario en un sistema, se dispone de un programa que se
activ ar con un doble clic del ratn, para luego llenar una serie de datos en una v
entana de dilogo. Por otro lado, si es el administrador de un sistema quien debe
crear 200 usuarios, no es difcil imaginar lo engorroso de la operacin.

Esto se soluciona creando lo que se llaman "scripts" (termino comnmente

utilizado para referirse a aquellos programas simples y que poseen pocas lineas,
usualmente escritos para realizar una tarea en concreto que posiblemente solo se
pretenda ejecutar una v ez) que realizan tareas en un sistema operativ o. Son
ficheros BAT en Windows y shell scripts en Unix/Linux. Estos scripts utilizan el
conjunto de comandos que ofrece el sistema. Adems, no todo se puede hacer a trav
s de la interfaz grfica: hay ciertas funciones para usuarios av anzados y
administradores a las que slo es posible realizarlas mediante comandos.

El diseo de la interfaz es crtico para el manejo del equipo: hay algunas muy bien
diseadas que incorporan controles intuitivos y de fcil manejo, en cambio existen
otras que no se entienden bien y el usuario no acierta a manejarlas correctamente
sin estudiar un manual o recibir formacin del experto.

Describa e ilustre el proceso paso a paso del diseo de la Interfaz de usuario.

Objetivo

Su objetivo es que las aplicaciones sean ms atractivos y adems, hacer que la

interaccin con el usuario sea lo ms intuitiva posible, conocido como el diseo
centrado en el usuario. En este sentido las disciplinas del diseo industrial y diseo
grfico se encargan de que la actividad a desarrollar se comunique y aprenda lo ms
rpidamente, a travs de recursos como la grfica, los pictogramas, los estereotipos y la
simbologa, todo sin afectar el funcionamiento tcnico eficiente.
Principios para el Diseo de IU

Existen principios relevantes para el diseo e implementacin de IU, ya sea para las IU
grficas, como para la Web.

Familiaridad del usuario: Utilizar trminos y conceptos que se toman de la

experiencia de las personas que ms utilizan el sistema.

Consistencia: Siempre que sea posible, la interfaz debe ser consistente en el sentido de
que las operaciones comparables se activan de la misma forma.

Mnima sorpresa: El comportamiento del sistema no debe provocar sorpresa a los

usuarios.

Recuperabilidad: La interfaz debe incluir mecanismos para permitir a los usuarios

recuperarse de los errores. Esto puede ser de dos formas: Confirmacin de acciones
destructivas. Proveer de un recurso para deshacer

Gua al usuario: Cuando los errores ocurren, la interfaz debe proveer retroalimentacin
significativa y caractersticas de ayuda sensible al contexto.

Diversidad de usuarios: La interfaz debe proveer caractersticas de interaccin

apropiada para los diferentes tipos de usuarios.

Prototipos en la implementacin del Diseo de IU

Prototipos Estticos: son aquellos que no permiten la alteracin de sus componentes,

pero sirven para identificar y resolver problemas de diseo. En esta categora se
incluyen las presentaciones sobre reproductor, papel u otro medio de visualizacin.

Prototipos Dinmicos: permiten la evaluacin de un modelo del sistema sobre una

estacin de trabajo o una terminal. Estos prototipos involucran aspectos de diseo mas
detallados que los prototipos estticos, incluyendo la validacin del diseo del sistema
en trminos de requerimientos no funcionales, por ejemplo de performance.

Prototipos Robustos: deben ser relativamente completos en la simulacin de las

caractersticas dinmicas de la interfaz (presentacin de mensajes de error, entrada y
edicin de datos, etc.). Esta categora puede ser utilizada para validar los objetivos de
diseo.

El nivel de sofisticacin del prototipo debera incrementarse a lo largo del proceso de

diseo de interfaces de usuario. La informacin recolectada durante las tareas de
anlisis del sistema y la especificacin de los requisitos del usuario constituyen los
datos clave para el proceso de prototipacin.
Interaccin del usuario en el Diseo de IU

Una interfaz coherente debe integrar la interaccin del usuario y la presentacin de la

informacin. Shneiderman (1998) clasifica la interaccin en 5 estilos primarios:

Manipulacin directa: Interaccin directa con los objetos de la pantalla, rpida e

intuitiva. Fcil de aprender.

Seleccin de mens: El usuario selecciona un comando de una lista de posibilidades.

Evita errores del usuario. Se requiere teclear poco. Lenta para usuarios experimentados.

Llenado de formularios: Introduccin de datos sencilla en los campos de un

formulario. Fcil de aprender. Ocupa mucho espacio en la pantalla.

Lenguaje de comandos: Los usuarios emiten un comando especial y los parmetros

asociados para indicar al sistema que hacer. Poderoso y flexible. Difcil de aprender.
Administracin de errores pobre.

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.

Color en el Diseo de la IU

El color ayuda y mejora la presentacin de la interfaz, permitiendo al usuario

comprender y manejar la complejidad. Shneiderman(1998) establece 14 lineamientos
claves para la utilizacin efectiva del color.

Los ms relevantes:

Limitar el nmero de colores utilizados y ser conservador al momento de

utilizarlos. No utilizar ms de 4 5 colores diferentes en una ventana y no ms
de 7 en la interfaz total del sistema.

Utilizar un cambio de color para mostrar un cambio en el estado del sistema.

Utilizar el cdigo de colores para apoyar la tarea que los usuarios estn tratando
de llevar a cabo.

Utilizar el cdigo de colores en una forma consciente y consistente.

 Ser cuidadoso al utilizar pares de colores

Si se utilizan muchos colores o sin son muy brillantes, el despliegue puede ser
confuso.

Ventajas del Diseo de IU

Fciles de aprender y utilizar.

Para interactuar con el sistema, los usuarios cuentan con pantallas mltiples. Se
puede pasar de una tarea a otra sin perder de vista la informacin de la anterior.

Interaccin rpida y acceso inmediato a cualquier punto de la pantalla.

Pautas para evaluar un Diseo de IU

Visibilidad del estado del sistema

Semejanza del sistema al mundo real

Control y libertad por parte del usuario

Consistencia y estandarizacin

Prevencin de Errores

Reconocimiento de acciones y opciones

Flexibilidad y eficiencia en el uso

Esttica y diseo minimalista

Reconocimiento de errores, diagnstico y recuperacin

Ayuda y documentacin
 Mencione, describa e ilustre con un ejemplo de cada uno de los Atributos de
evaluacin de las interfaces.

El Prototipado est relacionado con la evaluacin de la interfaz. A medida que el

prototipo se va haciendo ms completo, se pueden usar tcnicas de evaluacin de la
interfaz.

La Evaluacin de la interfaz: es el proceso de evaluar cmo se utiliza una interfaz y

verificar si cumplen los requerimientos del usuario. Es parte del proceso de
verificacin y validacin del software. Una forma de evaluar es midiendo los
atributos de usabilidad.
 Mencione 6 herramientas de Software para el Diseo de Interfaces e investigue si son
software libre o propietario.

Axure RP: Es una herramienta de prototipado profesional que permite crear wireframes
para hacer el pre-diseo de una pgina web. Disponible tanto para plataforma Windows
como Mac. Puedes dibujar tanto wireframes estticos como interactivos que simulan
una experiencia de navegacin del usuario real. Tiene una funcin de colaboracin para
compartir las maquetas Web con otras personas y poder recibir feedback en tiempo real.

Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta
herramienta como un servicio web o bien descargarla en tu equipo (funciona con
Windows, Mac y Linux). Su cuenta gratuita te permite crear un nmero ilimitado de
wireframes que duran 7 das. Tambin posee la funcin de colaboracin.
FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps
para iPhone. No tiene posibilidad de colaborar con otras personas ni tampoco es posible
exportar caractersticas.

Gliffy: Basada en un servicio web, permite dibujar bocetos de tu pgina web y crear
wireframes tanto estticos como dinmicos. Tambin puedes colaborar con otras
personas y recibir su opinin en tiempo real. La cuenta gratuita te deja hacer hasta 5
croquis no cifrados pero llevan publicidad.

iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de

aplicaciones. Lo puedes descargar en tu ordenador (Windows/ Mac) o bien puedes usar
el servicio va web. Tiene una cuenta gratuita con la que puedes hacer prototipos que
tengan hasta 5 pginas navegables.

Jumpchart: es una aplicacin de planificacin de webs basadas en el navegador la cual

posibilita esbozar el contenido de la pgina web. Es posible crear wireframes tanto
esttico como interactivos que simulan la navegacin entre las pginas web de la
maqueta.

Justinmind: Herramienta profesional para prototipado de sitios web, aplicaciones de

software y aplicaciones mviles. Puede trabajar con Windows o con Mac.

MockFlow: Herramienta web muy sencilla de utilizar para disear sitios web y
aplicaciones de software. Permite colaboracin y navegar por la pgina web adems de
visualizar su estructura. La versin gratuita est limitada en relacin al nmero de
prototipos que podemos hacer.

Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen

prototipos de pginas web. Puedes disear tu sitio web en el propio navegador
aprovechando que dispone de una gran biblioteca de objetos web para personalizar tus
pginas.

Napkin: Aunque es una herramienta basada en Java, tambin est disponible para
Windows, Mac y Linux. Los bocetos realizados solo pueden ser estticos, pero posee
una extensa biblioteca de smbolos GUI para usar en tus maquetas. No ofrece
posibilidad de colaboracin ni de exportar a otros formatos. Lo positivo, es totalmente
gratuita y la cuenta es ilimitada.

Pencil project: Es un complemento open-source de Firefox que permite crear

wireframes dentro de Firefox. No existe la posibilidad de colaboracin.

Smartdraw: totalmente integrada con Microsoft Office. Muy til para hacer
organigramas, cuadros de flujo,....Sin embargo, no dispone de wireframes interactivos ni
diseos para mviles.
Visio: Esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir
de forma independiente de otros componentes de Microsost Office. Slo est disponible
para equipos que trabajen con Windows. Puedes crear varios tipos de proyectos visuales
como diagramas de flujo, diagramas de Venn, mapas y maquetas de sitios web (estndar
y mvil), as como prototipos de aplicaciones de software.

Tabla con las caractersticas ms importantes:

BIBLIOGRAFIA

https://es.wikipedia.org/wiki/Dise%C3%B1o_de_interfaz_de_usuario

https://es.slideshare.net/jpbthames/diseo-de-interfaces-9874270

https://saraycdi.wordpress.com/2014/10/17/descubre-las-diferencias-entre-sketch-
mockup-wireframe-y-prototipo/

https://es.slideshare.net/jpbthames/el-proceso-de-diseo-de-interfaz-del-usuario-por-ian-
sommerville

https://www.ecured.cu/Dise%C3%B1o_de_Interfaces_de_Usuario