Arquitectura de las aplicaciones moviles y wireframes
Introducción
Objetivos
Conocer qué es la arquitectura de la información y su relación con la experiencia de usuario.
Conocer técnicas para clasificar y representar la información, así como para estructurar la navegación en nuestra aplicación.
Entender qué es el diseño para la interacción.
Revisar los principios que inspiran el diseño de aplicaciones móviles.
Conocer técnicas de prototipado rápido de nuestras ideas y su utilidad dentro del proceso de diseño.
1.Arquitectura de la información
Clarifica la misión y visión del producto.
Determina qué contenidos y funcionalidades tendrá el sitio.
Indica el modo en que los usuarios encontrarán la información mediante la definición de sistemas de organización, navegación, rotulado y búsqueda de la misma.
Proyecta el modo en que el sitio se adaptará al cambio y el crecimiento con el paso del tiempo.
Cómo se va a clasificar la información. En una primera fase, el arquitecto de la información va a tener que analizar toda la información disponible y determinar en qué grado se puede desmenuzar en unidades más pequeñas, pero plenamente dotadas de sentido.
Cómo va a ser la estructura de navegación, la jerarquía entre contenidos y la relación entre nodos de información.
Cómo se van a etiquetar las diferentes opciones disponibles.
Cómo va a ser el sistema de búsqueda.
1.1.Clasificación de la información
1.1.1.Inventario de contenidos
1.1.2.Ordenación de tarjetas
1.2.Estructuras de navegación
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_01.jpg)
1.2.1.Estructura jerárquica
![Fuente: gráfico adaptado de McVicar (2012)](assets/arquitectura-wireframes/m0651_m2_02.jpg)
1.2.2.Estructura lineal
![Fuente: gráfico adaptado de McVicar (2012)](assets/arquitectura-wireframes/m0651_m2_03.jpg)
![Fuente: apple.com](assets/arquitectura-wireframes/m0651_m2_04.jpg)
Botón de inicio: para permitir al usuario saltar a la página principal sin necesidad de deshacer todo el camino hecho.
Menú de navegación: para permitir al usuario saltar ágilmente entre categorías.
1.2.3.Estructura de hub
![Fuente: gráfico adaptado de McVicar (2012)](assets/arquitectura-wireframes/m0651_m2_05.jpg)
1.2.4.Estructura en pestañas
![Fuente: gráfico adaptado de McVicar (2012)](assets/arquitectura-wireframes/m0651_m2_07.jpg)
Tenemos que mostrar claramente cuál es la pestaña que está activa, cuántas pestañas hay disponibles y cuál es el contenido detrás de cada pestaña.
Es aconsejable que cada pestaña tenga un título que permita identificar el contenido que hay detrás de esta. Si no cabe, podemos truncar el texto, aunque no sea del todo aconsejable (en estos casos podemos hacer, por ejemplo, que el texto vaya circulando por la pestaña como si fuera una marquesina cuando esta está seleccionada).
Si tenemos más pestañas de las que la pantalla puede mostrar, tenemos que indicar claramente que el usuario puede desplazarlas lateralmente, usando por ejemplo flechas.
Las pestañas funcionan bien en horizontal, ya que en vertical no suelen ser bien interpretadas por los usuarios.
Debemos seguir las guías de diseño de cada sistema operativo en cuanto al uso y ubicación de las pestañas. En este sentido, resulta habitual en Android e iOS permitir la navegación entre pestañas deslizando el dedo lateralmente sobre la pantalla (además de pulsando sobre el título de la pestaña), siempre que este gesto no interfiera con la interacción con el contenido en la aplicación.
1.2.5.Estructura de red
![Fuente: elaboración propia](assets/arquitectura-wireframes/m0651_m2_09.jpg)
1.3.Representación de la información
La información no tiene valor por sí misma, solo tiene valor si se comunica con éxito. Si no se entiende o no se puede acceder a ella, no sirve para nada.
Hemos de mantenernos fieles a los objetivos marcados, los motivos por los que queremos transmitir la información, y buscar la mejor manera para conseguirlos.
Debemos tener siempre presente a quién nos dirigimos, cómo se va a experimentar la información y cuál será su contexto de consumo.
Relevante. No solo desde el punto de vista de lo que el usuario quiere, sino también de lo que el usuario necesita.
Clara. La información debe ser fácil de integrar y entendible. Debemos eliminar todas las barreras que dificulten o impidan la comprensión.
Memorable. En un mundo caracterizado por el exceso de información disponible, solo aquella información que queda en nuestra memoria está causando un verdadero impacto. Una información bien diseñada, por tanto, destacará sobre el «ruido» informativo imperante.
1.3.1.Diseño del contenido
![Para leer lo más cómodo posible, en la aplicación Pocket el usuario puede seleccionar entre diferentes opciones de visualización del texto (brillo de pantalla, fondo, tamaño y tipo de letra).](assets/arquitectura-wireframes/m0651_m2_10.jpg)
2.Diseño para la interacción
2.1.Galería de gestos
2.1.1.Toque
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_11.jpg)
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_12.jpg)
2.1.2.Toque largo
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_13.jpg)
![Al hacer un toque largo sobre el teclado, aparecen caracteres alternativos o acentuados.](assets/arquitectura-wireframes/m0651_m2_14.jpg)
2.1.3.Deslizar
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_15.jpg)
La velocidad con que se haga. De hecho, es el propio usuario quien, una vez acostumbrado al movimiento de deslizar el dedo sobre la pantalla, empezará a hacerlo cada vez más rápido y más corto para minimizar esfuerzos. Este movimiento rápido del dedo sobre la pantalla en una dirección recibe el nombre de flick y se puede usar para pasar páginas de un libro, fotografías de una galería, desplazarnos rápidamente por una página web, etc.
El número de dedos que hacemos deslizar a la vez sobre la pantalla. Podemos diseñar acciones para dos, tres e incluso cuatro dedos deslizándose al mismo tiempo y en la misma dirección sobre la pantalla, aunque para teléfonos –dado el tamaño de sus pantallas– resulta recomendable no pasar de dos. Por otro lado, en tabletas no hay que abusar de gestos con tres o cuatro dedos, puesto que resultan incómodos y estorban la visión de buena parte de la pantalla.
2.1.4.Arrastrar
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_18.jpg)
2.1.5.Separar y pellizcar con dos dedos
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_20.jpg)
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_21.jpg)
2.1.6.Rotar
![Fuente: adaptado de https://material.google.com/patterns/gestures.html#gestures-touch-mechanics.](assets/arquitectura-wireframes/m0651_m2_23.jpg)
2.1.7.Girar y rotar el dispositivo
![Fuente: elaboración propia](assets/arquitectura-wireframes/m0651_m2_24.jpg)
![Ejemplo de vista alternativa en función de la orientación del dispositivo en la aplicación de calculadora para iPhone](assets/arquitectura-wireframes/m0651_m2_25.jpg)
![Vistas alternativas en el calendario de un iPhone en función de la orientación del dispositivo](assets/arquitectura-wireframes/m0651_m2_26.jpg)
![Algunos dispositivos Samsung (Android) permiten controlar el zoom en pantalla inclinando el dispositivo.](assets/arquitectura-wireframes/m0651_m2_27.jpg)
![Configuración de controles en el juego de motociclismo SBK16 para iPhone (iOS)](assets/arquitectura-wireframes/m0651_m2_28.jpg)
![El juego Pokémon Go para móviles permite buscar y capturar estas criaturas sobre escenarios reales, mediante realidad aumentada. Fuente: https://mediad.publicbroadcasting.net/p/shared/npr/styles/x_large/nprshared/201606/483862852.jpg).](assets/arquitectura-wireframes/m0651_m2_29.jpg)
2.1.8.Mover
![Fuente: elaboración propia](assets/arquitectura-wireframes/m0651_m2_30.jpg)
2.1.9.Apretar
![Fuente: elaboración propia](assets/arquitectura-wireframes/m0651_m2_32.jpg)
![Con los gestos de peek y pop en un iPhone 6S podemos seleccionar una opción concreta antes de abrir una aplicación (izquierda) o hacer una vista previa de un enlace mientras navegamos por internet (derecha).](assets/arquitectura-wireframes/m0651_m2_33.jpg)
2.2.Elementos gráficos
2.2.1.Tipografía
Mejor sin serifa. Las tipografías de palo seco, sin serifa, resultan más limpias y cómodas de leer en pantalla, sobre todo cuando esta es pequeña. Si el diseño lo permite, podemos jugar con dos tipos de letra diferentes (por ejemplo, uno para los títulos y otro para el cuerpo del texto).
Tamaño de la fuente. Debe ser lo suficientemente grande como para ser leída cómodamente (debemos evitar a toda costa que el usuario sienta la necesidad de hacer zoom con los dedos para ampliar la letra), aunque sin excedernos: un texto demasiado grande provocará muchos saltos de línea, dificultando la lectura. Una sencilla manera de calcularlo es contando el número de caracteres que caben en una línea: entre treinta y cuarenta caracteres por línea es un buen punto de partida.
Color y contraste. Aunque parezca ir contra el sentido común, no es necesario recurrir siempre al «negro sobre blanco» para conseguir un texto legible. De hecho, en algunos casos, puede incluso que el negro puro sobre blanco dificulte la lectura o fatigue al usuario. Para suavizar el contraste, se pueden usar tonos de gris (tanto para el fondo como para la letra). Por ejemplo, en lugar de un texto negro «puro» (#000000), podemos usar tonos oscuros de gris, como #0D0D0D o #0F0F0F para la letra, o tonos muy claros.
Jerarquías. Mientras que en la web nos hemos acostumbrado al uso de múltiples niveles (H1, H2, H3, H4, etc.), en pantallas pequeñas a menudo nos bastará con dos niveles para organizar jerárquicamente nuestro texto; para facilitar el tema, podemos jugar con variaciones (negrita, itálica) para tener mayor riqueza tipográfica.
Espaciado. Al igual que en el punto anterior, en pantallas pequeñas aumentaremos ligeramente el espaciado –tanto entre palabras como entre líneas– para mejorar la legibilidad del texto. Este aumento de espacio también lo podemos aplicar entre párrafos, ayudando así al lector a identificar mejor los bloques de texto. De nuevo, tampoco conviene pasarse por exceso: un texto con demasiado espacio blanco entre palabras o líneas resulta incómodo de leer.
Tipografía responsiva. Si nuestra aplicación va a utilizarse en diferentes tamaños de pantalla, resulta conveniente cerciorarse que tanto el tamaño de la fuente como el espaciado se escalan convenientemente.
Alineación. La norma básica es evitar el texto justificado, ya que en determinadas ocasiones puede dejarnos líneas con demasiados espacios en blanco. Para el resto de alineaciones, las recomendaciones generales son:
Alineación a la izquierda. Se trata de la alineación preferente, ya que funciona muy bien en toda ocasión, incluso con grandes bloques de texto.
Texto centrado. Resulta conveniente usarlo con moderación. Funciona bien con títulos, dentro de botones o en pequeños bloques de texto.
Alineación a la derecha. También conviene usarla con moderación y en pequeños bloques de texto.
2.2.2.Iconos
![Fuente: developer.apple.com](assets/arquitectura-wireframes/m0651_m2_35.jpg)
![Iconos interactivos en el centro de control de un iPhone (iOS)](assets/arquitectura-wireframes/m0651_m2_36.jpg)
2.2.3.Widgets
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_37.jpg)
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_38.jpg)
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_39.jpg)
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_40.jpg)
2.2.4.Notificaciones
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_41.jpg)
![Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_42.jpg)
3.Principios para el diseño de interfaces móviles
3.1.Simplicidad
3.2.Eficiencia
3.3.Consistencia
Consistencia estética: se refiere a la apariencia visual (logos, colores, tipografías, recursos gráficos), lo que permite un rápido reconocimiento del sistema por parte del usuario.
Consistencia funcional: es la que permite al usuario aplicar conocimientos previos en un nuevo contexto. Por ejemplo, los controles en una aplicación de vídeo replican los «viejos» símbolos usados en aparatos de vídeo VHS (reproducción, pausa, retroceso, avance...), lo que facilita al usuario su control desde el primer momento.
Consistencia externa: en el caso de aplicaciones móviles, se refiere a la coherencia de la aplicación con los principios de diseño del sistema operativo o el respeto a los patrones de diseño afianzados.
Consistencia interna: se refiere a la coherencia del diseño de la aplicación, su unidad visual y funcional, lo que proporciona tranquilidad y confianza al usuario mientras la maneja. Por ejemplo, los botones se encuentran siempre en el mismo lugar y tienen el mismo comportamiento en todas las pantallas.
3.4.Interacción
![La aplicación para gestionar el correo electrónico Microsoft Outlook permite configurar gestos sobre las filas en la bandeja de entrada para marcar como leído, borrar, archivar o posponer fácilmente el correo recibido.](assets/arquitectura-wireframes/m0651_m2_46.jpg)
3.5.Metáforas
3.6.Respuesta
![Los botones en Android tienen diferentes estados, cambiando de aspecto y color cuando el usuario los toca. Fuente: developer.android.com](assets/arquitectura-wireframes/m0651_m2_49.jpg)
4.Sketching y wireframes
![Fuente: elaboración propia](assets/arquitectura-wireframes/m0651_m1_25.gif)
Presupuesto disponible para el proyecto, tanto en dinero como en tiempo. Si no tenemos mucho de lo uno o de lo otro, nuestros prototipos serán rápidos y en baja fidelidad, lo justo para trazar las líneas maestras del proyecto.
Recursos y habilidad del equipo de diseño y desarrollo: los prototipos en alta fidelidad requieren de personal especializado que domine las herramientas de prototipado.
4.1.Prototipado en baja fidelidad
![Fuente: «iPhone Wireframe Templates for Sketching»](assets/arquitectura-wireframes/m0651_m2_52.jpg)
Velocidad: las iteraciones y mejoras del diseño se suceden rápidamente. Basta con arrancar la página y volver a empezar.
Eficiencia: al no centrarnos en los detalles visuales, nuestros diseños van directos al grano, facilitándonos de esta forma dirigir toda la atención hacia los puntos clave de nuestro producto.
Colaboración: cualquiera sabe dibujar con papel y lápiz. Compartir los primeros esbozos con todos los participantes en el proyecto nos permitirá recoger fácilmente ideas y mejoras por parte de todos los miembros del equipo.
![Fuente: SimplePocket Wireframes](assets/arquitectura-wireframes/m0651_m2_53a.jpg)
![Fuente: balsamiq.com](assets/arquitectura-wireframes/m0651_m2_54a.jpg)
![NinjaMock](assets/arquitectura-wireframes/m0651_m2_55.jpg)
![Fuente: play.google.com](assets/arquitectura-wireframes/m0651_m2_56.jpg)
![Diagrama de flujo en draw.io](assets/arquitectura-wireframes/m0651_m2_57.jpg)