usabilidad

Seguimos con post de tema interface :) Porque aunque la documentación existente sobre las guías de estilo de diseño para Android [en] son bastante extensas y potables, creo que este pequeño “add-on” será bien recibido.

Android Patterns recopila una serie de patrones de diseño que son recomendables de cara a la construcción de una aplicación consistente y usable. Como se suele decir siempre cuando se tratan estos temas, los patrones son sólo sugerencias y consejos y no se pueden tomar como verdades absolutas aunque sí que es cierto que vienen a resolver correctamente los problemas que se plantean. Es por ello que nunca está de más tener a mano chuletas de este estilo.

Categorizados en función del contexto, encontramos preguntas que nos podemos realizar durante el proceso de diseño y una respuesta en forma de sugerencia. Todo acompañado de pequeños gráficos para facilitarnos el entendimiento.

Un recurso muy útil para ir despertando el gusanillo UX :)

Android Patterns [en]

Añado al saquito que tengo de posts sobre recursos de usabilidad y patrones de diseño web (y este otro también) una web que presenta capturas de aplicaciones realizadas para iPhone y de esta manera hacernos una idea de los patrones de interacción e interfaz que se suelen seguir de cara a conseguir una experiencia positiva con el usuario.

Es una web muy sencilla de usar, basada en filtrado por etiquetas y poco más. Ya sea en plan inspiracional o como punto de partida para buscar patrones, Pttrns puede ser un buen recurso.

Pttrns [en]

Sigo pensando que los listados que inundan (y de los que yo mismo no me libro en más de una ocasión) llegan a “matar” el auténtico sentido de investigar e informarse pero hay alguno que merece ser destacado… al menos un poquito.

Es el caso de 60 Questions to Consider When Designing a Website, una lista de preguntas que vale la pena hacerse a la hora de ponerse con las manos en la masa. Unas están bien, otras son lógicas y otras te valdrán la pena en función del tiempo/presupuesto del que dispongas. Por eso, si no estás muy puesto en la materia, échale un ojo.

Además enlazan a una pequeña “checklist” que considero también lo suficientemente potable como para haceros conocedores. Ahí van los linkitos:

60 Questions to Consider When Designing a Website [en] + 25‐point Website Usability Checklist [en][PDF]

Siguiendo el consejo del “desaparecido” Alberto Carazo, me guardé hace un tiempo la página Tentándote.com. El título poco deja entrever de lo que se va a tratar en dicha web. Y ha sido un descubrimiento de lo más placentero, sus señorías.

Si gustan de lecturas profundas en lo que a diseño se refiere (generalmente centrado en UX, interface y similares pero con degustaciones de otros campos también), no dejes de pararte allí y hacer una visita. Prometo que merece la pena.

Tentándote.com

Pensé que la Borderitis era algo que sólo yo había sufrido en algunos casos pero ya veo que es un mal común.

Excelente y super simple el artículo en Usability Post [en] sobre el exceso de anidamiento y zonas bordeadas que a veces se nos presenta al querer diferenciar zonas en web y que tiene solución bastante sencilla. Por si alguna vez te ha pasado y quieres ver que no estás sólo :D

A Mild Case Of Borderitis [en]

Seamos sinceros: cuando eres un chaval peque (en plena pubertad más bien), la sociedad te vende que si quieres triunfar con el género femenino tienes varias opciones: 1) Ser Leonardo DiCaprio en “Romeo y Julieta” (aunque ahora tira más la saga Crepúsculo). 2) Tocar la guitarra y hacer pinitos de cantautor. Si no eres cantautor no pasa nada, pero que la guitarra sea eléctrica. Pierdes el +1 en romanticismo pero ganas un +2 en heavy rebelde 3) Ser pinchadiscos o DJ. En mi caso, algo en mi interior me hizo ser diseñador. Pfff. En fin…

Coñas aparte, seguro que más de uno ha hecho el típico movimiento de Scratch (no confundir con Scritch) o conoce a alguien que conoce a alguien que es DJ. Estad preparados: los aliens no invadirán el mundo. Serán los DJ y ya nos tienen adoctrinados.

Al gremio del diseño le tienen miedo: saben que con nuestras gafapastas y photoshops somos un enemigo díficil de vencer. Hay por ahí algún híbrido DJ-diseñador que ha elegido definitivamente el lado del Illustrator (eh, RUDE? xD).

