Consejos útiles para tu sitio web.

Hemos preparado estos consejos útiles para tu sitio web que beberías tener en consideración. El diseño web es complicado. Los diseñadores y desarrolladores deben tener en cuenta muchas cosas al diseñar un sitio web, desde la apariencia ( cómo se ve el sitio web ) hasta el diseño funcional ( cómo funciona el sitio web ) .

ARQUITECTURA INFORMACIONAL

La gente a menudo usa el término “arquitectura de la información” (AI) para referirse a los menús en un sitio web. Pero eso no es correcto Si bien los menús son parte de AI, son solo uno de sus aspectos.

AI se trata de la organización de la información de una manera clara y lógica. Dicha organización sigue un propósito claro: ayudar a los usuarios a navegar por un conjunto complejo de información .

Hay varias formas de investigar las necesidades de los usuarios. A menudo, un arquitecto de la información tomará parte activa en las entrevistas de los usuarios o en la clasificación de tarjetas, donde se enterarán directamente de las expectativas de los usuarios o verán cómo los posibles usuarios categorizarían una variedad de grupos de información. Los arquitectos de la información también necesitan acceso a los resultados de las pruebas de usabilidad para ver si los usuarios pueden navegar de manera eficiente.

La clasificación de tarjetas es una forma simple de descubrir la mejor manera de agrupar y organizar el contenido en función de la información del usuario. Una de las razones por las cuales los arquitectos de la información como la clasificación de tarjetas se debe a la claridad de los patrones que normalmente emerge.

Se crearía una estructura de menú basada en los resultados de las entrevistas de los usuarios, y la clasificación de las tarjetas se probaría para ver si satisface el modelo mental del usuario. Los investigadores de UX usan una técnica llamada “prueba de árbol” para probar que funcionará. Esto sucede antes de diseñar la interfaz real.

Navegación Global

La navegación es muy importante en la usabilidad. No importa cuán bueno sea su sitio web si los usuarios no pueden encontrar su camino a su alrededor sería algo inútil. Es por eso que la navegación en su sitio web debe cumplir con algunos principios:

Simplificar la navegación: debe diseñarse de manera que los visitantes lleguen a donde quieran con el menor número de clics posible.

Claridad: No debe haber dudas sobre lo que significa cada opción de navegación. Cada opción de navegación debería ser evidente para los visitantes.

Consistencia: El sistema de navegación debe ser el mismo para todas las páginas del sitio web.

Los enlaces y las opciones de navegación son factores clave en el proceso de navegación y tienen un efecto directo en el recorrido del usuario. Siga algunas reglas con estos elementos interactivos:

  • Reconocer la diferencia entre los enlaces internos y externos. Los usuarios esperan un comportamiento diferente para los enlaces internos y externos. Todos los enlaces internos deben abrirse en la misma pestaña (de esta manera, permitirá que los usuarios usen el botón “Atrás”). Si decide abrir enlaces externos en una nueva ventana, debe proporcionar una advertencia avanzada antes de abrir automáticamente una nueva ventana o pestaña. Esto podría tomar la forma de texto agregado al texto del enlace indicando “(se abre en una nueva ventana)”.
  • Cambiar el color de los enlaces visitados. Cuando los enlaces visitados no cambian de color, los usuarios pueden volver a visitar involuntariamente las mismas páginas.

 

Saber qué páginas han visitado evita que el usuario vuelva a visitar las mismas páginas.

  • Revisa todos los enlaces. Un usuario puede frustrarse fácilmente haciendo clic en un enlace y obteniendo una página de error 404 en respuesta. Cuando un visitante busca contenido, espera que cada enlace lo lleve donde dice que lo hará, no a una página de error 404 u otro lugar que no esperaban.

 

BOTÓN “ATRÁS” EN EL NAVEGADOR

