Diseño para aplicaciones móviles: principios generales, patrones comunes y pautas de interfaz

Como parte de las iniciativas centrales de Intuit para cultivar aún más el primer pensamiento móvil y acelerar el crecimiento en los mercados globales, la Organización de Diseño del Grupo de Pequeños Negocios de Intuit ha cambiado de un modelo de diseño y envío de características priorizadas a un modelo donde cada diseñador es responsable de principio a fin. experiencias finales entre dispositivos, que incluyen el diseño de nuestros productos y servicios en la web de escritorio, web móvil, aplicaciones cliente de escritorio y aplicaciones móviles nativas.

Como líder de diseño para nuestro ecosistema de productos móviles nativos en los últimos años, comencé a recibir muchas preguntas sobre orientación y principios para el diseño móvil. Noté que muchos de los diseñadores, gerentes de producto e ingenieros que son nuevos en el diseño de aplicaciones móviles o que no viven ni respiran el desarrollo de aplicaciones móviles a diario no entendían completamente la naturaleza del diseño para plataformas nativas y capacidades de dispositivos. Para reforzar la noción de que "dispositivo cruzado" y "dispositivo móvil primero" no se trata solo de diseñar pantallas más pequeñas y escalar en varios tamaños de dispositivos, colaboré con el Equipo de Sistemas de Diseño para establecer un conjunto de patrones y pautas móviles para que los diseñadores puede comenzar a correr, o correr aún más rápido, con diseño móvil. Recientemente publicamos algunas pautas, herramientas y recursos en nuestro kit de herramientas de diseño interno que pensé que sería genial compartir algunos puntos clave y conclusiones con una audiencia más amplia, ya que la documentación aborda muchas preguntas frecuentes sobre patrones móviles.

En primer lugar, quiero comenzar diciendo que lo que escribo aquí es simplemente orientativo. Nuestro mantra para cualquier tipo de documentación de pautas de patrones que proporcionamos es, "Déme orientación, pero déjeme conducir". No queremos ser prescriptivos, y no queremos decirle cómo diseñar, pero este es un buen punto de partida para comenzar con los diseños móviles nativos. ¿Por qué estamos llamando a móviles nativos? A medida que continuamos diseñando experiencias y características independientes de dispositivo para productos y servicios, debemos recordar no descuidar las diferentes plataformas (es decir, nuestros productos móviles se ofrecen actualmente en iOS y Android).

Principios generales

1. Respeta la plataforma

Documentamos patrones y componentes basados ​​en sistemas operativos nativos en los que tenemos aplicaciones: iOS y Android. Al diseñar para plataformas nativas, primero debe consultar las pautas de diseño del sistema operativo nativo para obtener la máxima calidad. Tenga en cuenta que las pautas de la plataforma nativa evolucionan constantemente, por lo que siempre es una buena práctica mantenerse al tanto de estas pautas y actualizar su memoria y conocimiento a menudo.

Pautas de la interfaz humana de Apple: https://developer.apple.com/ios/human-interface-guidelines/

Pautas de diseño de materiales de Google: https://material.io/guidelines/

2. Centrarse en el beneficio del cliente.

Diseñe siempre para el beneficio del cliente primero. Ningún caso de uso es igual, y muchos casos de uso tienen excepciones. No diseñe algo simplemente porque puede reutilizar un patrón o componente para otra característica. Los patrones de diseño nos ayudan a establecer un sistema y unificar una experiencia en un ecosistema de productos, pero de ninguna manera deben ser la primera o la última parada en el proceso de diseño. Siempre pregúntese: ¿Cómo beneficiará esto al cliente?

3. Piense primero en el dispositivo

Empuje su pensamiento más allá de “móvil primero”. Comience a pensar primero en aprovechar las capacidades del dispositivo. El dispositivo móvil nativo tiene mucho que ofrecer: tacto, voz, presión, seguimiento de ubicación, acelerómetro, notificaciones, etc. Está diseñando alrededor del dispositivo, la plataforma, la experiencia del usuario. ¿Cómo se pueden utilizar estas características del dispositivo en nuestros productos? ¿Cómo puede el dispositivo móvil beneficiar a los usuarios más allá de la interfaz de pantalla frente a ellos?

4. Tenga en cuenta la escalabilidad

Partiendo del principio anterior, recuerde que un dispositivo móvil no es solo un teléfono. La escalabilidad entre dispositivos, más específicamente entre un teléfono y una tableta, es un desafío común entre los diseñadores. Cuando pensamos en dispositivos móviles, sabemos que hay tabletas, teléfonos, phablets (no lo suficientemente pequeños como para ser un teléfono, no lo suficientemente grandes como para ser una tableta). Algunas de las preguntas recurrentes que me hacen son: ¿Debería haber paridad entre los diseños web y de tableta? ¿Podemos traducir los patrones del teléfono para que sean los mismos en las tabletas? ¿Cómo diseñamos para phablets (no lo suficientemente pequeños como para ser un teléfono, no lo suficientemente grandes como para ser una tableta)? Para responder a estas preguntas, investigamos con los usuarios, analizamos en profundidad las interfaces del dispositivo y los tamaños de pantalla, y establecimos algunos estándares. Si bien el teléfono y la tableta comparten muchas similitudes, los usuarios los usan de manera muy diferente.

INTERFAZ DE TELÉFONO

Las interfaces móviles de MENOS DE 7 pulgadas de ancho deben tratarse como un teléfono. La sintaxis y el diseño deben estar alineados en estos dispositivos tanto como sea posible, pero también queremos aprovechar las pautas y capacidades nativas de la plataforma en primer lugar.

Un principio de diseño fundamental para los teléfonos móviles es incluir solo la información necesaria. No sobrecargue al usuario con más de lo que necesita saber o tomar medidas. El teléfono es una forma conveniente de consumir información sobre la marcha. Los propietarios de pequeñas empresas usan un teléfono para completar acciones rápidas mientras no están en la oficina, capturar datos, ver contenido, luego tal vez cerrarlo y volver a echar un vistazo más tarde.

INTERFAZ DE TABLETA

Las interfaces móviles MÁS DE 7 pulgadas de ancho deben tratarse como una tableta. La sintaxis y el diseño deben estar alineados a través de estos dispositivos tanto como sea posible, y de ninguna manera deben necesitar alinearse exactamente igual que las interfaces de menos de 7 pulgadas.

Los diseños de tabletas deben verse y sentirse como una web de escritorio, pero deben funcionar como el teléfono (con gestos de tocar / deslizar / mantener, transiciones, etc.). Muchos usuarios ven la tableta como un dispositivo híbrido. Nos hemos encontrado con muchos propietarios de pequeñas empresas que no poseen una computadora, pero poseen una tableta, y esos usuarios tratan la tableta como un dispositivo confiable en el que pueden trabajar.

Para escalar para el futuro o interfaces digitales adicionales, también debe pensar en pantallas táctiles no móviles como pantallas de TV, pantallas de mesa interactivas, pantallas de automóviles, pantallas de computadoras portátiles que puede tocar, etc. Desea asegurarse de que puede escalar para pantallas múltiples tamaños, grandes y pequeños, y no se limite a pensar solo en los dispositivos que admiten sus productos.

Patrones y pautas

Esta lista es un pequeño subconjunto de patrones y pautas que he encontrado que los diseñadores han estado preguntando comúnmente sobre las mejores prácticas para nuestros productos móviles.

Transiciones de pantalla

Uno de los principales aspectos que hacen que la navegación de contenido en plataformas móviles nativas sea tan agradable es la transición entre pantallas. Dos preguntas que me hacen mucho son: ¿Cuándo se debe usar un empuje (pantalla empujada hacia la izquierda desde la derecha)? ¿Cuándo debe usarse un modal (pantalla empujada hacia arriba desde la parte inferior)? Hemos establecido las siguientes mejores prácticas:

Un impulso es esencialmente la transición de pantalla fundamental para ver una nueva pantalla que se apila en la parte superior de la pantalla anterior. Normalmente hay un botón Atrás para que el usuario pueda ver la última pantalla vista. Para las pantallas que son principalmente para ver, como las pantallas o listas de detalles de transacciones, utilizamos un push.

Por lo general, se utiliza un modal cuando se requiere que el usuario seleccione, edite contenido o ingrese datos. Todos nuestros formularios de transacción usan modales de pantalla completa, ya que requiere más pensamiento del usuario debido a varios campos de formulario en una pantalla. Las barras de títulos para estas pantallas suelen tener acciones Cancelar y Guardar o Cancelar y Listo. Luego, cuando toca Guardar, obtiene una pantalla de inserción porque está viendo (no editando) el contenido guardado.

Llamado a la acción

Esta sección destaca una pregunta que a menudo recibo: "¿Debería esta llamada a la acción ser un botón o un enlace de texto?" Tanto en las pautas de diseño de iOS como de Android, el texto como botones es la norma y la recomendación. Sin embargo, siento que cuando usamos texto, especialmente con una fuente del sistema sobre un fondo oscuro o claro, perdemos una gran oportunidad para incorporar elementos de marca, como nuestro color verde del ecosistema o la iconografía de línea. Por lo tanto, nos hemos alejado deliberadamente del uso de texto como llamada a la acción y, en cambio, usamos botones con alto contraste, lo que también deja muy claro que es una llamada a la acción y no solo parte del contenido de la pantalla.

Estados vacíos

Nuestras pantallas de estado vacío proporcionan una primera impresión a los usuarios que son nuevos en nuestros productos. Generalmente consiste en una ilustración, una breve descripción y un claro llamado a la acción. Una tendencia de diseño común y actual es el uso de texto gris sobre un fondo claro. Si decide seguir esa tendencia, asegúrese de que el texto sea legible y accesible analizando los colores de primer plano y fondo para cumplir con los requisitos de relación de contraste de color WCAG 2.0.

Cuidados

En primer lugar, sí, se escribe caret, no quilates ni zanahoria. :) Los cuidados se utilizan para promover la capacidad de descubrimiento. Históricamente, tratamos de usar los puntos de referencia para cada instancia que queremos indicar que el usuario debe aprovechar la fila para ver más. Sin embargo, en nuestros formularios, estamos trabajando para alejarnos del uso de carets y, en su lugar, utilizar el espacio adicional al crear señales visuales y diseño de contenido conversacional para indicar los objetivos táctiles para ver más. Después de algunas pruebas de usuario con diferentes tratamientos de diseño, descubrimos que la capacidad de descubrimiento no es un problema tan grande como pensábamos. Los usuarios tocarán naturalmente las filas, ya sea que se les proporcione más información o no. Solo queremos usar cuidados cuando sea absolutamente necesario.

Hojas de acción

Regla general para el diseño móvil nativo: use hojas de acción siempre que haya varias acciones asociadas con una sola llamada a la acción (que no sea un bloqueador del sistema). Las pautas de Apple iOS llaman a estas hojas de acción. Google Android llama a estas hojas inferiores. Use las hojas de acción / hojas inferiores siempre que haya múltiples acciones asociadas con una sola llamada a la acción.

Cartas o Azulejos

Una tarjeta (o mosaico como lo pueden llamar otros equipos) es un componente que actúa como un contenedor rectangular para una cierta cantidad de información: elementos visuales, texto instructivo, diagramas y disparadores de acción. Hay dos tipos de tarjetas basadas en la apariencia y el uso: tarjeta de acción y tarjeta de información.

Cuadros de diálogo

Utilizamos cuadros de diálogo nativos del sistema para alertas críticas, alertas relacionadas con permisos, alertas de bloqueo del sistema, etc. La palabra clave es "alerta". Tenga en cuenta que para acciones que no están relacionadas con estas cosas, tratamos de usar hojas de acción.

Fuentes

La regla general para el diseño móvil nativo es utilizar las fuentes del sistema tanto como sea posible. Sin embargo, necesitábamos incorporar nuestra marca y nuestra voz y tono para crear lo que llamamos "Momentos de propiedad rápida de QuickBooks". Para grandes titulares y subtítulos, utilizamos las fuentes de nuestra marca. Para el texto del cuerpo, utilizamos fuentes del sistema. Para las fuentes dentro de los botones, utilizamos fuentes del sistema.

Palancas

Los interruptores de palanca se utilizan para activar una operación binaria (es decir, encender y apagar algo). Se usa a menudo para reemplazar una metáfora de casilla de verificación web. Tenemos muchas casillas de verificación en nuestros productos web, por lo que cuando diseñamos para dispositivos móviles nativos, queremos asegurarnos de que solo estamos buscando reemplazar las casillas de verificación binarias que permiten cosas como habilitar o deshabilitar contenido, mostrar / ocultar contenido o campos, activar / fuera de impuestos, rastree las devoluciones de los clientes, en lugar de las casillas de verificación utilizadas para seleccionar varios artículos.

Una vez más, estas son solo algunas pautas para comenzar o para acelerar su primer proceso de diseño móvil, especialmente para dispositivos móviles nativos. Usted es el conductor y diseñador con licencia creativa para definir la experiencia de usuario de extremo a extremo para sus productos y servicios. Confíe en su instinto, siga sus instintos, pero siempre recuerde respetar las plataformas, centrarse en el beneficio del cliente, pensar primero en el dispositivo y tener en cuenta la escalabilidad.

Yvonne So es una diseñadora principal de UX @Intuit que actualmente está creando experiencias significativas para pequeñas empresas de todo el mundo. Con una pasión y una misión para hacer que la tecnología sea más inclusiva para todos, habla y escribe regularmente sobre UX móvil, accesibilidad, innovación y diseño empático.