Sample Form

Este modelo permite entender mejor los distintos tipos de diseño, y las diferencias de enfoque entre éstos.

El Diseño resulta del encuentro de estas funciones en mayor o menor proporción. Si sólo están presentes una o dos funciones, no es una pieza de diseño.

Información, Presentación y Uso dentro del modelo

Un caso de Información pura, sin presentación ni uso, es el de datos en crudo. Por ejemplo, las series numéricas que forman el cuarteto de Anscombe:

( 10.0/8.04; 8.0/6.95; 13.0/7.58; 9.0/8.81; 11.0/8.33; 14.0/9.96; 6.0/7.24; 4.0/4.26; 12.0/10.84; 7.0/4.82; 5.0/5.68 ), ( 10.0/9.14; 8.0/8.14; 13.0/8.74; 9.0/8.77; 11.0/9.26; 14.0/8.10; 6.0/6.13; 4.0/3.10; 12.0/9.13; 7.0/7.26; 5.0/4.74 ), ( 10.0/7.46; 8.0/6.77; 13.0/12.74; 9.0/7.11; 11.0/7.81; 14.0/8.84; 6.0/6.08; 4.0/5.39; 12.0/8.15; 7.0/6.42; 5.0/5.73 ), ( 8.0/6.58; 8.0/5.76; 8.0/7.71; 8.0/8.84; 8.0/8.47; 8.0/7.04; 8.0/5.25; 19.0/12.50; 8.0/5.56; 8.0/7.91; 8.0/6.89 )

La Presentación refiere a la expresión propia de la pieza. En estado puro, sin transmisión de información ni permitir el uso, resulta en figuras, colores y movimiento que provocan una experiencia estética.

El Uso refiere a la posibilidad de interpretación y expresión que la pieza permite a quien accede a ella. Un caso de uso puro, sin transmisión de información ni expresión propia de la pieza, es un papel en blanco.

Agregando funciones, paso a paso

La presentación del artículo de Wikipedia de los datos del cuarteto de Anscombe, incrementa principalmente la función Uso. La Presentación, en menor medida, se revela en la decisión de la disposición de la información, de entre las muchas posibles, para permitir cierta lectura de los datos:

Y la presentación visual de esta información, incrementa la función Presentación, ofreciendo conclusiones a quien accede a esta presentación:

La relación y oposición entre funciones

Las variables fundamentales en una pieza de diseño, tales como color y espacio, son limitadas. El modelo permite entender que al aumentar una función en una pieza, necesariamente estamos reduciendo la incidencia de las otras dos.

La Presentación es la función más comúnmente asociada al diseño, probablemente por estar ausente en piezas “no diseñadas”. Desde esa persepectiva, es común que muchas piezas en las que deberían primar las funciones Información o Uso, sufran por la aplicación de enfoques esteticistas.

Como resultado, la estética termina atentando sobre la función, o simplemente la anula. En el siguiente “calendario”, resulta sumamente difícil saber en qué día cae el tercer miércoles del mes:

Lo mismo sucede al tratar de hacer más “divertido” o “dinámico” un sitio web. La mayor expresión del diseñador o del comitente, resulta siempre en importantes perjuicios a la usabilidad. Ello puede evitarse conociendo el carácter del medio, las decisiones de diseño apropiadas, y los verdaderos intereses, modelos mentales y de decisión de los usuarios.

Santiago Bustelo

El jurado, compuesto por Santiago Bustelo (icograma), Diego Pimentel (UBA), Arq. Ricardo Méndez (UADE), Eugenia Casabona (UBA), Anabella Rondina (GCBA), Nury Verdura (Educación IT) y Gastón Silberman (decada4), seleccionará el equipo ganador que participarán de la final mundial en Limoges, Francia, el 3, 4 y 5 de junio.

Más información y pre-inscripción: wif-argentina.com.ar

