Marzo 29, 2007

Más validación… Yo valido, tu validas, el valida

Tema: Usabilidad
» Se lee en 1 segs

Truwex

Para seguir en la onda de la validación, Sentido Web nos presenta Truwex Online, un validador de accesibilidad con características interesantes como la posibilidad de ver dónde se está produciendo el error de manera visual. También verifica temas de privacidad, calidad del website y un montón de cosas más.

Truwex Online es un desarrollo de la empresa rusa Erigami. Al parecer existe también una versión de pago.

Ahora si este validador continúa siendo gratis, me haría falta el plugin para Firefox.

Vía: Sentido Web
Link: Truwex Online

Tags:Usabilidad

Compártelo

¿Quieres Comentarlo?

Marzo 28, 2007

¿Y entonces quién valida?

Tema: Diseño Web
» Se lee en 61 segs

Esta pregunta me la he estado haciendo desde hace varios días. Porque he visto que las páginas consagradas y grandes no validan nada, ni el HTML ni accesibilidad, nada. ¿Será que el rollo este es sólo para bloggers y freaks? he aquí una lista de los gigantes de Internet y sus validaciones.

Website	Errores	Avertencias	Comentario
nytimes.com	320	16	La culpa igual es de los banners
lavanguardia.com	294	32	Los periódicos, tienen severos problemas de validación
myspace.com	292	muchas	Las aplicaciones, son las aplicaciones
elmundo.es	276	8	los periódicos no tiene suerte con esto
esmas.com	234	8	Mientras más contenido menos control
20minutos.com	230	-	¡Otro!
elpais.com	227	un montón	Comprobado, los diarios no les va esto
youtube.com	151	10	Partiendo del hecho que el <embed> ya da errores….
ebay.es	149	-	-
fotolog.com	79	2	Lo del atributo Alt es lo que más falla
Google.com	62	7	Increible, es simplemente un formulario y mira como va
Live.com	62	16	Es lo que tiene usar mucho Ajax
finetunes.com	30	3	No está mal para toda la cantidad de flash que tienen, aunque tiene errores graves en el <head>
Apple.com	25	1	¡Casi, pero no!
flickr.com	4	2	La culpa es de el link a la imagen, la url a la imagen es la que fastidia esto
microsoft.com	1	0	Por usar JavaScript mal escrito
blogger.com	0	0	Valida, sí, valida
wikepedia.com	0	0	No podía fallar
msn.com	0	0	Sorprendente! Sí que se puede usar Ajax y validarlo.
Marca.com	0	0	¡Se "marca" un tanto!
usandolo.com	1	0	No soy un super blog, pero bueno… valido de vez en cuando.

Para esta comparación he utilizado los resultados del validador Tidy, es como usar el de W3C pero más cómodo. Para definir los sitios a validar, he utilizado algunos de los TOP 100 de Alexa por países.

Tags:Diseño Web

Compártelo

6 Comentarios

Marzo 27, 2007

Wired rediseña a profundidad su web

Tema: Diseño Web
» Se lee en 1 segs

Wired
Wired, revista pionera en temas de tecnología, ha hecho un vuelco importante en materia web. Ha pasado de ser tener una maraña de links y feed para unificar sus contenidos de manera más digerible.

Una de las cosas que más me ha llamado la atención de este nuevo diseño es su menú principal, me parece muy acertada la manera en que han agrupado su navegación. Las revistas tienden a desplegar todas las categorías de sus secciones en vez de agruparlas. Quizá el dropdown menu no sea la mejor opción. Es posible que algún día los grandes portales y revistas con muchas categorías lleguen a asumir la “folksonomy” cómo método de ordenar sus contenidos.

Lo qué hubiera sido interesante es haber participado en el equipo de rediseño para ver cómo llegaron a tal conclusión.

Revista Wired:
Antes
Después

Tags:Diseño Web

Compártelo

¿Quieres Comentarlo?

Marzo 22, 2007

Marketing Vs. Experiencia de Usuario

Tema: Usabilidad
» Se lee en 121 segs

Form Sucks

¿Por qué los formularios tienen que ser tan aburridos y agobiantes?
Algunos sí otros no, por lo regular son aburridos aquellos en que la mano del marketing ha jugado un papel protagónico. Y es que el matrimonio Marketing-Usabilidad, si no está bien llevado es un desastre. Como ejemplo de esta relación, comentaré mi experiencia ante un caso claro de matrimonio en crisis.

Ayer intenté descargar el “free trial” de la versión 2007 del Microsoft Visio y mi experiencia fue bastante desilusionarte, aburrida y fastidiosa. Algo que debería haberme proporcionado un momento de diversión se convirtió en un calvario gracias a los formularios.

