10 mejores prácticas

de Diseño UI / UX
Contenido

Introducción 2
Principios de usabilidad 3
Visibilidad del estado del sistema 3
Relación entre el sistema y el mundo real 3
Libertad y control por parte del usuario 3
Consistencia y estándares 3
Prevención de errores 3
Reconocer antes que recordar 4
Flexibilidad y eficiencia en el uso 4
Diseño estético y minimalista 4
Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores 4
Ayuda y documentación 4
Proceso UX 5
Investigación 5
Información relevante para obtener en el proceso de investigación 5
Herramientas para utilizar 5
Diseño 6
Arquitectura de la información 6
Wireframes 7
Diseño visual 9
Test 9
Implementación 10
Medición 10
Conclusión 12
 Next U Mejores prácticas de Diseño UI / UX

Introducción

Actualmente, los activos digitales se han

convertido en el mejor método de comunicación
con los clientes. Su uso brinda un mayor alcance
y logro de objetivos en las organizaciones, tanto
así que se han vuelto una necesidad para estas.

Sin embargo, la competencia existente en la

web por robarse la atención de los usuarios ha
hecho que destacarse se convierta en una tarea
meticulosa.
La creación de interfaces requiere de una
serie de fases que van desde la investigación
del mercado y el público objetivo, hasta la
medición del producto final para identificar si
ha cumplido sus objetivos.

El objetivo de este e-book es guiarte por las

diferentes etapas para la creación de una
interfaz enfocada al usuario y a sus necesidades
con el objetivo de brindar soluciones y mejorar
la experiencia de ellos con la empresa.

3
 Next U Mejores prácticas de Diseño UI / UX

Principios de usabilidad

La usabilidad es la facilidad de navegación, lectura o interacción que posee una plataforma

para que los usuarios puedan interactuar con esta y lograr objetivos concretos.

Jakob Nielsen, una de las personas más respetadas a nivel internacional en el ámbito de la
usabilidad en la web, estableció diez principios que permitirán que las plataformas logren ser
aceptada por los usuarios, permitiendo una correcta y rápida navegación. Estos 10 principios
lograrán el aumento de la eficiencia de los activos digitales.

principios de usabilidad web

Jakob Nielsen

01
Visibilidad del estado del sistema:

La aplicación o sitio web debe mantener informado al

usuario de lo que está pasando dentro de ella, es decir,
debe indicarle al usuario la tarea que está realizando. De
esta forma, él sabrá que se encuentra en el lugar correcto
y que la plataforma está respondiendo a su solicitud.

02
Relación entre el sistema y el mundo real:

El sitio web o aplicación debe estar desarrollado con la

intención de que el cliente potencial logre entender la
plataforma y se sienta familiarizado con esta. Por esta
razón es necesario hablar su mismo lenguaje, haciendo
uso de palabras, imágenes, frases y un orden lógico que
logre ser reconocido y entendido con facilidad.

4
 Next U Mejores prácticas de Diseño UI / UX

03
Libertad y control por parte del usuario:

Es común que al momento de navegar en una plataforma los usuarios

cometan errores y seleccionen la opción incorrecta. Por esta razón, es
necesario brindarles la posibilidad de subsanar su error. Una salida de
emergencia, un botón de deshacer o un menú que funcione como guía
de navegación serán de gran ayuda para el usuario y les brindarán
una mejor experiencia dentro de la plataforma.

04
Consistencia y estándares:

Ser creativo, sin duda alguna, hará que tu plataforma marque la

diferencia, pero cuando de íconos o elementos se trata, es mejor
hacer uso de los estándares o patrones ya prestablecidos. De esta
forma permitirás que el usuario se familiarice con la plataforma.
Por ejemplo, si las líneas horizontales son utilizadas y reconocidas
como un menú desplegable, no intentes hacer uso de otro ícono que
no sea este pensando que lucirá mejor.

05
Prevención de errores:

Al navegar, es común que los usuarios cometan errores y seleccionen

opciones que no quisieron elegir, bien sea por descuido de ellos o por
fallas en la plataforma. Por esta razón es necesario revisar la web y
encontrar posibles errores para, de esta forma, ofrecer ayudas que
permitan reducirlos.

Ejemplos:
• Opción de autocompletar en los buscadores.
• Confirmación de datos.
• Comprobación de campos de formularios.
• Confirmación de opciones (Eliminar, guardar, salir, etc.)

06
Reconocer antes que recordar:

Hacer que la experiencia de tu usuario con la plataforma sea más fácil

es un principio que deberás tener muy en cuenta si deseas una mejor
usabilidad. Es fundamental hacer visibles los elementos, opciones o
acciones realizadas con anterioridad para que el usuario no tenga que
recordar dicha información y se preocupe más por ejecutar la acción
que necesita.

5
 Next U Mejores prácticas de Diseño UI / UX

Para esto, podrás hacer uso de elementos tales como barras de menú,
barras laterales o footer.

07
Flexibilidad y eficiencia en el uso:

