Patrones de diseño en Android

2013
E.A.P INGENIERÍA DE SISTEMAS - UNMSM
DISEÑO DE INTERFACES DE USUARIO
11/09/2013
PATRONES DE DISEÑO EN ANDROID
Alex Naupay

2013
PATRÓN DE DISEÑO
Si bien este trabajo trata sobre patrones de diseño de interfaces de usuario en una
plataforma específica, la plataforma Android en este caso. Es conveniente saber algunos
conceptos previos como: ¿Qué es un patrón de diseño? o¿Cuál es la idea al usar patrones
de diseño? La respuesta lo encontramos en muchos sitios y básicamente dicen lo mismo.
Luego de visitar muchos sitios web como Wikipedia, repositorios de otras universidades y
presentaciones de conferencias de algunos desarrolladores nos quedamos con los
conceptos escritos por Nicolás Tedeschien el blog de Microsoft Developer.
¿Qué es un patrón de diseño?
“Los patrones de diseño son el esqueleto de las soluciones a problemas comunes en el
desarrollo de software. “En otras palabras, brindan una solución ya probada y
documentada a problemas de desarrollo de software que están sujetos a contextos
similares. Debemos tener presente los siguientes elementos de un patrón: su nombre, el
problema (cuando aplicar un patrón), la solución (descripción abstracta del problema) y
las consecuencias (costos y beneficios).
¿Cuál es la idea al usar patrones de diseño?
Tanto Nicolás Tedeschien su artículo, otras fuentes consultadas y las Charlas en los
eventos anuales de Google I/O hacen hincapié en la reutilización de la experiencia.
Hay una frase que se repite en muchas fuentes consultadas, “¿Por qué reinventar la
pólvora?” o “¿Por qué reinventar la rueda?” o “¿Por qué no utilizar un ladrillo si se sabe
que funciona en millones de estructuras?”. Todas estas frases hacen alusión a que
nosotros como desarrolladores no tenemos que empezar todo desde cero, por lo contrario
ya contamos con experiencia vivida por otros en un contexto similar al nuestro y podemos
usar esa experiencia.
Pero nos advierten también que un patrón no es una solución final y tampoco solucionan
todos los problemas de diseño. Claro, pues un patrón soluciona un problema en un
contexto determinado. Además somos libres de adecuar un patrón a nuestro contexto,
hasta tal vez llegar a crear algo totalmente distinto.

2013
PATRONES DE DISEÑO DE IU EN ANDROID
Android al ser una plataforma de código abierto está disponible para distintos tipos de
hardware con variedad de tamaños de pantalla, distintas densidades de pantalla, cientos
de diferentes modelos de terminales, entre otras cosas como se muestra en la Ilustración
1. Todo lo anterior implicaba un gran esfuerzo por parte del programador para adaptar
una aplicación a tanta variedad de hardware, incluso se llegaban a hacer diferentes
aplicaciones para diferentes tamaños de pantalla por ejemplo.
Ilustración 1 - Variedad de hardware
Para solucionar estos inconvenientes, Google como principal desarrollador de la plataforma
Android, el 12 de enero de 2012 anuncia en su blog de desarrolladores de Android que
pone a disposición de los desarrolladores una completa guía para hacer aplicaciones con
interacciones sencillas y más bellas que nunca basadas con el estilo ICS (Ice Cream
Sandwich).
Más abajo en la misma publicación, cabe resaltar que estos no son más que ayudas, como
todo patrón de diseño. Recordando una vez más que un patrón no es una solución final y
que debemos adecuarla para solucionar nuestro problema en su contexto.