La responsable del proyecto ha sido Verónica Traynor, head de usabilidad en GBCBA. A continuación, citamos su post en el cual detalla el checklist en su totalidad:

Con el fin de que nuestros Sitios sean perceptibles, comprensibles, compatibles y operables generamos este listado de verificación para maquetadores (para seguir revisando!) basado en las Directrices de Accesibilidad del Contenido Web 2.0.

• HTML Y CSS

1. 1. ¿Las etiquetas utilizadas son sintácticamente correctas?
   2. ¿Están íntegramente independizados los estilos a través de CSS?
   3. ¿Se usan unidades relativas (% y em) en todos los casos en lugar de absolutas (px)?
   4. ¿Se han definido las fuentes en una unidad de medida relativa(em)?
   5. En caso de aumentar la fuente predeterminada del navegador a 26 px (en lugar de 16px como está establecida), se agrandan los textos sin desarmarse el diseño?
   6. ¿El uso de tablas se restringe a la tabulación de datos y no para diagramar el contenido del Sitio Web?
   7. ¿Se puede navegar el Sitio íntegramente a través de un teclado?
   8. Se pueden navegar a través de un teclado los objetos incrustados (Ejemplo reproductor de audio)?

• Compatibilidad con Navegadores

1. 1. ¿El Sitio es compatible con el navegador Internet Explorer 6?
   2. ¿El Sitio es compatible con el navegador Internet Explorer 7?
   3. ¿El Sitio es compatible con el navegador Internet Explorer 8?
   4. ¿El Sitio es compatible con el navegador Mozilla Firefox?
   5. ¿El Sitio es compatible con el navegador Safari?
   6. ¿El sitio es compatible con un lector de pantalla como JAWS o NVDA?

• Identificación del lenguaje:

1. 1. El lenguaje está identificado de esta forma: <HTML lang=”es”>
   2. Las abreviaturas se encuentran señaladas con el atributo <abbr>? (Ejemplo “Alte”: <abbr title=”Almirante”>Alte.</abbr>)
   3. Las abreviaturas se encuentran restringida a las definidas por la Real Academia Española (Evitando por ejemplo “ascend.” para decir “ascendente”)
   4. ¿Los acrónimos se encuentran señalados con el atributo <acronym>? Ejemplo: “GCBA”: <acronym title=”Gobierno de la Ciudad de Buenos Aires”> GCBA </acronym>)
   5. ¿Las etiquetas <abbr> y <acronym> han sido utilizadas exclusivamente para su función y no para mostrar como “tooltip” información adicional de otra naturaleza? (Ejemplo de mala práctica: <acronym title=”Founded in 2006″>  Twitter </acronym>)

• Imágenes y animaciones:

1. 1. ¿Todas las imágenes y animaciones cuentan con un texto alternativo?
   2. ¿Los textos alternativos representan una alternativa válida para transmitir la misma información que comunica el formato no textual? (NOTA: Quien elabore el contenido debe proveer el texto alternativo para las imágenes informativas, de forma que el programador pueda incluirlas.)
   3. Ejemplos:El texto alternativo de un banner debe incluir la descripción de los objetos y/o textos que figuren en la imagen. No debe decir “banner”.El texto alternativo de una flecha (botón) debe decir “siguiente” o “volver”. No debe decir “flecha”.
   4. ¿Todas las animaciones pueden ser controladas (pausadas) por el usuario?

• Multimedia:

1. 1. ¿Los audiovisuales o archivos de audio se encuentran subtitulados o incluyen el texto en un archivo tipo HTML u opciones Word o PDF accesible?
   2. ¿La voz principal se distingue con facilidad del sonido ambiente?

• PDF:

1. 1. ¿Los documentos PDF pueden ser interpretados por un lector de pantallas para no videntes?(Validar con un lector de pantallas Ejemplo NVDA )
   2. Las imágenes del PDF, ¿cuentan con un texto alternativo?
   3. Si un documento PDF no fuera accesible, ¿existe una versión alternativa accesible en Word o HTML?
   4. ¿El enlace se encuentra acompañado con el ícono de Adobe PDF para indica claramente su formato?
   5. ¿El PDF abre en una nueva ventana?

