Este documento resume algunos patrones y antipatrones relacionados con la experiencia del usuario en aplicaciones Android. Describe consideraciones sobre la experiencia de bienvenida del usuario, la pantalla de inicio, la búsqueda, filtros y orden de resultados, y formas de evitar resultados vacíos.

1. PATRONES
DISEÑO
ANDROID.
PARTE I
HILAIDA
TERÁN DELGADO
Consideraciones principales abordadas en el Libro: Android
Design Patterns de Greg Nudelman 2013

2. AREAS CLAVES DE DISEÑO

3. EXPERIENCIA DE BIENVENIDA

4. EXPERIENCIA DE BIENVENIDA.
ANTIPATRON 1. EULAS
•
Los EULAS (End User License
Agreements) son utilizados cuando
el usuario abre por primera vez la
aplicación.
•
Recomendación: Utilizar un botón
de “Acuerdos” que vincule en una
Web con el EULA de manera de
darle la opción al usuario de
libremente accederla.

5. EXPERIENCIA DE BIENVENIDA.
ANTI-PATRON 2. IMPEDIMENTOS PARA
CONTACTAR CON SOPORTE
• Cuando algo va mal es normal que el
usuario quiera iniciar algún contacto
de soporte. Crear obstáculos para
hacer difícil al usuario contactar con
soporte es una tendencia común en
las apps.
• Recomendación: Utilizar e-mail como
medio de comunicación con soporte
en vez de números telefónicos o
formularios incluidos en la aplicación.

6. EXPERIENCIA DE BIENVENIDA.
ANTI-PATRON 3. REGISTRARSE Y ENTRAR
• Formularios de registros largos y
complicados que conduzcan a que el usuario
se equivoque y pierda tiempo son antipatrón.
• Recomendación: No obligar al usuario a que
se registre por usar cualquier cosa. Revisar
conexión con redes sociales para registro o
autenticación de usuarios. Si no hay
conexión con internet permitir al usuario
algún uso en la aplicación y grabar los datos
necesarios de manera local para
posteriormente pasarlos a la nube.

7. EXPERIENCIA DE BIENVENIDA.
PATRON 1. ANIMACION DE BIENVENIDA
•
Es un patrón característico en Iphone y
se está dando con mucha tendencia en
Android.
•
Cuando el usuario abre por primera vez
la app, una corta aplicación se inicia
dándole la bienvenida mostrando el logo
y con un poco de humor.
•
Recomendación: solo utilizarla cuando
la aplicación se ejecuta por primera vez
en el dispositivo. Las mejores apps
integran una animación que cuenta una
historia en un tutorial que es descrito al
mismo tiempo (3 a 5 seg.)

8. EXPERIENCIA DE BIENVENIDA.
PATRÓN 2. TUTORIAL
• No todas las apps lo
necesitan, sólo aquellas con
características no obvias que
requieren que el usuario sepa
como usarlas. Se utiliza durante
la experiencia de bienvenida
donde el usuario obtiene una
corta lección de cómo usar la
app.

9. PANTALLA HOME

10. PANTALLA HOME.
PATRÓN 1. LISTA DE VÍNCULOS
• Lista de vínculos es un patrón muy
popular usado en distintos tipos de
dispositivos. Desafortunadamente, es
un patrón que le dice al usuario acerca
de la historia, no le cuenta la historia
por si mismo.
• Es un patrón muy intuitivo para el
usuario y es fácil de diseñar
• Este patrón sólo debe ser considerado
cuando tu app cubre una alta y diversa
funcionalidad. Es menos
recomendable para tablets.

11. PANTALLA HOME.
PATRÓN 2. TABLERO
• Algunas aplicaciones muestran por si
mismas el estado actual y las
tendencias presentadas a través de
gráficos o cuadros en un patrón que
se conoce como Tablero. Este patrón
es muy útil si se quiere que la
aplicación muestra información
importante al usuario apenas la abra.
Es un patrón que se ha vuelto muy
popular.
• Es un patrón fantástico para las
tablets. Al usarlo solo mostrar la
información que realmente se