2013
“Para ayudarle a utilizar una gran interfaz de usuario en sus aplicaciones, estamos
introduciendo Android Desing: el lugar para aprender acerca de los principios, bloques de
construcción, y las pautas para la creación de interfaces de usuario Android de clase mundial. Si
usted es diseñador de interfaces de usuario profesional o un desarrollador de juegos, estos
documentos muestran cómo tomar buenas decisiones de diseño, grandes y pequeños”.
Con esto Google busca que todas las aplicaciones tengan una interfaz
uniforme sin grandes cambios en la forma de interactuar entre una y otra.
A continuación recogemos algunos patrones de diseño de esta página y otros sitios
consultados.
ACTION BAR
La Action Bar es una barra situada en la parte superior de cada pantalla para soportar la
navegación y poner a la vista las funcionalidades más importantes.
ORGANIZACIÓN GENERAL
1. Icono de aplicación
Es el icono que establece la identidad de la aplicación. Puede ser
reemplazado por otro icono si se desea. Si la aplicación tiene una
jerarquía al pulsar sobre el icono se podrá escoger a que parte de la
jerarquía se quiere ir.

2013
2. Vista de control
Si la aplicación muestra datos en diferentes vistas, puede escoger la
vista al presionar sobre esta vista de control.
3. Botones de acción (visibles)
Esta área se usa para poner a la vista las acciones más importantes o
típicas de la aplicación. Según el tamaño de la pantalla del dispositivo
las acciones que no quepan en este espacio se mueven al área 4.
4. Botones de acción no visibles (action overflow)
Esta área está destinada a contener las acciones menos frecuentes de
una aplicación.
La organización general puede cambiar según el dispositivo en el que se ejecuta la
aplicación, por ejemplo para un dispositivo de pantalla pequeña podría ser la siguiente:
FUNCIONES CLAVE
 Realizar acciones importantes y que pueden ser accedidos casi siempre (como
buscar o nuevo mensaje).
 Reduce el desorden ocultando las acciones menos frecuentes.
 Proporciona un espacio para dar a la aplicación una identidad. (Icono).
 Puede proporcionar un acceso rápido a la pantalla inicial de la aplicación tocando
su icono.
SE USA CUANDO
 Se quiere tener acciones clave a la vista, cuando no se quiera ocultar estas
acciones clave.
 Se quiere tener unas acciones comunes a simple vista.
1. Barra de acción general
Igualmente muestra el icono de la aplicación y permite la
navegación por la jerarquía si fuera el caso.
2. Barra superior
Permite cambiar rápidamente entre las diversas vistas.
3. Barra inferior
En esta parte se mostraría las acciones importantes y las
acciones de desbordamiento si fuera el caso.

2013
EJEMPLOS DE OTRAS APLICACIONES CON ACTION BAR
Twitter: Un ejemplo claro de este patrón para facilitar la navegación.
Play store: Aplicación desarrollada por Google siguiendo claramente este patrón.

2013
SETTINGS
Las configuraciones tienen un lugar en la aplicación, en este lugar los usuarios indican su
preferencia por la forma como debe comportarse la aplicación. Dar lugar a las preferencias
de aplicación beneficia al usuario debido a que:
 No es necesario interrumpir con las mismas preguntas una y otra vez cuando se
presentas ciertas situaciones. La configuración predeterminada es la que se elige
para esas situaciones.
 Mediante las configuraciones nosotros ayudamos a que el usuario se sienta como
en casa y con el control de la casa.
FLUJO Y ESTRUCTURA
1. Proporcionar acceso a la configuración en las acciones ocultas (de
desbordamiento).
Los ajustes son de baja importancia en la interfaz de usuario a diseñar, pues no
es frecuente su uso. Se debe mantener siempre en las acciones ocultas
(overflow o desbordamiento), aquí colocarlo siempre debajo de todos los
elementos excepto ayuda.
2. Evitar hacer todo en una configuración
Si bien las configuraciones son poco visitadas, esto no significa que no se le
preste la atención debida. La sección de configuraciones debe estar ordenada
pues el usuario tiene la misma expectativa que el resto de lugares de la
aplicación. No debemos abrumar al usuario con muchas opciones, lo que le
significará muchas decisiones por tomar.
3. Si hay muchas opciones lo mejor será agrupar ciertas opciones
relacionadas.
Tomando en cuenta que el ser humano promedio puede retener 7 ± 2
elementos en la memoria a corto plazo, una lista de 10 o más opciones pondrá
en dificultades al usuario. Esto se puede solucionar agrupando ciertas opciones
relacionadas de 2 maneras posibles:
1. Agrupar con un separador de sección
El número de secciones recomendadas dependerá del número total de
opciones que se tenga en el momento.
2. Agrupar en una subpantalla separada.

