Hace un tiempo, la empresa española Cierzo Development se puso en contacto conmigo. Querían encargarme el diseño de la interfaz de usuario para un novedoso proyecto web.

Hoy, la cantidad de usuarios que participan en Pronostico-quiniela.es crece semana a semana. Además el sitio ganó un premio de Yahoo!, recibiendo el reconocimiento de la gente y los medios de comunicación.

http://pronostico-quiniela.es 

El proyecto innovador de Cierzo Development

Antonio García Morte charlaba con sus amigos, como en la casa de cualquiera de ustedes, sobre fútbol, y cómo hacer una buena quiniela, ese juego que por los territorios de Diego Armando conocemos como “el prode”. Y así llegaron a la conclusión que la mejor manera era colaborando unos con otros, combinando su inteligencia.

De ahí surge el lema “juntos ganamos todos”. Porque mediante la web desarrollada íntegramente por Cierzo, los usuarios colaboran entre sí para armar entre todos una “quiniela ideal” y así obtener mejores resultados a la hora de jugar.

¿Cómo funciona?

Es muy fácil, de lunes a jueves todos los usuarios pueden hacer su quiniela. Entonces el viernes a la mañana el sistema le devuelve a cada uno su quiniela original junto con otra mejorada, calculando los resultados mediante un sistema basado en algoritmos de inteligencia artificial.

Un diseño fácil de entender

Comunicar la idea de este sitio web de una forma simple y clara es fundamental. Primero que nada el usuario necesita saber de qué se trata y para qué sirve pronostico-quiniela.es.

Por eso la presentación Flash en la portada y una página explicativa detallando el funcionamiento del sistema con textos y animaciones. En un primer momento se pensó en usar imágenes, pero había que encontrar la imagen justa para cada concepto dentro de un catálogo de imágenes de stock, algo bastante dificil en este caso. Los dibujos en cambio, nos dieron una gran libertad a la hora de ilustrar el funcionamiento del sistema con mucha simpleza y claridad.

Haciendo un buen uso del color, guiando al ojo mediante los principios de precedencia y agrupando los elementos según la teoría de Gestalt, el diseño de los gráficos estadísticos y las tablas de resultados permite la clara visualización de una gran cantidad información.

Y también fácil de usar

En “La quiniela” recurrí a toda mi experiencia diseñando interfaces de usuario para aplicaciones de escritorio y web, en la búsqueda de un diseño claro, intuitivo y fácil de usar. Por eso la cantidad de contenidos y opciones fue reducida al mínimo, evitando la sobrecarga de información visual.

Inmediátamente después de la presentación del sistema, el diseño del sitio invita al usuario a participar mediante un formulario muy simple, con sólo 3 campos de texto, 1 “checkbox” y el gran botón de “Comenzar”. Esto es muy importante, porque no queremos asustar ni aburrir al usuario con un largo formulario, a modo de interrogatorio.

El diseño del formulario para “hacer quiniela” es muy similar a las tablas de resultados. De la misma manera fueron diseñadas las otras pantallas, buscando la coherencia en el diseño. El objetivo de esto fue crear una interfaz intuitiva, donde el usuario encuentre los mismos elementos de diseño en diferentes contextos, reduciendo el tiempo de aprendizaje y facilitando su uso.

Buenos resultados

El proyecto de Cierzo Development ha recibido el reconocimiento de los medios de comunicación españoles (TVE, Aragón Televisión, A3, RNE, Onda Cero, 20 minutos, El periódico…) y también de la gente, que lo eligió como Revelación Web Yahoo! 2007 en la categoría Deportes y que ya suman más de 9.000 usuarios registrados colaborando unos con otros, dando vida a la idea de que “juntos ganamos todos”.

Existen varios programas para convertir una imágen estática en código XHTML/CSS que pueda ser “entendido” por navegadores, buscadores, etc. Pero para mi la mejor forma de crear páginas web sigue siendo el trabajo artesanal, escribir el código “a mano”.

Significado

Cuando empiezo a escribir el código de una página web, le doy mas importancia a la parte semántica, a “qué es” cada cosa. Por ejemplo “esto es un título”, “esto un subtítulo” o “esto es una lista”. Sin darle tanta importancia a la ubicación y mucho menos al color o al tipo de letra.

Ubicación

Cuando termino con la parte semántica empiezo a pensar en la parte visual. Pero no en “cómo se ve”, sino en “dónde va” cada cosa. Por ejemplo “esta división va a la izquierda” o “este listado es horizontal”. La idea es usar la menor cantidad de divisiones para agrupar elementos y ubicarlos en la pantalla.

