Mucho más que prototipar: moqups, proto.io y jetstrap

post - - leave a reply - share
jetstrap

Recuerdo muy bien el puñado de horas que invertí hace años buscando la “herramienta perfecta” de prototipado. Vale, vale, que si… que de comienzo todos vamos a lápiz (yo algunas veces hasta tiro de mi columna-pizarra). Bueno, por aquel entonces la mayoría usaban balsamiq, sinceramente, a mi siempre me desagrado mucho ese estilo “sucio” y esa interfaz. Mi opción preferida fue MockFlow, siendole fiel durante años.

Con el advenimiento de HTML5 llego moqups, la aplicación perfecta para wireframes, que marcaría un punto de inflexión en este tipo de herramientas. Luego con el responsive web design llegaron otra multitud de nuevas herramientas (subiendome al carro yo mismo con deviceponsive), y ahora elevamos el prototipado a un nivel superior para entrar en relación directa con el front-end, ejemplo de esto: Proto.io y jetstrap.

Proto.io

jetstrap

A este le tengo especial ganas, ya lo tienen actualizado con la última versión de bootstrap.

uxline, test con usuarios y estudios de usabilidad bajo demanda

post - - leave a reply - share
uxline

Gracias a @qmarcos de q-interactiva descubro este nuevo e interesante proyecto. uxline es un nuevo servicio que nos permite, bajo demanda y a través de su herramienta web, disponer de test con usuarios y estudios de usabilidad de una forma fácil, rápida y realmente asequible.

Tanto si somos diseñadores web, desarrolladores front-end, arquitectos de la información, etc. seguro que no esta de más poder contar con este tipo de servicios.

Podemos especificar cuantos usuarios van a probar el sitio web, cuales son las tareas que deben realizar y las preguntas que deberían responder. También permite que se puede estipular de antemano el perfil de usuario, país, genero, edad y su uso diario de internet.

Videos

Me han permitido hacer una prueba gratuita de un usuario con mi propio sitio web portfolio, los parametros que he indicado son: usuarios (1), país (cualquiera), genero (cualquiera), edad (cualquiera), uso diario de internet (más de 7h).

Muestro tan solo un par de los videos, tarea 1 y tarea 3 (casi me ha sacado los colores )

Parecen obvias las tareas, pero muchas veces es justamente lo que parece y luego resultan no serlo.

Uno de los detalles que me doy cuenta a raíz del primer video es que el usuario habla perfectamente español, sin embargo la web aparece en inglés, a él parece no importarle y no la cambia de idioma aunque tiene esa posibilidad en la barra superior. El problema es que deberías salir por defecto en español. Me he fijado que tiene el navegador en catalá, esta era la razón. He mejorado el algoritmo para que todos lo usuarios que tengan su navegador en galego, euskera o catalá, aparezca por defecto en español, una lengua más cercana que el inglés.

Preguntas

Por otro lado los test también incluyen preguntas a los usuarios, adjunto un par:

¿En alguna sección te ha parecido que no había suficiente información? ¿Dónde?

Usuario 1
No he tenido esa sensación, aunque puedo decir que el único momento que me he sentido algo dudoso ha sido aquel en el que estaba buscando información específica de trabajos realizados que se pudieran ajustar a mi demanda. He pensado que tal vez poder acceder a trabajos determinados por keywords, o por algún otro tipo de clasificación no estaría de más.

¿Qué es lo que más te ha gustado de la página?

Usuario 1
Me ha gustado la imagen sencilla e integral, me da seguridad, confianza y denota profesionalidad. He estado mirando la home y también me parecen muy acertados los textos autopresentativos. Al entrar en la página he ido directamente al apartado de portfolio, tal vez demasiado rápido. Después, en el momento de rellenar esto me he dado cuenta de que había obviado las otras secciones. Al echarles un vistazo me han parecido también muy valiosas para formarme una imagen de él como profesional. Sin embargo, puedo decir eso, que de buenas a primeras no me he sentido tentado a estudiar la home.

Conclusión

A mi parecer se trata de una gran idea y un servicio a tener en cuenta para profesionales como nosotros.

Más información en uxline.

moqups, la aplicación para wireframes

link - - leave a reply - share
moqups

moqups Es una de esas aplicaciones que bien merece una entrada en el blog. Para mi es sin duda la herramienta perfecta para hacer Wireframes.

Anteriormente me decantaba por mockflow, de hecho tuve un par de años la suscripción, en segunda posición tenemos al famosete de balsamiq y tras ellos un larguísimo etc. que he probado con más o menos agrado. La cuestión es que ninguno me satisfacía por completo, y creo que hace ya algo más medio añito descubrí moqups, donde me impresionó sobre todo la interfaz, totalmente volcada en la simplicidad, la sencillez, la limpieza, aunque sin dejar de ser muy atractiva.