El botón “volver” es quizás el segundo control de UI más popular en el navegador (después del campo de entrada de URL). Asegúrese de que el botón “volver” funcione de acuerdo con las expectativas del usuario. Cuando un usuario sigue un enlace en una página y luego hace clic en el botón “volver”, espera regresar al mismo lugar en la página original. situaciones anuladas en las que hacer clic en “volver” lleva al usuario a la parte superior de la página inicial , en lugar de dejarla, especialmente en las páginas. Perder su lugar obliga al usuario a desplazarse por el contenido que ya ha visto. No sorprende que los usuarios se sientan frustrados rápidamente sin la funcionalidad adecuada de “volver a la posición”.

Breadcrumbs es un conjunto de enlaces contextuales que funcionan como ayuda de navegación en sitios web. Es un esquema de navegación secundario que generalmente muestra la ubicación del usuario en un sitio web.

Si bien este elemento no requiere mucha explicación, vale la pena mencionar algunas cosas:

  • No use breadcrumbs como sustituto de la navegación primaria. La navegación principal debe ser el elemento que guía al usuario, mientras que los breadcrumbs solo deben ser compatibles con el usuario. Depender de u breadcrumb como método principal de navegación, en lugar de una característica adicional, suele ser una indicación de un diseño de navegación deficiente.

Algunos usuarios acuden a un sitio web en busca de un artículo en particular. No quieren usar las opciones de navegación. Quieren escribir texto en un cuadro de búsqueda, enviar su consulta de búsqueda y encontrar la página que están buscando.

Tenga en cuenta estas pocas reglas básicas al diseñar el cuadro de búsqueda:

  • Coloque el cuadro de búsqueda donde los usuarios esperan encontrarlo. El siguiente cuadro fue creado en base a un estudio de A. Dawn Shaikh y Keisi Lenz. Muestra la ubicación esperada del campo de búsqueda, de acuerdo con una encuesta de 142 participantes. El estudio encontró que el lugar más conveniente es la parte superior izquierda o superior derecha de cada página en un sitio web. Los usuarios pueden encontrarlo fácilmente usando el patrón de escaneo en forma de F común.

 

  • Mostrar la búsqueda de forma destacada en sitios web ricos en contenido. 
    Si la búsqueda es una función importante en su sitio web, muéstrela de forma destacada, ya que puede ser la ruta más rápida de descubrimiento para los usuarios.
  • Ajuste el tamaño del cuadro de entrada de forma adecuada. 
    Hacer el campo de entrada demasiado corto es un error común entre los diseñadores. Por supuesto, los usuarios pueden escribir una consulta larga en un campo corto, pero solo una parte del texto estará visible a la vez, lo que es malo para la usabilidad porque no será posible ver toda la consulta a la vez. De hecho, cuando un cuadro de búsqueda es demasiado corto, los usuarios se ven obligados a utilizar consultas breves e imprecisas, ya que las consultas más largas serían difíciles e incómodas de leer. Se recomienda un campo de entrada de 27 caracteres que acomoda el 90% de la búsqueda.

  • Coloque el cuadro de búsqueda en cada página. 
    Muestre el cuadro de búsqueda en cada página, porque si los usuarios no pueden navegar al contenido que están buscando, intentarán usar la búsqueda independientemente de dónde se encuentren en el sitio web.

Diseño de páginas individuales

ESTRATEGIA DE CONTENIDO

Quizás lo más importante sobre la estrategia de contenido es enfocar el diseño en los objetivos de la página. Comprenda el objetivo de la página y escriba contenido de acuerdo con el objetivo.

