04 Evaluación de la usabilidad y caso de estudio

En este caso de estudio vamos hablar de Shortly. Esta herramienta es un acortador de enlaces. Consiste en que el usuario tiene link que normalmente suelen muy largos, lo inserta y automáticamente este le genera una versión corta.

Esto brinda principalmente estos beneficios:

  • Permiten ahorrar caracteres en redes sociales que limitan la longitud de los mensajes.
  • Permiten generar enlaces más fáciles de recordar al ser más cortos.
  • Permiten consultar estadísticas de uso del enlace, por ejemplo, cuántas personas han entrado en el enlace y desde dónde.

Para esta herramienta definiremos dos flujos principales:

  • Acortar los links ingresados.
  • Consultar las estadísticas de cada link.

Link Figma

Link prototipo DSK 

Link prototipo MOB

MAZE

MOB

DSK

 

Para la propuesta gráfica se basó en el concepto tecky que viene de estar a la vanguardia de la última tecnología. Por esos los colores son llevados a los morados y verdes agua vibrantes. Se quiso tener como base una interface limpia y minimal sin muchos elementos para que la lectura de los datos que se recopilen sea rápida y fácil de digerir. Al mismo tiempo con una apariencia amigable nada complicada de entender ni usar.

También se tuvo como concepto la felicidad y satisfacción ya que en un dashboard el usuario podrá ver los avances y como genera tráfico dentro de su página.

A continuación veremos el UI Kit:

Grids:

Colores:
Fuente:
Evaluación de usabilidad:
Con el fin de saber que tan fácil es de usar esta interfaz hemos puesto a prueba la herramienta en las siguientes misiones. La idea es conocer si pueden cumplir los objetivos de cada una de las tareas, si es fácil comprenderlo y si consideran que se puede hacer mejora para facilitar la navegación. De ser así realizaremos las mejoras del caso.
Test con usuarios:

Para esta parte hemos escogido a personas que crean contenido o tienen un emprendimiento y necesitan constantemente compartir y crear links. Los usuarios son digitales, tienen la necesidad de conocer todo el tiempo el tráfico de su página y que medidas deben tomar para que siga incrementando. De esta forma sabremos en que puntos tenemos buenas prácticas y donde debemos realizar las mejoras pertinentes.

Las misiones se deberán llevar a cabo en ambas plataformas y en un tiempo no mayor a 5 minutos ya que muchas de estás deberían ser relacionadas por otras herramientas o aplicaciones que estos usuarios ya manejan.

Para saber mucho más sobre las misiones te dejo el link del caso de estudio aquí.

 

PEC 3 – Diseño centrado en el usuario en los objetos cotidianos

En esta investigación elaboraremos una propuesta de mejora para un ascensor pensando en las necesidades del usuario.

Comenzaremos conociendo un poco cómo es la interacción de los usuarios con el ascensor. Para esto hablaremos con tres usuarios que utilizan a diario los ascensores. Construiremos un prototipo con todas las funcionabilidades que necesita realizar un usuario a diario.

Con toda esta información construiremos un protopersona y definiremos el journey que tiene nuestro usuario, para poder proponer una solución que se ajuste a las necesidades.

Posteriormente evaluaremos nuestro prototipo heurísticamente para saber si lo que hemos construido funciona y será útil para nuestro usuario, con lo que hallemos haremos las mejoras correspondientes.

Aquí les dejo el video explicativo con las conclusiones y mejoras finales:

 

Conclusiones:

-Falta explicar de manera simple y directa el manejo de los ascensores para su correcto uso.

-El manejo adecuado ahorra tiempo.

-Simplificar los botones y detallarlos con íconos es la mejor manera de ayudar al entendimiento.

-Reforzar una acción con audio previene a cometer errores además de que ayuda a enfocarte.

 

PEC 2 – Short.ly

Les presento mi acortador de url Short.ly.

Dentro del figma podrán revisar todo el UI kit que se creó y empleo en la creación de este producto.

Archivo:  Link Figma 

Flujo MOB: Link

Flujo DSK : Link

Aquí un video del funcionamiento del flujo mobile.

Grabación de pantalla 2022-12-04 a la(s) 11.10.24

 

Deconstrucción de una interfaz gráfica

En proyecto hemos deconstruido la web de Airbnb. Para poder reconocer sus componentes partiendo desde algo tan pequeño como los botones, íconos, chips, etc. Con el objetivo de crear las plantillas en las diferentes plataformas.

 

 

 

Archivo Figma : Página

Protipos aquí:

 

Aquí los videos en la diferentes plataformas.

Airbnb mob

Airbnb tablet

Airbnb DSK