1. Diseño y Comunicación >
  2. Publicaciones DC >
  3. Reflexión Académica en Diseño y Comunicación Nº VI >
  4. Pautas que hacen a un desarrollador web profesional.

Pautas que hacen a un desarrollador web profesional.

Zavala, Wenceslao I. [ver currículum del autor, docente de la Facultad de Diseño y Comunicación]

Reflexión Académica en Diseño y Comunicación Nº VI

Reflexión Académica en Diseño y Comunicación Nº VI

ISSN: 1668-1673

XIII Jornadas de Reflexión Académica en Diseño y Comunicación. Febrero 2005. Buenos Aires. Argentina:"Formación de Profesionales Reflexivos en Diseño y Comunicación"

Año VI, Vol. 6, Febrero 2005, Buenos Aires, Argentina | 288 páginas

descargar PDF ver índice de la publicación

Ver todos los libros de la publicación

compartir en Facebook


Licencia Creative Commons Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional

En este último tiempo, Internet se ha convertido en un importante medio de comunicación a muy bajo costo, con características ya conocidas como la interactividad entre el receptor y el emisor y su cobertura global, haciendo de Internet un mar de información. 

En los inicios de Internet, a mediados de la década del 90, los sitios web eran tan sencillos que las reglas aplicables eran comunes para todos. Por ejemplo, la palabra subrayada en azul, se tomaba como un hipervínculo a otra página Web. Hoy, Internet se ha convertido en un entorno intimidante para muchos usuarios. Se ven enlaces de diversos colores y en variados estilos tipográficos. Además, el uso de nuevas tecnologías y conexiones cada vez con más ancho de banda, hacen la utilización indiscriminada de imágenes y recursos, que muchas veces, sólo hacen confundir a los usuarios. Esta confusión en el diseño de la interfaz de un sitio, sólo crea una frustración en el usuario que logra no sólo que se retire de nuestro sitio inmediatamente, sino también que no regrese a él. 

No debemos permitir que el usuario se pierda en nuestro sitio y de esta forma no encuentre lo que vino a buscar. Por este motivo, al construir una interfaz para usuarios, debemos recordar estos mapas mentales para no confundirlos. Creo que el cambio sólo debe darse cuando existe un beneficio significativo para esa acción. Una interfaz interna que sea comprendida por el usuario, es decir, que el usuario conozca la forma de interactuar con nuestro sitio, crea un vínculo de confianza. 

El diseño de la interfase es el que provee la estructura, la navegación y el ambiente necesario para comunicar el mensaje de una forma atractiva y eficiente. 

Antes de diseñar la interfaz de un sitio Web, es conveniente hacer un mapa del sitio que nos permita clarificar las secciones y mejorar la experiencia que el usuario logrará en nuestro sitio. 

Para esto Keith Instone ha definido un sencillo proceso de tres preguntas para saber si un sitio web responde a las necesidades del usuario. Una pantalla debe responder a los siguientes interrogantes: 

- ¿Dónde estoy?: ¿En qué sitio web me encuentro? 

- ¿Qué hay aquí?: ¿de qué se trata este sitio web? ¿Dónde puedo ir?: ¿qué otras posibilidades me ofrece este lugar?

Un ejemplo de interfaz muy utilizado en la web que responde a este interrogante es el diseño tradicional de los tres paneles: 

1.Primera banda horizontal, generalmente responde a la pregunta «dónde estoy». Llamada también banda de marca. 

2. Banda vertical izquierda, que responde a la pregunta «dónde puedo ir», y que se conoce como barra de navegación.

3. Finalmente, el resto y parte mayor de la pantalla, dedicada al contenido, respondiendo así mismo la pregunta «qué hay aquí». Ventana de contenido. 

También existen dos premisas más en el momento de desarrollar una interfaz «amigable» para el usuario. Una es el uso de metáforas. Es el claro ejemplo de los sistemas operativos, en el que vemos una reproducción de una oficina. Uno trabaja en el escritorio, tiene carpetas, ficheros, y archivos de la misma forma que una oficina. 

