Del contenido surge la forma. Botones, tablas, tipografÃa y parrafos.

Botones y menÃºs de navegaciÃ³n

Existen dos vÃas bÃ¡sicas para crear un menÃº de navegaciÃ³n.

Botones de igual tamaÃ±o
Botones de tamaÃ±o proporcional al texto que contienen

En el primer caso necesitaremos que todos los botones presenten un esquema de textos similar. Es decir, todos los botones deberÃ¡n tener 1 o 2 palabras.

Si esto es posible y las palabras a su vez tienen tamaÃ±os mÃ¡s o menos homogÃ©neos, serÃ¡ posible crear todos los botones iguales para el menÃº.

La botonera de apple es un buen ejemplo de este caso.

En el segundo escenario nos podemos encontrar con varias casos.

Tenemos botones con textos que varÃan mucho de tamaÃ±o.
Tenemos un sistema de navegaciÃ³n dinÃ¡mico donde ponemos y quitamos botones en funciÃ³n de las preferencias / permisos del usuario.
Tenemos un diseÃ±o de pÃ¡gina fluido, pero no los suficientes botones como para llenar todo el ancho de la pÃ¡gina.

En cualquier caso, el definir el tamaÃ±o del botÃ³n en funciÃ³n del contenido parece ser la opciÃ³n mÃ¡s flexible. No obligamos a estar escribiendo textos que se ajusten al diseÃ±o, si no que hacemos que el diseÃ±o se adapte al contenido.

En este caso deberemos especificar los mÃ¡rgenes que queremos que cada botÃ³n tenga alrededor del texto.

La botonera del mail de yahoo es un buen ejemplo de esta prÃ¡ctica.

Â¿CÃºal es la soluciÃ³n correcta?

CÃ³mo siempre, depende y como siempre se suelen combinar ambas opciones.

La soluciÃ³n de tamaÃ±os fijos es mas elegante pero requiere cierta disciplina a la hora de redactar contenidos y suele ser una buena opciÃ³n para la navegaciÃ³n principal de un site.

Es decir, el nivel superior debe ser un nivel muy exigente a nivel de redacciÃ³n y posicionamiento. No podemos poner cualquier cosa en el primer nivel y no deberiamos dar la imagen de empresa poco homogenÃ©a en cuanto a sus "ideales".

La soluciÃ³n de tamaÃ±os fluidos es mas flexible pero menos elegante visualmente pero es mÃ¡s operativa para segundos niveles donde podemos necesitar esa flexibilidad para acomodar diferentes necesidades.

Tablas

Algunas recomendaciones bÃ¡sicas para crear tablas.

Siempre mira bien el contenido e intenta comprender que se estÃ¡ contando.
Separa los contenidos fijos de los dinÃ¡micos.
Identifica totales, resÃºmenes, conclusiones.

Una vez que comprendes con claridad el contenido, se deben identificar incosistencias en el mismo que nos pueden perjudicar a la hora de diseÃ±ar.

Campos homogÃ©neos

Debemos identificar que todos los campos estÃ©n etiquetados de forma consistente siguiendo jerarquÃas idÃ©nticas.
Que todos los campos tengan fecha, tÃtulo, secciÃ³n, etc…
Es muy normal encontrarse con tablas donde cada campo presenta informaciÃ³n dispar.

Supongamos la siguiente tabla.



-----
Mac

18 equipos g3

23 equipos g4

4 equipos g5
Pc

7 workstations XP
PerifÃ©ricos

CÃ¡mara Agfa
-----
Software 
Mac

Photoshop

Flash
Pc

Autocad
------

Si analizamos esta tabla, podemos ver que existe una falta de tÃtulos coherentes. Si bien tenemos "Software", no tenemos "Hardware" en la lista lo que hace la lista no sea del todo coherente.

Este tipo de errrores es muy comÃºn y hace que el diseÃ±ador tenga que trabaja con material corrompido de origÃ©n dando lugar a un mal diseÃ±o.

La tarea del arquitecto de la informaciÃ³n es clave para detectar estos problemas antes de que lleguen a la mesa de diseÃ±o.

Contenidos dinÃ¡micos y fijos

La separaciÃ³n del contenido fijo del dinÃ¡mico es importante ya que deberemos colocar los contenidos fijos en el eje horizontal y los dinÃ¡micos en el vertical.

De esta forma el crecimiento de la tabla se harÃ¡ en el scroll vertical y no en el horizontal lo que darÃa problemas de impresiÃ³n.

Resumenes

En la identificaciÃ³n de resumenes, resultados, etc… es clave que evitemos el concepto impreso de la maquetaciÃ³n colocando todos estos elementos al principio de la pÃ¡gina en lugar de al final como ocurrirÃa en la versiÃ³n impresa.

Sombreados y lÃneas

Los sombreados y lÃneas son clave.
Las lÃneas deben utilizarse lo menos posible.

