urData prototipo 1
Informe de usabilidad UX
Misión 1
Crear nuevo acuario
77%
24 completados10%
3 se rindieron96s
Para completar31
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" | input#capacity |
55
|
| 2 | "Elemento" | i#fab-icon |
28
|
| 3 | "Elemento" | input#aquarium-name |
27
|
| 4 | "Elemento" | textarea#aquarium-description |
27
|
| 5 | "Elemento" | input#tags |
27
|
| 6 | "Acuario 3 Descripcion" | a |
20
|
| 7 | "Elemento" | i#new-aquarium-icon |
15
|
| 8 | "Elemento" | a#new-aquarium |
10
|
| 9 | "Acuario 3" ⚠️ ¿Dead Click? | h3 |
10
|
| 10 | "Elemento" | i.fa-solid |
6
|
Voz del Usuario
"me ha encantado, gracias Danel por dejarme crear mi acuario ;)"
"ez"
"En mi opinión, el botón "(+)" para crear un nuevo acuario debería de contener texto "Crear acuario" o "Nuevo acuario" ya que puede que haya personas que no estén acostumbradas a que el símbolo "+" sirve para crear un elemento nuevo. Ademñas, personas que utilicen el lector de pantallas no entendería el contexto de ese botón. Por ello, añadiría texto a los botones con icono: "+" Nuevo acuario, "icono disquete" Guardar. Por último, cambiaría el icono del disquete por otro más actual."
"Bien"
"Bien."
"Sencillo de llegar. Se agradece que el botón de guardar acuario sea más grande, pues es más fácil encontrarlo. El botón de añadir acuario podría destacar algo más (aunque se encuentra fácil)"
"el icono del disquete un poco ambiguo, los tags para añadir abren la puerta a errores tipográficos, el nombre del acuario se puede repetir y las referencias iniciales de los tres acuarios no contienen datos por lo que la expectativa de usuario sobre lo que tiene que hacer es un poco ambigua. Faltaría contexto de presentación sobre qué hace la aplicación para guiar al usuario eventualmente aunque este no es el ejercicio principal."
"He tardado un poco en entender que el simbolo + era para crear usuario. No se ve claro. Algo que ponga crear nuevo acuario o nuevo usuario estaría mejor. Si no, el plus hazlo más grande o de otro color."
"el hecho de que aparezca el placeholder en litros me ha llevado a saltar el paso"
"El botón de guardar no queda del todo claro que sea de guardar aunque lo he intuido y este botón tampoco hace hover por lo que no estaba seguro si era un botón o no."
"Mu ben"
"muy generica. No hay marcados campos obligatorios y la capacidad puede ser negativa"
Misión 2
Ir a configuración de parámetros
81%
22 completados11%
3 se rindieron85s
Para completar27
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Acuario 1" ⚠️ ¿Dead Click? | h3 |
20
|
| 2 | "Elemento" | a |
15
|
| 3 | "Elemento" ⚠️ ¿Dead Click? | i#menu-icon |
15
|
| 4 | "Elemento" | a#menu-button |
11
|
| 5 | "Elemento" | i.fa-solid |
9
|
| 6 | "Configurar Parámetros" | a#configure-parameters |
8
|
| 7 | "Elemento" | i.fa |
4
|
| 8 | "Elemento" | i#fab-icon |
3
|
| 9 | "Elemento" | .fa-solid |
3
|
| 10 | "Elemento" | nav |
2
|
Voz del Usuario
"Por el poco contexto de la tarea 2, creo que no se entiende qué son los parámetros de configuración. Personalmente, he entendido que eran los parámetros de configuración del acuario. Creo que estaría bien especificar que se buscan los parámetros de configuración de la aplicación, y no de los acuarios."
"Quizás por costumbre he entendido que la rueda de configuración está siempre arriba. Los menús suelen estar arriba"
"Es fácil llegar porque hay pocos elementos, pero me ha costado ver el botón con el icono de engranaje. Demasiado pequeño con respecto al botón central."
"El pictograma de parámetros compartido por muchas otras aplicaciones es comprensible (rueda de distribución), aunque a posteriori se da un menú lista de 3 elementos que incitan a hacer una lectura para evitar error de navegación."
"Falta hover de los botones. EL icono es adecuado."
"ok"
"facil"
"Abajo se veia poquito"
"Al principio le he dado al boton del medio porque como era solo "ver" no pensaba que fuese a estar en "configuracion""
Misión 3
Crear/editar parámetro numérico
88%
22 completados8%
2 se rindieron98s
Para completar25
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "1" | input#min |
75
|
| 2 | "Elemento" | i#fav-save-icon |
48
|
| 3 | "9" | input |
42
|
| 4 | "99" | input#max |
38
|
| 5 | "Numérico" | button#numeric-parameter |
36
|
| 6 | "Elemento" ⚠️ ¿Dead Click? | img |
30
|
| 7 | "Editar Parámetro: Nitratos (NO" ⚠️ ¿Dead Click? | div#root |
26
|
| 8 | "Elemento" | span |
20
|
| 9 | "Configurar Parámetros" ⚠️ ¿Dead Click? | h3 |
18
|
| 10 | "Elemento" | i.fa |
17
|
Voz del Usuario
"pH"
"Creo que las instrucciones de la tarea no son claras, se indica crea o edita y guarda. He editado uno de los parámetros y no he superado la prueba."
"El botón numérico o color es confuso con el enunciado, uno intuye que tiene que editar por completo una propiedad, que por cierto no se mantiene al cambiar de 'pestaña'"
"Me ha resultado fácil encontrarlo porque la pantalla me lleva directamente a la sección de parámetros. Al ir deliberadamente a la home, me ha costado "bastante" llegar a lso parámetros. No lo he visto muy intuitivo."
"Me parece que el boton de guardar esta muy lejos de los parametros que cambias. Debería estar todo en el mismo bloque para que sientas que estás guardando los cambios, al estar tan lejos ese boton parece que va a hacer otra cosa"
"si, pero no entendi como lo hice "
"Se puede poner un minimo mayor al máximo"
"ok"
"a la hora de seleccionar parametro numerico no hay diferencia con el de color"
"No entendia la mision pero creo que es porque son cosas de peceras"
Misión 4
Crear/editar escala de color
96%
23 completados4%
1 se rindieron38s
Para completar24
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Color" | button#color-parameter |
18
|
| 2 | "numérico" ⚠️ ¿Dead Click? | p |
10
|
| 3 | "0" | input#min |
10
|
| 4 | "Elemento" | span |
9
|
| 5 | "Test de Gotas - Marca Tetra" ⚠️ ¿Dead Click? | h3 |
9
|
| 6 | "Numérico" | button#numeric-parameter |
9
|
| 7 | "+ Nueva Escala" | button |
8
|
| 8 | "Elemento" | i#fab-icon |
5
|
| 9 | "NH3 color unidad: mg/L 5 es" | a#parameter-1 |
4
|
| 10 | "Nombre: Unidad: Mínimo Máxi" ⚠️ ¿Dead Click? | section |
4
|
Voz del Usuario
"me ha costado un poco más que la anterior, la 2 creo que no la he podido/sabido hacer"
"Las instrucciones de esta tarea son claras."
"Igual que editar parámetros, "cuesta" encontrarlo... Además, tampoco atyuda que la palabra Color tenga una fuente tan pequeña (hace que la sección pase bastante más desapercibida)"
"Ya tenía familiaridad con el menú debido a las pruebas anteriores. Aunque la presentación de los dos parámetros por defecto en las dos propiedades dadas generan un poco de confusión."
"Bien, lo he visto claro"
"facil"
"Realmente no he llegado a editar la escala, sólo entrar a la pantalla. Y no estaba muy seguro de si estaba pinchando en el lugar correcto para llegar al menú de edición."
"ok"
"he llegado un poco por intuición"
Misión 5
Crea un nuevo punto de color
96%
23 completados4%
1 se rindieron53s
Para completar24
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" ⚠️ ¿Dead Click? | img |
108
|
| 2 | "Elemento" | i#fav-continue-icon |
42
|
| 3 | "Elemento" | i#fav-take-pic-icon |
22
|
| 4 | "Elemento" | i.fa |
18
|
| 5 | "Elemento" | span |
13
|
| 6 | "9" | input |
8
|
| 7 | "1" | input#color-value |
6
|
| 8 | "Nuevo Punto " | a#add-point |
6
|
| 9 | "Selecciona un punto blanco en " ⚠️ ¿Dead Click? | div |
4
|
| 10 | "Elemento" | a |
4
|
Voz del Usuario
"muy divertida"
"Teniendo en cuenta mi poca experiencia en acuarios, no he entendido a qué se refiere con "selecciona un punto blanco en la imagen". Creo que habría que añadir más instrucciones, sobre todo, para personas con escasa o nula experiencia."
"No he entendido muy bien esta funcionalidad... Es cierto que l texto me ha guiado hacia lo que tenía que hacer, pero he seguido las instrucciones a ciegas, sin saber lo que estaba haciendo (no sé si esa es la intención)"
"No hay punto blanco absoluto en la fotografía, el enchufe es lo más claro que encontré."
"Sinceramente aquí no entiendo que he hecho pero lo he hecho"
"facil "
"No entiendo qué es "captura foto" y no sabía qué hacer ahí"
"Le he dado a un color cualquiera que no es el blanco y me ha funcionado "
"al decir que se elija un punto blanco como la parte externa es blanca primero me he ido ahí"
"me ha costado ver que se añadía un texto a la imagen, estaba buscando botones debajo"
Misión 6
Crear nueva medición
83%
20 completados8%
2 se rindieron71s
Para completar24
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" | i#fab-capture-icon |
27
|
| 2 | "Elemento" | a |
26
|
| 3 | "Elemento" | i.fa-solid |
21
|
| 4 | "Descripcion" ⚠️ ¿Dead Click? | p |
20
|
| 5 | "Acuario 3" ⚠️ ¿Dead Click? | h3 |
19
|
| 6 | "Elemento" | i.fa |
18
|
| 7 | "Elemento" ⚠️ ¿Dead Click? | i#home-icon |
6
|
| 8 | "Acuario 1 Descripcion" | a#aquarium-1 |
6
|
| 9 | "Elemento" | a#home-button |
4
|
| 10 | "Elemento" | a#fab-capture |
3
|
Voz del Usuario
"no he podido realizar la misión"
"Como he comentado anteriormente, estaría bien añadir texto a los botones. He superado la prueba a base de ir cliclando por la pantalla."
"He llegado, pero no me ha quedado nada claro cómo llegar... He llegado porque hay pocos botones que pulsar y, por lo tanto, no hay muchas opciones de selección."
"Ambiguo, uno tiende a hacer click en + cuando se le pide 'nueva' y luego a hacer click en parámetros para agregar una medición nueva, y lugo en un elemento existente de acuario para poder editar mediciones, y finalmente se da uno cuenta que no queda más remedio que hacer click en la lupa como último recurso disponible."
"Cero intuitivo, he empezado a dar botones y he tenido suerte. Yo indicaría que hace cada boton. No sé si es porque no sé de acuarios"
"facil "
"no entendi lo que hice nuevamete "
"Un poco confuso. Primero, pensaba que tenía que meterme en un acuario para realizar la medición pero no funcionaba. Después, el icono no me quedaba claro qué era."
"no está claro para llegar"
"la he encontrado probando tocar botones, una lupa con un grafico no lo he entendido como medicion "
Misión 7
Medición numérica
95%
21 completados5%
1 se rindieron103s
Para completar22
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "on" | input |
61
|
| 2 | "Capturar foto " | a |
33
|
| 3 | "Elemento" ⚠️ ¿Dead Click? | img |
32
|
| 4 | "Elemento" | i#fab-number-save-icon |
20
|
| 5 | "Elemento" | i.fa-solid |
19
|
| 6 | "KH numérico" | a#parameter-number |
13
|
| 7 | "NH3 color" | a#parameter-color |
11
|
| 8 | "numérico" ⚠️ ¿Dead Click? | p |
11
|
| 9 | "Acuario 1" ⚠️ ¿Dead Click? | h3 |
10
|
| 10 | "Elemento" | i#fav-continue-icon |
9
|
Voz del Usuario
"está muy bien, divertida"
"Instrucciones claras, como punto de mejora aumentaría de tamaño del tipo de parámetro: color, numérico."
"No entiendo por qué, para cambiar los parámetros de mi acuario, no me pueda meter a mi acuario directamente desde la pantalla inicial y que tenga que hacerlo a través del icono de la lupa."
"El input text sin placeholder da la sensación de que la entrada puede ser completamente arbitraria y las siglas ppm respecto a dureza del agua no son necesariamente de comprensión para neófitos a no ser que tuviera una leyenda explicativa."
"Se entiende pero sigo pensando que el boton de guardar está muy lejos"
"facil"
"ole "
"me confunde el hecho de crear una medicion para un parametro numerico creo que lo he hecho de casualidad"
"no he entendido muy bien que se me pedía hacer"
Misión 8
Medición de color
95%
21 completados5%
1 se rindieron57s
Para completar22
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" ⚠️ ¿Dead Click? | img |
72
|
| 2 | "Elemento" | i#fav-continue-icon |
56
|
| 3 | "Capturar foto " | a |
23
|
| 4 | "NH3 color" | a#parameter-color |
22
|
| 5 | "9" | input |
15
|
| 6 | "84" | input#scale-range |
9
|
| 7 | "tetra" | select#scale-name |
7
|
| 8 | "KH ppm" ⚠️ ¿Dead Click? | div#root |
6
|
| 9 | "Elemento" | a#fab-continue |
6
|
| 10 | "Elemento" | span.color |
6
|
Voz del Usuario
"creo que no captura bien el color"
"Instrucciones claras."
"Proceso muy confuso, que se acrecienta por el hecho de no poder acceder a mi acuario desde la página principal."
"He tenido que hacer click dos veces en la flecha/siguiente después de seleccionar un punto blanco."
"Supongo que la gente sabe que al capturar una foto dentro de parametro de color es para crear uno nuevo. Yo no lo sabía pero intuitivamente vas allí"
"heee no se que hacer en este punto."
"facil"
"supongo que el no entender el objetivo final me hace realizar los pasos con cierta incertidumbre de si se está haciendo bien"
Misión 9
Visualizar gráficas
95%
21 completados5%
1 se rindieron70s
Para completar22
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" | button#data-show-type__chart |
23
|
| 2 | "KH" | button#khButton |
20
|
| 3 | "Acuario 1 Descripcion" | a |
12
|
| 4 | "NH3" ⚠️ ¿Dead Click? | th |
11
|
| 5 | "Descripcion" ⚠️ ¿Dead Click? | p |
10
|
| 6 | "Elemento" | i#fab-capture-icon |
8
|
| 7 | "Elemento" | i.fa-solid |
8
|
| 8 | "0" ⚠️ ¿Dead Click? | td |
5
|
| 9 | "Elemento" ⚠️ ¿Dead Click? | ul |
5
|
| 10 | "Elemento" | canvas#myChart |
5
|
Voz del Usuario
"muy chula!!!"
"A mi parecer, no se entiende bien lo que pide las instrucciones. En caso de poca experiencia en cuanto a acuarios, habrá gráficas que los usuarios no entiendan para qué sirven. Creo que sería conveniente añadir un pequeña explicación o botón info explicando brevemente qué es cada gráfica y para qué sirve. Asimismo, me parece que el contraste de colores de los botones de las gráficas es escaso y no pasa AA."
"No se entiende lo que es "KH"."
"Ahora sí que no termino de entender el botón de la lupa... Resulta que me sirve para ver métricas (lo que se desprende del iconono), pero también para introducir datos del acuario."
"Yo utilizaría otro simbolo más claro para representar una grafica. Que tenga los ejes por ejemplo"
"Debido al sesgo de lectura de izquierda a derecha he tendido a mirar en la primera pestaña por defecto los valores directamente, al no encontrarlos, el botón que más llamó la atención era el de descargar el archivo, pese a que los valores no aparecían en los checkboxes, tuve que seguir adelante con la expectativa (y muchas dudas) de si existiera el dato en el archivo descargado. Finalmente, al recomenzar el proceso, vi un botón cuyo pictograma no era muy llamativo que representaba una pseudo gráfica en forma de flecha, y me permitió a posteriori acceder al dato."
"no lo veo claro quizá algo que ayude un poco ha sido con seguridad si estoy haciendo bien"
"facil"
"Más o menos, ligeramente confuso."
Misión 10
Descargar datos
95%
21 completados5%
1 se rindieron26s
Para completar22
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" | i.fa-solid |
18
|
| 2 | "Elemento" | i#download-icon |
15
|
| 3 | "Acuario 1" ⚠️ ¿Dead Click? | h3 |
10
|
| 4 | "Acuario 1 Descripcion" | a |
9
|
| 5 | "Elemento" | input#start-date |
7
|
| 6 | "Elemento" | input#end-date |
7
|
| 7 | "Elemento" | a#download-button |
5
|
| 8 | "Descripcion" ⚠️ ¿Dead Click? | p |
4
|
| 9 | "Elemento" | i#fab-capture-icon |
2
|
| 10 | "Elemento" | button.FAB |
2
|
Voz del Usuario
"muy chula!! "
"Añadiría texto a los botones para un correcta comprensión."
"Se entiende bien."
"Está bien, un poco pequeño el simbolo de descarga"
"Fácil, el pictograma es comprensible y ya había accedido a este contenido en la prueba anterior."
"ok"
"No he seleccionado nada y me ha dejado descargarlo"
"facil"
Misión 11
Importar datos
91%
20 completados9%
2 se rindieron47s
Para completar22
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Importar datos" ⚠️ ¿Dead Click? | h3 |
39
|
| 2 | "Acuario 3 Descripcion" | a |
25
|
| 3 | "Elemento" | i.fa-solid |
21
|
| 4 | "Descripcion" ⚠️ ¿Dead Click? | p |
16
|
| 5 | "Elemento" ⚠️ ¿Dead Click? | i#config-icon |
16
|
| 6 | "Elemento" | a#config-button |
10
|
| 7 | "Elemento" | i#fab-capture-icon |
10
|
| 8 | "Elemento" | input#file |
9
|
| 9 | "Importar datos" | a#import-data |
6
|
| 10 | "Elemento" | i.fa |
5
|
Voz del Usuario
"no me ha descargado ningún archivo por lo que no puedo importar, seguramente he hecho algo mal"
"Creo que no es muy intuitivo que para importar los datos de un acuario haya que ir a "Configuración". En mi esquema mental, en la sección Acuarios sería más recomendable e intuitivo añadir "Importar datos"."
"He llegado, pero porque hay pocos botones... Visualmente me ha costado identificar el problema."
"No lo he visto nada claro, he pensado que tenía que entrar en un acuario primero"
"Bien. Fácil, aunque hace un prompt a mis archivos locales y no parece influir en el proceso."
"al adjuntar el archivo queda confuso el siguiente paso que me ha llevado a volver a hacer la seeleccion porque el simbolo al que hay que dar me parece de descarga no de importar"
"He supuesto que era en configuaración pero por casualidad. Me esperaba un botón específica que me permitiese importar desde la pantalla principal."
Misión 12
Exportar datos
95%
21 completados5%
1 se rindieron41s
Para completar22
Sesiones totalesDistribución de Usuarios
Elementos más clickados
| # | Elemento / Texto | Selector | Clicks |
|---|---|---|---|
| 1 | "Elemento" | i.fa-solid |
22
|
| 2 | "Elemento" ⚠️ ¿Dead Click? | i#config-icon |
17
|
| 3 | "Exportar datos" ⚠️ ¿Dead Click? | h3 |
17
|
| 4 | "Elemento" | input#name |
12
|
| 5 | "Acuario 3 Descripcion" | a |
11
|
| 6 | "Elemento" | i#fab-capture-icon |
10
|
| 7 | "Exportar datos" | a#export-data |
10
|
| 8 | "Descripcion" ⚠️ ¿Dead Click? | p |
5
|
| 9 | "Elemento" | a#config-button |
5
|
| 10 | "Elemento" | .fa-solid |
2
|
Voz del Usuario
"en el botón exportar hace la importación (al menos a mí)"
"Como he mencionado anteriormente, no me ha resultado intuitivo que para acceder a "Exportar datos" haya que ir a la "Configuración". Hasta la tarea 12, no se entiende cuál es el menú."
"Igual que importar datos... Llego porque hay pocos botones que pulsar. "
"Me ha pasado lo mismo. He pensado que tenía que entrar en un acuario primero"
"Relativamente fácil, el menú ya estaba más o menos ubicado."
"para llegar a importacion exportacion instintivamente primero selecciono el acuario en vez de ir al icono, me confunde"
"No he añadido el nombre del archivo y me ha dejado"
"Porque lo he visto antes en la prueba de importación que si no habría ido uno por uno intentándolo. Tal vez debería haber en la pantalla principal un par de botones de importar/exportar."