viernes, febrero 29, 2008

Formularios Usables: 60 Directrices de Usabilidad

Formularios Usables: 60 Directrices de Usabilidad

He aquí la nueva referencia para diseño de formularios Web: Formularios Usables: 60 Directrices de Usabilidad.

Una excelente recopilación que ha hecho Olga Carreras en su blog y que mejor no podría estar. Recopila las recomendaciones y mejores prácticas de Luke Wroblewski, Jakob Nielsen, usability.org, Eduardo Manchón...

El Calendario de la Mala Usabilidad

Calendario 2008 de Bad Usability

Este Calendario, que año a año (desde el 2005) ha esta estado saliendo, ya tiene su versión en Español.

Es un calendario que nos da ejemplos de lo que es una mala usabilidad. Así que estás invitado a descargarlo, imprimirlo, colgarlo en un lugar visible y hasta tomarle una foto para publicarlo en el mapa mundial que han dispuesto para ello.

Gracias a Interacciones.

domingo, febrero 24, 2008

Propuesta de Rediseño del Home del Sena Virtual

Comunidad de Aprendizaje SENA

Un error común en Internet es crear sitios Web sin pensar en sus usuarios. Los contenidos y la forma de presentarlos se definen con base en las políticas internas de las empresas y algunas veces, por no decir que muchas, es el enfoque errado.

Un sitio Web debe crearse pensando en sus visitantes. Esto es el Diseño Centrado en el Usuario. No es tomar toda la información que la compañía tiene para publicar, sino la que los visitantes necesitan encontrar.

Ejemplos claros de esto se pueden ver en sitios que dan la bienvenida al usuario con imágenes o animaciones, cuando los internautas buscan generalmente es información y servicios. Vemos sitios corporativos con un Home lleno de secciones (encuestas, datos económicos, titulares de prensa, noticias…), cuando el visitante lo que quiere es conocer la empresa y sus servicios.

Hoy quiero plantear el rediseño de un sitio Web. Haremos un rápido análisis del Home actual del Sena Virtual, y elaboraremos una propuesta de rediseño pensando en los posibles visitantes que debe tener este sitio.

¿Sabemos de quién estamos hablando? El Servicio Nacional de Aprendizaje (SENA) es un establecimiento que presta el servicio de Formación Profesional Integral gratuita en toda Colombia, el cual, aprovechando las bondades de Internet, ha ampliado su oferta educativa mediante cursos virtuales, los cuales se ofrecen a través del sitio Sena Virtual.

Este sitio es uno de los merecidos ganadores del Premio Colombia en Línea 2007 como Mejor Sitio de Aprendizaje en Línea en el país y sin lugar a dudas, la labor del Sena es estupenda, toda vez que le lleva educación a toda Colombia gratuitamente.

Ahora, ¿quiénes visitan este sitio? La metodología de “Personas” nos invita a hacer una descripción detallada de los usuarios, pero sin llegar a este análisis, considero que principalmente hay dos tipos de visitantes: los estudiantes actuales y los estudiantes potenciales del Sena Virtual. Seguro hay más visitantes: docentes, empresas interesadas en cursos para sus empleados, entre muchos otros. Pero creo, que las “personas” más importantes y en los cuales deberíamos estar más interesados son los Estudiantes.

¿Qué hacen ellos en el sitio? La metodología de “Escenarios” propone definir tareas comunes de nuestros usuarios (las “personas”). Para este ejemplo las simplificaré en estas tareas:
  • Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
  • Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.
Seguramente hay más tareas que necesitan hacer estos usuarios, pero me atrevo a indicar que estas son las principales.

Ahora, basados en los usuarios y tareas que definimos (que supondremos como acertadas), nos debemos preguntar: ¿el home actual del Sena Virtual ayuda a estos usuarios en sus tareas?

Veamos cómo está diagramado:

