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ÑOExperiencia de Bienvenida

Pantalla Home

Búsqueda

Orden y Filtros

Evitar resultados vacíos o no deseados

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

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 AUTO-SUGERIR• 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 auto-bú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 a 4.0

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 posteriores

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 FILTROSANTI-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 DESEADOSANTI-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.

GRACIAS POR SU ATENCIÓN.

Click icon to add picture

Hilaida Terán Delgado

Hilaida_teran7@yahoo.com

PATRONES DISEÑO

ANDROID. PARTE I