29 Dic Diseño de página web: una guía completa

Diseño de página web: una guía completa

Diseño de página web: una guía completa. El diseño de paginas web es un tema complejo. Los diseñadores y desarrolladores debemos estudiar la apariencia visual (cómo se ve el sitio web) como el diseño funcional (cómo resulta el sitio web). Con tantas cosas que debes de tener en cuenta, el proceso del diseño logra ser complejo.

Para simplificar las tareas, he preparado esta guía para ti. En esta guía, nos centraremos en los principios fundamentales, la heurística y los enfoques que te ayudarán a crear una excelente profesionalidad de usuario para su sitio web. Comenzamos con cosas globales, como los flujos de usuarios (cómo definir la estructura del sitio web), y luego avanzaremos hasta la página individual (qué considerar a lo largo de el diseño de la página web). De igual modo cubriremos otros aspectos esenciales del diseño, como las consideraciones y las pruebas móviles.

Diseñando los flujos de usuarios

Lo principal que debes tener en cuenta es su flujo de usuarios, o la ruta por la cual el visitante navegará por medio de su sitio web. Después de todo, el diseño de páginas web no se trata de crear una colección de páginas individuales se trata de crear flujos. Esta ruta es una serie de pasos que el visitante toma desde el punto de entrada (la primera página donde aterriza) hacia la acción específica que desea que tome (generalmente una acción de conversión, como un registro, una compra, etc.) . Lo siguiente te ayudará a determinar los flujos de usuarios a medida que diseña su sitio web.

Arquitectura informacional

La arquitectura de la información (IA) es una disciplina que te da para organizar la información de manera clara y lógica para tus clientes. Los arquitectos de la información analizan cómo los usuarios estructuran la información y crean una jerarquía que se alinea con las expectativas del usuario.

Una buena IA es el resultado de una sólida investigación de usuarios y pruebas de usabilidad. Hay varias formas de investigar las necesidades de los usuarios. A menudo, un arquitecto de información participará activamente en las entrevistas con los usuarios, la clasificación de tarjetas y las pruebas de usabilidad moderadas, donde observará cómo las personas interactúan con el diseño existente y comparten sus opiniones al respecto.

IA además se usa para definir la navegación y los menús del sitio. Cuando los practicantes de UX terminan de trabajar en un menú, utilizan otra técnica llamada \»prueba de árbol\» para demostrar que funcionará. Las pruebas de árbol se hacen antes de diseñar la interfaz real.

Navegación global

La navegación es una piedra angular de la usabilidad. Si los visitantes no obtienen navegar por su sitio web, lo más probable es que se vayan. Es por eso que la navegación en su sitio web debe llevar a cabo con algunos principios:

• Sencillez. Su navegación debería ayudar a los visitantes a entender cómo desplazarse por su sitio con la menor cantidad de clics factible.
• Claridad. No debería haber ninguna conjetura sobre lo que significa cada elección de navegación.
• Consistencia. El sistema de navegación debe ser el parecido para todas las páginas del sitio web.

Considere algunas cosas al diseñar la navegación:

• Seleccione un patrón de navegación conforme a las necesidades del usuario. La navegación debe adaptarse a las necesidades de la mayoridad de los visitantes de su sitio web. Por ejemplo, es destacado impedir la navegación del menú de hamburguesas si la mayoridad de sus usuarios no son o estan familiarizados con el significado del icono en sí.
• Prioriza las opciones de navegación. Un buen equipo de diseño priorizará las opciones de navegación de acuerdo con las tareas comunes del usuario, considerando tanto la prioridad como la frecuencia de las tareas.
• Hazlo visible. Minimice la carga cognitiva del usuario efectuando que las opciones de navegación importantes estén visibles de manera permanente. Cuando ocultamos las opciones de navegación, corremos el peligro de que los visitantes no puedan encontrarlas .
• Comunicar la ubicación actual. No indicar la ubicación del visitante actual es un problema general en muchos sitios web. Si los visitantes disponen que preguntar, \»¿Dónde estoy?\», Es una clara indicación de que su navegación requiere algo de labor. Para sitios web grandes, ofrezca indicadores de ubicación como rutas de navegación.

Diseño visual y funcional de enlaces web