Paso Uno, para no perderme en la maraña de links del website de Microsoft fui a mi amigo fiel, Google. En milésimas de segundo cumplí con mi objetivo: encontrar la página de Microsoft Visio. Una vez allí, de inmediato detecté el mágico link del “Try Visio 2007”. Hasta aquí, genial. Mi experiencia ha sido positiva y satisfactoria. Pero la alegría duró poco.

Al hacer mi primer clic, me encuentro la página de descarga y veo las palabras mágicas, “Download a free trial”, otro clic y… sorpresa 12 opciones diferentes. ¡Esta gente me ha hecho pensar! En fin, Me decanté por la primera opción.

Luego me piden un Windows Live™ ID Network, por suerte recordé una vieja cuenta de Hotmail y eché mano de ella, pero… ¿y si el usuario no tiene este ID? O no sabe que es este ID. ¡Zas!, otro formulario para darte de alta. Bueno, mi caso no fue así. En ese momento pensé que al introducir mi Windows Live™ ID ya estaría descargando el software. Pues no, otro formulario y este fue el que más me molestó.

Me molestó porque me preguntaban tonterías, cosas que no me interesaban para nada y eran obligatorias. Unas de las preguntas era algo así como: ¿mis amigos piensan de mí que soy muy bueno con los ordenadores? O ¿eres un entusiasta consumidor de tecnología de punta? Absurdo para mí, pero no para ellos. 40 minutos después pude trazar una línea en el Visio.

Aquí mi reflexión:

Los departamentos de marketing necesitan información de los consumidores, con esas preguntas pretendían saber si yo era un “innovator”, si trabajaba para una gran empresa o no, mi nivel de interacción con los ordenadores, etc… Eso está perfecto saberlo, pero a costa de que el usuario tenga una experiencia negativa ante un proceso. No se supone que el usuario el rey, cada usuario cuesta dinero y hay que cuidarlo, según los de marketing. A veces hacen cosas como aburrirte con un formulario que al final no servirá de nada porque me atrevo a decir que tan sólo el 5% de la gente llenará este formulario con honestidad y leyendo cada pregunta. Eran más de 27 líneas que tenía que leer y razonar y para empeorar el panorama el texto tenía un tamaño de 10ptos.

Creo que el trabajo está en buscar un equilibrio entre ambas partes o preguntarle al usuario si quiere hacer una encuesta de manera voluntaria, como lo hace el resto de la humanidad. Como consecuencia, la próxima vez la gente cogerá su mula y se irá a otra parte. Este pequeño ejemplo demuestra lo rentable que puede ser la inversión en un estudio de User Experience.

Tags:Usabilidad

Compártelo

¿Quieres Comentarlo?

Marzo 21, 2007

Wireframes for All

Tema: Diseño Web
» Se lee en 121 segs

Wireframing

Lindsay Ellerby de UXMatter comparte sus experiencias sobre un taller informal de Técnicas de Creación de Wireframes que tuvo lugar en Toronto, Canadá, a finales de Febrero del año pasado, un poco tarde, lo sé, pero la señorita Ellerby, vino a escribir esto ayer.

Me gustaría comentar las conclusiones que plantea Lindsay en relación a este taller informal (iniciativa que me parece estupenda) y más adelante conversar sobre lo útil que resulta la incorporación de Patterns dentro de la creación del wireframe para entender con más detalle el esqueleto del proyecto.

El rol del wireframe en la fase inicial del proyecto

Antes de comenzar a tirar líneas es importante considerar quién va a ser el usuario final de nuestro wireframe para así poder determinar el grado de detalle del mismo. Por ejemplo, ¿qué incorporamos, nos enfocamos plenamente en el layout para diseño, aportamos medidas y dimensiones? ¿Detallamos al máximo e incorporamos los famosos Patterns? ¿Basta con indicar Main Menu (menú principal) o será mejor detallar el menú para hacernos una la idea? Todas estas dudas se responden con saber quién mirará esta información.

Mucho detalle o menos detalle ¿Qué hacemos?

Un poco lo que planteábamos anteriormente: el cómo resolver la profundidad del detalle. Un ejemplo claro y tangible. Hace un par de meses colaboré en la creación de un template para un site promocional de una universidad, en esta oportunidad yo hacía las veces de programador/diseñador CSS y para ello el equipo de diseño gráfico y el jefe del proyecto me prepararon un wireframe de muchísima precisión el cual no sólo indicaba la ubicación de los objetos dentro del layout sino también medidas de columnas y porcentajes de proporciones del layout, lo cual me facilitó enormemente el trabajo. Tuve que interpretar menos y ejecutar más. Un ejemplo inverso fue la elaboración de este blog. Esta vez yo tenía todos los roles, IA, programador, diseñador, administrador de contenidos, etc, etc… Sin embargo, creé un wireframe muy escueto, puesto que yo mismo comprendía las dimensiones de mi proyecto.

Oda a Microsoft Visio