12. PANTALLA HOME.
PATRÓN 3. ACTUALIZACIÓN
•
Consiste en mostrar al usuario siempre
información actualizada ya sea personal
o de interés. Las apps de redes sociales
hacen uso común de este patrón. Las
actualizaciones son constantes para
poder tener al día al usuario de la
información que se le muestra.
•
Este patrón le cuenta la historia al
usuario. Es muy efectivo para que el
usuario se integre por si mismo a la
historia desde el comienzo lo que
significa que use más la app y esté más
enganchado. Las tablets son ideales
para mostrar este tipo de patrón.

13. PANTALLA HOME.
PATRÓN 4. EXPLORAR
• Algunas de las mejores apps
enganchan al usuario mostrando datos
de su interés basado en las
búsquedas de su historia previa.
• En vez de actualizaciones los objetos
reales de interés del usuario son la
historia.
• La diferencia con el patrón anterior es
que muestra datos relacionadas a
mercadeo, ventas, inventario que
puede ser de interés. Complementar
este patrón con GPS hace de la
aplicación de mucha utilidad. Es ideal
para tablets

14. PANTALLA HOME.
PATRÓN 5. MAPA
• La información móvil puede ser altamente
local. Mapa puede ser un patrón altamente
recomendable para obtener datos del
entorno.
• Funciona una vez que entra el usuario para
mostrarle los sitios de interés en un área de
mapa. El uso de mapas es intuitivo.
• Para el uso eficiente del mapa la app debe
tener acceso a internet y GPS. Puede existir
la variación que se muestre un mapa distinto
a la ubicación actual del usuario, depende de
los puntos de interés que se quieran mostrar.

15. PANTALLA HOME.
PATRÓN 6. HISTORIA
• Este patrón engancha a los
usuarios recordándole datos de
búsquedas que hayan hecho
anteriormente.
• Es un patrón excelente para
apps relacionadas a tiendas de
compra.

16. BÚSQUEDA

17. BÚSQUEDA.
PATRÓN 1. BÚSQUEDA POR VOZ
• La búsqueda es fundamental en la
actividad de un móvil. Los móviles
fundamentalmente te ayudan a buscar
cosas.
• La búsqueda por voz es usada en
sustitución del teclado. El móvil se
cambia a modo “escuchar” para que el
usuario diga lo que desea buscar. El
móvil escribe lo que dice el usuario
para con ello iniciar la búsqueda. Es
una excelente patrón en especial
cuando el móvil está en modo
“conducir”.

18. BÚSQUEDA.
PATRÓN 2. AUTOCOMPLETAR Y AUTOSUGERIR
• Ambos reducen el número de caracteres que el
usuario necesita escribir y reduce el número de
errores de entrada que produce muchos o pocos
resultados.
• Cuando el usuario escribe el sistema muestra una
capa adicionar de sugerencias que contiene una o
mas posibles combinación de palabras que
corresponde de alguna manera con lo que el
usuario está escribiendo. Puede incluir corrector de
ortografía, sinónimos y palabras claves sustitutas.
Además reduce errores de escritura, mejora la
especificación de la búsqueda y reduce la
búsqueda sin resultados.
• Se recomienda colocar este patrón como opcional
en la app.

19. BÚSQUEDA.
PATRÓN 3. TAP-AHEAD
• Implemente la auto-sugerencia una palabra a la
vez, generando un refinamiento en el patrón de
búsqueda
• Cuando el usuario ingresa algunos caracteres, la
función ofrece algunas consultas de sugerencia.
Aquí entonces surgen dos alternativas: seleccionar
la alternativa sugerida si cuadra con lo que se está
buscando o presionar la flecha diagonal que está a
la derecha de la pantalla para seguir colocando
más caracteres y repetir la función de autobúsqueda.
• Permitirle al usuario la habilidad de construir la
consulta en vez de escribirla luce más natural y
flexible permitiendo una experiencia más agradable
y eficaz

