Diseño de página web inspirado por Edward Tufte

C&C

Índice

Pregunta: ¿Cuáles son los problemas de las obras de Edward Tufte que son relevantes para un sitio web?

Pregunta: ¿Cuáles son sus sitios web recomendados en términos de contenido, relevancia gráfica, estética y efectividad, y por qué?

Pregunta: ¿Cómo puede un sitio ser efectivo, interesante y atractivo para el internauta y para el usuario en profundidad?

Pregunta: ¿Debe un sitio ser hermoso, para ser efectivo?

Pregunta: ¿Qué efectos tiene el tamaño y la resolución de la pantalla en los gráficos en la Web y cómo se desarrollan gráficos efectivos bajo estas limitaciones?

Pregunta: ¿Qué nuevos potenciales se ofrecen al diseño por tecnología web?

Pregunta: ¿Cuáles son los errores más comunes encontrados en el diseño web?

 

(P) ¿Cuáles son los problemas de las obras de Edward Tufte que son relevantes para un sitio web?

Los problemas que encuentro más relevantes son:

  • Medios de salida: los escritores de copia impresa conocen sus medios de destino, pero el contenido web puede representarse en dispositivos radicalmente diferentes en términos de tamaño, resolución e incluso el tipo de medio en sí (estaciones de trabajo de gama alta, portátiles pequeños, PDA, braille, palabras habladas, etc. )
  • Expectativas del usuario: los usuarios de la Web abordan la información de forma diferente que en papel y es más probable que escaneen la información que leerla
  • Ergonomía: la tecnología actual para la navegación web es muy inferior a la copia impresa en muchos aspectos. Las pantallas son de baja resolución, la posición de visualización es fija y los controles del mouse / teclado son muy incómodos en comparación con el lápiz y el papel.
  • Espacio de contenido: gran parte del espacio de la página web está ocupada por menús, barras de herramientas y controles de navegación, lo que reduce el espacio para el contenido
  • Errores de ortografía: causan una falla real de navegación y búsqueda en lugar de solo vergüenza o confusión
  • Conversión a copia impresa: esto a menudo falla debido a que faltan fuentes, a que faltan conversiones gráficas, así como a problemas de tamaño y diseño de página
  • Cartucho basura y desinformación: la baja resolución de las pantallas actuales junto con el parpadeo de las pantallas CRT significa que los patrones de desorden y muaré restan aún más de una pantalla que de papel y contribuyen a la fatiga y la confusión.
  • Colores: la baja resolución de las pantallas y la facilidad y el costo cero del color significa que los colores pueden usarse para transmitir información de manera más efectiva (por ejemplo, cuando todos los elementos de un mismo tema comparten el mismo color) o pueden utilizarse para exacerbar la confusión .
  • Documentación de datos: porque es mucho más fácil lanzar una página web que publicar un artículo en una revista o revista, y dado que los motores de búsqueda pueden sacar una página basada en palabras clave, es mucho más probable encontrar conocimiento de basura en el sitio. Web. Veo una gran necesidad en el futuro de que los sitios estén certificados de alguna manera para asegurar información de calidad y para que los motores de búsqueda sean sensibles a esta certificación.
  • Densidad de información: la baja resolución de las pantallas y los lentos tiempos de descarga de archivos grandes hacen que la información de alta densidad sea menos deseable en la Web. Se pueden usar varias técnicas para compensar esto, como la documentación de tamaños de archivos y tiempos de descarga, opciones de diferentes gráficos de resolución, colecciones de imágenes en miniatura y / o recortadas que, al hacer clic en ellas, muestran una versión de alta resolución de la miniatura, etc.
  • Texto versus gráficos: los tiempos de descarga, las diferentes capacidades del navegador y los problemas de resolución inclinan más el equilibrio entre el texto y los gráficos que hacia el texto.
  • La comprensión secuencial frente a la gestalt: Tufte señala que los gráficos de alta densidad en papel le permiten ver patrones complejos como una sola gestalt. Sin embargo, las pantallas web interactivas pueden guiarlo secuencialmente a través de pasos que lo exponen solo al contexto que necesita conocer en función de sus elecciones anteriores, como un árbol de teléfono visual. En algunos casos, esto es más efectivo que una pantalla de alta densidad, en otros casos es menos.
  • Mantener el contexto: es mucho más fácil perderse en un sitio web que en un libro porque hay muchos caminos por seguir. Por lo tanto, las herramientas de navegación efectivas son mucho más importantes en la Web que para las copias impresas.