Lindsay hace hincapié en la utilización de esta herramienta para generar estos documentos, en función de utilizar todo el potencial del software para cumplir con las premisas anteriores. Personalmente la utilizaría más para crear sitemaps que wireframes, quizá por tener más libertad, aunque Visio te da todo el soporte iconográfico. Pero una vez más, también depende de la primera premisa ¿quién procesará este documento? Por otro lado, también me he encontrado con sitemaps y wireframes muy específicos hechos en software de diseño como Ilustrator o Freehand. Una vez me mostraron un prototipo en PowerPoint y la verdad que funcionaba, no es lo más óptimo pero cuando no hay muchos recursos es una buena ruta de escape.
Otro asunto interesante de este artículo es una pequeña guía de cómo incorporar Patterns a la hora de crear un wireframe detallado para el cliente, sobre todo enfocado en generar Experiencias de Usuario y/o resolver problemillas que se puedan presentar.

Crea el layout del primer nivel

Paso número uno básico, layout sin más.

Identifica los Patterns que puedes utilizar y sigue con el layout

Es hora de hacer un poco de I+D para identificar qué elementos necesitan ser aclarados con precisión, un lista y a buscar los famosos patterns que utilizaremos. Luego detallamos más a fondo el Wireframe.
Lo Mejor para patterns: Yahoo! Design Pattern Library

Consistencia

Una vez planteado lo que necesitarás es probable que tengas que repetirlo en varias ocasiones, con lo cual usa el mismo, sé consistente. En este sentido, no tienes por qué pegar el patter en cada página, crea un índice.

Goodbye lorem ipsum, hello annotations

Como consejo final, nuestra experta nos invita a ser más específicos y más realistas, dejar menos a la imaginación. Con lo cual es mejor dejar de usar Dummy Text y comenzar a usar texto de verdad. También recomienda usar anotaciones con referencias claras siempre teniendo en cuenta quién leerá esto.

Y ahora… ¡hagamos wireframes!

Vía: UXMatter

Tags:Diseño Web

Compártelo

1 Comentario

Marzo 19, 2007

Domain Names más usables

Tema: Usabilidad
» Se lee en 121 segs

Domain Names más usables

Desde Usability.gov, nos proponen una serie de recomendaciones para hacer que nuestros nombres de dominios sean más usables y efectivos.

He aquí algunas características para mejorar este aspecto y algunos ejemplos.

Que sea corto, no más de 12 caracteres

La mayoría de sitios web cumplen esta premisa y me atrevería a decir que el promedio está en 7 (sin contar la extensión) Google (6), yahoo (5), youtube (7), myspace (7), blogger (7), infojobs (8).

Predecible

¿Cuál podría ser la web de la Caixa? = Lacaixa.com

En efecto, lacaixa.com redirecciona a lacaixa.es. En este caso la predicción funcionó gracias a que ellos adquirieron todas las extensiones posibles .com, .net, .biz, .cat y .org. Cosa que se ha de prever a la hora de adquirir el dominio de tu empresa. Aquí entra un poco en juego esa ley del diseño de interacción que es adelantarse a lo que el usuario pueda pensar.

Fácil de deletrear

En este punto tenemos que tener cuidado y además comprender que Internet es global. Para un americano puede resultar fácil deletrear Flickrs.com pero para un hispano parlante no tanto o si ponemos a un francés a deletrear meneame.net.

Fácil de escribir

Un poco lo mismo. Depende del contexto, por ejemplo Spiegel.de no resulta fácil si no hablas alemán. Por otro lado, Google que no significa nada es completamente global, aunque el tema de la doble o, no sé yo. Pero vamos, que google es una marca consagrada. Orkut es un ejemplo de difícil escritura, ¿qué pasa si le pongo c en vez de k? (nada porque han comprado los dominios con c y con k).

Fácil de pronunciar

Una vez más depende de ti, pero por parte de las empresas esto lo tienen bien aprendido, de hecho ahora mismo no recuerdo cosas difíciles de pronunciar.

Fácil de recordar

La moda 2.0 ha traído a colación este tema, muchos de los nombres y servicios 2.0 tienen la virtud de crear nombres bastante pegajosos como meebo, meneame, digg, Zillow, flikrs, Newsvine.

Agregaría una más que parece obvia pero no siempre lo es.

Único

Suena obvio ya lo sé, pero hay que tomarlo en cuenta, imagina que montas tu site y luego descubres que el nombre que escogiste es una página porno en brazil, si no es tu área de negocio créeme que no te hará gracia. Por eso ante todo I+D.

Más allá de estas recomendaciones yo aportaría una básica que ha de regir todo lo que se haga en materia web. Simplicidad. Si comienzas tu proyecto con esta premisa en la cabeza las decisiones en cuanto al nombre y otras cosas saldrán intuitivamente.