Aquí hay algunos consejos prácticos para mejorar la comprensión del contenido:

  • Prevenir la sobrecarga de información. La sobrecarga de información es un problema serio. Impide que los usuarios tomen decisiones o actúen porque sienten que tienen demasiada información para consumir. Hay algunas formas simples de minimizar la sobrecarga de información. Una técnica común es fragmentar , dividir el contenido en trozos más pequeños para ayudar a los usuarios a comprenderlo y procesarlo mejor. Un formulario de pago es un ejemplo perfecto. Muestre, como máximo, entre cinco y siete campos de entrada a la vez, y desglose el registro en páginas, divulgando progresivamente los campos según sea necesario.

 

 

  • Evite la jerga y los términos específicos de la industria. Cada término o frase desconocida que aparece en la página aumentará la carga cognitiva en los usuarios. Una apuesta segura es escribir para todos los niveles de lectores, y elegir palabras que sean clara y fácilmente comprensibles para todos los grupos de usuarios.
  • Minimice secciones largas de contenido con muchos detalles. De acuerdo con el punto sobre la sobrecarga de información, trate de evitar largos bloques de texto si el sitio web no está orientado al consumo de información importante. Por ejemplo, si necesita proporcionar detalles sobre un servicio o producto, intente revelar detalles paso a paso. Escriba en segmentos pequeños y escaneables para facilitar el descubrimiento.
  • Evite capitalizar todas las letras. El texto de mayúsculas, es decir, el texto con todas las letras en mayúscula, está bien en pequeñas dosis, como acrónimos y logotipos. Sin embargo, evite todas las mayúsculas durante más tiempo (como párrafos, etiquetas de formularios, errores, notificaciones).

ESTRUCTURA DE PÁGINA

Una página estructurada adecuadamente deja en claro dónde se encuentra cada elemento de interfaz de usuario en el diseño. Si bien no existen reglas únicas, existen algunas pautas que lo ayudarán a crear una estructura sólida:

  • Haz la estructura predecible Alinee su diseño con las expectativas del usuario. Considere sitios web de una categoría similar para descubrir qué elementos usar en la página y dónde. Usa patrones con los que tu público objetivo esté familiarizado.
  • Use un grid de diseño. Una cuadrícula de diseño divide una página en regiones principales y define las relaciones entre los elementos en términos de tamaño y posición. Con la ayuda de una cuadrícula, combinar partes diferentes de una página juntas en un diseño cohesivo se vuelve mucho más fácil.

  • Use wireframe para eliminar el desorden.- El desorden sobrecarga una interfaz y reduce la comprensión. Cada botón, imagen y línea de texto añadidos hace que la pantalla sea más complicada. Antes de crear la página con elementos reales, cree una estructura de plantilla, analícela y elimine todo lo que no sea absolutamente necesario.

 

JERARQUÍA VISUAL

Es más probable que las personas escaneen rápidamente una página web que leer todo allí. Por lo tanto, si un visitante desea encontrar contenido o completar una tarea, escanearán hasta que encuentren dónde deben ir. Usted, como diseñador, puede ayudarlo diseñando una buena jerarquía visual. La jerarquía visual se refiere a la disposición o presentación de los elementos de una manera que indica la importancia (es decir, donde sus ojos deben enfocarse primero, segundo, etc.). Una jerarquía visual adecuada facilita el escaneo de la página.

  • Use patrones de escaneo naturales. Como diseñadores, tenemos mucho control sobre dónde miran las personas cuando miran una página. Para establecer la ruta correcta para los ojos del visitante a seguir, podemos utilizar dos patrones de escaneo naturales: el patrón con forma de F y el patrón en forma de Z . Para las páginas de texto pesado, como los artículos y los resultados de búsqueda, el patrón F es mejor, mientras que el patrón Z es bueno para las páginas que no están orientadas al texto.

Un patrón en forma de F es utilizado por la CNN.

Un patrón de escaneo Z es utilizado por Basecamp.

 

  • Visualmente priorizar elementos importantes. Cree títulos de pantalla, formularios de inicio de sesión, opciones de navegación y otros puntos focales de contenido importantes para que los visitantes los vean de inmediato.
  • Crea maquetas para aclarar la jerarquía visual. Las maquetas permiten a los diseñadores ver cómo se verá un diseño cuando tenga datos reales. Reordenar elementos en una maqueta es mucho más fácil que hacerlo cuando el desarrollador está construyendo la página web.

 