La segunda es la utilización de rutas de temas. Barras jerárquicas que le permiten al usuario saber en dónde se encuentra en todo momento y a qué lugares puede ir, sobre todo en sitios grandes. Es la versión digital de las migas de pan con las que Hansel y Gretel así recordaban el camino para poder volver. 

Un ejemplo de una ruta de temas se puede presentar de la siguiente forma: 

Facultades y Escuelas > Facultad de Diseño & Comunicación > Dis. Audiovisual 

Como cada palabra contiene un enlace, no sólo le entrega información precisa de dónde está el usuario sino que nos permite regresar a un solo clic de distancia a donde el usuario desee. Como una brújula dentro del sitio para navegarlo con precisión. 

Otro de los puntos a tener en cuenta en el momento de desarrollar un sitio Web es el de garantizar un rápido acceso de los usuarios a la información que brinda el sitio. Esta es una de las reglas de Usabilidad propuestas por Jacob Nielsen. En muchos casos los desarrolladores piensan que una muy buena usabilidad significa desarrollar una interfase conservadora con muy poco espacio para la creatividad. Pero lejos de la realidad, desarrollando sitios usables, desde el proceso de desarrollo, promueve la creatividad de los diseñadores. Con la usabilidad en mente, los desarrolladores pueden enfocar sus esfuerzos en el diseño de simplificar las tareas del usuario y mejorar la experiencia de éste en el sitio. La usabilidad significa concentrar el esfuerzo en una fácil utilización de la interfase. Es hacer las cosas simples para los usuarios, y esto puede significar la diferencia entre el éxito y el fracaso de un sitio. 

La usabilidad hace todo más fácil, excepto el trabajo de los desarrolladores. 

Para poder aplicarla se requiere un cambio en el proceso de desarrollo y un nuevo método de pensamiento del proyecto de principio a fin. 

Sin embargo, entender la usabilidad hace el trabajo del desarrollador más fácil y un mejor producto final. De esta manera se evita tener que volver a trabajar sobre la interfase del sitio una y otra vez, hasta lograr una relación de confianza con el usuario.

Cómo planear un desarrollo web 

Para que el sitio sea más eficaz se deben tener en cuenta los siguientes procesos en las diferentes etapas del diseño: 

1. Plantearse objetivos claros (¿Qué es lo que quiero decir?): Un error frecuente en muchos sitios es que no dicen nada y no llevan a ninguna parte. Por eso es muy importante definir nuestro objetivo, ya sea vender, informar, entretener, etc. ¿Para qué quiere nuestro cliente tener un sitio Web? ¿Qué se va a permitir realizar a través del sitio? De las respuestas surgirán las secciones principales del sitio y su esquema de navegación. 

Para definir cómo comunicar lo que quiero decir, es conveniente analizar la audiencia a quien me dirigido. ¿Quién es el destinatario esperado del sitio? 

2. Recopilar contenidos (¿Cómo decir lo que quiero decir?): Una de las etapas más difíciles, es la de generar el contenido y buscar la información que brindará nuestro sitio. ¿Cómo debe ser categorizada? Muchas empresas poseen divisiones internas que no concuerdan con las que realizan los usuarios. El sitio debe ser estructurado para corresponder a las expectativas de los usuarios. 

3. Estructura del sitio (¿Qué es lo que tiene que hacer el usuario para ver y entender lo que le quiero decir?): 

Al lograr una correcta estructura de navegación. Se concibe un diseño para nuestro sitio con el perfil de nuestro usuario y del cliente o empresa (¿Cómo se accederá a las diferentes secciones desde la página de inicio?). Un esquema consistente en todas las páginas ayuda al usuario a comprender la forma de navegación que deberá utilizar. La página más profunda del sitio no debería estar a más de tres clics de la página de inicio. 

4. Evaluación (¿Es correcto el sitio?,¿Cumple con los objetivos?): 