Como técnica para elegir nombres recomiendo una que me ha servido últimamente: El inventario. Crea listas de cosas que contendrá el site, de los objetivos y de los usuarios potenciales y sus características. Luego las frases conceptualízalas en una palabra. Así tendrás al menos tres columnas con palabras para generar combinaciones. O si quieres algo más “catchy” de los posibles resultados de esta lista comienza a hacer síntesis de los nombres. Los resultados serán muy divertidos y útiles.

Vía: Usability.gov

Tags:Domain Names, dominios, URL, Usabilidad

Compártelo

¿Quieres Comentarlo?

Marzo 19, 2007

Somos humanos qué más da

Tema: Usabilidad
» Se lee en 1 segs

Jacob Nielsen

Frase lapidaria de Jacob Nielsen:

The site will succeed in attracting visitors if it is designed according to how humans think and behave.

-Jacob Nielsen, entrevista para ZdNet Asia, Enero de 2007

“Un site triunfará en atraer visitas si está diseñado pensando en cómo los seres humanos pensamos y nos comportamos”

-Jacob Nielsen, entrevista para ZdNet Asia, Enero de 2007

Tags:Usabilidad

Compártelo

¿Quieres Comentarlo?

Marzo 16, 2007

Ayuda visual para entender los resultados de una búsqueda

Tema: Usabilidad
» Se lee en 1 segs

Summize

Alex Iskold de Read/WriteWeb, comenta Summize, un servicio que agrupa las opiniones de los consumidores sobre productos, películas, discos, etc. Lo interesante es su manera de plantear los resultados y es que la relevancia del comentario la representan en términos de, digamos bueno y malo, utilizando una técnica de visualización a lo heatmap.

Mi propuesta es explotar más a menudo recursos de visualización, tenerlo más en cuenta a la hora de crear, pero con precaución usando códigos internacionales y bastante estandarizados.

El método del tagcloud, más grande más importante o formas más creativas como RottenTomatoes.com, que califica las películas entre fresco y podrido utilizando iconos y barras de porcentaje. Un único problema con estos métodos: el usuario tiene que aprender a interpretar los códigos que usemos. Y si el usuario debe pensar mucho, esto no está funcionando bien.

Vía: Read/WriteWeb

Tags:heatmap, Usabilidad, visualización de contenidos

Compártelo

¿Quieres Comentarlo?

Marzo 15, 2007

¿Y ahora qué hago con el Footer?

Tema: Diseño Web
» Se lee en 1 segs

Footer

Tutorial Blog nos trae un resumen de artículos relacionados con distintos usos que se le puede al pie de página o footer.

En esta entra comentan la evolución de esta pieza, que ha dejado ser el espacio preferente del copyright para convertirse en parte del diseño, incorporando links de interés. Algunos hablan del Footer como la evolución de la barra lateral.

Lo cierto es que hemos de comenzar a darle un verdadero uso a este elemento, ya se ha dado el primer paso, incorporarlo al diseño. Ahora es el momento de generarle un uso definitivo más allá de Copyright, Disclosure y links pequeñitos que ni se leen. El Footer ha dejado de ser la “letra pequeña” del contrato. Algunos bloggers proponen colocar en el Pie de Página cosas como los artículos recientes, el blogroll, temas de validación, pero creo que aún no es suficiente para que el usuario eche una buena mirada a esta zona, pero al menos creo que se está comenzado a mirar más abajo.

¿Alguna idea?

Vía: TutorialBlog

Tags:Diseño Web

Compártelo

2 Comentarios

Marzo 12, 2007

Problemas de peso, YouSendIt te ayuda

Tema: Web World
» Se lee en 1 segs

Hoy he recibido uno de esos mails que te alegran el día y no era una de esas cadenas interminables con fotografías preciosas aunque un tanto ñoñas y mensajes repetidos hasta la saciedad. Era un correo de un amigo que, cansado de intentar mandarme una fotografías a mi correo electrónico ordinario (qué curioso, ¿el correo ordinario no era el postal???) me mandaba su última baza en un link. Cuál ha sido mi sorpresa al descubrir que ese enlace me llevaba a YouSendIt, una suerte de servidor a través del cual puedes mandar ficheros de gran tamaño “all over the world”. Simplemente fantástico. He rellenado un formulario con mis datos básicos y tras un correo de confirmación he podido acceder a mi propia página personal donde permanecían guardados, es su correspondiente bandeja de entrada, los archivos que mi buen amigo me mandaba. Quizá algunos lo conozcan y quizá para otros sea, como para mí, una herramienta más de esas que nos hacen el día a día más fácil, en una era en la que el peso de los archivos debería ser el menor de nuestros problemas. Otra aspecto a destacar de este sistema, es su “limpieza”, nada comparado con otros sistemas como Magaupload o Megashare, entre otros.