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

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

Índice

  1. Pregunta: ¿Cuáles son los problemas de las obras de Edward Tufte que son relevantes para un sitio web?
  2. Pregunta: ¿Cuáles son sus sitios web recomendados en términos de contenido, relevancia gráfica, estética y efectividad, y por qué?
  3. Pregunta: ¿Cómo puede un sitio ser efectivo, interesante y atractivo tanto para los internautas como para el usuario en profundidad?
  4. Pregunta: ¿Debe un sitio ser hermoso para ser efectivo?
  5. Pregunta: ¿Qué efectos tienen 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?
  6. Pregunta: ¿Qué nuevos potenciales se ofrecen al diseño mediante la tecnología web?
  7. Pregunta: ¿Cuáles son los errores más comunes que se encuentran 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 temas que encuentro más relevantes son:
Medios de salida: los redactores de copias impresas conocen sus medios de destino, pero el contenido web se puede reproducir en dispositivos radicalmente diferentes en términos de tamaño, resolución e incluso el tipo de medio en sí (estaciones de trabajo de alta gama, computadoras portátiles pequeñas, PDA, braille, palabras habladas, etc. )

Expectativas del usuario: los usuarios de la Web se acercan a la información de manera diferente que en papel y es más probable que escaneen información que la lean.

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á ocupado por menús, barras de herramientas y controles de navegación, lo que reduce el espacio para el contenido.

Errores ortográficos: estos causan fallas reales de navegación y búsqueda en lugar de simplemente vergüenza o confusión.

Conversión a copia impresa: esto a menudo falla debido a fuentes faltantes, conversiones gráficas faltantes, así como problemas de tamaño y diseño de página.

Gráficos basura y falta de informació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 a una pantalla que en 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 solo tema comparten el mismo color) o pueden usarse incorrectamente para exacerbar la confusión.

Documentación de datos: debido a que es mucho más fácil lanzar una página web que publicar un artículo en una revista o una revista, y debido a que los motores de búsqueda pueden desenterrar una página basándose en palabras clave, existe una probabilidad mucho mayor de encontrar conocimiento basura en el Web. Veo una gran necesidad en el futuro de tener sitios certificados de alguna manera para asegurar la calidad de la información y tener motores de búsqueda sensibles a esta certificación.

Densidad de información: la baja resolución de las pantallas y los tiempos de descarga lentos para archivos grandes hacen que la información de alta densidad sea menos deseable en la Web. Se pueden utilizar varias técnicas para compensar esto, como la documentación de tamaños de archivo y tiempos de descarga, opciones de gráficos de diferentes resoluciones, 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 el equilibrio del texto versus los gráficos más hacia el texto.

Comprensión secuencial versus 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 telefónico visual. En algunos casos, esto es más efectivo que una pantalla de alta densidad, en otros casos lo es menos.

Mantener el contexto: es mucho más fácil perderse en un sitio web que en un libro porque hay muchos caminos a seguir. Por tanto, las herramientas de navegación eficaces son mucho más importantes en la Web que en las copias impresas.

