DISEÑO DE LA INTERFAZ DEL USUARIO

¿Interfaz de Usuario?

En promedio, se estima que del 35% al 45% de los gastos destinados a un

proyecto son direccionados al diseño e implementación de la interfaz
¿Interfaz de Usuario?
La interfaz de usuario es el medio
con que el usuario puede
comunicarse con una máquina,
un equipo o una computadora, y
comprende todos los puntos de
contacto entre el usuario y el
equipo
¿Por que es necesario hacer una buena Interfaz de
Usuario?
Diseño de interfaz de usuario
Proceso de determinar los distintos componentes, tanto de hardware como de
software, sus características y su disposición, que se utilizarán para interactuar
con una serie de usuarios determinados en un medio ambiente determinado
Principios del diseño de UI
Familiaridad: La interfaz debe usar términos y conceptos familiares al usuario y
al dominio de la aplicación

Uniformidad: La interfaz debe ser uniforme, operaciones comparables deben

funcionar de la misma manera

Mínima Sorpresa: El comportamiento del sistema no debe provocar sorpresa al

usuario. El sistema debería comportarse de la forma más predecible posible
Principios del diseño de UI
Recuperabilidad: La interfaz debe permitir al usuario recuperarse de errores, o al
menos, ayudarle a evitarlos

Guía de Usuario: Retroalimentación significativa y coherente al ocurrir errores y

características de ayuda sensibles al contexto

Diversidad de Usuarios: La interfaz debe estar orientada a todos los tipos de

usuarios del sistema (Novatos, expertos, daltónicos, discapacitados, etcétera)
Factores humanos

Un error mal manejado puede llevar a otro error... y este puede llevar a otro y a
otro, y así hasta llegar a un error catastrófico
 Recomendaciones
● Use el sentido común. Nada de lo que se dice en esta presentación es
“Rocket Science”.

● Use software (No desarrollado por usted) y medite (sea consciente) de la

forma en que está hecha la Interfaz de usuario.
 Recomendaciones
● Use el software que desarrolle y haga críticas sobre la interfaz de usuario y
estudie la forma en que puede mejorarla para lograr un sistema más usable

● ¡Debata sobre la IU! Con el programador de la oficina de al lado, con el jefe,

con el vecino, con sus usuarios, clientes, etcétera.
Herramientas
En la red hay multitud de herramientas para construir prototipos, desde
programas profesionales hasta pequeñas aplicaciones web que nos permiten
añadir enlaces a nuestros diseños para hacerlos navegables.
Cooper.com – Prototyping tools. Interesante comparativa de herramientas de
prototipado.

Quirktools. Ofrece acceso a tres útiles herramientas para el desarrollo de

nuestros proyectos y prototipos. La versión gratuita (mediante registro) nos deja
guardar hasta tres proyectos.

FROONT. Interesante herramienta que permite diseñar páginas web responsivas

directamente en nuestro navegador, pudiendo exportar luego el código generado.
Requiere registro.
Wireframes

Balsamiq. Una de las herramientas más populares por su facilidad de uso, permite realizar
nuestros wireframes directamente en el navegador.

Mockupstogo. Librería con controles de Android y otros SO para utilizar con Balsamiq.

Moqups. Herramienta en línea que permite desarrollar prototipos rápidamente, gracias a

una interfaz intuitiva con más de 300 elementos para construir nuestro prototipo. La versión
gratuita permite tener dos proyectos activos, con algunas funciones limitadas.
Prototipos
Axure. Una de las herramientas más usadas en el ámbito profesional, permite crear prototipos de
páginas web o aplicaciones móviles con gran nivel de detalle e interacción. Cuenta con multitud de
tutoriales y una activa comunidad de usuarios.

Justinmind. Esta startup española con oficinas en San Francisco ofrece Prototyper, un potente programa
para construir prototipos en alta fidelidad de páginas web y apps. La versión gratuita, aunque con menos
opciones, es plenamente funcional y permite publicar el prototipo en internet para su revisión por otros
usuarios.

Invision. Herramienta que permite añadir enlaces a nuestros diseños (web o apps), permitiéndonos así
navegar adelante y atrás por lo que antes eran imágenes estáticas. Incluye un práctico sistema para
invitar a otros usuarios para que prueben nuestro prototipo y puedan ofrecer feedback. La versión
gratuita es plenamente funcional, pero está limitada a un solo proyecto.
 Específicas para prototipos de apps
Fluid UI. Ofrece más de 2000 widgets para construir prototipos de apps para Android, iOS o Windows
Phone. La versión gratuita está limitada a diez páginas por proyecto. Los prototipos se pueden probar en
el navegador web o directamente en el dispositivo móvil (mediante una app disponible para iOS y
Android).

Proto.io. Permite reproducir en nuestros prototipos los gestos más habituales sobre una pantalla (tocar,
tocar y aguantar, pellizcar con dos dedos, etc.) y animar las transiciones entre pantallas, dotando de
mayor realismo a nuestros prototipos. Ofrece una versión de prueba plenamente funcional durante 15
días.

Concept.ly. Esta herramienta permite subir nuestros diseños (imágenes planas) y añadirles zonas activas
para crear interacciones o simplemente enlazar las páginas entre ellas para navegar por el prototipo.
Sencillo, pero útil.
Aplicaciones
POP. Esta original aplicación nos permite fotografiar con el móvil nuestros wireframes hechos a papel y
lápiz y añadirles interacciones mediante enlaces, de modo que nuestros dibujos cobren vida. Los
prototipos resultantes se pueden compartir con otros usuarios para que aporten feedback. Disponible de
forma gratuita para iOS y Android.

Launch. Permite crear prototipos tanto mediante su herramienta de diseño como añadiendo
interacciones a imágenes creadas con otros programas o incluso fotografías de wireframes hechos en
papel. Funciona tanto sobre el navegador web como en aplicación para iOS y Android.

Realizer. Disponible solo para iOS, permite probar prototipos de aplicaciones para iPhone o iPad
mediante la carga de las imágenes de las diferentes pantallas, que se pueden enlazar después.
¿Cómo realizar la interfaz de usuario?

● Reunir y analizar la información del usuario.

● Diseñar la interfaz de usuario.
● Construir la interfaz de usuario.
● Validar la interfaz de usuario.
¿Cómo realizar la interfaz de usuario?

● Enfocarnos en facilitar la comunicación

y complementar la estructura de la
aplicación.
¿Cómo realizar la interfaz de usuario?
● Utilizar una paleta de colores limitada, eligiendo los tonos y colores de
acuerdo al perfil del usuario, sus intereses o el contexto de la aplicación.

Aunque no lo creas, tu aplicación no tiene que parecer un carnaval

A menos de que sea un videojuego sobre una feria o carnaval
¿Cómo realizar la interfaz de usuario?
● Es importante considerar la accesibilidad para asegurar que usuarios con
dificultades o hasta discapacidades sean capaces de utilizar los sistemas.
¿Cómo realizar la interfaz de usuario?

● En caso de que se tenga un público muy grande y sea imposible conocer la

opinión de la mayoría de los clientes, se sugiere que se agreguen muchas
opciones de personalización: color de menús, de fondo, opciones de
accesibilidad, organización de la pantalla, etcétera.
¿Cómo realizar la interfaz de usuario?
● No cometa faltas de ortografía.