Los enlaces son un elemento clave en la navegación web. Su diseño visual y funcional dispone un impacto directo en la usabilidad. Siga muchas reglas con estos elementos interactivos:

• Reconozca la desigualdad en medio de 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 para que los visitantes puedan usar el botón \»Atrás\».
• Cambia el color de los enlaces visitados. Cuando los enlaces visitados no cambian de color, los usuarios obtienen regresar a visitar involuntariamente las mismas páginas varias veces.
• Vuelva a verificar todos los enlaces. Es frustrante llegar a una página de error 404. Utilice herramientas como Dead Link Checker para encontrar enlaces rotos en su sitio web.

Botón «Atrás» en un navegador

El botón \»atrás\» es quizás el botón más utilizado en el navegador, así que asegúrese de que funcione de acuerdo con las expectativas del usuario. Cuando un usuario subsigue un enlace en una página y luego hace clic en el botón \»Atrás\», espera regresar al parecido lugar en la página original. Evite situaciones en las que hacer clic en \»Atrás\» lleva al usuario a la parte superior de la página inicial, en lugar de donde la dejó, particularmente en páginas largas. La pérdida de su lugar exige al usuario a desplazarse por el contenido que ya ha observado, lo que genera un costo de interacción innecesario.

Migas de pan

Las migas de pan son un conjunto de enlaces contextuales que funcionan como una ayuda para la navegación en los sitios web. Es un esquema de navegación secundario que generalmente enseña la ubicación del usuario en un sitio web.

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

• No use migas de pan como cambio de la navegación principal. Los visitantes deben usar el menú principal para navegar; las migas de pan solo deberían ayudar a los visitantes en eso. Cuando los visitantes confían en las migas de pan como método principal de navegación, en lugar de una característica suplementario, es una clara indicación de un diseño de navegación deficiente.
• Separe cada nivel claramente. Utilice puntas de flecha como separadores, no barras. Una barra inclinada (/) logra chocar cómodamente con las categorías de productos en los sitios web de Tienda Online Ecommerce. Si va a utilizar la barra diagonal, asegúrese de que ninguna categoría de producto tenga una barra oblicua:

Búsqueda

Algunos visitantes alcanzan o llegan a un sitio web en busca de un artículo específico. Como conocen lo que quieren, probablemente no usarán las opciones de navegación para encontrarlo. La atribución \»Buscar\» actuará como un atajo en este caso.

Los visitantes deben poder escribir texto en un cuadro de búsqueda, enviar su consulta de búsqueda y encontrar la página que son o estan 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 cuadro a continuación, basado en un estudio de A. Dawn Shaikh y Keisi Lenz , enseña la ubicación esperada del campo de búsqueda conforme a una encuesta de 142 participantes. El estudio encontró que el lugar más conveniente es la parte superior izquierda o derecha de cada página de un sitio web.
• Utilice un icono de lupa para llamar la atención sobre el área. El icono de la lupa dispone un significado universal: la mayoridad de los usuarios son o estan familiarizados con él. Nielsen Norman Group propone usar un icono esquemático, la versión más simple de la lupa.
• Dimensione el cuadro de entrada de manera adecuada. Hacer que el campo de entrada sea demasiado corto es un error general. Por supuesto, los usuarios obtienen escribir una consulta larga en un campo corto, pero solo una parte del texto será visible a la vez, lo que no es excelente para la usabilidad. Por lo tanto, cuando un cuadro de búsqueda es demasiado corto, los visitantes tienden a utilizar consultas breves e imprecisas, ya que las consultas más largas obtienen ser difíciles e incómodas de leer. Un campo de entrada de 27 caracteres se adaptará al 90% de las consultas.
• Coloque el cuadro de búsqueda en cada página. Muestre el cuadro de búsqueda en cada página para que los usuarios puedan entrar a él con independencia de dónde se encuentren en el sitio web.

Diseñar páginas individuales

Ahora que hemos revisado los conceptos esenciales del flujo de usuarios, es hora de aprender a diseñar las páginas web individuales. A continuación, resumimos las pautas clave para el diseño de sitios web que debe saber.

Estrategia de contenido