CARGA DE CONTENIDO

La carga de contenido merece una aclaración adicional. Si bien una respuesta instantánea es la mejor, hay ocasiones en que su sitio web necesitará más tiempo para entregar contenido a los visitantes. Una mala conexión a Internet podría causar una reacción lenta, o una operación podría tomar un poco más de tiempo para completarse. Pero no importa la causa de tal comportamiento, su sitio web debe aparecer rápido y receptivo.

  • Asegúrese de que la carga regular no tarde demasiado. La capacidad de atención y la paciencia de los usuarios de la web es muy baja. De acuerdo con una investigación de Nielsen Norman Group , 10 segundos es aproximadamente el límite para mantener la atención del usuario en una tarea. Cuando los visitantes tienen que esperar a que se cargue un sitio web, se sentirán frustrados y probablemente se irán si el sitio web no se carga lo suficientemente rápido para ellos. Incluso con el indicador de carga más bellamente diseñado, los usuarios aún se irán si la carga lleva demasiado tiempo.
  • Use pantallas esqueleto durante la carga. Muchos sitios web usan indicadores de progreso para mostrar que los datos se están cargando. Si bien la intención detrás de un indicador de progreso es buena (proporcionando retroalimentación visual), el resultado puede ser negativo. En lugar de mostrar un indicador de carga, los diseñadores pueden usar una pantalla de esqueleto para enfocar la atención de los usuarios en el progreso real y crear anticipación para lo que está por venir. Esto crea la sensación de que las cosas suceden de inmediato, ya que la información se muestra incrementalmente en la pantalla y las personas ven que el sitio web está actuando mientras esperan.

Facebook usa pantallas esqueleto para completar la interfaz de usuario a medida que el contenido se carga de forma incremental.

 

BOTONES

Los botones son vitales para crear un flujo de conversación fluido. Vale la pena prestar atención a estas mejores prácticas básicas para los botones:

  • Asegúrese de que los elementos en los que se puede hacer clic se parecen. Con botones y otros elementos interactivos, piense en cómo el diseño comunica el affordance. ¿Cómo entienden los usuarios el elemento como un botón? El formulario debe seguir la función: la apariencia de un objeto les dice a los usuarios cómo usarlo. Los elementos visuales que parecen enlaces o botones pero no se puede hacer clic (como las palabras subrayadas que no son enlaces o elementos que tienen un fondo rectangular pero que no son botones) pueden confundir fácilmente a los usuarios.

¿Es el cuadro naranja en la esquina superior izquierda de la pantalla un botón? No, pero la forma y la etiqueta hacen que el elemento se vea como uno.

 

  • Etiqueta los botones según lo que hacen. La etiqueta de cualquier elemento de interfaz accionable siempre debe relacionarse con lo que hará para el usuario. Los usuarios se sentirán más cómodos si entienden qué acción hace un botón. Las etiquetas vagas como “Enviar” y las etiquetas de resumen deben proporcionar suficiente información sobre la acción.

  • Diseña botones consistentemente. Los usuarios recuerdan detalles, ya sea conscientemente o no. Al navegar por un sitio web, asociarán la forma de un elemento en particular con la funcionalidad del botón. Por lo tanto, la coherencia no solo contribuirá a un diseño atractivo, sino que también hará que la experiencia sea más familiar para los usuarios. La imagen de abajo ilustra este punto perfectamente. Usar tres formas diferentes en una parte de una aplicación (como la barra de herramientas del sistema) no solo es confuso, sino también descuidado.

IMÁGENES

