1.2.

4 Esquema de menús y diseño de pantallas

ESQUEMA DE MENÚS.

Los menús proporcionan a los usuarios una forma sencilla y familiar de recuperar información e interactuar con
el sistema. A los usuarios se les presenta el diseño completo del sistema a través de un esquema en forma
descendente, donde se muestran las distintas opciones que el sistema tendrá.

Una característica principal de los menús consiste típicamente en llevar al usuario a través de una serie de
submenús que le proporcionan una diversidad de opciones.

En el esquema de menús, es importante dejar claros los diferentes subsistemas que contendrá el sistema, cada
opción importante que le corresponde, como por ejemplo adición, modificación, eliminación de registros, copias
de seguridad, actualizaciones, etc.

Además de ello, es importante reflejar el tipo de información que se podrá consultar o los reportes que se
pueden generar.

Los menús reducen la necesidad de capacitación y memorización sintáctica y aumentan el conocimiento

semántico relevante para las tareas de los usuarios.

La clasificación de los esquemas de menú puede ser sencillo, en serie, en árbol, en red e integrado.

Los menús son un camino excelente que les permiten a los usuarios seleccionar elementos de una lista, pero
algunas tareas como la captura de datos no son manejadas muy bien mediante menús.

Para este caso el mejor método de diseño es el llenado de formas.

Ejemplo de menús.

1
Cuando se construye una aplicación informática es necesario plasmar el esquema de menús de todo el sistema.

DISEÑO DE PANTALLAS.

Las formas se utilizan como una herramienta para hacer que el trabajo se realice e introducir datos al sistema.

Al hacer un análisis de formas, se debe determinar qué datos se trata de capturar, cómo se clasificarán e
introducirán en la forma, quién capturará los datos y con qué fin, quién obtendrá una copia, qué debe aparecer
en las copias, en qué condiciones se llenará la forma, cómo se manejará, y durante cuánto tiempo se archivará.

Las formas en papel siguen siendo los vehículos principales empleados para introducir los datos al sistema.

Se deben considerar varios factores al seleccionar el papel que dé apoyo a la forma: el tiempo que la forma se
conservará, la apariencia de la forma, el número de veces que se manejará (por ej. Un promedio de 6 veces al
día durante un mes), cómo se manejará (por ej. Llevada por el usuario), su exposición al ambiente (por ej. Grasa,
suciedad, calor, etc.), el método de llenar los espacios en blanco utilizados (manual, máquina, etc.) y su
seguridad contra el borrado.

Lineamientos para el diseño de formas:

1. Haga que las formas sean fáciles de llenar.

2. Asegúrese de que las formas satisfacen el objetivo para el que fueron diseñadas.
3. Diseñe formas que aseguren el llenado preciso.
4. Las formas deben ser atractivas.

2
 Ejemplo de pantalla de captura de datos en una aplicación de escritorio.

Ejemplo de pantalla de captura de datos en una aplicación Web.

3
Ejemplo de una pantalla de informe transaccional.

Ejemplo de una pantalla de informe gerencial.

Para esta semana, le proponemos descargar el siguiente software. Enlace de pencil Project
https://pencil.evolus.vn/#google_vignette

4
Software para diseño de interfaces para mejorar la experiencia de los usuarios

¿Quieres dedicarte al diseño de interfaces? Ya sea que te dediques al desarrollo web o quieras encargar el
diseño de una aplicación, una página web u otro producto digital para tu negocio, existen conceptos y distintos
tipos de software para diseño de interfaces que es conveniente que conozcas.

Todo diseñador Frontend debe contar con algunos recursos imprescindibles para realizar su trabajo. El primer
paso, si te quieres dedicar al diseño de interfaz de usuario, es escoger el software para el diseño de interfaces
que utilizarás y realizar una propuesta gráfica o prototipo de interfaz de usuario para que el cliente pueda
imaginar cómo se verá el proyecto terminado.

Hasta el momento, Photoshop era el programa más utilizado, sin embargo, ya no basta con diseñar la versión
para escritorio. Ahora es necesario diseñar tres versiones distintas, escritorio, tablet y móvil, para que el
producto digital sea responsive.

Existen herramientas de diseño de interfaz que facilitan el trabajo de bocetar los elementos interactivos en
menor tiempo y que nos ayudan a mejorar los resultados.

1. Balsamiq

Es un programa de escritorio por lo que solo tienes que registrarte para comenzar a crear tu primer prototipo
de interfaz. Se centra, principalmente, en el wireframing y se caracteriza por una estética que simula estar
dibujada a mano alzada.

