patrones de diseño en android
TRANSCRIPT
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.
DISEÑO DE INTERFACES DE USUARIO
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
2013
Play store: Aplicación desarrollada por Google siguiendo claramente este patrón.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
2013
EJEMPLOS DE APLICACIONES CON ESTOS PATRONES FUERA DEL SITE
Manejador de menajes por defecto
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
2013
Apilar
Reorganizar los paneles de la pantalla para que coincida con la orientación
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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.
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID
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
DISEÑO DE INTERFACES DE USUARIO
PATRONES DE DISEÑO EN ANDROID