Como dice el refrán, una imagen vale más que mil palabras. Los seres humanos son criaturas altamente visuales, capaces de procesar información visual casi instantáneamente, el 90% de toda la información que percibimos y que se transmite a nuestros cerebros es visual. Las imágenes son una forma poderosa de captar la atención del usuario y diferenciar un producto. Una sola imagen puede transmitir más al espectador que un bloque de texto elaborado. Además, las imágenes cruzan las barreras del lenguaje de una manera que el texto simplemente no puede.

Los siguientes principios te ayudarán a integrar imágenes en tu diseño web:

  • Asegúrate de que las imágenes sean relevantes. Uno de los mayores peligros en el diseño es la imagen que transmite el mensaje equivocado. Seleccione imágenes que respalden firmemente los objetivos de su producto y asegúrese de que sean relevantes para el contexto.
  • Evita fotos genéricas de personas. Usar caras humanas en el diseño es una forma efectiva de involucrar a los usuarios. Ver rostros de otros humanos hace que los espectadores sientan que se están conectando con ellos, y no solo que se les haya vendido un producto. Sin embargo, muchos sitios web corporativos son conocidos por usar fotos genéricas para crear un sentido de confianza. . Las pruebas de usabilidad muestran que tales fotos rara vez agregan valor al diseño y más a menudo perjudican en lugar de mejorar la experiencia del usuario.

Las imágenes no auténticas dejan al usuario con una sensación falsa y superficial

 

  • Utilice activos de alta calidad sin distorsión. La calidad de los activos de su sitio web tendrá un impacto tremendo en la impresión del usuario y las expectativas de su servicio. Asegúrese de que las imágenes tengan el tamaño adecuado para las pantallas en todas las plataformas. Las imágenes no deben aparecer pixeladas, por lo tanto, pruebe los tamaños de resolución para varias proporciones y dispositivos. Visualice fotos y gráficos en su relación de aspecto original.

Una imagen degradada versus una imagen de tamaño adecuado

 

VÍDEO

Con el aumento de las velocidades de Internet, los videos se están volviendo más populares, especialmente si se tiene en cuenta que extienden el tiempo que se pasa en el sitio . Hoy, el video está en todas partes. Lo estamos viendo en nuestros escritorios, tabletas y teléfonos. Cuando se usa eficazmente, el video es una de las herramientas más poderosas disponibles para atraer a la audiencia: transmite más emoción y realmente le da a la gente una sensación de un producto o servicio.

  • Desactive el audio de forma predeterminada, con la opción de activarlo. Cuando los usuarios llegan a una página, no esperan que reproduzca ningún sonido. La mayoría de los usuarios no usan auriculares y estarán estresados ​​porque tendrán que descubrir cómo apagar el sonido. En la mayoría de los casos, los usuarios abandonarán el sitio web tan pronto como se reproduzca.
  • Mantenga el video promocional lo más corto posible. Según la investigación de D-Mak Productions , los videos cortos son más atractivos para la mayoría de los usuarios. Por lo tanto, mantenga videos comerciales en el rango de dos a tres minutos.
  • Proporcione una forma alternativa de acceder al contenido.Si un video es la única forma de consumir contenido, esto puede limitar el acceso a la información para cualquiera que no pueda ver o escuchar el contenido. Para la accesibilidad, incluya leyendas y una transcripción completa del video.

BOTONES DE LLAMADA A LA ACCIÓN

Las llamadas a la acción (CTA) son botones que guían a los usuarios hacia su objetivo de conversión. El objetivo de una CTA es dirigir a los visitantes a un curso de acción deseado. Algunos ejemplos comunes de CTA son:

  • “Comience una prueba”
  • “Descarga el libro”
  • “Registrarse para recibir actualizaciones”
  • “Obtener una consulta”