Regresar al índice


(P) ¿Cuáles son sus sitios web recomendados en términos de contenido, relevancia gráfica, estética y efectividad, y por qué?

Entre los sitios que más me gustan son:

  • El sitio de Skywatch de la NASA en:

http://spaceflight.nasa.gov/realdata/sightings/index.html.
Proporciona información sobre muchos satélites grandes en órbita. La página inicial explica el propósito en formato de texto y de medios de transmisión, analiza los recursos necesarios en términos de tiempo de descarga y tamaño de archivo, y contiene un buen control de navegación de dos niveles que lo dirige a cualquier parte del sitio de la NASA.

El Applet de Java proporciona información sobre satélites y posiciones orbitales que sirven tanto al ingeniero técnico como al público a través de tablas y un mapa de color de pistas orbitales anotadas contra constelaciones identificadas y delineadas para una ubicación determinada. Es fácil de usar, atractivo y altamente informativo.

  • Otro buen sitio es: http://www.nsf.gov. Su página inicial es atractiva, compacta, usa pocos gráficos y descarga rápidamente. También contiene una buena información de control de navegación de dos niveles, contactos, privacidad, ayuda y personalización, una herramienta de búsqueda, opciones para la categoría de espectador (estudiantes, profesores, Investigadores Principales), y muchas de las páginas siguientes ofrecen varias opciones para visualización de datos, como HTML, texto plano y formato PDF. Muchas páginas, pero no todas, conservan la misma apariencia y controles de navegación de la página de inicio.

Se pueden encontrar algunos gráficos excepcionalmente informativos haciendo clic en un “Mapa del mercado” en: http://www.smartmoney.com/maps/

Si bien inicialmente se abre con un anuncio totalmente inútil y molesto que permanece en la pantalla durante mucho tiempo y no le da ninguna pista sobre lo que sigue, la pantalla resultante vale la pena. Contiene representaciones de muchas acciones, agrupadas por sector y codificadas por áreas coloreadas cuyo tamaño refleja su participación en el mercado, y cuyo tono e intensidad muestran el rendimiento de sus acciones: rojo brillante significa declives abruptos, negro significa cambio y verde brillante que indica fuertes ganancias , con tonos intermedios intermedios. Echando un vistazo a la pantalla de hoy, puedo ver que las acciones tecnológicas están muy bajas, las existencias de energía están subiendo, al igual que los productos básicos del consumidor. Puedo ver un sector con más detalle, puedo desplazar el ratón sobre un área para identificar el stock específico y obtener información sobre el rendimiento, y puedo hacer clic en el stock para obtener información detallada. También contiene un panel que te permite personalizar el mapa. Es un buen ejemplo de gráficos de funcionamiento múltiple que le permiten ver información de muchas maneras diferentes.

Regresar al índice


(P) ¿Cómo puede un sitio ser efectivo, interesante y atractivo para el internauta y para el usuario en profundidad?

Un buen sitio web incorpora lo siguiente:

  • Se basa en un diseño probado por el usuario (a diferencia de corporativo, estructural o cualquier otro punto de vista)
  • Su página inicial contiene HTML simple de baja tecnología que se carga rápidamente, no requiere complementos, funciona en casi todos los navegadores, coloca la información más importante cerca de la parte superior y le dice a las personas de inmediato:
  • qué temas cubre o qué problemas aborda
  • si tiene la información que buscan
  • si la información es actual (por ejemplo, fecha-última-modificación)
  • qué evidencia de que la información es precisa

