Usabiidad & Joomla!
-
Upload
patricia-alfaro -
Category
Technology
-
view
1.009 -
download
0
description
Transcript of Usabiidad & Joomla!
- 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