Prácticas recomendadas de diseño para la web móvil

Las interfaces web móviles requieren un tipo diferente de práctica de diseño, ya sea para sitios web móviles o aplicaciones móviles nativas. Con un tipo diferente de dispositivo y un tamaño de pantalla más notablemente diferente, nosotros, como diseñadores, debemos considerar un nuevo conjunto de mejores prácticas para el diseño.

Cualquier diseñador web puede estar notando el cierre de la brecha entre el diseñador web y el diseñador de sitios web móviles. Antes, muchos diseñadores elegían estar dentro de ese nicho, pero a medida que crece la web móvil, ¡los diseñadores web realmente no tenemos la opción de hacer diseño móvil o no! A menudo es un requisito para la mayoría de los proyectos, y en los próximos años ese hecho lo será aún más.

En este artículo, revisaremos las mejores prácticas básicas para diseñar para la web móvil y las principales diferencias en el diseño para la “web tradicional”.

La navegación es lo primero en lo que todos los diseñadores y desarrolladores web deben centrarse. Sin una navegación buena y utilizable, nuestros usuarios pueden confundirse, no ser capaces de encontrar lo que necesitan o desean, y terminarán saliendo de nuestros sitios para nunca volver.

Sin embargo, sabemos esto, ese hecho ha desfilado a lo largo de todas las generaciones anteriores de la web. Así como es importante planificar y diseñar una navegación efectiva para un sitio web regular, también es importante hacer lo mismo para una interfaz móvil.

Oobrang Pinoy

Si buscas una apariencia creativa, siéntete libre de mantenerla creativa. Al igual que con el diseño web tradicional, la navegación creativa aún debe ser utilizable, lo que significa que el usuario debe poder entender cómo usarla de inmediato y poder usarla fácilmente.

Para las versiones de sitios web móviles, hay algunas mejores prácticas para la navegación a tener en cuenta:

  • Mantenga los botones grandes con relleno y espaciado adicionales. Muchos dispositivos móviles tienen pantalla táctil y los botones más grandes facilitan el clic.
  • Mantenga la navegación simple. No inunde una barra de navegación con varias opciones; en su lugar, elija cinco o menos y cree subnavegación si es necesario. Esto no solo brinda más espacio para hacer que la navegación sea más grande para las pantallas táctiles, sino que también simplifica la navegación para aquellos que pueden tener otras formas de entrada.
  • La navegación vertical es mucho más una tendencia y más fácil en muchos dispositivos de entrada móviles. Si utiliza algún tipo de navegación horizontal, manténgala al mínimo.
  • Use el diseño de “estilo de botón” sobre enlaces de texto estándar para la navegación.

Elementos más cortos (espacio vertical)

Una pantalla más pequeña significa ahorrar espacio de forma práctica. Dado que el desplazamiento horizontal ni siquiera es posible en muchos navegadores móviles, y mucho menos no es fácil de usar para todo lo demás que lo admite, debe crear diseños flexibles que eviten el desplazamiento horizontal a toda costa. Con el desplazamiento horizontal fuera de discusión, nuestra forma principal de ver contenido ahora se convierte en desplazamiento vertical.

Línea de Oro

Nadie quiere desplazarse indefinidamente para llegar a un contenido. Las páginas súper largas simplemente no son una opción con el diseño móvil, y además de eso, cuanto más hay en una página, más hay para descargar en un dispositivo que puede no ser capaz de manejar páginas grandes tan bien. Debido a esto, es esencial mantener el desplazamiento vertical al mínimo, con una variedad de técnicas:

  • Divida el contenido más largo en secciones y varias páginas si es necesario.
  • Use cosas como acordeones para dividir el contenido y deje que el usuario acorte y amplíe según sea necesario.
  • Cuanto más pequeña sea la pantalla, acorta los elementos no esenciales. Tomemos, por ejemplo, el diseño de mi cartera, KaylaKnight.com, a medida que el tamaño del navegador se vuelve más delgado, cambio a un fondo con una sección central más corta, lo que ocuparía un espacio innecesario en una pantalla más pequeña.
  • Utilice la navegación vertical que conduce a más subnavegación. Restringir a lo que el usuario está navegando a través de diferentes pantallas más cortas.

Diseño de respuesta

Cuando se trata de diseño móvil, a menudo viene a la mente el diseño web receptivo. Tenga un diseño que sea completamente flexible mientras implementa otras prácticas que ayuden a los usuarios móviles o de otra manera, como ahorrar ancho de banda y tamaños de archivo para dispositivos menores, cambiar los tamaños de imagen y tener alternativas para ciertas funciones que pueden no ser compatibles con todos los dispositivos.