• Formularios: Carteles de error:

1. 1. ¿Evitan el lenguaje técnico y abreviaturas, utilizando un lenguaje claro y comprensible?
   2. ¿Hacer una descripción exacta del problema, en lugar de utilizar mensajes vagos y genéricos como “error de sintaxis”?
   3. ¿Señalan claramente el campo en cuestión (no basándose sólo en el color, sino, acompañándolo también de un icono)?

• Enlaces

1. 1. ¿Se encuentran todas las rutas verificadas de tal modo que ninguna lleve a una ruta equivocada o inexistente?
   2. ¿Es navegable el Sitio con JavaScript desactivado?

• Validadores:

1. 1. W3C
   2. SIDAR
   3. Accesibilidad.com
   4. Lector de Pantallas NVDA

Este movimiento dio por resultado la posibilidad de trabajar con nuevos desafíos, los cuales implicaron procesos de investigación y cuyo resultado se cristalizó en el prototipado y construcción de aplicaciones complejas.

Los desafíos

Los proyectos encarados implicaron -entre otros- el rediseño total de una plataforma de evaluación de desempeño hasta el revamping de la dinámica de una red social privada.

Asimismo, el Banco Santander (o Santander-Río, como es conocido por estos lares) nos convocó para generar “from scratch” el concepto para dos herramientas 2.0: los sistemas de Gestión del Conocimiento y de Perfiles de Empleados. En ambos casos trabajamos codo a codo con los responsables de los proyectos, generando varios focus groups donde pusimos a prueba las hipótesis generadas en base a nuestros estudios previos sobre los comportamientos que la organización buscaba de sus empleados.

El equipo de Officenet nos solicitó a mediados de año que los acompañáramos en su camino de permanente innovación. Para este momento, hemos trabajado en la usabilidad a nivel general, y ahora nos encontramos en el proceso de implementación de un nuevo sistema de búsqueda, donde la relevancia en el orden de los listados esta dada por un complejo algoritmo customizado especialmente para los tipos de producto y clientes de esta empresa.

Continuamos con nuestro trabajo en Bumeran, generando un sistema más transparente de postulaciones y lanzando el servicio de comercio electrónico para las empresas que buscan talento por medio de su plataforma. El foco de las intervenciones estuvo puesto en modelar y diseñar la experiencia de los usuarios.

La metodología

Este trabajo con clientes fue acompañado con un gran crecimiento “puertas adentro” de nuestra estructura, definiendo una cultura propia, con la innovación como eje principal; estudiamos varias metodologías, las pusimos a prueba en los proyectos encarados y logramos resultados en tiempo y forma.

Tomamos nuevas pautas de trabajo, derivando y adaptando los principios aprendidos de metodologías ágiles como Scrum. Esto dio por resultado la creación de un proceso de diseño y desarrollo único, que nos permite conocer los requerimientos de los clientes y probar hipótesis con los usuarios, para terminar con la construcción de esas soluciones integrales.

En este mismo sentido, nos propusimos generar una nueva forma de documentar nuestros procesos de diseño de la interacción para aplicaciones complejas (a las que llamamos también “aplicaciones orgánicas”). En este momento nos encontramos en las iteraciones finales de esta nueva forma de documentación, que nos permitirá comunicar a los actores involucrados el comportamiento de la aplicación en la interacción con los usuarios de una manera clara y concisa.

Propagar el conocimiento

Nuestro compromiso con la difusión de la disciplina nos llevó a fundar y liderar el branch argentino de la Asociación de Diseño de Interacción (IxDA), donde a lo largo del año hemos generado eventos de capacitación, networking y awareness junto con un genial equipo de referentes en el área.

Este año, continuaremos el trabajo para lograr una definición madura y concreta del campo profesional junto con los grupos de Brasil, y en apoyar e iniciar proyectos educativos propios. A partir de marzo también retomaremos el trabajo de “evangelismo” que iniciamos el año pasado con presentaciones en la UP, Microsoft y PalermoValley.

Asimismo estaremos duplicando esta apuesta educativa para 2010, afianzando nuestro joint venture con Corvalius (nombrado “Keikendo“) donde nos encargaremos de la capacitación de equipos de desarrollo en diseño de experiencias, una nueva forma de pensar al diseño de productos digitales que será la ventaja competitiva más grande con la que los software factories puedan contar.

En síntesis, este año que comienza será uno de grandes aprendizajes y nuevas experiencias, donde seguiremos transitando esta excelente aventura del conocimiento!

Gracias a todos los que nos acompañaron =)

Mariano A. Goren
Project Management & New Business Development

En el evento WPF Jutsu!, el equipo explorará WPF aportando mejores modelos y prácticas que optimicen el aprovechamiento de esta tecnología, buscando mejorar tanto la inversión como los tiempos insumidos en desarrollo y los recursos involucrados en el proceso.

La jornada tendrá un enfoque teórico y práctico: Se trabajará sobre una aplicación de ejemplo, cuyo código fuente se ofrecerá  a los asistentes. Asimismo, obtendrán una autoevaluación que permitirá a los equipos mejorar su trabajo diario y conocer mejor su organización.

Temario:

• ¿Qué es diseñar una experiencia?
• ¿En qué se fundamenta el Diseño de Interacción?
• ¿Por qué WPF?
• ¿Cómo incorporar el diseño de interacción en el proceso de desarrollo de software?

Audiencia:

Gerentes de Tecnología, Project Managers, Arquitectos, Diseñadores de Interacción, Desarrolladores.

Reservar un lugar »

Lunes, 16 de noviembre de 2009 06:30 p.m.
Microsoft de Argentina - Bouchard 710, 4 piso - Buenos Aires

Aditionally, it uses JQuery Form Validation And Hints Plugin to validate user input.

Download

INSTALLATION
1. Upload the plugin to the wp-content/plugins folder in your WordPress directory online.
2. Activate the Plugin in your Administration Panels.
3. Create a new Post or Page and complete the content area with the shortcode [quickform mailto="mymail {at} example(.)com"] specifying the email where you want to receive the messages.

ISSUES
WP Version
Requires WordPress 2.5 or higher.

JQuery Conflicts
This plugin includes the Mootools JavaScript library. If you are using JQuery in your website please read the following article: Using JQuery with Other Libraries.

El día jueves 5 de noviembre a las 1830 hs. nos estaremos dando cita nuevamente en el auditorio principal de Microsoft, donde trataremos temas relacionados con prototipado y wireframes desde la perspectiva del diseño de interacción.

En esta oportunidad, continuamos profundizando en la temática de las capacitaciones y haciendo hincapié en las destrezas útiles para el diseño web.

Para esta ocasión, Santiago Bustelo estará realizando la introducción a estos tópicos, siendo los oradores principales Luis Allona, Manuel Razzari (de Con Vista al Mar) y Daniel Priego García (de Microsoft/PGComs).

Dado que los cupos son limitados, se recomienda reservar una vacante con anticipación en http://ow.ly/wUHg

Nos vemos allá!

Mariano A. Goren

Download

INSTALLATION
1. Upload the plugin to the wp-content/plugins folder in your WordPress directory online.
2. Activate the Plugin in your Administration Panel.
3. Create a gallery by wrapping a set of images in a post with the tags [slightbox ] [/slightbox ].

ISSUES
Maintenance
This plugin is open-source. We published and released it so everyone can use and modify it. We will not be maintaining or traicing it, and there are no improvements planned for the moment.

JQuery Conflicts
This plugin includes the Mootools JavaScript library. If you are using JQuery in your website please read the following article: Using JQuery with Other Libraries.