Post publicado en usarte el 20/09/08, 1:39am:

Al parecer todos las redes sociales de moda (Facebook, Flickr, Twitter, Last.fm ,etc), están cambiando su cara, donde todas (por el momento) han recibido un aire de aceptación, excepto una. Facebook.

Desde el día que Facebook, implementó a manera opcional, habilitar en tu perfil el nuevo diseño, fue amor a primera vista!, al parecer todas mis plegarias habían sido escuchadas, me encontré con layout más simple y fácil de usar, no obstante a la mayoría no le importó, hasta casi pasar por desapercibido esta opción.

Pues bien, durante esta semana, Facebook, implementó de manera oficial el nuevo diseño en todos los perfiles, y mas del 50% de los usuarios pegaron el grito al cielo, de los cuales, fueron estos mismos que se quejaron de que facebook había sido bombardeada de aplicaciones increíblemente inútiles a tal punto de hacer un video quejándose de esto. (4,596,223 de visitas). Quién los entiende!!

Para nadie es secreto que la gente siempre se resiste al cambio, unos tienen una mayor o menor curva de aprendizaje, pero es totalmente ridículo, el escándalo que están haciendo, a tal punto de llenarme mi inbox tanto de gmail como de facebook, pa’ unirme a peticiones sin fundamentos.

Pues bien, al ver, el rechazo tan enfático de mi circulo social, me puse analizar el nuevo sitio con un ojo más critico:

Es claramente obvio que el nuevo diseño viene a enfocarse a la actividad social de nuestros contactos, basándose en la metodología del microblogging (algo que no muchos entienden), tal y como manifiesta Cristian Labarca en su post El polémico rediseño de Facebook :

“Ahora Facebook cambia la lógica de la red, si en su versión anterior el protagonista eramos nosotros y nuestro escenario era el perfil que enchulabamos y llenábamos de Quiz, buscando graficar nuestra personalidad en él. Ahora nosotros cómo habitantes de esta red nos damos a conocer, nos comunicamos e interactuamos, es nuestra actividad la que refleja la personalidad de cada uno. El escenario cambio, ahora es mucho más amplio.”

Tal y como manifiesta Cristian, el nuevo facebook, aparte de darle un mayor espacio a los anuncios publicitarios, prioriza las acciones de los usuario, se centra en lo que nosotros hacemos en Facebook – enfoque retomado apartir del éxito de Twitter, con el propósito de que los miembros interactuen en base a actividades o eventos reales, y no a tests o quizzes sin sentido alguno.

He observado con detenimiento, que las personas que protestan por esta nueva cara , es porque no comprenden todavía el fenómeno del microblogging, ni mucho menos twitter (al menos en mi país). lo miran aburrido porque visitan un perfil y no tiene nada, y es asi con la mayoría de personas, pero hay otros pocos, como mi caso, que tengo conectado mi twitter, mi flickr, mi delicous, mi last.sfm, etc. y todos estos se reflejan en mi update, y mis amigos pueden pasar hasta horas chismeando sobre lo que estoy haciendo. y es a eso donde le esta apostando Facebook con su nuevo diseño.- Lo cual un uso desmedido de estas otras redes puede puede recaer a la saturación de tu perfil.

Diseño

En lo referente al diseño, creo que fue un movimiento acertado en adaptar la interfaz a una resolución mínima de 1024, la anterior era ruidosa y llena de cajones con el montón de aplicaciones, lo que ocasionaba que la barra de scroll de mi navegador se encogiera a tamaños extremadamente diminuto, y la página muy pesada para cargar, el típico perfil de arbolitos de navidad, o el sindrome las vegas (luces parpadeandome por todos lados).

El menú personal de cada perfil, es ahora estructurada en tabs o pestaña, con el próposito de reoganizar y filtrar todo los elementos que conforman tu perfil (fotos, muro, información de contacto, aplicaciones, etc ), mejorando así la navegabilidad visual del mismo.

El nuevo muro, se combina ahora con los mensajes enviados por nuestros amigos, asi como también de los mini-updates, pudiendo causar un poco de confusión (aunque visualmente se diferencian), aspecto en el cual los usuarios se quejan de esta versión.

Lo único que me decepcionó, es que aparecen los menús sorpresas, en la version anterior, al menos te dejaba intuir que una determinada opción de menú se desplegaría en sub-opciones, haciendolo más manejable.

Pues bien, para no hacerles más largo el cuento, el nuevo diseño me ha gustado, es una interfaz más manejable y personalizable, con un aspecto más minimalista, enfocandoce en una interactividad entre sus miembros más social.