Tu plataforma debe estar diseñada para todo tipo de usuarios.

Ingresarán novatos que necesitarán un poco de ayuda durante su
navegación, pero también ingresarán usuarios expertos que buscarán
opciones avanzadas para búsquedas u opciones más específicas.

Por esta razón, podrás generar opciones avanzadas, aceleradores o

atajos para los usuarios registrados en la web y hacer que su naveg-
ación sea más eficaz.

08
Diseño estético y minimalista:

Crear un listado de las opciones más importantes o necesarias de tu

plataforma te ayudará a dejar a un lado aquellas que solo dispersarán
la atención de tus usuarios. En este caso, menos es más. Elige la
información más relevante y que será de interés para tus usuarios, de
esta forma lograrás que el mensaje a transmitir sea más claro y cause
más recordación.

09
Ayuda a los usuarios a reconocer, diagnosticar y recuperarse
de los errores:

Los mensajes de errores dentro de tu plataforma deberán estar

redactados con un lenguaje entendible por todos, es decir, sin códigos.
De esta forma, los usuarios podrán comprender lo que ha ocurrido y
buscar la forma de solucionarlo.

10
Ayuda y documentación:

Aunque las plataformas en sí deben ser entendibles y fáciles de utilizar

para los usuarios, es necesario brindar una serie de ayudas que le
brinden más información a los usuarios. Por ejemplo, podemos hacer
un manual de uso, preguntas frecuentes, entre otros.

Además, es necesario adicionar documentación legal tal como aviso

de cookies, términos y condiciones, política de privacidad, entre otras.

6
Proceso UI / UX

El diseño UI/UX de una plataforma requiere de una serie de etapas que harán que este cumpla
los objetivos por el cual ha sido diseñado.

Investigación Diseño Test Implementación Medición

 Next U Mejores prácticas de Diseño UI / UX

Investigación

La primera etapa en la creación de una plataforma es la investigación. Es el momento en el

que se obtiene toda la información necesaria tanto del cliente como del mercado y la platafor-
ma a diseñar, para de esta forma ofrecer un producto que dé solución a una necesidad y que
logre generar impacto en la sociedad.

• Proyecto: Objetivos, soluciones brindadas, intención comunicativa, entre otras.

• Usuarios: Características del usuario (demográficas, psicográficas, geográficas, conductual),
necesidades, sus contextos naturales sin interferencia del observador, entre otros.
• Contexto: FODA, flujogramas de procesos y actividades, estudio de mercado, oferta y
demanda, entre otros.

Herramientas para utilizar:

• Entrevistas
• Focus groups
• Encuestas
• Customer journey
• Analítica web
• Card sorting

8
 Next U Mejores prácticas de Diseño UI / UX

Diseño

Luego de la recolección de la información, llega el momento de construir el armazón de nuestro

proyecto para finalmente lograr el diseño e interfaz deseada.

Arquitectura de la información

El término ‘Arquitectura de la Información’ (AI) fue utilizado por primera vez en 1975 por
Richard Saul Wurman, quien la define como “El estudio de la organización de la información
con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la
comprensión de la información”.

En otras palabras, consiste en la organización, estructuración y clasificación de los elementos

que componen la plataforma digital, con el fin de hacer que esta sea fácil de entender y utilizar
por el usuario.

Cardsorting

Es una técnica que consiste en jerarquizar, organizar y analizar la información de un sitio web,
tomando como base los pensamientos y actitudes de los usuarios.

Para ello, se seleccionará un grupo de personas que hagan parte del público objetivo y/o
posibles usuarios de la web, quienes se encargarán de organizar la información según lo crean
más conveniente.

9
 Next U Mejores prácticas de Diseño UI / UX

Tipos de Card sorting:

Card sorting abierta:

Los usuarios serán los encargados de darle nombre, agrupar y jerarquizar toda la
información.

Card sorting cerrada:

Se les brindará la información y ellos se encargarán de ubicarla donde lo crean más conveni-
ente.

Árbol de contenido:
El árbol de contenido es una de las herramientas más necesarias en la arquitectura de la
información. Consiste en el diseño de un esquema que permitirá definir la estructura de un
proyecto y el orden de la información según su importancia.

10
 Next U Mejores prácticas de Diseño UI / UX

Wireframes

Teniendo en cuenta la información recolectada en las anteriores etapas, se inicia el proceso

de creación de los wireframes. En esta fase del proceso se le presenta al cliente la estructura y
navegación que tendrá la plataforma por medio de bocetos, para llegar a la interfaz final de la
plataforma.

Wireframes creados a mano: Esta es la opción más sencilla y económica al momento de crear
wireframes. Necesitarás solo un papel, lápiz, una estética definida y una estructura clara de la
plataforma.

Plantillas imprimibles: Podrás hacer uso de plantillas predeterminadas de wireframes

encontradas en internet. Esto te facilitará un poco el trabajo, ya que te brindan guías o
cuadrículas que te permitirán tener un mejor orden de la información.

