Consejos esenciales para convertir un sitio de escritorio en un dispositivo móvil
Dado que los dispositivos móviles ya superaron al escritorio en popularidad, es necesario que los diseñadores diseñen teniendo en cuenta los dispositivos móviles. Mobile-first es popular como técnica porque es más fácil escalar el dispositivo móvil, que bajar el escritorio.
Sin embargo, a veces la elección se toma de sus manos. Comúnmente, los diseñadores se adaptan a los diseños de escritorio existentes para dispositivos móviles. Y debido a que algunos elementos no se traducen bien, es esencial que los diseñadores entiendan qué ajustes específicos realizar al diseñar para la pantalla pequeña. Así es cómo…
Abrazar el minimalismo
El minimalismo ha sido popular en el diseño web desde hace años, simplemente porque a menudo ayuda a la usabilidad y se ve bien también. Sin embargo, cuando se trata de dispositivos móviles, el minimalismo es una opción menos estética, ya que se basa exclusivamente en la usabilidad.
De acuerdo con Nielsen Norman Group, características de corte es una necesidad en diseño móvil. Entonces, ¿qué significa esto para los diseñadores que intentan crear un sitio móvil a partir de uno de escritorio ya establecido?
Significa eliminar lo que no es esencial para la experiencia del usuario móvil. Por ejemplo, si está realizando la transición de una tienda de comercio electrónico de escritorio a móvil, mantenga la misma cantidad de productos en el sitio móvil; solo tiene sentido, porque los compradores quieren poder encontrar todo lo que una tienda en línea tiene para ofrecer, al igual que la tienda en línea quiere mostrar todo lo que tiene que vender a los visitantes de su sitio. Sin embargo, un gran carrusel publicitario para las últimas ofertas podría moderarse un poco.
Ocultar navegación
Una de las características más comunes en las pantallas móviles es el menú de hamburguesas, ese pequeño icono casi omnipresente con tres segmentos de líneas horizontales apilados uno encima del otro. Este es otro caso perfecto en el que el tamaño de pantalla más pequeño del móvil obliga a los diseñadores a cambiar elementos que se espera que se vean de cierta manera en los escritorios.
A pesar de la opinión dividida sobre la presencia del menú de hamburguesas, es bastante omnipresente en las pantallas móviles simplemente porque esta es la mejor solución que los diseñadores han encontrado para reducir el tamaño del menú de navegación de los escritorios a los dispositivos móviles.
Visite el sitio web del famoso chef Bobby Flay para su restaurante de cadena llamado Bobby's Burger Palace. Como era de esperar, el menú de navegación se distribuye horizontalmente en la parte superior de la página de inicio, pero cuando se accede a la versión móvil del sitio, el menú horizontal se va. En su lugar está el menú de hamburguesas limpio y ordenado, justo en el mismo lugar de la pantalla donde el menú horizontal más largo estaría en la versión de escritorio.
Walmart también hace uso del menú de hamburguesas en su transición de diseño de escritorio a dispositivo móvil.
En su sitio de escritorio, Walmart muestra la navegación desplegable "Todos los departamentos" que abre una segunda capa de opciones de navegación, todas en la misma página. En el sitio móvil, sin embargo, esa característica no es posible debido al tamaño de pantalla pequeña, por lo que se ha diseñado un reemplazo: la segunda capa de opciones de navegación se encuentra en el menú de hamburguesas y abren más y más opciones de navegación con cada selección Casi como pasar las páginas de un libro de izquierda a derecha.
Cambiar a una sola columna
De acuerdo con el hecho de que simplificar es mejor cuando se trata de diseño móvil, le irá bien a sus clientes si recuerda que el diseño de una sola columna es más limpio y más fácil para que sus usuarios operen en una pantalla más pequeña. El gran beneficio de un diseño de una sola columna es que se elimina el desplazamiento horizontal, como si tuviera mucho texto en una página y deseaba que sus lectores pasaran la pantalla de izquierda a derecha para seguir leyendo.
Cuando introduce un diseño de una sola columna, simplifica la experiencia del usuario, animando a los usuarios a simplemente desplazarse hacia abajo para leer o hacer clic en el enlace que desean ver en una página nueva. Esto es mejor que forzarlos a deslizar de izquierda a derecha, lo que es más difícil de hacer que simplemente desplazarse hacia abajo, especialmente cuando considera la posición del pulgar de su usuario en relación con la forma en que sostiene un dispositivo móvil.
El sitio web de escritorio del periódico The New York Times presenta múltiples columnas. Es fácil de usar en un escritorio, cuando los usuarios de su cliente pueden simplemente mover el cursor de izquierda a derecha sin problemas en un panel táctil o mouse.
Por supuesto, el sitio para dispositivos móviles de The New York Times comprende cómo deben cambiar las cosas en pantallas más pequeñas, por lo que presenta un diseño limpio y eficiente de una sola columna que aumenta la experiencia del usuario, ya que los lectores pueden desplazarse sin esfuerzo para obtener más contenido con sus pulgares .
Consideraciones móviles
Debido a la influencia de los dispositivos móviles en los usuarios actuales, los diseñadores siempre deben diseñar para dispositivos móviles. Sin embargo, no es lo suficientemente bueno para simplemente diseñar un sitio móvil junto con el sitio de escritorio y ¡llamar a ese diseño para móvil!
Diseñar para dispositivos móviles significa realmente tener en cuenta los ajustes específicos que deberá realizar para el sitio de su cliente cuando diseña para la pantalla pequeña. Esto incluye todo lo que mencionamos anteriormente, desde el minimalismo en el diseño hasta la ocultación de la barra de navegación para pasar a un diseño de una sola columna.
Al adoptar estas mejores prácticas en su conjunto de habilidades, creará sitios que se ajusten perfectamente a los dispositivos móviles.