Micaela 29 de agosto de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

Guía de usabilidad para principantes en 8 pasos


usabilidadA la hora de pensar en usabilidad, lo primero que siempre debes tener en cuenta es comentar tus códigos, ya que esto te permitirá mantener un registro organizado de tu flujo de trabajo.

Datos como √©ste pueden resultar obvios, pero¬† te sorprender√° saber que muchos dise√Īadores los dejan de lado. Es por eso que hoy te traemos 8 simples pasos para lograr una web pr√°ctica y con mucha usabilidad.

1. Comenta tus códigos

01_commenting

Algunos métodos para comentar:

  • En HTML/XML/XHTML debes usar: <!- Tu comentario aqu√≠ ->
  • En CSS : /* Tu comentario aqu√≠ */
  • En JavaScript y PHP, a simple linea: // Tu comentario aqu√≠ .
  • En JavaScript y PHP, a m√ļltiples lineas: /* Tu comentario aqu√≠ */

2. Titula apropiadamente tus p√°ginas

02_title

A veces los dise√Īadores al crear una p√°gina se olvidan de titularla correctamente o simplemente la dejan en blanco. El t√≠tulo de una p√°gina va entre las etiquetas <title></title> y se muestra en el tope del navegador. Intenta que sea un t√≠tulo simple, limpio y entendible. No utilices demasiadas etiquetas, simplemente describe las palabras claves de tu web. Y bajo ninguna circunstancia dejes de t√≠tulo http:/tusitio.com porque esto demostrar√≠a que tienes muy poca inventiva.

3. Cambia la apariencia de los links al pasar el mouse por arriba

03_link

Cambiar el color o el fondo de tus links es una obligación para la usabilidad y la experiencia visual del usuario. Si estás utilizando imágenes usa JavaScript y CSS sprites para cambiar la imagen on Mouseover. Si las imágenes son pesadas para realizar sprites CSS o rollover utiliza jQuery tooltip para hacer un sitio amigable con el usuario.

4. Enlaza tus titulares y logos

03_link_logo

A pesar de que esto suene tonto, existen muchos sitios que no lo hacen. Enlazar los titulares y logos le brindan al lector una forma rápida y fácil de volver a la página de inicio. Si tu logo o imagen se encuentra dentro de una etiqueta de imagen simplemente envuélvela con una etiqueta link, es pan comido.

5. Sigue el dise√Īo est√°ndar

04_layout

Seguir el dise√Īo est√°ndar se refiere a mostrarles a los visitantes un estilo con el que est√©n familiarizados. Si est√°s dise√Īando para un diario, una revista, o haciendo un portfolio se deben seguir ciertos patrones. La idea es que el dise√Īo de tu sitio impacte en los visitantes.

6. Evita utilizar Ajax

Si puedes, evita utilizar Ajax ya que no es amigable con los motores de b√ļsqueda. El contenido Ajax carga din√°micamente y como resultado los buscadores no lo pueden indexar.

7. Utiliza sabiamente el color

07_color

El color es un factor muy importante a la hora de dise√Īar. Es aconsejable seleccionar colores que atraigan a los visitantes y combinen con el contenido de tu sitio. No mezcles demasiados colores. Los diferentes colores poseen distintos significados, y el color de tu sitio deber√≠a reflejar el producto o la persona que est√°s presentando o vendiendo.

8. Check List

Por √ļltimo, algunas peque√Īas cositas que deber√≠as implementar al crear un sitio web:

En conclusi√≥n, puedes que algunos de estos consejos no sean ninguna novedad para los dise√Īadores avanzados pero pueden resultarle muy √ļtiles a los principianes. Si tienen algo que a√Īadir, no duden en comentarlo.

Haz clic aqu√≠ para visitar m√°s tips sobre usabilidad ¬Ľ

