Hoy más que nunca, la gente usa su smartphone a cualquier hora del día. Solo en España, el usuario de móvil pasa una media de 5 horas al día usando su periférico, y la gran mayoría de ese tiempo lo pasa en aplicaciones y navegando en sitios web. Por ello, desde COSMIK queremos brindarte una completa guía de diseño de apps para que tu producto considere todos los buenos principios del diseño de UI/UX.
La diferencia entre una buena y una mala aplicación es generalmente la calidad de su experiencia de usuario (UX). Una buena UX es lo que separa las aplicaciones exitosas de las que no lo son. Hoy en día, cualquier usuario espera mucho de una aplicación: tiempo de carga rápido, facilidad de uso y placer durante la interacción. Si quieres que tu aplicación tenga éxito, tienes que considerar que la UX no es sólo un aspecto menor del diseño, sino un componente esencial de la estrategia del producto.
Hay muchas cosas a considerar cuando se diseña para el móvil. En este artículo, hemos resumido muchas de las recomendaciones más prácticas que puedes aplicar al diseño de tu app.
Minimizar la carga cognitiva
La carga cognitiva se refiere en este caso a la cantidad de energía cerebral necesaria para usar la aplicación. El cerebro humano tiene una cantidad limitada de potencia de procesamiento, y cuando una aplicación proporciona demasiada información a la vez, puede abrumar al usuario y hacer que abandone la tarea.
Orden y limpieza
Recortar la parafernalia es una de las mayores recomendaciones en «10 cosas que hay que hacer y que no el Diseño de Apps«. El desorden es uno de los peores enemigos del buen diseño. Si pones muchos elementos en la interfaz, sobrecarga a los usuarios con demasiada información: Cada botón, imagen e icono añadido hace que la pantalla sea más complicada.
Este desorden es terrible en el escritorio, pero es mucho peor en el móvil (simplemente porque no tenemos tanto espacio en los dispositivos móviles como en los ordenadores de sobremesa y portátiles). Es esencial deshacerse de todo lo que no sea absolutamente necesario en un diseño para móvil, porque reducir el desorden mejorará la comprensión. La técnica del minimalismo funcional puede ayudar a tratar el problema de una interfaz de usuario desordenada:
- Mantener el contenido al mínimo (presentar al usuario sólo lo que necesita saber).
- Mantener los elementos de la interfaz al mínimo. Un diseño simple mantendrá al usuario a gusto con el producto.
La barra de la pestaña transparente (derecha) es mucho mejor que la desordenada (izquierda). (Imagen: Apple)
- Mantener los elementos de la interfaz al mínimo. Un diseño simple mantendrá al usuario a gusto con el producto.
(Fuente de la imagen: Magora)
Tareas de descarga de trabajo
Busca cualquier cosa en el diseño que requiera el esfuerzo del usuario (como introducir datos, tomar una decisión, etc.), y aporta alternativas. Por ejemplo, en algunos casos puedes reutilizar los datos introducidos previamente en lugar de pedir al usuario que escriba más, o utilizar la información ya disponible para establecer un valor predeterminado.
Dividir las tareas en trozos pequeños
Si una tarea contiene muchos pasos y acciones requeridas por parte del usuario, es mejor dividir dichas tareas en varias subtareas. Este principio es extremadamente importante en el diseño de apps porque nunca se debe crear demasiada complejidad para el usuario. Un buen ejemplo es el flujo de compra paso a paso en una aplicación de comercio electrónico, donde el diseñador divide una tarea compleja de compra en trozos del tamaño de un bocado, cada uno de los cuales requiere la acción del usuario.
La fragmentación hace que un formulario parezca menos cargado, especialmente cuando se solicita mucha información al usuario. (Fuente de la imagen: Murat Mutlu)
Esta división o fragmentación de pasos también puede ayudar a conectar dos actividades diferentes (como la navegación y la compra). Cuando un flujo se presenta como un número de pasos conectados lógicamente entre sí, el usuario puede proceder más fácilmente a través de él.
Cómo encontrar una película y comprar entradas para el cine. (Fuente de la imagen: Anton Skvortsov)
Usar pantallas familiares
Las pantallas familiares son pantallas que los usuarios ven en muchas aplicaciones. Pantallas como «Home», «Novedades» y «Resultados de la búsqueda» se han convertido en estándares de facto para las aplicaciones móviles. No requieren explicación adicional porque los usuarios ya están familiarizados con ellas. Esto permite a los usuarios utilizar la experiencia previa para interactuar con la aplicación, sin curva de aprendizaje.
Pantalla de perfil de usuario en la aplicación Quora
Minimizar los campos de entrada del usuario
Escribir en una pequeña pantalla de móvil no es la experiencia más cómoda. De hecho, a menudo es propenso a los errores. Y el caso más común de campo de entrada para un usuario es llenar un formulario. Aquí hay algunas recomendaciones prácticas para hacer este proceso fácil:
- Mantener los formularios tan cortos como sea posible eliminando los campos innecesarios. La aplicación debería pedir sólo el mínimo de información posible.
Una regla empírica en el diseño de la forma es que cuanto más corto es mejor. Combina varios campos en uno fácil de rellenar. (Fuente de la imagen: Luke W.)
- Proporcionar máscaras de entrada. El enmascaramiento es una técnica que ayuda a los usuarios a dar formato al texto introducido. Una máscara aparece una vez que el usuario se centra en un campo, y da formato al texto automáticamente a medida que el campo se va llenando, ayudando a los usuarios a centrarse en los datos requeridos y a notar más fácilmente los errores.
(Crédito de la imagen: Josh Morony)
- Utiliza funciones inteligentes como el autocompletado. Por ejemplo, rellenar un campo de dirección suele ser la parte más tediosa de cualquier formulario de registro. El uso de herramientas como el autocompletado de localizacion (que utiliza tanto la geolocalización como la precompletación de direcciones para proporcionar sugerencias precisas basadas en la ubicación exacta del usuario) permite a los usuarios introducir su dirección con menos pulsaciones de teclas que las que tendrían con un campo de entrada normal.
- Validar dinámicamente los valores del campo. Es frustrante cuando, después de enviar los datos, hay que volver atrás y corregir los errores. Siempre que sea posible, comprueba los valores de los campos inmediatamente después de introducirlos para que los usuarios puedan corregirlos de inmediato.
Validación en línea (Fuente de la imagen: Dribble)
- Personaliza el teclado para el tipo de consulta. Muestra un teclado numérico cuando pida un número de teléfono e incluye el botón @ cuando pida una dirección de correo electrónico. Asegúrate de que esta función se implemente de forma consistente en toda la aplicación, en lugar de sólo en determinados formularios.
Haz coincidir el teclado con la entrada de texto requerida. (Imagen: thinkwithgoogle)
Anticipar las necesidades de los usuarios
Busca proactivamente pasos en la experiencia de uso del usuario donde éste pueda necesitar ayuda. Por ejemplo, en la siguiente captura de pantalla se muestra una parte en la que los usuarios necesitan proporcionar información específica.
No resulta obvio dónde puede encontrar el usuario el código de barras. Un texto de ayuda conciso junto al campo de entrada sería muy útil. (Fuente de la imagen: Hotjar)
Utilizar el peso visual para transmitir la importancia
El elemento más importante de la pantalla debe tener el mayor peso visual. Añadir más peso a un elemento es posible con el peso, tamaño y color de la fuente.
Los artículos grandes llaman la atención y parecen más importantes que los pequeños. El botón «Request Lyft» captará la atención del usuario.
Evitar la jerga
La comunicación clara debe ser siempre una prioridad en cualquier aplicación móvil. Utiliza lo que sabes sobre tu público objetivo para determinar si ciertas palabras o frases son apropiadas.
Los términos o frases desconocidas aumentarán la carga cognitiva del usuario. (Fuente de la imagen: thinkwithgoogle)
Hacer que el diseño sea consistente
La consistencia es un principio fundamental del diseño. La consistencia elimina la confusión. Mantener una apariencia general consistente a lo largo de una aplicación es esencial. En lo que respecta a la aplicación móvil, la consistencia significa lo siguiente:
- Consistencia visual. Los tipos de letra, botones y etiquetas deben ser consistentes en toda la aplicación.
- Consistencia funcional. Los elementos interactivos deben funcionar de manera similar en todas las partes de su aplicación.
- Consistencia externa. El diseño debe ser consistente en tus múltiples productos o servicios. De esta manera, el usuario puede aplicar los conocimientos previos cuando utiliza otro producto.
Aquí te dejamos algunas recomendaciones prácticas sobre cómo hacer un diseño consistente:
Respeta las directrices de la plataforma.
Cada sistema operativo móvil tiene pautas estándar para el diseño de la interfaz: Las directrices de interfaz de Apple y las de Google Material Design. Cuando diseñes para plataformas nativas, sigue las directrices de diseño del SO para obtener la máxima calidad. La razón por la que es importante seguir las directrices de diseño es sencilla: Los usuarios se familiarizan con los patrones de interacción de cada sistema operativo y cualquier cosa que contradiga las directrices creará fricciones.
No imites los elementos de la interfaz de usuario de otras plataformas.
Cuando construyas tu aplicación para Android o ios, no lleves elementos de la interfaz de usuario de otras plataformas. Los iconos, elementos funcionales (campos de entrada, casillas de verificación, interruptores) y tipos de letra deben tener un aspecto nativo. Utiliza componentes nativos tanto como sea posible, para que la gente confíe en tu aplicación.
Mantén la aplicación móvil coherente con el sitio web.
Este es un ejemplo de consistencia externa. Si tienes un servicio web y una aplicación móvil, asegúrate de que ambos compartan características similares. Esto permitirá a los usuarios realizar transiciones sin fricciones entre la aplicación móvil y la web móvil. La inconsistencia en el diseño (por ejemplo, un esquema de navegación diferente o un esquema de color diferente) podría causar confusión.
Otorga control al usuario
Mantener los elementos interactivos familiares y predecibles
La previsibilidad es un principio fundamental del diseño de UX. Cuando las cosas funcionan de la manera que los usuarios predicen, sienten una mayor sensación de control. A diferencia de lo que ocurre en el escritorio, donde los usuarios pueden utilizar efectos de “hover” para entender si algo es interactivo o no, en el móvil, los usuarios pueden comprobar la interactividad sólo tocando un elemento. Por eso, con los botones y otros elementos interactivos, es esencial pensar en cómo el diseño comunica la asequibilidad. ¿Cómo entienden los usuarios un elemento como un botón? La forma debe seguir a la función: La forma en que un objeto se ve les dice a los usuarios cómo usarlo. Los elementos visuales que se parecen a los botones pero que no se pueden pulsar confundirán fácilmente a los usuarios.
El botón «atrás» debería funcionar correctamente
Un botón «back» mal creado puede causar muchos problemas a los usuarios. Prevenir situaciones en las que pulsar el botón «back» en un proceso de varios pasos llevaría a los usuarios de vuelta a la pantalla de inicio.
Un buen diseño facilita a los usuarios volver atrás y hacer correcciones. Cuando los usuarios saben que pueden echar un segundo vistazo a los datos que han proporcionado o a las opciones que han seleccionado, esto les permite proceder con facilidad.
Mensajes de error significativos
Errar es humano. Los errores ocurren cuando la gente se involucra con las aplicaciones. A veces, ocurren porque el usuario comete un error. A veces, ocurren porque la aplicación falla. Sea cual sea la causa, estos errores y la forma en que se manejan tienen un gran impacto en el UX. El mal manejo de los errores, junto con los mensajes de error inútiles, puede llenar a los usuarios de frustración y podría ser la razón por la que los usuarios abandonan tu aplicación.
Toma como ejemplo de lo que no se debe hacer con una pantalla de estado de error de Spotify. No ayuda a los usuarios a entender el contexto y no les ayuda a encontrar la respuesta a la pregunta: «¿Qué puedo hacer al respecto?»
La pantalla de errores de Spotify sólo dice «Se ha producido un error» y no proporciona ningún consejo constructivo sobre cómo solucionar el problema.
Nunca hay que asumir que los usuarios son lo suficientemente expertos en tecnología como para resolver las cosas. Siempre dile a la gente lo que está mal en un lenguaje sencillo. Cada mensaje de error debería informar a los usuarios:
- qué salió mal y posiblemente por qué,
- cuál es el siguiente paso que el usuario debe tomar para arreglar el error.
Puedes leer «Cómo diseñar estados de error para apps» para obtener más información sobre el tratamiento de errores.
Diseñar una interfaz accesible
El diseño accesible permite a los usuarios de todas las capacidades utilizar los productos con éxito. Considera cómo los usuarios con pérdida de visión, pérdida de audición y otras discapacidades pueden interactuar con tu aplicación.
Tomar consciencia sobre el daltonismo
El 4,5% de la población mundial sufre daltonismo (es decir, 1 de cada 12 hombres y 1 de cada 200 mujeres), el 4% sufre de baja visión (1 de cada 30 personas) y el 0,6% es ciego (1 de cada 188 personas). Es fácil olvidar que estamos diseñando para este grupo de usuarios porque la mayoría de los diseñadores no experimentan tales problemas.
Os vamos a dar un ejemplo simple. Los mensajes de éxito y de error en los formularios de los móviles suelen ser de color verde y rojo, respectivamente. Pero el rojo y el verde son los colores más afectados por la deficiencia en la visión del color (estos colores pueden ser difíciles de distinguir para las personas con deuteranopía o protanopía). Lo más probable es que haya visto el siguiente mensaje de error al rellenar un formulario: ¿»Los campos marcados en rojo son obligatorios»? Aunque no parezca gran cosa, este mensaje de error combinado con el formulario del ejemplo siguiente puede ser una experiencia extremadamente frustrante para las personas que tienen una deficiencia en la visión de los colores.
El diseño del campo de forma se basa sólo en el rojo y el verde para indicar los campos con y sin error. Los usuarios daltónicos no pueden diferenciar los campos resaltados en rojo.
Tal y como establecen las directrices de W3C, el color no debe utilizarse como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual. Es importante utilizar otros significantes visuales para asegurar que los usuarios puedan interactuar con una interfaz.
El uso de iconos y etiquetas para mostrar qué campos son inválidos comunica mejor la información a un usuario daltónico.
Hacer que las animaciones sean opcionales
Los usuarios que sufren de mareos a menudo desactivan los efectos animados en la configuración del sistema operativo. Cuando la opción de reducir el movimiento está activada en las preferencias de accesibilidad, tu aplicación debería minimizar o eliminar sus propias animaciones.
La navegación debe ser sencilla
Ayudar a los usuarios a navegar debería ser una alta prioridad para cada aplicación. Todas las características interesantes y el contenido atractivo de tu aplicación no importarán si la gente no puede encontrarlas; además, si lleva demasiado tiempo o esfuerzo descubrir cómo navegar por tu producto, lo más probable es que pierdas usuarios. Los usuarios deben poder explorar la aplicación de manera intuitiva y completar todas las tareas principales sin ninguna explicación.
Utilizar componentes de navegación estándar
Es mejor usar patrones de navegación estándar, como la barra de pestañas (para ios) y el cajón de navegación (para Android). La mayoría de los usuarios están familiarizados con ambos patrones de navegación y sabrán intuitivamente cómo moverse por la aplicación.
Cajón lateral (Android). (Fuente de la imagen: Material Design)
Barra de pestañas (IOS). (Fuente de la imagen: Ramotion)
Priorizar las opciones de navegación
Prioriza la navegación en función de la forma en que los usuarios interactúan con tu aplicación. Asigna diferentes niveles de prioridad (alta, media, baja) a las tareas comunes de los usuarios. Dar prominencia en la interfaz de usuario a los caminos y destinos con niveles de prioridad altos y de uso frecuente. Usa esos caminos para definir la totalidad de la navegación. Organiza la estructura de información de manera que requiera un número mínimo de toques, pases y pantallas.
No mezcles los patrones de navegación.
Cuando elijas un patrón de navegación principal para tu aplicación, úsalo de forma consistente. No debería haber una situación en la que una parte de tu aplicación tenga una barra de pestañas, mientras que otra parte tenga un cajón lateral.
Haz que la navegación sea visible
Como dice Jakob Nielsen, reconocer algo es más fácil que recordarlo. Minimizar la carga de memoria del usuario haciendo visibles las acciones y opciones tiene que ser una tarea indispensable. La navegación debería estar disponible en todo momento, no sólo cuando anticipamos que el usuario la necesita.
Comunicar la ubicación actual
No indicar la ubicación actual es un problema muy común de muchos menús de aplicaciones móviles. «¿Dónde estoy?» es una de las preguntas fundamentales que los usuarios deben responder para navegar con éxito. La gente debería saber dónde están en su aplicación en cualquier momento.
La aplicación Health (diseñada por Apple) proporciona información sobre la sección actual (la opción de navegación «Datos de salud» está resaltada) y la subsección (el titular «Actividad» está visible en la parte superior del diseño).
Utiliza la animación funcional para aclarar las transiciones de navegación
La animación es la mejor herramienta para describir las transiciones de estado. Ayuda a los usuarios a comprender un cambio de estado en el diseño de la página, lo que ha desencadenado el cambio y cómo iniciar el cambio de nuevo cuando sea necesario.
La animación funcional puede guiar eficientemente la atención del usuario y hacer que las transiciones complejas sean fáciles de entender. (Fuente de la imagen: Jae-seong, Jeong)
Ten cuidado con el uso de gestos en la UI
El uso de gestos en el diseño de interacción puede ser tentador. Pero en la mayoría de los casos, es mejor evitar esta tentación. Cuando los gestos se usan como una opción de navegación primaria, pueden causar un terrible UX. ¿Por qué? Porque los gestos son controles ocultos.
Como señala Thomas Joos en su artículo «Beyond the Button: Embracing the Gesture-Driven Interface», la mayor desventaja de usar gestos en una interfaz de usuario es la curva de aprendizaje. Cada vez que un control visible es reemplazado por un gesto, la curva de aprendizaje de la aplicación aumenta. Esto sucede porque los gestos tienen una capacidad más baja de ser descubiertos – siempre están ocultos, y la gente necesita ser capaz de identificar estas opciones para poder usarlos. Por eso es esencial usar sólo los gestos ampliamente aceptados (los que los usuarios esperan en tu aplicación).
Cuando se trata de usar gestos en una interfaz de usuario, sigue algunas reglas simples:
- Utiliza gestos estándar. Por «estándar» nos referimos a los gestos más naturales para la aplicación de tu categoría. La gente está familiarizada con los gestos estándar, por lo que no se requiere ningún esfuerzo adicional para descubrirlos o recordarlos.
- Ofrece los gestos como un complemento y no como un reemplazo de las opciones de navegación visibles. Los gestos pueden funcionar como atajos para la navegación, pero no como un reemplazo completo de los menús visibles. Por lo tanto, ofrece siempre una forma simple y visible de navegar, aunque signifique implementar unas pocas acciones extra.
Enfoque en la primera experiencia de uso
La primera experiencia es una parte decisiva de las aplicaciones móviles. Sólo tienes una oportunidad para una primera impresión. Y si fallas, hay una gran probabilidad de que los usuarios no vuelvan a lanzar tu aplicación. (Una investigación de Localytics muestra que el 24% de los usuarios nunca vuelven a una aplicación después del primer uso).
Evitar los formularios de registro impuestos
El registro es esencial en muchas aplicaciones antes de poder aprovecharla en su totalidad. Es una fuente común de fricción para los usuarios y una de las razones por las que los usuarios abandonan las aplicaciones. El número de usuarios que abandonan el proceso de registro es especialmente significativo en el caso de las aplicaciones con un bajo reconocimiento de marca o en las que la proposición de valor no está clara.
Pinterest pide a los usuarios que creen una nueva cuenta o que inicien sesión en la primera carga.
Como regla general, sólo pide a los usuarios que se registren si es esencial (por ejemplo, si las características principales de su aplicación sólo están disponibles cuando los usuarios completan el registro). E incluso en este caso, es mejor retrasar el inicio de sesión el mayor tiempo posible: permite que los usuarios experimenten la aplicación durante un tiempo (por ejemplo, haciendo un recorrido), y sólo entonces recuérdales de manera sutil que se registren. Esto les dará a los usuarios una idea de la experiencia, y será más probable que se comprometan con ella.
Diseñar una buena experiencia de integración
En el contexto del UX móvil, la base para retener a los usuarios es ofrecerles una excelente experiencia de integración. El objetivo de la integración o “onboarding” a tu app es mostrar el valor que tu aplicación proporciona.
Entre las muchas estrategias de onboarding, una es especialmente efectiva: la integración contextual. La incorporación contextual significa que las instrucciones se proporcionan sólo cuando el usuario las necesita. Duolingo es un excelente ejemplo. Esta aplicación combina un recorrido interactivo con una divulgación progresiva para mostrar a los usuarios cómo funciona la aplicación. Se anima a los usuarios a que se sumen y hagan una prueba rápida en el idioma seleccionado. Esto hace que el aprendizaje sea divertido y descubrible.
Duolingo tiene un recorrido guiado por el usuario que consiste en una prueba rápida.
Otra cosa que puede ser muy útil durante el registro es un estado de campo vacío. Esto se refiere a un campo de información necesaria cuyo estado por defecto es vacío y que requiere que los usuarios realicen uno o más pasos para poblarla con sus datos. Además de informar al usuario sobre el contenido que debe esperar de la página, un estado vacío también puede enseñar a la gente a utilizar una aplicación. Incluso si el proceso de incorporación consiste en un solo paso, la orientación asegurará a los usuarios que están haciendo lo correcto.
El estado vacío en Expensify tranquiliza a los usuarios diciéndoles cómo empezar.
No pedir información de configuración por adelantado
Una fase de instalación obligatoria crea fricción y puede llevar al abandono de la aplicación. Cuando los usuarios lanzan una aplicación, esperan que simplemente funcione. Por lo tanto, diseña tu aplicación para la mayoría de los usuarios, y deja que los pocos que quieren una configuración diferente ajusten sus ajustes para satisfacer sus necesidades en cualquier momento que quieran.
Consejo: Intenta deducir lo que necesitas del sistema. Si necesitas información sobre el usuario, el dispositivo o el entorno, consulta al sistema para eso siempre que sea posible, en lugar de preguntar al usuario.
Evita pedir permisos desde el principio
Evita una situación en la que lo primero que vea un usuario al lanzar la aplicación sea un diálogo solicitando permiso. De manera similar a la pared de inicio de sesión o a la fase de configuración inicial, la solicitud de permiso en el lanzamiento debe hacerse sólo cuando sea necesario para la función principal de la aplicación. Los usuarios no se sentirán molestos por esta solicitud si es evidente que su aplicación depende de ese permiso para funcionar (por ejemplo, está claro por qué un editor de fotos solicitaría acceso a las fotos).
Patrones de solicitud de permiso propuestos por Google. (Imagen: Diseño de material)
Pero para cualquier otro caso, pida permiso en el contexto. Es más probable que los usuarios concedan permiso si se les pide durante una tarea pertinente.
Las aplicaciones deben pedir permisos según el contexto y deben comunicar el valor que proporcionará el acceso. Solicitar a los usuarios que acepten los permisos sólo cuando intenten utilizar la función. (Imagen: Cluster)
Consejos:
- Pide sólo lo que tu aplicación claramente necesita. No pidas todos los permisos posibles. Sería sospechoso si una aplicación solicita algo que no tiene una necesidad evidente. Por ejemplo, una aplicación de despertador que pide permiso para acceder a tu lista de contactos sería sospechosa.
- Explica por qué tu aplicación necesita la información, si no es obvio. A veces es necesario proporcionar más contexto para tu solicitud. Por este motivo, puedes diseñar una alerta personalizada para solicitar permiso.
Haz que tu aplicación sea rápida y responsive
El tiempo de carga es extremadamente importante para el UX. A medida que la tecnología avanza, nos impacientamos, y hoy en día, el 47% de los usuarios esperan que una página se cargue en 2 segundos o menos.
Cuanto más rápida sea tu aplicación, mejor será la experiencia. (Fuente de la imagen: Google)
Si una página tarda más tiempo en cargarse, los visitantes pueden frustrarse e irse. Por eso la velocidad debe ser una prioridad al construir una aplicación móvil. Pero no importa cuán rápido hagas una aplicación, algunas partes necesitan tiempo para ser procesadas. Una respuesta lenta podría ser causada por una mala conexión a Internet, o una operación podría tardar mucho tiempo. Pero incluso si no puedes acortar la línea, al menos intenta que la espera sea más agradable.
Concéntrate en cargar el contenido en el área visible de la pantalla
Cargar sólo el contenido suficiente para llenar la pantalla cuando se abre una página. El contenido disponible en el desplazamiento debe continuar cargándose en el fondo. El beneficio de este enfoque es que los usuarios se dedicarán a leer el contenido inicial y, en algunos casos, ni siquiera notarán que el contenido sigue cargándose.
Dejar claro cuando se está cargando…
Una pantalla en blanco o estática que los usuarios ven cuando se está cargando el contenido puede hacer que parezca que su aplicación está congelada, lo que provoca confusión y frustración, y puede hacer que la gente abandone tu aplicación. Como mínimo, muestra un icono de carga que deja claro que algo está sucediendo. Para un tiempo de espera más largo (más de 10 segundos), es esencial mostrar una barra de progreso para que el usuario pueda medir cuánto tiempo va a estar esperando.
Ofrece una distracción visual
Si una aplicación da a los usuarios algo interesante para mirar mientras esperan, los usuarios prestarán menos atención a la espera en sí. Por lo tanto, para asegurarse de que la gente no se aburra mientras espera que algo suceda, ofréceles una distracción. Un indicador de espera animado puede retener la atención de los usuarios mientras esperan.
La atención a los movimientos fluidos puede sorprender deliciosamente al usuario. (Crédito de la imagen: UI8)
Consejo: Tener en cuenta la longevidad. Incluso una buena animación puede ser molesta cuando se usa demasiado. Cuando diseñes una animación, pregúntate: «¿La animación se volverá molesta en el centésimo uso, o es universalmente clara y discreta?»
Pantallas de precarga
Las pantallas de precarga (que muestran contenedores de información temporal) son esencialmente una versión en blanco de una página en la que la información se carga gradualmente.
Una pantalla de precarga muestra la pantalla inmediatamente. Los marcadores de posición reemplazan cualquier elemento del diseño cuyo contenido no esté disponible todavía. (Imagen: Slack)
Esta pantalla aparecería en el momento en que tu aplicación comience a cargar datos, dando a los usuarios la impresión de que su aplicación es rápida y sensible. A diferencia de un indicador de carga, que sólo transmite que algo está sucediendo, una pantalla de precarga se centra en el progreso real.
Una pantalla de precarga llena la interfaz de usuario a medida que el contenido se carga de forma incremental. (Fuente de la imagen: Tandem Seven)
Optimizar el contenido para móvil
El contenido juega un papel importantísimo en el diseño. En la mayoría de los casos, la razón principal por la que la gente usa una aplicación es el contenido que proporciona. Pero no basta con tener un contenido claro y bien elaborado. El contenido tiene que ser fácil de digerir.
Hacer que el texto sea legible y comprensible
Cuando pensamos en el contenido, en la mayoría de los casos nos referimos a la tipografía. Como dice Oliver Reichenstein en su ensayo «El diseño web es 95% tipografía«:
«Optimizar la tipografía es optimizar la legibilidad, la accesibilidad, la usabilidad(!), el equilibrio gráfico general.»
La clave de la tipografía móvil es la legibilidad y la facilidad de lectura. Si los usuarios no pueden leer su contenido, no tiene sentido ofrecer contenido en primer lugar.
Primero, unas cuantas recomendaciones prácticas sobre la legibilidad:
Tamaño de la fuente
Generalmente, cualquier cosa menor de 16 pixeles (o 11 puntos) es difícil de leer en cualquier pantalla.
Familia de fuentes
La mayoría de los usuarios prefieren una fuente clara y fácil de leer. Una apuesta segura es el tipo de letra por defecto del sistema (Apple ios usa la fuente San Francisco; Google Android usa Roboto).
Contraste
El texto de color claro (como el gris claro) puede parecer estéticamente atractivo, pero a los usuarios les costará mucho leerlo, especialmente contra un fondo claro. Asegúrate de que haya mucho contraste entre la fuente y el fondo para facilitar la lectura. Las pautas de accesibilidad al contenido web de WC3 proporcionan recomendaciones de relación de contraste para imágenes y texto.
Incluso el texto de alto contraste es difícil de leer cuando hay resplandor, pero el texto de bajo contraste es casi imposible de leer.
Y ahora, unas cuantas recomendaciones para la legibilidad:
Evitar textos con todo en mayúsculas.
El texto en mayúsculas, es decir, el texto con todas las letras en mayúsculas, está bien en contextos que no implican una lectura atenta (como acrónimos y logotipos), pero evítalo cuando tu mensaje requiera una lectura pesada.
Limitar la longitud de las líneas de texto.
Una buena regla general es usar 30 a 40 caracteres por línea para el móvil.
Izquierda: El texto es demasiado pequeño para leerlo en un pequeño dispositivo sin pellizcar y hacer zoom. A la derecha: El texto es cómodo de leer en la pantalla de un móvil.
No aprietes las líneas.
Añadir espacio entre el texto ayuda al usuario a leer y crea la sensación de que no hay tanta información que asimilar.
Demasiado apretado, demasiado separado, y espaciado correcto a la derecha. Añadiendo la cantidad adecuada de espacio al texto, tanto entre líneas como en los márgenes, ayudas a los usuarios a absorber mejor las palabras.
Imágenes de alta calidad y la relación de aspecto correcta
El auge de los dispositivos con pantallas de alta resolución establece un listón para la calidad de las imágenes. Las imágenes no deberían aparecer pixeladas en las pantallas de alta definición.
Las imágenes deben aparecer siempre en la relación de aspecto correcta, para que no se vean distorsionadas. Las imágenes que se extienden demasiado amplias o demasiado largas sólo para caber en un espacio se verán poco atractivas y fuera de lugar.
El último reto al que se enfrentan muchos diseñadores de móviles es optimizar el UX los móviles con “notch”. Por ejemplo, diseñar para el Iphone X requiere un tamaño diferente del tablero de arte que cualquier otro Iphone (necesitarás imágenes con una resolución de 375 x 812 puntos a 3x).
(Crédito de la imagen: Apple)
Optimizar videos para el modo retrato
El vídeo se está convirtiendo rápidamente en un método estándar de consumo de contenidos para muchos usuarios. Según youtube, el consumo de video móvil crece un 100% cada año. Para el 2020, más del 75% del tráfico de datos móviles a nivel mundial será contenido de video. Esto significa que es esencial optimizar el contenido de video para el modo de retrato.
Según scientiamobile, el 94% de los usuarios utilizan su dispositivo móvil en modo retrato. Si tu aplicación proporciona contenido de video, debe ser optimizada para permitir a los usuarios verlo en modo retrato.
Diseña para las manos
El diseño para el tacto tiene como objetivo reducir el número de entradas incorrectas y hacer más cómoda la interacción con una aplicación.
Diseña para los dedos, no para los cursores
Cuando se diseñan elementos accionables en una interfaz móvil, es vital hacer objetivos lo suficientemente grandes para que sean fáciles de tocar para los usuarios. Los errores de toque a menudo ocurren debido a los pequeños controles táctiles.
Un pequeño objetivo táctil aumenta la posibilidad de una selección errónea. (Fuente de la imagen: Apple)
Cuando diseñas un objetivo táctil, puedes guiarte por el estudio del Laboratorio Táctil del MIT (PDF) para elegir un tamaño adecuado para los elementos interactivos. Este estudio encontró que el tamaño promedio de las almohadillas de los dedos está entre 10 y 14 mm y las puntas de los dedos entre 8 y 10 mm, lo que hace que 10 por 10 mm sea un buen tamaño mínimo de objetivo táctil.
10×10 mm es un buen tamaño mínimo del objetivo de contacto. (Fuente de la imagen: uxmag)
No sólo es importante el tamaño del objetivo, sino que también es esencial tener la cantidad adecuada de espacio entre los objetivos. Si varios objetivos táctiles están cerca uno del otro (por ejemplo, los botones «Aceptar» y «Desacordar»), asegúrate de que haya una buena cantidad de espacio entre ellos.
Un ejemplo de espacio entre botones. (Fuente de la imagen: Material Design)
Considerar la zona del pulgar
Diseñar para los pulgares no es sólo hacer objetivos lo suficientemente grandes, sino también considerar la forma en que sostenemos nuestros dispositivos. Muchos usuarios sostienen su teléfono con una sola mano. Sólo una parte de la pantalla sería un territorio genuinamente sin esfuerzo para sus pulgares. Este territorio se llama la zona natural del pulgar. Otras zonas requieren estirar el dedo o incluso cambiar el agarre para alcanzarlas. A continuación, puedes ver cómo es la zona segura en un moderno dispositivo móvil.
Zonas de acción de los pulgares, según la investigación de Scott Hurff. (Fuente de la imagen: Smashing Magazine)
Cuanto más grande es la pantalla, más fácilmente se puede acceder a ella.
Zonas de pulgares para una persona diestra, según la investigación de Scott Hurff.
Considera todas las zonas cuando diseñe para el móvil:
- La zona verde es el mejor lugar para las opciones de navegación o acciones interactivas frecuentes (como los botones de llamada a la acción).
- La zona roja es el mejor lugar para opciones de peligro potencial (como «Borrar» o «Borrar»). Es menos probable que los usuarios activen esta opción accidentalmente.
Feedback sobre la interacción
En el mundo físico, los objetos responden a nuestra interacción. La gente espera un nivel similar de respuesta de los controles digitales de la interfaz de usuario. Tendrás que proporcionar una respuesta instantánea en cada interacción del usuario. Si tu aplicación no proporciona feedback, el usuario se preguntará si se ha congelado o si ha fallado el objetivo. Los comentarios o feedback pueden ser visuales (resaltando un botón pulsado) o táctiles (una vibración del dispositivo en la entrada).
Las aplicaciones que proporcionan una animación visual u otro tipo de visual eliminan esta conjetura para el usuario. (Crédito de la imagen: Vadim Gromov)
Humanizar la experiencia digital
El buen diseño de UX no trata sólo sobre la usabilidad; creamos o no, también participan los sentimientos. Y cuando pensamos en lo que nos hace sentir bien, a menudo pensamos en un diseño bien hecho.
Experiencia personalizada
La personalización es uno de los aspectos más críticos de las aplicaciones móviles de hoy en día. Es una oportunidad para conectarse con los usuarios y proporcionarles la información que necesitan de una manera que se sienta genuina.
Hay innumerables maneras de mejorar el UX móvil incorporando la personalización. Hoy en día es posible ofrecer contenido personalizado dependiendo de la ubicación del usuario, sus búsquedas anteriores y sus compras anteriores. Por ejemplo, si los usuarios prefieren comprar determinados grupos de productos cada mes, una aplicación podría hacer un seguimiento de ello y ofrecerles ofertas especiales en ese tipo de productos.
La aplicación móvil de Starbucks es un excelente ejemplo que sigue este enfoque. La aplicación utiliza la información proporcionada por los usuarios (por ejemplo, el tipo de café que suelen pedir) para elaborar ofertas especiales.
Starbucks proporciona ofertas y servicios adaptados a los clientes individuales
Animaciones enriquezidas
A diferencia de la animación funcional, que se utiliza para mejorar la claridad de una interfaz de usuario, la animación visual se utiliza para hacer que una interfaz se sienta humana. Este tipo de animación deja claro que las personas que crearon la aplicación se preocupan por sus usuarios.
Usar animaciones vistosas es una oportunidad para crear una conexión emocional con tus usuarios. (Crédito de la imagen: Serhii Hanushchak)
Optimizar las notificaciones push
Las notificaciones molestas son la razón principal por la que las personas desinstalan aplicaciones móviles (según el 71% de los encuestados).
(Fuente de la imagen: Appiterate Survey)
No envíes notificaciones push sólo porque puedas. Cada notificación debe ser valiosa y bien programada.
Impulsar el valor
Cuando un usuario empieza a usar tu aplicación, no le importará recibir notificaciones, siempre y cuando el valor que obtenga sea lo suficientemente mayor que la interrupción. Casi el 50% de los usuarios agradecen las notificaciones que les interesan. La personalización del contenido para inspirar y deleitar es fundamental. Netflix es un excelente ejemplo de una compañía que «empuja el valor». Utiliza cuidadosamente los datos de observación para presentar recomendaciones que se sienten hechas a medida.
Netflix hace un gran trabajo personalizando sus notificaciones push, permitiendo a los usuarios saber cuándo están disponibles sus programas favoritos.
Evitar el envío de muchas notificaciones en un corto período de tiempo
Demasiadas notificaciones entregadas en un corto período de tiempo pueden llevar a una situación de exceso de notificaciones, en la que un usuario no puede procesar la información y simplemente se la salta. Limita el número total de notificaciones combinando diferentes mensajes.
Considerar otros canales para entregar el mensaje
Las notificaciones push no son la única forma de entregar un mensaje. Utiliza el correo electrónico, las notificaciones in-app y la mensajería de noticias para notificar a los usuarios sobre eventos importantes, según el nivel de urgencia y el tipo de contenido que deseas compartir.
Selecciona el tipo de notificación adecuado en función de la urgencia y el contenido. (Imagen: Appboy)
Optimizar la app para el móvil
Diseña teniendo en cuenta momentos de interrupción
Vivimos en un mundo de constante interrupción. Siempre hay algo tratando de distraernos y dirigir nuestra atención a otra parte. Sin mencionar que muchas sesiones de móvil suceden cuando los usuarios están en movimiento. Por ejemplo, los usuarios pueden usar su aplicación mientras están en el bus o el metro. Tales sesiones pueden ser interrumpidas en cualquier momento. Los usuarios pueden frustrarse fácilmente cuando una aplicación olvida su progreso actual tan pronto como la cierran.
Cuando se produce una interrupción, su aplicación debería guardar el estado actual (contexto) y permitir a los usuarios continuar donde lo dejaron. Esto facilitará que los usuarios vuelvan a conectarse con la aplicación cuando regresen a ella después de la interrupción.
Aprovechar las capacidades del dispositivo
Los dispositivos móviles tienen muchos sensores (cámara, rastreo de ubicación, acelerómetro) que pueden ser usados para mejorar el UX. Aquí hay algunas características que puedes usar para hacerlo:
Cámara
Es posible simplificar las operaciones de entrada de datos usando una cámara. Por ejemplo, se podría usar la cámara digital para leer los números de las tarjetas de crédito automáticamente.
(Crédito de la imagen: Business Insider)
Detectar la ubicación
Las aplicaciones pueden utilizar los datos de localización de un dispositivo para proporcionar contenido relevante para la localización del usuario o para simplificar ciertas operaciones. Por ejemplo, si está diseñando una aplicación para la entrega de alimentos, en lugar de pedir al usuario que proporcione una dirección para la entrega, puede detectar automáticamente su ubicación actual y pedirle al usuario que confirme que desea recibir una entrega en esa ubicación.
Aplicaciones como Uber Eats ya utilizan esta propiedad para reducir el número de acciones requeridas por el usuario.
Autenticación biométrica
Es posible minimizar el número de pasos necesarios para iniciar sesión en una aplicación utilizando características como el inicio de sesión táctil de huellas dactilares o la identificación facial.
La aplicación de Chase Mobile proporciona una función de inicio de sesión de un solo toque.
Esfuérzate por crear una experiencia multicanal
No pienses en tu aplicación móvil como una experiencia aislada. Cuando se trata de crear un viaje para el usuario, el objetivo final es crear una experiencia perfecta, a través de todos los dispositivos. Los usuarios deben ser capaces de cambiar a un medio diferente y continuar el viaje.
Según Appticles, el 37% de los usuarios investigan en el móvil pero cambian al escritorio para completar una compra. Por lo tanto, si se está diseñando una aplicación de comercio electrónico, los usuarios de móviles deberían poder cambiar a su ordenador de sobremesa o portátil para continuar el viaje. La sincronización del progreso del usuario entre los dispositivos es una prioridad clave para crear una experiencia perfecta. Hace que los usuarios sientan que su flujo de trabajo no se interrumpe.
Adaptar el diseño móvil a los mercados emergentes
Según Google, se espera que mil millones de nuevos usuarios se conecten en los próximos años. Y la gran mayoría de ellos provendrán de mercados emergentes (o de los llamados países “mobile-first”, como la India, Indonesia, el Brasil y Nigeria). Tendrán acceso a través de un teléfono móvil. Estos usuarios tendrán experiencias y expectativas muy diferentes a las de los que están en los Europa o Estados Unidos.
Si estás interesado en globalizarte, es importante considerar sus experiencias.
Poca conectividad a internet
En Occidente, los usuarios están acostumbrados a una conectividad ubicua y en mayor o menor medida, rápida. Pero eso ciertamente no es cierto en todo el mundo. Los productos en los mercados emergentes tienen que ser capaces de funcionar con una conectividad lenta o intermitente. Dependiendo de la ubicación de una persona, la red puede cambiar de Wi-Fi a 4G a 3G o ninguna conectividad, y su producto tiene que adaptarse a eso.
Si planeas diseñar para ese mercado, considere lo siguiente:
- Asegúrate de que tu producto funcione cuando no esté conectado a Internet en absoluto. Permite el almacenamiento en caché de los datos.
- Optimiza tu producto para una carga rápida. Minimiza el tamaño de la página manteniendo las imágenes y otros contenidos de peso al mínimo; y reduce el tamaño de ese contenido.
Youtube Go es un excelente ejemplo de una aplicación móvil diseñada en torno a las limitaciones de conectividad. La aplicación fue diseñada para estar primero fuera de línea (lo que significa que es utilizable incluso cuando no está conectada a Internet). La aplicación permite a los usuarios obtener una vista previa de los vídeos primero y les permite seleccionar el tamaño del archivo de un vídeo antes de guardarlo sin conexión para verlo más tarde. También cuenta con una gran función que permite a los usuarios compartir fácilmente los videos con amigos y familiares cercanos, sin utilizar ningún tipo de datos.
Youtube Go permite a los usuarios enviar y recibir vídeos cuando están juntos, utilizando el intercambio peer-to-peer sin conexión.
Google News & Weather es otro gran ejemplo de una aplicación que se diseñó en torno a las malas conexiones. La aplicación tiene una función llamada «modo Lite» para las personas que tienen conexiones con poco ancho de banda. Cuando se activa este modo, se reduce el contenido a lo esencial, para que la aplicación se cargue más rápidamente. Según Google, este modo utiliza menos de un tercio de los datos normales y se activa automáticamente cuando la aplicación detecta una red lenta.
Datos limitados
En aproximadamente el 95% de los mercados emergentes, la gente depende casi totalmente de los costosos datos de los móviles de prepago. La gente compra una cantidad fija de datos, y muchos sólo pueden permitirse unos 300 MB de datos al mes.
Estos usuarios aprecian la transparencia cuando se trata de entender su consumo de datos. También valoran la capacidad de controlar si un producto se descarga a través de Wi-Fi o utiliza datos.
A continuación, puedes ver otro ejemplo de youtube Go. Después de seleccionar un vídeo, los usuarios pueden elegir la calidad del mismo. La aplicación les permite saber de antemano cuántos datos van a gastar antes de comprometerse con una acción.
Youtube Go te permite obtener una vista previa de los vídeos y elegir el tamaño del archivo antes de guardarlo sin conexión para verlo más tarde.
Capacidades limitadas del dispositivo
Los smartphones de los países que se han lanzado al concepto mobile-first tienen capacidades muy diferentes a las de gama alta. La mayoría de los dispositivos de los mercados emergentes cuestan alrededor o menos de 100 euros y pueden tener un poder de almacenamiento y procesamiento limitado. Asegúrate de que el producto que diseñas funcione con dispositivos y software más antiguos y de baja gama.
Estética local
El diseño minimalista, que es popular en el mundo occidental hoy en día, podría considerarse demasiado desnudo para otras culturas. Si quieres que su producto tenga éxito en los mercados emergentes, presta atención a la estética cultural. Puedes inspirarte en productos populares de la región o contratar a diseñadores locales que estén familiarizados con las preferencias de los usuarios. Diseñar según la estética local hará que tu app se sienta más cómoda y reconocible.
Especificaciones de la región
Cuando Google adaptó Google Maps para la India, consideró que la India es el mercado de vehículos de dos ruedas más grande del mundo, y que los millones de motociclistas y ciclistas tienen necesidades diferentes a las de los conductores de automóviles. Lanzaron el modo de dos ruedas en Maps. Este modo muestra rutas de viaje que utilizan atajos, no accesibles para coches y camiones.
Testeo y feedback
Todos los principios que acabas de leer pueden ayudarte a diseñar una mejor experiencia para el móvil, pero no sustituirán la necesidad de investigación y pruebas de los usuarios. Aun así, tendrás que probar tu solución con usuarios reales para entender qué partes de la interfaz de usuario requieren mejoras.
Bucle de feedback
Fomenta el feedback o los comentarios de los usuarios en cada oportunidad. Para recoger una valiosa retroalimentación, es necesario facilitar a los usuarios el acto de proporcionarla. Por lo tanto, construye un mecanismo de feedback directamente en tu app. Esto podría ser tan simple como un formulario marcado «Deja algún comentario». Sólo hay que asegurarse de que el sistema funciona perfectamente para tus usuarios.
El diseño es un proceso interminable
Es justo decir que el diseño es un proceso de mejora continua. Como diseñadores de productos, utilizamos el análisis y el feedback de los usuarios para mejorar la experiencia continuamente.
Conclusión
Una app bien diseñada es la combinación perfecta de belleza y funcionalidad, y eso es exactamente a lo que debes aspirar cuando construyes una aplicación. Pero no intentes construir una aplicación perfecta justo en el primer intento. Es casi imposible. En su lugar, trata tu aplicación como un proyecto en continua evolución, y utiliza los datos de las sesiones de prueba y los comentarios de los usuarios para mejorar constantemente la experiencia.
Desde COSMIK, consideramos todos y cada uno de los apartados expuestos para diseñar apps. Si te ha gustado lo que has visto y quieres confiar el diseño de tu app en un grupo de profesionales, podemos ofrecerte este servicio. ¡No dudes en contactar con nosotros!
0 comentarios