Home Actual del Sena Virtual

  1. Encabezado: Su función es identificar el sitio. Aunque claramente está el logo del Sena y hay un slogan: “Comunidad de Aprendizaje” me parece que se puede mejorar. Primero porque cubre mucho espacio y segundo porque no cumple una buena práctica de-facto en cuanto a ubicación del logo. Actualmente está al lado derecho y debería estar al lado izquierdo.

    Así que nuestra propuesta sería reubicar el logo y colocarlo como Sena Virtual (para diferenciarlo del sitio del Sena). Adicionalmente podríamos redefinir el slogan como “La Comunidad Online de Aprendizaje del SENA”. ¿No les parece mejor? Y por último disminuiríamos el espacio que ocupa este encabezado.

  2. Presentación: Aquí simplemente hay unas palabras de bienvenida junto con una imagen decorativa. También presentan el Premio Colombia en Línea que ganaron. ¿Esta información sirve a nuestros estudiantes? Realmente no. Si soy un estudiante activo necesito es estudiar y si soy uno potencial quiero conocer los cursos que me ofrecen. Los expertos en usabilidad recuerdan que es mejor listar los servicios que invitar a conocerlos. Igualmente el logo del Premio no da un valor agregado a los estudiantes.

    Así que nuestro rediseño eliminaría las palabras de bienvenida, reubicaría la imagen del Premio fuera de esta sección y aquí podríamos presentar 1 o 2 cursos que queramos resaltar, ya sea porque sean nuevos y/o porque estén próximos a comenzar. ¿Tenemos muchos cursos? Simplemente colocamos aleatoriamente uno de ellos cada vez que ingrese un usuario y colocamos un vínculo a “Cursos que comienzan esta semana” o “Nuevos cursos”.

  3. Noticias: Esta sección me parece válida y aunque no ayuda directamente a cumplir las tareas de nuestros estudiantes, son de esas secciones que no pueden faltar.

    Así que en nuestro rediseño simplemente reduciría la cantidad de texto presentado por cada noticia y al final de ellas podríamos colocar un vínculo a “Anteriores noticias” para ofrecer un histórico.

  4. Menú de Servicios: El menú es básico en todo sitio Web, ¿pero el actual está bien concebido? Hay 4 secciones: Aprendices, Biblioteca Virtual, Correo Electrónico y Encuestas.

    La primera sección “Aprendices” presenta los ítems que necesitamos: “Nuestros Cursos Ofertados” e “Iniciar Sesión”. Pero también hay un “Ingreso a la Oficina Virtual” y un “Curso de Inducción”, el primero sirve a los estudiantes activos y el segundo a los potenciales.

    Este menú podríamos mejorarlo separando los ítems que son para los estudiantes activos y los potenciales, al igual que haríamos una sección aparte para los cursos.

    Adicionalmente la “Biblioteca Virtual” y el “Correo Electrónico”, podríamos colocarlo en una categoría de Servicios, en donde seguramente se pueden colocar otros ítems.

    La sección de “Encuestas” sobra. Primero, no ayuda a los estudiantes en sus tareas. Segundo, si el Sena desea hacer una encuesta entre sus usuarios, es mejor enviarles un correo e invitarlos a responderla en una página preparada para ello.

    Finalmente debemos recordar que este menú nos debe dar acceso a cualquier página del sitio. Por lo tanto faltan ítems tan importantes como Quiénes Somos, Noticias, Herramientas (que actualmente están ocupando toda la columna izquierda), y algo tan importante como Proceso de Inscripción, el cual no encuentro en ninguna parte del Home.

    En resumen, en lugar de tener:
    1. Aprendices
      - Nuestros servicios ofertados
      - Iniciar sesión
      - Ingreso a la oficina virtual
      - Curso de inducción
      - Inglés para todos los colombianos

    2. Biblioteca Virtual
      - Biblioteca Virtual Sena

    3. Correo Electrónico
      - Correo MiSena
      - Reestablecer contraseña

    4. Encuesta
      - Colombianos en el exterior

    Podríamos tener algo como:
    1. Oferta de Cursos (lo coloco de primero porque sirve tanto a estudiantes activos como potenciales)
      - Inglés para todos los colombianos (el cual está muy resaltado en el Home actual).
      - Clasificados por Categorías
      - Todos los cursos
      - Próximos a iniciar
      - Nuevos

    2. Estudiantes Activos
      - Inicio sesión
      - Ingreso a la oficina virtual

    3. Estudiantes Nuevos
      - Matrículas
      - Curso de Inducción
      - Herramientas necesarias (requisitos)
      - Información para Extranjeros (Recuerden que estamos en Internet a la vista de todo el mundo. ¿El Sena Virtual ofrece educación gratuita también a extranjeros? Aquí se puede responder esta pregunta. Por lo menos este es un vínculo que nunca falta en las Universidades estado unidenses y europeas).

    4. Sena Virtual
      - Quienes Somos
      - Noticias
      - Contáctenos (¡En el sitio no lo veo por ningún lado!)

    5. Servicios (Lo coloco aparte y no dentro de Estudiantes Activos porque, según leí, también se ofrecen a docentes, proveedores, etc.)
      - Biblioteca Virtual Sena
      - Correo Electrónico

    Este puede ser un mejor menú. ¿El ideal? ¡Definitivamente no! Necesitamos conocer todo el sitio para poder completar los ítems que faltan y verificar que los que están si están bien ubicados. Porque como dijimos anteriormente, éste debe servir para navegar todo el sitio.

    Mínimo las 3 primeras categorías son muy acertadas para nuestros visitantes más importantes: los estudiantes (activos y potenciales).

    Adicionalmente aunque la agrupación de los ítems puede parecer lógica, sería ideal apoyarnos de una metodología tipo Card Sorting, en la cual son los mismos usuarios quienes nos ayudan a hacer la categorización. Al fin y al cabo ellos son quienes harán uso del mismo.

    En cuanto a diseño, es una gran pérdida de espacio el utilizar botones para cada uno de los ítems. Tan sólo observemos que este menú en una pantalla de 1024x768 sólo permite ver 5 opciones. Por lo tanto, es recomendable utilizar un menú que ocupe un espacio menor.

  5. Enlaces a sitios: Estos vínculos a sitios “amigos” no ayudan para nada en las tareas de nuestros estudiantes. Es otra sección de esas que hay que tener (por lo que he visto en los sitios del gobierno Colombiano) pero definitivamente no deben estar en el menú.

    Para este caso en nuestro rediseño los colocaríamos en la parte inferior de la página, como he visto que lo hacen otros sitios del gobierno.

  6. Herramientas: Finalmente esta columna presenta las herramientas necesarias para tomar los cursos del Sena Virtual. ¿Importante? Por supuesto. Pero la pregunta que debemos hacernos es: ¿Deben estar en el Home?

    Si miramos desde la perspectiva del estudiante activo: no sirve, porque ya debe tener estas herramientas. Y desde el punto de vista del estudiante potencial esta es una información que sobra si la comparamos contra los cursos, toda vez que él está buscando qué estudiar. Lo que necesita para hacerlo sería posterior.

    Así que esta columna la podemos eliminar y su contenido lo podemos colocar dentro de la información para los estudiantes nuevos. Es importante resaltar, adicionalmente, que cada curso debería tener la información de las herramientas que se necesitan para cursarlo.

Hasta aquí el contenido del Home actual. Volvamos a evaluar las tareas de nuestros estudiantes.
  • Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
  • Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.

Para todos los estudiantes (tanto los activos como los potenciales) tenemos en el menú todas las opciones que necesitan (las 3 primeras secciones). ¿Pero es suficiente? ¡No!