Cuando se trata del diseño de una página web, lo más primordial es diseñar en torno a los objetivos de la página. La planificación de contenido, que se refiere a la planificación, elaboración y administración de contenido en su sitio web, ayudará con este ejercicio. Cada página dispone su propio objetivo, como informar a los visitantes sobre algo o animarlos a llevar a cabo una conversión.

Una vez que comprenda el objetivo de la página, solo entonces debe trabajar en el diseño o escribir el contenido. A continuación, presentamos algunos consejos prácticos para considerar su planificación de contenido:

• Evita la sobrecarga de información. Demasiada información en una página logra abrumar cómodamente a los visitantes. Hay muchas formas sencillas de minimizar la sobrecarga de información. Una técnica general es la fragmentación: dividir el contenido en fragmentos más pequeños para ayudar a los usuarios a comprenderlo y procesarlo destacado. Un formulario de pago es un ejemplo perfecto de esto. Muestre, como extremo, de cinco a siete campos de entrada a la vez y divida el proceso de pago en pasos esenciales, como en esta captura de pantalla:
• Evite la jerga y los términos específicos de la industria. Cada término o frase desconocida que aparece en la página hará que a los visitantes les resulte bastante más difícil entender la información. Una apuesta segura es escribir para todos los niveles de lectura y escoger palabras que sean clara y cómodamente comprensibles para todos.
• Minimiza las oraciones largas. Escriba en segmentos pequeños que se puedan escanear. Según el libro de Robert Gunning \»Cómo quitarle la niebla a la escritura comercial\», las oraciones deben disponer 20 palabras o menos.
• Evite usar mayúsculas en todas las letras. El texto en mayúsculas está bien para acrónimos y logotipos. Pero es destacado impedir todo en mayúsculas para párrafos, etiquetas de formulario, errores y notificaciones. En su libro Legibility of Print , Miles Tinker menciona que las mayúsculas reducen drásticamente la velocidad de lectura.

Estructura de la página

Una página debidamente estructurada ayudará a los visitantes a encontrar cada elemento de la interfaz de usuario. Si bien no existen reglas únicas para todos, existen muchas pautas de diseño de sitios web que lo ayudarán a crear una estructura sólida:

• Hágalo predecible. Mire los sitios web de sus competidores, identifique patrones de diseño comunes y alinee las expectativas del usuario por medio de el uso de patrones de diseño que sean familiares para su público objetivo.
• Utilice una cuadrícula de diseño. Una cuadrícula de diseño divide una página en regiones principales y define las relaciones en medio de los elementos en términos de tamaño y posición. Con la ayuda de una cuadrícula, la combinación de distintas partes de una página en un diseño cohesivo se vuelve bastante más simple.
• Utilice una estructura alámbrica de baja fidelidad para privatizar elementos esenciales. Wireframing logra guardar bastante tiempo a los diseñadores web. Antes de hacer la página con elementos reales, cree un wireframe, analícelo y elimine todo lo que no sea absolutamente necesario.

Jerarquía visual

Es más probable que la gente escanee rápidamente una página web que lea todo lo que hay allí. Por lo tanto, es una buena idea optimizar el diseño de su página web para un escaneo rápido.

Logra ayudar a los visitantes a encontrar lo que precisan con una buena jerarquía visual, que se refiere a la disposición o presentación de elementos en una página web de una manera que indique su importancia (es pronunciar, dónde deben enfocar sus ojos principal, segundo, etc.) . Una buena jerarquía visual logra perfeccionar significativamente la facultad de escaneo de la página .

• Utilice patrones de exploración naturales. Como diseñadores, tenemos bastante inspección sobre dónde miran las personas cuando ven una página. El patrón en manera de C y el patrón en manera de Z son dos patrones de escaneo naturales que obtienen ayudar a establecer el sendero perfecto para los ojos del visitante. Para páginas con bastante texto, como artículos y resultados de búsqueda, el patrón F es destacado, en medio de tanto que el patrón Z es bueno para páginas que no son o estan orientadas al texto.
• Priorice visualmente los elementos importantes. Haga de los elementos importantes, como el contenido clave o sus botones principales de llamada a la acción, los puntos focales para que los visitantes los vean de inmediato.
• Cree maquetas para aclarar la jerarquía visual. Las maquetas son artefactos de diseño de alta fidelidad que dejan a los diseñadores ver cómo se verá el diseño final. Reorganizar elementos en una herramienta de diseño de paginas web es bastante más simple que hacerlo con código.