(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 están:

El sitio de NASA Skywatch 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 medios de transmisión, analiza los recursos necesarios en términos de tiempo de descarga y tamaño de archivo, y contiene un agradable 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 colores de pistas orbitales anotadas contra constelaciones identificadas y delineadas para una ubicación determinada. Es fácil de usar, atractivo y muy informativo.

Otro buen sitio es: http://www.nsf.gov Su página inicial es atractiva, compacta, usa pocos gráficos y se descarga rápidamente. También contiene un agradable control de navegación de dos niveles, información de contacto, 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 sin formato y formato PDF. Muchas páginas, pero no todas, conservan la misma apariencia y los mismos controles de navegación que 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 completamente inútil y molesto que permanece en la pantalla durante mucho tiempo y no le da idea de lo que sigue, la pantalla resultante bien 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 desempeño de sus acciones: rojo brillante significa caídas pronunciadas, negro significa que no hay cambios y verde brillante indica fuertes ganancias. , con tonos intermedios en el medio. Al mirar la pantalla de hoy, puedo ver que las acciones de tecnología han bajado, las acciones de energía han subido, al igual que los productos básicos de consumo. Puedo ver un sector con más detalle, puedo mover el mouse sobre un área para identificar el stock específico y obtener información de 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 multifuncionales que le permiten ver información de muchas formas diferentes.

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

Un buen sitio web incorpora lo siguiente:

Se basa en un diseño centrado en el usuario (a diferencia del punto de vista corporativo, estructural o cualquier otro), probado por el usuario.

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 la gente de inmediato:

  • qué temas cubre o qué temas aborda
  • si tiene la información que buscan
  • si la información es actual (por ejemplo, fecha de última modificación)
  • qué evidencia de que la información es precisa

La página inicial tiene un logo identificativo 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 sugerencias para un grupo de discusión
  • garantías de seguridad y privacidad
  • sitios relacionados

Información sobre la tecnología necesaria para ver las páginas siguientes en el sitio (por ejemplo, versiones del navegador, descargas necesarias, tamaños de archivos o tiempos de carga propia)

Las páginas posteriores del sitio poseen muchas de las cualidades de la página inicial, pero también:

  • utilizar la misma apariencia que la página de inicio en términos de la 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)
  • proporcionar controles de navegación coherentes que tengan el mismo aspecto y se encuentren en la misma ubicación, como los botones «Siguiente», «Anterior» e «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 contenido 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.
  • controlar correctamente las ventanas: una proliferación de ventanas que permanecen alrededor causa desorden y confusión (así como riesgos de seguridad si el usuario está haciendo más que navegar) pero las ventanas que se cierran automáticamente pueden asustar y confundir al usuario: el diseñador web debe sopesar estos problemas basados en las circunstancias que se aplican

Todas las páginas utilizan:

  • un fondo silenciado que no interfiere con la información superpuesta
  • buen contraste entre el fondo y el texto o los controles
  • colores brillantes con moderación para resaltar contenidos importantes
  • el mismo color para todos los artículos que pertenecen a la misma categoría
  • texto a menos que los gráficos 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 principal
  • texto sustancialmente reducido en comparación con la copia impresa
  • revisión ortográfica para asegurar que las funciones de navegación y búsqueda funcionen

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

Hasta cierto punto, la belleza está en el ojo del espectador en el sentido de que un usuario entrenado para interpretar ciertos patrones puede ver la belleza en un sitio que tiene sentido para ellos, pero parece feo y desorganizado para alguien sin sus antecedentes (a menudo vemos lo que esperamos más bien que lo que está allí, más bien como una rana que es en gran parte ciega a cualquier cosa que no sea pequeña, oscura y que se mueva bruscamente: una mosca).
Sin embargo, para los sitios que no requieren conocimientos especializados, creo que la estética se puede lograr a través de un diseño claro que enfatice la usabilidad, especialmente si las adiciones estéticas solo se agregan cuando se justifican conscientemente en términos de su utilidad.

¿Qué efectos tienen 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 restricciones?

Este es un tema amplio 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 las computadoras y pantallas «tradicionales», las diferencias en el tamaño de la pantalla (a diferencia de la resolución) no afectarán mucho la comprensión de los gráficos, ya que las pantallas grandes de 19 pulgadas tienen solo 2.5 veces el área de las pequeñas. Pantallas de 12 pulgadas. Sin embargo, ahora vemos un número creciente 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 dichos dispositivos, y los diseños de página deben estar dirigidos específicamente a ellos, aunque XML / XSL a menudo se puede utilizar para reutilizar documentos más grandes para que quepan.

En comparación con las páginas o los mapas desplegables grandes que permiten que el ojo recorra áreas extensas con facilidad, 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: cualquiera que use un mapa tipo libro sabe lo difícil que es seguir una ruta que atraviesa distintas páginas; De manera similar, las comparaciones en una tabla científica grande son muy difíciles de hacer cuando el espectador no puede verlas todas a la vez.

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