Tenga en cuenta algunas cosas al diseñar botones CTA:

  • Tamaño El CTA debe ser lo suficientemente grande como para ver desde la distancia, pero no tan grande como para distraer la atención de otro contenido de la página. Para confirmar que su CTA es el elemento más destacado de la página, intente la prueba de cinco segundos: vea una página web durante cinco segundos y luego escriba lo que recuerda. Si la CTA está en su lista, ¡felicidades! Su tamaño es apropiado.
  • Importancia visual El color que elija para las CTA tiene un impacto tremendo sobre si se notará. Con el color, puede hacer que ciertos botones se destaquen más que otros dándoles más prominencia visual. Los colores contrastantes funcionan mejor para las CTA y crean llamativos botones.

El verde de la CTA en la página de Firefox salta de la página e inmediatamente atrae la atención del usuario.

 

  • Espacio negativo La cantidad de espacio alrededor de una CTA también es importante. El espacio blanco (o negativo) crea un espacio de respiración esencial y separa un botón de otros elementos en la interfaz.

La versión anterior de la página de inicio de Dropbox tiene un buen ejemplo del uso de espacio negativo para hacer pop CTA principal. El CTA azul “Registrarse de forma gratuita” se destaca contra el azul claro del fondo.

 

  • Texto orientado a la acción Escriba el texto del botón que obligará a los visitantes a tomar medidas. Comience con un verbo como “Inicio”, “Obtener” o “Unirse”.
  • Consejo: Puede probar rápidamente una CTA usando un efecto de desenfoque. Una prueba de desenfoque es una técnica rápida para determinar si el ojo del usuario irá donde usted quiere que vaya. Tome una captura de pantalla de su página y aplique un efecto de desenfoque en Adobe XD (vea el siguiente ejemplo). Al mirar la versión borrosa de su página, ¿qué elementos se destacan? Si no te gusta lo que se está proyectando, revisa si es tu estilo.

Una prueba de desenfoque es una técnica para revelar el punto focal y la jerarquía visual de un diseño.

 

FORMULARIOS WEB

Completar un formulario sigue siendo uno de los tipos de interacción más importantes para los usuarios en la web. De hecho, una forma a menudo se considera el paso final en la realización de una meta. Los usuarios deben poder completar formularios rápidamente y sin confusión. Un formulario es como una conversación, y como cualquier conversación, debe haber comunicación lógica entre dos partes: el usuario y el sitio web.

  • Pregunte solo lo que se requiere. Pide solo lo que realmente necesitas Cada campo adicional que agregue a un formulario afectará su tasa de conversión. Siempre piense por qué está solicitando cierta información a los usuarios y cómo la usará.
  • Ordena el formulario lógicamente. Las preguntas deben formularse lógicamente desde la perspectiva del usuario, no desde la perspectiva de la aplicación o la base de datos. Por ejemplo, preguntar por la dirección de alguien antes de que su nombre sea incorrecto.
  • Agrupe los campos relacionados. Agrupe la información relacionada en bloques o conjuntos lógicos. El flujo de un conjunto de preguntas al siguiente se parecerá mejor a una conversación. Agrupar campos relacionados entre sí también ayuda al usuario a dar sentido a la información.

ANIMACIÓN

Cada vez más diseñadores incorporan la animación como un elemento funcional para mejorar la experiencia del usuario. La animación ya no es solo para deleite; es una de las herramientas más importantes para una interacción efectiva. Sin embargo, la animación en el diseño puede mejorar la experiencia del usuario solo si se incorpora en el momento y lugar correctos. La buena animación de UI tiene un propósito; es significativo y funcional.