20. BÚSQUEDA.
PATRÓN 4. ESTIRAR PARA REFRESCAR
• Los resultados buscados son
actualizados y mostrados
cuando el usuario “estira” sobre
la pantalla de resultados. Es un
buen patrón para refrescar los
resultados y actualizaciones
frecuentemente.
• Listas largas de resultados son
ordenadas por fecha: los más
recientes primero.

21. BÚSQUEDA.
PATRÓN 5. BÚSQUEDA DESDE MENÚ
•
El usuario debe seleccionar en la
barra de navegación el botón de
búsqueda (ícono de búsqueda)
desde el menú.
•
La aplicación debe mostrar uno o
más resultados de acuerdo a las
búsquedas registradas, opciones
de refinamiento de
búsquedas, búsquedas más
populares, localizaciones
cerca, etc.
•
Útil en las versiones por inferiores

22. BÚSQUEDA.
PATRÓN 6. BÚSQUEDA DESDE BARRA DE
ACCION
•
El usuario debe seleccionar en la
barra de navegación el botón de
búsqueda (ícono de búsqueda).
•
La aplicación debe mostrar uno o
más resultados de acuerdo a las
búsquedas registradas, opciones
de refinamiento de búsquedas,
búsquedas más populares,
localizaciones cerca, etc.
•
Útil en las versiones 4.0 o

23. BÚSQUEDA.
PATRÓN 7. BÚSQUEDA DEDICADA
• La caja de búsqueda es
colocada en el tope de los
resultados de búsqueda y hace
scroll con ellos. Esta caja le
permite a los usuarios
fácilmente editar y afinar el
patrón de búsqueda.

24. BÚSQUEDA.
PATRÓN 8. BÚSQUEDA EN LA PARTE
PRINCIPAL
• La caja de búsqueda está al
principio de la pantalla principal
arriba de los resultados de
búsqueda. Este es un patrón
alternativo al patrón de
búsqueda dedicada.

25. BÚSQUEDA.
ANTI-PATRÓN 1. REFINAMIENTO Y BÚSQUEDA
SEPARADOS.
•
La pantalla de búsqueda es una página
donde se encuentra múltiples campos
de texto. Allí no existe la caja de
búsqueda. Para cambiar las palabras
claves de la consulta, el usuario debe
buscar el botón de búsqueda en el menú
de botones. Esta separación es
completamente artificial y debe ser
evitada.
•
Igualmente la pagina puede no tener
historia de búsqueda previa como el
patrón de página dedicada tiene. Este
página de búsqueda separada debe ser
evitada pues ocasiona que los usuarios
se pierdan.

26. ORDEN Y FILTROS

27. ORDEN Y FILTROS
ANTI-PATRÓN 1. REFINAMIENTO LISIADO
• Este anti-patrón tiene que ver con filtrar los datos por uno o dos opciones de criterio. Las mejores
interfaces móviles soportan refinamientos o filtros multi-nivel o que le permite al usuario obtener
más y no menos de lo que hace en la interfaz Web de la misma marca.
• En otras palabras, las aplicaciones móviles deben soportar sino todas, la mayoría de los filtros que
existan el Web y así tener una presentación de marco consistente.
• Un buen diseño móvil debe permitir que los usuarios obtengan más: más capacidades, una
experiencia más enriquecedora. Un buen diseño móvil le permite al usuario hacer menos porque
hace uso de datos, sensores e inferencias relacionadas al contexto del usuario. La clave es
“contexto” y “deseos del usuario”.
• Por ejemplo: La funcionalidad de filtrado de amazon.es es muy superior a la correspondiente en la
aplicación amazon de Android.

28. ORDEN Y FILTROS.
PATRÓN 1. PAGINA DE REFINAMIENTO
• Si un usuario desea refinar su
patrón de búsqueda, puede
acceder a una página dedicada
con opciones de orden y filtros
de consulta seguidos de
botones para efectuar consulta
o reiniciar otra consulta.