2013
PATRONES DE DISEÑO
Checkbox
Utilizar este patrón para un ajuste que sea seleccionado o no seleccionado.
Multiple chiose
Utilizar esta opción para ajustes que presenten un conjunto discreto de opciones.

2013
Slider
Usar este patrón para un entorno en el que el rango de valores para un ajuste no es
discreto.
Date/Time
Usar este patrón para un ajuste que recoja una fecha y/o tiempo.
Subscreen navigation (navegación a una subpantalla)
Usar este patrón para una navegación a una pantalla secundaria o una secuencia de
pantallas.
 Si navega a una sola subpantalla poner el mismo título en la pantalla secundaria y
la etiqueta a navegar.

2013
 Si navega por una secuencia de pantallas (como en la figura siguiente), usar un
título que describa cada paso en la secuencia.
Interruptor principal de encendido/apagado
Utilizar este patrón para una categoría de configuración que necesita un mecanismo para
activar o desactivar en su conjunto. El interruptor se coloca como primer elemento de la
barra de acción, si el interruptor está apagado todos los elementos de la lista desaparecen
sustituido por un texto que describe por que la lista estávacía.
También puede hacerse que la opción de menú del interruptor nos lleve a una
subpantalla, pero solo debe hacerse cuando rara vez se accede a esa subpantalla una vez
establecida la configuración.

2013
VALORES PARA AJUSTES PREDETERMINADOS
Tenga mucho cuidado en la elección de los valores por defecto para cada uno de los
ajustes. Debido a que los ajustes determinan el comportamiento de las aplicaciones, las
opciones contribuirán a la primera impresión de la aplicación. A pesar que los usuarios
pueden cambiar la configuración, es de esperar que las configuraciones iniciales sea la
adecuada. Algunas preguntas podrían ayudarnos a establecer una buena configuración
inicial:
 ¿Qué opción elegirían por su cuenta la mayoría de usuarios?
 ¿Qué opción es la más neutral o media?
 ¿Qué opción es la menos arriesgada?
 ¿Qué opción utiliza la menos cantidad de datos o afecta menos a la batería?
 ¿Qué opción apoya mejor al principio “Nunca perder mis datos”?
 ¿Qué opción soporta mejor el principio de diseño “Me interrumpes solo si es
importante”?
LINEAMIENTOS PARA LA REDACCIÓN
Etiqueta clara y concisa
Escribir una buena etiqueta para un ajuste puede ser difícil debido al espacio limitado, solo
se posee de una línea y es muy corto en el más pequeño de los dispositivos. Google nos
da unos consejos para redactar mejor:
 Capitaliza solo la primera letra y los nombres propios si los hubiera.
 No empiece una etiqueta con un verbo de instrucción como “Cambiar”, “Editar”,
“Modificar”, “Administrar”, “Usar”, “Seleccionar” o “Elegir”. Los usuarios ya saben
que esas cosas se hacen en los ajustes.
 Del mismo modo no termine una etiqueta con palabras como “ajuste” o
“configuración”. Ya están implícitas.
 Si el ajuste es parte de un grupo, no repita la palabra (s) que se utiliza en la
sección de divisor o título de subpantalla.
 Evite empezar una etiqueta con una palabra negativa como “No hacer” o “Nunca”.
 Evite a toda costa usar jerga técnica, a menos que sea un términoampliamente
extendido.

2013
EJEMPLOS DE APLICACIONES CON ESTOS PATRONES FUERA DEL SITE
Manejador de menajes por defecto