Aquí hay algunos casos en que la animación puede mejorar la experiencia:

  • Comentarios visuales sobre la acción del usuario.- Un buen diseño de interacción proporciona comentarios. La retroalimentación visual es útil cuando necesita informar a los usuarios sobre el resultado de una operación. En caso de que una operación no se realice con éxito, la animación funcional puede proporcionar información sobre el problema de una manera rápida y fácil. Por ejemplo, se puede usar una animación de sacudida cuando se ingresa una contraseña incorrecta. Es fácil entender por qué el batido es un gesto bastante universal para comunicar “no”, porque un simple movimiento de cabeza es tan frecuente en la comunicación interpersonal.
  • Visibilidad del estado del sistema.- La visibilidad del estado del sistema sigue siendo uno de los principios más importantes en el diseño de la interfaz de usuario. Los usuarios quieren saber su contexto actual en un sistema en un momento dado, y una aplicación no debe hacer que sigan adivinando: debe decirle al usuario lo que está sucediendo a través de la retroalimentación visual adecuada. Las operaciones de carga y descarga de datos son excelentes oportunidades para la animación funcional. Por ejemplo, una barra de carga animada muestra qué tan rápido avanza un proceso y establece una expectativa de qué tan rápido se procesará la acción.

 

  • Transiciones de navegación.- Las transiciones de navegación son movimientos entre estados en un sitio web, por ejemplo, desde una vista de alto nivel a una vista detallada. Los cambios de estado a menudo implican cortes duros por defecto, lo que puede dificultar su seguimiento. La animación funcional facilita a los usuarios estos momentos de cambio, transportando sin problemas a los usuarios entre contextos de navegación y explicando los cambios en la pantalla creando conexiones visuales entre los estados.
  • Creación de marca.- Supongamos que tiene docenas de sitios web que tienen las mismas funciones exactas y ayudan a los usuarios a realizar las mismas tareas. Todos ellos pueden ofrecer una buena experiencia de usuario, pero la que la gente realmente ama ofrece algo más que una buena experiencia de usuario. Establece una conexión emocional con los usuarios. La animación de marca juega un papel clave en la participación de los usuarios. Puede respaldar los valores de marca de una empresa, resaltar las fortalezas de un producto y hacer que la experiencia del usuario sea verdaderamente deliciosa y memorable.

Consideraciones móviles

Hoy, casi el 50% de los usuarios accede a la web desde dispositivos móviles. ¿Qué significa esto para nosotros los diseñadores web? Significa que debemos tener una estrategia móvil para cada sitio web que diseñamos.

PRACTICAR EL DISEÑO WEB RECEPTIVO

Es esencial optimizar su sitio web para el vasto panorama de los navegadores de escritorio y dispositivos móviles, cada uno de los cuales tiene una resolución de pantalla diferente, tecnologías compatibles y una base de usuarios.

  • Apunta a un diseño de una sola columna. Los diseños de una sola columna generalmente funcionan mejor en pantallas móviles. No solo una sola columna ayuda a administrar el espacio limitado en una pantalla pequeña, sino que también escala fácilmente entre diferentes resoluciones de dispositivo y entre el modo retrato y paisaje.
  • Asegúrese de que las imágenes tengan el tamaño adecuado para pantallas y plataformas. Un sitio web debe adaptarse para verse perfecto en todos los diferentes dispositivos y en todas las resoluciones, densidades de píxeles y orientaciones. Administrar, manipular y entregar imágenes es uno de los principales desafíos a los que se enfrentan los diseñadores web cuando crean sitios web receptivos. Para simplificar esta tarea, puede utilizar herramientas como el Generador de puntos de interrupción de la imagen sensible para generar puntos de corte para imágenes de forma interactiva.

El generador de puntos de interrupción de la imagen receptiva lo ayuda a administrar múltiples tamaños de imágenes, permitiéndole generar puntos de interrupción interactivos de imágenes de forma interactiva.

 

PASAR DE HACER CLIC A TOCAR

En la web móvil, la interacción se realiza con los dedos, no con los clics del mouse. Esto significa que se aplican diferentes reglas cuando diseña objetivos táctiles e interacciones.

  • Objetivos táctiles de tamaño adecuado. Todos los elementos interactivos (como enlaces, botones y menús) deben poder seleccionarse. Si bien la web de escritorio se presta bien a los enlaces cuya área activa (es decir, cliqueable) es pequeña y precisa, la web móvil requiere botones más grandes y más pequeños que se pueden presionar fácilmente con un pulgar. Un estudio descubrió que el tamaño promedio de las almohadillas para los dedos está entre 10 y 14 milímetros y que las puntas de los dedos varían de 8 a 10, lo que hace que 10 × 10 milímetros sean un tamaño mínimo objetivo.