Poner a prueba nuestro trabajo. Las 4 reglas de oro: 1. Respeto (Aunque suene raro): Hacer sentir al usuario que el tiene el control; 2. Eficacia comunicacional: ¿Está entendiendo correctamente lo que quise decir? No era necesario que Jakob Nielsen lo confirmara para saber que una ortografía deficiente desmerece la credibilidad profesional. Se puede ser un gran profesional en el trabajo pero si nuestras presentaciones muestran faltas de ortografía, un potencial cliente tendrá todo el derecho de dudar de nuestra capacidad; 3. Regla de los 3 clics (¿Es fácil llegar a acceder a las diferentes secciones de mi sitio?): Es común encontrarnos con sitios con una gran cantidad de clic para llegar a determinadas secciones y muchas de las secciones no tienen forma de devolverse. Es una buena idea hacer un buen mapa del sitio; 4. Regla de los 8 segundos: Una buena optimización al sitio. Según las estadísticas un usuario promedio no está dispuesto a esperar más de 8 segundos a que se cargue la página en el navegador.

Pautas para hacer en un sitio con miras al usuario 

No existe una fórmula para un sitio Web exitoso pero si hay algunas pautas que se deben respetar para no hacer que el usuario de nuestro sitio huya desesperadamente por la frustración que nuestra interfaz le haya provocado. 

En trabajos presentados sobre claves de usabilidad de Jakob Nielsen, Jeffrey Veen, Kali Romiglia, y la empresa Macromedia entre otros, se identifican como claves a tener en cuenta al momento de desarrollar una interfaz para usuarios las siguientes: 

• Establecer una jerarquía visual y respetarla. 

Los usuarios necesitan señales para identificar qué parte del diseño es contenido, qué parte es navegación y qué es todo lo demás. Crear jerarquías visuales para los contenidos y respetarlos, hace que el usuario se encuentre confortable y familiarizado con el sitio. Tener en mente el mapa mental de los usuarios y el proceso de las tres preguntas antes mencionado. 

• Una navegación clara y lógica. 

La navegación debería ser eficiente y sin esfuerzo Los usuarios deberían no tener preguntas sobre a qué información los llevará cada botón y mantenerse siempre orientado, teniendo una manera simple para salir de cada sección y regresar al punto de partida. 

Muchas veces lo que es obvio para el diseñador, dista mucho de serlo para quien trata de desplazarse en una página Web. 

¡Y de llegar a alguna parte! 

• No abusar de la animación. 

La animación es un poderoso transporte de información. También puede ser uno de los más peligrosos elementos del diseño Web, ya que las repetidas animaciones pueden distraer la visión de del usuario del contenido principal. Es aconsejable evitar animaciones innecesarias. 

• Legibilidad en la pantalla. 

Según plantea Jakob Nielsen: «escribir para la eeb no es lo mismo que escribir para un medio impreso». En el caso del mundo del E-Learning, se ve bien aplicado este concepto al parcializar sus contenidos en unidades pequeñas, con textos concisos apoyados por recursos multimediales. 

Las principales recomendaciones al poner texto en línea son: redactar en forma breve y concisa; estructurar jerárquicamente los bloques de texto a través de un uso descriptivo de títulos y subtítulos que indiquen claramente lo que va a encontrar; usar esquemas visuales como listas o tablas cada vez que sea posible, para organizar mejor los contenidos y hacerlos comprensibles con rapidez; usar márgenes amplios o columnas para presentar el texto, a fin de que los ojos no se cansen recorriendo de extremo a extremo la pantalla; aumentar ligeramente el interlineado por defecto, a fin de que sea más fácil seguir cada línea de texto. Esto se logra con CSS; mantener un contraste alto entre el color de las letras y el color de fondo. 

Si es posible, se recomienda utilizar la tipografía Geneva, Georgia, Trebuchet o Verdana, que son fuentes creadas para la pantalla. 

• Usar sonido sólo cuando sea necesario. 

A la hora de utilizar sonido se debe considerar que el usuario tenga la opción de apagarlo antes de que este comience. Y si le agregamos distintos temas para elegir y un control de volumen, mucho mejor. Esto le va a dar más calidad al sitio. Hay que recordar que muchos usuarios se encuentran en su lugar de trabajo y puede que no tengan como escuchar el sonido. 