Con moqups resulta enormemente fácil plasmar ideas en pocos minutos.

A nivel técnico es una aplicación que demuestra las grandes posibilidades de HTML5, CSS3 y JavaScript.
Sobre las funcionalides, tiene pequeños giños como tomarse la molestia de usar una conexión segura SSL, compartir el trabajo, enviarlo por mail, descargar los wireframes en PDF o PNG.

La verdad es que me sorprende que este lujo de funcionalidades y usabilidad bien entendida, no tenga un modo de suscripción, ahora que es la moda y que todo el mundo se lanza al freemiun. Parece ser que los rumores apuntan a que si habrá una versión avanzada de pago pero la que hay actualmente seguirá siendo libre, ojalá sea así…

UXSpain 2012, encuentro de profesionales de la experiencia de usuario en España

post - - 6 replies - share
uxspain

Lo primero de todo agradecer la organización del evento. Seguro que han hecho un gran esfuerzo para sacar esto adelante. Son eventos que vienen muy bien para conocernos, compartir experiencias, aprender y salir del ambiente de trabajo de cada uno. A mi personalmente me ha abierto mucho los ojos y me he venido con voluntad de hacer las cosas mejor.

Ya tengo ganas del próximo en el 2013!

Read more

¿El diseño aburrido es usabilidad?

post - - 2 replies - share
levmano

Retomando a Lev Manovich, descubro que habló sobre la usabilidad en una entrevista publicada por ArtNodes de UOC: Definitivamente, creo que estamos en el principio.

En una de las preguntas Manovich comenta que no le gustan los defensores de la usabilidad web, pues cree que no tienen ningún criterio estético y están proponiendo algo que resulta extremadamente aburrido.

En mi opinión, no puedo estar más en desacuerdo con esta postura.
El primer pensamiento que puede tener tanto un diseñador como un usuario es que la usabilidad puede mermar la creatividad y que las convenciones de diseño que a su vez favorecen al campo de la usabilidad van en detrimento de las posibilidades creativas. Se puede llegar a pensar que incluso si seguimos todas las convenciones favorables en usabilidad acabaríamos con un diseño global homogéneo y aburrido.

Nada más lejos de la realidad. Los diseñadores siempre han estado expuestos a convenciones y también a restricciones en todos los medios de expresión, desde la pintura en lienzo al diseño web. De hecho el diseño web es diseño de interacción por lo tanto estamos expuestos a tener en cuenta la conducta humana en este medio.

Las convenciones de usabilidad y las restricciones impuestas por el diseño de interacción más que minar nuestra creatividad la agudiza, haciendo que sigamos siendo creativos pero teniendo en cuenta dichos factores.

Recuerdo una cita que lo ilustra perfectamente:

Diseño es arte optimizado para conseguir objetivos. Shimon Shmueli

Diseño centrado en el usuario, una propuesta

post - - 1 reply - share
dcu

Hace alrededor de 2 años publique en este blog: La pirámide del diseño web, con mi idea sobre los elementos más relevantes en el proceso.

Ahora expongo una revisión de esta idea pero intentando tomar como base las premisas del DCU .

He elaborado un esquema en el siguiente documento: Diseño centrado en el usuario, una propuesta. (PDF – 188Kb)

Básicamente divido el proceso en 5 etapas:

  1. Arquitectura de la información
    1. Análisis (información, objetivos, usuarios)
    2. Diseño conceptual (blueprints, wireframes)
  2. Diseño
    1. Diseñó visual (mockups)
  3. Desarrollo
    1. Front-end (web estática)
    2. Back-end (web dinámica)
  4. Publicación
  5. Mantenimiento

En la propuesta, la evaluación de interfaz/usuarios deber correr desde su inicio y en paralelo al proyecto.

Se harían interacciones de evaluación constante con los usuarios a través de:
Blueprints (prototipo de baja fidelidad) > Wireframes (prototipo de media fidelidad) > Mockup (prototipo de alta fidelidad) > Web estática > Web dinámica.

Etiquetas dentro del control input (III)

post - - 1 reply - share

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.

Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title y value. El problema es que algunas ayudas asistivas pueden no interpretar el atributo title, por lo que esta solución no sería suficiente.

Respecto a la usabilidad puede ser debatida, pero el hecho de perder (lo que tienes que rellenar en ese campo) cuando haces clic en el, me parece un error. Eso si, visualmente y a nivel de interacción queda chulisimo.

Hoy, Kus (de uninstallme.com) me comenta:

Acabo de encontrar esto http://www.csskarma.com/lab/slidinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.

Y tanto que es buena idea, la accesibilidad es impecable. Se usa JavaScript como un complemento no intrusivo que se encarga de realizar el efecto y la transición del label. Solo le veo una pega, que puede resultar cansino, yo lo usaría para formularios muy pequeños, con 2 o 3 inputs.

Un lujo contar con tus aportaciones María 😉