Estética

Ya con todo listo, me concentro en la parte de “cómo se ve” la página web. Me resulta bastante cómodo hacer primero el fondo de la página y seguir por el primer elemento (por ejemplo la cabecera) para después ir terminando los demás de arriba hacia abajo hasta llegar al pie.

En lo posible no hay que cambiar el código XHTML, así se logra la completa separación entre el contenido y la estética de una página web.

El número en cuestión, 1.61803398874989484… , está en todos lados. Lo encontramos en la reproducción de los animales e insectos, en la forma de las plántas y los árboles, en el espiral de una galaxia o un caracol ( espiral logarítmica ), en las distancias entre diferentes partes de nuestro cuerpo, en figuras geométricas, hojas, etc. También lo podemos encontrar en el cuadro de Leonardo, La Gioconda, en sonatas de Mozart, en un atado de cigarrillos, en las tarjetas de crédito y en otros tantos diseños a través de la historia, ya que este número se usa desde hace miles de años en todos los campos del diseño.

¿Y cómo aplicarlo al diseño web?

En las proporciones de los diferentes elementos con los que construimos nuestro diseño. Por ejemplo dentro de un rectángulo áureo podemos contener un banner, un cuadro de imágen, un menú, etc.

Otro ejemplo puede ser el diseño de los elementos básicos un blog, la relación entre el contenido principal y una barra lateral. Si diseñamos un sitio para 800×600, el ancho máximo de nuestro diseño será 760px. Si dividimos 760 / 1.6180339887 nos dá 469, entonces el contenido principal va a ser de 469px de ancho y la barra lateral de 291px.

El problema de las diferentes resoluciones de pantalla

Un sitio web debe poder verse bien en diferentes tipos pantallas, con distintas resoluciones. Esto quiere decir que el espacio que tenemos para hacer todas las locuras que se nos ocurran, el lienzo, no es fijo, sino que su tamaño puede variar dependiendo de la pantalla del usuario.

Entonces si diseñamos para 800×600, en teoría nuestro diseño no se verá bien en resoluciones mayores, como 1024×768, 1280×900, 1440×900, etc.

La hora del espanto fue… ¡CSS al rescate!

Podemos ajustar el diseño a la pantalla usando porcentajes. En el caso del diseño de los elementos básicos de un blog, contenido y barra lateral, los números que corresponden a las medidas 469px y 291px son 62% y 38% respectivamente. Así podemos mantener una proporción en un diseño “líquido” (ver ejemplo), donde el ancho de nuestro diseño se adapta la pantalla del navegador.

Ahora, si bien la proporción de los elementos básicos estaría bien, el trabajo dificil para el diseñador será adaptar los demás elementos del diseño a este “layout” flexible, manteniendo las proporciones que lo hacen “bello”, según la “filosofía áurea”.

Distintos tipos de diseños.

En este otro ejemplo, agregué un contenedor para limitar el ancho a 780px y ubicar el diseño en el centro de la pantalla. El diseño dejó de ser líquido, pero se mantiene la relación entre el contenido y la barra derecha.

¿Y si aumentamos el tamaño del texto?, vemos que el que el tamaño de la letra aumenta, pero los elementos básicos del diseño siguen teniendo las mismas proporciones. Ahora, si al ancho del contenedor (780px) lo expreso en unidades tipográficas sería aproximadamente 78em ( con el tamaño de la fuente del cuerpo de la página al 63% ). Entonces cuando cambio el tamaño de la fuente, también cambia el tamaño del layout (ejemplo).

Para ir un poco mas allá, podemos crear un diseño donde el tamaño del texto y los elementos del layout dependan del tamaño de la pantalla. En este último ejemplo, agregué un JavaScript para calcular, a partir del ancho de la pantalla del navegador, el porcentaje que corresponde al tamaño del texto.

Más…

Si quieren saber más sobre cómo aplicar la divina proporción al diseño web les recomiendo este excelente artículo de Smashing Magazine.

Cuando uno empieza a diseñar quiere llenar cada espacio con alguna cosa. Los espacios vacíos parecen ser un desperdicio. Pero en realidad es al revés. El espacio hace que el diseño sea mucho mas claro.

En diseño web hay tres aspectos que deberían considerarse sobre los espacios.

Interlineado