La página inicial tiene un logotipo de identificación y contiene o tiene enlaces a:

  • un mapa del sitio
  • Información del contacto
  • información sobre la organización responsable
  • un formulario de comentarios del sitio o consejos para un grupo de discusión
  • garantías de seguridad y privacidad
  • sitios relacionados
  • Información sobre la tecnología necesaria para ver páginas posteriores en el sitio (por ejemplo, versiones del navegador, descargas necesarias, tamaños de archivos o tiempos de carga propia)

Las páginas siguientes en el sitio poseen muchas de las cualidades de la página inicial, pero también:

  • use la misma apariencia que la página de inicio en términos de apariencia y ubicación del logotipo y otra información que identifique de manera única el sitio (las hojas de estilo externas son útiles para esto)
  • proporcione controles de navegación coherentes que tengan el mismo aspecto y estén en la misma ubicación, como los botones “Siguiente”, “Anterior” y “Inicio” (especialmente evite las páginas donde el botón “Atrás” no funciona)
  • mostrar contexto y ubicación: en sitios complejos es muy importante saber dónde se encuentra y dónde ha estado. Si bien los marcos presentan importantes problemas de usabilidad, a veces se utilizan para proporcionar una tabla de contenidos que permanece constante en todo el sitio. Las URL que contienen solo palabras simples y sin símbolos pueden ayudar a identificar la ubicación en un sitio, así como diagramas de árbol que resaltan la ubicación actual del usuario.
  • controle las ventanas correctamente: una proliferación de ventanas que permanece alrededor provoca confusión y confusión (así como riesgos de seguridad si el usuario está haciendo algo más que navegar) pero las ventanas que se cierran automáticamente pueden asustar y confundir al usuario: el diseñador web debe sopesar estas cuestiones basadas en las circunstancias que se aplican

Todas las páginas usan:

  • un fondo atenuado que no interfiere con la superposición de información
  • buen contraste entre el fondo y el texto o los controles
  • colores brillantes con moderación para resaltar los contenidos importantes
  • el mismo color para todos los artículos que pertenecen a la misma categoría
  • texto a menos que los gráficos le confieran una ventaja real
  • información estructural visible, como títulos, subtítulos y listas de viñetas en lugar de párrafos largos
  • espacio en blanco como delimitador primario
  • texto sustancialmente reducido en comparación con copia impresa
  • revisión ortográfica para garantizar el funcionamiento de las funciones de navegación y búsqueda

Regresar al índice


(P) ¿Debe un sitio ser hermoso, para ser efectivo?

Hasta cierto punto, la belleza está en el ojo del espectador, ya que un usuario entrenado para interpretar ciertos patrones puede ver la belleza en un sitio que tenga sentido para ellos, pero que parezca feo y desorganizado para alguien sin sus antecedentes (a menudo vemos lo que esperamos que lo que está allí, más bien como una rana que es ciega en gran medida a cualquier cosa que no sea pequeña, oscura y moviéndose bruscamente, una mosca).

Sin embargo, para los sitios que no requieren conocimiento especializado, creo que la estética puede lograrse a través de un diseño claro que enfatiza la usabilidad, especialmente si las adiciones estéticas solo se agregan cuando están justificadas conscientemente en términos de su utilidad.

Regresar al índice


¿Qué efectos tiene el tamaño y la resolución de la pantalla en los gráficos en la Web y cómo se desarrollan gráficos efectivos bajo estas limitaciones?

Este es un tema grande e importante y quizás sea la razón de las principales diferencias entre el diseño en la Web y el papel:

  • Diferencias de tamaño: si limitamos nuestra discusión a computadoras y pantallas “tradicionales”, las diferencias en el tamaño de la pantalla (en oposición a la resolución) no afectan la comprensión de los gráficos, ya que las pantallas grandes de 19 pulgadas tienen solo 2.5 veces el área pequeña Pantallas de 12 pulgadas. Sin embargo, ahora vemos un número cada vez mayor de dispositivos, como PDA, teléfonos celulares e incluso relojes de pulsera, que navegan por la Web y cuyas pantallas son 100 veces más pequeñas. Las páginas web típicas simplemente no caben en tales dispositivos, y los diseños de página deben estar específicamente orientados para ellos, aunque XML / XSL a menudo se puede utilizar para rediseñar documentos más grandes para que quepan.

