PATRONES
DISEÑO
ANDROID.
PARTE I
HILAIDA
TERÁN DELGADO

Consideraciones principales abordadas en el Libro: Android
Design Patterns de Greg Nudelman 2013
AREAS CLAVES DE DISEÑO
EXPERIENCIA DE BIENVENIDA
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.
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.
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.
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.)
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.
PANTALLA HOME
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.
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
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.
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
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.
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.
BÚSQUEDA
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”.
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.
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
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.
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
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
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.
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.
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.
ORDEN Y FILTROS
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.
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.
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.
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.
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.
EVITAR RESULTADOS VACÍOS O NO
DESEADOS
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”
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.
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.
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.
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
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.
PATRONES
DISEÑO
ANDROID.
PARTE I

Hilaida Terán Delgado
Hilaida_teran7@yahoo.com

GRACIAS POR SU ATENCIÓN.

Más contenido relacionado

PPTX
Normalización de Base de Datos
DOCX
PROCEDIMIENTOS ALMACNEADOS Y DISPARADORES - Informe de los videos
PPT
Del análisis al diseño. diagramas de secuencia y contratos
PPTX
Database Triggers
PPT
UML: CASOS DE USO
PDF
Xtext's new Formatter API
PDF
Base de Datos(Funciones, Vistas,Procedimientos Almacenados,Triggers)
PPS
Chapter 2 Enterprise An Overview Alexis Leon
Normalización de Base de Datos
PROCEDIMIENTOS ALMACNEADOS Y DISPARADORES - Informe de los videos
Del análisis al diseño. diagramas de secuencia y contratos
Database Triggers
UML: CASOS DE USO
Xtext's new Formatter API
Base de Datos(Funciones, Vistas,Procedimientos Almacenados,Triggers)
Chapter 2 Enterprise An Overview Alexis Leon

La actualidad más candente (16)

PPTX
Sql operator
PPTX
Basic of jMeter
PPTX
Test Driven Development
PPTX
Entity of Database Management System.pptx
PPT
SQL Queries
PPTX
What is Material UI?
PPTX
Presentation on Apache Jmeter
PDF
Modelo de prototipo
PPT
Django Forms: Best Practices, Tips, Tricks
PDF
The History of Software Testing
PPTX
Automated Test Framework with Cucumber
PPTX
PDF
Cursors in MySQL
PPTX
introdution to SQL and SQL functions
PPTX
Introduction of TestNG framework and its benefits over Junit framework
Sql operator
Basic of jMeter
Test Driven Development
Entity of Database Management System.pptx
SQL Queries
What is Material UI?
Presentation on Apache Jmeter
Modelo de prototipo
Django Forms: Best Practices, Tips, Tricks
The History of Software Testing
Automated Test Framework with Cucumber
Cursors in MySQL
introdution to SQL and SQL functions
Introduction of TestNG framework and its benefits over Junit framework
Publicidad

Destacado (20)

PDF
AGUILAR Paul John work certificate
PPT
Arco Iris
PPT
La FormacióN Del Docente Julio
PPT
Roberto Orallo
PPT
PPT
Transformacional Paternidad
DOC
Casal 'estiu els pins 2010 triptic i inscripcio
PPS
Debaixo Dagua1
PPT
Planejamento de aula
PDF
Livro De Receitas Naturais Vol 1
PPTX
PDF
Batel 1550
PPT
Racisme i la xenofobia
PPS
Riodelapila
PDF
Marketing Day 2012: consistente & geïntegreerde communicatie (Birger Vanacker)
PDF
Emerson dcim solutions diagramv9
PPT
Clase Desarrollo Socioemocional
PPS
18 consejosparapasarundiafeliz
PDF
Rural Lab Abla Espacio Social Innovación
PPS
Fotos divertidas
AGUILAR Paul John work certificate
Arco Iris
La FormacióN Del Docente Julio
Roberto Orallo
Transformacional Paternidad
Casal 'estiu els pins 2010 triptic i inscripcio
Debaixo Dagua1
Planejamento de aula
Livro De Receitas Naturais Vol 1
Batel 1550
Racisme i la xenofobia
Riodelapila
Marketing Day 2012: consistente & geïntegreerde communicatie (Birger Vanacker)
Emerson dcim solutions diagramv9
Clase Desarrollo Socioemocional
18 consejosparapasarundiafeliz
Rural Lab Abla Espacio Social Innovación
Fotos divertidas
Publicidad

Similar a Patrones de Diseño Android, parte 1 (20)

