1. Usabilidad & Joomla Carlos Murillo Hernndez| @zoncho| http://delicious.com/telemaco/usabilidad 2010

2. Usabilidad (menos frustracin y ms satisfaccin)

• Queremos ser pr cticos o emocionales?

3. El proceso (Usabilidad Web) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 4. Para tomar en cuenta (No me haga pensar!) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

No leemos pginas, las escaneamos.

No tomamos decisiones ptimas, buscamos satisfacer necesidades prgmaticamente.

No averiguamos como funcionan las cosas, aprendemos haciendo.

No importa cuantos clicks haga un usuario para acercarse al contenido, lo importante es que esos clicks sean indoloros.

Lugares comunes: si funciona tome provecho de ello.

Cree reas definidas relacionadas al contenido, esto ayuda a que el usuario pueda tomar deciciones rpidas.

Si es cliqueable debe ser obvio.

Reduzca el ruido. Si todo trata de resaltar, nada lo har.

5. El men, Agrupe elementos (Ejemplo: Top Menu) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Agrupar todas aquellas opciones de men que todo sitio necesita pero que no pertenecen al contenido principal.

Encontramos por default: About Joomla, Features, News

Su ubicacin en el encabezado es recomendable pero no por encima del menu principal.

6. Accin?! (A la derecha) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Agrupe links relacionados al desarrollo de una accin en la parte superior derecha del sitio. Cree un mdulo.

Botones de registro, compra, contacto

No restringir las areas de click ni la legibilidad de estos elementos

7. Accin?! (A la derecha) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 8. La bsqueda (Arriba a la derecha) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Gran cantidad de usuarios optan por la bsqueda como su primera opcin

Es arriba a la derecha donde el usuario espera encontrar la bsqueda

El campos de bsqueda debe de ser de al menos 27 caracteres.

Input + buscar

9. La bsqueda (Arriba a la derecha) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 10. Presntese (No pierda la oportunidad) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Qu tanto te conocen tus visitantes?!

Comunica tu mensaje/objetivo global.

Ubique este mdulo en la parte superior del sitio.

No es recomendable ubicarlo sobre el contenido principal.

11. Squele provecho al footer (Evite simplemente repetir otro menu) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

El footer es importante para ubicar aquellos enlaces que necesitan presencia en nuestro sitio pero no deben se ubicados en sobre los enlaces principales

Incluya. Informacin sobre derechos de autor, trminos y condiciones, informacin de contacto ampliada...

12. Squele provecho al footer (Evite simplemente repetir otro menu) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 13. Logo legible (No es solo cosa de tamao) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Muchas plantillas restringen el espacio del logo a espacios muy pequeos.

Ubique el logo en la parte superior izquierda

No lo cambie de posicin a travs de las diferentes secciones del sitio.

Enlcelo a la pgina de inicio.

14. No disfrace su contenido (Evite presentarlo como publicidad) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Banner Blindness, Benway and Lane dice: Es la ley!

A pesar de poseer opcin de usar banners, no es recomendable usarlos para transformar nuestro contenido disfrazndolo de publicidad.

Los banners son ignorados por los visitantes.

No porque sea brilliante y se mueva va a ser sujeto del esperado click

Las personas siguen a sus intereses, sus necesidades, sus costumbres. Son impulsados por la curiosidad, el aburrimiento y la emocin. (Donald Norman, Nielsen Norman Group)

15. No disfrace su contenido (Evite presentarlo como publicidad) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 16. Click? (Debe ser obvio) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

A simple vista, no debe existir duda sobre si algo es un enlace o no.

Use el color como diferenciador

Evite subrayar textos que no sean enlaces.

Azules?

17. Click? (Debe ser obvio) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 18. Texto legible (Cree una buena experiencia de usuario) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

La legibilidad indica que tan claro es el texto presente en nuestro sitio.

Involucra contraste, tamao, sans-serif, colores, extensin de los textos...

Fondo negro y texto blanco o fondo blanco y texto negro?

19. Texto legible (Cree una buena experiencia de usuario) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 20. No usarlo todo (Solo por que esta disponible no es razn suficiente) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico

Adaptar la plantilla al contenido en lugar del contenido a la plantilla.

Uso de extensiones solo por que son fciles de instalar

Menos es ms.

Sea constante.

21. Nooooooooo ! (usabilidad) Fundacin Tecnolgica de Costa Rica // Programa de Diseo grfico 22. Gracias Carlos Murillo Hernndez| @zoncho| http://delicious.com/telemaco/usabilidad 2010