Diferencias de resolución: son incluso más importantes que el tamaño. En teoría, 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 fuera la misma, pero las pantallas de baja resolución no solo obligan al usuario a desplazarse horizontalmente, sino que pueden fallar en la representación de la mayor parte de la misma.

En comparación con el papel, las pantallas de uso común en la actualidad tienen entre cinco y diez veces menos resolución. Como resultado, los detalles son toscos, el texto pequeño es tenue y borroso y la visualización es agotadora, especialmente cuando la pantalla parpadea. Además, se pierde el contexto general, lo que obliga al usuario a recordar y conectar la información de las pantallas anteriores, algo para lo que 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, se pueden usar marcos para mostrar una vista general de una escena en un marco en forma de un mapa de imagen en el que se puede hacer clic: 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 segundo 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 en relación con el mapa, y si el mapa de la imagen incluye una gran cantidad de superposición, así como diversos grados de zoom, mejora la posibilidad de mostrar todo el contexto que se desea.
  • a veces, la animación se puede utilizar eficazmente en lugar de «pequeños múltiplos»: una imagen fluida 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 del papel sobre las pantallas desaparecerán en 5 a 10 años: ya se encuentran en el mercado pantallas LCD de dos megapíxeles en computadoras portátiles; IBM presentó recientemente una pantalla LCD de 22 pulgadas con una asombrosa cantidad de 9 megapíxeles que rivaliza a fondo con la página impresa (actualmente es muy cara pero seguramente bajará de precio), y la tecnología de subpíxeles ClearType (TM) de Miscosoft mejora enormemente la resolución efectiva del texto e 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 tabletas con entrada de lápiz se pueden sostener y manipular como una revista, son superiores para señalar, dibujar y escribir que los ratones y teclados, y se verán reforzadas por la entrada / salida de audio y voz. Están en camino pantallas muy grandes, así como pantallas retinianas para computadoras portátiles que brindan imágenes estereoscópicas de alta resolución que al usuario le parecen tener 6 pies de ancho.

(P) ¿Qué nuevos potenciales se ofrecen al diseño mediante la tecnología web?

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

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, reservas de boletos, informes de stock, lecturas de GPS, etc.

Animación controlada por el usuario: los múltiplos pequeños se utilizan normalmente para simular la animación en papel, pero la Web ofrece posibilidades mucho mayores, 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 fuentes externas

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

Si bien es cierto que el control de objetos 3D es algo difícil hoy en día, como solemos hacerlo a través de un mouse sobre una superficie 2D, será más fácil en un futuro cercano a través de unos atractivos y livianos auriculares que ofrecen verdadera visión estereoscópica 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 los 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 acercarse para ver conjuntos de datos con mucho más detalle de lo 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 universales: la Web, especialmente a través del acceso inalámbrico, puede unir todas las formas de información que hoy en día son provistas por 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.

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

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

Falta de información de fecha / hora: la mayor parte 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 dato dependiente del tiempo en una página necesita documentación de tiempo.

Navegación confusa, ventanas que deshabilitan la navegación o demasiadas ventanas emergentes.

Páginas iniciales que se cargan demasiado lentamente 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 llamativos, uso inconsistente del color (diferentes colores dentro del mismo tema o el mismo color para diferentes temas), patrones muaré.

Insensibilidad a los 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.

Fuente: http://staff.washington.edu/larryg/Classes/Rinflux/zz-influx.html

travel_wallet
aa
Permit-21

The perfect companion for traveling overseas. Our travel wallet is designed to carry not just your personal IDs and credit cards, you can also fit your IDP Booklet and Passport! The travel wallet can also fit a most regular sized smart phones. Its RFID-blocking feature means your credit cards are safe whenever you travel.

Size: 12 x 18 cm

Features:

– RFID-blocking travel wallet
– 17 card slots
– Passport holder
– IDP Booklet hold
– Coin slot with zipper closure
– Wristlet included
– Embossed with International Drivers Association logo