Conozca los principios de diseño móvil reglas que deben seguir para diseña los sitios en 2024.
El diseño móvil es una consideración relativamente nueva pero vital. Hace apenas una década, diseñar para la web significaba diseñar para una computadora de escritorio; ahora significa diseñar con estas reglas para dispositivos móviles también. Los teléfonos móviles están generando una mayor cantidad de tráfico web y los números solo van a crecer.
Según Statista, en octubre de 2018 teníamos 3.900 millones de usuarios únicos de Internet móvil y más del 50% del tráfico de sitios web en todo el mundo se generaba a través de teléfonos móviles . Un gran diseño web ya no es un lujo sino una necesidad.
Sin embargo, crear una excelente experiencia web para usuarios móviles requiere algo más que crear un diseño web responsivo . En este artículo, puede descubrir los principios fundamentales del diseño de sitios móviles.
Reglas de diseño de interfaces en aplicaciones
01. Construir experiencias orientadas a objetivos.
Los usuarios móviles son usuarios muy orientados a objetivos. Cada vez que visitan un sitio web, tienen una tarea específica que desean realizar y esperan obtener lo que necesitan realmente rápido. Entonces, ¿cómo puedes hacer que eso suceda?
Imagine a sus usuarios ideales: al igual que en la construcción de una casa, la construcción de un sitio web comienza con una base sólida. Y la base para un gran diseño web es el conocimiento que tiene sobre sus usuarios. La investigación del usuario debe ser uno de los primeros pasos en el diseño del producto. Debe averiguar exactamente quiénes son sus usuarios y qué quieren lograr. Una vez que conoce los deseos y necesidades de sus usuarios, puede crear un viaje de usuario que sepa que se ajusta perfectamente a sus expectativas. Luego, al realizar pruebas exhaustivas con los usuarios, se asegurará de que haya alcanzado esos objetivos.
Refine la experiencia en torno a su objetivo principal: ¿Qué desea lograr con este sitio web? Encontrar las respuestas a esta pregunta es otra cosa importante que hacer al crear una experiencia web móvil. ¿Está intentando impulsar el compromiso, obligar a los usuarios a comprar productos o suscribirse a un servicio? Indique claramente el objetivo y piense cómo puede reducir la cantidad de pasos que un usuario debe tomar para alcanzarlo.
02. Adapta tu contenido para trabajar en un espacio más pequeño.
El contenido es lo que proporciona valor para la mayoría de los sitios web. Es la razón principal por la que la gente los visita. Cuando se trata del diseño web móvil, es imposible tomar una experiencia de escritorio y replicarla en el móvil; Es importante diseñar sitios web teniendo en cuenta a los usuarios móviles. Eso significa que debemos adaptar el contenido y las funciones para adaptarse al tamaño y los hábitos de la pantalla del usuario. Entonces, ¿qué pasos puedes tomar para lograr esto?
Evite el desplazamiento horizontal: los usuarios se sienten cómodos con los sitios que se desplazan verticalmente pero no horizontalmente. Por eso no debería haber páginas en las que se requiera desplazamiento horizontal para ver el contenido. Los elementos de ancho fijo son una de las razones más comunes que causan el desplazamiento horizontal, así que verifique que no tenga contenido que solo se muestre bien en un ancho de vista particular.
Apunte a un diseño de una sola columna: los diseños de una sola columnaayudan a administrar el espacio limitado en una pantalla pequeña y también permiten una escala fácil entre el modo vertical y horizontal.
Los usuarios se sienten cómodos con los sitios que se desplazan verticalmente pero no horizontalmente. Por eso no debería haber páginas en las que se requiera desplazamiento horizontal.
Asegúrese de que los usuarios no tengan que apretar para hacer zoom: los visitantes pueden frustrarse fácilmente cuando tienen que acercarse o alejarse para leer un texto o ver una imagen. Diseñe su sitio móvil para que los usuarios nunca tengan que cambiar el tamaño.
Use el tamaño de fuente legible: 11 puntos es el tamaño mínimo absoluto para el texto. Este tamaño permite a los usuarios leer texto a una distancia de visualización típica sin hacer zoom.
Seleccione fuentes que se escalan bien: si la experiencia del sitio web requiere lectura, es mejor usar tipos de letra sans-serif como Helvetica o Roboto.
Use un diseño amigable con los dedos: cuando diseñe un sitio móvil, recuerde que los visitantes usarán sus dedos en lugar de una flecha del mouse y los dedos humanos son más grandes que un puntero del mouse. Esfuércese por diseñar una interfaz amigable con los dedos donde cada elemento interactivo tenga el tamaño adecuado.
Un estudio de MIT Touch Lab encontró que el tamaño promedio de la punta de un dedo es de 8 a 10 mm, lo que hace de 10 mm x 10 mm un buen tamaño objetivo de contacto mínimo.
También considere la distancia relativa entre los objetivos táctiles. Si los elementos interactivos se ubican demasiado cerca entre sí, los usuarios móviles pueden tocar accidentalmente un botón equivocado con el dedo. Para evitar que eso suceda, asegúrese de ajustar correctamente el tamaño de los botones y también agregar suficiente espacio entre ellos.
Haga que las imágenes de los productos sean expandibles: muchos estudios han demostrado que las personas son predominantemente aprendices visuales. La mayoría de las personas son capaces de entender y comprender los conceptos mucho mejor cuando se entregan de esa manera, por lo que el uso de imágenes en el diseño web es una excelente manera de resumir los mensajes clave rápidamente.
Es esencial no solo proporcionar activos de alta calidad sino también hacerlos expandibles para que los usuarios puedan verlos fácilmente en detalle.
Las imágenes desempeñan un papel vital en los sitios web de comercio electrónico: las personas confían en las imágenes de los productos cuando toman una decisión. Es esencial no solo proporcionar activos de alta calidad sino también hacerlos expandibles para que los usuarios puedan verlos fácilmente en detalle. Expande la imagen completa en lugar de solo una parte de ella.
Tenga cuidado con las promociones y los anuncios: las promociones y los anuncios pueden eclipsar fácilmente el contenido. Si bien el mensaje del anuncio puede funcionar para algunos visitantes, en la mayoría de los casos los usuarios lo omiten y pasan a información más valiosa. Este fenómeno se conoce como ceguera de bandera.
Facilite la búsqueda de información de contacto: los usuarios móviles a menudo visitan sitios web para encontrar información de contacto. Dependiendo de la urgencia, los usuarios pueden llamar a una empresa, completar un formulario de contacto o buscar la dirección. Para los sitios web de comercio electrónico, el número de teléfono debe estar disponible en la pantalla de inicio.
03. Optimizar el contenido para escanear.
Es un hecho bien conocido que los usuarios no leen en línea; ellos escanean Cuando un visitante nuevo se acerca a una página web, lo primero que intentan hacer es escanear la página y dividir el contenido en partes de información digeribles. Es posible hacer esta tarea más fácil para los usuarios siguiendo algunas reglas simples.
Tenga en cuenta el orden en que proporciona el contenido en una página: lagente lee de arriba a abajo. Por eso es importante mantener las cosas importantes en la parte superior de una página y mover el resto hacia abajo de acuerdo con la jerarquía.
Reduzca el desorden: priorice el contenido sobre los elementos de la interfaz de usuario: reduzca las distracciones eliminando elementos funcionales y decorativos innecesarios. Esfuércese por crear un estilo minimalista porque al hacerlo, facilitará que el usuario se centre en la tarea.
Evite los bloques de texto largos sin imágenes: es muy probable que se omitan grandes franjas de contenido. Use encabezados, párrafos o viñetas para dividir el texto.
Ponga más peso visual en los elementos importantes: haga elementos importantes como los puntos focales de los mensajes clave para que los visitantes los vean de inmediato. Enfatice los elementos utilizando diferentes tamaños, espacios en blanco o colores vibrantes.
04. Crear navegación predecible.
Ayudar a los usuarios a navegar debe ser una prioridad para todos los sitios web. Después de todo, el contenido más convincente es inútil si la gente no puede encontrarlo. Es por eso que es importante invertir en el diseño de un sistema de navegación sólido, siguiendo algunos de los siguientes pasos.
Use patrones de navegación familiares: cuando se trata de crear un mecanismo de navegación para su sitio web, vale la pena recordar una regla simple: no reinventar la rueda: intente crear una experiencia familiar. Siempre es mejor confiar en los patrones de navegación con los que la mayoría de los usuarios están familiarizados (como la barra de navegación superior o el menú de hamburguesas) en lugar de crear su propio sistema de navegación único (por ejemplo, un sistema de navegación basado en gestos). Cuando crea una navegación familiar, ayuda a los usuarios a confiar en su experiencia previa cuando interactúan con su producto.
Ponga un límite al número total de opciones de navegación: No ponga demasiadas opciones en los menús. Un menú extenso puede funcionar bien para sitios de escritorio pero no se ajustan al diseño móvil. Dado que no todas las opciones de navegación estarán disponibles en un área visible de la pantalla, obligará a los usuarios móviles a desplazarse por una lista de opciones. Piense cómo puede presentar la menor cantidad de elementos de menú posibles. Lo ideal es que el menú que diseñe no tenga más de siete categorías distintas .
Priorice las opciones de navegación : Organice la navegación según la forma en que los usuarios trabajan con la funcionalidad. Las opciones de navegación más populares en un menú global deben ir en la parte superior y las acciones principales deben estar disponibles en un área visible de la pantalla.
Escribir etiquetas claras: cada opción de navegación debe tener una etiqueta clara y concisa. Evite la jerga: la navegación que diseñe no debe contener términos que sus visitantes no entiendan. Las etiquetas claras darán a los visitantes la capacidad de predecir el resultado de sus acciones.
Asegúrese de que los elementos interactivos se vean como elementos interactivos : al diseñar botones y enlaces, piense en cómo el diseño comunica el costo. ¿Cómo entienden los usuarios el elemento como un objeto interactivo? La forma en que se ve un objeto les dice a los usuarios cómo usarlo. Los elementos visuales que parecen enlaces o botones pero no son interactivos (como las palabras subrayadas que no son enlaces o cuadros rectangulares con palabras que no son botones) pueden confundir a los usuarios fácilmente.
Comunique la ubicación actual: “¿Dónde estoy?” Es una pregunta fundamental a la que los usuarios necesitan una respuesta para navegar de manera efectiva. Indique claramente la ubicación actual.
Proporcione una función de búsqueda: si diseña un sitio complejo con mucho contenido o características, debe asegurarse de proporcionar una barra de búsqueda para facilitar la navegación. Al implementar la funcionalidad de búsqueda, proporciona una ruta rápida a la información / características para los usuarios móviles que llegan al sitio con una pregunta específica en mente.
No oculte la opción de búsqueda en el menú. Debe ser una de las primeras cosas que los visitantes ven en sus páginas.
Facilite que los usuarios vuelvan a la página de inicio: los visitantes esperan que cuando toquen el logotipo en la parte superior de la página regresen a la página de inicio y se frustren si eso no funciona.
Mantenga a su usuario en una sola ventana: evite las llamadas a la acción que envían a un usuario a nuevas ventanas. Algunos usuarios tendrán problemas para cambiar entre ventanas en un navegador móvil y es posible que no puedan encontrar la página anterior.
05. Evita crear obstáculos
Las barricadas crean fricción y la fricción es el peor enemigo de la conversión. Afortunadamente, hay cosas simples que puedes hacer para evitarlos.
No interrumpa a los visitantes: las ventanas emergentes grandes son uno de los tipos más típicos de interrupción en la experiencia web. Durante mucho tiempo, dichos banners se dedicaron a los mensajes promocionales pero, recientemente, muchos sitios comenzaron a usar ventanas emergentes que distraen la atención para obtener permiso para usar cookies (GDPR). Independientemente de la información que desee mostrar a sus visitantes, asegúrese de que no distraiga la atención de la experiencia en general.
No haga que los usuarios abandonen su sitio web: identifique lugares en los viajes de los usuarios que puedan hacer que un usuario mire fuera de su sitio y luego proporcione contenido / características para mantenerlos en su sitio. Un campo de código de promoción en los sitios web de comercio electrónico es quizás el ejemplo más común que hace que los visitantes abandonen un sitio en un intento de encontrar el cupón. Es mucho mejor ofrecer algunos cupones directamente en el sitio para evitar este tipo de comportamiento.
Reglas 5 – No obligue a los usuarios a registrarse: los usuarios exigentes se registran antes de poder ver información o utilizar un servicio en línea que tiene un alto costo de interacción. Forzar el registro demasiado pronto puede hacer que los usuarios abandonen el sitio . Antes de proporcionar información personal, los visitantes desean tener una idea de lo que un sitio les ofrece.
Para crear un flujo de usuarios con las menores barreras para la conversión, los sitios móviles deben permitir a los visitantes explorar el contenido sin necesidad de registrarse. Para los sitios web de comercio electrónico, es esencial que los usuarios compren como invitado.
Facilite el cambio a otro dispositivo para continuar el viaje: no considere el uso de dispositivos móviles como experiencias independientes. Un usuario típico tiene varios dispositivos, como una computadora de escritorio, un teléfono móvil y una tableta, y espera tener una experiencia perfecta en todos esos dispositivos al usar su producto. Por ejemplo, muchas personas usan dispositivos móviles solo para buscar productos y luego cambian al escritorio para convertirlos. Los usuarios esperan continuar el viaje desde donde se detuvieron en el móvil.
Aquí hay algunas cosas que puede hacer para sincronizar el progreso actual de un usuario:
- Sincronizar lista de deseos, favoritos y cesta para una cuenta de usuario.
- Ofrezca una forma fácil de guardar o compartir información entre dispositivos para usuarios no registrados (como una opción para enviar el enlace al correo electrónico).
06. Diseño de formas eficientes.
El ingreso de formularios es una de las tareas más comunes en la web. Es difícil imaginar una experiencia que no requiera que los usuarios completen algún tipo de formulario. Debido a que es una práctica tan generalizada, la capacidad de completar un formulario sin dolor es crucial para mantener a un usuario comprometido. Aquí hay algunos consejos que pueden ayudarlo a mantener la fricción al mínimo:
Regla 6 – Minimice las entradas en los formularios: en términos generales, cuantos menos datos deba proporcionar un usuario, más disfrutará de su experiencia web. Estos indicadores le ayudarán a reducir las pulsaciones de teclado y las entradas que los usuarios deben realizar:
- Minimiza el número total de campos. Siempre mantenga los formularios lo más cortos y simples posible eliminando los campos innecesarios. Pregunte solo lo que realmente necesita saber.
- Utilice autocorrección, uso automático de mayúsculas y autocompletado para reducir la posibilidad de error del usuario.
- Evita los campos desplegables. Los menús desplegables ocultan las opciones y esto genera un costo de interacción adicional: los usuarios deben tocar dos veces para seleccionar la opción correcta. Si está utilizando un campo desplegable para una selección de opciones, considere reemplazarlo con botones de radio.
- Mover automáticamente al siguiente campo cuando un usuario presiona regresar.
- Minimice los errores de formulario con la validación en línea en tiempo real.
- Utilice la información existente para maximizar la conveniencia. Por ejemplo, puede rellenar previamente algunos campos, como la dirección de envío o la información de facturación para sus usuarios registrados.
- Piense en ofrecer mecanismos de entrada alternativos. Considere qué capacidades del dispositivo se pueden utilizar para proporcionar una mejor experiencia de usuario. Por ejemplo, en lugar de pedir a los usuarios que escriban los detalles de la tarjeta de crédito, proporcione la opción de usar la cámara del dispositivo para escanear la tarjeta e integrar sistemas como Apple Pay y Google Pay para habilitar el pago con un solo toque.
Proporcionar un teclado coincidente: los usuarios móviles aprecian los sitios web que proporcionan un teclado adecuado para el campo. Esta característica evita que tengan que realizar acciones adicionales. Por ejemplo, cuando los usuarios necesitan ingresar un número de teléfono, su sitio web debe mostrar el teclado numérico del 0 al 9.
Configure los tipos de entrada HTML para mostrar el teclado correcto. Aquí hay siete tipos de entrada relevantes para el diseño de formularios:
- «texto» muestra el teclado normal del dispositivo móvil.
- «correo electrónico» muestra el teclado normal y ‘@’ y ‘.com’.
- «tel» muestra el teclado numérico del 0 al 9.
- «número» muestra un teclado con números y símbolos.
- «fecha» muestra el selector de fecha del dispositivo móvil.
- «fecha y hora» muestra el selector de fecha y hora del dispositivo móvil.
- «mes» muestra el selector de mes y año del dispositivo móvil.
Permitir que los usuarios modifiquen el campo de ubicación: muchos sitios web detectan automáticamente la ubicación del usuario y utilizan esta información para luego proporcionar contenido relevante. Es esencial que los usuarios modifiquen la ubicación, ya que en algunos casos es posible que los usuarios deseen ver los resultados de un lugar diferente.
07. Esforzarse por crear una experiencia consistente.
La consistencia es uno de los pilares clave de la experiencia del usuario. El diseño consistente es un diseño fácil de usar: al enfocarse en crear un diseño consistente, usted crea un diseño más intuitivo. Siempre esfuércese por hacer que el sitio web sea tanto interno como externo.
Consistencia interna: cree una biblioteca consistente de recursos de diseño y utilícela para todas las páginas de su sitio web. Las fuentes, los botones, los enlaces, los iconos y todos los demás elementos de la interfaz de usuario deben ser coherentes en todo el sitio web para mantener la coherencia visual.
Consistencia externa: asegúrese de que el sitio web que usted diseña se vea como parte de una familia de productos más grande. Por ejemplo, si tiene una aplicación móvil, su sitio web móvil debe transmitir una sensación de familiaridad para los usuarios que la usan.
08. Construye tu mejor sitio móvil
Todos los puntos mencionados aquí pueden considerarse las mejores prácticas de la industria. Pero solo porque algo se llame «mejor práctica» no significa que sea la solución óptima para su sitio web. Por eso siempre es importante probar sus decisiones de diseño. Haga de las pruebas de usabilidad una parte obligatoria de su proceso de diseño y mejore la experiencia de manera regular.
