patrones de diseño en android

E.A.P INGENIERÍA DE SISTEMAS - UNMSM

DISEÑO DE INTERFACES DE USUARIO

11/09/2013

2013PATRONES 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 Tedeschi en 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 Tedeschi en 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.


PATRONES DE DISEÑO EN ANDROID

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ónEs 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.



http://developer.android.com/design/

2013

2. Vista de controlSi 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 superiorPermite cambiar rápidamente entre las diversas vistas.

3. Barra inferiorEn esta parte se mostraría las acciones importantes y las acciones de desbordamiento si

2013

EJEMPLOS DE OTRAS APLICACIONES CON ACTION BAR

Twitter: Un ejemplo claro de este patrón para facilitar la navegación.



2013

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ónSi 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ónEl 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.



2013

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.

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.



2013

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.

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



2013

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érmino ampliamente 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



2013

o tal vez mostrar burbujas de texto cuando el usuario interactúa con ciertas características por primera vez.

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. Y porque 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.



2013

La primera vez que se visita la pantalla, una capa semitransparente es presentada para enseñar un gesto importante.

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



2013

para obtener información que los usuarios rara vez necesitan.

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án información má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.



2013

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

Charlas Google 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



http://developer.android.com/intl/es/design/patterns/index.html

http://android-developers.blogspot.com/2012/01/introducing-android-design-site.html

http://android-developers.blogspot.com/2012/01/introducing-android-design-site.html

http://www.youtube.com/watch?v=M1ZBjlCRfz0

http://msdn.microsoft.com/es-es/library/bb972240.aspx#XSLTsection124121120120

http://msdn.microsoft.com/es-es/library/bb972240.aspx#XSLTsection124121120120

http://msdn.microsoft.com/es-es/library/bb972240.aspx#authorbrief

patrones de diseño en android

Education