Y ustedes que opinan?, han encontrado alguna inconsistencia o desventaja de esta nueva versión?
Mejorías, debilidades?

© admin for Juan Ortega, 2008. | Permalink | 3 comments | Add to del.icio.us
Post tags: facebook, redes sociales, usabilidad

Feed enhanced by Better Feed from Ozh

Pues bien, tras realizar un breve análisis de los errores de diseños de los sitios web gubernamentales (esperen un análisis mas detallado prox.) , llegué a la terrible conclusión de que existe un cierto desconocimiento de como crear un sitio web usable, y por usable no me refiero a la típica frase “user-friendly” la cual todo mundo tiene la concepción de que se trata solamente del aspecto visual de un sitio, sino me refiero a un Diseño “DCU” , que quiere decir diseño centrado al usuario. A lo largo, de este artículo, estaré dando algunos consejos, de como diseñar sitios web usables, al menos desde una perspectiva funcional, la parte estética visual es algo empírico, no es una receta de cocina, es algo que requiere un proceso mas complejo que requiere tiempo pero sobre todo dedicación.

La frase trata a los demás como quieres que te traten a ti, se aplica perfectamente en este medio, a la hora de navegar por Internet.

Una vez alguien me cuestionó seriamente del porque deberíamos de desarrollar sitios web estándares ya que le parecía una perdida de tiempo, lo cual me pareció totalmente absurdo de preguntar, pues bien, es necesario hacerlo porque hay que comenzar aprender hacer las cosas de la manera correcta, porque los buscadores nos querrán indexar un poco más, pero sobretodo, por mejorar el nivel de satisfacción del aquel usuario que llega a tu sitio web en busca de un producto, servicio o simplemente por algún tipo de información y que podrá convertirse o no, en un potencial Cliente.

Para comenzar debemos de tener en cuenta ciertas cosas :

• El tiempo en Internet es tu mayor enemigo, los usuarios son impacientes.
• Los usuarios no leen, escanean.
• No todos navegan de la misma forma.
• No todos usan los mismos navegadores.

Dicho esto tenemos que tener en cuenta  que existen una infinidad de consejos, trucos o técnicas para mejorar tu sitio web, las que muestro a continuación son apenas una pequeña muestra, pero que sirven como directrices durante la el ciclo de vida de un proyecto web.

Diseña un sitio fácil de Navegar

Me he encontrado con sitios cuyos menús son poco intuitivo y que llegan a tener hasta 7 u 8 opciones, así como también extensos párrafos de bienvenida que nadie lee o banners publicitarios causando que tu sitio se vea como un lindo árbol de navidad.

Para evitar eso, la mejor estrategia es ponerte en los zapatos del usuario, diseña tu sitio a como piensan ellos, para esto puedes:

1. Revisar las estadísticas de tu sitio
   En ella encontrarás valiosa retroalimentación que te permitirá identificar cuales son las secciones más visitadas.
2. Aplicar técnicas de card sorting
   Card Sorting es una técnica de agrupación de la información en base al modelo mental de los usuarios, muy útil a la hora de estructurar la navegación del sitio.
3. Realizar un Benchmarking
   Visita otros sitios de tu mismo mercado para identificar ciertos aspectos estructurales que pudieran ser provechosos.
4. Pon a prueba tu sitio
   Realiza test de usabilidad con los usuarios target del sitio, ya por último pídele a algún familiar o colega tuyo que navegue por el sitio, asignale algunas tareas como encontrar cierta información, y verás que en tiempo record siempre encontrarán algún error e inconsistencias que tu no viste, si es posible hay que involucrarlos desde las primeras etapas del desarrollo de tu sitio, de igual forma hay que realizar test heuristicos, para verificar que tu sitio cumple con los criterios necesarios de usabilidad.

Usa CSS

Antiguamente las css se ocupaban para el estilo de las fuentes, y las tablas para la maquetación, pues ya no, ahora con las css tenemos la facilidad de maquetear todo el sitio, el tamaño de la página se reduce considerablemente, de igual forma, lograremos separar el diseño del contenido por lo que tendremos un código más limpio y un diseño fácil de administrar.

Escribe para la Web

Ve al grano, elimina aquellas introducciones todas pomposas que nadie lee, de hecho, existen estudios que indican que el usuario promedio solo lee el 20% de lo que aparecen en la pantalla, ellos escanean en busca de palabras claves que les interesan, por lo que una lectura extensa es muy poco probable que la lean.

