Errores en el diseño y la usabilidad: estos son los defectos debido a que los visitantes critican el sitio, no quieren comprar nada, darse de baja y acudir a la competencia. Muy a menudo, estos errores se relacionan con fallas técnicas, lógica, navegación, diseño, marketing y contenido en el sitio.
En este artículo, veremos ejemplos de errores importantes de UX y destacaremos sesenta problemas comunes, cuya corrección garantiza un aumento en la conversión.
Si tiene dudas de que lo necesita, lea la historia de la disgustada Vasya. Cuenta cómo, debido a un error, la tienda en línea perdió un cliente habitual.
Cómo Vasya eligió un micrófono en una tienda en línea con poca usabilidad
El nombre de nuestro amigo es Vasya. Es un youtuber principiante que necesitaba un micrófono para grabar videos. Su futuro micrófono debe tener tres características: bajo precio, sonido claro y demanda de Avito.
El último punto es especialmente importante, porque con la actuación de voz puede no funcionar y nuestro YouTube no es reacio a devolver la mayor parte del dinero invertido. Los requisitos están formulados y Vasya va detrás del micrófono al sitio web de una tienda en línea de confianza.
Debido a la cuidadosa navegación, Vasya no estaba perdida y rápidamente encontró la categoría "Micrófonos".
Cuando Vasya abrió la categoría "Micrófonos", inmediatamente se encontró con el primer problema en forma de un filtro rubricador mal concebido. Este filtro no es adecuado para principiantes, ya que requiere una comprensión del tema del micrófono. Es difícil sin esto:
Como no había pistas en el rubricador, Vasya filtró los productos de acuerdo con su propósito y seleccionó micrófonos de estudio. La lógica aquí es esta: si el estudio es de alta calidad. Todo lo demás es secundario e incomprensible.
En la sección "Micrófonos", Vasya se encontró con un filtro complejo, que un principiante no puede configurar correctamente. Si conoce un tema, no puede elegir un micrófono adecuado.
Bajo el título de micrófonos de estudio, Vasya organizó los productos a precios crecientes y optó por el micrófono Superlux HO8 por $ 50. Esta es la opción más económica de los micrófonos de estudio disponibles y, según las opiniones de los clientes, vale la pena. Eso es lo que necesitas para un youtuber principiante. Vasya realiza la compra y ya ha acordado con el cliente expresar el primer video.
La elección de Vasya es un micrófono Superlux HO8 de $ 50.
Vasya espera el paquete, imprime su micrófono, lo conecta a la computadora y recibe un sonido desagradable. Se trata de poder fantasma, sin el cual el Superlux HO8 no puede funcionar completamente. Se da una línea a este momento en la tarjeta del producto, que Vasya perdió debido a la inexperiencia.
Una fuente de alimentación fantasma es un elemento adicional sin el cual el micrófono de estudio Superlux HO8 no sonará normalmente. En la tarjeta del producto, este momento está escrito en una línea, que un principiante no preparado puede perderse fácilmente.
A continuación, Vasya comenzó a recopilar información de forma independiente sobre el micrófono seleccionado y descubrió los siguientes matices:
- En el sitio web de la misma tienda en línea, la instalación más barata de phantom power ZEEPIN 48V. Cuesta alrededor de $ 37 y está disponible solo en pre-pedido. El costo de las instalaciones más caras comienza en $ 65.
- Además de la alimentación fantasma para el micrófono Superlux HO8, debe comprar un soporte y un filtro pop. Todavía no coloca una tarjeta de sonido externa y una pantalla acústica para suprimir el ruido innecesario. Juntos, esto es al menos $ 100.
- En lugar de todo lo anterior, puede comprar un micrófono USB económico que pueda satisfacer las necesidades de un youtuber principiante. Por ejemplo, por $ 50 puede comprar Trust GXT 232; y por $ 85 - Blue Microphones Snowball iCE.
Lo que sucedió como resultado: Vasya arrojó dinero en vano y no usó el micrófono comprado, y el propietario de la tienda en línea perdió un cliente habitual.
Instalación de una fuente de alimentación fantasma ZEEPIN 48V de $ 37.
Para evitar perder un cliente, el propietario de una tienda en línea debe mirar sus productos desde una perspectiva de novato y poner un interés en el contenido educativo: agregue sugerencias, artículos útiles o videos a todos los productos complejos. Si Vasya descubriera el poder fantasma de manera oportuna, no compraría un producto que no necesitaba: iría a la página con un micrófono Superlux HO8 → de las indicaciones abiertas aprendería sobre el poder fantasma → iría a un artículo que informa en detalle sobre la configuración fantasma → material estudiado sobre variedades micrófonos → Volvería a la lista de micrófonos y elegiría la mejor opción con un conector USB de las ofertas disponibles. Todos estarían satisfechos y continuarían cooperando. Y así resentimiento y cuidado por los competidores.
La falta de contenido educativo es uno de los muchos errores que cometen los propietarios de las tiendas en línea. Hablaremos sobre otros temas más adelante.
Parte técnica
Baja velocidad de descarga
Aproximadamente el 40% de los usuarios abandonarán su sitio si no ven su apariencia original en los primeros tres segundos. La misma cantidad de visitantes se irá inmediatamente después de hacer clic en una sección y se congelará nuevamente. Para evitar esto, debe realizar pruebas constantemente, optimizar imágenes pesadas y verificar la velocidad de las descargas de fuentes. Una situación separada con el video es que si no hay nada sin ellos, entonces debe invertir fondos adicionales y pensar en aumentar la capacidad productiva del sitio. Si el video se puede reemplazar con texto e imágenes, entonces es mejor hacerlo. La velocidad de descarga es más importante que el formato de contenido.
Largo sitio de carga.
El ejemplo muestra que el tiempo de carga del sitio es de 9.83 segundos. Esta no es una opción válida porque es raro que los visitantes esperen más de 3 segundos.
Pesados archivos de imagen.
Las imágenes pesadas son uno de los factores clave que afectan la velocidad de carga del sitio. Por lo tanto, si necesita aumentar la velocidad, en primer lugar, tenga cuidado de volver a cargar las imágenes.
Un gran número de solicitudes durante la carga de la página.
Amazon realizó una investigación y calculó que si la velocidad de descarga del sitio disminuye al menos 100 ms, la conversión de ventas disminuye inmediatamente en un 1%. Para evitar esto, se alienta a los propietarios de sitios a realizar dos tipos de pruebas. La primera prueba debe hacerse en tiempo real y puede calcular inmediatamente páginas lentas a partir de ella. La segunda prueba debe ser periódica (una vez a la semana o al mes) y todos los elementos lentos pueden corregirse de acuerdo con sus resultados.
Enlaces rotos o rotos
Si el usuario ha visitado su sitio, significa que estaba interesado en alguna información y esta es la información que debe obtener. Si esto no sucede y aparece un enlace roto en lugar de la página que está buscando, el usuario abandonará el sitio, lo colocará en la lista negra y siempre se comunicará con los competidores en el futuro.
No solo los usuarios, sino también los robots de búsqueda reaccionan negativamente a los enlaces rotos. Cuando el robot encuentra un enlace roto, llega a la siguiente conclusión: no hay contenido nuevo en lugar de una página en blanco → el sitio no se está desarrollando y no es interesante para el propietario → el sitio se puede bajar en los resultados de búsqueda.
Enlaces rotos en el código del programa.
El monitoreo constante es la única forma de evitar enlaces rotos y rotos. Cuando encuentre un mal funcionamiento, comience inmediatamente a corregir el código del programa.
Al abrir una página en una nueva ventana.
Error 404
Si su sitio tiene hasta 100,000 páginas, comience a monitorear al menos una vez al mes. Si hay más páginas, intente organizar cheques semanales.
No optimizado página 404
La página 404 es el lugar vacío donde el visitante del sitio obtendrá haciendo clic en un enlace roto o inexistente. Si esta página no está optimizada, el usuario abandonará inmediatamente su sitio y no volverá a acceder a él sin ningún motivo. Si la página está optimizada, no habrá pérdida de tráfico y el usuario podrá moverse a la sección deseada.
Asegúrese de que la página 404 no sea aburrida y esté en blanco.
Para optimizar su página 404, siga estas pautas:
- Describa brevemente a dónde fue la persona y por qué está aquí.
- Coloque un enlace a la página principal del sitio.
- Publique enlaces a secciones populares del sitio.
- Solicite al usuario que informe el error al administrador del sitio.
- Confundirse con el diseño y hacer que la página 404 esté decorada en el mismo estilo que todo el sitio.
Último consejo: no olvides el humor. Si el usuario sonríe, conquistará su ubicación y podrá contar con su atención.
Desplazamiento horizontal mal implementado
El desplazamiento horizontal es una de las formas de ver el contenido de un sitio cuando se mueve por las páginas no es de arriba hacia abajo (), sino de derecha a izquierda (). El problema con el desplazamiento horizontal es que es difícil adaptarse a diferentes tipos de dispositivos: si no asigna un presupuesto y resuelve cada elemento del código del programa, el sitio se desmoronará y funcionará incorrectamente.
A los estudios de desplazamiento web les gusta trabajar con desplazamiento horizontal, que, a través de una acción multicomponente tan compleja, demuestra su competencia. Si su presupuesto no le permite ordenar un diseño individual para cada tipo de gadget moderno, entonces no puede resolver bien el sitio. En este caso, el desplazamiento horizontal no es para usted y necesita diseñar un sitio con un esquema de movimiento clásico: hacer desplazamiento vertical.
Falta de diseño adaptativo
En 2019, más de la mitad del tráfico de Internet proviene de usuarios de teléfonos inteligentes y tabletas. En el futuro, esta relación puede cambiar u otros dispositivos reemplazarán los teléfonos inteligentes y las tabletas. El diseño adaptativo le permite no depender de esta tendencia y no perder la conversión debido a las preferencias tecnológicas de la audiencia. Es decir, el diseño adaptativo es cuando un sitio puede ajustarse correctamente al ancho de cualquier pantalla y mostrarse correctamente en computadoras, tabletas, teléfonos inteligentes y cualquier otro dispositivo moderno.
Sitio web sin diseño adaptativo.
Si su presupuesto aún es limitado y no puede solicitar un diseño adaptativo, entonces adapte parcialmente el sitio. La adaptación parcial es cuando ajusta el sitio al ancho de la pantalla de los dispositivos que utilizan con mayor frecuencia sus usuarios. En la mayoría de los casos, estos serán todos los tipos de teléfonos inteligentes.
El sitio no está configurado para monitores Ultra HD ultra precisos
En 2019, la mayoría de los sitios se centran en monitores con dos tipos de resoluciones: HD y Full HD. En las pantallas HD, la densidad de píxeles es de 1366 × 768: estos son los monitores más económicos, que están perdiendo gradualmente su popularidad. En las pantallas Full HD, la densidad de píxeles es 1920 × 1080: estos son los monitores más populares, cuya resolución se guía a la mayoría de los desarrolladores al configurar el diseño adaptativo.
Junto con los monitores HD y Full HD, las pantallas con resolución Ultra HD (monitores 4K) están ganando popularidad. En las pantallas Ultra HD, la densidad de píxeles es de 3840x2160, esto le permite lograr imágenes ultra nítidas con una visualización detallada de los detalles más pequeños del sitio. También puede comprar un monitor 8K, donde la densidad de píxeles es 7680 × 4320.
Dada esta tendencia, se puede suponer que el estándar Full HD pronto pasará a la categoría de presupuesto y los más populares serán los monitores con resolución Ultra HD. Por lo tanto, es importante realizar una prueba adicional y asegurarse de que todos los elementos del sitio se muestren correctamente en monitores 4K. Si esto no se hace, a medida que los usuarios cambien a monitores ultrasensibles, la conversión de su sitio disminuirá de manera constante.
Búsqueda inactiva en el sitio
Un motor de búsqueda en un sitio es una herramienta de este tipo, cuya frecuencia de uso depende del formato del recurso: se usa con poca frecuencia en sitios de información y en las tiendas en línea puede reemplazar completamente el filtro categórico. De ahí la conclusión: el motor de búsqueda debe y siempre debe funcionar correctamente. Si este no es el caso, el usuario no podrá encontrar rápidamente la información o el producto necesarios, abandonar el sitio, encontrar todo lo que los competidores necesitan y con una alta probabilidad nunca volverá.
Prioridad de resultado de búsqueda no válida
Cuando configure un motor de búsqueda, tenga en cuenta el matiz de que algunas consultas a menudo se ingresan con errores. Por ejemplo, si el usuario tiene prisa, entonces en lugar de "laptop" puede ingresar "laptop". Para un motor de búsqueda en un sitio, esto no debería ser un problema: debe reconocer correctamente la solicitud y producir el resultado deseado: “laptop” → “laptop” → una lista de los modelos necesarios.
Autoguardado no configurado en la cesta de pedidos
El carrito debe duplicar todas las compras de los usuarios. Esto significa que si el usuario indicó tres mantas en la tarjeta del producto, también deberían mostrarse tres mantas en la cesta. El problema no surge si se compran varias unidades de bienes.
Todo cambia mucho si un usuario realiza muchas compras. En este caso, la falta de autoguardado puede conducir a la pérdida del cliente.
Configure el autoguardado en la cesta y no obligue a sus clientes a hacer doble trabajo. De lo contrario, corre el riesgo de quedarse sin clientes habituales.
Por defecto, la cesta de mercancías es "0". Según el análisis que utiliza el mapa de clics, vemos que debido a esto, el usuario debe realizar una acción innecesaria: primero agregue el producto a la cesta y luego indique su cantidad.
Incluso si la función de autoguardado funciona correctamente en la cesta, asegúrese de que sus gerentes siempre vuelvan a llamar a los clientes y especifiquen el pedido. A veces, los clientes hacen clic por error en el botón Comprar varias veces, no revisan la cesta y reciben la cantidad incorrecta de productos. Esto también es malo, por lo que es mejor volver a llamar.
Problemas de diseño
El sitio siempre debe mostrarse correctamente en todos los navegadores. Si el diseño comienza a volar, será difícil para el sitio llevar a cabo la acción útil planificada y los visitantes tendrán una opinión de que los laicos están involucrados en él. Imagine que el cliente quiere hacer un pedido y debido al diseño volado no puede hacer esto. En el mejor de los casos, volverá a cargar la página e intentará nuevamente, en el peor, dejará de trabajar con usted. Esto no debería permitirse.
Un ejemplo de un diseño estrellado: haga clic en el formulario para completar → la pantalla vuelve automáticamente a su posición superior original.
Cuando la pantalla vuelve a su posición original, esto aleja al usuario del pedido. Si el procedimiento se repite al menos una vez, puede quedarse sin un cliente.
Un ejemplo de diseño estrellado: los iconos de redes sociales se ajustan al texto de la página.
Si los botones de las redes sociales están fuera de lugar, entonces se ve feo y provoca la desconfianza de los propietarios del recurso. Además, puede hacer clic por error en uno de los botones y abrir un sitio adicional. Esto es molesto.
Un ejemplo de un diseño bloqueado: visualización incorrecta de texto en la versión adaptativa de un sitio.
En la mayoría de los sitios, el texto actúa como la unidad principal de contenido, el medio de información para el que el usuario está en Internet. Por lo tanto, si el texto es inconveniente para leer, entonces nadie querrá trabajar con dicho sitio.
Un ejemplo de un diseño roto: las migas de pan se superponen al título del artículo y el texto no comienza debajo de la imagen principal.
Arriba, publicamos solo una pequeña parte de posibles ejemplos en los que un sitio puede tener problemas de diseño. Lo común en estos ejemplos es uno: hacen que el sitio sea feo e incómodo de leer. Vea algo como esto: urgentemente correcto.
Botones no seleccionables
El botón en el sitio actúa como un contrato entre el propietario y el visitante del sitio. , . — .
: « » « 1 ».
« » . , . « 1 » , . , .
: .
, . , .
: . - .
, , . .
: .
, . — «» «».
— , - . «» , . — . : «» . , «», «» «» .
, . , . , — , .
Forbes. . .
«»
«» — , . .
, . , .
«» , .
— , . — , . , . .
, 1-5% . , . , : → → . — : , .
— . → → . , . — .
— . , .
Cualquier archivo multimedia en la página debe realizar alguna función útil: entretener, contar una historia o ayudar a lidiar con el tema. Si hay demasiadas animaciones, la página resultará redundante y será difícil de estudiar. El principio de contraste también será violado y todas las animaciones importantes se mezclarán con las secundarias. Como resultado, el usuario no recordará nada ni se negará a estudiar la página sobrecargada.
Evite la redundancia y concéntrese en animaciones importantes.
Elementos de distracción
Aquí debe cumplir el mismo principio que con las animaciones redundantes: si algún elemento no funciona para una acción útil, entonces es mejor no publicarlo en la página. Solo se permiten excepciones en situaciones en que estos elementos se presentan en forma de algún tipo de decoración de alta calidad, lo que le permite crear un ambiente agradable en el sitio. Si la calidad es un problema, entonces es mejor no usar elementos que distraigan, de esta manera habrá menos visitantes molestos.
Ventanas emergentes sin el botón Cerrar
Un visitante del sitio es un invitado, cuyas acciones deben ser solo voluntarias. Si agrega ventanas emergentes al sitio y las diseña sin el botón Cerrar, el usuario no tendrá ninguna opción libre. Debido a esto, se garantiza que no le gustará su sitio y la próxima vez definitivamente elegirá un recurso de la competencia. Por lo tanto, si usa ventanas emergentes al azar, asegúrese de agregar un botón grande "Cerrar".
CAPTCHA molesto
CAPTCHA es una herramienta útil que protege la página de la afluencia de robots. Por lo tanto, captcha debe ser y no puede prescindir de él. Entonces surge el problema, el captcha está incorrectamente programado e iguala a cada nuevo visitante con un bot: una persona acude al sitio para registrarse de una manera interesante → en lugar de estudiar el contenido, debería pasar tiempo escribiendo números y letras que no tienen sentido para él. La situación se agrava si el captcha está dañado o es demasiado largo: es más fácil para el usuario cerrar la página que decodificarla. Por lo tanto, para no perder la audiencia, haga que el captcha sea compacto, invisible, rara vez funcione y pueda distinguir mejor a una persona de un robot. La opción de norma es reCAPTCHA.
Ventanas emergentes intrusivas
La ventana emergente es un banner emergente que insta al usuario a tomar alguna medida específica: suscribirse al boletín, dejar un número de teléfono o seguir un enlace específico. Las ventanas emergentes realizan una función publicitaria y son muy molestas en aquellas situaciones en las que aparece una ventana emergente con un mensaje inapropiado en la página:
Si está haciendo ventanas emergentes, ofrézcales algo útil y configúrelas para que el usuario tenga tiempo de estudiar al menos un poco los contenidos del sitio.
Procedimiento de registro obligatorio.
Si necesita registrarse en la tienda en línea antes de comprar, prepárese para una conversión baja.
Si desea recopilar datos de usuario de forma segura, simplemente explique las ventajas del procedimiento de registro y hágalo automático cuando ocurra la primera compra. Envíe la contraseña por correo electrónico.
Recopilar contactos de usuarios interesados es difícil, pero perder es fácil. Por lo tanto, no moleste a sus suscriptores, no envíe spam ni publicidad inútil. Prometieron información sobre bonos beneficiosos: primero hablen acerca de los bonos, y luego pueden insertar algunos anuncios. Es posible, pero no de otra manera.
Procedimiento de registro complejo
Si el usuario decidió registrarse en su sitio, este proceso no debería tomar más de un minuto. Cuando el formulario de registro es demasiado complejo, sobresaturado con los campos obligatorios y consta de varios pasos, es más fácil para el usuario cambiar de opinión que realizar la acción propuesta.
Si un usuario necesita ingresar una gran cantidad de datos necesarios para el registro, piense en cómo simplificar este proceso. Por ejemplo, puede conectar el complemento y arrastrar los datos necesarios desde las redes sociales. O puede dividir el registro en varias partes: el correo, el nombre y el número de teléfono se ingresan al principio, y puede agregar toda la otra información en su cuenta personal.
Enmascarando el campo de contraseña
El campo de ingreso de contraseña oculta (****) es apropiado para usar en la banca en línea y en aquellos sitios donde se almacena dinero o documentación importante del usuario. En este caso, se requiere una contraseña oculta y se utiliza como medida de protección adicional. Por ejemplo, si decide utilizar la banca en línea en un café público, puede iniciar sesión y no preocuparse por la seguridad de su cuenta.
Para todas las demás situaciones, es mejor no utilizar el campo de contraseña oculta, ya que complica el proceso de ingresar a su cuenta personal. Si por alguna razón no es posible desclasificar el campo de ingreso de contraseña, asegúrese de que los usuarios puedan activar y desactivar esta opción a su discreción.
La navegación
Paginación no configurada
La paginación son páginas del catálogo de productos que los robots de búsqueda leen inmediatamente después de la página principal. Si la paginación se enmarca incorrectamente en la tienda en línea, entonces el sitio está mal promocionado y se vende mal.
Si hay una gran cantidad de productos de una determinada categoría en el sitio, debe dividir esta categoría en páginas de paginación. Vale la pena agregar un botón de cambio de página desde la parte inferior del artículo, una lista abreviada de todas las páginas. A menudo, en las páginas de paginación, puede encontrar un botón adicional para mostrar todos los productos a la vez, aquí debe tener mucho cuidado y asegurarse de que al actualizar la lista de productos se cambiará la URL, a la que no se colocará ningún índice por adelantado.
Escenarios de viaje mal concebidos
Mientras está en el sitio, el usuario siempre debe saber qué acciones puede realizar y qué seguirá. Tan pronto como no se acuerde algún punto, comienzan los problemas de confusión y conversión. Para que quede claro, analizaremos este momento en el ejemplo de una compra no coordinada de bienes con un solo clic:
Aquí hay otra situación. Imagine que necesita ponerse en contacto con el gerente de soporte técnico y esto solo se puede hacer mediante una solicitud de devolución de llamada. Ingresa un número de teléfono y no recibe ninguna notificación. Debido a esto, no sabe si el gerente recibió su solicitud, cuándo esperar una respuesta y dónde contactar si la situación es urgente. Es decir, se forma una razón ya preparada para partir hacia los competidores.
Se indica el número de teléfono, pero no hay confirmación de que se haya entregado al gerente.
Para solucionarlo, analizaremos otro caso. Los programadores han diseñado mal el sitio y los usuarios tienen problemas con las tarjetas de productos. En las tarjetas no puede cambiar el número de unidades de bienes y no puede eliminar el producto seleccionado de la cesta. Como no hay pistas, el usuario se decepcionará rápidamente y no comprará nada en una tienda en línea.
El número seleccionado de unidades no está indicado y no hay forma de cambiar nada. Si cambia al siguiente paso, entonces la función de elegir la cantidad de bienes no está disponible.
Evite escenarios precipitados y haga una copia de seguridad de cada paso personalizado con consejos de aclaración. Esta es una manera fácil de evitar conflictos.
No migajas de pan
"Breadcrumbs" es un sistema de navegación que muestra la cadena de movimiento del usuario desde la página principal hasta la sección actual. Es habitual mostrar "migas de pan" en la parte superior del sitio y con su ayuda puede retroceder rápidamente y encontrar una sección vista anteriormente. Vimos el producto 10: en las "migas de pan" puede cambiar al producto 2 con un solo clic.
Además de la función de navegación, las migas de pan afectan la optimización de SEO: crean un enlace entre otras páginas e influyen positivamente en el factor de comportamiento. Por lo tanto, si no hay "migas de pan", los usuarios se sentirán incómodos al estudiar el sitio durante mucho tiempo y encontrar rápidamente las secciones que les gustan.
Navegación de la página de inicio
"Inicio" es la página a la que volverá el usuario si se pierde en el sitio. Si no existe tal página, entonces, en los primeros problemas con la navegación, algunos visitantes abandonarán el sitio. Para que la página "Inicio" realice tareas más útiles, es recomendable agregar los encabezados principales en su descripción o hablar sobre la estructura completa del sitio.
Para la tienda en línea, este elemento del menú puede omitirse.
No hay navegación dentro de los artículos del sitio.
Para artículos de blog grandes, necesita su propia navegación. Para prepararlo, es suficiente realizar dos acciones:
- Instale un complemento que formará automáticamente el contenido de los subtítulos del artículo. Este contenido se mostrará al comienzo del artículo y, con su ayuda, el usuario podrá comenzar a leer inmediatamente la sección deseada.
- Agregue el botón "Arriba", que le permitirá pasar rápidamente de cualquier sección al contenido.
Si el artículo es pequeño y cabe en 3-5 pantallas de desplazamiento, no es necesario agregar navegación. El usuario encontrará rápidamente el material correcto.
Navegación formal
La navegación es una herramienta que debería ayudar a limpiar el sitio. Si la navegación es difícil o ilógica, esto evitará que el usuario explore completamente el sitio y realice las acciones de conversión necesarias: realice una compra, deje un número de teléfono o suscríbase a las noticias.
El menú con la clasificación incorrecta de categorías se publica a continuación: la sección principal no está resaltada y las categorías secundarias no están estructuradas.
Otro error común de la navegación formal es la duplicación de posiciones. Esto es cuando en la sección "Accesorios" puede encontrar la categoría "Accesorios". Dicha coincidencia debe eliminarse y no confundir al usuario.
Ejemplo de elementos de menú duplicados cuando se usan "Accesorios" en la sección y categoría.
Además, no olvide asegurarse de que todas las páginas tengan un menú de primer nivel. Si no lo agrega, no podrá cambiar rápidamente entre categorías y explorar diferentes productos.
Un ejemplo de un catálogo de productos sin un menú de nivel superior. Los usuarios no tienen la oportunidad de ir a la selección de otra categoría con un solo clic.
Para hacer la navegación correcta, ponte en la piel de un novato que no sabe nada sobre el sitio. Ahora haga la pregunta: ¿puede un novato moverse rápidamente por los elementos del menú publicados y encontrar la información necesaria? Si la respuesta es no, entonces la cadena de navegación debe ser modificada.
Liquidación
Diseño inapropiado
El diseño es una imagen visual que debería atraer a una audiencia y simplificar la interacción con el sitio. El diseño de calidad hace exactamente eso. Un diseño mal concebido, desactualizado o demasiado creativo reduce todas las métricas de conversión y debe corregirse de inmediato.
Un ejemplo de diseño no profesional. Aquí todo se mezcla en un montón y se inunda con un fondo rojo.
El problema con el diseño creativo es que es difícil de crear. Por lo tanto, si tiene dudas sobre sus ideas, es mejor dar preferencia a técnicas de diseño simples que sean entendibles para toda la audiencia objetivo.
Un ejemplo de diseño creativo cuando un sistema de filtro no se percibe como filtros.
La belleza de un diseño complejo solo puede ser apreciada por el propietario del sitio que pagó por este diseño. Si las páginas no cortan los ojos y todo está claramente ordenado en ellas, esto será suficiente para los usuarios. El resto es exceso.
Un ejemplo de un diseño complicado, cuando el título habitual de los productos se convirtió en un acertijo. Desde el mapa de clic vemos que aquí los usuarios no entienden la posibilidad de interactuar con los iconos correspondientes.
El diseño de calidad no tiene que ser costoso y voluminoso. Si un estilo minimalista simple se combina con servicios de calidad, esto será suficiente para atraer a un público fiel. Habrá una audiencia satisfecha → las ventas aumentarán → aparecerá un diseño profesional.
Columna de texto inconveniente
El texto debe ocupar el 60-70% del ancho de la página. Si hace un margen estrecho, el texto se extenderá y se convertirá en una hoja vertical ilegible. Si usa el ancho máximo, una hoja ilegible se estirará horizontalmente. Un error completo es cuando se agregan fuentes serif al texto extendido. Piense en los usuarios y no cree inconvenientes innecesarios.
Imágenes desproporcionadas
En el sitio, todo diseño visual debe tener el mismo estilo. Los elementos de acento son aceptables, pero deben estar bien diseñados y el usuario debe comprenderlos. Por ejemplo, si está haciendo una descripción del producto de alguien, entonces está permitido insertar imágenes con diferentes proporciones y escalas en el artículo; el lector comprende que estamos hablando de diferentes propiedades de un producto. Al mismo tiempo, no se pueden cambiar las proporciones en el catálogo general de productos; aquí, sin comentarios adicionales, no está claro cómo algunas imágenes difieren de otras.
Un ejemplo de una imagen demasiado alta en el encabezado. Para acceder al contenido, debe desplazarse por la página. El problema se resuelve reduciendo la altura de la tapa en un 50-70%.
A menudo, surgen problemas de proporcionalidad en el diseño adaptativo. Por lo tanto, es importante probar el diseño en tantos dispositivos como sea posible.
Un ejemplo de la distribución incorrecta de elementos en la versión móvil del sitio. La primera imagen sale del catálogo y parece más grande que el resto.
Las imágenes desproporcionadas crean una sensación de confusión y falta de profesionalismo. Por lo tanto, cuando uno de los usuarios presta atención a esto, la próxima vez irá de compras al sitio sin problemas.
Texto y antecedentes incompatibles
La opción ideal es el texto en negro sobre un fondo blanco. Sobre el mismo efecto da texto blanco sobre un fondo negro. Puede combinar otros colores que no se fusionan entre sí y le permiten leer fácilmente la información del sitio. Si todo el contenido es fácil de leer de un vistazo, entonces ha elegido el texto y el fondo correctos.
Si no tiene una tarea de diseño especial, elija texto negro sobre un fondo blanco. No es necesario jugar con flores solo por el bien de la belleza: es mejor pasar el tiempo ahorrado en la producción de contenido. Los usuarios definitivamente lo apreciarán.
Un ejemplo de texto poco legible en las ilustraciones.
Con especial cuidado, debe abordar los experimentos de texto y de fondo en un diseño adaptable. En los dispositivos móviles, la información es más difícil de considerar, por lo tanto, la selección de colores debe abordarse con mucho cuidado.
Un ejemplo de texto ilegible en diseño adaptable.
Si por alguna razón el clásico en forma de texto en negro y un fondo blanco no le conviene, recuerde este matiz: los diferentes dispositivos tienen diferentes colores. Si todo se ve bien en su computadora, esto no significa que un usuario con un teléfono inteligente económico en Android tendrá una legibilidad similar.
Diseño de texto sin procesar
Ninguno de los usuarios está interesado en leer un lienzo de texto sólido que no tenga elementos de control de atención visual: párrafos, subtítulos, listas, imágenes y bloques individuales con información importante. El ojo no se aferra a nada, por lo que incluso si es bueno, es poco probable que se lea.
Esta es una hoja de texto aburrida.
— . .
.
, , . — . .
. , . , - , , . .
. , .
: , , . , .
— . , . , . : , .
— . , . — - , .
.
— . Apple .
, . - . , - . , . , .
— , . .
.
, . , .
. , , .
. , .
.
, . , .
.
. .
.
— . , . .
. , , . , .
.
— (). , - .
, . - , . , , . — . , , .
, . — .
instagram.
, . , . , . , . , Telegram, , . .
— , . . Apple — , . , . , .
— , . -, MacBook Air 2018 1900 $. , 12 . -.
MacBook Air 2018 — , - . .
, . . , .
, , . , . , - - . , — . , .
-
, -, . — . - , , . , , . .
: IT- 2 Dell P2418D. IT- - → → .
2 Dell P2418D, , . .
- , : , . . IT- , , . , , - .
, - . , , . .
15%: 100 $ → 115 $. - , -:
- , . — .
- , .
- — , , . , .
, . - , - . — . .
. , . : , .
: , . : , . — .
, . , .
, : 100 $, 200 $. , , .
- — . .
— , . , , . , , : → → → → . .
, . , .
« » «»
« » — , . , . « » , .
« » — : , , , , .
«» — , , . , .
/
, . , . , . , : , , . , .
. , , .
, , . .
,
- , . , , , — . , , . , .
.
. : → → . .
— -, . : . , . , .
, . , , . , , .
: .
: , . , . . — .
, . - , .
, : , . .
, . . , .
. . , .
— , : . , . , .
, . — . .
№1.
- .№2. , .
№3. .
? Comparte tus experiencias en los comentarios.
: , CEO Plerdy.com