Lo que pasa es que los DJ tienen un arma secreta: una nueva interfaz multitáctil que emula la tradicional mesa de mezclas. Y tiene todos los detalles para que los diseñadores y amantes del género UX [en] caigamos en sus redes. Malditas innovaciones tecnológicas. Van a acabar conmigo.

Me parece un buen ejemplo de diseño interactivo que traslada algo que ya conocemos a otro tipo de naturaleza más virtual. Sin duda carece de muchas cualidades que todo DJ con bagaje profesional resaltará pero es un paso que parece ir bien encaminado. El vídeo dura lo suyo, guardaos unos minutos para visionarlo con calma.

PD: Vía Flylyf [en]

Nielsen ha sacado hace unos días un artículo relacionado con un punto que a muchos a veces se nos pasa por alto a la hora de establecer desarrollos webs (aplicable a formatos horizontales aunque no estén tan extendidos como los verticales). Recomiendo muy encarecidamente su lectura porque muchas veces no nos damos cuenta que excedemos esa “área virtual” a la que nos deberíamos limitar en muchas ocasiones si queremos que el usuario tenga acceso visual directo a zonas importantes sin necesidad de hacer scroll. Aunque, como casi siempre, todo dependerá de la situación.

Pero, y me atrevo a generalizar, es importante en la primera fase de diseño web, definir un “tope” que nos sirva como guía de cara a saber qué vamos a ver en un primer vistazo a la web. No es cuestión de eliminar contenido sino de priorizar. La gráfica superior nos sirve como ejemplo de la relación existente entre esa “área” y la fuerza de captación visual.

Pero no me quiero enrollar. El artículo, bastante interesante si no habías pensando nunca en el tema, a continuación:

:: Scrolling and Attention [en] ::

Ahora que el iPad ya está en la calle y empezará a hablarse de lo bueno que es y de lo malo que es (sí, todo a la vez) pues me sumo a la fiesta, aunque sólo tocándolo ligeramente.

Me he encontrado en la web de LukeW [en] un artículo que resume las pautas principales a la hora de desarrollar aplicaciones para el iPad y me ha parecido una lectura recomendable. No es que sea extrapolable a otros ámbitos (no al menos, todos los puntos) pero siempre agradezco estos “artículos”. De paso, os pongo el link directo a la documentación que Apple ofrece sobre el asunto.

:: iPad User Experience Guidelines [en] + Documentación Apple iPad [en] ::

Cuando empieza un año generalmente suele acabar otro (obviously). Es tiempo de apuntarse metas y de hacer retrospectivas. Como no sé si me dará tiempo a hacer una en condiciones, yo creo que de momento os puedo dejar con la que hacen en Usable y accesible, uno de los blogs sobre diseño de interacción en castellano que más me gustan y que recopilan en este listado sus mejores artículos sobre el tema.

Ya sabéis, si UX no es algo que os suene a chino, os va a interesar mucho:

:: Usable y accesible: Lo más visto en 2009 ::

Pues eso, que en Speckyboy [en] han hecho un recopilatorio bastante potable con documentos y enlaces relacionados con usabilidad y patrones de navegación e interacción en la web. Enchufad la aspiradora y empezar a pasarla por todo lo que hay dentro :)

:: An introduction to understanding and implementing Web Usability [en] ::

Ha sido la gota que ha colmado el vaso. Entrar a la web de DDI y comerme con patatas la redimensión automática de la ventana del navegador. Y si hay una cosa que me cabree más que el target=”_blank” sin notificar, es esta puñetera manía de escalar la ventana sin mi permiso.

Porque no digo que sea una mala práctica, pero sin mi permiso es… una mierda. Así, claramente. ¿Para qué voy a ponerle florituras si es lo que pienso?

Seamos serios, si vamos a necesitar que se maximice la ventana, al menos que cumpla uno de estos dos requisitos básicos: 1) que se avise al usuario y que sea éste quien de la conformidad o 2) que la menos sea porque se necesita el espacio para el contenido.

Cuando no se cumple ninguno de los dos aspectos, que me expliquen a mí que razón hay. Informar al usuario de manera previa a realizar una acción es básico de cara a una correcta experiencia. ¿Estaría bien que si borramos un archivo se nos avisara sólamente cuando ya fuera irrecuperable o que no tuviéramos un paso de confirmación final durante un proceso de compra online? Pues eso.