Este software de diseño de interfaces te ofrece una variedad de elementos prediseñados: barras de estado,
menús, barras de progreso, etc., y permite su desplazamiento por la superficie de diseño sencillamente
arrastrando y soltando.

Cuando hayas terminado tu diseño, puedes exportarlo en formato PNG o PDF.

Otra de las ventajas de este software para diseño de interfaces es que es una herramienta multiplataforma, por
lo podrás trabajar desde cualquier computadora e invitar a tu equipo a colaborar. Además, su versión gratuita
permite trabajar desde la nube.

Enlace de descarga https://balsamiq.com/wireframes/desktop/

5
2. Mockingbird

Este es un software para diseño de interfaces que no requiere instalación local y es ideal para que
usuarios con menos experiencia puedan crear mockups, ya que ofrece una selección de 90 módulos y
componentes diferentes.

La ventaja que más se destaca en esta herramienta de prototipado es la posibilidad de enlazar y compartir las
maquetas y páginas. Los diseños interactivos te servirán para revisar el flujo de trabajo, testear la usabilidad
desde el punto de vista de un usuario y compartir con tu cliente para que dé su opinión.

Este software para crear interfaces ofrece una versión gratuita que solo te permite crear tres proyectos, sin
embargo, hay algunas funciones como las de guardar y exportar, que solo están presentes en la versión de pago.

Enlace https://gomockingbird.com/

3. InVision

Una herramienta de prototipado muy potente creada para especialistas en diseño web y pensada por
diseñadores.

Lo que la distingue de otras herramientas de diseño de interfaces es que es muy intuitiva, tanto para el
diseñador de prototipos como para el cliente. Además, brinda la posibilidad de compartir y comentar un
proyecto en tiempo real con el cliente, facilitando el feedback y agilizando los procesos.

Entre los principales beneficios de InVision se encuentran:

• Presentación como si fuera una web real.

• Mejor calidad de feedback del cliente.
• Permite revisión en tiempo real.
• Tiene versión móvil.
• Cuenta con historial de contenido.

6
 Enlace https://www.invisionapp.com/

4. Mockup Builder

Es una herramienta gratuita de Microsoft integrada en MS Silverlight que está pensada para crear maquetas de
páginas web y software.

La versión gratuita presenta algunas limitaciones en la cantidad de elementos disponibles, sin embargo, tiene
todo lo que necesitas para hacer el prototipo de la interfaz de usuario, desde componentes para iOS o Android
hasta buscadores y aplicaciones de escritorio.

Al igual que InVision, permite que clientes y colaboradores dejen comentarios sobre el proyecto

Enlace http://mockupbuilder.com/

7
5. HotGloo

Esta es una de las herramientas de diseño de interfaces más populares y completas, ya que cuenta con una gran
biblioteca, herramientas de colaboración y plantillas para crear un prototipo de interfaz.

Su interfaz es muy amigable y está diseñada en función del usuario, por lo que es cómoda para visualizar
procesos de planificación, y construir o probar interacciones de manera muy sencilla.

Puedes visualizar los proyectos desde tu dispositivo móvil e invitar a tu equipo a colaborar.

Enlace https://www.hotgloo.com/

6. Figma

Este software para diseño de interfaces apareció a finales de 2015 y se posicionó rápidamente al ser el primero
en tener colaboración en tiempo real.

Funciona en línea, por lo que permite la colaboración en vivo de todos los miembros del equipo. Incluye
herramientas vectoriales para ilustrar, crear prototipos y la generación de código para el traspaso (hand-off).

La ventaja de aprender a utilizar Figma es que tienes todas las herramientas para crear un prototipo de interfaz
de usuario alineados con las necesidades de tus usuarios en una sola aplicación.

8
 Enlace https://www.figma.com/

7. Adobe XD

Adobe XD es un software usado para crear y compartir interfaces, tanto para páginas web como para
aplicaciones, aunque originalmente este software de diseño de interfaces fue lanzado al mercado con el
nombre de Project Comet en 2015. Hasta ese momento no existía en Adobe ningún software específico para
diseñar la experiencia de usuario.

Es una buena opción si ya eres usuario de la suite de programas de Adobe. Esta herramienta de diseño de
interfaz posibilita el trabajo en línea, guarda el historial de cambios y permite editar en vivo.

Además, Adobe XD forma parte del Adobe Creative Cloud por lo que no tendrás que ocupar espacio adicional
en tu disco duro.

Enlace https://www.adobe.com/la/products/xd.html

9
8. Framer X