Fuente: Desizn Tech


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. pepe dice:

    No es bueno el artículo.

    Si est√° hablando de usabilidad, ¬Ņpor qu√© empieza con una recomendaci√≥n de desarrollo de software?

    Obviamente que tener una metodolog√≠a ordenada hace un mejor software, pero eso no est√° directamente relacionado con usabilidad. Es como decir que una buena PMO mejora la usabilidad porque los proyectos salen m√°s ordenados… cualquier cosa.

    Lo mismo que la recomendaci√≥n “no uses AJAX”. ¬ŅEst√° seguro que est√°s hablando de usabilidad? Porque eso es una -mala, simplista- recomendaci√≥n sobre SEO.

    Una recomendación constructiva, métanle más trabajo a los artículos antes de publicarlos porque pueden dar una pobre imagen de la página, que por otro lado es muy buena.

  2. lucasan dice:

    En el punto 6 no estoy de acuerdo, creo que es mejor decir “Use Ajax de manera no intrusiva y donde realmente beneficie a la usabilidad”.

    Porque “evite usar Ajax” es una mala premisa, cuando un buen uso de Ajax puede ayudar notablemente a la usabilidad de un sitio web.

    Un ejemplo, para enviar un comentario, no tiene nada de malo usar Ajax, por el contrario mejora la experiencia del usuario.

    Otro, cuando me encuentro con las estrellas para calificar un video o un tema, como usuario, lo mínimo que espero es que la página no se recargue al dar mi puntuación.

    El uso o no uso de Ajax en un sitio debe ser evaluado, pero no es correcto volverse “Ajaxmani√°tico” ni satanizar dicha tecnolog√≠a.

    Un saludo desde Colombia.

  3. Olga dice:

    Hola,
    creo que est√°s confundiendo el concepto de usabilidad con otras cosas. La definici√≥n oficial de usabilidad es, seg√ļn la ISO 9241, la caracter√≠stica de un producto que mide la eficacia, eficiencia y satisfacci√≥n de usuario en el uso que le da un grupo determinado de usuarios con unos objetivos determinados en un contexto determinado.
    A partir de esta definición, voy a ir comentando cada punto de tu artículo:
    1. Si los usuarios principales a los que te diriges son desarrolladores web con el objetivo de mostrar lo bonito que es el código de tu página, aplica la recomendación. Pero en el 99,999999999999999% de los casos, las personas que te visitan son personas interesadas en el contenido de la página, el código que has utilizado les da exactamente igual. Como si has metido un h3 dentro de un h1. Mientras ellos accedan al contenido, la usabilidad no se resiente en absoluto.
    2. Eso de que ‘bajo ning√ļn concepto dejes el dominio del sitio’ es bastante cuestionable. En las pruebas de usuario que hacemos se demuestra que los usuarios apenas miran el t√≠tulo de la p√°gina, y los que lo miran, agradecen que les indiques d√≥nde se encuentran, siendo lo que mejores ratios de eficacia obtiene el nombre del dominio y el nombre de la p√°gina en la que se encuentran.
    3. Matar moscas a ca√Īonazos no siempre es la mejor opci√≥n: utilizar el a:hover del XHTML y CSS da resultados √≥ptimos tanto para im√°genes como para colores. No te olvides tambi√©n de colorear los enlaces visitados con un a:visited
    4. ¬ŅEnlazar el titular de la p√°gina? ¬ŅPara ir a la misma p√°gina en la que nos encontramos? ¬ŅPor qu√© generar confusi√≥n gratuita en el usuario?
    5. No es coherente el t√≠tulo de seguir dise√Īos est√°ndares con la idea de que el sitio impacte en el usuario. En cualquier caso, volvemos a la definici√≥n. Dependiendo del objetivo de tu sitio y del objetivo de los usuarios. Si eres un dise√Īador web que quiere mostrar su portfolio, o un microsite publicitario, un dise√Īo est√°ndar causar√° la impresi√≥n de ser mon√≥tono y los usuarios preferir√°n otro sitio a quien encargar su web molona. Si lo que buscan es un blog, un site corporativo o una revista, el dise√Īo est√°ndar s√≠ es que es buena recomendaci√≥n. Pero… ¬ŅA qu√© llamamos dise√Īo est√°ndar? ¬ŅConoces 2 sitios exactamente iguales?
    6. Vale, antes dec√≠as que utilizaras javascript para cambiar las im√°genes ¬Ņy ahora dices que ajax es malo? Ajax en s√≠ mismo no es malo ni bueno, s√≥lo es una tecnolog√≠a, y se ha demostrado que bien usada recorta tiempos de espera y a√Īade funcionalidades que los usuarios agradecen y mucho. Y si no, que se lo digan a todos los que usan gmail. Lo mismo pasa con Flash: en s√≠ mismo no es malo, s√≥lo es una tecnolog√≠a. Depende del uso que se le d√© el estar bien usada o no.
    7. En temas de colores no me voy a meter porque reconozco que son mi punto débil, pero de la teoría que he leído en otros lados, me da que resumirlo en 4 líneas como has hecho es simplificarlo bastante.
    8. Lo del los checklist no est√° mal, pero ¬Ņd√≥nde est√° la arquitectura de informaci√≥n? ¬Ņy la planificaci√≥n? ¬Ņel estudio previo de tus usuarios? ¬Ņde tus capacidades? ¬Ņde tu financiaci√≥n? Hacer una p√°gina web no es s√≥lo poner un formulario de contacto. Es que t√ļ consigas tus objetivos, y de forma rec√≠proca, que los usuarios consigan los objetivos con los que vinieron a tu web. Eso es usabilidad.

  4. diegop dice:

    para “principiantes” esta bien.
    Menos el paso 1 q es solo para el dise√Īador y el del Ajax buscadores, si me parecen de usabilidad a mi.
    5.Sigue el dise√Īo est√°ndar (para los usuarios medios tontines, asi no se nos piantan jojo ūüėČ

    @Olgita : ¬ŅEnlazar el titular de la p√°gina? es para ir al home ūüėõ

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder