Epicurious: evaluando una aplicación para smartphones

Epicurious app

(Android)Análisis estructura e interfaz

http://jordisan.net

@jordisan

http://jordisan.net/

http://twitter.com/jordisan


• Introducción

• Estructura y funcionalidades

• Interacción

• Puntos fuertes

• Puntos débiles

• Posibles mejoras

• Líneas de trabajo propuestas

• Conclusiones

05/03/2012 Epicurious app (Android)

2

Aplicación móvil paraacceder a las recetasdel 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

Epicurious App


3 Introducción

http://www.epicurious.com/

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

¿Qué tiene de interesante?


4 Introducción

• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


5

Por categorías

(página inicial)

Búsqueda y consulta de recetas (comida y bebida)


6 Estructura y funcionalidades

Lista de recetas

(resúmenes)

Acciones

Ver receta

Añadirla a

favoritas

Crear lista

de la compra

Enviar por email




Receta

Detalles

Ingredientes

Preparación

Imagen

Valoraciones

Una receta



La receta, paso a paso

Al colocar el dispositivo en posición apaisada

¡Para usarla mientras se cocina!

Una receta



Valoraciones

Una receta



Comidas por:

ingrediente principal

hora del día

origen geográfico

dietética

tipo de plato

estación oacontecimiento




Bebidas por:


(alcohólico)


(no alcohólico)

origen geográfico

tipo de bebida

estación o

acontecimiento




Búsquedas libres

y por voz

Consulta y búsqueda de recetas (comida y bebida)



Lista de recetas favoritas



A partir de

una receta

Lista de la compra



Navegación global

Inicial

Recetas y listas

de recetas

Listas de la

compra

Favoritas

Búsquedas /

navegación facetada



• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


17

Excepción:

Estructura de pantallas


18 Interacción

Título

Navegación global

Contenido /

navegación interna

Atrás Acc.

Excepción:

Estructura de pantallas


19 Interacción

Título

Navegación global

Contenido /

navegación interna

Atrás Acc.

Todas las pantallas siguen la misma

estructura, excepto las que aparecen

automáticamente al colocar el dispositivo en

posición apaisada.

Tap / click Activar controles:

botones, enlaces, …

Arrastrar / deslizar Scroll vertical

Navegación horizontal (listas)

Teclado Introducción de

términos de búsqueda

Voz Dictado de términos de

búsqueda

Orientación (modo apaisado) Recetas en modo

“paso a paso”

Teclas hardware : lista de acciones

en recetas (añadir a favoritos; lista compra; enviar por e-mail)

: pantalla anterior (equivalente al botón “Back” de la interfaz)

Eventos de interacción


20 Interacción

• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


21

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;


Riqueza de información


22 Puntos fuertes

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;


Riqueza de información


23 Puntos fuertes

En la imagen se ve que es posible realizar una

búsqueda/navegación facetada, seleccionando

criterios de múltiples categorías: ingrediente

principal, geografía, tipo de plato, etc.

No hay pantallas

sobrecargadas

La información compleja

se muestra de manera

estructurada

Búsquedas por voz

Adaptación a (algunas) características del dispositivo


24 Puntos fuertes

No hay pantallas

sobrecargadas

La información compleja

se muestra de manera

estructurada

Búsquedas por voz

Adaptación a (algunas) características del dispositivo


25 Puntos fuertes

Las páginas equivalentes del sitio web están

mucho más sobrecargadas de información.

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”

Necesidad y público muy amplio


26 Puntos fuertes

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”

Necesidad y público muy amplio


27 Puntos fuertes

El modo “paso a paso” es especialmente indicado

para utilizar el dispositivo en la cocina, mientras se

sigue la receta.

• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


28

Diversos sistemas que no son evidentes

Sistemas de navegación / búsqueda confusos


29 Puntos débiles

? ?

Diversos sistemas que no son evidentes

Sistemas de navegación / búsqueda confusos


30 Puntos débiles

? ?

La navegación llega a ser confusa:

- Las categorías disponibles son, al menos, “peculiares”, sin seguir un criterio

claro.

- Diversos modos de llegar a la pantalla de búsqueda.

- 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;

además puede parecer que se trata de bebidas relacionadas con las

recetas seleccionadas (no es así).

Algunas funcionalidades “ocultas”


31 Puntos débiles

?

Algunas funcionalidades “ocultas”


32 Puntos débiles

?

El modo apaisado es interesante, pero no existe ninguna

indicación de que existe esa posibilidad.

“Epicurious”

Adecuado para los conocedores del sitio

web

Juego de palabras interesante, pero…

difícil de asociar a una aplicación de

recetas

¿El nombre?


33 Puntos débiles

Se echan en falta algunos datos básicos

habituales:

Dificultad

Tiempo de preparación

Comensales

Información disponible


34 Puntos débiles

O, lo que es lo mismo…

Algunas características poco aprovechadas


35 Puntos débiles

• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


36

En la cocina se suelen tener las manos

ocupadas, sucias, etc.

¿Por qué no implementar otras

interacciones?

Por voz

(input; output)

Gestos

Recetas “paso a paso”


37 Posibles mejoras

Siguiente

En la cocina se suelen tener las manos

ocupadas, sucias, etc.

¿Por qué no implementar otras

interacciones?

Por voz

(input; output)

Gestos

Recetas “paso a paso”


38 Posibles mejoras

Siguiente

El usuario podría moverse entre los pasos diciendo

“siguiente” o “anterior”; o moviendo la mano por

encima de la pantalla (sin llegar a tocarla).

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)

Valoraciones (red social)


39 Posibles mejoras

Buscar asociaciones /

convenios con tiendas on-

line que permitieran hacer

la compra directamente a

partir de la lista

Lista de la compra


40 Posibles mejoras

Permitir usar 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)

Mayor integración con web


41 Posibles mejoras

• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


42

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…

Con más tiempo


43 Líneas de trabajo propuestas

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 sistemahttp://developer.android.com/guide/practices/ui_guidelines/i

ndex.html

Evaluación heurística



http://developer.android.com/guide/practices/ui_guidelines/index.html



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

Tests con usuarios



Rediseño / prototipado



Rediseño / prototipado


47 Líneas de trabajo propuestasDos ejemplos de protipos rápidos que muestran alternativas a algunas pantallas de la aplicación:

- La pantalla inicial, mostrando un conjunto reducido de categorías

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

• Introducción


• Interacción

• Puntos fuertes

• Puntos débiles



• Conclusiones


48

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

Objetivos (hipótesis)


49 Conclusiones

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

Objetivos (hipótesis)


50 Conclusiones

Suponemos que estos podrían ser objetivos de una

evaluación y posible rediseño de esta aplicación.

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

Fortalezas y debilidades


51 Conclusiones

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; …

Recomendaciones


52 Conclusiones

Epicurious app

(Android)Análisis estructura e interfaz

http://jordisan.net

@jordisan

http://jordisan.net/



Epicurious: evaluando una aplicación para smartphones

Design

Transcript of Epicurious: evaluando una aplicación para smartphones