El espacio entre las líneas de un texto afecta directamente a la legibilidad. Poco espacio hace que las líneas se superpongan, mientras que demasiado espacio puede sugerir que la línea de texto terminó, perdiéndose continuidad. Por eso hay que buscar un punto intermedio. El interlineado se puede controlar mediante CSS usando el selector ‘line-height’.

Padding

Su uso mas común es para separar el texto de otros elementos, ya que por lo general nunca deberían tocarse. El padding es el espacio entre el texto y los demás elementos.

Espacio en blanco

Primero hay que decir que el espacio en blanco no tiene porqué ser blanco, puede ser de cualquier color. Es simplemente el espacio vacío en una página. El espacio en blanco se usa para dar balance, proporción y contraste a un diseño. Mucho espacio en blanco sugiere elegancia, por eso es común en las revistas que las publicidades de grandes marcas de relojes y autos hagan uso del espacio vacío como un elemento de diseño.

En diseño web, por ahí todavía más que con otro tipo de diseño, lo central es la información. En un buen diseño, el usuario debería ser conducido a través de la pantalla por el diseñador. Para lograr esto, existe la precedencia, que viene a ser algo así como el peso visual que tienen las diferentes partes del diseño.

Un ejemplo simple de precedencia es el logo, que se ubica comunmente arriba a la izquierda, porque es el primer lugar donde mira la mayoría de la gente.
Pero la precedencia va mucho mas allá. El diseñador debe dirigir la mirada del usuario hacia una secuencia de pasos.

Existen varias herramientas para lograr esto:

• Posición - La ubicación de algo en una página tiene clara influencia sobre el orden en el que el usuario lo vea.
• Color - El uso de negrita y colores sutiles es una forma fácil de decirle al usuario donde mirar.
• Contraste - Diferente color para resaltar o el mismo para dar una importancia secundaria.
• Tamaño - Lo mas grande precede a lo mas chico .
• Elementos de diseño - Si hay una flecha gigante apuntando algo, ¿adónde te parece que va a mirar el usuario?.

El mundo visual que nos rodea es muy complejo. Para poder entenderlo, nuestra mente desarrolló estrategias que le hacen frente a la confusión y a la ambigüedad. Buscando siempre la solución mas simple al problema, una de esas estrategias es agrupar elementos que tengan algo en común. Acá entra la Teoría de Gestalt. Saber como funciona la psicología de Gestalt ayuda a construír sitios web más fáciles de usar.

La Teoría de Gestalt, surgida en Alemania a principios del siglo XX, considera que las personas percibimos a los objetos como conjuntos. Entonces si vemos un triángulo vemos un triángulo, y no tres líneas y tres ángulos. Así es que podemos decir que todo (un triángulo) es mucho mayor que la suma de sus partes (tres líneas).

Saber esto nos da una idea de cómo organizar nuestros ojos, nuestro campo visual.

Para los diseñadores, lo más importante es la referencia que hace la psicología de la Gestalt sobre cómo se foman estos grupos y qué efecto tienen en la percepción. Teniendo eso en cuenta, se puede crear unidad y cohesión en el diseño, o al contrario, hacer que un elemento rompa con el esquema y aparezca fuera de cualquier grupo, destacándose por sobre los demás.

Principios fundamentales de la corriente Gestalt

• Ley de Cierre - Cuando faltan elementos, nuestra mente los agrega para completar una figura.
• Ley de la Semejanza - Nuestra mente agrupa los elementos similares según su forma, tamaño, color y brillo.
• Ley de la Proximidad - Agrupamos los elementos de forma parcial o secuencial. Percibimos a los elementos que están cerca como una unidad.
• Ley de Simetría - En la distancia, las imágenes simétricas son percibidas como una sola.
• Ley de Continuidad - La mente trata de continuar un patrón, aunque este haya desaparecido.
• Ley de la Comunidad - Muchos elementos moviéndose en la misma dirección son percibidos como un único elemento.

Soy diseñador web profesional hace un año, cuando empecé no tenía nada parecido a un proceso de diseño. Con el tiempo, fui encontrando una forma de organizarme, una agenda de trabajo, que analicé y reescribí varias veces. Así que éste es mi proceso de diseño, por ahí te puede servir para organizar tus proyectos.

Considerar el problema

Porque el diseño está para solucionar problemas, para cubrir necesidades. En el caso del diseño web, el problema lo tiene el usuario que visita el sitio. Esta persona acaba de entrar a un lugar desconocido, en búsqueda de información, porque necesita hacer algo. La función del diseño es facilitar el acceso a esa información y ofrecer cosas para hacer. La página de reservas de un hotel por ejemplo, tiene que mostrar cuáles habitaciones están disponibles y cuándo, junto con la opción de hacer una reserva. Las necesidades de los usuarios se dan de muchas formas, pero siempre es querer algo: querer comprar, querer saber, querer decir, querer sentir…

