Principios de Diseo Web Diseo

Por qu son ms las pginas web diseadas como son? Pgina web muchos se ven muy similares. Por qu?
La razn por la cual las pginas web para muchos pueden parecer similares, en cierta medida porque la gente se copian unos a otros de diseo. Pero lo ms importante es que hay razones simples y eficaces para la forma comn en que se estructura el diseo de pginas web. La estructura comn no sucede por casualidad, se basa en simple, fcil de entender los principios de diseo.

Estructura de el New York Times

Mira a un artculo del New York Times public en la web sobre el 17 de diciembre de 2002 como se muestra a continuacin. Por qu es la pgina dividida en tres columnas principales, con el artculo principal en la columna central?

Columna de la izquierda, por lo general contiene las herramientas de navegacin.

Publicidad dentro de la columna de texto principal para maximizar el acaparamiento de la atencin.

Texto principal de una columna del medio ms amplio, 59-80 posiciones de caracteres por lnea.

Columna de la derecha, contiene informacin adicional del uso de la lectura del texto principal.

Cmo el New York Times pgina est

La mayora de las pginas web tienen una estructura comn. Por lo general, tres o cuatro columnas, el texto

estructurado

principal en la columna central, la informacin de navegacin en la columna izquierda, lectura adicional conectado al texto principal en la columna derecha. Por qu es esta estructura tan comn? Como se puede ver en la imagen de arriba, el New York Times el artculo tiene un ancho de 780 pxeles. Por qu las pginas web para que muchos tienen una estructura similar?

1. Ancho de la pantalla

La explicacin es bastante simple. Ntese en primer lugar, que es muy complicado, para un lector de la pgina web, a tener que desplazarse horizontalmente para ver una pgina web. Debido a esto, la mayora de la gente da su navegador de Internet una ventana lo suficientemente amplia, por lo que la mayora de las pginas web se puede mostrar sin desplazamiento horizontal. Esto significa que la mayora de la gente da su navegador una ventana de visualizacin principal, que es por lo menos 780 pxeles de ancho. Unas pocas personas con las pantallas pequeas en vez puesto su ventana de visualizacin principal de 640 pxeles. En segundo lugar, se sabe que muchos visitantes de un sitio web no van ms all de la primera pgina. Por lo tanto, los diseadores de sitios web quieren meter tanta informacin como sea posible en una sola pgina. As que, por lo general el diseo de sus pginas web para su visualizacin con una anchura de al menos 780 o 640 pxeles, a veces un poco ms. Cuando el ancho es mayor que este, a menudo poner la informacin noabsolutamente-necesario en la columna de la derecha. Tenga en cuenta que una persona con una ventana de

pixel de ancho 640 puede leer las columnas izquierda y central en el New York Times ejemplo anterior sin necesidad de desplazamiento horizontal.

2. Tamao de la Fuente

Ahora, cmo se puede meter un montn de informacin en una pgina de tamao fijo? Mediante el uso de fuentes de pequeo tamao. El texto principal en el artculo del New York Times utiliza tamao de la fuente "-1", un paso ms pequea que la configuracin de su navegador web. La mayora del texto en los mrgenes utiliza el tamao de fuente "-2", combinado con el tipo de letra Arial, que es bueno para abarrotar un montn de texto en un espacio pequeo y todava mantenerlo legible. La eleccin de un tipo de letra serif para el artculo principal se debe a que esto da a la pgina de un peridico como el sentimiento, y tambin las fuentes serif son ms fciles en los ojos al leer textos largos. Muchas otras pginas web, que no tiene ningn artculo principal grande, no utilizar las fuentes serif en absoluto.

3. Longitud de la lnea y el nmero de columnas

En tercer lugar, es bien sabido que la gente puede leer ms rpido de texto si el texto tiene alrededor de 30 a 50 caracteres por lnea. Ms de 80 caracteres por lnea hace que el texto mucho ms difcil de leer. Esto significa que con un tamao de letra pequea, y las ventanas del navegador configurado para 700 o ms pxeles de ancho, el texto tiene que ser dividida en columnas, por lo general tres o cuatro columnas. Pero no se puede, como en un peridico impreso en papel, permiten a los usuarios leer una columna hacia abajo, y luego continuar en la parte superior de la columna de al lado, porque se requiere el desplazamiento hacia arriba y hacia abajo para que el lector para cambiar entre las