Comportamiento de desplazamiento

Un mito persistente en medio de los diseñadores web es que la gente no se desplaza. Para ser claros: todo el mundo se desplaza y la gente comienza a desplazarse casi instantáneamente cuando alcanzan o llegan a una nueva página. Sabiendo esto, puedes perfeccionar la profesionalidad del usuario con estos consejos:

Anime a los usuarios a desplazarse. A pesar de que la gente suele empezar a desplazarse tan pronto como se carga la página, el contenido en la parte superior de la página subsigue siendo muy primordial.

Pon tu contenido más atractivo en la parte superior: Una buena introducción . Una excelente introducción establece el contexto para el contenido y responde a la pregunta del visitante:

\»¿De qué se trata esta página?\» Imágenes atractivas .

Buenas imágenes obtienen acompañar al texto y ayudar a los visitantes a entender destacado la idea o el tema.

Orienta a tus usuarios. Cuando cree páginas largas, tenga en cuenta que los visitantes aún requieren un sentido de orientación (de su ubicación actual) y un sentido de navegación (otros caminos posibles).

Las páginas largas obtienen hacer que la navegación sea problemática para los usuarios; Si la barra de navegación superior pierde visibilidad cuando el usuario se desplaza hacia abajo, tendrá que desplazarse hacia arriba cuando se encuentre en lo más hondo de la página.

La resolución obvia a esto es un menú fijo que enseña la ubicación actual y que permanece en la pantalla en un área consistente en todo instante.

Proporcione comentarios visuales al cargar contenido nuevo. Esto es particularmente primordial para las páginas web en las que el contenido se carga de manera dinámica, como las fuentes de noticias. Debido a que la carga de contenido a lo largo de el traslado debe ser rápida (no más de dos a 10 segundos), logra usar una animación en bucle para indicar que el sistema está funcionando.

No secuestrar el traslado. El inspección y la libertad del usuario se encuentran en medio de las heurísticas clave para el diseño de UI acuñadas por Jakob Nielsen.

El traslado secuestrado es molesto para la mayoridad de los usuarios ya que quita el inspección y hace que el comportamiento del traslado sea completamente impredecible. Cuando diseñe un sitio web, deje que el usuario controle su profesionalidad de navegación.

Carga de contenido

Si bien una respuesta instantánea es lo destacado, hay ocasiones en las que su sitio web necesitará más tiempo para entregar contenido a los visitantes. Una mala conexión a Internet podría provocar una reacción lenta o una operación en sí misma podría tardar un escaso más en completarse. Pero no importa la causa de tal comportamiento, su sitio web debería parecer rápido y receptivo. A continuación, se muestran muchas formas de lograrlo:

• Asegúrese de que la carga regular no lleve bastante tiempo. Nuestra facultad de atención natural es muy baja. Según la investigación de Nielsen Norman Group , ¡10 segundos es casi el límite! Cuando los visitantes disponen que esperar a que se cargue un sitio web, obtienen frustrarse y marcharse. Incluso con el indicador de carga de diseño más hermoso, los usuarios se irán si se demora demasiado. Utilice pantallas de esqueleto a lo largo de la carga.
• Muchos sitios web utilizan indicadores de progreso para enseñar que se son o estan cargando datos. Si bien la intención detrás de un indicador de progreso es buena, dado que proporciona retroalimentación visual, el resultado logra ser negativo. Como menciona Luke Wroblewski , “los indicadores de progreso, por definición, llaman la atención sobre el hecho de que alguien debe esperar. Es como ver la marcha del reloj: cuando lo haces, el tiempo parece ir más lento \».

 

Las pantallas de esqueleto son una excelente alternativa a esto. Estos contenedores son esencialmente una versión temporalmente en blanco de la página, en la que la información se carga gradualmente.

En lugar de enseñar un indicador de carga, los diseñadores obtienen 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. Debido a que la información se enseña gradualmente en la pantalla, parece que las cosas son o estan sucediendo de inmediato.

Diseño de página web: una guía completa