Dos errores catastróficos de diseño web pueden acabar con el rendimiento de cualquier sitio web. Un sitio web requiere una importante inversión de tiempo y dinero. Por lo tanto, debe evitar dos errores particulares para ofrecer un ROI positivo: un diseño web receptivo y una velocidad de página rápida. Además, si lees hasta el final, arrojo un error adicional y cómo evitarlo.
Los errores críticos de diseño web se dividen en dos grupos
Los errores críticos se definen como aquellos errores que harán que un usuario rebote o salga rápidamente. Muchos errores pueden afectar la tasa de rebote, las páginas por sesión y el tiempo de permanencia. Sin embargo, hay algunos que tienen un efecto desproporcionado. Antes de firmar cualquier diseño, debe asegurarse de haberlos verificado.
El sitio web es verdaderamente receptivo
En una búsqueda rápida de temas de WordPress, o cualquier otro diseño web popular y sitios de construcción, encontrará cientos de temas que afirman ser receptivos. Probablemente todos lo sean hasta cierto punto, pero la pregunta es, ¿son realmente lo suficientemente receptivos para manejar las posibles formas en que nuestros usuarios pueden interactuar con nuestro sitio?
Un diseño verdaderamente receptivo funciona en todos los formatos que utilizan nuestros visitantes
Este es el primer error crítico de diseño web que debe evitar. Es de vital importancia ver su sitio en un entorno en tiempo real para determinar si el diseño o el tema realmente responde a todas las formas en que un usuario puede ver e interactuar con nuestro contenido.
El sesgo del diseño de escritorio
La razón por la que esto es importante es que existe un sesgo inherente en la forma en que diseñamos. Cada empresa de diseño web que conozco diseña en el escritorio. Esto no es necesariamente incorrecto, pero introduce un sesgo. Estamos viendo nuestro trabajo solo en el escritorio o como una versión de un dispositivo móvil, generalmente en una alineación vertical. Pocos, si alguno, consideran una vista de teléfono horizontal, por ejemplo.
El móvil ha superado al escritorio en el uso de dispositivos
Esto es importante porque, como porcentaje del uso de dispositivos, los dispositivos móviles se han convertido en el dispositivo más utilizado en todo el mundo.1 2
Por lo tanto, no puede darse el lujo de ignorarlo o asumir que tiene el mismo aspecto en una versión de escritorio simulada que en un dispositivo móvil. Por eso es muy importante tener en cuenta el sesgo del diseño, porque algo que podría verse bien en un monitor podría no funcionar en la pantalla.
Cómo evitar el sesgo del escritorio
Hay tres formas de evitar el sesgo del escritorio.
1. Diseñe primero el dispositivo móvil
Este no es el enfoque tradicional, pero la mejor manera de garantizar que funcione bien en dispositivos móviles es diseñarlo en la configuración móvil. Luego, vea cómo se ve ese diseño en el modo de escritorio. A continuación se muestra un ejemplo de uso de nuestro sitio.
También querrá verlo en posición horizontal. Sin embargo, este ejemplo debería darle una idea de cómo se podría hacer.
2. Construcción personalizada
Esta opción evita la necesidad de temas y el bagaje que los acompaña. Cubriremos eso en la siguiente sección. Este es nuestro método preferido porque minimiza el exceso de código y no depende de un tema para realizar el cambio de tamaño. Está construido desde el principio.
Esta opción requiere más conocimiento y experiencia en el código, pero generalmente brinda la mejor experiencia en múltiples pantallas grandes (HD, computadora portátil, monitor pequeño) y pequeñas (tableta, móvil en ambas orientaciones).
3. Dos sitios
Esto requiere que cree una versión AMP de su sitio. AMP son las siglas de Accelerated Mobile Pages. Google y otros motores de búsqueda introdujeron AMP aproximadamente en 2016. AMP es una plataforma HTML de código abierto diseñada para acelerar el rendimiento móvil.
AMP es una versión ligera y simplificada de un sitio de escritorio. Las organizaciones de noticias proporcionan el mejor ejemplo:
Como puede ver, no se trata solo de una versión reducida, sino de un diseño completamente independiente. Puede ser útil para páginas dinámicas que dependen de una cantidad significativa de copia nueva. Una vez que se construyen las plantillas, los mismos datos (contenido) y serán atendidos en dos formatos dependiendo del uso del dispositivo.
Velocidad de página lenta
El compañero constante de la capacidad de respuesta es la velocidad de la página. Desafortunadamente, están intrínsecamente vinculados. La velocidad lenta de la página puede causar estragos en su tasa de rebote y conversión.
Un estudio realizado por Pingdom mostró el impacto que tiene la velocidad de la página, el tiempo de carga, la tasa de rebote y la conversión.
Como puede ver, hay un aumento dramático en el rebote y una disminución en la conversión después de 3 segundos. Esto es significativamente menos indulgente que el umbral de 4,5 segundos que Google publicó en 2016 3.
Ejecute una prueba de velocidad en su sitio
Antes de crear un diseño web, ejecute la velocidad de la página de su desarrollador o página utilizando el tema que se recomienda. Puede utilizar Google Pagespeed Insights o cualquier otra herramienta. Google es el evaluador más difícil, por lo que los recomendamos. Siempre es aconsejable ver si el diseñador es realmente bueno o si el tema es tan rápido como dicen. Si son lentos, entonces casi puede garantizar que su sitio será lento.
Cómo evitar la velocidad de página lenta
Estas son tres formas de evitar la velocidad de página lenta.
1. Construcción personalizada
Como mencionamos anteriormente, un diseño web personalizado evita el problema del exceso de código. La hinchazón de código se define como el código extra no utilizado que se carga cuando se crea una página. Cada página de un tema incluye todas sus características potenciales, ya sea que use esa característica o no. El navegador lee cada línea, ya sea que la use o no, lo que inevitablemente ralentiza las cosas.
Una compilación personalizada permite una experiencia perfecta desde el escritorio hasta el dispositivo móvil. Por lo tanto, no es tan drástico como un cambio como mostramos con AMP.
2. Dos sitios
AMP se creó esencialmente para resolver este problema. AMP solo tiene una cantidad justa pero limitada de funciones y ha eliminado el resto. Cuando escribe un sitio en HTML AMP, debe saber qué está y qué no está disponible. Sin duda, AMP será más rápido, pero probablemente no brindará la misma experiencia que la versión de escritorio.
3. Tema simplificado
Para ser justos, hay complementos disponibles para sitios receptivos basados en temas que los hacen más rápidos. Sin embargo, nunca alcanzan los mismos niveles de rendimiento que una compilación personalizada o un sitio AMP.
Una forma de acercarse es eliminar el código del tema que no usa. Esto requiere un desarrollador o conocimientos avanzados de codificación. Puede romper fácilmente un tema si está seguro de lo que está haciendo.
Resumen de cómo evitar estos dos errores de diseño web
Existe una compensación que, en última instancia, debe hacerse entre costo y rendimiento. La forma más sencilla y sencilla es el enfoque CMS (sistema de gestión de contenido, por ejemplo, WordPress) basado en temas. Probablemente terminará con un sitio de escritorio de excelente apariencia, pero tendrá un rendimiento de sitio de nivel bajo a medio en dispositivos móviles. Dependiendo de tu audiencia, eso podría estar bien.
Sin embargo, si va a invertir dinero en el desarrollo de un sitio secundario de AMP o en un tema simplificado, es probable que su dinero se gaste mejor en una compilación personalizada.
Error de bonificación: no saber lo que quieren sus usuarios
En el nivel más básico, un sitio web es un vehículo de comunicación. Estamos proporcionando información a nuestros visitantes / usuarios para motivarlos a tomar alguna acción. Para motivarlos, necesitamos tener una comprensión detallada de la información que necesitan. Si esto suena mucho a marketing, es porque lo es.
El factor más importante de un sitio web
El atributo de diseño web número uno y más importante para los usuarios es “Fácil de encontrar lo que quiero”.
Esta característica es casi 8 veces más importante que cualquier otro aspecto del diseño web.
La razón por la que le di este punto extra es que los dos primeros pueden tener un efecto profundo en el tercero. Un sitio lento y con poca capacidad de respuesta es exactamente lo contrario de facilitar su búsqueda.
¿Cómo saber lo que quieren sus usuarios?
La belleza de esta era de la información es que nuestra gente nos dice constantemente lo que quiere; solo tenemos que escuchar. Pero la clave es saber a quién debemos escuchar. Hay un proceso sobre cómo hacer esto. Este no es un complemento descarado para promocionar nuestro sitio, pero es un tema demasiado largo para cubrirlo en una publicación. Cubrimos la estrategia de marketing en nuestro sitio con gran detalle. Nos centramos más en las pequeñas empresas, pero el proceso funciona independientemente del tamaño.
Resumen
En resumen, los mejores pasos a seguir para evitar estos tres errores críticos de diseño web son
Asegúrese de tener un diseño verdaderamente receptivo que funcione bien en cualquier dispositivo. Decida qué compensaciones adoptar en relación con el rendimiento de la velocidad de la página y el costo. Sepa lo que quieren sus visitantes y facilíteles encontrarlo. (función (d, s, id) {var js, fjs = d.getElementsByTagName (s)[0] ; if (d.getElementById (id)) return; js = d.createElement (s); js.id = id; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”; fjs.parentNode.insertBefore (js, fjs); } (documento, ‘script’, ‘facebook-jssdk’));
Source: http://www.smbceo.com/2021/01/13/2-critical-web-design-errors-how-to-avoid-them/