Nota: Se puede desactivar desde las propiedades de Javascript en Firefox. Pero esto, claro, lo desactiva para los automáticos y los que no lo son. No me vale señoría.

Nota 2: Como añadido, viene bien lo de la filosofía Unix y el diseño.

Si hay algo a lo que no he prestado realmente mucha atención es a preparar la versión para dispositivos móviles de este blog. Y mira que hay alternativas: está la de Mobify que es muy completa pero me da mucha pereza y no tengo un hueco para prepararmelo en condiciones con todas las posibilidades que ofrece. Pero la recomiendo, eh!?

El otro día ví la luz con nnatali ya que me descubrió MobilePress, un plugin que detecta los cachivaches móviles y les ofrece un tema diseñado específicamente para que la experiencia de usuario sea mucho más placentera. Además dicho tema ofrece la posiblidad de volver al diseño original en cualquier momento.

Lo he probado y pese a funcionar correctamente, no me cargan las funcionalidades de administración y ahora mismo interpreta Internet Explorer 8 como dispositivo móvil (xD). Mi gozo en un pozo. Además, si lo activas a la vez que el plugin Broken Link Checker debe chupar CPU cosa fina viendo lo lentíiiiisima que me iba la web.

¿Solución? Buscarme otra alternativa. Wordpress Mobile Edition [en] que es igual de sencillote de usar con el añadido de que puedes incluso juguetear con Handset Detection [en].

Actualmente tengo instalado un híbrido raro porque tengo este último plugin enchufado sólo que usando el tema del plugin de MobilePress tuneado a mi gusto para que al menos la usabilidad del sitio en móviles ya no queda en entredicho :)

Por cierto, que otra interesante alternativa puede ser WPtouch tal y como comentan en Kabytes.

Extra: Para algunos dispositivos como la PSP por ejemplo, se hace necesario declarar la codificación de caracteres para que se interpreten los acentos y demás. En el tema de MobilePress no viene por defecto. Ya sabéis, añadir el meta:

http-equiv=”Content-Type” content=”text/html; charset=UTF-8″

:)

Hoy es fiesta aquí pero os voy a dejar un caramelito para los sufridores de otros países y currantes españoles que no hacen puente :D

¿Ya tenéis Windows 7? Particularmente he notado el salto notablemente porque me he saltado la generación Vista y a nivel de experiencia de usuario me parece que la cosa ha evolucionado favorablemente. Esto os lo digo por si os pica el gusanillo y queréis sentaros un rato para ver Designing the Windows 7 Desktop Experience [en].

Luego también podréis echarle un vistazo rápido a la comparativa entre dos modelos de interfaz móvil a la hora de lidiar con aplicaciones: App Interface Models in iPhone and Android [en].

Y para acabar, dos super enlaces de usabilidad que me he guardado para seguir desde hoy: Usability Post [en] y UI Trends [en]. Ambos sacados de 10 UX blogs you should be reading [en].

Me encanta la web de Functioning Form [en]. Siempre hay perlitas relacionadas con la usabilidad en el diseño de interfaces y web y cada vez me gusta más este tema por lo simple que parece ser y las complejidades que conlleva realmente.

Uno de sus últimos regalitos es Web Form Layouts: some additional guidelines [en] desde el que podremos saltar hasta sendos artículos de misma y apasionante temática.

También está llevando a cabo una cobertura-resumen de UX London [en] con artículos del tipo What Makes a Design Seem Intuitive? [en].

Para tenernos entretenidos :)

A día de hoy tengo pendiente la tarea de preparar este blog para que sea visto en condiciones óptimas si se accede a él desde dispositivos móviles. Sorprendido me hallo cada vez que veo accesos desde móviles y PSP’s :O

El caso es que hasta ahora sólo conocía Wordpress Mobile (lo habéis probado?) y hoy he descubierto en este post en Yanko [en] el servicio que ofrece Mobify.

Te registras (nombre y pass nada más) y ya puedes empezar a trastear para armarte una versión móvil de tu página web. Mediante un sistema en el que vas eligiendo lo que quieres mostrar, te vas configurando tu plantilla. Luego puedes meterle mano al CSS directamente, volver a modificar, etc…

Lo he visto muy completito en su versión gratuita. Tiene que haber gato encerrado pero todavía no lo he visto.

:: Mobify [en] ::