¿Cuáles son algunos errores comunes que un diseñador puede cometer al diseñar para la web y cómo se pueden evitar?


9

¿Cuáles son algunos errores comunes que se deben evitar al diseñar? Sé que el color, el texto y las imágenes juegan un papel importante en el diseño, ¡pero hay tantas otras cosas que debemos cuidar! No sé esas otras cosas, pero sé que hay tantas ...

Muchas veces obtenemos el resultado final con errores (menor-mayor-visible-oculto) ...

Entonces mi pregunta es:

  • ¿Cuáles son algunos de los errores comunes que cometemos? (también estás incluido cariño) (no es que nadie cometa errores, todos lo hacen)
  • ¿Cómo puedo / evitamos estos errores?

Respuestas:


24

Sí, esta pregunta es increíblemente amplia. Tal vez está bien como un artículo de wiki.

Para empezar, debe definir "nosotros". Hay muchas, muchas personas y roles involucrados en el diseño de sitios web y todos tienden a tener diferentes errores comunes.

Aquí hay algunos problemas que he visto que parecen aparecer una y otra vez:

  • No definir adecuadamente los objetivos del negocio para el sitio web.

  • No definir adecuadamente los indicadores clave de rendimiento y, posteriormente, no implementar sistemas para medir el éxito del sitio en función de ellos.

  • Diseñando para las necesidades del cliente, en lugar de las necesidades de los clientes del cliente.

  • No involucrar a las personas necesarias, o al menos considerar la tarea desde el aspecto de todos los roles necesarios.

    Aspectos técnicos de la gestión de productos, análisis de negocios, marketing, redacción, administración de bases de datos, desarrollo de back-end, diseño gráfico, diseño de la interfaz de usuario, diseño de experiencia de usuario, usabilidad, métricas, SEO, y más, deben todos ser considerados.

  • No planificar o al menos dibujar el diseño.

  • Olvidarse de los principios de diseño web adaptables y receptivos.

  • Olvidar diseñar para dispositivos con pantallas de diferentes tamaños y resoluciones.

  • No tener en cuenta todos los factores que afectan las velocidades de carga de la página durante la etapa de planificación, y no probar la velocidad durante su desarrollo.

    Los errores comunes incluyen cargar gráficos muy detallados en condiciones menos que óptimas (por ejemplo, como imagen de fondo) y, en general, simplemente descargar demasiados activos grandes sin optimizar las condiciones de carga.

  • Usando wireframes como documentación, en lugar de los bocetos para los que están destinados.

  • No usar métodos ágiles durante el desarrollo.

  • Diseño excesivo, un efecto secundario muy común de no usar métodos ágiles.

  • Elegir tecnologías en lugar de soluciones.

    Por ejemplo, elegir un producto empresarial por todas las razones que lo hacen bueno; incluso los que no se aplican a usted; en lugar de cuestionar si es capaz de resolver los problemas específicos para los que lo desea, bueno.

  • Olvidarse de redacción / contenido. Esto debe llegar temprano en el proceso, no más tarde.

  • Diseño de un archivo de PhotoShop en lugar de una página web real.

    Cuando se enfoca solo en Photoshop, uno no considera factores como las variaciones de fuente, otros dispositivos, tamaños de pantalla, reflujo de contenido, diseño de interacción y muchos otros.

  • Diseñando un archivo flash, o ideas extravagantes que solo se pueden lograr con un archivo flash, en lugar de un sitio web amigable con SEO lleno de contenido legible.

  • Desarrollar el diseño funcional del sitio web con un enfoque en un navegador en particular en lugar de probar continuamente en tantos navegadores como sea posible.

  • No aplicar los principios de accesibilidad al planificar, diseñar e implementar el sitio web.

  • Esperar demasiado para involucrar a los usuarios y, a menudo, encontrar algo que debe cambiarse y que podría haber sabido antes.


44
Si calificamos las preguntas por la calidad de las respuestas que producen, esta estaría en la parte superior de la lista. Fantástica respuesta.
Alan Gilbertson

1
Acepto, hago muchos de estos :( me gustaría poder votar esto dos veces ...
Jack

1
¿Qué significa "Diseñar un archivo de Photoshop en lugar de un sitio web"? demasiados efectos? ¿Puedes ampliar un poco esa bala?
Lauren-Clear-Monica-Ipsum

2
@lauren Me refiero principalmente a pasar todo el tiempo visualmente diseñando el sitio en Photoshop, en lugar de HTML, CSS y JS. Cuando se centra sólo en Photoshop, una vez que no tiene en cuenta cosas como la fuente varianzas, otros dispositivos, tamaños de pantalla, el reflujo de contenido, etc.
DA01

1
@user ¡adelante!
DA01

3

Creo que un error muy común en el diseño web es evidente en la web móvil.

Si navega por la web en un dispositivo móvil pequeño, como iPhone o BlackBerry, notará que a veces los botones son demasiado pequeños.

Ahora, este no es siempre el botón en sí, pero un error que se comete es que a menudo no hay suficiente espacio alrededor del botón.

Supongamos que estamos haciendo una encuesta y hay un botón de retroceso y un botón siguiente uno al lado del otro, necesitan espacio para respirar para que el usuario pueda presionar el botón y no tocar el incorrecto por accidente.

Esto es algo común y una consideración importante en el diseño de correo electrónico para el usuario móvil.


Creo que esto es cierto en los sitios móviles de SE. Toco constantemente el enlace "hacer preguntas" cuando tengo la intención de obtener el menú desplegable de cuenta de usuario.
Farray

2

Creo que la respuesta de DA01 ya es una excelente lista de cosas a considerar. Estoy agregando mi respuesta tanto porque es importante como para responder a la pregunta, ya que realmente me gustaría ver más respuestas a esto.

Otra consideración muy importante en el diseño de un sitio web es la velocidad. Conocer todos los factores que afectan la velocidad de carga de la página antes de comenzar a diseñar debería ayudarlo a asegurarse de que no pase mucho tiempo creando gráficos y arquitectura que luego tendrá que cambiar por completo porque el sitio web tarda 30 segundos (ejemplo extremo) en carga.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.