Los dos primeros párrafos deben contener la información más importante (efecto pirámide invertida) y haz uso de viñetas, negritas para destacar el contenido para mejorar la encontrabilidad (Findability) de la información, por último emplea el uso de los enlaces para no interrumpir el flujo de la lectura, no es lo mismo tener un enlace asi www.elnuevodiario.com.ni, que el nuevo diario, de igual forma hay que saberlos destacar de los otros elementos.

Utiliza código semántico

Utiliza las tags de manera correcta, bajo el contexto en que ellas fueron creadas, ejemplo:

• La tag <table> fue creada para exibir datos tabulares y no para maquetear los sitios.
• Usar las tags como h1, h2, h3, etc, para declarar los títulos.
• Todo lo que sea enumeración utilizar las tags <ul> (lista sin orden) o <ol> (lista ordenada).
• En los formularios utilizar la tag <label> (rótulo) para declarar el nombre de los campos.
• Utiliza la tag <p> para los párrafos.

Emplea técnicas de SEO

SEO significa Search engine optimization, son las técnicas necesarias que nos permitirán ganar posicionamiento en los buscadores, una gran parte de los visitas nuevas de un sitio provienen de alguna búsqueda. Comencemos por utilizar las etiquetas keywords, title y description como técnica básica para mejorar el posicionamiento de tu sitio.

No abuses de Flash

No recomiendo diseñar un sitio web completamente en flash, ya que tu sitio se convierte en un producto enlatado, difícil de indexar para los navegadores, y muy pesado para cargar.

Evita colocar fastidiosos intros, que desespera estar esperando casi una eternidad, para una animación de 20 segundos, pero sobre todo, repitan conmigo: NO colocar música en tu sitio, y peor si no se coloca algún mecanismo para detener la música.  Pónganse la mano en la conciencia, el usuario no la ha pedido, interrumpe la navegación y disminuye el grado de satisfacción. Imagínense si un usuario está navegando en un cyber, en una biblioteca, o simplemente está escuchando su propia música en su compu, y se topa con en este tipo de sitios, es algo realmente fastidioso .

Usa colores amigables, se amable con los ojos

El color es un arma de doble filo debemos asignar los colores correspondientes y unirlos de una forma equilibrada y homogénea

Es un hecho, los colores nos afectan psicológicamente y nos producen ciertas sensaciones desde primer momento, por lo tanto en la web tenemos que emplear colores armoniosos que faciliten la lectura por pantalla. Para esto debemos de conocer nuestro target, y crear una paleta de colores de acorde al contexto, existen por la red varios generadores de colores que nos serán de mucha ayuda.

De igual forma hay que emplear un fondo adecuado que haga un buen contraste con la tipografía empleada en el sitio, y desde ya se los aseguro, el visitante se sentirá muy agradecido.

Conclusiones

Espero que estos pequeños consejos, sean de gran ayuda al momento de desarrollar un sitio, por mi parte solo le resta por decirle que nadie nace aprendido, crear un sitio web es un arte, y que los errores cometidos en los diseños, yo los he cometido también, pero es responsabilidad nuestra mejorar nuestro trabajo, y aprender nuevas metodologías que nos permitan crear sitios Web usables y accesibles.

© admin for Juan Ortega, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: Accesibilidad, buenas prácticas, Reflexiones, usabilidad

Feed enhanced by Better Feed from Ozh

Los errores recopilados desde 1996 , han ido variando a través del tiempo, debido a la aparición de nuevas tecnologías, nuevos dispositivo, y nuevas formas de navegación, pues bien, la última lista data del 2007, y los errores detectados para este época son:

1. Dificultad en las búsquedas
2. Archivos en PDF para lectura en línea
3. Falta de diferenciación para el color de los links visitados
4. Texto no escaneable
5. Tamaño fijo para las tipografías
6. Títulos de página con baja visibilidad en buscadores
7. Cualquier cosa luce como publicidad
8. Violación de las convenciones de diseño
9. Abrir links en ventanas nuevas
10. No responder a las preguntas de los usuarios
11. Falta de Encontrabilidad (Findability) *
12. Fomentar el uso de enlaces en los textos cuando ameriten *
13. Uso Excesivo de Flash *

* Agregados en base a mi experiencia.

Cómo están los Sitios Web Gubernamentales?

Una vez repasado con detenimiento cada una de los errores listado anteriormente, me entró la curiosidad de conocer el estado actual de los sitios web del presente gobierno, por lo tanto hice un pequeño recorrido por estos sitios y me encontré con una serie de errores, las cuales indico a continuación:

Uso Abusivo de Flash

En este sitio, hace un uso excesivo del uso de Flash, afectando no solo la navegabilidad del sitio, sino también impide mejorar su indexación en los buscadores.

Uso de Frames

Increible pero cierto, todavía se siguen cometiendo errores de este tipo.

Incopatibilidad de Navegador

A pesar de que el sitio esta desarrollado en un CMS, este al ser visitado por un Navegador que cumple con los estándares Web de la W3C, el diseño se quiebra totalmente.

Uso de Tablas en la maquetación del sitio

Este sitio esta maqueteado completamente en tablas, haciendolo más pesado para descargar, y menos accesible, de igual forma al momento de entrar al homepage, se comienza a reproducir misteriosamente una canción publicitaria, provocando que el usuario se sienta incómodo.

Uso excesivo de Imágenes

En este sitio, apesar de estar maqueteado a través de CSS, se estructuró casi en su totalidad imágenes sin ninguna descripción, por lo que al navegar con imágenes deshabilitadas, el usuario pierde totalmente el control de la situación.

Colores no estándares para los links

No existe una diferenciación, entre lo que es enlace y el contenido, ya que ambos poseen el mismo color.

Uso de Tipografía poco legibles

El sitio utiliza en todo su entorno una tipografía poco legible y no escaneable.

Archivos en PDF para lectura en línea

Todos las notas de prensa son presentadas en formato .PDF, dificultando la lectura, así como también disminuyendo la accesibilidad del sitio.

Conclusiones

Tras este pequeño recorrido es evidente que los sitios Web gubernamentales, siguen presentado algunos errores tanto en su diseño como en la estructuración de la información, errores que inclusive datan de los años 90′s y que hoy en día se siguen cometiendo, ya sea por falta de conocimiento o falta de interés por aprender.

Sea cual sea la razón, esto no puede seguir así, debemos de recordar que el propósito del diseño es facilitar la comunicación entre lo que el usuario requiere, y el sitio,  por lo tanto al momento de diseñar o desarrollar un sitio, debemos de pensar primero en nuestros visitantes, en como podemos mejorar su experiencia al momento de interactuar con el sitio para así prevenir que la gente se siga frustrando al navegar y lo encuentre una pérdida de tiempo.

Por otro lado no quiero menospreciar el trabajo realizado por mis colegas en los sitios listados anteriormente, al contrario, mi deseo solo fue señalar aquellos pequeños errores necesarios para mejorar la interacción con las personas,  creando asi una  web más usable y accesbile para todos nosotros.

Quieres más?

Mi buen amigo Rodrigo Peñalba realizó un minucioso estudio de los sitios que fueron nominados (y algunos eventuales ganadores) del concurso Arroba de Oro del 2006, en el cual según los datos arrojados de la pesquisa, no muchos cumplen con los estándares Web y otros factores. Para acceder al estudio, haz click aqui.

Por otro lado, si te interesa saber la lista de los errores en el diseño a través de los años te invito a que visites:

• Web design mistakes (2005)
• Web design mistakes (2003)
• Web design mistakes (2002)
  With cartoons.
• Web design mistakes (1999)
• Web design mistakes (1996)

© admin for Juan Ortega, 2008. | Permalink | 9 comments | Add to del.icio.us
Post tags: Accesibilidad, nicaragua, sitios web gubernamentales, usabilidad

Feed enhanced by Better Feed from Ozh

Via el blog de Torres Burriel, me di cuenta de una nueva herramienta para evaluar la usabilidad de los sitios Webs, se trata de Silverbak de los chicos de Clearleft.

Esta herramienta (La cual solo trabaja bajo plataforma MAC), registra el comportamiento de navegación del usuario para X cantidad de sitios, asi como también los click que realiza durante cada sesión, lo cual podemos realizar pruebas de usabilidad.

Sin duda alguna, le hace falta mucho por recorrer, herramientas como el Eyetracking o Morae son herramientas muchos más consolidadas y completas, ya que ofrecen una diversidad de funcionalidades necesario para evaluar un sitio Web, pero que debido a su exagerado precio, no muchos profesionales logra interactuar con ellas, y es ahi donde esta herramienta puede ganar adeptos.

Vamos a ver que pasa, por mi parte les dejo con una pequeña demostración que hizo torres burriel con esta herramienta.

Probando Silverback from torresburriel on Vimeo.

© admin for Juan Ortega, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: SW, usabilidad

Feed enhanced by Better Feed from Ozh