Aplicación o programa: Si prefieres lo digital, esta es la mejor opción. Podrás crear bocetos
impecables de tu plataforma y descargarlos para posteriormente enviarlos a tus clientes.

11
Diseño visual

Colores: La elección de los colores debe ir más allá de un color ‘agradable’ o de preferencia
para el diseñador. Este será la representación visual de tu empresa y por tal motivo debe
transmitir el mensaje que deseamos dar a los usuarios.

Textos: Los textos y su lecturabilidad son lo más importante, de esta forma estarás seguro
de que el mensaje a transmitir será entendible para los usuarios; para ello deberás tener en
cuenta los siguientes aspectos:

• No hacer uso de más de 3 tipografías.

• No utilices un tamaño de fuente muy pequeño.
• Ten en cuenta el contraste del color de la letra con el fondo.
• Elige una tipografía y tamaño para los títulos y para los párrafos, y haz uso de estos en
todo el sitio web.

Contenido visual: Sin duda alguna el contenido visual como videos, imágenes, fondos e íconos,
captan la atención de los usuarios y permiten transmitir un mensaje más claro, sin embargo,
deberás evitar la saturación de este contenido, pues esto podría perjudicar la velocidad de
carga del sitio web o podría distorsionar el mensaje que deseas transmitir.

Test

Una vez finalizado el diseño de tu sitio web, será el momento de ponerlo a prueba antes de
iniciar su programación. Para ello, podrás seleccionar un grupo de personas y realizar tests que
te permitan identificar los posibles errores presentados.

Tip:

Podrás hacer uso de la metodología

Eyetracking, la cuál registra el
seguimiento ocular cuando un usuario
navega en un sitio web. De esta forma,
detecta las zonas más calientes, es decir,
aquellas que más llaman la atención.
Una excelente técnica para dar los
últimos toques al diseño de tu web antes
de llegar a su implementación.
 Next U Mejores prácticas de Diseño UI / UX

Implementación

Ahora que has logrado una estructuración y diseño de tu sitio web perfecto, llegó la hora de
programar.

Al momento de programar ten en cuenta que llegar al diseño final del sitio web luego de un
largo proceso de investigación no es tarea fácil; es mejor limitarse a plasmar el diseño ya
establecido para que cumpla con el objetivo planteado.

Medición

¿Has realizado un excelente trabajo con las etapas anteriores? Este es el momento para
saberlo y encontrar las cualidades (para resaltarlas) o los errores (para corregirlos) del sitio
web. Para ello podrás hacer uso de distintos test o análisis que te permitan identificarlos.

Test A/B: Podrás lanzar dos versiones de un mismo elemento y probar cuál ha funcionado
mejor. Por ejemplo, en una versión podrás ubicar el call to action en la parte superior y en el
otro ubicarlo en la parte inferior, si el primero ha obtenido un mayor número de clics, sabrás
cuál es el mejor lugar para ubicarlo.

Test de usabilidad: Las preguntas, quejas y sugerencias de los clientes serán lo que ayudará
a determinar las acciones que hacen falta, las que hay que mejorar y las que posiblemente se
podrían excluir.

13
Tip:

Para evaluar la experiencia de usuario de tu sitio web, podrás implementar el five second test.
Para este test, debes seleccionar a un usuario para que visualice tu sitio web (Normalmente el
home) durante 5 segundos. Luego de esto, deberás realizarle una serie de preguntas que logren
comprobar que el usuario logró observar e identificar el mensaje que deseas transmitirle y si
este es claro o si necesita ser explicado de una mejor forma.

Evaluación Heurística: Es una evaluación realizada por expertos en la cual, teniendo en cuenta
elementos del sitio web tales como lenguaje, accesibilidad, elementos multimedia, mensajes,
estructura y navegación, adaptabilidad móvil, entre otros, se busca encontrar aproximada-
mente el 32% de los problemas menores y 42% de los problemas graves de diseño.

Click Tracking: Es un sistema que permite analizar en qué lugares de tu sitio web los usuarios
hicieron clic, de esta forma podrás tomar acciones para lograr que se dirijan justo hacia donde
tú lo deseas.
Conclusión

Para lograr un sitio web óptimo, es necesario realizar un proceso de creación guiado por
etapas que darán como resultado un producto enfocado en el usuario y la solución de sus
problemas o necesidades.

Dicho proceso inicia con la etapa de investigación (se recaudará la información más relevante
sobre nuestro usuarios y el mercado), seguido del diseño (se creará la estructura del sitio web,
seguido de su apariencia visual), test (se ajustarán los últimos detalles, teniendo como base
información recaudada en los test realizados a posibles clientes potenciales), implementación
(se realizará la programación del sitio web) y finalmente la medición (se realizarán análisis del
sitio web y el comportamiento de los usuarios dentro de este, para realizar mejoras).

¿Quieres convertirte en un experto del diseño UI UX? Certifícate con Next U y aprender a crear
un diseño de páginas web y aplicaciones que mejore la interacción y usabilidad de los usuarios.

www.nextu.com