Framer X es la evolución mejorada de Framer Studio. En este software de diseño de interfaces han añadido un
editor gráfico más potente que permite crear ilustraciones en formato SVG y exportarlas.

Si eres un diseñador UI experimentado y deseas ir más allá con tus herramientas, este puede ser el software
para crear interfaces ideales para ti.

Lo que la diferencia de otras herramientas de diseño de interfaces es la posibilidad de interactuar con el código
y crear componentes muy avanzados gracias a React.js.

Enlace https://www.framer.com/

9. Sketch

Sketch fue la primera herramienta de diseño de interfaz. Su punto fuerte no solo es que está creada por
diseñadores para diseñadores, sino que cuenta con una comunidad de usuarios y desarrolladores de plugins o
extensiones que complementan sus funcionalidades perfectamente. Además, sus desarrolladores realizan
actualizaciones periódicamente con nuevas funcionalidades y correcciones de errores, por lo que están
mejorando el programa constantemente.

Sus funciones son fáciles de utilizar, incluso es posible tejer un mapa de pantallas vinculadas entre sí para simular
el comportamiento de la página web o aplicación. Aunque solo está disponible para Mac.

Enlace https://www.sketch.com/

10
Existen herramientas de prototipado con las que puedes crear una maqueta interactiva de una página web o
aplicación y realizar un testeo del diseño de la interfaz, del flujo y de la usabilidad del diseño antes de invertir
tiempo y dinero en el desarrollo.

Los primeros 5 software de diseño de interfaces que te comentamos se enfocan en la creación de prototipos
para dar a conocer tu proyecto. Los 4 restantes son ideales para quienes se dedican al diseño de los elementos
propios de la interfaz de una web o de una aplicación.

Importancia de la experiencia del usuario

Una interfaz de usuario o UI (User Interface) es el medio a través del cual el usuario se comunica con un
dispositivo tecnológico, por lo que abarca todos los puntos de contacto entre la persona y el equipo o programa.

Por ejemplo, es el medio que nos permite interactuar con nuestra computadora mediante el uso del mouse y
del teclado (interfaz de hardware) o cuando realizamos una transferencia bancaria a través de un celular
(interfaz de software).

Para el desarrollo de todo tipo de programas es necesario que un diseñador de interfaces de usuario planifique
la información que le va a mostrar al usuario y determine el mapa de navegación entre los diferentes
comandos.

Como verás, las interfaces, aunque no seamos conscientes de ello, forman parte de la vida diaria de
prácticamente todas las personas. Por lo que es necesario optimizar su funcionalidad desde que se genera el
primer prototipo de la interfaz de usuario para que el diseño sea lo más intuitivo y accesible posible.

Lo primero que debes detectar antes de comenzar con el primer prototipo de la interfaz de usuario es el
problema o necesidad que le vas a resolver a ese usuario, para ello, es necesario hacer una UX research.
(Investigar)

No tener en cuenta la experiencia del usuario a la hora de crear tu producto digital con un software para
diseño de interfaces puede costarte clientes.

Es posible que una persona que ingrese a tu web o a tu aplicación y no encuentre con facilidad lo que busca o
no comprenda cómo navegar no vuelva a ingresar porque su experiencia no fue gratificante.

La interacción con una buena interfaz resulta casi de forma natural. Para ello, el diseño de interfaces web y
móviles debe ser agradable, intuitivo y eficiente.

A continuación, conoce todas las características que no pueden faltar en el diseño de una buena interfaz de
usuario.

11
Características de la interfaz de usuario

Para cumplir con su objetivo, ayudar al usuario a encontrar lo que busca, el diseño de interfaces de usuario (UI)
debe tener en cuenta:

1. Claridad

Es de suma importancia en el proceso de diseño de interfaz de usuario ya que transmitir la información de

manera precisa evita que el usuario cometa errores y esto se traduce en una buena experiencia de uso.

2. Concisión

Bríndale al usuario solo la información que necesita y pide, no agregues información que genere confusión y lo
distraiga de lo que es más importante. Diseño y contenido tienen que acompañar y ser relevantes en cada punto.

El tiempo del usuario vale oro: diseña una web sencilla y concisa con una jerarquía clara y explícales qué es lo
que pueden hacer en tu web.

Si aún no tienes demasiada experiencia, prueba con los templates y kits prediseñados que algunos softwares
para diseño de interfaces ofrecen.

3. Coherencia

Esta característica es fundamental ya que es la que logra que tu interfaz sea intuitiva y le permite al usuario
desarrollar patrones de uso a partir de conocer la función de los botones, iconos y otros elementos de la
interfaz.

4. Legibilidad

