¿Tienes un proyecto de aplicación móvil en las obras? ¿Cuál es tu plan de diseño? ¿Ha saltado directamente o se ha detenido para considerar la experiencia que tendrá el usuario final cuando abra la aplicación por primera vez?
Podría valer la pena pensar en una estética con técnicas de experiencia de usuario cuidadosamente consideradas. Muchos de los conceptos que estamos viendo en el diseño de sitios web también se aplican a las aplicaciones móviles, pero pueden adoptar una forma ligeramente diferente para adaptarse mejor al tamaño de pantalla más pequeño. Aquí, veremos siete grandes opciones y ejemplos que puede aplicar al diseño de su propia aplicación móvil.
1. Negrita, tipografía Stark
El tipo más simple es más fácil de leer en una pantalla pequeña, especialmente contra la luz de fondo o en condiciones ambientales inferiores. Este solo hecho ayuda a impulsar por qué la tipografía simple sans serif es la opción de acceso para aplicaciones móviles.
Y aunque hace algunos años que era delgado, el péndulo se ha movido, de modo que los diseñadores optan por anchos de trazo más gruesos y opciones de tipo más audaces. El tamaño también es importante. Más aplicaciones están utilizando pantallas de inicio con pantallas de gran tamaño o de inicio con letras en negrita sobre un fondo contrastante para ayudar a los usuarios a participar y navegar a través de la aplicación.
Lo bueno de esta tendencia es que hay un enfoque distinto en la legibilidad. (¿Cuál es el punto de todo el texto, verdad?) La única parte de esta tendencia a tener cuidado es usar demasiadas palabras con mayúsculas o frases. Si bien todas las mayúsculas pueden ser una buena opción para una sola palabra, como "SUNNY" en la aplicación The Weather Channel de arriba, esto puede volverse incómodo para bloques de texto más largos.
Para usar esta tendencia ten en cuenta dos cosas:
- La tipografía y el lenguaje deben ser simples.
- El contraste entre el fondo y las letras debe ser intenso para una legibilidad máxima.
2. Capas y Profundidad
Material Design se ha destacado una y otra vez como una de las principales tendencias de diseño para ver este año. Y hay una buena razón.
En primer lugar, es la plataforma de diseño que Google ha adoptado. Cuando un gigante se llena con algo, muchos otros lo seguirán. (Y lo son.) Segundo, es un concepto altamente intuitivo con un diseño de interfaz fácil de usar que también es fácil para los ojos.
Una de las partes más llamativas de Material Design es la creación de capas para ayudar a los usuarios a interactuar con el diseño. Es el único material que realmente aparece en las interfaces en todas partes, incluidas las aplicaciones de Apple.
El truco para hacer que estas capas funcionen es la sutileza. Las capas se apilan con sombras pequeñas (casi invisibles, pero de aspecto natural) para diferenciar los elementos. Estas capas son también señales de interacción. La capa base o el fondo es el portal de información y las capas superiores incluyen herramientas de interacción.
Mira a Uber, arriba, por ejemplo. El mapa está en la parte inferior de la pantalla. Toque el botón de ubicación de recolección para establecer una dirección o muévase a las capas de direcciones anteriores para cambiar las ubicaciones. Cada capa le brinda al usuario múltiples formas de trabajar con la aplicación.
3. Esquemas de color monótonos
El uso de un solo color con detalles en blanco y negro es una excelente manera de crear interés visual en una pantalla pequeña. Opta por una opción de color brillante, audaz o inusual para destacar más. O incorpore varias opciones de este tipo en la interfaz y otorgue a los usuarios control sobre la combinación de colores.
Eso es justo lo que hace la aplicación Streaks, arriba. El concepto es muy simple: establezca objetivos y la aplicación le recordará que marque las tareas. El usuario puede establecer un color de fondo según el grupo de tareas y las notificaciones simples le recuerdan lo que debe hacer.
El color, la iconografía y el tipo simple son una combinación sorprendente que es fácil de leer y relacionarse. El diseño es tan elegante que casi hace que quieras agregar más tareas a tu lista de tareas pendientes.
4. Centrarse en las micro-interacciones
Y hablando de interacciones, cada buena aplicación incluye microinteracciones sin problemas. Las microinteracciones son esas pequeñas señales que pueden pasar desapercibidas, pero son una parte esencial de cómo los usuarios interactúan o dependen de aplicaciones específicas.
Las microinteracciones deben diseñarse para ayudar al usuario a hacer algo. ¿Desde una notificación de mensaje de texto hasta una alarma en una red social? estos pequeños divots están en todas partes. Y deberían hacer una cosa: deleitar al usuario.
En el más simple de los términos, las micro-interacciones tienden a hacer tres cosas:
- Comunicar comentarios, como gustar algo en Instagram.
- Ver una acción, que igual? como resultado el corazón se vuelve rojo
- Ayuda al usuario a hacer o ver algo, como una notificación de que su imagen le ha gustado
5. Tarjetas, tarjetas y más tarjetas
Si bien la revolución de la tarjeta podría haber comenzado con Pinterest, la estética sigue cobrando impulso gracias en parte al Diseño de materiales y la adopción por sitios web masivos como Facebook y SoundCloud (arriba).
Las tarjetas son una excelente manera de organizar y desarrollar grandes cantidades de contenido de una manera fácil de digerir. Cada elemento es una unidad que hace una sola cosa en el diseño. Lo bueno de estas unidades es que cada una puede hacer algo diferente.
Por lo tanto, una tarjeta podría permitirle ver un video y la siguiente tarjeta en los enlaces de secuencia a otra aplicación y la tarjeta después de eso incluye un bloque largo de texto para leer. La otra ventaja de las tarjetas, particularmente en las aplicaciones, es que son muy fáciles de usar. La mayoría de las aplicaciones dividen la pantalla a la mitad para dos tarjetas, como SoundCloud, o usan una tarjeta por formato de pantalla para que cualquier cosa que toque lo lleve al elemento deseado. (No te preocupes por los dedos gordos aquí!)
6. Navegación simple
Los menús ocultos, la navegación emergente y los botones grandes son una gran cosa. El número de aplicaciones con navegación en la pantalla de inicio está disminuyendo. Casi todos se están moviendo hacia un estilo oculto para aprovechar al máximo cada pulgada de valioso espacio en pantalla.
Y a los usuarios no parece importarles.Han adoptado la idea de un botón para mostrar la navegación con bastante facilidad. El truco es asegurarse de que cuando se visualiza este elemento de navegación es altamente funcional.
Slack es uno de los mejores ejemplos de esto. En realidad, tiene una navegación que se despliega desde la izquierda y la derecha de la pantalla. La funcionalidad principal de la aplicación sale del lado derecho (arriba), pero la navegación específica de su canal se encuentra en el menú de la izquierda.
7. Toques de animación.
Los destellos de animación son ese toque especial que puede hacer que su aplicación se sienta extraordinaria. La animación puede aumentar la facilidad de uso, brindar atención al usuario y servir como un punto de deleite.
Debido a que no necesariamente puede explicar dónde accederán los usuarios a una aplicación, y qué tipo de conexión a Internet pueden tener, es importante crear animaciones pequeñas, ligeras y que no dependan de la conectividad.
Strava está lleno de pequeñas animaciones. (Tan pequeño que podrías perderlos si no prestas atención). Hay transiciones geniales entre las pantallas, como la opción de desafío que se muestra arriba. Los puntos del mapa incluyen una animación pulsante y realmente puedes ver cómo tu punto se mueve a lo largo de las rutas mientras sigues la actividad.
Conclusión
Cuando esté considerando nuevas formas de darle vida a una aplicación móvil, observe primero las tendencias de diseño digital del día y luego piense cómo aplicarlas en una escala más pequeña. Lo que podría sorprenderlo es que pensar más pequeño, en realidad podría incluir diseñar más grande (en términos de escala de todos modos).
¿Con qué tendencias de diseño de aplicaciones estás más enamorado? ¿Hay otras tendencias que solo quieres que desaparezcan? Hazme saber en Twitter (etiqueta @carriecousins y @designshack), ¿siempre estoy buscando nuevas ideas para probar? y evitar.