Si el Home debe destacar por algo es por hacer más rápidas y fáciles las tareas de nuestros usuarios principales.

La tarea principal del estudiante activo es ingresar a sus cursos, por lo tanto sería ideal, que en el Home tengamos una sección de Login. En cuanto a la oferta de cursos ya mencionamos que en la sección 2 tendríamos 1 o 2 cursos resaltados.

Sólo nos faltaría, para el estudiante potencial, la información sobre cómo matricularse.

Así es que hemos completado nuestro nuevo Home del Sena Virtual así:
  • Un nuevo encabezado con logo y slogan.
  • Un nuevo menú.
  • Una sección con un curso resaltado.
  • Una sección de login.
  • Una sección con la información para matriculas.
  • Una sección de noticias.
  • El infaltable pie de página

En cuanto a diagramación se podrían plantear una propuesta como esta:

Home propuesto para el Sena Virtual

Esto es un prototipo de baja fidelidad: un primer acercamiento, una versión en borrador del Home.

Es una propuesta, que si nuestra definición de usuarios y tareas está correcta resulta muy válida. Pero, es una propuesta de varias que se pueden generar. Podemos generar otras mostrando las 4 secciones principales en otro orden y en otras diagramaciones.

El proceso continúa, pero el ejercicio que quería presentarles ha finalizado.

Para terminar, ¿qué te ha quedado? Puedes hacer un rápido ejercicio definiendo los usuarios que más usan tu sitio. Luego define las tareas que ellos realizan en él. Ahora pregúntate: ¿mi Home les ayuda a estos usuarios a hacer sus tareas rápida y fácilmente?

sábado, febrero 23, 2008

Video Tour en Accesibilidad

Assistive Technology: A Video Tour of Accesibility

¿Recuerdas los videos que publiqué hace meses sobre Accesibilidad? Inicialmente fue ¿Cómo navegan las personas ciegas o con visibilidad reducida? y luego ¿De Qué Se Trata la Accesibilidad?

Pues te cuento que Jon Gibbins ha estado recopilando estos videos y muchos más en su página: Assistive Technology: a video tour of accessibility. Para que no te los pierdas.

viernes, febrero 22, 2008

Resumen del Reporte de Accesibilidad de Jakob Nielsen

Beyond ALT Text:Making the Web Easy to Use for Users With Disabilities

¿Recuerdas que en diciembre informé sobre el reporte de Accesibilidad: Beyond ALT Text:Making the Web Easy to Use for Users With Disabilities que Jakob Nielsen y su compañía Nielsen Norman Group publicó gratuitamente?

¿Ya lo leiste? ¿No? Pues no sabes de lo que te estás perdiendo. Como dice Olga: El documento no tiene desperdicio y su lectura es muy recomendable, por no decir obligatoria.

Así que para aquellos a los que les dé pereza leerse las 148 hojas en inglés, Olga Carreras ha publicado en su blog Usable y Accesible un breve resumen del estudio que realizaron y las conclusiones que extrajeron en forma de 75 directrices de accesibilidad. O lo lees o lo lees.

Seminario Introducción a la eAccesibilidad

Seminario: Introducción a la eAccesibilidad

Olga Carreras acaba de publicar el PDF de su presentación: Seminario "Introducción a la eAccesibilidad".

Una gran presentación que cubre gran cantidad de aspectos sobre la Accesibilidad Web: Su diferencia con la Usabilidad, sobre sus mitos y beneficios, sobre Normas, Certificados y Leyes en España, terminando con algunos tips de cómo hacer un sitio accesible y cómo evaluarlo.

¿Qué esperas para descargarla?

jueves, febrero 21, 2008

Más Técnicas en CSS

CSS

Después de su excelente 53 CSS-Techniques You Couldn’t Live Without, Smashing Magazine nos sorprende con otra increible recopilación de técnicas: Powerful CSS-Techniques For Effective Coding.

Muy, muy interesante las "novedades" que allí encontramos.

Recordando los Mitos y Conceptos Erróneos sobre la Accesibilidad

QUERTY

En QUERTY nos recuerdan los Mitos y nociones equivocadas sobre la Accesibilidad, un artículo muy interesante que traduje en Agosto del 2006 y que aún hoy es vigente.

Es una lectura muy interesante y los invito nuevamente a quienes no lo hayan leído a que lo hagan.

De antemano muchas gracias a Pamela Valenzuela de QUERTY quienes nos recuerda esa información, que hay que repetir, repetir y repetir.

miércoles, febrero 20, 2008

Conferencia: Diez Razones para Diseñar una Web Accesible

Internet Society - Capítulo Español

Hoy jueves 21 de febrero, de la mano de Emmanuelle Gutiérrez Restrepo de la Fundación Sidar, se repasarán diez razones para diseñar de manera accesible, diez razones de índole técnica, económica y social. Se abordarán conceptos tales como usabilidad, estándares, web semántica, interoperabilidad, aplicaciones enriquecidas, comunicaciones móviles, posicionamiento en buscadores, etc. Y se verá cómo, conociendo la accesibilidad y exigiendo su aplicación en todas las comunicaciones web nos beneficiaremos todos.

La conferencia es organizada por el Capítulo Español de la Internet Society y será a las 18:00 hora española, 12:00 del medio para Colombia o 17:00 GMT/UTC.

La conferencia puede seguirse a través de Internet accediendo a:
mms://windowsmedia.cesga.es/isoc-es y podrá participarse mediante chat, registrándose como “anónimo”, desde: http://www.isoc-es.org/chat


