Publicado por

04 Evaluación de la usabilidad y caso de estudio

04 Evaluación de la usabilidad y caso de estudio
Publicado por

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…
En este caso de estudio vamos hablar de Shortly. Esta herramienta es un acortador de enlaces. Consiste en que…

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í.

 

Debate0en 04 Evaluación de la usabilidad y caso de estudio

No hay comentarios.

Publicado por

PAC4. Avaluació de la usabilitat i cas d’estudi

PAC4. Avaluació de la usabilitat i cas d’estudi
Publicado por

PAC4. Avaluació de la usabilitat i cas d’estudi

Introducció El projecte Short.ly, des dels seus inicis, ha sigut crear un prototip d’alta fidelitat i que la seva funció sigui la…
Introducció El projecte Short.ly, des dels seus inicis, ha sigut crear un prototip d’alta fidelitat i que la seva…

Introducció

El projecte Short.ly, des dels seus inicis, ha sigut crear un prototip d’alta fidelitat i que la seva funció sigui la d’escurçador d’enllaços.

En tot moment s’ha plantejat per cobrir els següents dos fluxos:

  • Escurçar un enllaç
  • Revistar les estadístiques de l’enllaç escurçat

Aquest prototip l’hem treballat amb dues plataformes, breakpoints: l’escriptori de l’ordinador i el dispositiu mòbil.

Després d’haver realitzat un primer prototip, s’ha dut a terme una tècnica d’avaluació del prototipat, Thinking Aloud per ser concrets, per conèixer les possibles millores que es podrien aplicar.

Fonaments de la proposta gràfica

En primer lloc, un cop rebut l’encàrrec vam fer una tasca d’investigació per saber quines son les plataformes d’escurçador d’enllaços existents, quin servei ofereixen i com presenten la seva informació. Aquest procés va servir per inspirar-nos de cara al nostre prototip.

Dues de les pàgines que vam destacar com a exemples interessant i d’on vam poder extreure alguna informació van ser:

Després de veure aquests exemples, vam detallar en una llista alguns dels conceptes que havia de respondre afirmativament el nostre prototip:

  • Senzillesa
  • Entenedor
  • Informatiu
  • Útil
  • Ràpid

Un cop definit alguns dels objectius, es va crear un Mood Board amb aquelles plataformes que vam trobar interessants, així com altres portals que ens despertaven interès per la seva combinació cromàtica com es el cas de la Universitat Oberta de Catalunya.

També es va crear un Mood Board amb conceptes que ens transmeten sensacions a les buscades.

Procés de disseny

Un cop amb les primeres passes del projecte definit ens vam decidir a crear un wireframes, prototip de baixa fidelitat, de manera manual per veure quines son les pàgines que necessitaríem i com es pretenia integrar les diferents funcions previstes.

Ja amb el prototip de baixa fidelitat creat i analitzat, ens vam disposar a plasmar-ho amb un d’alta fidelitat. El primer pas, segons la nostra experiència en altres projectes, va ser especificar funcions i crear components en un UI Kit, una guia d’estil, a través de Figma. A continuació, adjuntem alguna de les informacions que es van proporcionar.

Un cop amb la guia d’estil ja definida, ens vam disposar a treballar amb les diferents pàgines de prototip. A continuació, adjuntem algun exemple i una imatge representativa de totes les interaccions previstes en el prototip.

Avaluació amb usuaris

Amb un primer prototip creat, hem aplicat la tècnica d’avaluació amb usuaris Thinking Aloud per tal de millorar la usabilitat del disseny corregint aspectes millorables. Tot seguit donem algunes informacions sobre com s’ha realitzat aquesta prova:

  • Hem volgut analitzar els dos fluxos principals, escurçar un enllaç i consultar les estadístiques, i se li ha afegit el fet d’iniciar sessió o registrar-se per passar per totes les pantalles creades. A la vegada, el mateix test es realitzarà amb dos dels dispositius: el telèfon mòbil i l’ordinador.
  • La sessió s’ha realitzat a tres persones a les quals se’ls hi ha aplicat una entrevista semi-estructurada. A aquests entrevistats se’ls ha convidat a anar comentant en veu alta allò que estaven pensant i se li han realitzat unes qüestions post-test per acabar de donar una idea més complerta dels seus pensament.
  • Aquestes tres persones usuàries han estat escollides sota un criteri concret. En primer lloc, hi ha cert grau de confiança i, en segon, s’ha volgut que responguessin a unes característiques concretes: de diferents generacions i acostumades a les aplicacions mòbils.