Un lenguaje simple y fácil de procesar le permite al usuario realizar una lectura rápida y acostumbrarse a las
diversas funciones de la interfaz. Aquí entra en juego la importancia de contar con un UX Writer hábil en tu
equipo.

5. Flexibilidad

Otra característica que forma parte de una buena experiencia del usuario es permitirle deshacer acciones
erróneas, restaurar elementos que haya borrado y dar opciones y alternativas para llevar a cabo un proceso.
Elegir un software para diseño de interfaces que te facilite estas acciones te ayudará a que la interacción sea
más sólida.

6. Atractiva visualmente

La funcionalidad es primordial, ya lo dijo Steve, pero no por eso hay que subestimar el aspecto visual durante el
proceso de diseño de interfaz de usuario. Cada vez más personas están pendientes del diseño y prefieren
interfaces agradables a la vista.

El software de diseño de interfaces que elijas para trabajar determinará las opciones visuales que podrás utilizar.
12
A partir del planteo del primer prototipo de interfaz de usuario no debes descuidar ninguna de estas
características para que la conexión entre usuario e interfaz sea a primera vista.

Tips para el diseño de interfaces

Que conozcas qué software para diseño de interfaces puedes utilizar es un gran avance, sin embargo,
consideramos necesario darte algunas recomendaciones para que tu trabajo al realizar el diseño de interfaz de
una web o de una aplicación resulte más sencillo.

En este punto te daremos 5 consejos que puedes aplicar al diseño de interfaces para obtener mejores resultados
y satisfacer a tus usuarios. Esperamos que puedas aprovecharlos y lograr diseños increíbles.

• Identifica muy bien a tu público

Lo más esencial en el diseño de interfaces es identificar quiénes son nuestros usuarios, cuáles son sus
necesidades y de qué manera podemos ayudarles a resolver sus problemas. De igual manera, para construir
un perfil completo es fundamental tener a la mano datos demográficos que nos permitan adaptar nuestro
diseño a ellos.

Nuestro principal aliado en este sentido para el diseño de interfaces, serán los datos. Ya que ellos nos guiarán
para crear un diseño atractivo, funcional y fácil de utilizar.

“La creación de personas o arquetipos es una herramienta [para el diseño de interfaces] de primera necesidad,
principalmente, porque puede ayudarte a visualizar quién es el usuario para el que estás diseñando. Este recurso
sirve para representar distintos tipos de usuarios del producto o servicio”.

• Define cómo el público utilizará tu interfaz

Otro aspecto importante para el diseño de interfaces es el establecer cómo usarán los usuarios nuestra
aplicación o página. ¿Utilizarán una computadora, una tablet, o un teléfono? ¿Deben usar botones para ejecutar
ciertas funciones? ¿Deben hacer scroll o interactuar con otros elementos?

Hacerse todas estas preguntas nos ayudará a resolver cualquier problema que se pueda presentar en el futuro,
de los demás se encargan las herramientas de diseño de interfaces.

• Anticípate a los errores de la interfaz

Tanto en el diseño de interfaces como en cualquier otra actividad es posible equivocarse, y eso no
necesariamente tiene que ser un problema. Sin embargo, debes buscar la forma de anticiparte a cualquier
error de diseño y encontrar formas de resolverlos en caso de que se presenten.

Pensar en los errores que puede tener un diseño de interfaz no es tarea fácil, sin embargo, es mucho mejor
invertir ese tiempo en tratar de cubrir todos los detalles, que tener que resolver un problema con poco margen
de maniobra.

13
 • Dedica algo de tiempo al feedback

Si no quieres que la tasa de rebote de una página web se vaya a las nubes, debes asegurarte de analizar el
feedback que recibes de tus usuarios y aplicar cualquier cambio que sea pertinente al diseño de interfaz.

Además, si se presenta algún inconveniente, también es recomendable que le ofrezcas soluciones al usuario, o
que al menos le des un mensaje de disculpas por las molestias ocasionadas.

• Facilita la toma de decisiones de los usuarios

Un buen diseño de interfaces tiene una ruta de navegación lo suficientemente atractiva y optimizada como para
que los usuarios puedan saber qué botones clickear, y puedan tomar decisiones de una manera sencilla.

Si estás vendiendo algún producto, lo peor que puedes hacer es complicarles el proceso a los clientes.
Asegúrate de que podrán hacerlo de forma intuitiva y con mucha facilidad. De esta manera podrás potenciar tu
capacidad de vender, y no perderás ningún usuario por complicaciones innecesarias

14
Principios de usabilidad web para el diseño de interfaz de usuario de Jakob Nielsen

15