También, para los residentes en España, será posible seguir la conferencia desde las siguientes sedes presenciales:
- Madrid: CTI del CSIC, calle Pinar, 19
- Santiago de Compostela: CESGA, Sala de Presentaciones, Avenida de Vigo, s/n Campus Sur
- Barcelona: CESCA, Sala de conferències, Edifici Annexus
- Sevilla: CICA, Avda. de Reina Mercedes s/n, Campus Universitario de Reina Mercedes
- San Sebastián: i2BASK, Torre Arbide Norte, Parque Tecnológico de Miramón Paseo ikeletegi, 69.

Gracias a AccesoWeb.

martes, febrero 19, 2008

Cursos Online de Diseño de Webs Eficaces

Universidad de Murcia

Ha vuelto otra edición del Curso Online de Diseño de Webs Eficaces de la Universidad de Murcia.

No se si desde este año, pero acabo de ver que ya hay dos ediciones del mismo:
  • Curso en línea de introducción al diseño de webs eficaces
    Este curso pretende aportar los conocimientos y metodologías necesarias para la construcción de sitios web que no ofrezcan al usuario dificultades para su acceso, navegación o comprensión, facilitando que cualquier persona, independientemente de sus habilidades, experiencia o del equipo con el que se conecte a internet pueda acceder fácilmente a los contenidos del sitio web.
       Inicio: 31 de marzo
       Precio: 100 €
       Matrícula: Hasta el 10 de marzo

  • Curso online avanzado de diseño de webs eficaces
    Este curso tiene como objetivo avanzar en el diseño de páginas Web mediante la aplicación práctica de diversas tecnologías web (CSS, PHP, MySQL, AJAX, RSS) con la finalidad de diseñar páginas web eficaces desde el punto de vista de su gestión y potenciando su accesibilidad y usabilidad para el usuario.
       Inicio: 14 de abril
       Precio: 100 €
       Matrícula: Hasta el 11 de marzo
¿Cuál es para ti? Haz este pequeño test evaluativo para el curso Introductorio. En él cual te dirán si estás para el primero o el segundo.

El curso es realmente muy bueno. Yo lo hice en el 2006 y no dudo recomendarlo.

lunes, febrero 18, 2008

Encuesta de Herramientas para UX/IA



Comenzamos con las encuestas del 2008 y esta vez en la UX/IA Tools Survey 2008 nos preguntan cuáles son las herramientas que utilizamos para planear, diseñar y construir nuestros productos.

Está dirigida a diseñadores, arquitectos de información y especialistas en usabilidad.

La encuesta está a cargo de Kate Walser y publicará sus resultados en Boxes and Arrows.

Gracias a torresburriel.com.

viernes, febrero 15, 2008

Project Gmail Grimace: Hagamos que Google nos Escuche



¿Recuerdan el Email Standards Project del cual les hable hace algunos meses?

Les cuento que acaban de lanzar una iniciativa llamada Project Gmail Grimace para llamar la atención de la gente de Google (específicamente los encargados de Gmail), para lograr que revisen las graves falencias que este cliente de correo electrónico tiene al desplegar correos con estilos y demás.

Participar es relativamente sencillo, se requiere tomarse una foto haciendo una mueca, inscribirse a Flickr para enviar su foto y finalmente agregarla al grupo creado para este fin. Revisa los detalles para participar.

También los Estándares Web los necesitamos en el correo: ¡Así que a hacer tu mejor mueca ya!

Gracias a Michael Müller.Net.

Actualización: Con algunas de las fotos que han recopilado se ha montado este buen video.

Actualización 2: ¡Ya Google ya escuchado! Por lo menos un ingeniero de gmail parece estar interesado en hacer mejoras. ¡En hora buena!

Desconferencia 2008 en Madrid

Desconferencia, Madrid, España

Una desconferencia es un formato abierto de coloquio o conferencia donde el rol de los asistentes es activamente participativo.

El espíritu de la desconferencia no es la exposición de temas ni la promoción de mejores prácticas, sino la puesta en común de las inquietudes o problemas de los participantes con ánimo de avanzar en su solución.

De este pequeño evento se ha hecho pública la invitación para realizarla nuevamente este año: La Desconferencia 4... En abril o mayo. Así que si estás en Madrid no dudes en inscribirte a ver si eres uno de los afortunados de estar en ella.. Sólo son 25 asistentes (20 ponentes + 5 voluntarios), entre los que ya se han anotado Javier Cañada (El Cosmonauta, Programa Vostok, Cadius). Así que será un evento realmente interesante...

Gracias a El Cosmonauta.

miércoles, febrero 13, 2008

Presentaciones de Interaction 08

IXDA Interaction 08

Interaction 08 es la primera conferencia anual organizada por IxDA - The Interaction Design Association (La Asociación de Diseño de Interacción). Se realizó en Georgia (Estados Unidos) hace tan solo 5 días.

Aunque ya pasó este encuentro, tengo el placer de informarles que acaban de publicar gran parte de los videos de las presentaciones. Así que si te interesa el Diseño de Interacción esta es una gran oportunidad de enterarte de lo que sucedió en la Conferencia.

Gracias a guuui.com.

Introducción a las WCAG

W3C: Web Accessibility Initiative

La Iniciativa de Accesibilidad a la Web del W3C (WAI), fundada en 1997, es un grupo de trabajo permanente del W3C (Consorcio World Wide Web).

Este grupo proporciona pautas y recursos que ayudan a hacer la Web accesible. Para ello trabajan en 3 frentes, los cuales consideran como los Componentes esenciales de la Accesibilidad Web: (1) Desarrolladores y sus herramientas de creación, (2) Usuarios y sus herramientas de "visualización" y el (3) Contenido en sí.

Para cada uno de estos frentes han definido unas serie de pautas, a saber:
Todas ellas fueron oficialmente publicadas hace varios años y están en una versión 1.0.


Ahora, las Pautas de Accesibilidad para Herramientas de Autor (ATAG) te interesarían si trabajaras creando software para hacer sitios Web, digamos que fueras ingeniero de Adobe y trabajases en Dreamweaver.

Te interesarían las Pautas de Accesibilidad para Herramientas de Usuario (UAAG) si trabajaras en software para navegar en sitios Web, digamos que fueras ingeniero de Mozilla y trabajases en Firefox.

Pero, sí que te deben interesar las Pautas de Accesibilidad al Contenido en la Web (WCAG) porque estas son las pautas que te dicen cómo debes hacer tus sitios Web. Estas pautas tienen 14 pautas que constituyen los principios generales del diseño accesible:
  1. Proporcione alternativas equivalentes para el contenido visual y auditivo.
  2. No se base sólo en el color.
  3. Utilice marcadores y hojas de estilo y hágalo apropiadamente.
  4. Identifique el idioma usado.
  5. Cree tablas que se transformen correctamente.
  6. Asegúrese de que las páginas que incorporen nuevas tecnologías se transformen correctamente.
  7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes.
  8. Asegure la accesibilidad directa de las interfaces incrustadas.
  9. Diseñe para la independencia del dispositivo.
  10. Utilice soluciones provisionales.
  11. Utilice las tecnologías y pautas W3C.
  12. Proporcione información de contexto y orientación.
  13. Proporcione mecanismos claros de navegación.
  14. Asegúrese de que los documentos sean claros y simples.
Todas estas pautas son las que debes revisar en tus sitios Web para asegurarte que cumples con la Accesibilidad Web.

Pero hay algo nuevo en lo que está trabajando el grupo WAI: la evolución de estas pautas en lo que serán las WCAG 2.0.

Ya Olga Carreras habló de ambas versiones y nos hace un especial énfasis en lo que nos espera en esta próxima versión de las pautas. Así que los invito a leer su interesante post.

martes, febrero 12, 2008

TAW MobileOK Basic

The Webkit Open Source Project

Hace tan sólo 2 días que les mencionada del reciente lanzamiento del Beta del W3C MobileOK Checker cuando me doy cuenta que hay un tercer validador de Estándares para Móviles.

Se trata del TAW MobileOK Basic el cual hace parte de la familia del conocido validador TAW (y por lo tanto está en español).

Este validador TAW OK Basic es un validador de web móvil basado en las Buenas Prácticas para Móvil 1.0 de W3C.

Si no te has dado cuenta la Web Móvil es un hecho a corto plazo, así que ya tienes muy buenas herramientas para prepararte para ella: TAW mobileOK Basic, W3C MobileOK Checker, READY.mobi...

Un agradecimiento a Manrique Lopez quien me dió a conocer este validador.

WebKit: Mejor Cada Día

The Webkit Open Source Project

Este es mi post número 200 (en algo más de 3 años) y coincide con dos temas del WebKit, uno de los mejores navegadores en cuando a Estándares Web se refiere.

¿Sabes qué es WebKit? Es el navegador sobre el cual está hecho Safari, navegador estrella en Mac que ahora está haciendo sus pinitos en Windows.

Ahora, la primera novedad es que este navegador ya pasa el Test de Selectores de CSS, prueba que hasta ahora sólo pasaban los navegadores Konqueror y Opera.

El pasar esta prueba garantiza una estable y completa implementación de este importante tema en las hojas de estilo: Selectores en CSS.

Como segunda novedad les cuento que ya hay otra versión del WebKit para Windows: Se trata del Spinneret, que se diferencia del Safari porque no necesita de las librerías de Apple.

Apenas está en desarrollo, así que por el momento nos toca contentarnos con algunas capturas de pantalla.

Gracias a CSS3.info y aNieto2k respectivamente.

El Mundo en sus Manos



En este momento dejaré de lado todo lo técnico para invitarlos a leer una entrevista que salió en El País.

¿Qué tiene de especial? Pues que es hecha a una persona sorda y ciega. Imagínate por un momento en su situación. Lo especial de esta persona es que participa activamente en la sociedad y aún con su situación, vive independientemente. Para personas como él es que la Accesibilidad cobra vigencia fundamental.

Daniel Álvarez no sabe cómo es el mundo que le rodea. Jamás ha visto el rostro de su mujer o de su hija. Ni siquiera ha escuchado su voz. Es ciego y sordo, pero ha logrado llevar una vida normal. Trabaja en la ONCE y es presidente de la Asociación de Sordociegos de España. Viaja, asiste a congresos internacionales y juega con su hija. Sus cinco sentidos están localizados en sus manos. Atrapado dentro de su cuerpo, sin conexión con el exterior, ha aprendido a valerse por sí mismo y se comunica con los demás por medio del tacto.

Conoce el mundo de Daniel Álvarez en esta interesante entrevista.

Gracias a Con los ojos abiertos.

lunes, febrero 11, 2008

Validador de Estándares para Móviles

W3C MobileOK Checker

¿Tu Web está hecha para un dispositivo móvil? Ya puedes tener una respuesta más acertada, sin tener que probar en la infinidad de dispositivos que hay, gracias al renovado W3C MobileOK Checker (aún Beta), que según la W3C proporciona resultados más precisos y una experiencia de mayor confianza.

Si estás en Barcelona (España) recuerda que hoy comienza el Mobile World Congress, donde puedes pasarte por el stand del W3C (en el Hall 7) y conocer más sobre esta herramienta, que seguro te ayudará a hacer que tus páginas Web sean accesibles desde dispositivos móviles.

Gracias a W3C.

Actualización: Gracias a Utilidades para Webmasters recuerdo otro validador para móviles: READY.mobi. Así que son varias las opciones que tienes para revisar tu Web.

Funcionalidad No es Usabilidad



Artículo Original: Funcionalidad no es usabilidad
Author: Alberto LaCalle


