Wireframe, Mockup y Prototipo: Diferencias razonables

Cuando hablamos de prototipado tres palabras que seguro se nos vienen a la mente son Wireframe, Mockup y Prototipo. En numerosas ocasiones estas palabras son utilizadas indistintamente pero, ¿son realmente lo mismo?

Progressive Disclosure: Todo a su debido tiempo

Si un camarero viene a tu mesa y te ofrece demasiadas opciones sobre un plato a elegir, ¿no te sientes, generalmente, demasiado sobrepasado por tanta información? De hecho, de vez en cuando, sueles optar por seleccionar la primera de las opciones que el camarero te propone o incluso decides tirar la toalla y escoger el plato más sencillo (el plan C es dejar que alguien decida por tí, opción igualmente respetable y dependiente de la confianza en terceras partes :D). No obstante, en otras ocasiones, por ejemplo, ante tu reciente conversión al vegetarianismo, desearías poder elegir entre más propuestas en el menú que hicieran más fácil el cumplimiento de tu dieta. Este tipo de situaciones, en el contexto del Diseño de la Interacción y de la Experiencia de Usuario, ha supuesto un dilema, y continúa suponiéndolo, para los diseñadores: ¿debo proveer al usuario de todas las opciones posibles de manera que se cubran todas sus posibles necesidades o debo simplemente desplegar las más importantes a fin de no sobrecargarle con demasiada información?

Fig.1. Cuadro de diálogo para la impresión de documentos de Microsoft Word

Una de las técnicas más ampliamente aplicadas y efectivas para hacer frente a este dilema se denomina «Progressive Disclosure» (lo que en castellano podría traducirse como «Divulgación Progresiva»). Un ejemplo clásico y omnipresente de aplicación de esta técnica lo podemos encontrar en el cuadro de diálogo para la impresión de documentos (ver Fig.1). Al ejecutar la opción de impresión de un documento, obtenemos un cuadro de diálogo con un pequeño conjunto de opciones relacionadas con el número de copias a imprimir, las partes del documento a imprimir, o el tamaño de impresión. Este cuadro de diálogo contiene diversos botones que, seleccionados por el usuario, conducen a un conjunto de opciones más avanzadas, las cuáles no suelen ser tan frecuentemente utilizadas. Un ejemplo de ello es la impresión de páginas a doble cara o la definición de la escala de impresión. De esta manera, el sistema establece una «divulgación progresiva» de las opciones de las que dispone el usuario sin a) sobrecargarle con demasiada información y b) privarle de la posibilidad de seleccionar opciones que se adapten a sus necesidades. No obstante, el número de opciones a mostrar al usuario y la priorización de la información dependerán del contexto de uso de la aplicación y de la tarea a soportar. Teniendo en cuenta esto, esta entrada no trata de establecer una receta mágica que nos ayude a crear la solución de diseño ideal ante este tipo de problemas. Por el contrario, simplemente trata de proveer un breve resumen acerca del conocimiento existente sobre esta técnica, presentando algunas de sus definiciones más relevantes, exponiendo los pros y contras de su aplicación e introduciendo conceptos relacionados como el denominado «Progressive Reduction» (en castellano conocido como «Reducción Progresiva»). Pues venga, ¡vamos a ello¡

Card-based design: Pongamos las cartas sobre la mesa

Desde su inclusión dentro del sistema de búsqueda de Google para móviles, allá por el 2012, soy bastante «fan» de Google Now. Aunque ni yo ni nadie lo pedimos, de pronto todos podíamos visualizar en nuestro dispositivo móvil la predicción meteorológica para toda la semana sin mover ni un dedo e incluso conocer, en tiempo real, el resultado de los partidos de fútbol de nuestro equipo favorito (ver Fig.1). Pero no es de la capacidad de recomendación y personalización de este sistema de Google de lo que quiero hablar en esta entrada, sino del patrón de diseño que aplica para presentar la información, el cuál es denominado en inglés como «Card-based design» (en castellano puede ser traducido como «Diseño basado en tarjetas»). Este patrón de diseño puede ser englobado dentro del lenguaje visual lanzado por Google el pasado mes de Junio, Material Design, lenguaje del que ya hablábamos en una entrada anterior del blog.

Fig. 1. Tarjeta ofrecida por Google Now sobre el resultado de un partido de fútbol

¿Y por qué merece la pena hablar de este patrón de diseño si solo lo utiliza Google? Pues porque eso no es del todo cierto. Por el contrario, existen numerosos ejemplos de otros «gigantes» que también lo están aplicando, tales como Twitter, Spotify o Pinterest que lo han elevado a la categoría de patrón de diseño y que lo hacen digno de prestarle un poco de atención. Es más, recientemente ha sido caracterizado por la reputada revista UX Magazine como una de las principales tendencias de diseño para dispositivos móviles y pantallas de dimensiones reducidas del año 2015. Pero, ¿y qué se entiende realmente por tarjeta en este contexto? ¿Y cómo utilizarlas y por qué? He aquí el quid de la cuestión. Antes de aplicar un patrón de diseño, primero se debe conocer el problema que resuelve y sus características básicas a fin de discernir si realmente aplica a nuestro caso. Teniendo en cuenta esto, esta entrada trata de arrojar un poco más de luz sobre el «Diseño basado en tarjetas» estableciendo sus características básicas y mostrando algunos buenos ejemplos de su utilización. Pues venga, ¡vamos a ello!

Visualización centrada en el humano: ¿Cómo llevarla a cabo?

