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