PPTX
Dia de la usabillidad 2013 - Clínica de UX para apps
PPTX
Clínica de experiencia de usuario para aplicaciones móviles
PPTX
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
ODP
Interfaz grafica
ODP
Interfaz grafica
PDF
Clínica de experiencia de usuario para aplicaciones móviles
PPTX
Interfaces de usuario
PPTX
Diseño de interfaces gráficas de usuario
PDF
Presentacion diseño apps
PDF
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
DOCX
Patrones de diseño en Android
PDF
11.interfaz de usuario
PPTX
Fagundez Diseño de interfaces gráficas de usuario
PDF
Introducción a la Usabilidad
PPTX
6_DiseñoMoviles.pptx
PPTX
LAS APPS
PPTX
PPTX
Diseño web-moviles
PPTX
Las apps
PDF
Aso i engagement
Dia de la usabillidad 2013 - Clínica de UX para apps
Clínica de experiencia de usuario para aplicaciones móviles
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
Interfaz grafica
Interfaz grafica
Clínica de experiencia de usuario para aplicaciones móviles
Interfaces de usuario
Diseño de interfaces gráficas de usuario
Presentacion diseño apps
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
Patrones de diseño en Android
11.interfaz de usuario
Fagundez Diseño de interfaces gráficas de usuario
Introducción a la Usabilidad
6_DiseñoMoviles.pptx
LAS APPS
Diseño web-moviles
Las apps
Aso i engagement

Último (20)

DOCX
Nombre del estudiante Gabriela Benavides
PPTX
CLAASIFICACIÓN DE LOS ROBOTS POR UTILIDAD
DOCX
Guía 5. Test de orientación Vocacional 2[1] (Recuperado automáticamente).docx
PPTX
Mecanismos-de-Propagacion de ondas electromagneticas
DOCX
Trabajo informatica joel torres 10-.....................
PPTX
Usuarios en la arquitectura de la información
PPT
Protocolos de seguridad y mecanismos encriptación
PDF
Guía_de_implementación_Marco_de_gobierno_y_gestión_de_TI_Universidades.pdf
DOCX
orientacion nicol juliana portela jimenez
PDF
Inteligencia_Artificial,_Informática_Básica,_22_06_2025_SO_2.pdf
PDF
Trabajo de recuperación _20250821_191354_0000.pdf
PPTX
Sistema de Gestión Integral TCA Ingenieros.pptx
PDF
Distribucion de frecuencia exel (1).pdf
PPTX
TECNOLOGIA EDUCATIVA...........pptx.....
PDF
CONTABILIDAD Y TRIBUTACION, EJERCICIO PRACTICO
PDF
Teoría de estadística descriptiva y aplicaciones .pdf
DOCX
TRABAJO GRUPAL (5) (1).docxjsjsjskskksksk
DOCX
TRABAJO GRUPAL (5) (1).docxsjjsjsksksksksk
PPTX
Procesamiento-del-Lenguaje-Natural-Un-Viaje-Paso-a-Paso.pptx
PPTX
TECNOLOGIAS DE INFORMACION Y COMUNICACION
Nombre del estudiante Gabriela Benavides
CLAASIFICACIÓN DE LOS ROBOTS POR UTILIDAD
Guía 5. Test de orientación Vocacional 2[1] (Recuperado automáticamente).docx
Mecanismos-de-Propagacion de ondas electromagneticas
Trabajo informatica joel torres 10-.....................
Usuarios en la arquitectura de la información
Protocolos de seguridad y mecanismos encriptación
Guía_de_implementación_Marco_de_gobierno_y_gestión_de_TI_Universidades.pdf
orientacion nicol juliana portela jimenez
Inteligencia_Artificial,_Informática_Básica,_22_06_2025_SO_2.pdf
Trabajo de recuperación _20250821_191354_0000.pdf
Sistema de Gestión Integral TCA Ingenieros.pptx
Distribucion de frecuencia exel (1).pdf
TECNOLOGIA EDUCATIVA...........pptx.....
CONTABILIDAD Y TRIBUTACION, EJERCICIO PRACTICO
Teoría de estadística descriptiva y aplicaciones .pdf
TRABAJO GRUPAL (5) (1).docxjsjsjskskksksk
TRABAJO GRUPAL (5) (1).docxsjjsjsksksksksk
Procesamiento-del-Lenguaje-Natural-Un-Viaje-Paso-a-Paso.pptx
TECNOLOGIAS DE INFORMACION Y COMUNICACION

Patrones de Diseño Android, parte 1

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