Principios de diseño web

Los siguientes principios de diseño web han sido elaborados por Moisés Daniel Díaz Toledano y publicados en su web: http://www.moisesdaniel.com/es

Estros principios se basan en la navegabilidad web y la experiencia de los usuarios.

Principios de diseño web.
Internet es un medio riquísimo tanto en posibilidades como en contenidos. La competitividad existente en la red de redes es enorme debido entre muchas razones a la relativa pequeña inversión que requiere el crear un website. Una navegación engorrosa, puede por tanto hacernos perder de forma inmediata a casi todos nuestros posibles clientes-usuarios. Si a esto añadimos que la construcción de un website se realiza con lenguajes que posibilitan una enorme flexibilidad, podemos ver la gran importancia que tiene el especificar algunos principios de diseño para el desarrollo de nuestros webs.

· La ley de Fitts.
Esta es prácticamente la única regla no subjetiva que está establecida dentro del campo del diseño de interfaces y hace referencia a las características que tienen que tener los objetos para que sea más fácil o difícil pulsarlos (o mejor dicho interaccionar con ellos): posición en la que se encuentren, tamaño del mismo, y una característica adicional, la ‘expresividad’ de dichos elementos. Con este último concepto quiero dar a entender que un objeto será más ‘visible’ (en cuanto a la interacción con el usuario) si éste da a entender o expresa su existencia como objeto de interfaz y no como simple información (ya sea dato o imagen). Un ejemplo es el cambio que sufren ciertos enlaces web al pasar por encima de ellos con el puntero del ratón (por ejemplo cambiando de color). Cualquiera puede pensar que todo lo dicho por la ley de Fitts es absolutamente evidente, y de hecho generalmente lo es, pero más sorprendente es aún la gran cantidad de veces que se no se aplican estos principios logrando por tanto que la usabilidad de nuestra interfaz se vea claramente comprometida.

· Dar feedback al usuario.
Existen muchísimos casos en los que una acción por parte del usuario implica modificaciones en la aplicación (sea esta web o no) que no tienen una correspondencia visual que mostrarse al usuario, y si ésta existe no se da ninguna información sobre la acción ejecutada. Imaginemos que conectamos con una página de sugerencias de un website, y al completar toda la información que se nos pide y enviarla, esta vuelve a aparecer vacía o nos devuelve a la página principal de dicho website. El usuario no sabría si la sugerencia ha sido enviada, o si lo que ha ocurrido es que la página está mal programada y al darle al botón de envío vuelve a cargarse el mismo formulario u otro. Dar información de retorno al usuario sobre las acciones que realiza es un punto fundamental y en demasiadas ocasiones olvidado. Afortunadamente en el mundo web, la principal acción que realizan los internautas es pulsar enlaces y descargar archivos, acciones ambas que tienen inmediatas consecuencias. Para las que no las tienen, dar feedback al usuario es el camino a seguir para conseguir aplicaciones consistentes y de alta usabilidad.

· Reutilización de la experiencia del usuario.
Consiste en exponer al usuario ante lo conocido. Actualmente está proliferando en demasía el uso de ciertos elementos que dan a la web mucha flexibilidad y riqueza como es el uso de Flash. En estos nuevos interfaces parece primar el efecto visual, y la realización de todo tipo de piruetas estilísticas sobre la facilidad de uso consiguiendo confundir al usuario. En el entorno web es particularmente poco razonable crear interfaces que requieran excesivo aprendizaje ya que cualquier dificultad presentada al usuario suele significar una pérdida considerable de visitas a favor de nuestra competencia (no olvidemos la enorme proliferación que ha vivido y sigue viviendo la creación de websites de todo tipo). El uso de estructuras de navegación no estándar es posiblemente el error más grave que podamos cometer. También debemos saber que existen ciertas excepciones plenamente justificadas como son la creación de websites en los que prima la forma al contenido o en los que casi no existe competencia. Bajo mi punto de vista si hay un punto importante en el desarrollo de interfaces web es precisamente éste, así que tengámoslo siempre presente.

· Uso del Scroll.
Es una buena idea hacer que todos los elementos de navegación y la información importante se le muestre al usuario nada más se cargan las páginas sin necesidad de hacer scroll. De esta forma nos aseguramos la información importante es expuestas a todos nuestro clientes-usuarios.

· Sentencias y párrafos.
La gran mayoría de los usuarios lee lo mínimo e imprescindible para obtener aquello que buscan de nuestro web. Incluir sentencias largas y párrafos grandes dificulta generalmente esta actividad con lo que se pierde algo de usabilidad (y por lo tanto de visitas!!). Evidentemente no podemos aplicar lo anteriormente dicho a lo que son propiamente documentos en formato web (html), ya sean artículos, o incluso libros. De todas formas pienso que ya existe una tendencia que se va a ir consolidando, y es la de diferenciar lo que es la propia aplicación web (es decir aquellos objetos que nos permiten comunicarnos con el servidor) de todo aquellos elementos que obtenemos como resultado de la interacción con dicha aplicación. Esta postura introduce una clara riqueza conceptual al diferenciar entre aplicación e información, teniendo numerosas ventajas y a su vez un grave inconveniente (que puede resultar argumento más que suficiente para desecharla) y es que necesitamos un programa adicional para la lectura de los documentos obtenidos (por ejemplo el Adobe Acrobat Reader) que aunque puede ser gratuito implica mayores requisitos al usuario (y esto casi siempre suele ir en decremento del número de visitas). Conocer a nuestros posibles clientes es un punto fundamental a la hora de tomar estas decisiones de diseño.

· Imágenes.
Debido a las limitaciones del ancho de banda resulta poco recomendable cargar excesivamente nuestras páginas de imágenes, y si debemos de hacerlo una técnica muy interesante consiste en crear thumbnails (imágenes de muy reducido tamaño que al pulsarse abren otra ventana en la que se carga la imagen original). Por lo general en los thumbnails se muestra la suficiente información para que un usuario decida si le es útil obtener la imagen original o no.

· Ancho de Banda.
El universo web ofrece muchísimas posibilidades interactivas y multimedia pero hay que ser plenamente conscientes de que aún existen muchos usuarios que disponen de un ancho de banda reducido y que por lo tanto pueden necesitar bastante segundos (o incluso minutos) en cargar nuestras páginas. Conforme se vayan extendiendo las redes de alta velocidad, este panorama irá cambiando, aunque el tiempo que va a requerir se mide en años y no en meses. La economía, y la simplicidad siguen siendo normas de capital importancia en el diseño de interfaces web.

Conclusiones.
Como conclusión me gustaría resaltar algunos de los principios anteriormente expuestos, la mayoría de ellos son de fácil comprensión y concepción, pero con demasiada frecuencia se nos olvidan , así que no obviemos: reutilizar la experiencia del usuario, hacer fácil que el usuario utilize los objetos con los que debe interaccionar (botones, enlaces, etc), y no sobrecargar excesivamente nuestras páginas.

Referencias.
Web design and Usability, http://www.usability.gov/guidelines/.
Design Fundamentals, http://www.pantos.org/atw/basics.html.
Design Guidelines for the World Wide Web, http://www.coedu.usf.edu/it/resources/WWWDESG_1.htm
Top ten mistakes in web design, http://www.useit.com/alertbox/9605.html.