Un cop amb els comentaris enregistrats i analitzats, han sorgit un seguit de punts de millora.

  • Canviar la nomenclatura d’alguns botons.
  • Treure el text a fora de les caixes de text i a dins oferir exemples.
  • Eliminar els botons repetits o innecessaris com aquells dels apartats de registrar-se o iniciar la sessió.
  • Afegir l’opció de registre mitjançant Google, Facebook i Twitter.
  • Treure l’opció d’escurçar un enllaç en l’apartat destinat a consultar les dades.
  • Fer que els botons d’eliminar o editar de l’apartat de les estadístiques faci referència als enllaços ja escurçats i no al grafisme.

A continuació, exposem gràficament les diferències entre el primer prototip presentat i aquell que ha sorgit un cop amb els canvis aplicats.

Conclusió i aprenentatge

Com a conclusió podem afirmar que l’aplicació del Thinking Aloud ha sigut satisfactòria i que ens ha donat algunes pautes de millora que hem trobat coherents. El fet d’oferir tres mirades crítiques més a un mateix producte, ens dona una idea de com fer un producte final més complert i entenedor per hipotètics futurs usuaris.

Des del punt de vista personal, s’han fet alguns errors impropis al primer prototip d’allò que buscava cobrir el portal o aplicació. El fet de testar-ho amb els usuaris ens ha permès adonar-nos d’aquests i millorar-los. El procés ha sigut molt còmode i les sensacions finals, molt positives.

El resultat final considerem que respon de manera afirmativa a aquelles característiques que buscàvem i, a més, també trobem que cobreix els dos fluxos principals que se’ns havia encarregat. Així doncs, la segona versió del prototip considerem que és millor i més complerta que la primera.

A continuació, adjuntem els dos prototips finals.

Moltes gràcies per la vostra atenció,

Oriol Quintana

Debate0en PAC4. Avaluació de la usabilitat i cas d’estudi

No hay comentarios.

Publicado por

PEC4 – Evaluación de la usabilidad y caso de estudio

Publicado por

PEC4 – Evaluación de la usabilidad y caso de estudio

CASO ESTUDIO · Shortly Web Responsive · Acortador de enlaces    CONTEXTO Shortly es una herramienta web responsive para acortar enlaces. De…
CASO ESTUDIO · Shortly Web Responsive · Acortador de enlaces    CONTEXTO Shortly es una herramienta web responsive para…

CASO ESTUDIO · Shortly

Web Responsive · Acortador de enlaces 

 

CONTEXTO

Shortly es una herramienta web responsive para acortar enlaces. De manera que el usuario puede introducir una dirección de internet (URL) cualquiera y la función principal de la herramienta será generar una versión corta de la misma.

Esta herramienta tiene 3 funciones:

    • Permite publicar links en redes sociales donde existe una limitación de longitud de los mensajes (Twitter)
    • Permite la obtención de un enlace más corto y fácil de reconocer o recordar
    • Permite también consultar las estadísticas de uso del enlace

 

FUNDAMENTOS DE LA PROPUESTA GRÁFICA

Como primera parte del proceso de diseño, llevé a cabo una pequeña investigación para obtener una visión más amplia de las herramientas que existen actualmente para entender cómo funcionan y cómo resuelven el diseño de interacción tanto en temas de estructura como en cuestiones de look&feel y layout.

Una vez recopilada la suficiente información, al ser un proyecto empezado des de 0, generé un Universo Visual definiendo una serie de conceptos asociados al futuro producto. De aquí generé un Mood Board que me ayudó a que los conceptos de mi universo visual tomaran forma.

A partir de aquí pude definir la paleta de colores, la tipografía e iconografía que perfectamente encajaba con el concepto del producto.

 

PROCESO DE DISEÑO

El briefing del proyecto señalaba que era necesario diseñar para desktop y mobile, de manera que la creación del producto debía tener en cuenta los términos de diseño responsive. Por lo tanto, lo primero antes de empezar con el proceso de creación de componentes y estilos, se puso detenida atención en la definición de la rejilla, facilitando la creación de los componentes básicos. En este punto del proceso buscaba construir un sistema que fuera lo más económico posible, es decir, que se pudieran directamente usar los mismos componentes para los dos break points definidos o, que estos sufrieran los mínimos cambios al pasar del uno al otro.

Una vez definida la rejilla empecé con el diseño del producto, la creación de los estilos (UI Kit) y sus componentes. Para organizar mi sistema de diseño me basé en el diseño atómico, ya que es una metodología que me funciona muy bien a la hora de crear los componentes. Para construir mi interfaz me basé en un pequeño grupo de componentes que poco a poco fui agrupando en componentes más complejos.

Una vez completado mi UI Kit, empecé con la creación de las diferentes pantallas y definición de los flujos del prototipo interactivo.