Los objetivos táctiles más pequeños son más difíciles de tocar para los usuarios que los más grandes.

 

  • Significadores visuales más fuertes de interactividad. En la web móvil, no hay estado de hover . Mientras que en un escritorio, es posible proporcionar retroalimentación visual adicional cuando un usuario pasa el mouse sobre un elemento (por ejemplo, revelar un menú desplegable), un usuario móvil tendría que tocar para ver esa respuesta. Por lo tanto, los usuarios deberían ser capaces de predecir correctamente cómo se comportará un elemento de interfaz con solo mirarlo.

EXPERIENCIA DE TECLADO AMIGABLE

Ciertos usuarios navegan por Internet usando su teclado, en lugar de un mouse. Por ejemplo, las personas con discapacidades motoras tienen dificultades con los movimientos motores finos necesarios para usar un mouse. Haga que los elementos interactivos y de navegación sean fácilmente accesibles para este grupo de usuarios al permitir que los elementos interactivos se enfoquen con la Tabtecla y al mostrar un indicador de enfoque del teclado.

Estas son las reglas más básicas para la navegación con el teclado:

  • Verifique que el foco del teclado sea visible y obvio. Algunos diseñadores web eliminan el indicador de enfoque del teclado porque creen que es una monstruosidad. Esto impide que los usuarios de teclado interactúen correctamente con el sitio web. Si no le gusta el indicador predeterminado proporcionado por el navegador, no lo elimine del todo; en su lugar, diseña para satisfacer tu gusto.
  • Todos los elementos interactivos deben ser accesibles. Los usuarios de teclado deben poder acceder a todos los elementos interactivos, no solo a las principales opciones de navegación o llamadas principales a la acción.

Puede encontrar requisitos detallados para la interacción con el teclado en la sección “Diseños y patrones de diseño ” del documento “WAI-ARIA Authoring Practices” del W3C.

TIEMPO DE CARGA DE LA PÁGINA DE PRUEBA

Los usuarios odian la carga lenta de páginas web. Es por eso que el tiempo de respuesta es un factor crítico en los sitios web modernos.

  • 0.1 segundos Esto se siente instantáneamente para los usuarios.
  • 1 segundo. Esto mantiene el flujo de pensamiento del usuario sin interrupciones, pero el usuario percibirá un ligero retraso.
  • 10 segundos. Este es aproximadamente el límite para mantener la atención del usuario centrada en la operación. Un retraso de 10 segundos a menudo hará que los usuarios abandonen el sitio web de inmediato.

Obviamente, no deberíamos hacer que los usuarios esperen 10 segundos para nada en nuestros sitios web. Pero incluso unos pocos segundos de retraso, lo que sucede regularmente, hacen que la experiencia sea desagradable. Los usuarios se molestarán con tener que esperar la operación.

¿Qué suele causar un tiempo de carga lento?

  • Objetos de contenido pesado (como video incorporado y widgets de presentación de diapositivas),
  • Código de back-end no optimizado,
  • Problemas relacionados con el hardware (infraestructura que no permite operaciones rápidas).

Herramientas como PageSpeed ​​Insights lo ayudarán a encontrar las causas de tiempos lentos.

Conclusión

Al igual que con cualquier aspecto del diseño, los consejos compartidos aquí son solo un comienzo. Mezcle y combine estas ideas con las suyas para obtener mejores resultados. Trate a su sitio web como un proyecto en continua evolución, y utilice los análisis y los comentarios de los usuarios para mejorar constantemente la experiencia. Y recuerde que el diseño no es solo para diseñadores, es para usuarios.