Sólo incluir música en un sitio Web si ello puede mejorar mucho la experiencia de usuario invitándolo a recorrerlo con calma, como pueden ser exhibiciones de arte o catálogos de productos finos. 

El insertar sonidos de tipo MIDI en un sitio, es sinónimo de diseñador amateur. Por lo tanto, si uno quiere ser profesional, es aconsejable no utilizarlo. 

• El usuario tiene el control.

Se debe permitir que el usuario tenga el control mientras sea posible. En el caso de sitios desarrollados en Flash deben tener la posibilidad de detener animaciones, rebobinar y detener sonidos, ejecutarlos, etc. 

• Intros en Flash. 

Las introducciones de Flash pueden ser beneficiosas en algunos sitios de ocio y gran despliegue multimedial donde el usuario acude sin apuro. Las animaciones sirven para contar una historia o informar al usuario mientras el resto del contenido carga. Pero tener una opción para «Saltear Intro» es un punto obligatorio para darle la opción al usuario de ir directo a la página de inicio del sitio. 

Hay que tener en cuenta a quien me dirijo. Ya que a un desarrollador Web o artista gráfico puede llegar a gustarle una grandiosa introducción al sitio, sonidos varios y animaciones. Pero hay usuarios que esperan encontrar información rápidamente. Internet es un medio interactivo, el usuario pretende interactuar, no sentarse a ver un clip antes de poder acceder al sitio. Si el cliente no acepta estas razones o el sitio realmente amerita una presentación, es conveniente que los usuarios que retornan al sitio no se vean obligados a presenciarla otra vez. 

• Preloaders para las animaciones 

En el caso de sitios hechos con Flash, se debe indicar el progreso de la transferencia, informándole al usuario cuánto falta para terminar el proceso, de lo contrario se corre el riesgo de que el usuario crea que el navegador se trabó. 

Otra manera de aprovechar el ancho de banda al utilizar Flash es realizar diferentes archivos SWF´s. Logrando una forma más sencilla y organizada de trabajar, y llamando mediante el comando LoadMovie sólo los SWF cuando los solicite el usuario. 

• No diseñar para una sola resolución y navegador 

El diseño Web es la única disciplina gráfica donde el autor desconoce las múltiples condiciones bajo las cuales puede ser observado el producto final. Es el diseñador profesional quien tiene el deber de que sus sitios sean compatibles con la mayor cantidad de sistemas disponibles. En la actualidad, se espera que todo diseño Web se vea correctamente al menos en resoluciones de 800 x 600 o superiores, tanto para Internet Explorer, como para los demás navegadores como Mozilla, Netscape, etc. 

• Alertar el lanzamiento de aplicaciones externas (Acrobat, Word) 

Estudios de usabilidad de Jakob Nielsen descubrieron que a la mayoría de los usuarios les molestan las limitaciones y el uso masivo de estos formatos en la Web. Prefieren descargar los documentos en su computadora y leerlos desde allí. Pero para eso quieren que se les avise. Se aconseja incluir al lado de todo enlace a aplicaciones externas información sobre el formato del que se trata. 

• Formularios validados contra la función mailto 

El uso de la función «mailto:» hace perder la posibilidad de muchos usuarios para contactarse, debido a que la gran mayoría posee cuentas de correo gratuitas, o se encuentran en un cyber. Razón por la cual no tienen configurado un programa de correo como puede ser el Outlook en la máquina en la que se encuentran y esto no les permite enviar un mail de contacto. 

Para solucionar esto se utilizan formularios para enviar mails de contacto pero teniendo como regla el validarlos ya que esto puede significar que el usuario no ingrese uno de los datos necesarios para establecer contacto.

No usar textos subrayados si no son enlaces 

Los diseñadores aficionados que provienen del mundo del diseño gráfico en general utilizan el subrayado de textos como forma de destacar una palabra o frase. Por desgracia, no aprovechan una de las cosas más asimiladas por los usuarios que es el tener como regla que un enlace tiene un subrayado. Si se desea destacar un texto lo recomendable es la utilización de cursiva o negrita, pero no subrayar. 

