Cómo rediseñar un sitio web para que luzca increíble en dispositivos móviles
Publicado: 2016-01-24[ Proto .io es una herramienta de creación de prototipos de aplicaciones móviles utilizada por emprendedores y empresas emergentes para crear prototipos realistas completamente interactivos que se ven y se sienten como aplicaciones reales.]
Hace quince años, rediseñar un sitio web era una tarea mucho más sencilla: simplemente decidía cómo se vería su experiencia de escritorio, organizaba su contenido en consecuencia y creaba el sitio web. Increíblemente, algunos sitios web todavía carecen de una verdadera experiencia móvil, ya sea que se trate de un rediseño del sitio web por separado o de un diseño receptivo bien planificado.
A veces, el diseño puede parecer un juego interminable para ponerse al día, pero estos expertos en aplicaciones móviles pueden ayudarlo a guiarlo a través del proceso de rediseño de su experiencia web para que se vea genial en cualquier dispositivo, computadora de escritorio o dispositivo móvil.
Cómo rediseñar un sitio web para una experiencia móvil atractiva
Handsome (@HandsomeMade) es una empresa de diseño y tecnología cuyos valores fundamentales incluyen "pensamiento centrado en el ser humano en todos los niveles" y "software deliberadamente hermoso y encantador". El director creativo Brandon Termini y el director técnico Alex Zub explican cómo aplican esos principios al rediseño de sitios web móviles:
Según Termini, la clave para el rediseño de un sitio web de Handsome es adoptar un "enfoque de diseño móvil primero", haciendo que la experiencia del usuario sea lo más elegante y fácil de usar posible. “Una forma en que aplicamos el diseño móvil primero es comenzar con tamaños de pantalla más pequeños, lo que nos obliga a simplificar la interfaz tanto como sea posible y solo poner lo que realmente importa en la pantalla”.
Zub agrega: “Utilizar tecnologías y mejores prácticas, como el diseño receptivo y el diseño adaptativo, con su implementación técnica compatible, es la clave. Para muchos productos, tiene sentido ceñirse a los sistemas de cuadrícula receptivos, lo que simplifica el esfuerzo necesario para construirlo, al mismo tiempo que mantiene la excelente apariencia en todo tipo de pantallas”.
Cómo rediseñar un sitio web para que se vea hermoso en dispositivos móviles
Le pedimos a Termini que compartiera algunas de sus mejores prácticas de diseño visual. “Hay cientos de cosas que hacer y no hacer que hemos recopilado a lo largo de los años”, dice. Estas son las tres mejores prácticas principales que implementa en el guapo:
- Piense detenidamente en su jerarquía de diseño. “Un diseño exitoso significa que un usuario debería poder guiarlo a través de lo que ve/lee en el orden previsto. El buen uso del espacio en blanco, la teoría del color, la tipografía, etc., juegan un papel fundamental en esto”.
- Usa el color apropiadamente. “Elija colores que sean apropiados para su marca y asegúrese de que armonicen bien juntos. Use un color de héroe que asocie con elementos importantes de la interfaz de usuario, como los botones de llamada a la acción. Asegúrate de usar el color con moderación en los lugares correctos para que tu usuario fluya a través de la interfaz y no se atasque”.
- La tipografía debe ser agradable a la vista. “Asegúrese de que su tipografía sea apropiada para la marca y legible en los dispositivos para los que está diseñando, y use fuentes ornamentales con moderación”.
Probar el rediseño de su sitio web móvil
Por supuesto, una vez que haya creado el sitio móvil, debe ponerlo a prueba para garantizar una excelente experiencia de usuario. Termini dice: “Las pruebas frecuentes y los ajustes son fundamentales. Comience a probar tan pronto como muestre los primeros bocetos dibujados a mano con usuarios potenciales y continúe probando a lo largo de su proceso, hasta llegar a los sistemas diseñados completamente construidos. Estar configurado para poder escuchar, sintetizar e iterar los comentarios es muy importante para el éxito de cualquier producto”.
Recomendado para ti:
¿Qué significa la disposición contra la especulación para las nuevas empresas indias?
Cómo las empresas emergentes de Edtech están ayudando a la fuerza laboral de la India a mejorar y prepararse para el futuro...
Acciones tecnológicas de la nueva era esta semana: los problemas de Zomato continúan, EaseMyTrip publica...
Startups indias toman atajos en busca de financiación
La plataforma de marketing digital Logicserve obtiene fondos de INR 80 Cr, cambia de marca como LS Dig...
Informe advierte sobre un escrutinio regulatorio renovado en Lendingtech Space
Zub agrega: “La garantía de calidad es una parte esencial de la creación de un producto que se utiliza en diferentes tipos de dispositivos. Y dado que es prácticamente imposible tener todos los dispositivos posibles en la oficina, utilizamos servicios en línea que brindan acceso a docenas de dispositivos 'virtuales' en la nube, automatizándolos tanto como sea posible. Con las inversiones de automatización adecuadas, es fácil y rápido realizar pruebas entre dispositivos en el futuro”.
Queríamos aprender aún más sobre cómo probar y controlar el control de calidad del rediseño de un sitio web móvil. Para eso, escuchamos a Simon Papineau, director ejecutivo de Crowdsourced Testing(@crowdsourcingqa). Papineau creó Crowdsourced Testing para abordar algunos de los puntos débiles que había encontrado en su experiencia probando numerosas aplicaciones móviles, sitios web, juegos y más.
Lo que funciona en el escritorio no siempre funciona en el móvil, y viceversa
Dice Papineau, “Lo único que los desarrolladores tienden a olvidar es que no necesita la misma profundidad o el mismo contenido en su sitio móvil que mostraría en su sitio de escritorio. La intención, la mentalidad y el objetivo del usuario móvil son completamente diferentes. Los visitantes no pasarán 20 minutos en su teléfono leyendo sobre la historia de su empresa y sus letras pequeñas.
En su lugar, dales lo que quieren de la manera más directa y rápida posible. Si se trata de su información de contacto, colóquela directamente en la página de inicio sin ninguna complicación adicional”.
Uno de los desafíos, dice Papineau, es garantizar que el rediseño de su sitio web móvil se vea bien y funcione bien en una multitud de dispositivos: “Probar para ver si los sitios web responden puede llevar mucho tiempo y ser costoso. Lo mejor que puede hacer una empresa es centrarse en los 15 o 20 dispositivos principales que representan la mayoría de sus visitas. Siempre habrá un dispositivo móvil en el que el sitio no se vea perfecto. Pero si ese dispositivo representa el 0,05 % de sus visitantes, probablemente no valga la pena el esfuerzo adicional de desarrollo”.
Cómo rediseñar un sitio web utilizando un diseño receptivo
Bob Bentz es presidente de ATS Mobile (@atsMobile), una agencia de marketing móvil de servicio completo que supervisa el rediseño de sitios web para clientes de múltiples industrias. A Bentz le apasiona asegurarse de que la experiencia de un sitio web se vea y se sienta tan bien en un dispositivo móvil como en un monitor de escritorio de alta resolución, y una de las principales formas en que ATS Mobile logra eso para sus clientes es mediante el uso de un diseño receptivo.
¿Por qué Diseño Responsivo? una cartilla
“El diseño web receptivo (RWD), más comúnmente diseñado con HTML5, será la opción probable en casi todas las nuevas construcciones web móviles”, dice Bentz. “También se puede diseñar usando CSS3 y Javascript. El diseño receptivo tiene la sorprendente ventaja de ser muy flexible, ya que cambia de forma fluida para adaptarse a cualquier dispositivo. RWD funciona enviando el mismo código, independientemente del dispositivo, y luego reorganizándolo en el lado del cliente, lo que permite que se muestre la misma página web en cualquier dispositivo”.
Para ver el diseño receptivo en acción, abra esta publicación de blog en una pantalla de escritorio, si aún no lo ha hecho (¡esperaremos!). Notará que hay varios tamaños de ventana en los que la interfaz de usuario se "rompe" y se reorganiza, de modo que la página se ve diferente según el dispositivo que use (y el tamaño de la ventana dentro de ese dispositivo).
Entonces, ¿cómo funciona exactamente el diseño receptivo y por qué debería usarlo para el rediseño de su sitio web? “El rediseño de un sitio web receptivo sirve el mismo código HTML en la misma URL, independientemente de si el dispositivo del usuario es una computadora de escritorio, una tableta, un phablet, un teléfono inteligente, un teléfono con funciones o un dispositivo portátil (como el Apple Watch)”, dice Bentz. “También puede responder de manera diferente según el tamaño de la pantalla del sitio. Los desarrolladores pueden decidir qué gráficos y contenido se usarán para los usuarios de dispositivos móviles y tabletas. El texto y las imágenes se pueden ajustar en función de cualquier navegador o tamaño de pantalla”.
Con un diseño receptivo, te aseguras de no realizar una nueva actualización cada vez que algo cambie en el status quo del dispositivo móvil. “Cuando un nuevo dispositivo llega al mercado y accede a su sitio web, no se requiere programación adicional si el sitio se basa en un diseño receptivo”, dice Bentz. “Sin embargo, lo más importante es que el diseño receptivo es la mejor práctica de diseño recomendada por Google. Para muchos sitios web, RWD logra un equilibrio razonable entre compatibilidad con dispositivos móviles y facilidad de implementación”.
Mejores prácticas en diseño visual receptivo
Según Bentz, tener en cuenta las siguientes mejores prácticas ayudará a que el rediseño de su sitio web receptivo se vea y funcione de la mejor manera:
- Un encabezado sencillo y llamativo. “El encabezado y la cabecera deben ser simples para no quitar los puntos clave de venta. El logotipo es la imagen de marca clave; un logotipo demasiado horizontal puede no verse muy bien en pantallas verticales más pequeñas”.
- Navegación fácil de usar. “La navegación es mucho más complicada en una pantalla pequeña. A menudo, los diseñadores usarán un botón de navegación que se muestra con tres líneas horizontales, generalmente en la parte superior derecha del sitio. Esto se llama "menú de hamburguesas", porque parece una hamburguesa rodeada por el panecillo. Algunos sitios usan una navegación del lado izquierdo que puede expandirse hacia afuera para cubrir la mayor parte de la pantalla”.
- Un montón de imágenes. “Es difícil incluir demasiadas imágenes en la pantalla del móvil, pero las palabras pueden abrumar rápidamente la interfaz de usuario. Por lo tanto, los diseñadores a menudo usan carruseles de imágenes que permiten a los usuarios deslizarse a través de múltiples imágenes de productos en lugar de saturar la pantalla con copias”.
- Uso inteligente del pie de página. “Los consumidores están acostumbrados a utilizar el pie de página como herramienta de navegación, y no ocupa un espacio tan valioso como el encabezado de la parte superior de la página. También debe incluir el enlace muy importante "Contáctenos".
Un magnífico rediseño de sitio web comienza con un magnífico prototipo
Aprender a rediseñar un sitio web para dispositivos móviles no es poca cosa, pero contar con una potente herramienta de creación rápida de prototipos que le ayude a probar la experiencia marca la mayor diferencia. Después de recortar la copia, reducir los elementos y descubrir su esquema de navegación, puede obtener rápidamente comentarios de los usuarios sobre si el rediseño de su sitio web móvil todavía es útil e intuitivo. Luego, como sugirió Termini, siga iterando hasta que tenga un prototipo del que esté realmente orgulloso.