29. ORDEN Y FILTROS.
PATRÓN 2. ZONA DE FILTRADO
• Una pequeña sección horizontal de la
pantalla muestra la consulta clave y
filtros aplicados. Se ubica encima de
los resultados mostrados.
• Conocer “donde estás” es un continuo
retor para el espacio móvil con una
pantalla pequeña y constantes
interrupciones. Esta zona permitirá al
usuario ajustar sus parámetros de
búsqueda, criterio de orden y
refinamientos hasta que considere que
haga una consulta satisfactoria.

30. ORDEN Y FILTROS.
PATRÓN 3. ARQUITECTURA PARALELA
• Consiste en dotar a la
aplicación de dos trazas de
pantallas de búsqueda “básica”
y “avanzada”. Por defecto
estará disponible una búsqueda
básica y habrá una opción que
permita al usuario poder realizar
búsquedas avanzadas.

31. ORDEN Y FILTROS.
PATRÓN 4. TABS
• Botones o “Tabs” al tope de la página
le permitirá al usuario cambiar de tipos
de vistas o aplicar distintas opciones
de orden y/ o filtros. La primera
visualización es la que tiene por
defecto la aplicación, pero usando los
“Tabs” puede ver los mismos datos en
distinta vista o visualización.
• Este patrón representa una manera de
entender el contenido o colección de
datos con diferentes opciones para
verlos y manipularlos.

32. EVITAR RESULTADOS VACÍOS O NO
DESEADOS

33. EVITAR RESULTADOS VACIOS O NO
DESEADOS
ANTI-PATRÓN 1. IGNORAR VISIBILIDAD DEL
ESTADO DEL SISTEMA
• En un pequeño dispositivo es frecuente los errores
de entrada del usuario. No es conveniente mostrarle
el problema al usuario en vez de tomar una acción
correctiva. Es mejor decirle al usuario “no entiendo”

34. EVITAR RESULTADOS VACIOS O NO
DESEADOS .
ANTI-PATRÓN 2. FALTA DE EFICIENCIA EN LA
INTERFAZ
• Este error es común en aplicaciones
que no fueron bien diseñadas para
gestionar los mecanismo de
recuperación de errores y muestra al
usuario mensajes cuando ocurre un
error.

35. EVITAR RESULTADOS VACIOS O NO
DESEADOS .
ANTI-PATRÓN 3. CONTROLES INÚTILES
• Es muy frecuente en las aplicaciones
encontrar interfaces con controles con
resultados-cero que son gestionados
de la misma forma que los controles
que tienen resultados. Esto constituye
un anti-patrón.

36. EVITAR RESULTADOS VACIOS O NO
DESEADOS .
PATRÓN 1. ¿QUISISTE DECIR?
• Cuando el cliente escribe una palabra
clave que no es reconocida por el
sistema, éste le ofrece palabras
sustitutas parecidas que son basadas
en el deletreo de la palabra clave
original. Las sugerencias se desea
sea un grupo creativo para acercar al
usuario a la palabra que busca.

37. EVITAR RESULTADOS VACIOS O NO
DESEADOS .
PATRÓN 2. CUADRE PARCIAL
• Para las consultas con múltiples
palabras que retornan cero
resultados. Este patrón re-ejecuta la
consulta con alguna de las palabras
que tipió el usuario para que puedan
retornar resultados parecidos
intentando descubrir qué busca el
usuario

38. EVITAR RESULTADOS
VACIOS O NO DESEADOS .
PATRÓN 3. RESULTADOS LOCALES
•
Este patrón toma ventaja de
los resultados del inventario
local que pueden ser tomados
a partir de una señal GPS.
Cuando ocurre una consulta
de cero resultados, el sistema
muestra resultados locales
basados en un cuadre parcial
con las palabras claves
introducidas por el usuario.

39. PATRONES
DISEÑO
ANDROID.
PARTE I
Hilaida Terán Delgado
Hilaida_teran7@yahoo.com
GRACIAS POR SU ATENCIÓN.