En comparación con los grandes mapas desplegables o las páginas que permiten que el ojo pase fácilmente por áreas extensas, el visor web se basa en enlaces a varias páginas que contienen partes de la vista, por lo que se pierde el contexto general. sabe lo difícil que es seguir una ruta que cruza diferentes páginas; de manera similar, las comparaciones en un gran cuadro científico son muy difíciles de hacer cuando el espectador no puede ver todo a la vez.

Además, las pantallas LCD actuales ofrecen ángulos de visión de pantalla limitados, por lo que incluso si fueran de gran tamaño o de alta resolución, dificultarían la comprensión en áreas extensas.

  • Diferencias en la resolución: estas son incluso más importantes que el tamaño. Teóricamente, incluso una página diseñada para una pantalla de 20 pulgadas cabría en la pantalla de un reloj de pulsera si la resolución era la misma, pero las pantallas de baja resolución no solo obligan al usuario a desplazarse horizontalmente, sino que pueden dejar de renderizar grandes partes de la misma.

En comparación con el papel, las pantallas de uso común en la actualidad tienen de cinco a 10 veces menos resolución. Como resultado, los detalles son gruesos, el texto pequeño es tenue y borroso, y la visualización es fatigosa, especialmente cuando el parpadeo de la pantalla está presente. Además, se pierde el contexto general, lo que obliga al usuario a recordar y conectar información de pantallas anteriores, algo para lo cual la mente humana no es adecuada.

Por otro lado, la Web proporciona herramientas que compensan parcialmente esto:

  • a pesar de ciertos inconvenientes de usabilidad, especialmente con respecto a la navegación, uno puede usar marcos para mostrar una vista general de una escena en un marco en la forma de un mapa de imágenes seleccionable: cuando el usuario hace clic en un área en el mapa general, una alta resolución La vista de una parte de la imagen aparece en el 2 ° cuadro. Esto es particularmente efectivo si la imagen en el primer cuadro resalta el área en la que se hizo clic, muestra la posición actual del mouse relativa al mapa y si el mapa de imagen incluye una gran cantidad de solapamiento así como varios grados de acercamiento, mejorando el posibilidad de mostrar todo el contexto que se desea.
  • a veces, la animación se puede usar efectivamente en lugar de “pequeños múltiplos”: una imagen suave y que cambia rápidamente, especialmente cuando está bajo el control total del usuario, a menudo puede transmitir información mejor que una página estática de alta resolución

 

  • Sin embargo, tenga en cuenta que las ventajas de tamaño y resolución de las pantallas de papel desaparecerán en 5-10 años: ya se encuentran en el mercado pantallas LCD de dos megapíxeles; IBM presentó recientemente una pantalla LCD de 22 pulgadas con asombrosos 9 megapíxeles que rivaliza completamente con la página impresa (en la actualidad es muy cara, pero seguramente bajará de precio), y la tecnología Sub-pixel ClearType (TM) de Miscosoft mejora enormemente la resolución efectiva del texto y imágenes en blanco y negro, a veces en un 300%

Además, las pantallas LCD más nuevas tienen un campo de visión más amplio y no parpadean. En un futuro cercano, las Tablet PC con entrada de lápiz pueden sostenerse y manipularse como una revista, son superiores para apuntar, dibujar y escribir que ratones y teclados, y se aumentarán con la entrada y salida de voz y audio. Las pantallas de gran tamaño están en camino, así como las pantallas de retina para computadoras portátiles que proporcionan verdaderas imágenes estereoscópicas de alta resolución que le parecen al usuario de 6 pies de ancho.

Regresar al índice


(P) ¿Qué nuevos potenciales se ofrecen para el diseño de la tecnología web?

