Usabiidad & Joomla!

Usabilidad & Joomla Carlos Murillo Hernández | @zoncho | http://delicious.com/telemaco/usabilidad 2010

Usabilidad (menos frustración y más satisfacción)
Queremos ser pr ácticos o emocionales?

El proceso (Usabilidad Web) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

Para tomar en cuenta (No me haga pensar!) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
No leemos páginas, las escaneamos.
No tomamos decisiones óptimas, buscamos satisfacer necesidades prágmaticamente.
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 rápidas.
Si es cliqueable debe ser obvio.
Reduzca el ruido. Si todo trata de resaltar, nada lo hará.

El menú, Agrupe elementos (Ejemplo: Top Menu) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
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 ubicación en el encabezado es recomendable pero no por encima del menu principal.

Acción?! (A la derecha) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
Agrupe links relacionados al desarrollo de una acción en la parte superior derecha del sitio. Cree un módulo.
Botones de registro, compra, contacto…
No restringir las areas de click ni la legibilidad de estos elementos

Acción?! (A la derecha) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

La búsqueda (Arriba a la derecha) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
Gran cantidad de usuarios optan por la búsqueda como su primera opción
Es arriba a la derecha donde el usuario espera encontrar la búsqueda
El campos de búsqueda debe de ser de al menos 27 caracteres.
Input + buscar

La búsqueda (Arriba a la derecha) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

Preséntese (No pierda la oportunidad) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
Qué tanto te conocen tus visitantes?!
Comunica tu mensaje/objetivo global.
Ubique este módulo en la parte superior del sitio.
No es recomendable ubicarlo sobre el contenido principal.

Sáquele provecho al footer (Evite simplemente repetir otro menu) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
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. Información sobre derechos de autor, términos y condiciones, información de contacto ampliada...

Sáquele provecho al footer (Evite simplemente repetir otro menu) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

Logo legible (No es solo cosa de tamaño) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
Muchas plantillas restringen el espacio del logo a espacios muy pequeños.
Ubique el logo en la parte superior izquierda
No lo cambie de posición a través de las diferentes secciones del sitio.
Enlácelo a la página de inicio.

No disfrace su contenido (Evite presentarlo como publicidad) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
Banner Blindness, Benway and Lane dice: Es la ley!
A pesar de poseer opción de usar banners, no es recomendable usarlos para transformar nuestro contenido disfrazándolo 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 emoción. (Donald Norman, Nielsen Norman Group)

No disfrace su contenido (Evite presentarlo como publicidad) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

Click? (Debe ser obvio) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
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?

Click? (Debe ser obvio) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

Texto legible (Cree una buena experiencia de usuario) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
La legibilidad indica que tan claro es el texto presente en nuestro sitio.
Involucra contraste, tamaño, sans-serif, colores, extensión de los textos...
Fondo negro y texto blanco o fondo blanco y texto negro?

Texto legible (Cree una buena experiencia de usuario) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico

No usarlo todo (Solo por que esta disponible no es razón suficiente) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico
Adaptar la plantilla al contenido en lugar del contenido a la plantilla.
Uso de extensiones solo por que son fáciles de instalar
Menos es más.
Sea constante.

Nooooooooo ! (usabilidad) Fundación Tecnológica de Costa Rica // Programa de Diseño gráfico <blink>

Gracias Carlos Murillo Hernández | @zoncho | http://delicious.com/telemaco/usabilidad 2010

Usabiidad & Joomla!

by Patricia Alfaro on Aug 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 14

Statistics

Usabiidad & Joomla! — Presentation Transcript

http://metrapach.com	13
http://metrapach.blogspot.com	1