columnas. Muchas pginas web tienen por lo tanto el texto principal en una columna central ms ancha, y utiliza las dos columnas de la frontera para los ndices, los comandos y los anuncios. El lector del texto principal en la columna del medio, no volver a necesitar para desplazarse hacia arriba y hacia abajo. Muchas personas tienen sus navegadores de Internet establecido en un tamao de fuente predeterminado de 16pt, y esta es la configuracin por defecto de los navegadores ms importantes en la instalacin. Esta configuracin predeterminada ofrece lo mejor legibilidad de texto que no est dividida en columnas. Estos textos necesitan una fuente de tamao grande, de lo contrario no habra demasiados personajes mucho por lnea. Pero ya que la mayora de pginas web ms importantes limitar la longitud de la lnea de varias formas, tambin puede utilizar las fuentes en relacin menor que la configuracin por defecto de los navegadores web. En resumen: a. La gente da sus navegadores web amplios ventanales, para evitar el desplazamiento horizontal. b. Navegadores web tienen un tamao de fuente por defecto bastante grande, para obtener un nmero razonable de personajes con tan amplias ventanas del navegador web. c. Pero las pginas web ms importantes reducir la longitud de la lnea mediante el uso de columnas, y

se puede utilizar un tipo de letra ms pequeo que la configuracin por defecto del navegador.

Cmo la pgina principal de Yahoo est estructurado

Mira la pgina principal de Yahoo. Esta pgina, ya que pareca que el 21 de septiembre de 2001, se muestra a continuacin con algunas balas aadido y lneas para mostrar la estructura de la pgina. Tenga en cuenta que la pgina utiliza varias columnas de texto pequeo en el tipo de letra Arial de meter un mximo de contenido en un espacio dado y sigue haciendo el texto legible.

4. rbol de la estructura con

En la parte superior de la pgina de Yahoo por encima, he aadido arcos negro y las balas para mostrar la

arcos 3.14 / nodo

estructura principal de la pgina. Tenga en cuenta que la pgina est organizada en una estructura de rbol, donde cada nodo del rbol tiene entre 3 y 14 arcos de salida. Los objetos de informacin son por lo general ya sea de unos 200 pxeles de ancho, o que contienen toda su informacin en una sola lnea. El contenido de las pginas web de muchos, como el ejemplo por encima de Yahoo, una estructura de rbol con mltiples subramas. Por qu? Si no exista una estructura, el lector tendra que leer todo el texto para encontrar lo que el lector est buscando. Con una estructura de rbol, un lector puede explorar rpidamente el rbol, decidiendo en cada nodo en el que para seguir adelante. En realidad, con un procesador rpido, el ms rpido de bsqueda sera con un rbol binario, con un solo arcos entrantes y dos de cada nodo. Sin embargo, el cerebro humano no es un procesador rpido, y cada nuevo nodo tiene un poco de esfuerzo humano para reconocer, y un rbol binario tendra ms nodos de la parte superior de la parte inferior del rbol. Por lo tanto, alrededor de 14.3 arcos / nodo es probablemente lo que le da el menor esfuerzo para un ser humano a recorrer el rbol. La mente humana tambin parece estar diseado para fcil manejar alrededor de 3.7 puntos a la vez.

Conclusiones

Muchos diseadores web, probablemente no lo ha hecho un anlisis como el que he hecho anteriormente. Pero an as el diseo de pginas de acuerdo con principios similares. Lo que he tratado de demostrar es que no hay magia en esto, que el razonamiento lgico simple puede explicar por qu las pginas web se vean como

ellos lo hacen!
Por Jacob Palme , de la Universidad de Estocolmo y la Universidad Tcnica de KTH.

Texto original en ingls:

Actually, with a fast processor, the fastest search would be with a binary tree,

with only one incoming and two outgoing arcs from each node.

Proponer una traduccin mejor