Seguidamente redacté un informe explicativo para llevar a cabo una prueba de usabilidad con usuarios, definiendo los objetivos generales, localizando las áreas a testear, definiendo escenarios de uso coherentes y el perfil objetivo de persona usuaria.

El objetivo principal de esta prueba donde se aplicó el método del Thinking Aloud, fue identificar los problemas de usabilidad de la interfaz. Esta prueba la realicé con 5 usuarios siguiendo el ejemplo de Jacob Nielsen y Tom Landauer y su investigación que demuestra que haciendo una prueba con 5 usuarios se localiza el 85% de los problemas de usabilidad del proyecto. Seleccioné 2 usuarios para testear el desktop prototype y 3 más para el mobile.

De las pruebas se pudieron extraer los siguientes insights y sus propuestas de mejora:

    • Que el botón de sign up sea la primera información que el usuario encuentra no está hecho al azar. El principal objetivo de la página es obtener el máximo número de registros de manera que se prioriza la acción. El usuario puede probar gratuitamente el servicio de la página de igual manera sin necesidad de registrarse previamente. Se define que el usuario pueda acortar hasta un máximo de 3 enlaces. Seguidamente será necesario el registro para poder seguir usando la herramienta. Por lo tanto, el icono de eliminar tanto en la página principal como en la página de estadísticas del enlace no será visible para los usuarios que no estén registrados. Se diseña un mensaje informativo para que el usuario esté al tanto de que es necesario registrarse para poder acortar más enlaces.


      ANTES (icono para eliminar enlace)


      DESPUÉS (sin icono)

    • ¿Se ha copiado el enlace? – Es necesario diseñar feedback del sistema para que la acción del usuario sea claramente visible identificando que la aplicación responde al copiar el enlace. De igual manera se añade mensaje de error en el caso que el usuario no introduzca una URL correcta y, mensaje informativo cuando el usuaria haya utilizado la herramienta para acortar el máximo establecido de enlaces. (Véase seguidamente en el prototipo).

      MOBILE (feedback al copiar el enlace)
      DESKTOP (feedback al copiar el enlace)
    • ¿Cómo consultar las estadísticas del enlace acortado si hemos cerrado la página? – Es necesario que los enlaces (un máximo de 3) queden guardados para que el usuario al regresar pueda consultarlos. Permanecerán en la página principal de la herramienta.

      DESKTOP (se conservan los links en la página)

    • ¿Uso de iconos o texto? En el caso de desktop se han usado ambos. Entendemos que la acción de copiar el enlace prioriza en un primer momento a la de consultar las estadísticas por lo tanto se utiliza la palabra “Copy” para fomentar la agilidad de entendimiento del usuario. En el caso del diseño mobile y por restricciones de espacio y layout se opta por el uso de iconos, lo más descriptivos y standard posibles, para ambas acciones.

Siguiendo el proceso de diseño proseguí con la segunda iteración de los diseños aplicando los cambios a partir de los resultados obtenidos en las pruebas de usabilidad. Dando como resultado el prototipo final de este proyecto.

? ? Enlace a los prototipos 

CONCLUSIONES

En general los cambios en el diseño fueron mínimos pero determinantes para la mejora de la interacción con la herramienta. Se entiende que los diseños previos cumplían con unos estándares buenos de usabilidad y una buena coherencia en la arquitectura de la información, ya que los usuarios pudieron completar las tareas sin dificultades. Por otro lado, las pruebas de ayudaron a definir mejor la interacción que ofrece la aplicación (freemium) y a mejorar la visualización del estado del sistema, definiendo mensajes de error, validación e informativos durante toda la interacción.

 

Debate0en PEC4 – Evaluación de la usabilidad y caso de estudio

No hay comentarios.

Publicado por

PEC.04 Prototipado

Publicado por

PEC.04 Prototipado

EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO Para terminar con la asignatura, se han realizados las mejoras pertinentes tras la primera evaluación y, a continuación, se ha testeado el producto con usuarios reales para otra evaluación. En el documento que podemos ver a continuación (case study) está redactado todo el proceso de diseño, así como las mejoras implantadas y conclusiones: En los siguientes enlaces podréis acceder tanto al la versión móvil como web del último prototipo mejorado. 04 Evaluación…
EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO Para terminar con la asignatura, se han realizados las mejoras pertinentes…

EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO

Para terminar con la asignatura, se han realizados las mejoras pertinentes tras la primera evaluación y, a continuación, se ha testeado el producto con usuarios reales para otra evaluación.

En el documento que podemos ver a continuación (case study) está redactado todo el proceso de diseño, así como las mejoras implantadas y conclusiones:

En los siguientes enlaces podréis acceder tanto al la versión móvil como web del último prototipo mejorado.

Debate0en PEC.04 Prototipado

No hay comentarios.