Materiales

El segundo paso es buscar imágenes en Flickr, colores en ColourLovers, organizar los documentos que envió el cliente, marcar sitios similares y todo lo que se pueda juntar. Información,objetos, fotos, experiencias, todo. Este montón de materiales nos van a ayudar a sumergirnos en el tema, para poder sentirnos como usuarios y como clientes, para identificar mejor las necesidades de cada uno y ofrecer soluciones a través del diseño.

Pre-diseño

Primero en papel dibujando algunas ideas, conceptos, iconos, layouts, etc, y después en la pantalla creando los primeros bocetos, se empieza a formar un pre-diseño para poder mostrarle al cliente. Algo bastante útil es guardar una copia cada vez que hagamos algún cambio significativo. Por ejemplo pre-diseño001.png, pre-diseño002 .png, etc, para poder reciclar materiales y volver atrás en caso de que lo necesitemos.

Diseño

Bueno ahora hay que terminar con lo que empezamos. Primero terminar bien el diseño de la portada y una página modelo para las interiores. Después terminar todas las otras páginas. No me gusta pasar a escribir código hasta tener todo el diseño terminado, desde la portada hasta la página de aviso legal o error 404. Lo mejor es dedicarse a cada tarea, ahora diseño y sólo diseño, después escribo código y no me preocupo por el diseño.

Código

Hay algunas herramientas que ayudan, tendría que probar Coda que es bastante comentado, pero por ahora escribo todo el código en Notepad++. Primero busco que el sitio se vea bien Firefox, después voy haciendo los cambios que sean necesarios para Internet Explorer, Opera y Safari. Por último, la validación de los archivos XHTML y CSS.

Todo listo, cierre del proyecto

Si se puede, lo mejor es dejar pasar un tiempo, aunque sea una tarde y recién después revisar todo el trabajo. Está bueno para alejarse un poco y verlo con otro punto de vista. Cuando sea hora de cerrar el proyecto, lo mejor es dejarle al cliente una muestra online y un archivo comprimido con el trabajo terminado.

Bueno así es como hago mis diseños. ¿Y vos? ¿cuál es tu proceso de diseño?

Porqué entender la diferencia es todo

Por Jeffrey Zeldman

Mi padre fue un pintor de fin de semana, él y sus libros de artes jugaron un rol formativo en mi infancia. Como muchos chicos, yo estaba fascinado por la mera representación. Me perdía a mi mismo mirando minuciosamente grabados de batallas de gladiadores, pueblos pintorescos y ruinas romanas al atardecer. Yo entendía el arte como sinónimo de dibujo. El detalle mas minucioso, mas líneas en el grabado u hojas en el árbol, eso era el mejor arte, en mi infancia. Mas tarde, descubrí los cómics. Aún mas tarde, los museos. Maxfield Parrish me hizo querer tomar drogas, y también me hizo dar cuenta que yo nunca podría ser un pintor. Paul Klee parecía un mal artista que no podía dibujar. Andy Warhol fue un tramposo, porque usó asistentes.

No pretendo entender el arte de hoy, pero se que mis primeras impresiones tienen poco que ver con la naturaleza del arte, y todo que ver con la pura sensación visual. Como Disneyland y el circo, arte era espectáculo. Pero sólo se puede subir al Matterhorn una cantidad de veces, y sólo se puede comer tanto caramelo de algodón, antes de que te descompongas. Desde la sensación, me gradué hacia el estilo. El Spider-Man de Steve Ditko. Arte pop. Rock, y entonces alma, y entonces tapas de álbums punks. Yo era un adicto al estilo. No podía diferenciar lo bueno de lo malo, pero sabía lo que era cool.

“Muchos jóvenes diseñadores web ven sus creaciones de la forma en que yo solía ver la cultura pop. Esto es cool o es basura.”

Muchos jóvenes diseñadores web ven sus creaciones de la forma en que yo solía ver la cultura pop. Esto es cool o es basura. Ellos confunden estilo por diseño, cuando las dos cosas no son exáctamente lo mismo. El diseño comunica en todos los niveles. Te dice dónde estás, señala lo que podés hacer, y lo hace fácil. El estilo es tautológico; se comunica estilo. En términos visuales, el estilo es un aspecto del diseño; en términos comerciales, el estilo puedo comunicar atributos de la marca.

