Evaluación rápida de una aplicación Android para la gestión de recetas.

1. Epicurious app
(Android)
Análisis estructura e interfaz
http://jordisan.net
@jordisan

2. 05/03/2012 Epicurious app (Android)
2
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

3. 05/03/2012 Epicurious app (Android)
3 Introducción
Epicurious App
 Aplicación
móvil para
acceder a las recetas
del sitio
www.epicurious.com
 Disponible para
iPhone, iPad, Android, Nook, Windows
Phone, Kindle Fire
 Más de 30.000 recetas de comida y bebida
clasificadas por diferentes criterios
 También:
 creación de listas de la compra; recetas favoritas;
búsqueda por voz; valoraciones de usuarios

4. 05/03/2012 Epicurious app (Android)
4 Introducción
¿Qué tiene de interesante?
 No es la típica versión limitada de una aplicación
de escritorio
 Gran cantidad de información con múltiples
criterios de búsqueda y clasificación
 Muchas posibilidades de mejora y de ampliación

5. 05/03/2012 Epicurious app (Android)
5
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

6. 05/03/2012 Epicurious app (Android)
6 Estructura y funcionalidades
Búsqueda y consulta de
recetas (comida y bebida)
 Por
categorías
(página inicial)

7. 05/03/2012 Epicurious app (Android)
7 Estructura y funcionalidades
Búsqueda y consulta de
recetas (comida y bebida)
 Listade recetas
(resúmenes)
 Acciones
 Ver receta
 Añadirla a
favoritas
 Crear lista
de la compra
 Enviar por email

8. 05/03/2012 Epicurious app (Android)
8 Estructura y funcionalidades
Una receta
 Receta
 Detalles
 Ingredientes
 Preparación
 Imagen
 Valoraciones

9. 05/03/2012 Epicurious app (Android)
9 Estructura y funcionalidades
Una receta
 La receta, paso a paso
 Al colocar el dispositivo en posición apaisada
 ¡Para usarla mientras se cocina!

10. 05/03/2012 Epicurious app (Android)
10 Estructura y funcionalidades
Una receta
 Valoraciones

11. 05/03/2012 Epicurious app (Android)
11 Estructura y funcionalidades
Búsqueda y consulta de
recetas (comida y bebida)
 Comidas por:
 ingrediente principal
 hora del día
 origen geográfico
 dietética
 tipo de plato
 estación o
acontecimiento

12. 05/03/2012 Epicurious app (Android)
12 Estructura y funcionalidades
Búsqueda y consulta de
recetas (comida y bebida)
 Bebidas por:
 ingrediente principal
(alcohólico)
 ingrediente principal
(no alcohólico)
 origen geográfico
 tipo de bebida
 estación o
acontecimiento

13. 05/03/2012 Epicurious app (Android)
13 Estructura y funcionalidades
Consulta y búsqueda de
recetas (comida y bebida)
 Búsquedas libres
y por voz

14. 05/03/2012 Epicurious app (Android)
14 Estructura y funcionalidades
Lista de recetas favoritas

15. 05/03/2012 Epicurious app (Android)
15 Estructura y funcionalidades
Lista de la compra
 A partir de
una receta

16. 05/03/2012 Epicurious app (Android)
16 Estructura y funcionalidades
Navegación global
Recetas y listas
Búsquedas / de recetas
Inicial navegación facetada
Favoritas
Listas de la
compra

17. 05/03/2012 Epicurious app (Android)
17
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

18. 05/03/2012 Epicurious app (Android)
18 Interacción
Estructura de pantallas
Atrás Título Acc.
 Excepción:
Contenido /
navegación interna
Navegación global

19. 05/03/2012 Epicurious app (Android)
19 Interacción
Estructura de pantallas
Atrás Título Acc.
 Excepción:
Contenido /
navegación interna
Todas las pantallas siguen la misma
estructura, excepto las que aparecen
automáticamente al colocar el dispositivo en
Navegación global
posición apaisada.

20. 05/03/2012 Epicurious app (Android)
20 Interacción
Eventos de interacción
 Tap / click  Orientación (modo
 Activar controles: apaisado)
botones, enlaces, …  Recetas en modo
 Arrastrar / deslizar “paso a paso”
Scroll vertical
  Teclas hardware
 Navegación horizontal  : lista de acciones
(listas) en recetas (añadir a
 Teclado
favoritos; lista compra;
enviar por e-mail)
 Introducción de
 : pantalla anterior
términos de búsqueda (equivalente al botón
 Voz “Back” de la interfaz)
 Dictado de términos de
búsqueda

21. 05/03/2012 Epicurious app (Android)
21
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

22. 05/03/2012 Epicurious app (Android)
22 Puntos fuertes
Riqueza de información
 Mucha información
disponible, accediendo
a la que existe en el sitio
web
 “En la variedad está el
