Si necesitas un slide para tu aplicación, no dudes en echarle un vistazo a este desarrollado de forma no obstructiva. Algo más que necesario para conseguir un aplicación accesible.[Demo][Descargar]
Fuente: frequency-decoder.com via anieto2k.com
Thursday, November 29, 2007
Wednesday, November 28, 2007
Herramientas
CSS Formatter and Optimiser
http://www.cleancss.com/
CSS
53 CSS-Techniques You Couldn’t Live Without
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
Para Diseñadores y Desarrolladores
http://www.estandaresyaccesibilidad.com/2005/12/herramientas-para-diseadores-y_27.html
Mas herramientas
http://metaware-inc.wiki.mailxmail.com/EnlacesWEB
http://www.cleancss.com/
CSS
53 CSS-Techniques You Couldn’t Live Without
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
Para Diseñadores y Desarrolladores
http://www.estandaresyaccesibilidad.com/2005/12/herramientas-para-diseadores-y_27.html
Mas herramientas
http://metaware-inc.wiki.mailxmail.com/EnlacesWEB
Friday, November 23, 2007
Páginas útiles
Guía de Referencia CSS 2.1
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
Galeria de imagenes con CSS
http://www.grafikas.es/web_apuntes/galerias.htm#noir
Propiedades, atributos y equivalencias CSS
http://usuarios.lycos.es/dhtml_club/objetos/propiedades.htm
Librería javascript que permite agregar un tooltip a nuestra páginas web, esto con la posibilidad de personalizar el tooltip mediante CSS
http://www.dxpro.es/index.php?topic=458.msg887
Apuntes CSS - Posicionamiento
http://www.ignside.net/man/css/posicionamiento.php
Tidy para Windows
http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
Bugs de Firefox
http://www.mclibre.org/consultar/amaya/otros/ot_bugs_mozilla.html
Web Page Speed Report
http://www.websiteoptimization.com/services/analyze/wso.php
Verificadores, Editores y Herramientas para JavaScript
http://www.programas-gratis.net/b/java-script
Recopilación de herramientas javascript
http://www.anieto2k.com/2007/03/29/recopilacion-de-herramientas-javascript/
JavaScript Code Improver 1.00
http://jcay.com/jscisetup.exe
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
Galeria de imagenes con CSS
http://www.grafikas.es/web_apuntes/galerias.htm#noir
Propiedades, atributos y equivalencias CSS
http://usuarios.lycos.es/dhtml_club/objetos/propiedades.htm
Librería javascript que permite agregar un tooltip a nuestra páginas web, esto con la posibilidad de personalizar el tooltip mediante CSS
http://www.dxpro.es/index.php?topic=458.msg887
Apuntes CSS - Posicionamiento
http://www.ignside.net/man/css/posicionamiento.php
Tidy para Windows
http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
Bugs de Firefox
http://www.mclibre.org/consultar/amaya/otros/ot_bugs_mozilla.html
Web Page Speed Report
http://www.websiteoptimization.com/services/analyze/wso.php
Verificadores, Editores y Herramientas para JavaScript
http://www.programas-gratis.net/b/java-script
Recopilación de herramientas javascript
http://www.anieto2k.com/2007/03/29/recopilacion-de-herramientas-javascript/
JavaScript Code Improver 1.00
http://jcay.com/jscisetup.exe
Friday, November 16, 2007
Tiempos de respuesta
Tiempos de respuesta en la Web
El objetivo mínimo a alcanzar en la actualidad es un tiempo de respuesta de no más de 10 segundos, dado que este es el tiempo límite que las personas pueden prestar atención mientras esperan.
Según los expertos, los tiempos recomendados son los siguientes:
Tiempo de respuesta del Servidor
Debido al dinamismo con el que son desarrolladas las páginas hoy en día, el tiempo de descarga de las mismas debe ser calculado sobre la marcha. Por lo que la demora de visualización no depende solamente del tiempo de descarga sino también del rendimiento del servidor o servidores involucrados.
En la actualidad, es muy común que los sitios Web interactúen con bases de datos, lo que hace que el proceso de descarga sea aún más lento.
Todas estas cuestiones técnicas no le interesan al usuario ya que a él no le interesa por que los tiempos de respuesta son lentos.
Lo único que ven y perciben los usuarios es que el sitio que están visitando no les esta dando un buen servicio.
Los tiempos de respuesta lentos se traducen directamente en un nivel de confianza menor.
Los factores que influyen en la velocidad de carga de una página son:
Fuente: Jakob Nielsen - Usabilidad, Diseño de Sitios Web
El objetivo mínimo a alcanzar en la actualidad es un tiempo de respuesta de no más de 10 segundos, dado que este es el tiempo límite que las personas pueden prestar atención mientras esperan.
Según los expertos, los tiempos recomendados son los siguientes:
- Una décima de segundo (0.1 sec) es el tiempo normal de respuesta para que el usuario sienta que el sistema esta reaccionando instantáneamente. En este punto no es necesario informar al usuario que algo esta siendo procesado o actualizado.
- Un segundo (1 sec) es el tiempo limite para que el usuario se de cuenta de que hay una demora y que la misma no es una interrupción.
En demoras de más de una décima y menos de un segundo no es necesario mostrar ningún mensaje especial, pero el usuario siente que ya no esta trabajando directamente sobre los datos.
Mostrar una página en menos de un segundo le da al usuario la sensación de que esta accediendo a la información sin demoras. - Diez segundos (10 sec) es el tiempo máximo que un usuario puede permanecer atento a una tarea. Si el tiempo de respuesta es mayor, los usuarios tienden a ocupar su tiempo en otras cosas por lo que ya no están atentos a lo que la computadora esta haciendo.
Tiempo de respuesta del Servidor
Debido al dinamismo con el que son desarrolladas las páginas hoy en día, el tiempo de descarga de las mismas debe ser calculado sobre la marcha. Por lo que la demora de visualización no depende solamente del tiempo de descarga sino también del rendimiento del servidor o servidores involucrados.
En la actualidad, es muy común que los sitios Web interactúen con bases de datos, lo que hace que el proceso de descarga sea aún más lento.
Todas estas cuestiones técnicas no le interesan al usuario ya que a él no le interesa por que los tiempos de respuesta son lentos.
Lo único que ven y perciben los usuarios es que el sitio que están visitando no les esta dando un buen servicio.
Los tiempos de respuesta lentos se traducen directamente en un nivel de confianza menor.
Los factores que influyen en la velocidad de carga de una página son:
- Rendimiento del Servidor
- Conexión del Servidor con Internet
- Internet
- Conexión del Usuario con Internet
- Velocidad del Navegador y de la Computadora del Usuario
Fuente: Jakob Nielsen - Usabilidad, Diseño de Sitios Web
Usabilidad web
1. Introducción
Con las facilidades existentes para la creación de sitios web, aumenta considerablemente la cantidad de llamados "webmasters" y una cantidad de "sitios" que proliferan de manera amateur, ayudados de hosting gratuitos y asistentes de creación de paginas, como los de geocities.
Lo malo es que estos softwares, no muestran como hacerlos correctamente. Existen muchas cosas más a tomar en cuenta que el solo hecho de mostrar nuestra información.
Un buen sitio Web debe ser como unos buenos padres, debes hacer sentir querido a tu usuario, si no quieres que se aleje del hogar, por otros que le ofrezcan amor y comprensión.
Hacerlo sentir querido no es decirle...
"Hola usuario, sabes, eres lo mejor que me ha pasado"
...sino, simplemente ponerle el campo para buscar donde él espera que esté.
Un usuario satisfecho es tu mejor publicidad y además gratis, más que cualquier banner publicitario.
Tu web ocasiona una interacción entre una persona y una computadora, de las cuales solo la persona razona, así que has tu sitio lo mas lógico que puedas, si sabemos que el usuario no le puede hacer preguntas a la PC, pues no las ocasionemos.
2. Encontrabilidad
Este es un término utilizado en la Usabilidad, el cual se refiere a la capacidad de "Encontrar"
¿Pero encontrar que?, encontrar lo que buscabas en el sitio al que entraste.
Supongamos que entras al home de Cristalab buscando los personajes del cómic ¿Cuanto tardas en hacerlo? Más de lo que esperabas supongo, pero que tal si entras buscando el ultimo cómic o las últimas entradas al blog ¿Fácil, no?
Has fácil de encontrar para lo que esta hecho tu sitio, no quiero decir que lo demás lo hagas difícil, también debe ser fácil, pero hay cosas que llevan prioridad.
"Que no se pasen la vida buscando lo que necesitan"
Un buen sabor de boca
Una buena sensación hace que ames un sitio Web, por ejemplo, me han tocado sitios donde lleno todo un gran formulario, doy Enviar y me marca error "Faltan datos requeridos" y me regresa a la página del formulario donde el campo requerido aparece con un asterisco en rojo, a lo que en otras ocasiones esto no lo hacen y tienes que llenar un campo y te marca el mismo error de nuevo, llenas otro y otro y otro y al final resulta que todos eran requeridos, lo peor, hay unos que te borran los datos y tienes que escribir todo de nuevo cada vez que te regresa.
Imagina lo que al usuario le gustaría e inclúyelo para el momento en que lo necesite. Por ejemplo, en una web grande, el campo "Buscar".
"Código Postal incorrecto, por favor, llene nuevamente los 25 datos del formulario"
3. Amarra al usuario
La mayoría de las veces el usuario recorre visualmente toda la pagina buscando inconcientemente que esta marque puntos claves e interesantes antes decidir leerla. Si no cuenta con esto, lo más probable es que se vaya o si tenemos suerte, la agregue a favoritos para un día que no tenga nada más importante que hacer (nadie sabe si ese día llegará).
"A ver, a ver, a ver... ¿que es eso de CristaLab los mejores tutoriales?"
Un sitio Feo
A nadie e gusta un sitio "feo"; la estética juega gran parte de nuestro triunfo, dale placer a los ojos del usuario, no lastimes su vista, refleja la imagen que el esperaba encontrar en tu web. Es posible hacer un sitio estético y usable, no tienes que elegir entre una de las dos.
4. Qué es la Usabilidad
ISO/IEC 9126:
"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"
ISO/IEC 9241:
"Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"
En otras palabras; que tan fácil se navega en tu web, que tan rápido se aprende a manejar, que amigable es, que capacidad tienen de gustar, que sea intuitiva y sobre todo, que sirva para lo que fue hecha.
[Press any Key] A esto llamo Usabilidad. ¿Porque no ser específicos?, presione la tecla "Enter". Por ejemplo
La usabilidad no se enfoca solamente a que una cosa se pueda utilizar correctamente, sino que deje una buena impresión o sensación al usuario, que le sea agradable usarla.
Según la ISO la Usabilidad se enfoca en la:
Facilidad de Aprendizaje: Que tan rápido aprenden a controlar el sitio. Que tan familiar, que tan predecible es. Flexibilidad: Sí se puede hacer algo de distintas formas, sí hay distintos caminos para llegar a nuestro objetivo. Diferentes opciones para realizar las tareas. Robustez: Que tanto ayudamos al usuario, que tan fácil le hacemos el trabajo, que tan rápido cumple sus objetivos, que tan completo esta el sitio.
Esto no se trata de diseñarle el sitio al usuario como un estúpido, sino de no hacerlo sentir como uno al no entender tu sitio Web.
5. Lo que no debes hacer (1)
Aquí listo algunas cosas que yo considero no deberías incluir en tus webs, claro que al final la decisión es de cada quien.
No cosas parpadeantes, constantes, muy llamativas, que no dejen concentrarte en lo que realmente necesitas. No uses colores muy brillantes que molesten o lastimen la vista del usuario.
"OK, ya entiendo como funciona esto, leo, descanso, leo, descanso..."
Cuidar el peso de las imágenes, solo las necesarias y la calidad necesaria. No fondos de página con diseño, es muy molesto que debajo de lo que estas leyendo o tratando de leer se encuentre una imagen (foto, fondo o peor aun, gif animado). Procura siempre debajo del texto un fondo sólido. No utilizar subrayados en palabras que parezcan links, esto confunde al usuario y es molesto darle clic y que no pase nada. No poner links que parpadean. No abusar de las precargas, es molesto estar esperando a que se carguen gran cantidad de cosas, y sobre todo cuando después de que se cargo la principal, tienes que ver otra precarga cada que quieres ver una sección. No dejar mucho a la imaginación del usuario, no ponerlo en una situación donde el no sepa que es lo que tiene que hacer a continuación, donde pierda 10 segundos en encontrar el botón para continuar o lo que necesita, hay que hacerle todo muy predecible.
¿Presiono Siguiente, continuar, o finalizar?
6. Lo que no debes hacer (2)
No cambies eltamaño de las imágenes en el HTML o con el DreamWeaver o en casos extremos con el FrontPage; crea las imágenes del tamaño que las vas a utilizar con tu editor de imágenes. No usar tecnicismos que nuestros usuarios no van a comprender, no te trates de lucir con palabras que solo los van a confundir, a todos nos gusta que nos hablen en nuestro idioma.
"Si diseñó un sitio para si mismo, ¿para que lo publica en Internet?"
Ya no hagas "intros" en flash para tu web, YA NO se usa, puedes hacer una presentación de tu sitio e incluirla dentro de él, y el que quiera verla, dará clic en el vínculo. Deja que el usuario entre directamente a la página principal, no pongas donde salga el botón "Entrar al sitio" y si le pones música, que inicie apagada, si el usuario quiere escucharla el dará play.
"¿Cree que tengo tiempo para ver una Intro?, y aun peor, esperar a que se cargue, haaa y cada vez que entro tener que presionar Saltar Intro, ¿no entienden que a mi lo que me interesa es la información?, no importa, creo que por aquí hay otro sitio no tan bueno, pero no tan molesto"
Muchos dicen que ¿Para que flash?, que para que imágenes, que para que colores, si lo que importa es la información, el chiste es saber combinar estas cosas sin excederse, se puede diseñar estético sin aumentar el peso a la Web, ¿De que sirve tener tanta información si a nadie le va a atraer leerla?
7. Lo que no debes hacer (3)
No repetir el "Title" (el texto que aparece cuando dejas el puntero sobre un link) lo mismo que dice tu hipervínculo, ya que esto es redundante, y lo que uno espera es una muy breve descripción de lo que hay detrás de este link. Repetirlo solo es bueno en un menú. No le cambies el botón cerrar por un circulo en lugar de la cruz. Las metáforas familiares proporcionanuna interfaz intuitiva. Y si lo pones arriba a la derecha que mejor. Siempre trata de hacer los sitios de modo que se adecuen a la gente, no que la gente se adecue al sitio. Si ya están acostumbrados a algo ¿para que cambiarlo?
"¡Claro que le se!, el otro día vi como la usaba mi nieto, ¿Qué puede cambiar?"
No abrir links en nuevas ventanas, eso lo debe decidir el usuario. No poner información basura, nada que al usuario no le sirva, nada que este de más, eso mejor agregarlo en otra sección en la cual el entre si es que desea conocer ese dato. Esta información puede estorbar en la estética o usabilidad al saturar al usuario de información. Los Combobox que actúan al momento de seleccionarlo. Se podrían aceptar los que lo hacen al momento que seleccionas un país, pero aun estos deben avistarte que actuaran al momento de cambiar la selección. Luego pasa que usas el scroll del Mouse, y la web se vuelve loca, esto debido a que tenías seleccionado el combo y al momento de hacer el scroll cambiaste por todas las opciones de este.
8. Algunos Consejos (1)
Determinar para quetipo de usuario vamos a diseñar, se debe saber que capacidad, experiencia, conocimientos o hasta las condiciones físicas va a tener el usuario que lo va a utilizar, su edad, y además, que el sitio sea ergonómico y que cargue rápido.
"Que bien, un sitio donde puedo navegar, y de seguro hasta tomó en cuenta que padezco sordera"
Siempre un vínculo a la pagina principal (home), no olvidar incluirlo también en el logotipo. Que pueda hacerlas tareas rápido, que no tarde en ninguna actividad, si ven que algo los va a hacer perder mucho tiempo, mejor lo dejan. Si tienes un link muy descriptivo y no sabes que poner en el ALT; puedes colocar la URL a donde serás dirigido. Siempre resume la información (no como este artículo ), has que a simple vista tu artículo no se vea pesado o aburrido antes de leerlo. La Web nos ofrece la gran ventaja del hipertexto: Texto dentro de texto, links. Dentro de tu información no tienes que explicar cada palabra técnica, puedes utilizar Vínculos a donde la expliques o el apoyo de CSS para meter dentro etiquetas especiales, una pequeña explicación, y lo mejor y más recomendable, solo deja a la vista lo mas esencial, solo deja tu resumen, un comúnmente llamado "en pocas palabras" y al final puedes dejar un link o vinculo "ver más a fondo". Importante recordar que no se debe de abusar de los links dentro de texto. Recomiendo un link por párrafo, máximo dos. Una forma para contactar al Webmaster y un buzón de sugerencias, dentro de la sección del quienes somos, la cual siempre debería de existir. Lostítulos en las ventanas, estar relacionados al contenido de la misma, recuerda que cuando está minimizada es lo único que ves, aparte de otras ventajas que esto ofrece, no pongas en todas solamente el titulo de tu web. Todos vemos siempre en el orden de izquierda a derecha y de arriba hacia abajo, así que esa puede ser la importancia del contenido de nuestra Web. Siempre es bueno un efecto rollover (mouseOver) en los menús o links, a los usuarios siempre les gusta saber que está o que no esta pasando.
9. Algunos Consejos (2)
Siempre debe ser el usuario el que inicie o active cualquier cosa que suceda en el sitio, todo lo demás son intrusiones. Además debe tener el poder de detener cualquier proceso o actividad. Recuerda que puedes usar imágenes en las opciones (menús, links, secciones), son más fáciles de recordar y reconocer a simple vista. Reducir la cantidad de Clicks que tiene que hacer el usuario al mínimo, cuentan también los clic que da cuando entra a una opción de menú buscando algo y no lo encuentra y tiene que regresar y dar mas clic, así que una forma de reducirlos puede ser estructurando bien la información para que siempre la encuentre a la primera. Un diseño estándar, igual en cada sección, que todo sea similar. Si el diseño de tu sitio es consistente, sera traducido en facilidad de aprendizaje y uso. Aprender a decir mucho con pocas palabras, para reducir la cantidad de texto. El usuario siempre debe ser informado de lo que sucede detrás de la página, es decir, siempre indicarle lo que esta sucediendo, como por ejemplo: cargando contenido, enviando correo, adjuntando archivo, realizando su búsqueda, etc. Brindarle Seguridad, de manera que el usuario esté seguro de lo que sucederá al momento de realizar determinada acción, como dar clic en un link, el debe estar seguro de lo que pasará y no tener que pensarla 2 veces antes de hacerlo. No poner links ni imágenes confusas como vínculo. Siempre dales todo lo que necesitan, hazles las cosas fáciles, no los hagas batallar.
"Por favor, maquíllese antes de entrar a la siguiente sección"
Por ultimo, especificar al momento de hacer el trato o contrato con el cliente, hasta donde él tomará parte, como decirle de buena manera y lo mas diplomático que se pueda, "Usted podrá decidir que contenido quiere que resalte, pero yo decidiré la forma de hacerlo resaltar", "usted dice que, pero yo decido como". "Usted es el experto en su área y yo en la mía". Claro que sobre logotipos y colores oficiales lo más que podemos hacer son propuestas para cambiarlos.
10. Beneficios
Hay que darle menos asistencia al usuario, sobre todo si manejamos un sistema Web. Reducción notable de errores, ya saben, cuando capturan mal, o donde no va, etc. El usuario realizará sus objetivos mucho más rápido, y eso es agradable para cualquiera.
"¡Amigo!... ni te imaginas el sitio que encontré, ya te mande la dirección por correo, nos ofrece lo mismo pero este es facilismo y sin complicaciones, olvídate de liaberinto.con.fun.de"
Mantenimiento al sitio mucho más rápido y sencillo, sobre todo si utilizamos CSS.
Gran cantidad de visitas y usuarios, ya solo resta meterle contenido interesante. Mucha mejor calidad del sitio.
Tenemos usuarios más tranquilos y felices de navegar por nuestra Web. Siempre dejaremos un muy buen sabor de boca en cualquiera de nuestros visitantes.
"Navegar en este sitio es tan rico como mi café"
11. Conclusión
Siempre debemos tener en cuenta qué es lo que esperamos de los usuarios y del sitio (Si vamos a hacer un sitio para una película de cine y solo quieres causar una buena impresión o uno para tu negocio al cual quieres que vuelvan y vuelvan).
Este artículo es solo para que sepan que todo tiene un porque, no se puede realizar una Web o un sistema como a uno se le antoje, siempre hay que ir mas allá, "voltear la tortilla" como decimos los mexicanos, ponte en lugar de el usuario final.
Imaginen un sitio con todas estas características, ¿No se sentirían amados por él?
Diseño Web centrado en el usuario: Esta es una corriente que enfoca más a la forma de estructurar la información dentro de nuestro sitio Web.
Autor: QUHO Quintero
Fuente: http://www.mailxmail.com/curso/informatica/usabilidadweb
Con las facilidades existentes para la creación de sitios web, aumenta considerablemente la cantidad de llamados "webmasters" y una cantidad de "sitios" que proliferan de manera amateur, ayudados de hosting gratuitos y asistentes de creación de paginas, como los de geocities.
Lo malo es que estos softwares, no muestran como hacerlos correctamente. Existen muchas cosas más a tomar en cuenta que el solo hecho de mostrar nuestra información.
Un buen sitio Web debe ser como unos buenos padres, debes hacer sentir querido a tu usuario, si no quieres que se aleje del hogar, por otros que le ofrezcan amor y comprensión.
Hacerlo sentir querido no es decirle...
"Hola usuario, sabes, eres lo mejor que me ha pasado"
...sino, simplemente ponerle el campo para buscar donde él espera que esté.
Un usuario satisfecho es tu mejor publicidad y además gratis, más que cualquier banner publicitario.
Tu web ocasiona una interacción entre una persona y una computadora, de las cuales solo la persona razona, así que has tu sitio lo mas lógico que puedas, si sabemos que el usuario no le puede hacer preguntas a la PC, pues no las ocasionemos.
2. Encontrabilidad
Este es un término utilizado en la Usabilidad, el cual se refiere a la capacidad de "Encontrar"
¿Pero encontrar que?, encontrar lo que buscabas en el sitio al que entraste.
Supongamos que entras al home de Cristalab buscando los personajes del cómic ¿Cuanto tardas en hacerlo? Más de lo que esperabas supongo, pero que tal si entras buscando el ultimo cómic o las últimas entradas al blog ¿Fácil, no?
Has fácil de encontrar para lo que esta hecho tu sitio, no quiero decir que lo demás lo hagas difícil, también debe ser fácil, pero hay cosas que llevan prioridad.
"Que no se pasen la vida buscando lo que necesitan"
Un buen sabor de boca
Una buena sensación hace que ames un sitio Web, por ejemplo, me han tocado sitios donde lleno todo un gran formulario, doy Enviar y me marca error "Faltan datos requeridos" y me regresa a la página del formulario donde el campo requerido aparece con un asterisco en rojo, a lo que en otras ocasiones esto no lo hacen y tienes que llenar un campo y te marca el mismo error de nuevo, llenas otro y otro y otro y al final resulta que todos eran requeridos, lo peor, hay unos que te borran los datos y tienes que escribir todo de nuevo cada vez que te regresa.
Imagina lo que al usuario le gustaría e inclúyelo para el momento en que lo necesite. Por ejemplo, en una web grande, el campo "Buscar".
"Código Postal incorrecto, por favor, llene nuevamente los 25 datos del formulario"
3. Amarra al usuario
La mayoría de las veces el usuario recorre visualmente toda la pagina buscando inconcientemente que esta marque puntos claves e interesantes antes decidir leerla. Si no cuenta con esto, lo más probable es que se vaya o si tenemos suerte, la agregue a favoritos para un día que no tenga nada más importante que hacer (nadie sabe si ese día llegará).
"A ver, a ver, a ver... ¿que es eso de CristaLab los mejores tutoriales?"
Un sitio Feo
A nadie e gusta un sitio "feo"; la estética juega gran parte de nuestro triunfo, dale placer a los ojos del usuario, no lastimes su vista, refleja la imagen que el esperaba encontrar en tu web. Es posible hacer un sitio estético y usable, no tienes que elegir entre una de las dos.
4. Qué es la Usabilidad
ISO/IEC 9126:
"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"
ISO/IEC 9241:
"Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"
En otras palabras; que tan fácil se navega en tu web, que tan rápido se aprende a manejar, que amigable es, que capacidad tienen de gustar, que sea intuitiva y sobre todo, que sirva para lo que fue hecha.
[Press any Key] A esto llamo Usabilidad. ¿Porque no ser específicos?, presione la tecla "Enter". Por ejemplo
La usabilidad no se enfoca solamente a que una cosa se pueda utilizar correctamente, sino que deje una buena impresión o sensación al usuario, que le sea agradable usarla.
Según la ISO la Usabilidad se enfoca en la:
Facilidad de Aprendizaje: Que tan rápido aprenden a controlar el sitio. Que tan familiar, que tan predecible es. Flexibilidad: Sí se puede hacer algo de distintas formas, sí hay distintos caminos para llegar a nuestro objetivo. Diferentes opciones para realizar las tareas. Robustez: Que tanto ayudamos al usuario, que tan fácil le hacemos el trabajo, que tan rápido cumple sus objetivos, que tan completo esta el sitio.
Esto no se trata de diseñarle el sitio al usuario como un estúpido, sino de no hacerlo sentir como uno al no entender tu sitio Web.
5. Lo que no debes hacer (1)
Aquí listo algunas cosas que yo considero no deberías incluir en tus webs, claro que al final la decisión es de cada quien.
No cosas parpadeantes, constantes, muy llamativas, que no dejen concentrarte en lo que realmente necesitas. No uses colores muy brillantes que molesten o lastimen la vista del usuario.
"OK, ya entiendo como funciona esto, leo, descanso, leo, descanso..."
Cuidar el peso de las imágenes, solo las necesarias y la calidad necesaria. No fondos de página con diseño, es muy molesto que debajo de lo que estas leyendo o tratando de leer se encuentre una imagen (foto, fondo o peor aun, gif animado). Procura siempre debajo del texto un fondo sólido. No utilizar subrayados en palabras que parezcan links, esto confunde al usuario y es molesto darle clic y que no pase nada. No poner links que parpadean. No abusar de las precargas, es molesto estar esperando a que se carguen gran cantidad de cosas, y sobre todo cuando después de que se cargo la principal, tienes que ver otra precarga cada que quieres ver una sección. No dejar mucho a la imaginación del usuario, no ponerlo en una situación donde el no sepa que es lo que tiene que hacer a continuación, donde pierda 10 segundos en encontrar el botón para continuar o lo que necesita, hay que hacerle todo muy predecible.
¿Presiono Siguiente, continuar, o finalizar?
6. Lo que no debes hacer (2)
No cambies eltamaño de las imágenes en el HTML o con el DreamWeaver o en casos extremos con el FrontPage; crea las imágenes del tamaño que las vas a utilizar con tu editor de imágenes. No usar tecnicismos que nuestros usuarios no van a comprender, no te trates de lucir con palabras que solo los van a confundir, a todos nos gusta que nos hablen en nuestro idioma.
"Si diseñó un sitio para si mismo, ¿para que lo publica en Internet?"
Ya no hagas "intros" en flash para tu web, YA NO se usa, puedes hacer una presentación de tu sitio e incluirla dentro de él, y el que quiera verla, dará clic en el vínculo. Deja que el usuario entre directamente a la página principal, no pongas donde salga el botón "Entrar al sitio" y si le pones música, que inicie apagada, si el usuario quiere escucharla el dará play.
"¿Cree que tengo tiempo para ver una Intro?, y aun peor, esperar a que se cargue, haaa y cada vez que entro tener que presionar Saltar Intro, ¿no entienden que a mi lo que me interesa es la información?, no importa, creo que por aquí hay otro sitio no tan bueno, pero no tan molesto"
Muchos dicen que ¿Para que flash?, que para que imágenes, que para que colores, si lo que importa es la información, el chiste es saber combinar estas cosas sin excederse, se puede diseñar estético sin aumentar el peso a la Web, ¿De que sirve tener tanta información si a nadie le va a atraer leerla?
7. Lo que no debes hacer (3)
No repetir el "Title" (el texto que aparece cuando dejas el puntero sobre un link) lo mismo que dice tu hipervínculo, ya que esto es redundante, y lo que uno espera es una muy breve descripción de lo que hay detrás de este link. Repetirlo solo es bueno en un menú. No le cambies el botón cerrar por un circulo en lugar de la cruz. Las metáforas familiares proporcionanuna interfaz intuitiva. Y si lo pones arriba a la derecha que mejor. Siempre trata de hacer los sitios de modo que se adecuen a la gente, no que la gente se adecue al sitio. Si ya están acostumbrados a algo ¿para que cambiarlo?
"¡Claro que le se!, el otro día vi como la usaba mi nieto, ¿Qué puede cambiar?"
No abrir links en nuevas ventanas, eso lo debe decidir el usuario. No poner información basura, nada que al usuario no le sirva, nada que este de más, eso mejor agregarlo en otra sección en la cual el entre si es que desea conocer ese dato. Esta información puede estorbar en la estética o usabilidad al saturar al usuario de información. Los Combobox que actúan al momento de seleccionarlo. Se podrían aceptar los que lo hacen al momento que seleccionas un país, pero aun estos deben avistarte que actuaran al momento de cambiar la selección. Luego pasa que usas el scroll del Mouse, y la web se vuelve loca, esto debido a que tenías seleccionado el combo y al momento de hacer el scroll cambiaste por todas las opciones de este.
8. Algunos Consejos (1)
Determinar para quetipo de usuario vamos a diseñar, se debe saber que capacidad, experiencia, conocimientos o hasta las condiciones físicas va a tener el usuario que lo va a utilizar, su edad, y además, que el sitio sea ergonómico y que cargue rápido.
"Que bien, un sitio donde puedo navegar, y de seguro hasta tomó en cuenta que padezco sordera"
Siempre un vínculo a la pagina principal (home), no olvidar incluirlo también en el logotipo. Que pueda hacerlas tareas rápido, que no tarde en ninguna actividad, si ven que algo los va a hacer perder mucho tiempo, mejor lo dejan. Si tienes un link muy descriptivo y no sabes que poner en el ALT; puedes colocar la URL a donde serás dirigido. Siempre resume la información (no como este artículo ), has que a simple vista tu artículo no se vea pesado o aburrido antes de leerlo. La Web nos ofrece la gran ventaja del hipertexto: Texto dentro de texto, links. Dentro de tu información no tienes que explicar cada palabra técnica, puedes utilizar Vínculos a donde la expliques o el apoyo de CSS para meter dentro etiquetas especiales, una pequeña explicación, y lo mejor y más recomendable, solo deja a la vista lo mas esencial, solo deja tu resumen, un comúnmente llamado "en pocas palabras" y al final puedes dejar un link o vinculo "ver más a fondo". Importante recordar que no se debe de abusar de los links dentro de texto. Recomiendo un link por párrafo, máximo dos. Una forma para contactar al Webmaster y un buzón de sugerencias, dentro de la sección del quienes somos, la cual siempre debería de existir. Lostítulos en las ventanas, estar relacionados al contenido de la misma, recuerda que cuando está minimizada es lo único que ves, aparte de otras ventajas que esto ofrece, no pongas en todas solamente el titulo de tu web. Todos vemos siempre en el orden de izquierda a derecha y de arriba hacia abajo, así que esa puede ser la importancia del contenido de nuestra Web. Siempre es bueno un efecto rollover (mouseOver) en los menús o links, a los usuarios siempre les gusta saber que está o que no esta pasando.
9. Algunos Consejos (2)
Siempre debe ser el usuario el que inicie o active cualquier cosa que suceda en el sitio, todo lo demás son intrusiones. Además debe tener el poder de detener cualquier proceso o actividad. Recuerda que puedes usar imágenes en las opciones (menús, links, secciones), son más fáciles de recordar y reconocer a simple vista. Reducir la cantidad de Clicks que tiene que hacer el usuario al mínimo, cuentan también los clic que da cuando entra a una opción de menú buscando algo y no lo encuentra y tiene que regresar y dar mas clic, así que una forma de reducirlos puede ser estructurando bien la información para que siempre la encuentre a la primera. Un diseño estándar, igual en cada sección, que todo sea similar. Si el diseño de tu sitio es consistente, sera traducido en facilidad de aprendizaje y uso. Aprender a decir mucho con pocas palabras, para reducir la cantidad de texto. El usuario siempre debe ser informado de lo que sucede detrás de la página, es decir, siempre indicarle lo que esta sucediendo, como por ejemplo: cargando contenido, enviando correo, adjuntando archivo, realizando su búsqueda, etc. Brindarle Seguridad, de manera que el usuario esté seguro de lo que sucederá al momento de realizar determinada acción, como dar clic en un link, el debe estar seguro de lo que pasará y no tener que pensarla 2 veces antes de hacerlo. No poner links ni imágenes confusas como vínculo. Siempre dales todo lo que necesitan, hazles las cosas fáciles, no los hagas batallar.
"Por favor, maquíllese antes de entrar a la siguiente sección"
Por ultimo, especificar al momento de hacer el trato o contrato con el cliente, hasta donde él tomará parte, como decirle de buena manera y lo mas diplomático que se pueda, "Usted podrá decidir que contenido quiere que resalte, pero yo decidiré la forma de hacerlo resaltar", "usted dice que, pero yo decido como". "Usted es el experto en su área y yo en la mía". Claro que sobre logotipos y colores oficiales lo más que podemos hacer son propuestas para cambiarlos.
10. Beneficios
Hay que darle menos asistencia al usuario, sobre todo si manejamos un sistema Web. Reducción notable de errores, ya saben, cuando capturan mal, o donde no va, etc. El usuario realizará sus objetivos mucho más rápido, y eso es agradable para cualquiera.
"¡Amigo!... ni te imaginas el sitio que encontré, ya te mande la dirección por correo, nos ofrece lo mismo pero este es facilismo y sin complicaciones, olvídate de liaberinto.con.fun.de"
Mantenimiento al sitio mucho más rápido y sencillo, sobre todo si utilizamos CSS.
Gran cantidad de visitas y usuarios, ya solo resta meterle contenido interesante. Mucha mejor calidad del sitio.
Tenemos usuarios más tranquilos y felices de navegar por nuestra Web. Siempre dejaremos un muy buen sabor de boca en cualquiera de nuestros visitantes.
"Navegar en este sitio es tan rico como mi café"
11. Conclusión
Siempre debemos tener en cuenta qué es lo que esperamos de los usuarios y del sitio (Si vamos a hacer un sitio para una película de cine y solo quieres causar una buena impresión o uno para tu negocio al cual quieres que vuelvan y vuelvan).
Este artículo es solo para que sepan que todo tiene un porque, no se puede realizar una Web o un sistema como a uno se le antoje, siempre hay que ir mas allá, "voltear la tortilla" como decimos los mexicanos, ponte en lugar de el usuario final.
Imaginen un sitio con todas estas características, ¿No se sentirían amados por él?
Diseño Web centrado en el usuario: Esta es una corriente que enfoca más a la forma de estructurar la información dentro de nuestro sitio Web.
Autor: QUHO Quintero
Fuente: http://www.mailxmail.com/curso/informatica/usabilidadweb
Tuesday, November 13, 2007
Evitando el "click aquí": el arte de enlazar
En Coding Horror han escrito “Don’t Click Here: The Art of Hyperlinking” un artículo interesante sobre las mejores formas de enlazar.
El artículo contiene una introducción al “hyperlink” (normalmente traducido como hiperenlace en castellano pero suena horrible) que aunque no está mal creo que es más interesante los once puntos que tratan (las imágenes que sirven de ejemplo en cada punto también son de ahí):
Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos. Cuando se construyen enlaces hay que evitar la “Fitt’s Law. Si lo que estás enlazando es pequeño, hazlo grande. Si no puedes hacerlo más grande, al menos añade bordes para que sea más fácil a la gente hacer click.
En la imagen siguiente sólo los números están enlazados, una pena:
El primer enlace es el más importante. El primer enlace va a llevarse la mayor parte de la atención del lector y el mayor porcentaje de clicks. Elige tu primer enlace cuidadosamente. Empieza por lo importante y no lo malgastes en una trivialidad. La imagen siguiente es un buen ejemplo de enlazar primero lo más relevante:
No enlaces todo. Usar demasiados enlaces convertirá el texto en ruido. Esto funciona en dos dimensiones: enlazar excesivamente hace el texto difícil de leer y además devalúa el valor de los otros enlaces. Enlace con moderación. Enlaza sólo las cosas lo suficiente importantes para merecer un enlace. Un ejemplo de lo que nunca hay que hacer sería algo como esto:
No alternes radicalmente el comportamiento de los enlaces. Los enlaces son la piedra angular de la web. Los usuarios se han formado durante años unas expectativas basadas en el existente comportamiento de sus navegadores. Cuando cambias la forma en que los enlaces funcionan, estás redefiniendo una parte fundamental de la web. ¿Es eso lo que realmente quieres? ¿Es eso lo que realmente tus lectores quieren?.
Veamos un ejemplo de un “gadget” que altera radicalmente el comportamiento de los enlaces:
No titules tu enlace como “Click aquí”. No uses las palabras “Click” o “aquí” en ninguna parte del texto del enlace. Describe lo que el enlace hace cuando el usuario hace click en él. Un ejemplo de un “Click aquí” innecesario:
No enlaces cosas que el usuario puede querer seleccionar y copiar. Pobre usuario el que tenga que seleccionar y copiar texto enlazado. Esto requiere de un complejo conjunto de movimientos precisos del ratón para funcionar correctamente. Aquí estoy intentando seleccionar el nombre “Ralph Waldo Emerson” que forma parte del enlace:
Por suerte no es un escenario muy habitual. Pero cuando pasa no es nada agradable y requiere algo de consideración.
No incluyas iconos en cada enlace. Si debemos usar los enlaces con moderación, debemos usar los iconos con extrema moderación. Si todos los enlaces tienen un icono, es ruido. Sólo los enlaces muy poco habituales deben incluir iconos. Pienso que un texto bien escrito puede comunicar fácilmente qué tipo de enlace es, tanto o más que un icono, pero esto entra en el reino de las preferencias de cada uno.
No hagas el contenido dependiente de los enlaces para funcionar. No todo el mundo va a pulsar en tus enlaces. Pueden estar muy ocupados para hacer click en cada uno de los enlaces que pongas delante suya, o quizá están leyendo el artículo en otro formato en el cual no pueden hacerlo: imprimido, offline, en un móvil. De todas formas es importante ofrecer el contexto necesario para hacer el contenido entendible sin la necesidad de visitar todo lo que está detrás de los enlaces.
No ocultes tus enlaces. Los enlaces deben parecer enlaces. Dales un estilo distintivo que no pueda ser confundido con ningún otro elemento o texto de la página. Usa un color único no usado en ninguna otra parte de la página y considera usar la bien gastada convención de un enlace subrayado. En el siguiente ejemplo ¿qué es un enlace y qué no lo es?:
No mezcles anuncios y enlaces. Aparentan ser enlaces pero son anuncios. ¿Cual es el anuncio y cual es el enlace? De nuevo: ¿qué es un enlace y qué no lo es? Y… ¿qué va a pensar acerca de esto el usuario?…
No ofusques tus URLs. Los usuarios pueden querer ver previamente dónde van a ser enviados con tu enlace poniendo el enlace encima del mismo y viendo la URL en la barra de estado. Evita utilizar redirecciones y servicios acortadores de URLs que hacen la URL totalmente opaca. Los usuarios no deberían tener que lanzarse al vacío y tener fe de que irán donde creen cuando hacen click en tus enlaces.
Buenas prácticas en el diseño web
1. Información básica
En la portada de cada sitio se deben incluir claramente los elementos que a continuación se presentan, ya que éstos otorgan información importante para el usuario acerca del sitio web.
* Mapa del sitio
Especialmente si la estructura de navegación es compleja, ya sea por un gran número de secciones, niveles y subniveles temáticos, siempre será de utilidad tener un panorama completo a través del Mapa del Sitio. Mayor utilidad tendrá si cuenta con enlaces directos a cada una de las páginas.
* Datos de contacto de la unidad
Es fundamental publicar en la portada de los sitios de las unidades el teléfono y dirección de mail a través de los cuales el usuario pueda contactarse en caso de dudas referentes al contenido del sitio (es diferente al webmaster).
* Fecha de actualización
Incluir también la fecha de la última actualización del sitio en la portada. Es un elemento que puede otorgar mayor información al usuario acerca de la existencia de nuevos contenidos.
* Requerimientos técnicos
Aunque un sitio se debe construir para ser correctamente visualizado, lo más independiente posible, de las características técnicas del computador del usuario, en determinadas ocasiones es necesario explicitar en la portada si se necesita contar con algún requerimiento técnico especial (ej: para instalar alguna aplicación ).
* Encargado del sitio
Incluir en la portada datos de contacto del encargado del sitio (webmaster), nombre, correo o alias de correo, con quien el usuario pueda comunicarse en caso de tener consultas o sugerencias referentes al aspecto técnico del sitio.
2. Uso de marcos o frames
Actualmente no se recomienda el uso de marcos o frames dado que presentan muchos inconvenientes, especialmente para la indexación de las páginas en buscadores. Por otra parte, se pueden utilizar otros recursos técnicos que nos permiten obtener un resultado similar sin recurrir a los marcos o frames.
3. Peso de las páginas
La velocidad de acceso a un sitio depende en gran medida del peso en kilobytes de cada página y de la conexión con que se cuente. Para el caso de conexiones por módem cada página no debiera pesar más de 50 Kb, en tanto que para conexiones más rápidas, 100 Kb es razonable.
Para conocer el peso total de una página se debe sumar el peso del archivo HTML y el peso de cada uno de los elementos que estén presentes en la página: imágenes, videos, sonidos, animaciones, etc.
4. Ancho de las páginas
Las páginas se pueden construir con un ancho fijo o con un ancho variable, según se estime conveniente.
* Páginas de ancho fijo: el contenido de la página se mantiene estático, es independiente del tamaño de la ventana del navegador con que se visualice. Es el caso de la actual versión del Web UC, cuyas páginas tienen un ancho fijo, para una resolución mínima de pantalla de 1024x768 pixeles.
* Páginas de ancho variable: el contenido de la página es adaptable a las modificaciones que el usuario realice en el tamaño de la ventana del navegador.
5. Elementos gráficos y multimediales
Recomendaciones tendientes a asegurar la correcta inclusión de elementos gráficos y multimediales de modo de evitar que su peso afecte el rendimiento de la página:
* Peso de las imágenes
Se recomienda reducir al máximo posible el peso de las imágenes para no aumentar el tiempo de descarga de la página. Para ello se puede intervenir sobre 3 aspectos de la imagen: tamaño, cantidad de colores y resolución (72 dpi es suficiente para imágenes en web).
* Formato adecuado
Los dos formatos más usados para manejar las imágenes en web son:
* Formato GIF: recomendado para imágenes con pocos colores (soporta sólo hasta 256 colores) o de colores planos (Ej: diagramas, íconos, viñetas, fotos pequeñas o en blanco y negro etc.).
* Formato JPG: recomendado para imágenes de mayor tamaño y con mucho color (Ej: ilustraciones, fotografías a todo color, etc). Se recomienda probar ambos formatos para determinar el óptimo.
* Animaciones Flash
Se recomienda no incorporar grandes animaciones Flash directamente en la portada. Su uso demora la carga del sitio y lo hace agotador para quien tiene que ingresar repetidamente a éste.
Una buena práctica es incluir un enlace que permita saltar la presentación para entrar directamente al sitio, de modo que la presentación sea opcional.
* Plug-ins
Cuando se utilizan recursos multimediales que requieren el uso de “plug-ins” (programas visualizadores especiales) para revisarlos, se recomienda incluir el programa para ser descargado u ofrecer un enlace a los sitios donde obtenerlo.
* Archivos descargables
Cuando se incluyen recursos para ser descargados al computador personal del usuario (archivos de Video, Audio, Flash, PDFs, docs, ppts u otros), se recomienda indicar el peso de los mismos, con el objetivo de preparar al usuario a una probable espera en el proceso.
* Imágenes de fondo
Esta práctica no es aconsejable ya que aumenta el peso de la página y por ende, el tiempo de descarga. Además, frecuentemente dificulta la legibilidad de los textos.
6. Programación html
* Estructura de archivos
Es conveniente mantener un orden de carpetas para almacenar los diferentes tipos de archivos que conforman el sitio. La página de inicio debiera llamarse: index.html, e ir acompañada de las distintas carpetas, por ejemplo:
o html, para las páginas
o img para las imágenes
o swf, para las animaciones flash
* Nombre de archivos
Es conveniente que los nombres de archivos tengan no más de 8 caracteres, en minúsculas, sin espacios ni signos. Aunque actualmente los sistemas operativos de los computadores de escritorio, permiten crear archivos con nombres más largos, con mayúsculas, etc. el sitio web finalmente será alojado en servidores con otros sistemas operativos más estrictos al respecto.
* Uso de meta tags adecuados
Los “meta tags” son un conjunto de elementos que van en la parte superior (head) del código fuente de cada página. Mediante ellos se describe información concreta sobre la página a los sistemas de indexación y búsqueda. Los más importantes son los siguientes:
* Utilización de CSS
Las hojas de estilo en cascada permiten manejar en forma separada el aspecto formal (el diseño de las páginas), de el contenido. De esta manera se facilita la mantención de un sitio, ya que modificando sólo un archivo de texto se puede controlar el diseño de todas las páginas de un sitio.
La forma más eficiente para usar CSS es vincular el archivo de texto (.css), en el encabezado del código fuente de cada página, de la siguiente manera:
En ese archivo se especifican las características de los elementos de todas las páginas, por ejemplo: la fuente, su color y tamaño, para el texto, para los títulos, subtítulos, párrafos; el espacio entre líneas, entre letras, las indentaciones; las características de las tablas: bordes, colores de fondo, imágenes, etc.
* Multiplataforma
Dado que los sitios web pueden ser accedidos desde computadores que utilizan diferentes sistemas operativos, se debe asegurar que en la mayor parte de ellos, las páginas puedan verse sin mayores contratiempos.
Para asegurar esto, las recomendaciones son las siguientes:
* Utilizar código HTML estándar, evitar que el código sea optimizado para un navegador en especial.
* Probar el sitio en diferentes sistemas operativos y navegadores (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Mozilla, Netscape Communicator, Opera y Safari.
Fuente: http://www.puc.cl/manualdeestilo/html/practicas.html
En la portada de cada sitio se deben incluir claramente los elementos que a continuación se presentan, ya que éstos otorgan información importante para el usuario acerca del sitio web.
* Mapa del sitio
Especialmente si la estructura de navegación es compleja, ya sea por un gran número de secciones, niveles y subniveles temáticos, siempre será de utilidad tener un panorama completo a través del Mapa del Sitio. Mayor utilidad tendrá si cuenta con enlaces directos a cada una de las páginas.
* Datos de contacto de la unidad
Es fundamental publicar en la portada de los sitios de las unidades el teléfono y dirección de mail a través de los cuales el usuario pueda contactarse en caso de dudas referentes al contenido del sitio (es diferente al webmaster).
* Fecha de actualización
Incluir también la fecha de la última actualización del sitio en la portada. Es un elemento que puede otorgar mayor información al usuario acerca de la existencia de nuevos contenidos.
* Requerimientos técnicos
Aunque un sitio se debe construir para ser correctamente visualizado, lo más independiente posible, de las características técnicas del computador del usuario, en determinadas ocasiones es necesario explicitar en la portada si se necesita contar con algún requerimiento técnico especial (ej: para instalar alguna aplicación ).
* Encargado del sitio
Incluir en la portada datos de contacto del encargado del sitio (webmaster), nombre, correo o alias de correo, con quien el usuario pueda comunicarse en caso de tener consultas o sugerencias referentes al aspecto técnico del sitio.
2. Uso de marcos o frames
Actualmente no se recomienda el uso de marcos o frames dado que presentan muchos inconvenientes, especialmente para la indexación de las páginas en buscadores. Por otra parte, se pueden utilizar otros recursos técnicos que nos permiten obtener un resultado similar sin recurrir a los marcos o frames.
3. Peso de las páginas
La velocidad de acceso a un sitio depende en gran medida del peso en kilobytes de cada página y de la conexión con que se cuente. Para el caso de conexiones por módem cada página no debiera pesar más de 50 Kb, en tanto que para conexiones más rápidas, 100 Kb es razonable.
Para conocer el peso total de una página se debe sumar el peso del archivo HTML y el peso de cada uno de los elementos que estén presentes en la página: imágenes, videos, sonidos, animaciones, etc.
4. Ancho de las páginas
Las páginas se pueden construir con un ancho fijo o con un ancho variable, según se estime conveniente.
* Páginas de ancho fijo: el contenido de la página se mantiene estático, es independiente del tamaño de la ventana del navegador con que se visualice. Es el caso de la actual versión del Web UC, cuyas páginas tienen un ancho fijo, para una resolución mínima de pantalla de 1024x768 pixeles.
* Páginas de ancho variable: el contenido de la página es adaptable a las modificaciones que el usuario realice en el tamaño de la ventana del navegador.
5. Elementos gráficos y multimediales
Recomendaciones tendientes a asegurar la correcta inclusión de elementos gráficos y multimediales de modo de evitar que su peso afecte el rendimiento de la página:
* Peso de las imágenes
Se recomienda reducir al máximo posible el peso de las imágenes para no aumentar el tiempo de descarga de la página. Para ello se puede intervenir sobre 3 aspectos de la imagen: tamaño, cantidad de colores y resolución (72 dpi es suficiente para imágenes en web).
* Formato adecuado
Los dos formatos más usados para manejar las imágenes en web son:
* Formato GIF: recomendado para imágenes con pocos colores (soporta sólo hasta 256 colores) o de colores planos (Ej: diagramas, íconos, viñetas, fotos pequeñas o en blanco y negro etc.).
* Formato JPG: recomendado para imágenes de mayor tamaño y con mucho color (Ej: ilustraciones, fotografías a todo color, etc). Se recomienda probar ambos formatos para determinar el óptimo.
* Animaciones Flash
Se recomienda no incorporar grandes animaciones Flash directamente en la portada. Su uso demora la carga del sitio y lo hace agotador para quien tiene que ingresar repetidamente a éste.
Una buena práctica es incluir un enlace que permita saltar la presentación para entrar directamente al sitio, de modo que la presentación sea opcional.
* Plug-ins
Cuando se utilizan recursos multimediales que requieren el uso de “plug-ins” (programas visualizadores especiales) para revisarlos, se recomienda incluir el programa para ser descargado u ofrecer un enlace a los sitios donde obtenerlo.
* Archivos descargables
Cuando se incluyen recursos para ser descargados al computador personal del usuario (archivos de Video, Audio, Flash, PDFs, docs, ppts u otros), se recomienda indicar el peso de los mismos, con el objetivo de preparar al usuario a una probable espera en el proceso.
* Imágenes de fondo
Esta práctica no es aconsejable ya que aumenta el peso de la página y por ende, el tiempo de descarga. Además, frecuentemente dificulta la legibilidad de los textos.
6. Programación html
* Estructura de archivos
Es conveniente mantener un orden de carpetas para almacenar los diferentes tipos de archivos que conforman el sitio. La página de inicio debiera llamarse: index.html, e ir acompañada de las distintas carpetas, por ejemplo:
o html, para las páginas
o img para las imágenes
o swf, para las animaciones flash
* Nombre de archivos
Es conveniente que los nombres de archivos tengan no más de 8 caracteres, en minúsculas, sin espacios ni signos. Aunque actualmente los sistemas operativos de los computadores de escritorio, permiten crear archivos con nombres más largos, con mayúsculas, etc. el sitio web finalmente será alojado en servidores con otros sistemas operativos más estrictos al respecto.
* Uso de meta tags adecuados
Los “meta tags” son un conjunto de elementos que van en la parte superior (head) del código fuente de cada página. Mediante ellos se describe información concreta sobre la página a los sistemas de indexación y búsqueda. Los más importantes son los siguientes:
* Utilización de CSS
Las hojas de estilo en cascada permiten manejar en forma separada el aspecto formal (el diseño de las páginas), de el contenido. De esta manera se facilita la mantención de un sitio, ya que modificando sólo un archivo de texto se puede controlar el diseño de todas las páginas de un sitio.
La forma más eficiente para usar CSS es vincular el archivo de texto (.css), en el encabezado del código fuente de cada página, de la siguiente manera:
En ese archivo se especifican las características de los elementos de todas las páginas, por ejemplo: la fuente, su color y tamaño, para el texto, para los títulos, subtítulos, párrafos; el espacio entre líneas, entre letras, las indentaciones; las características de las tablas: bordes, colores de fondo, imágenes, etc.
* Multiplataforma
Dado que los sitios web pueden ser accedidos desde computadores que utilizan diferentes sistemas operativos, se debe asegurar que en la mayor parte de ellos, las páginas puedan verse sin mayores contratiempos.
Para asegurar esto, las recomendaciones son las siguientes:
* Utilizar código HTML estándar, evitar que el código sea optimizado para un navegador en especial.
* Probar el sitio en diferentes sistemas operativos y navegadores (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Mozilla, Netscape Communicator, Opera y Safari.
Fuente: http://www.puc.cl/manualdeestilo/html/practicas.html
Monday, November 12, 2007
Haciendo un Brief de Diseño (Design Brief)
Un Brief de Diseño es un documento que integra una explicación por escrito acerca de lo que un cliente quiere de un diseñador para un trabajo en específico. Es una de las partes medulares de la mayoría de los diseños exitosos ya que permite al diseñador saber que hacer y que no hacer antes de empezar a trabajar en lo más mínimo.
Este documento puede ser elaborado por el cliente o por el diseñador en conjunto con el cliente. Salvo las agencias de publicidad o similares que están acostumbradas a tratar con diseñadores, son raros los clientes que llegan con un brief listo a pedir un trabajo.
Yo no era mucho de hacer este documento de una manera metódica, generalmente siempre me ha bastado con una charla acerca de lo que se busca con el diseño, pero debido a una experiencia no tan agradable con un cliente hace un mes, me volví un poco más metódico. Al principio cuesta acostumbrarse pero vale la pena. Y creanme, les ahorrará mucho más tiempo del que creen.
Navegando por la web me encontré con este articulo de Clear Design UK que explica con más detalle los puntos básicos de un Brief, los que podemos resumir en:
- Perfil de la Empresa. Haciendo preguntas como... ¿A que se dedica? ¿Cuánto tiempo lleva en el mercado? y otras acerca de como esta posicionada en el mercado. El cliente no debe dar por hecho que el diseñador sabe este tipo de detalles por más obvios que parezcan.
- El Objetivo del Trabajo. Así de sencillo. ¿Que desea lograr con el anuncio/folleto/logotipo? Si el cliente no tiene claro esto, es mejor darse cuenta antes para rectificar y no a medio proceso.
- El Target de la Empresa. Es decir, el público a quien va dirigido el material a diseñar. Sexo, ubicación geográfica, edad, idiosincracia, ingresos, ocupación, etc.
- Presupuesto y Tiempo. Estos se explican solos.
- Ejemplos de otros materiales. Muchas veces los clientes tienen una idea muy clara de lo que quieren. Generalmente en estos casos, es porque han visto que tal o cual empresa que se dedica a lo mismo que ellos tiene tal o cual material. Por supuesto, el diseñador no debe copiar el trabajo de otro, pero algunas veces es bueno saber lo que el cliente tiene en la cabeza.
Menciono de nuevo que estos puntos conforman la base de un buen brief, más no nos limitan para agregar más. Podemos ser más específicos en algunos apartados, incluir especificaciones técnicas por ejemplo los valores PANTONE de una marca o medidas de una futura publicación.
Una vez con el brief listo y revisado, entonces le será más fácil y rápido al diseñador lograr resultados efectivos.
Fuente: http://planetoideblanco.blogspot.com/2007/08/haciendo-un-brief-de-diseo-design-brief.html
Sunday, November 11, 2007
Cómo planear (rápidamente) un sitio web
Es muy importante planear un sitio web, ya sea para crearlo o rediseñarlo. En este artículo te damos algunas pautas que pueden serte útiles aún si has creado muchos sitios con anterioridad.
Fuente: http://www.areaestrategica.com/desarrollo_web_programacion/como_planear_rapicamente_un_si.php
Con las herramientas que existen en la actualidad, como nuestro sistema Area Construye, o programas como Movable Type, Wordpress, Drupal, Joomla y otros administradores de contenido es cada vez más fácil crear un sitio web rápidamente.
Sin embargo es muy importante dedicarle tiempo a la planeación de un sitio web, para que se garantice un lanzamiento exitoso, se facilite el mantenimiento y se prolongue la vida útil del sitio.
La planeación no debe realizarse sólo al principio, sino que es fundamental en todas las etapas del desarrollo del sitio.
Será importante conocer los puntos principales de que consta un desarrollo. A continuación te presento una versión simplificada del sistema de implementación que utilizamos en Area para crear cualquier sitio y que te será útil a tí también.
1. Definir objetivos y alcances
2. Crear estructura
3. Crear contenido
4. Elaborar imagen gráfica e interfaz
5. Producir el sitio
Estos pasos son dependientes y siguen un flujo. Es decir, no podrás crear contenido si no sabes qué estructura tiene tu sitio y tampoco es buena idea crear una imagen gráfica si no sabes qué contenido habrá en el sitio.
1. Define los objetivos que tienes para crear el sitio y determina qué alcances tendrá.
Será necesario que respondas preguntas como las siguientes:
¿A quién me estoy dirigiendo? ¿Qué es lo que quiero lograr con este sitio web? ¿Qué es lo que deseo que los visitantes hagan al entrar a mi sitio web?
Responde con claridad y procura que las respuestas sean medibles y concretas.
2. Define la estructura del sitio
Basándote en el punto anterior, puedes bosquejar qué secciones tendrá tu sitio. No le des tanta importancia a tu misión, valores, y la información acerca de tí y de tu empresa. Procura crear secciones e información valiosa para tus visitantes.
Te será muy útil utilizar mapas mentales y diagramar libremente en papel.
3. Planea y asigna tiempo para la creación del contenido
El contenido, como hemos dicho desde hace mucho tiempo, es la parte más importante de un sitio web y es lo que estarán buscando tus visitantes.
La principal razón por la que se retrasa el lanzamiento de un sitioes la creación del contenido. Ten en cuenta que hay que recopilar texto, imágenes y otros elementos.
4. Diseño Visual
Una vez que tienes definidos los alcances que esperas de tu sitio, que conoces la estructura de sitio, y que tienes bosquejado el contenido, entonces es cuando puedes crear la apariencia visual, no antes.
Es común que se quiera empezar con la parte gráfica al principio y la planeación al final. Lo único que se logra con esto es llimitar el crecimiento de un sitio y hacerlo más difícil de actualizar. Un ejemplo de este error son la gran mayoría de los sitios que están hechos enteramente en Flash, pues casi con seguridad fueron planeados empezando por la parte gráfica.
5. Producción.
Evidentemente la parte más técnica. Si definiste los puntos anteriores en forma clara, la producción será mucho más adecuada, todo estará presupuestado y pronto estarás lanzando tu sitio.
Puedes utilizar los siguientes libros como referencia:
The elements of user experience
Don't make me think
Web ReDesign: Workflow that Works
Fuente: http://www.areaestrategica.com/desarrollo_web_programacion/como_planear_rapicamente_un_si.php
Prueba tu intuición de diseñador
Escenario hipotético: te despierta el teléfono a las 7 AM, lo cual te irrita demás porque anduviste de peda toda la noche anterior, celebrando la multitud de trofeos que te llevaste en un concurso internacional de diseño.
—"¿Hola?" contestas con voz aguardientosa.
—"Señor diseñador, discúlpe por despertarlo, hemos visto su éxito y queremos contratarlo para un proyecto muy importante" te dice alguien con un fuerte acento árabe.
—"¿De qué se trata?" preguntas.
—"Estamos por implementar la señalización del aeropuerto de Dubai, ya tenemos un boleto para usted que sale en dos horas. La paga será muy buena".
Maldiciendo tu recién logrado éxito, te arrastras fuera de la cama, empacas lo que puedes y le pides al taxista que se apresure para no perder el vuelo. Duermes poco, intrigado por el proyecto. Al llegar a Dubai, una persona te espera con tu nombre en un cartelón. En cuanto le dices que eres tú, te apresura a las oficinas del aeropuerto: no hay tiempo que perder.
Al llegar observas a cinco árabes discutiendo acaloradamente en su propio idioma, miran unos papeles sobre el escritorio. Parece ser un proyecto importante.
—"Señor diseñador, lo estábamos esperando!"
—"¿De qué se trata esto?" los divo-diseñadores como tú no tienen tiempo para andarse con nimiedades sociales, como saludar.
—"Señor diseñador, como sabrá Dubai ahora es un centro internacional de comercio, necesitamos un sistema de señalización que puedan enternder personas de prácticamente todas las culturas y naciones. Vimos que ganó muchos premios en un concurso internacional, por eso lo llamamos. Necesitamos que nos diga cual es el pictograma que mejor se comprenda, sin texto, para gente de todo el mundo".
Procede a escoger los pictogramas
Escoge con cuidado porque sólo tienes una oportunidad de hacerlo.1. Elige el pictograma más comprensible para "primeros auxilios"
2. Elige el pictograma más comprensible para "Elevador"
3. Elige el pictograma más comprensible para "Escaleras"
4. Elige el pictograma más comprensible para "Extintor"
5. Elige el pictograma más comprensible para "Teatro"
6. Elige el pictograma más comprensible para "Boletos"
Ver las Soluciones
Fuente: http://blog.duopixel.com/articulos/intuicion.html
Estructura de un Diseño <-> 1 de 2
Estructura
La estructura en el diseño hace referencia a la manera en que se encuentra distribuidas las formas o módulos dentro del mismo, es decir, nos ayudará a elegir la posición óptima de los objetos que conforman nuestro diseño para evitar la saturación o la mala distribución de la gravedad en los mismos, entre otros, va de la mano con el boceto.
Existen 3 principales clasificaciones de la estructura… Formal, semiformal e informal. Estas tres clasificaciones sirven para dividir u organizar nuestro diseño según los requerimientos que tengamos, por ejemplo:
Estructura Formal: La estructura formal esta caracterizada por la división específica (matemática) o justificada de cada forma, y podría utilizarse para trabajos que requieran proyectar seriedad y organización como en un despacho consultoría empresarial.
Un closip formal
Estructura Semiformal: Esta clasificación contiene ciertos módulos de la estructura que se encuentran divididos de manera formal pero contiene algunos otros que se encuentran colocados de manera aleatoria o sin un orden específico, podría aplicarse para la publicidad impresa de una agencia publicitaria, colocando una mitad organizada y otra mitad con elementos creativos que expresen su constante innovación o adaptación, sin una línea a seguir.
Un Closip organizado e innovador
Estructura Informal: Aquí, más bien no existe una justificación específica para la posición de las formas, generalmente utilizado por diseñadores amateur que no conocen un poco la técnica del diseño, cuando no se tiene un mensaje definido o bien, cuando se necesita proyecta cierta libertad o desorden.
Un Closip sin límites ni reglas
Ok, ya sabía eso… Pero ¿de qué me sirve tener un orden?
Como un edificio, un diseño debe contar con una estructura sólida que permita soportar el peso visual de cada uno de sus elementos y justificar su posición, conociendo cada parte de un lienzo se puede determinar la cantidad de espacio que otorgaremos a los distintos elementos, permitiendo dar un mayor énfasis mensaje principal y/o evitando la saturación.
Los profesionales del diseño se guían por la observación de los detalles que puedan ser significativos y los ordenan de manera tal, que logran hacer llegar un mensaje, por su puesto, en base a la correcta distribución de espacios e imágenes.
En conclusión
Estructurar tus diseños antes de comenzar un boceto, te permite dividir correctamente los espacios con el fin de establecer la base que soporte el mensaje se nuestra creación, enfatizando los mensajes y haciéndolos llegar con mayor efectividad.
Fuente: http://www.closip.com/blog/noticias/2007/03/30/estructura-de-un-diseno-1-de-2/
¿Por qué Bocetar?
El boceto (Definición de Bata) es una representación simple de aquello que estás por realizar y te permite anticiparte a complicaciones que puedan surgir al momento de finalizar tu trabajo o bien a darte cuenta de los errores de planteamiento que hayas podido tener. Además, te permite estudiar los puntos principales o los ejes de tus diseños y/o creaciones.
En este boceto realizado por Leonardo Da Vinci (izquierda) podemos observar 18 posibles posiciones distintas de un busto femenino, y fue realizado exclusivamente para una sola pintura, la cual es mundialmente conocida y no es la Gioconda (Mona Lisa).
Lo importante en este estudio del busto es la cantidad de proyecciones que tuvo Da Vinci de la posición que adoptaría la mujer de su pintura (Dama del Armiño - abajo)
La proyección previa permite elegir la posición, el color o la forma óptima y adaptar mensajes no verbales que pudiera expresar nuestro diseño o bien podríamos evitar una mala interpretación del mismo, además, nos da una imagen más clara de aquello que buscamos y nos aleja de caer en la improvisación por desesperación.
No existen reglas ni puntos necesarios que tengamos que adoptar o conocer al momento de realizar un boceto, lo importante es que tengamos en la mente aquello que queramos proyectar con lo que hacemos.
Es de vital importancia que lo que hagamos exprese algo y lo exprese de la manera correcta, un boceto te permite estudiar esta manera y nos da una guía definida de qué es lo que vamos hacer al momento de sentarnos frente al monitor.
Pues tenemos la mala costumbre de sentarnos e improvisar, muchas veces acabamos con algo que no queríamos, pero tenemos tan poco tiempo para realizar otro trabajo que nos vemos en la necesidad de entregar aquello que tenemos, aún cuando sabemos que no es lo mejor que podemos entregar.
Entre otras funciones, evita el esfuerzo innecesario de comenzar a plasmar una mala idea y si trabajas en equipo o para algún cliente o jefe, te permite comparar tus ideas con las de los demás, evitando el rechazo de tu trabajo terminado, que podría ser bueno para ti, pero malo para alguien más, al fin que para todo hay gustos y disgustos.
Para terminar, algunos tips:
- Antes de tomar el lápiz y sentarte frente a una hoja en blanco, piensa un poco en lo que quieres y concéntrate.
- Descubre tu propio estilo y trabájalo.
- Cuando debas realizar elementos como árboles o montañas, busca fotos y observa los puntos que hacen que se vean como tal.
- Sé perseverante, la práctica hace al maestro.
- Nunca entregues un trabajo recién terminado, guárdalo y míralo el día siguiente, siempre encontrarás algo que lo haga mejorar.
- Los humanos tenemos momentos de lucidez y momentos de idio.. digo deslucidez, no te frustres si no surgen las ideas, intenta de nuevo más tarde.
- Observa hasta el más mínimo detalle de cada elemento que exista a tu alrededor y preguntate a ti mismo ¿Qué lo hace parecer lo que es?.
- Analiza y busca referencias, aquél que no conoce la historia está condenado a repetirla una y otra vez.
- Sé sencillo y claro al momento de bocetar.
- Realiza 2 o 3 bocetos, no tomes la primera idea.
Fuente: http://www.closip.com/blog/?p=49
Subscribe to:
Posts (Atom)