Construir funcionalidades en un producto no garantiza que tus usuarios las utilicen.

Funcionalidad es lo que un producto puede hacer. Probar la funcionalidad significa asegurar que el producto funciona tal como estaba especificado.

Usabilidad es cómo la gente usa un producto. Probar la usabilidad significa asegurar que las personas saben utilizar las funcionalidades para cumplir sus objetivos.

Que un producto funcione correctamente es crítico, pero no suficiente para que ese producto tenga éxito. Un producto por sí mismo no tiene valor. El valor se lo da el uso, y el uso lo dan los usuarios.

La forma en la que el producto es utilizado es una responsabilidad de los diseñadores de producto y desarrolladores.

Qué es usabilidad

Usabilidad significa que las personas al usar un producto pueden hacer sus tareas de forma rápida y fácil. La usabilidad se fundamenta en cuatro puntos:

Centrado en los usuarios
Para desarrollar un producto usable, tienes que saber, entender y trabajar con personas que representen a usuarios actuales o potenciales.
Un diseñador, un responsable de proyecto, un supervisor o un cliente sólo se representan a ellos y no pueden sustituir a los usuarios finales.

Productividad
La gente considera que un producto es "fácil de usar y aprender" después de valorar el tiempo que necesita, el número de pasos y el éxito en predecir las acciones adecuadas.
Si quieres diseñar un producto usable debes entender los objetivos de tus usuarios.

Usuarios ocupados
El software es una herramienta de trabajo u ocio, y las personas somos poco tolerantes a dedicar tiempo en aprender y utilizar herramientas.

El usuario decide
Los usuarios, y no los diseñadores o desarrolladores, determinan cuándo un producto es fácil de usar. Cada persona estima el esfuerzo y el tiempo necesario para obtener algo.
Piensa en todas las funciones que tiene tu móvil, ordenador, programa, equipo de música o aparato de tecnología y que NO USAS, y el tiempo que estarías dispuesto a dedicar en aprender a usarlo todo.

Fuente: Introducing Usability , A practical guide to usability.

viernes, febrero 08, 2008

Nuevo ScreenReader: SAToGo

System Access To Go

Gracias a AccesoWeb me doy cuenta de un nuevo Lector de Pantalla (Screen Reader) gratuito: el SAToGo (System Access To Go) de las compañías AIR Foundation y Serotek. Este nuevo jugador en el mundo de la accesibilidad requiere conexión a Internet, Microsoft Windows e Internet Explorer.

En su página no hay información del producto pero pueden encontrar algo en el blog de Serotek.

Actualización: Fran Tarifa ya ha probado este lector y dice: la verdad que aunque mi prueba no ha durado mucho tiempo, la verdad que no ha sido muy satisfactoria. Así, que me parece que este nuevo lector de pantallas no va a suponer mucha competencia para el Jaws, eso si, mientras no cambien las cosas.

jueves, febrero 07, 2008

10 Errores Comunes al Implementar la Accesibilidad



Un sitio que siempre está dentro de mis lecturas es el de WebCredible, especialistas en Usabilidad y Accesibilidad en Inglaterra.

Para el mes de enero publicaron el artículo: 10 common errors when implementing accessibility, el cual me desconcertó. Dentro de los supuestos errores que mencionan tenemos: No insertes texto en campos de formulario vacíos, No utilices atajos de teclado (access keys), No utilices el atributo summary en una tabla, por mencionar sólo 3.

Estas son prácticas que trato siempre de llevar a cabo, así que mi pregunta fue inmediata: ¿Cuándo dejaron de ser buenas prácticas?

Consulté en la lista de AccesoWeb de Sidar y muy rápidamente Emmanuelle Gutiérrez y Restrepo, además de traducir el artículo en mención, lo comentó totalmente. Los invito a leerlo porque realmente es muy clarificamente.

Ah... E Inserta texto en campos de formulario vacíos, Utiliza atajos de teclado (access keys), Utiliza el atributo summary en una tabla... Son prácticas totalmente recomendadas...

Actualización: Igualmente en la lista han recomendado el artículo 7 errores de accesibilidad que se cometen a menudo que resulta interesante para leer.

martes, febrero 05, 2008

Curso en Madrid: Innovación y Tendencias en la Web 2.0

Istituto Europeo di Design: Innovación y Tendencias en la Web 2.0 - Diseño y Programación

Un super curso en manos del Istituto Europeo di Design para Madrid (España). Se trata del Curso Avanzado Innovación y Tendencias en la Web 2.0: Diseño y Programación.

Este curso de especialización adelanta las herramientas que, ya hoy, son fundamentales para cualquier diseñador que trabaje en la Red, desde el diseño y la programación necesaria para trabajar por su cuenta, hasta una sólida base para el desarrollo de un web site colaborando con equipos, done la figura del programador se hace imprescindible.

El objetivo del programa es formar y actualizar los conocimientos de los diseñadores que tienen una experiencia básica con HTML y que están acostumbrados a diseñar y programar en FLASH páginas web de dificultad media, intros y programación media que han caído en desuso, sobre todo desde la aparición de nuevos navegadores y plugings. Programación: XHTML, CSS, AJAX.

Entre los profesores se encuentran Santiago Ortiz, Miguel Ángel Rodríguez, Javier Maseda y Yusef Hassan Montero.

Así que si estás en la capital Española ya tienes una cita entre abril y junio de este año.

Gracias a HCNet Blog.

lunes, febrero 04, 2008

Capire: Edición Febrero 2008

Capire: Revista de Estrategia e Interacción

Acaba de publicarse la edición de Febrero 2008 de Capire: Revista de Estrategia e Interacción.

Para esta edición nos traen los artículos:
¡Qué esperas para leerla?

domingo, febrero 03, 2008

Web Semántica para Dummies