gusto”
 Múltiples
modos de
búsqueda
y navegación;
navegación facetada

23. 05/03/2012 Epicurious app (Android)
23 Puntos fuertes
En la imagen se ve que es posible realizar una
Riqueza de información
búsqueda/navegación facetada, seleccionando
criterios de múltiples categorías: ingrediente
principal, geografía, tipo de plato, etc.
 Mucha información
disponible, accediendo
a la que existe en el sitio
web
 “En la variedad está el
gusto”
 Múltiples
modos de
búsqueda
y navegación;
navegación facetada

24. 05/03/2012 Epicurious app (Android)
24 Puntos fuertes
Adaptación a (algunas)
características del dispositivo
 Nohay pantallas
sobrecargadas
 Lainformación compleja
se muestra de manera
estructurada
 Búsquedas por voz

25. 05/03/2012 Epicurious app (Android)
25 Puntos fuertes
Adaptación a (algunas)
Las páginas equivalentes del sitio web están
mucho más sobrecargadas dedispositivo
características del información.
 No hay pantallas
sobrecargadas
 La información compleja
se muestra de manera
estructurada
 Búsquedas por voz

26. 05/03/2012 Epicurious app (Android)
26 Puntos fuertes
Necesidad y público muy
amplio
 Cualquierpersona con un móvil y que
cocine (o quiera cocinar)
 Un móvil (o una tablet) es fácilmente
utilizable en una cocina (más que un
portátil)
 Modo “paso a paso”

27. 05/03/2012 Epicurious app (Android)
27 Puntos fuertes
Necesidad y público muy
amplio
 Cualquier persona con un móvil y que
cocine (o quiera cocinar)
 Un móvil (o una tablet) es fácilmente
utilizable en una cocina (más que un
portátil)
 Modo “paso a paso”
El modo “paso a paso” es especialmente indicado
para utilizar el dispositivo en la cocina, mientras se
sigue la receta.

28. 05/03/2012 Epicurious app (Android)
28
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

29. 05/03/2012 Epicurious app (Android)
29 Puntos débiles
Sistemas de navegación /
búsqueda confusos
 Diversos sistemas que no son evidentes
? ?

30. 05/03/2012 Epicurious app (Android)
La navegación llega a ser confusa: 30 Puntos débiles
- Las categorías disponibles son, al menos, “peculiares”, sin seguir un criterio
claro.
Sistemas de navegación /
- Diversos modos de llegar a la pantalla de búsqueda.
búsqueda confusos
- La pantalla de búsqueda tiene un funcionamiento no evidente: aparte
del cuadro de búsqueda inferior, se puede utilizar la navegación
facetada.
- El acceso a las recetas de bebidas está en un lugar poco identificable;
 Diversos sistemas que no son evidentes
además puede parecer que se trata de bebidas relacionadas con las
recetas seleccionadas (no es así).
? ?

31. 05/03/2012 Epicurious app (Android)
31 Puntos débiles
Algunas funcionalidades
“ocultas”
?

32. 05/03/2012 Epicurious app (Android)
32 Puntos débiles
Algunas funcionalidades
“ocultas”
?
El modo apaisado es interesante, pero no existe ninguna
indicación de que existe esa posibilidad.

33. 05/03/2012 Epicurious app (Android)
33 Puntos débiles
¿El nombre?
 “Epicurious”
 Adecuado para los conocedores del sitio
web
 Juego de palabras interesante, pero…
difícil de asociar a una aplicación de
recetas

34. 05/03/2012 Epicurious app (Android)
34 Puntos débiles
Información disponible
 Se
echan en falta algunos datos básicos
habituales:
 Dificultad
 Tiempo de preparación
 Comensales

35. 05/03/2012 Epicurious app (Android)
35 Puntos débiles
Algunas características
poco aprovechadas
 O, lo que es lo mismo…

36. 05/03/2012 Epicurious app (Android)
36
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

37. 05/03/2012 Epicurious app (Android)
37 Posibles mejoras
Recetas “paso a paso”
 En la cocina se suelen tener las manos
ocupadas, sucias, etc.
 ¿Por qué no implementar otras
interacciones? Siguiente
 Por voz
(input; output)
 Gestos

38. 05/03/2012 Epicurious app (Android)
38 Posibles mejoras
Recetas “paso a paso”
El usuario podría moverse entre los pasos diciendo
“siguiente” o “anterior”; o moviendo la mano por
encima En la cocina se(sin llegar a tocarla).
 de la pantalla suelen tener las manos
ocupadas, sucias, etc.
 ¿Por qué no implementar otras
interacciones? Siguiente
 Por voz
(input; output)
 Gestos

39. 05/03/2012 Epicurious app (Android)
39 Posibles mejoras
Valoraciones (red social)
 Ahora sólo se pueden leer
las opiniones de otros usuarios
 Podría