La Web puede proporcionar un entorno de información más rico que el que es posible con páginas estáticas en papel, como por ejemplo:

  • Información actualizada: la información web no solo puede ser más actual que la copia impresa, sino que puede ser instantánea, como en el caso de las cámaras web de tráfico, las reservas de boletos, los informes de stock, las lecturas GPS, etc.
  • Animación controlada por el usuario: los pequeños múltiplos se usan generalmente para simular la animación en papel, pero la Web ofrece muchas más posibilidades, como

 

  • movimiento en tiempo real
  • control del usuario de la velocidad y la dirección (hacia adelante y hacia atrás)
  • animación de subconjuntos seleccionados por el usuario para que se puedan observar transiciones particulares a diferentes velocidades y direcciones
  • congelar fotogramas que capturan uno o más fotogramas en animaciones
  • respuesta en tiempo real a la entrada proporcionada por el usuario o por fuentes externas

 

  • Gráficos 3D: a menudo es difícil encontrar el punto de vista correcto para escenas 3D complejas en papel, ya que cualquier vista individual, o incluso un conjunto de vistas, puede ocultar o distorsionar información importante. Pero las visualizaciones de datos en 3D en la Web, tal como lo proporciona VRML u otros programas, permiten al usuario ver los datos desde cualquier ángulo. Hace muchos años vi una demostración intuitiva de J.W Tukey que exploró conjuntos de datos multidimensionales (10-12 dimensiones) de forma interactiva. Inicialmente, todo lo que aparecía eran conjuntos de puntos aleatorios sin sentido, pero a medida que colapsaba los datos a lo largo de ciertas dimensiones y rotaciones aplicadas, emergían curvas fuertes y simples que ilustraban relaciones importantes.

Si bien es cierto que el control de los objetos 3D es algo difícil hoy en día, como lo hacemos a través de un mouse sobre una superficie 2D, será más fácil en el futuro cercano a través de auriculares atractivos y livianos que ofrecen una visión estereoscópica verdadera combinada con cámaras estéreo que rastrean las posiciones de las manos en 3D, lo que nos permite “agarrar” y manipular imágenes en 3D tan fácilmente como lo hacemos con objetos del mundo real.

 

  • Gráficos de alta densidad: aunque la copia impresa ofrece una resolución más alta que las pantallas actuales, ciertas tecnologías web le permiten ampliar para ver los conjuntos de datos con mucho más detalle del que es posible en papel.
  • Análisis exploratorio de datos: la Web permite no solo ver, sino manipular y aplicar transformaciones a los datos para descubrir relaciones que nunca podrían observarse en papel
  • Dispositivos de información universal: la Web, especialmente a través del acceso inalámbrico, puede unir todas las formas de información que hoy ofrecen muchos dispositivos diferentes: relojes, despertadores, radios, TV, periódicos, revistas, libros, CD, computadoras, videojuegos, registros legales, financieros y médicos, licencias, permisos, aulas, teatros, etc.

Regresar al índice


(P) ¿Cuáles son los errores más comunes encontrados en el diseño web?

Entre los defectos de diseño más molestos que veo con frecuencia son:

  • Falta de información de fecha / hora: la mayoría de la información es volátil hasta cierto punto. Una “fecha de última modificación” es esencial para la mayoría de los sitios, y cualquier información dependiente del tiempo en una página necesita documentación de tiempo
  • Navegación confusa, ventanas que desactivan la navegación o demasiadas ventanas emergentes
  • Las páginas iniciales que cargan demasiado despacio o requieren complementos o recursos excepcionales, o scripts que deshabilitan los navegadores
  • Falta de información del sitio, como un mapa del sitio e información de contacto
  • Desorden en términos de un diseño confuso, párrafos largos, gráficos que distraen, fondos chillones, uso incoherente del color (diferentes colores dentro del mismo tema o el mismo color para diferentes temas), patrones de moiré
  • Insensibilidad a límites técnicos o de usuario: las páginas web deben proporcionar recursos de visualización alternativos para aquellos con navegadores, computadoras o limitaciones físicas limitadas.

Regresar al índice


Original en inglés por Larry Gales: http://staff.washington.edu/larryg/Classes/Rinflux/zz-influx.html