2013
Google Maps
Una crítica personal para esta aplicación, al parecer esta aplicación ¿No sigue los consejos
dados por ellos mismos? Como usuario me encuentro con esta lista de ajustes y las
etiquetas no se me hacen descriptivas por si solas, no están acompañadas de un segunda
descripción.
AYUDAS
No es posible garantizar que todo el mundo aprenda a usar nuestras aplicaciones sin
problemas.
Algunos usuarios se encontraran con preguntas o problemas en el camino. Ellos buscaran
respuesta dentro de la misma aplicación, y si no la encuentran rápido, pueden irse y no
volver nunca más.
Veamos algunos patrones de diseño para la elaboración de ayudas accesibles en las
aplicaciones.
DISEÑANDO AYUDA EN LA APLICACIÓN
Mostrar ayuda no solicitada, solo en casos muy limitados
Naturalmente nosotros los desarrolladores deseamos que aprendan rápido las
características y funcionalidades de nuestras aplicaciones y que obtengan el máximo
rendimiento de las aplicaciones. Así que nos veríamos tentados a introducir una
presentación introductoria de una sola vez, el video introductorio o tal vez mostrar
burbujas de texto cuando el usuario interactúa con ciertas características por primera vez.

2013
En todos los casos se desaconseja esta práctica debido a que:
 Son interrupciones. Las personas están ansiosas por empezar a interactuar con la
aplicación, y cualquier cosa que se ponga frente a ellos será un obstáculo o una
molestia, a pesar de las buenas intenciones. Yporque ellos no lo piden,
probablemente no le presten mucha atención.
 Por lo general es innecesario. Las posibles dudas en la usabilidad de la aplicación
se debe tratar de solucionarlo desde la interfaz de usuario. Aplicar patrones de
diseño, estilos y bloques de construcción nos ahorrara la tarea de educar a los
usuarios.
La única razón para mostrar contenido de la ayuda no solicitada a los nuevos usuarios
es: Enseñar funcionalidad de alto valor que sólo está disponible a través de un gesto.
Por ejemplo, utilizamos contenido de ayuda para enseñar a los usuarios cómo colocar
aplicaciones en su pantalla principal. Esta funcionalidad es:
Alto valor
Sin ella, los usuarios no serían capaces de personalizar la pantalla de Android para
satisfacer sus necesidades.
Disponible sólo a través de un gesto
Porque no hay ningún botón o menú para que los usuarios puedan descubrirlo por su
cuenta.
La primera vez que se visita la pantalla, una capa semitransparente es presentada para
enseñar un gesto importante.

2013
En pocas palabras: cuando se trata de ofrecer ayuda en la aplicación, es mucho mejor que
los usuarios vengan a ti cuando lo necesitan.
Siga el diseño estándar para la navegación a la ayuda de aplicación
En todas las pantallas ofrecer ayuda en las acciones ocultas (Action overflow). Siempre
será el último del menú.
Suponer que cada petición de ayuda es urgente
Los usuarios en su gran mayoría no están en busca del autor, de información jurídica de la
aplicación o cualquier otra información no relevante para sus tareas, por ello debemos
cuidar que al ofrecer otras opciones estas no agreguen un paso adicional antes que el
usuario obtenga ayuda.
Cuando alguien elija ayuda:
No haga Mejor Mucho mejor
Presentar un cuadro de dialogo
pidiendo que elija entre la
ayuda y otras opciones.
Proceda de inmediato a un
navegador web con contenido
de la ayuda. Coloque otras
opciones en un pie de página
Introducir una pantalla de
ayuda en la propia aplicación y
ofrecer las otras opciones en la
barra de acción. La sección de
action overflow es ideal para
obtener información que los
usuarios rara vez necesitan.

2013
PRINCIPIOS PARA ESCRIBIR CONTENIDO DE AYUDA EN LA PANTALLA
La ayuda es parte de la interfaz de usuario
 Todas las palabras en la pantalla deben seguir los principios de estilo de escritura
para conseguir este fin.
Aprovechar cada pixel
 No es necesario documentar lo evidente (claro no lo evidente para nosotros como
desarrolladores, sino lo evidente para el usuario final).
Las imágenes de captan más rápido que las palabras
 En la descripción de ayuda paso a paso considerar la combinación de texto con
iconos, capturas de pantalla y otras imágenes. Ahorraremos palabras y los usuarios
absorberáninformaciónmás rápido con imágenes.
Los usuarios no leen, escanean
 Los usuarios no llene todo, solo buscan la pieza de información que contenga la