También puede transmitir el desprecio del diseñador por el tema. “Esto es muy aburrido, así que acá hay algunas franjas y acá un menú desplegable, así que también van a saber que soy mejor que este estúpido trabajo.” En este nivel, el estilo es un lenguaje subterráneo, de un par a otro, no tiene nada que ver con los visitantes del sitio o el propósito. De hecho, este estilo aplicado puede interferir con la finalidad del sitio. Entonces los gurús dan un paso al frente, y culpan al diseño por las fallas del fetichismo estilístico.

Los diseñadores que se conducen por el estilo pueden tener éxito si tienen suficiente suerte para seleccionar y elegir esos proyectos que benefician sus obsesiones estilísticas. La mayoría de los diseñadores web no tienen ese lujo. Pero eso no les impide aplicar el vocabulario estilístico de los principales diseñadores en los proyectos en los que trabajan. Y entonces terminamos con sitios de e-commerce que parecen volantes para una rave, y sitios informativos adornados con deslumbrantes pero con mas frecuencia equivocadas e inapropiadas introducciones.

La web solía parecerse a una guía telefónica. Ahora gran parte de ella parece un portfolio de diseño. De hecho, se ve como el portfolio de 20 conocidos diseñadores, cuyo estilo es copiado una y otra vez por jóvenes diseñadores que se consideran a si mismos sus discípulos. Las distinciones entre el diseño gráfico y el diseño para comunicar se pierden en estos diseñadores. Cómo la distinción entre el verdadero estilo, que evoluciona a partir de la naturaleza del proyecto, y deriva en el pastiche, que es insertado en muchos proyectos como un tercer brazo.

Cuando el estilo es fetiche, los sitios confunden a los visitantes, perjudicando a los usuarios y a las empresas que pagan por sus sitios. Cuando los diseñadores no empiezan preguntándose quiénes van a usar el sitio, y para qué lo van a utilizar, obtenemos un sentido de la apariencia que le da a la belleza un mal nombre - al menos, en algunos círculos.

El problema es, que vivimos en una sociedad obsesionada con las superficies ( y con miedo de mirar que hay debajo ). En una cultura de consumo donde compramos zapatillas de $200 porque parecen cool y una canción de Beck se usó en el comercial, flash y deslumbramiento son el premio mas valioso de todos los productos básicos.

Para algunos clientes y para muchos diseñadores jóvenes, los proyectos multimedia Flash se han convertido en sinónimo de diseño de páginas web. Si no canta y baila, no debe ser buena, y ciertamente no es cool. Gran trabajo se está creando en Flash (SWF), y está recibiendo el reconocimiento en shows de premios - particularmente en tradicionales shows de premios de alto rango, en donde “el material digital” precede a la multimillonaria industria de comerciales de TV. Los jueces esperan que los comerciales de TV tengan conceptos brillantes y altos valores de producción como la mayoría de las películas comerciales. Naturalmente esperan que los sitios web, también.

Experimentos de estilo barroco construidos con la última tecnología seguirán ganando premios mientras los jueces los sigan viendo en los últimos navegadores con pantallas widescreen y Pentiums con conexiones T1. Y, no es necesario decir, van a ganar estos premios sólo si son dignos de premio en su diseño gráfico y programación. No nos referimos a la mala concepcion aquí. Estamos hablando de diseño a los mas altos niveles, pero el diseño de un tipo único.

La mayoría de mis colegas diseña sitios como estos. Me babeo cuando veo sus logros, y me alegra que se lleven a casa su merecido premio. Pero también me preocupa.

“No hay suficientes diseñadores que estén trabajando en ese gran espacio entre la apariencia y la usabilidad, dónde la mayor parte de la web se debe construir.”

Me preocupa porque los diseñadores jóvenes que confunden estilo con diseño están aprendiendo a copiar los trucos técnicos y estilísticos de sus héroes, pero no necesáriamente cómo comunicar en este medio. El “Bullet Time” es perfecto para “The Matrix”, pero no para documentos. Y dado que una gran parte del diseño de páginas web es informacional - o se supone que lo sea - la venta mayorista de los logros estilísticos de otras personas hace que los sitios informacionales no avancen en el medio, sino que los hacen mas confusos.