An Introduction to The Semantic Web for Noobs

Un sencillo pero claro video (en inglés) que nos explica qué es eso de la Web Semántica.



Gracias a Ciberescrituras.

Diapositivas del Seminario de Legislación y Accesibilidad Web

la nueva legislación sobre accesibilidad web y sus implicaciones técnicas

Desde hace días publicaron las Diapositivas del Seminario de Legislación y Accesibilidad Web, evento que presentaron Javier Prenafeta Rodríguez (Abogado especializado en nuevas tecnologías) y Daniel Torres Burriel (Consultor de usabilidad y accesibilidad web).

Como les mencioné hace algunas semanas, aquí está la respuesta a ¿cómo nos afectan las nuevas leyes sobre accesibilidad en España? Así que si estás en el país ibérico es algo realmente para revisar.

La presentación es pública, así que la puedes ver online (en el blog de Daniel o aquí mismo) o la puedes descargar en PDF (si eres usuario de SlideShare).

sábado, febrero 02, 2008

10 Principios para un Diseño Web Efectivo

10 Principles Of Effective Web Design

Artículo Original: 10 Principles of Effective Web Design
Author: Smashing Magazine
Fecha: 31 de enero de 2008
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para ver ejemplos de cada principio.

La Usabilidad y la utilidad, y no el diseño visual, son los que determinan el éxito o el fracaso de un sitio Web. Puesto que el visitante de una página es la única persona que hace clic en el mouse y, por consiguiente, decide lo que quiere hacer, el diseño centrado en el usuario se ha establecido como un método estándar hacia el diseño Web comercial y exitoso.

No vamos a discutir los detalles de implementación (por ejemplo dónde debe colocarse la caja de búsqueda), como ya lo hemos hecho en otros artículos, sino que nos centraremos en los principios, heurísticas y estrategias para un diseño web efectivo – métodos que, usados apropiadamente, pueden guiarnos a decisiones de diseño más sofisticadas y a simplificar el proceso de percepción de la información presentada.

¿CÓMO PIENSAN LOS USUARIOS?
Básicamente, los hábitos de los usuarios de un sitio Web son diferentes de los hábitos de los compradores de una tienda. Los visitantes dan un vistazo a cada nueva página, examinan rápidamente algo del texto y hacen clic en el primer vínculo que les llama su atención o se asemeja vagamente a los que están buscando. De hecho, hay muchas partes de la página que ni siquiera miran.

La mayoría de los usuarios buscan algo de su interés (o que les sea útil) y que tenga un vínculo. Tan pronto lo encuentran le hacen clic. Y si en la nueva página no encuentran lo que estaban buscando, hacen clic en el botón Atrás y el proceso de búsqueda continua.
  • Los usuarios aprecian la calidad y la credibilidad. El contenido es más importante que el diseño. Es por eso que sitios con muy buen contenido y no tan bien diseños obtienen gran cantidad de tráfico.
  • Los usuarios no leen, sino que ojean rápidamente. Buscan puntos fijos que los guíen hacia lo que están buscando.
  • Los usuarios son impacientes y quieren resultados instantáneos. Un principio simple: Si un diseño no hace que el usuario encuentre lo que busca, el diseñador falla y hace perder dinero a la empresa. Entre más tenga que pensar el usuario y la navegación sea menos intuitiva, más fácil será que los usuarios busquen otras alternativas.
  • Los usuarios no seleccionan lo más óptimo. No examinan la página linealmente ni van de sección en sección buscando lo que necesitan. Por el contrario buscan rápidamente y toman la primera opción que encuentren, en lugar de buscar la mejor de todas las opciones.
  • Los usuarios siguen su intuición. La mayoría de las veces los usuarios se las arreglan como puedan, sin siquiera leer la información que el diseñador ha puesto.
  • Los usuarios quieren tener el control. Sobre su navegador y esperan que todo el sitio sea consistente. Es por eso que no les gustan los pop-ups ni que el botón Atrás les deje de funcionar. Así que es una buena práctica nunca abrir vínculos en nuevas ventanas.