Un problema parecido se ve con los colores. El color azul oscuro indica un enlace, por lo que tampoco es recomendable usar este color para destacar texto que no sea un vínculo. 

• Utilizar el tag «TITLE» 

Este olvido denota descuido por parte del diseñador. Lo ideal para el tag «TITLE» de la página que se muestra en la barra de título de la ventana del navegador, es que comience con el nombre de la compañía, seguido de una descripción. No es aconsejable colocar «El sitio de..» o «Bienvenidos a...» salvo que deseen ser alfabetizados debajo de la «E» o «B», ya que los motores de búsqueda como Google se sirven del título de la página como uno de sus principales atributos al momento de indexarla. Considerando además que es precisamente eso lo que ve el usuario al obtener una lista de resultados se debe procurar ser muy descriptivo respecto al contenido. 

Los expertos en diseño critican como uno de los peores errores dejar todos los títulos de las páginas de un sitio web iguales. Pero es peor y muy difundido, el agregar caracteres extraños o usar escritura irregular para adornar el título de la página. Ejemplos de eso pueden ser: .: EMPRESA:., :_! SuPeR SiTiO ¡_: 

Estos verdaderos patrones hacen evidente la poca experiencia del diseñador, ya que entorpecen la correcta indexación de las páginas Web en los motores de búsqueda, al punto que algunos las ignoran por completo. 

• No tomarse la pantalla completa sin avisar 

Toda acción que reste control al usuario sobre su computador es un gran error. Y entre los peores, es el de tomar la pantalla completa sin previo aviso. Si a esto se le agrega la falta del botón de «cerrar ventana», se ha ganado un enemigo. 

Recordar que si se le toma la pantalla completa, es obligatorio el brindar un botón para que se pueda salir de ese estado. Pero siempre se debe tratar que sea el usuario el que acepte o no esa función. 

• Achicar imágenes desde HTML 

Un problema común entre diseñadores con poca experiencia es que no ven diferencia entre el peso y el tamaño de una imagen. Es frecuente ver este error, en el que se utilicen las imágenes originales para crear las muestras de una galería de fotos. Utilizan la reducción vía HTML, sin advertir que la fotografía sigue pesando lo mismo y que además, al reducirlas dentro de un armador Web, la calidad es pésima. Hay que realizar unos pasos antes, como duplicar la imagen en un editor de imagen tales como Fireworks y/o Photoshop, modificar el tamaño en pixeles de cada imagen y guardarlas para hacer la vista pequeña de la galería con esas imágenes. 

• Enlazar el logo a la página de inicio 

Ya es común encontrar en los sitios de empresas que el isologo esté vinculado a la pantalla de inicio del sitio. De esta manera se brinda el beneficio que desde cualquier punto en el que se encuentre, el usuario puede volver al inicio a sólo un clic de distancia.

Conclusión 

Los clientes han comenzado a exigir a la usabilidad como un factor importante en el diseño de sitios Web. Es por eso que son ellos quienes demandan a los desarrolladores Web que tengan en mente a los usuarios en todas las etapas de diseño de un sitio. Ya que los clientes, en su papel de usuarios, saben que ellos tienen poco tiempo para una usabilidad deficiente y prefieren cambiar de sitio para encontrar lo que buscan, antes que pasar por una mala experiencia.

El desafío para el desarrollador Web es hacer de la usabilidad algo natural en su trabajo. Porque como hemos visto, la clave para que un sitio tenga más probabilidades de alcanzar el éxito es que el mismo esté hecho para crear buenas experiencias al usuario. Si el desarrollador Web respeta las pautas anteriormente presentadas estará en el camino adecuado para crear contenido dinámico e interactivo que sea tan usable como creativo.


Pautas que hacen a un desarrollador web profesional. fue publicado de la página 278 a página281 en Reflexión Académica en Diseño y Comunicación Nº VI

ver detalle e índice del libro