Me preocupo porque hay diseñadores que nunca van a evolucionar, estilos individuales, y mucho menos aprender a construir estilos apropiados para marcas en determinados proyectos. Debido a la falta de vocabularios críticos en los reclutadores, que ponen a la gente cuyos portfolios demuestren un conocimiento de “lo que es cool” en puestos de trabajo donde serán miserables. (”Con tu talento, darás vuelta ese lugar.”) Porque eventualmente los diseñadores que conocen de branding y de diseño para comunicación, y quienes conozcan la diferencia entre estilo y diseño, entrarán al mercado y desplazarán algunos diseñadores jóvenes que nunca tuvieron la oportunidad de comprender lo que hacen.

Me preocupa el medio, porque no basta con los que trabajan en ese enorme espacio entre la apariencia y la usabilidad, que es donde la web se debe construir. Y cada vez hay menos incentivos para que los diseñadores web trabajen en esos campos, ya que este tipo de trabajo es de agrado para los usuarios web pero no gana absolutamente ningún reconocimiento de la industria, dejando de lado los cheques. (”Mi Dios, que se cargue tan rápido y trabaje tan bien, incluso en IE3 en la vieja Dell de mi papa.” ¿Usted sabe cómo son los jueces de premios? ¿siempre diciendo cosas como estas? tampoco yo.

Sobre todo, me preocupan los usuarios web. Porque después de más de diez años de desarrollo de la red comercial, todavía tienen que tomarse su tiempo para encontrar lo que están buscando, y todavía se preguntan porqué es tan desagradable leer texto en la web - que es lo que la mayoría de ellos hace cuando están conectados.
Mientras nuestra sociedad siga valorando mas el estilo que el diseño, la superficie sobre el fondo, esta situación no va a mejorar. Por supuesto, lo mismo pienso cada cuatro años, cuando tengo que votar.

Adobe Design Center, Style versus design.

La respuesta es ¡si!. La razón es que todos los diseñadores creativos deberían conocer el lienzo en el que trabajan. Incluso quienes buscan romper las convenciones, porque para romper las convenciones del lienzo, primero hay que conocerlo bien. Los diseñadores web deberían saber y entender el medio en el cual su diseño será aplicado.

¿Cómo puede un escultor esculpir sin conocer los diferentes tipos de piedras? ¿Cómo puede un pintor pintar sin conocer las diferencias entre pinceles, pinturas y lienzos? ¿Cómo un diseñador para impresión puede crear sin conocer el proceso de impresión, tipos de papel o la diferencia entre CMYK y RGB? ¿Y cómo un diseñador web puede diseñar sin saber escribir código, o al menos cómo trabaja el mismo?

¿Hay que ser un adicto al código HTML o un maestro del CSS para ser diseñador web? No. Pero se deben conocer los fundamentos del medio, y los elementos del mismo, porque son los que le dan vida al diseño. Aprender acerca del medio es fundamental para cualquier diseñador, para cualquier artista.

Usabilidad y accesibilidad, son los elementos claves del diseño web y deberían ser planeados antes que cualquier otra cosa, no marcarlos sólo como algo mas a tener en cuenta.

Además de ofrecer a los desarrolladores la oportunidad de incluir un nivel de interactividad que va mas allá del diseño impreso, estos elementos son los que diferencian el diseño web del diseño para impresión.

Accesibilidad

Permite que sus contenidos puedan ser accedidos por todas las personas, independientemente de la discapacidad (física, intelectual o técnica) que presenten.

Los beneficios de tener un sitio web accesible son varios, uno es el aumento del número de potenciales visitantes de la página web, una razón muy importante para una empresa que pretenda captar nuevos clientes. También disminuyen los costos de desarrollo y mantenimiento, ya que una página web accesible es una página bien hecha, menos propensa a contener errores y mas sencilla de actualizar. Otro beneficio es la reducción del tiempo de carga de las páginas web.

Usabilidad

Es preciso diseñar sitios web para que los usuarios sean capaces de encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea.

La usabilidad en un sitio web, implica una reducción y optimización general de los costes de producción, así como un aumento en la productividad. Además permite mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo.

Un caso real, después de ser rediseñado prestándose especial atención a la usabilidad, el sitio web de IBM incrementó sus ventas en un 400% (InfoWorld, 1999).

La identidad del sitio web y la compañia son muy importantes para vos, pero también para los usuarios, que lo usarán como un signo de orientación. En estos días, el lugar mas común para ubicar logos en un sitio web es la esquina superior izquierda, a través de todo el sitio.
Está bueno que el logo se mantenga en la misma posición para todas las páginas, porque un cambio de posición podría desorientar a los usuarios, llevándolos a pensar que ya no siguen dentro de tu sitio.

Un ejemplo de buen diseño es el sitio de Apple.