La «Visualización centrada en el humano» (denominada en inglés como«Human-centered Visualization») puede ser caracterizada como el punto de encuentro entre dos disciplinas distintas aunque complementarias: la «Interacción Persona-Ordenador»(denominada en inglés como «Human-computer Interaction») y la «Visualización de la información» (referida en inglés como «Information Visualization»). La primera tiene como objetivo mejorar el diálogo entre el ser humano y la máquina, a fin de adaptarlo mejor a las necesidades del primero. El propósito de la segunda es el de ayudar a mejorar el entendimiento que el ser humano tiene sobre un conjunto de datos. Ambas disciplinas parecen, por tanto, confluir en su interés por mejorar nuestras vidas y amplificar nuestro conocimiento sobre las cosas. No obstante, ¿es que acaso diseñar una visualización que no esté centrada en el ser humano puede tener algún sentido? O dicho de otra manera, ¿por qué utilizar un concepto distinto para referirnos a una característica ya inherente a la razón de ser de una visualización?

¿Tener al ser humano como eje central de la visualización? Fuente: http://www.christianvatter.com/wordpress/wp-content/uploads/2012/07/Human-Centered.jpg

Tal y como exponen diversos investigadores de la Universidad de Texas y del centro espacial Lyndon B.Johnson, al utilizar el concepto de «Visualización centrada en el humano» se busca diferenciar  la perspectiva clásica del diseño de la visualización de la información, que considera las necesidades del ser humano únicamente a nivel de representación (esto se explicará más adelante en el post), de una perspectiva de diseño de la visualización más reciente, la cuál defiende tener en cuenta las necesidades del ser humano a lo largo de todas las fases del proceso de diseño. Pero, ¿y cómo se crea una visualización sin olvidarme del ser humano en ningún momento? He aquí el quid de la cuestión. En este post se van a analizar algunas de las implicaciones relacionadas con este enfoque de diseño de la visualización. En concreto, se revisarán dos marcos de trabajo existentes que arrojan un poco de luz sobre dicho enfoque. Pues venga, ¡vamos a ello!

Provocative questions y picture stimulation: dos técnicas de Design Thinking para fomentar la creatividad

Si estás leyendo este post seguramente sepas que el proceso de Design Thinking recopila teorías y buenas prácticas para fomentar la creatividad y la innovación en los procesos de grupo. Uno de los puntos clave en este proceso es que los investigadores deben ofrecer a los miembros del grupo experiencias que les permitan facilitar la expresión de su creatividad en todos los niveles. Igualmente, el conocimiento experto de los diseñadores se debe utilizar para la creación de nuevas herramientas y métodos que permitan a las personas expresarse creativamente. En este post se establecen muy brevemente los principios básicos de la resolución creativa de problemas y se repasan dos técnicas que servirán para sacar las ideas más locas de un grupo de trabajo. Si ya te has enganchado a este artículo, ¡Sigue leyendo!

¿Infografía o Visualización de Datos?

Lo llevamos observando un tiempo. Están en todas partes y han venido para quedarse: las representaciones gráficas de información inundan Internet. Son utilizadas para comunicar de manera visual todo tipo de información, desde la evolución del ébola en el continente africano hasta las 100 frases más celebres del cine. Las hay más o menos intuitivas, más o menos sofisticadas y más o menos interactivas. A veces son referidas con un sinfín de nombres entre los que se encuentran el de infografía, visualización de datos, visualización de información… Pero, ¿existe una diferencia entre ellas? O quizás una pregunta aún más importante, ¿es importante su distinción?

Como podrás intuir y de ahí el sentido de esta entrada, en efecto, no son lo mismo. De hecho, existe un intenso debate sobre esta diferenciación. En particular, sobre la diferencia entre infografía y visualización de datos. En mi opinión, podría decir que, aunque a ambos les une un objetivo final común, las implicaciones de su proceso de creación distan mucho de ser similares. Tener procesos de creación diferentes puede implicar la necesidad de poseer no solo habilidades de diseño sino también de programación de aplicaciones, conocimientos sobre estadística, etc. Sin embargo, para sustentar estas ideas, me gustaría exponer en esta entrada algunas de las  perspectivas más apoyadas acerca de esta distinción. Es más, tomando como referencia estas perspectivas también podemos obtener una primera aproximación de qué cuestiones son claves a la hora de abordar la creación de estas representaciones. Pues venga, ¡vamos a ello!

¿Infografía o visualización de información? Fuente: EL PAIS http://elpais.com/elpais/2014/09/12/media/1410553413_482197.html

Material Design, el nuevo lenguaje de diseño de Google

El pasado mes de junio se celebró el congreso Google I/O, donde se presentaron numerosas novedades relativas, sobre todo, al futuro de Android y la web, según Google. Una de las más destacadas fue la salida a la luz de material design, donde Google se aleja de sus anteriores líneas de diseño para crear este “lenguaje visual para los usuarios que sintetiza los principios clásicos del buen diseño con la innovación y las posibilidades de la tecnología y la ciencia”, según las propias palabras de Google. Pretende servir de guía para crear una experiencia de usuario unificada a través de distintas plataformas y tamaños de dispositivos. Por una parte, se tienen en cuenta los principios del diseño móvil, pero también dedican parte de las líneas de diseño al ratón, el teclado, los gestos y la voz como métodos de entrada usuales.

Desde su salida a la luz, no han parado de crecer las entradas en la red dedicadas a la nueva iniciativa de Google. Tanto ha sido el revuelo, que cada nueva aplicación que incorpora las nuevas líneas de diseño, se gana un puesto especial en los blogs del área. Parece que el trabajo de Google se ha visto recompensando, porque este mes de septiembre los User Experience Awards 2014 han reconocido a Material Design como la mejor contribución a la experiencia de usuario. En este post voy a revisar algunos de los principios básicos y propuestas que han permitido este reconocimiento. Pues bien, ¡empecemos!