Owltastic

Si bien el diseño receptivo completo lleva tiempo y existen innumerables prácticas que lo acompañan, cuando se trata de diseño móvil, los diseños deben ser, al menos, parcialmente receptivos. Como mínimo, los diseños deben ser flexibles. Piense en cómo los usuarios de iPad pueden cambiar en un instante a la vista horizontal y vertical; piense en cómo la mayoría de todos los demás dispositivos móviles ahora también pueden hacer eso.

Más allá de cuántos usuarios pueden cambiar de orientación en un instante, la creación de un diseño flexible y, en el mejor de los casos, receptivo, permitirá la gran variedad de dispositivos móviles disponibles y los tamaños de pantalla disponibles. Con un diseño flexible, es posible que deba diseñar algunas interfaces para varios tamaños de pantalla, pero en su mayor parte, el diseño debe transformarse según el tamaño de la pantalla.

La creación de un diseño web receptivo desde el principio ayudará a evitar la necesidad de un sinfín de diseños móviles con píxeles perfectos.

Iconos útiles

Una tendencia importante para el diseño móvil que también puede considerarse una gran práctica de diseño es el uso de íconos. Esto es especialmente útil para la navegación principal, pero los íconos también pueden ser de gran utilidad para otros tipos de enlaces, o incluso como simples ayudantes visuales.

Feria Estatal de Iowa

Al igual que con las aplicaciones móviles nativas, los íconos son una parte estándar de la interfaz. Recrear esto en un sitio web móvil puede crear coherencia, así como una interfaz más fácil de usar. Es mucho más fácil hacer clic en los íconos que en los enlaces de texto pequeños, y el aspecto visual puede significar una navegación que requiere menos pensamiento, lo cual es excelente para los sitios móviles que deben usar una gran cantidad de subnavegación para mantener una interfaz simple.

Imágenes limitadas dentro del contenido

Para pantallas increíblemente pequeñas, algunas imágenes deben recortarse por completo. Cualquier cosa que aumente drásticamente el desplazamiento vertical puede ser un problema, y ​​más aún para los dispositivos móviles más lentos donde simplemente descargar imágenes en exceso es un problema suficiente. Para el diseño móvil, mantenga el uso de imágenes pequeño y solo utilícelo cuando sea necesario.

Vonage

Seguramente, esto puede ser algo complicado de implementar. Quizás las imágenes innecesarias dentro del contenido pueden tener cierta clase y, por lo tanto, pueden ocultarse si una pantalla alcanza un tamaño lo suficientemente pequeño. En cuanto a los tiempos de descarga, la única solución realmente es crear imágenes receptivas que tengan un tamaño de archivo más pequeño y que se detecten a través de JavaScript. Hay muchas soluciones que se pueden investigar, pero quizás la mejor manera de limitar las imágenes donde sea necesario es considerar cuidadosamente cuándo hay un exceso de imágenes, sin importar el tamaño de pantalla en el que se esté viendo el contenido.

No tengas miedo de los espacios en blanco

Al igual que con el diseño en una pantalla de tamaño estándar, también se necesitan espacios en blanco en el diseño móvil. De hecho, es posible que se necesite más a medida que el tamaño de la pantalla se vuelve más pequeño y la navegación puede volverse más difícil de manejar. Sin espacios en blanco, en una pantalla más pequeña, el contenido podría ser más difícil de leer, ¡y cualquier cosa mezclada no es una buena idea!

carlos creativo

Sin embargo, puede ser un instinto inicial para cada diseñador que cuanto más pequeña sea la pantalla, más eficiente en el uso del espacio deberíamos ser. Tenga en cuenta que con un diseño de interfaz adecuado y bien planificado, los espacios en blanco se pueden usar para aumentar la usabilidad y aún así no sacrificar otras consideraciones móviles, como el desplazamiento vertical excesivo.

Conclusión

Si bien muchos de nuestros principios básicos de diseño pueden seguir siendo los mismos, cuando se trata de diseñar para dispositivos más pequeños, y posiblemente también para dispositivos menos capaces, debemos considerar un conjunto completamente nuevo de mejores prácticas de diseño. La interfaz del diseño de un sitio web móvil debe ser drásticamente diferente a la de un diseño de tamaño estándar, y puede tomar una curva de aprendizaje completamente nueva para aprender qué funciona mejor para pantallas más pequeñas.

¿Qué consejos adicionales tienes para crear interfaces móviles? ¿Cuáles son algunas de las diferencias? ¿Hay alguna práctica de diseño que deba permanecer igual sin importar el dispositivo?

0 Shares:
Te Recomendamos