Source: https://www.eworldsports.net/web-page-design-inspired-edward-tufte-spanish/
Timestamp: 2019-05-23 23:35:40+00:00

Document:
Web Page Design Inspired by Edward Tufte [Spanish] - eWorldSports.net
Home Uncategorized Web Page Design Inspired by Edward Tufte
Web Page Design Inspired by Edward Tufte [Spanish]
Diseño de página web inspirado por Edward Tufte
Original in English by Larry Gales
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.
(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.
(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 sobre la organización responsable
un formulario de comentarios del sitio o consejos para un grupo de discusión
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
(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.
¿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.
(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
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.
(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.
Previous articleHow To Code: Pascal [Slovenian]
Next articleSnoop for MS Windows [Polish]
Snoop for MS Windows [Polish]
Top 5 Tips in Achieving Work-Life Balance
Paul - September 23, 2018
A lot of factors come into play and need to be considered if you want to select the best pair of cross training shoes...
Paul - March 9, 2017
The right equipment is essential to peak performance.The models, types, material and technologies of soccer cleats can be overwhelming for those people who don’t...
Paul - December 26, 2016
Whether you love soccer or not, you would probably agree that shoes used in this sport are some of the most attractive and professionally...
Adidas Performance Men’s Copa Mundial Soccer Shoe Review
Paul - January 20, 2017
If you love leather shoes and you also love soccer, Adidas Performance Men’s Copa Mundial is made for you. The high end sports shoe is...
Adidas Performance Men’s Ace 16.2 Primemesh FG/AG Soccer Shoe Review
For a long time, Adidas used to be a high end shoes manufacturer. Today, the leading sports gear manufacturer is positioning itself as a...

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución

 resolución 
 resolución 
 resolución 
 resolución