Para separar es mejor utilizar diferentes pesos tipogrÃ¡ficos (Negrita y sin negrita) o colores. Negro, gris, etc…

Las lÃneas en caso de ser necesarias deben limitarse a la separaciÃ³n horizontal evitando la vertical.

El evitar la separaciÃ³n vertical es debido a que el concepto general que se ha de manejar a la hora de presentar tablos en una tabla es el que debemos intentar listar conceptos homogÃ©neos por fila. Es decir, cada fila de informaciÃ³n debe ser consistente evitando mezclar diferentes conceptos. verticalmente.

En los casos en los que esto sea imposible, utilizaremos lÃneas verticales para separar esta informaciÃ³n.

Tabla con separaciÃ³n vertical.

Para los sombreados existe la posibilidad utilizarlos para diferenciar campos pares e impares en listados, pero es mÃ¡s interesante utilizar los sombreados para destacar novedades o cambios.

JustificaciÃ³n de textos en tablas

Las reglas bÃ¡sicas son:

– Textos siempre justificados a la izquierda.
– NÃºmeros siempre justificados a la derecha.
– Evitar los centrados en general.

En cuanto a fechas lo ideal es en lo posible tener un formato del tipo:
01 JUN 2005

El formato tipo:
01 05 2005 puede crear confusiÃ³n entre US y el resto del mundo ya que los yankis ponen el mes antes del dÃa.

Utilizando las 3 primeras letras del mes se evita la confusiÃ³n.

Utilizar letras para el mes, a nivel de display y no de entrada de datos, ayuda a que la visualizaciÃ³n sea mÃ¡s limpia ya que se evita el traducir el nÃºmero al nombre del mes.

Justificado de textos en parrafos

A raiz de un comentario en este artÃculo desarrollamos este punto.

Existen 4 formas de justificar pÃ¡rrafos en HTML.

Izquierda

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Derecha

Centrado

"Bandera"

El mÃ¡s normal es el justificado a la izquierda. El resto de justificados no son recomendables.

El justificado de bandera es quizÃ¡s el mÃ¡s complejo de manejar. Este justificado lo que hace es manipular el tracking de todos los caracteres de la lÃnea para que todas las lÃneas empiecen y acaben en el mismo punto creando una caja homogÃ©nea de texto.

Al manipular el tracking de todos los caracteres ocurre que cuantos menos tengamos por lÃnea peor es el aspecto visual de la misma.

Aqui podemos ver algunos ejemplos.

"Bandera" size 1

"Bandera" size 2

"Bandera" size 3

Como podemos ver con el tamaÃ±o 3 (el mayor de todos) empiezan a aparecer algunos espacios entre letras algo extraÃ±os. Si nos fijamos en la penÃºltima lÃnea, los espacios son mucho mÃ¡s abiertos que entre las letras de las otras lÃneas. Este efecto es poco deseable ya que hace la lectura mÃ¡s complicada.

En el tamaÃ±o 2 tambien aparecen algunas zonas de "aguas" o espacios algo extraÃ±os.

Este justificado de bandera es, de nuevo, poco recomendable.

NÃºmeros

Sobre los nÃºmeros hay un aspecto que es crucial.

La tipografÃa.

Si vamos a crear un site donde los nÃºmeros van a ser protagonistas, debemos tener mucho cuidado con la tipografÃa que elegimos para mostrarlos.

No existen muchas opciones en el mundo web, pero veamos las que estÃ¡n disponibles.

Arial
121.416,00
987.324,55

Verdana
121.416,00
987.324,55

Georgia
121.416,00
987.324,55

Times
121.416,00
987.324,55

Courier
121.416,00
987.324,55

Como podemos ver cada tipogrÃa renderiza el texto con un tracking diferente.

– Arial resulta muy densa visualmente.
– Verdana es la mÃ¡s clara ya que el tracking es el mÃ¡s abierto de todas.
– Georgia presenta un tipo de nÃºmeros que se denomina como "minÃºsculas" donde los nÃºmeros como el 9 y 8 caen por debajo de la lÃnea de base. A parte, esta tipografÃa presenta un tracking irregular haciendo que nÃºmeros como e 1 presente un espacio menor que el 9.
– La Times presenta un tracking correcto aunque es poco recomendable por un render bastante pobre en pantalla.
– La Courier es la tipografia "monospace" por defecto aunque como hemos visto, verdana es mÃ¡s clara. Courier es una opciÃ³n.

La opciÃ³n mÃ¡s recomendable es Verdana. Aunque se ha ver en diferentes sistemas operativos ya que en PC puede darse otro tipo de tracking.

Un buen ejemplo.
La tabla de cotizaciones de El Pais.es

Un mal ejemplo.
El mundo en su secciÃ³n de economia tiene un casillero en la columna de la derecha con los Ãndices que da un poco de pena verlo. Las columnas cuando menos parece que estÃ¡n bailando.