LOS PRINCIPIOS
  1. No hagas pensar a los usuarios

    De acuerdo a la primera ley de la usabilidad de Krug, la página web debe ser obvia y auto-explicativa. Tu trabajo al diseñar una página es que el usuario no tenga ninguna pregunta. Debes tener una navegación y una arquitectura intuitiva, una estructura clara, ayudas visuales moderadas y vínculos fácilmente identificables. El visitante debe entender qué hace la página, cómo funciona y cómo puede ir a otro lado. De eso se trata que no tenga ninguna pregunta.

    Una vez que tus visitantes entiendan de qué se trata tu sitio, les puedes explicar por qué es útil y cómo se pueden beneficiar de él.

  2. No desperdicies el tiempo de los usuarios

    Si vas a ofrecer algún servicio o herramienta, trata de tener unos requisitos mínimos. Entre menos necesiten los usuarios para probar un servicio, más fácil lo harán. Ellos quieren “jugar” con él, en lugar de registrarse porque tal vez nunca vuelvan. Déjalos explorar y descubrir cuáles son tus servicios sin pedirles ni el correo.

    Un solo registro es suficiente para evitar que tus visitantes naveguen en tu sitio y reducir tu tráfico.

  3. Haz que los usuarios enfoquen su atención

    Algunas partes de la interfaz de usuario atraen la atención más que otras. Obviamente las imágenes son más atractivas que el texto y la negrita atrae más que el texto plano. El ojo humano no es para nada lineal y los usuarios pueden identificar instantáneamente bordes, patrones y movimiento.

    Así que enfocar la atención del usuario a áreas específicas del sitio mediante el uso moderado de elementos visuales puede ayudar a que fácilmente vaya de un lugar a otro sin siquiera pensarlo. Este visitante estará más orientado y desarrollará más confianza en el sitio, y por ende en la compañía que visita. Entre menos tenga que pensar el usuario, mejor será su experiencia.

  4. Esfuérzate por mostrarte

    Los diseños Web modernos son normalmente criticados por guiar a sus usuarios con unos procesos 1-2-3 muy atrayentes y por tener botones grandes con efectos visuales Pero precisamente estas guías son extremadamente útiles, porque guían al usuario de una manera muy amigable y simple.

    Dejar ver al usuario claramente las funciones disponibles es un principio fundamental del diseño de interfaces de usuario. No importa cómo se logre, lo que importa es que el contenido sea entendible.

  5. Haz uso de una buena escritura

    Como la web es diferente de los medios impresos, es necesario ajustar el estilo de escritura a los gustos y hábitos de los usuarios.

    Evita nombres lindos, rebuscados, de mercadeo, específicos de la compañía, técnicos o no familiares. Si quieres que los usuarios creen una cuenta, usa “Regístrate” en lugar de “Comienza ahora”, que es aún mejor que “Explora nuestros servicios”.
    Una solución óptima para una escritura efectiva es:
    • Usa frases cortas y concisas.
    • Usa una diagramación que se ojee fácilmente (categoriza el contenido, usa múltiples niveles en los encabezados, usa elementos visuales y listas).
    • Usa un lenguaje objetivo y plano.

  6. Esfuérzate por la simplicidad

    El principio “Hazlo Simple” (KIS: Keep It Simple) debería ser el objetivo principal del diseño de un sitio. Los usuarios raramente visitan un sitio por su diseño. Lo que buscan es información o servicios.

    Desde el punto de vista del visitante el mejor diseño es uno en sólo texto, sin publicidades. Es por eso que una versión para imprimir de las páginas es esencial para una buena experiencia de usuario.

  7. No le tengas miedo al espacio en blanco

    Actualmente es difícil valorar la importancia de los espacios en blanco. No sólo ayudan a reducir la carga cognoscitiva, sino que también mejoran la percepción de la información. Cuando un visitante llega a una página lo primero que intenta hacer es examinar la página y dividirla en secciones y los espacios en blanco son esenciales en esta tarea.

    Las estructuras complejas son más difíciles de leer, examinar, analizar y de trabajar con ellas. Las estructuras jerárquicas reducen la complejidad (Ley de Simon): entre mejor logres que tus usuarios encuentren un sentido de jerarquía, tu contenido será más fácilmente percibido.

  8. Comunícate efectivamente con un lenguaje visual

    En sus artículos de comunicación visual efectiva, Aaron Marcus declara tres principios fundamentales [en] implicados en el llamado lenguaje visual:
    • Organiza: dale al usuario una estructura conceptual consistente y clara. Conceptos importantes dentro de la organización son: la consistencia, la diagramación, las relaciones y la navegación.
    • Ahorra: haz lo que más puedas con tus elementos visuales. Los cuatro puntos principales a tener en cuenta son: simplicidad (sólo incluye los elementos importantes), claridad (ningún elemento debería presentar ambigüedad), individualidad (debe ser distinguible lo que realmente importa) y énfasis (los elementos más importantes deben ser los que más fácilmente se perciban).
    • Comunica: La interfaz del usuario debe mantener un balance en legibilidad, tipografía, simbolismos, visualización y color, para poder comunicarse efectivamente. Usa máximo 3 tipos de letras en cómo máximo 3 tamaños y un máximo de 18 palabras o 50-80 caracteres por línea.

  9. Las convenciones son nuestras amigas

    Las convenciones son muy útiles para reducir la curva de aprendizaje y el tener que pensar cómo funcionan las cosas. Imagínate cómo sería si todos los sitios usaran un icono diferente para sus RSSs. ¡Toda una pesadilla para la usabilidad!

    Con ellas ganas la confianza y credibilidad de tus usuarios. Entiende qué es lo que esperan los usuarios de la navegación de un sitio, de la estructura del texto, del lugar de la búsqueda, etc.

    Por ejemplo traduce tu página a otro lenguaje como el japonés y pon a prueba el sitio con algunos usuarios. Si las convenciones están bien aplicadas, aunque la página esté en otro idioma, estos usuarios podrán ubicarse en ella.

  10. Prueba temprano, prueba a menudo

    Este principio llamado TETO (Test Early, Test Often) debería ser aplicado en todo proyecto, debido a que estas pruebas de usabilidad a menudo dan gran conocimiento sobre problemas y situaciones.

    Sólo podrás saber con certeza que un diseño es mejor que otro analizándolo desde un punto específico, es decir: probando con un usuario.

    Algunos puntos importantes para que tengas en cuenta:
    • De acuerdo a Steve Krug, probar con un solo usuario, es 100% mejor que probar con ninguno y probar con uno al principio del proyecto es mucho mejor que probar con 50 al final. De acuerdo a la primera ley de Boehm, los errores son más frecuentes en la etapa de requisitos y diseño y entre más se demoren en removerse serán más costosos.
    • Las pruebas son un proceso iterativo, lo que significa que cuando diseñas algo, lo pruebas, lo arreglas y lo vuelves a probar.
    • Las pruebas de usabilidad siempre producen resultados útiles. Ya sea porque encuentres problemas que tienes o para ver que no tienes grandes fallas en tu diseño.
    • De acuerdo a la ley de Weinberg, un desarrollador no es el apropiado para probar su propio código. Lo que aplica también para los diseñadores. Ya has trabajado mucho en un diseño, lo conoces, lo que hace que no tengas una perspectiva diferente sobre él. Ya sabes cómo se hizo y cómo funciona, así que busca otras personas para que lo prueben.

REFERENCIAS