Usabiidad & Joomla!
Upcoming SlideShare
Loading in...5
×
 

Usabiidad & Joomla!

on

  • 1,499 views

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

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

Joomla! Night
05 de agosto
Costa Rica

Statistics

Views

Total Views
1,499
Views on SlideShare
1,476
Embed Views
23

Actions

Likes
0
Downloads
10
Comments
1

3 Embeds 23

http://metrapach.com 18
http://metrapach.blogspot.com 4
http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Carlos Murillo Hernández | @zoncho | http://delicious.com/telemaco/usabilidad
    2010

    Joomla! Night
    05 de agosto
    Costa Rica
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Findability ("recuperabilidad", "encontrabilidad"...) es la posibilidad de que determinada información sea encontrada, localizada, o recuperada. O lo que es lo mismo, la "accesibilidad" de un sitio o de un nodo web (no confundir con la Accesibilidad de los contenidos). En la "findability" intervienen el posicionamiento en motores e índices de búsqueda, la predisponibilidad de nuestro sitio a ser recuperado por motores de búsqueda (search engine optimization), la promoción que hayamos realizado (por correo electrónico, concursos, banners...), etc... Pero la "findability" también abarca los medios de que disponga nuestro sitio web para encontrar información dentro de este, es decir, buscadores locales, correcta arquitectura de la información, etc... La Usabilidad de un sitio web está estrechamente relacionada con la "findability", ya que cuanto más sencillo resulte para el usuario navegar por un sitio web, mayores posibilidades tendrá de encontrar lo que busca. Otro concepto íntimamente relacionado con la Usabilidad es el de la Accesibilidad, cuyo objetivo es conseguir que el diseño del sitio permita que personas discapacitadas también puedan acceder a sus contenidos. Así mismo, otro requisito para que una web sea accesible es que cualquier persona pueda acceder a sus contenidos independientemente del dispositivo que use (hardware o software).
  • ,

Usabiidad & Joomla! Usabiidad & Joomla! Presentation Transcript

  • 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