respuesta que necesitan.
Llévame directo a la respuesta
 Una pantalla de ayuda que no requiera de desplazamiento es mucho mejor ene
estos casos.
EJEMPLOS DE USO DE ESTE PATRÓN FUERA DEL SITE:
YouTube: Muestra una ayuda al usar por primera vez una característica

2013
Dropbox: La aplicación de dropbox es una de las que sigue este patrón, tiene la ayuda
dentro de la misma aplicación.
Outlook de Microsoft: Esta aplicación no incorpora ayuda en su aplicación, ¿Sera que
ningún usuario lo necesitara? Personalmente creo que no es necesario, ya que las
aplicaciones para móviles deben ofrecer solo las funcionalidades importantes, no es una pc
de escritorio.

2013
MULTI-PANE LAYOUTS
Se introdujeron en Honeycomb para adaptar el contenido de las aplicaciones a los
tamaños de pantalla de los tablets.
Permiten combinar múltiples vistas o dividir estas en una única en función del espacio
disponible en la pantalla.
COMBINANDO VARIAS VISTAS EN UNA
En los dispositivos más pequeños las vistas son generalmente divididos en una cuadricula
principal y una lista detalle. Al tocar un elemento de la vista principal se abre otra pantalla
que muestra la información detallada.
Las tablets tienen más espacio que los teléfonos, por ello pueden utilizar paneles para
combinar la lista principal y su detalle en una sola vista compuesta. Así se consigue una
navegación más fácil y se aprovecha eficientemente el espacio adicional.

2013
Se recomienda utilizar el panel de la derecha para presentar la información detallada sobre
el elemento seleccionado en el panel izquierdo.
VISTAS COMPUESTAS Y CAMBIOS EN LA ORIENTACION DEL
DISPOSITIVO
Las pantallas de los dispositivos se esfuerzan por tener la misma funcionalidad sin
importar su orientación. Si se usa una vista compuesta en una orientación, tratar de no
dividir cuando el usuario gira la pantalla. Existen varias técnicas que se pueden utilizar
para ajustar el diseño después de un cambio de orientación, manteniendo la paridad
funcional intacta.
Expansión / Compresión
Ajustar el ancho de las columnas de sus paneles de izquierda para lograr una distribución
equilibrada en ambas orientaciones.

2013
Apilar
Reorganizar los paneles de la pantalla para que coincida con la orientación

2013
Expandir / Colapsar
Cuando se gira el dispositivo, colapse la vista del panel izquierdo solo para mostrar lo más
importante.
Mostrar / Ocultar
Si la pantalla no puede dar cabida a la vista compuesta, mostrar solo el panel derecho y
use el icono de la barra de acción para mostrar la pantalla principal de la aplicación.

2013
RECOMENDACIONES PARA UN BUEN DISEÑO
 Planee con anticipación sobre como escalar la aplicación en los diferentes tamaños
y orientaciones de pantalla.
 Identificar el método más adecuado para los paneles que se va a usar.
 Asegurarse de que las pantallas proporcionan la paridad funcional después de los
cambios de orientación de pantalla.
EJEMPLOS DE APLICACIONES CON ESTE PATRÓN:
YouTube

2013
REFERENCIAS
Concepto de patrones de diseño - Nicolás Tedeschi en el blog de Microsoft
developer
 http://msdn.microsoft.com/es-
es/library/bb972240.aspx#XSLTsection124121120120
CharlasGoogle I/O - Android UI design patterns , del 2010 y 2013
 http://www.youtube.com/watch?v=M1ZBjlCRfz0
 http://www.youtube.com/watch?v=Jl3-lzlzOJI
Android Developer Blog
 http://android-developers.blogspot.com/2012/01/introducing-android-design-
site.html
Android Pattern
 http://developer.android.com/intl/es/design/patterns/index.html

Patrones de diseño en Android

Más contenido relacionado

La actualidad más candente (18)

Similar a Patrones de diseño en Android (20)

Último (20)

Patrones de diseño en Android