implementarse un sistema simple
para opinar sobre una receta (por
ejemplo, justo después de hacerla)

40. 05/03/2012 Epicurious app (Android)
40 Posibles mejoras
Lista de la compra
 Buscar asociaciones /
convenios con tiendas on-
line que permitieran hacer
la compra directamente a
partir de la lista

41. 05/03/2012 Epicurious app (Android)
41 Posibles mejoras
Mayor integración con
web
 Permitirusar el usuario y
contraseña del sitio web
para acceder a las
mismas recetas
personalizadas,
favoritas, etc.
 Acceder al sitio web desde la aplicación
(por ej., para ampliar información)

42. 05/03/2012 Epicurious app (Android)
42
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

43. 05/03/2012 Epicurious app (Android)
43 Líneas de trabajo propuestas
Con más tiempo
 Esta
presentación se ha realizado después
de una evaluación de pocas horas
 Para obtener información más fiable y
realista, sería necesario aplicar otras
técnicas de DCU…

44. 05/03/2012 Epicurious app (Android)
44 Líneas de trabajo propuestas
Evaluación heurística
 Revisión
sistemática de la interfaz por parte
de un experto, para ver si cumple con
determinados principios:
 Heurísticas genéricas
 Heurísticas específicas para dispositivos
móviles/táctiles
 Directrices de interfaz específicas para el sistema
http://developer.android.com/guide/practices/ui_guidelines/i
ndex.html

45. 05/03/2012 Epicurious app (Android)
45 Líneas de trabajo propuestas
Tests con usuarios
 Selección de usuarios representativos;
por ej.:
 Usuarios habituales de aplicaciones móviles con
destreza media o baja en la cocina.
 Usuarios poco habituales de aplicaciones
móviles, con interés y experiencia elevados en
cocina.
 Definición de tareas realistas
 Buscando una receta para hacerla más tarde
 ¡Incluso mientras realmente cocinan!
 Ejecución y análisis de los tests

46. 05/03/2012 Epicurious app (Android)
46 Líneas de trabajo propuestas
Rediseño / prototipado

47. 05/03/2012 Epicurious app (Android)
Dos ejemplos de protipos rápidos que muestran alternativas a
47 Líneas de trabajo propuestas
algunas pantallas de la aplicación:
- La pantalla inicial, mostrando un conjunto reducido de categorías
Rediseño / prototipado
en función de la época del año. Además, posibilitando y
separando (comida vs. Bebida) la búsqueda de recetas desde el
inicio, y dando un acceso rápido a la última receta guardada
como “favorita”.
- Opción para valorar rápidamente una receta (posiblemente justo
después de elaborarla).

48. 05/03/2012 Epicurious app (Android)
48
• Introducción
• Estructura y funcionalidades
• Interacción
• Puntos fuertes
• Puntos débiles
• Posibles mejoras
• Líneas de trabajo propuestas
• Conclusiones

49. 05/03/2012 Epicurious app (Android)
49 Conclusiones
Objetivos (hipótesis)
 Mantener una interfaz parecida a la
actual, para los usuarios existentes de la
aplicación
 Mostrar claramente las opciones
disponibles, para conseguir nuevos usuarios
 Integración con la web, potenciando
mutuamente su utilización por parte de los
usuarios
 Potenciar el uso de la aplicación como
algo más que una herramienta de consulta

50. 05/03/2012 Epicurious app (Android)
50 Conclusiones
Objetivos (hipótesis)
Suponemos que estos podrían ser objetivos de una
evaluación y posible rediseño de esta aplicación.
 Mantener una interfaz parecida a la
actual, para los usuarios existentes de la
aplicación
 Mostrar claramente las opciones
disponibles, para conseguir nuevos usuarios
 Integración con la web, potenciando
mutuamente su utilización por parte de los
usuarios
 Potenciar el uso de la aplicación como
algo más que una herramienta de consulta

51. 05/03/2012 Epicurious app (Android)
51 Conclusiones
Fortalezas y debilidades
 Aplicación interesante; público potencial muy
amplio
 Gran cantidad de información; múltiples
sistemas de búsqueda
 Páginas simples sin sobrecarga de información
- Navegación algo confusa
- Algunas características poco aprovechadas
- Integración con la web

52. 05/03/2012 Epicurious app (Android)
52 Conclusiones
Recomendaciones
 Hacer más clara y coherente la
navegación en diferentes pantallas
 Mejorar y potenciar aspectos clave
 Receta “paso a paso”
 Valoración de recetas
 Listas de la compra
 Mayor integración con la web
 Incorporar determinada información básica
 Dificultad; comensales; tiempo de preparación
 Realizar estudios/técnicas más completos
 Evaluación heurística; tests con usuarios; …

53. Epicurious app
(Android)
Análisis estructura e interfaz
http://jordisan.net
@jordisan