{"id":2100,"date":"2017-10-27T19:26:29","date_gmt":"2017-10-28T00:26:29","guid":{"rendered":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/?p=2100"},"modified":"2019-11-05T15:53:45","modified_gmt":"2019-11-05T21:53:45","slug":"del-wireframing-estatico-al-wireframing-interactivo","status":"publish","type":"post","link":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/del-wireframing-estatico-al-wireframing-interactivo\/","title":{"rendered":"Del wireframing est\u00e1tico al wireframing interactivo"},"content":{"rendered":"

En el presente art\u00edculo se describe el proceso del\u00a0wireframing<\/em>\u00a0orientado a la integraci\u00f3n de interactividad; se revisa el concepto de\u00a0wireframe<\/em>\u00a0y se exponen sus caracter\u00edsticas, luego se contextualiza y diferencian los t\u00e9rminos de \u201caffordances\u201d y \u201csignificantes\u201d<\/span>1<\/sup><\/a><\/span>. Asimismo, se comenta el rol de las anotaciones en dichos bocetos como factores permisivos de interactividad y se explica c\u00f3mo incluirlos con la aplicaci\u00f3n Web\u00a0MockFlow. Tambi\u00e9n se explica c\u00f3mo se forma el lenguaje interactivo entre los usuarios y los elementos de contenido interactivos, que se representan en un\u00a0wireframe.\u00a0<\/em><\/p>\n

Palabras clave<\/b>\u00a0<\/span><\/p>\n

Interfaz gr\u00e1fica,\u00a0wireframe, interactividad,\u00a0affordance, significante.\u00a0<\/span><\/p>\n

Abstract\u00a0<\/span><\/strong><\/p>\n

This\u00a0article\u00a0describes\u00a0the\u00a0wireframing\u00a0process\u00a0oriented\u00a0to\u00a0the\u00a0integration\u00a0of\u00a0interactivity.\u00a0Therefore,\u00a0the\u00a0concept of\u00a0wireframe\u00a0is\u00a0reviewed\u00a0and\u00a0its\u00a0characteristics\u00a0are\u00a0exposed.\u00a0Then\u00a0the\u00a0terms\u00a0\u00abaffordances\u00bb and \u00absignifiers\u00bb are\u00a0contextualized\u00a0and\u00a0differentiated.\u00a0It\u00a0also\u00a0discusses\u00a0the\u00a0role of\u00a0annotations\u00a0in\u00a0such\u00a0schemes\u00a0as\u00a0permissive\u00a0interactivity\u00a0factors, and\u00a0briefly\u00a0exemplifies\u00a0how\u00a0to\u00a0include\u00a0them\u00a0with\u00a0the\u00a0MockFlow\u00a0Web\u00a0application.\u00a0<\/span><\/p>\n

It\u00a0also\u00a0explains\u00a0how\u00a0the\u00a0interactive\u00a0language\u00a0is\u00a0formed\u00a0between\u00a0users\u00a0and\u00a0interactive\u00a0content\u00a0elements\u00a0that\u00a0are\u00a0represented\u00a0in a\u00a0wireframe.\u00a0<\/span><\/p>\n

Thus,\u00a0this\u00a0work\u00a0seeks\u00a0that\u00a0a \u00abnon-designer\u00a0individual\u00bb\u00a0understands\u00a0the\u00a0importance\u00a0and\u00a0transcendence\u00a0of\u00a0the\u00a0development\u00a0of\u00a0static\u00a0and\u00a0interactive\u00a0wireframes.\u00a0<\/span><\/p>\n

Keywords\u00a0<\/span><\/strong><\/p>\n

Graphical\u00a0interface,\u00a0wireframe,\u00a0interactivity,\u00a0affordance,\u00a0signifier.\u00a0<\/span><\/p>\n

PDF<\/a><\/p>\n

<\/p>\n

Introducci\u00f3n<\/span><\/strong><\/p>\n

En la actualidad, crear p\u00e1ginas y sitios Web puede parecer una actividad sencilla de realizar, sin embargo, esto resulta ser un proceso complejo que implica principalmente la integraci\u00f3n de dos disciplinas, el dise\u00f1o Web y el desarrollo Web. A partir de lo anterior, se debe tener claro que hablar de dise\u00f1o Web implica referirse a todos aquellos aspectos sobre el tratamiento y presentaci\u00f3n visual de los contenidos en pantalla, lo cual demanda conocer fundamentos de dise\u00f1o. En cambio, el desarrollo Web es hacer alusi\u00f3n a la responsabilidad de dar funcionalidad a las p\u00e1ginas Web, mediante el empleo de diversos lenguajes de programaci\u00f3n.<\/p>\n

Dado que en el dise\u00f1o y en el desarrollo Web se requiere aplicar distintas habilidades, es posible asumir que el enfoque de trabajo de estas difiere por completo. No obstante, si bien ambos campos sugieren perfiles profesionales especializados en dise\u00f1o y programaci\u00f3n, la anterior concepci\u00f3n no determina la capacidad de una persona para adquirir los conocimientos y destrezas antes se\u00f1aladas.<\/p>\n

La l\u00f3gica de esta argumentaci\u00f3n abre paso al siguiente cuestionamiento: \u00bfqu\u00e9 aspectos debe considerar un desarrollador para elaborar los wireframes<\/em> de interfaces gr\u00e1ficas, que sean esquemas interactivos apoyados en la representaci\u00f3n gr\u00e1fica de elementos de contenido y el significado que estos sugieren? Visto desde el punto de vista de un \u201cno dise\u00f1ador\u201d, resulta de gran importancia dar respuesta a esta pregunta, y es por ello que en este art\u00edculo, como referente principal se cita el diagrama del proceso de dise\u00f1o de interfaces graficas de usuario propuesto en la tesis Principios y elementos de dise\u00f1o para la elaboraci\u00f3n y presentaci\u00f3n de un manual para no dise\u00f1adores como herramienta de apoyo en el proceso de dise\u00f1o de interfaces gr\u00e1ficas de usuario<\/em><\/span>2<\/sup><\/a><\/span>.<\/p>\n

\"Imagen<\/a>

Imagen 1. Esquema del Proceso del dise\u00f1o de interfaces gr\u00e1ficas de usuario. (Hern\u00e1ndez, 113)<\/p><\/div>\n

En este esquema se observa de manera general que el proceso de dise\u00f1o de interfaces gr\u00e1ficas de usuarios debe desarrollarse en dos etapas, la maquetaci\u00f3n y el dise\u00f1o visual. En raz\u00f3n de lo anterior, durante la primera fase se tiene que los tres bocetos a elaborar para planear la estructura de una p\u00e1gina Web son el layout<\/em>, la ret\u00edcula y el wireframe<\/em>. Mientras tanto, la segunda etapa indica que los principales elementos de dise\u00f1o a tener en cuenta son la tipograf\u00eda, el color, el c\u00f3digo iconogr\u00e1fico e im\u00e1genes.<\/p>\n

Al analizar el diagrama, se interpreta que de ambas etapas, la elaboraci\u00f3n de wireframes<\/em>, la tipograf\u00eda y el color son los aspectos clave de dicho proceso, por tanto, debe considerarse a \u00e9stos como puntos focales para dise\u00f1ar interfaces gr\u00e1ficas. Asimismo, de acuerdo con las pautas que cada uno engloba, se asume que el objetivo a cumplir con el wireframe<\/em> es representar estructuras y contenidos, mientras que en la tipograf\u00eda es el configurar textos legibles, y en el caso del color, es implementar paletas de colores en buenas combinaciones y contrastes.<\/p>\n

En consideraci\u00f3n de que, lo previamente descrito son los aspectos esenciales y b\u00e1sicos que un \u201cno dise\u00f1ador\u201d debe conocer y comprender para crear interfaces gr\u00e1ficas visualmente funcionales, en este art\u00edculo se pretende dar \u00e9nfasis al proceso del wireframing<\/em>. El tema de inter\u00e9s se enfoca en como dotar de interactividad a los wireframes<\/em>, de modo que, adem\u00e1s de ser est\u00e1ticos, tambi\u00e9n se conviertan en gr\u00e1ficos interactivos que permitan describir y documentar las posibles interacciones entre los usuarios y los elementos de contenido de una interfaz.<\/p>\n

Si bien los wireframes<\/em> tienen como prop\u00f3sito mostrar una panor\u00e1mica general de la estructuraci\u00f3n, organizaci\u00f3n y disposici\u00f3n de los contenidos en un interfaz, surge la inquietud de saber c\u00f3mo mediante ellos es posible representar la interacci\u00f3n al ser esquemas planos. Con el fin explicar de manera convincente a los \u201cno dise\u00f1adores\u201d como lograr dicho objetivo, en este trabajo, inicialmente se define que es un wireframe<\/em> y se mencionan las caracter\u00edsticas de los wireframes<\/em> de baja, media y alta fidelidad. Enseguida, se expone c\u00f3mo se forma el lenguaje interactivo entre los usuarios y los elementos de contenido simples e interactivos.<\/p>\n

Posteriormente, se introduce el t\u00e9rmino \u201csignificantes\u201d en pro de identificar y nombrar los elementos de contenido interactivos posibles a representar en un wireframe<\/em>, aunque cabe aclarar que para contextualizar esta palabra, antes se define el concepto de affordance<\/em> y por \u00faltimo, se hace una breve menci\u00f3n de la trascendencia de las anotaciones como recursos descriptivos de funcionalidades y eventos de los elementos interactivos.<\/p>\n

    \n
  1. 1. El wireframe como esquema est\u00e1tico<\/span><\/strong><\/li>\n<\/ol>\n

    Dentro del proceso de dise\u00f1o de interfaces gr\u00e1ficas de usuario, una etapa fundamental es llevar a cabo la maquetaci\u00f3n de las p\u00e1ginas Web, es decir, primeramente se debe definir la estructura y el orden del contenido. Para lograr dicho cometido se puede recurrir a la elaboraci\u00f3n de esquemas como ret\u00edculas<\/span>3<\/sup><\/a><\/span>, layouts<\/span>4<\/sup><\/a><\/span><\/em>\u00a0y wireframes<\/em>; sin embargo, de los tres, el tercero puede resultar m\u00e1s efectivo como gu\u00eda visual si, adem\u00e1s de querer tener una panor\u00e1mica m\u00e1s detallada de la organizaci\u00f3n del contenido, tambi\u00e9n se pretende tener una aproximaci\u00f3n realista de c\u00f3mo ser\u00e1 el dise\u00f1o de una interfaz.<\/p>\n

    Para continuar, se cita a Peter Morville y Louis Rosenfeld, quienes en su libro Information Architecture for the World Wide Web<\/em> describen el rol \u00a0de los wireframes<\/em> de la siguiente manera:<\/p>\n

    \u00a0… representan c\u00f3mo una p\u00e1gina individual o plantilla debe lucir desde una perspectiva arquitect\u00f3nica. Los wireframes est\u00e1n situados en la intersecci\u00f3n de la arquitectura de informaci\u00f3n del sitio y su dise\u00f1o visual y de informaci\u00f3n. […]<\/p>\n

    Los wireframes describen el contenido y la arquitectura de la informaci\u00f3n que se incluir\u00e1n en los espacios bidimensionales relativamente limitados conocidos como p\u00e1ginas. Por lo tanto, los mismos wireframes deben ser limitados en tama\u00f1o. Estas restricciones obligan al arquitecto de informaci\u00f3n a tomar decisiones sobre qu\u00e9 componentes de la arquitectura deben ser visibles y accesibles para los usuarios. Despu\u00e9s de todo, si los<\/p>\n

    componentes arquitect\u00f3nicos absorben demasiada pantalla, no habr\u00e1 espacio para el contenido real! (Morville & Louis Rosenfeld, 307).<\/span>5<\/sup><\/a><\/span><\/p><\/blockquote>\n

    De lo anterior, se debe entender que los wireframes<\/em> son diagramas planos en los cuales es posible plasmar tanto la arquitectura de informaci\u00f3n como el dise\u00f1o visual de las p\u00e1ginas, es decir, con ellos se tiene la facultad de jerarquizar y representar de manera moderada y gen\u00e9rica, el contenido y los elementos de dise\u00f1o que estar\u00e1n presentes en las p\u00e1ginas y que ser\u00e1n visualizados por los usuario<\/p>\n

    \"Imagen

    Imagen 2. Ejemplo de wireframe.<\/p><\/div>\n

    Por otra parte, Morville y Rosenfeld precisan que de acuerdo al prop\u00f3sito para el cual se requieren, los wireframes<\/em> pueden categorizarse en los siguientes niveles de variaci\u00f3n: low-fidelity<\/em> o de baja fidelidad, medium-<\/em>fidelity <\/em>o de media fidelidad, y high-fidelity <\/em>o alta fidelidad.<\/span>6<\/sup><\/a><\/span>\u00a0A este respecto, los autores explican que la diferencia entre estos se basa en la cantidad de contenido y elementos de dise\u00f1o que se incorporan. Por ejemplo, en wireframes<\/em> de baja fidelidad \u00ab… no hay elementos gr\u00e1ficos y no hay contenido real.\u00bb (Morville & Rosenfeld, 310-312) Es decir, no debe haber elementos como texto, im\u00e1genes o color (ver Imagen 2); sin embargo, en el caso de un wireframe<\/em> de media fidelidad es posible incluirlos en m\u00ednima cantidad. Mientras que en los de alta fidelidad ya se pueden tener en mayor volumen, hasta conseguir la apariencia final o aproximada de c\u00f3mo se ver\u00e1 una p\u00e1gina.<\/p>\n

    Hasta este punto, puede considerarse que independientemente del nivel de fidelidad de elaboraci\u00f3n de un wireframe<\/em>, siempre se debe tener en cuenta que la prioridad que conceden estos esquemas, es el representar de manera clara la estructura y el contenido de las p\u00e1ginas Web. Por tanto, agregar elementos de dise\u00f1o como tipograf\u00edas, colores o im\u00e1genes son aspectos a considerar dependiendo del grado de detalle al que se quiera llegar.<\/p>\n

      \n
    1. 2. El lenguaje interactivo de los elementos de contenido<\/span><\/strong><\/li>\n<\/ol>\n

      En vista de que ya se defini\u00f3 que es un wireframe<\/em> y se explic\u00f3 su finalidad como un esquema est\u00e1tico, en este apartado se retoma el mismo t\u00e9rmino, pero ahora se revisa bajo un enfoque interactivo. Es decir, a continuaci\u00f3n se explica c\u00f3mo lograr que dichos esquemas tambi\u00e9n sean din\u00e1micos trav\u00e9s de sus elementos de contenido. Para ello, se toma como referente a Dan Brown, quien en el cap\u00edtulo siete de su libro Comunicating Design<\/em> habla sobre los wireframes<\/em> y, desde una perspectiva funcional e interactiva los define de la siguiente manera:<\/p>\n

      Los wireframes son diagramas basados \u200b\u200ben la idea simple de que puedes describir mejor las interacciones de los productos basados \u200b\u200ben la pantalla mediante la eliminaci\u00f3n de cualquier aspecto del dise\u00f1o incidental a su comportamiento. Un wireframe es, aparentemente, una vista simplificada de una pantalla, desprovista de cualquier est\u00e9tica m\u00e1s all\u00e1 del m\u00ednimo y el m\u00e1s neutro. El objetivo es centrar la atenci\u00f3n del equipo y fomentar la conversaci\u00f3n sobre lo que hace una pantalla, no lo que parece.<\/strong> Esa es la teor\u00eda, de todos modos<\/span>7<\/sup><\/a><\/span>\u00a0(Brown, 168).<\/p><\/blockquote>\n

      Para Brown, adem\u00e1s de ser esquemas que representan el aspecto de las p\u00e1ginas, los wireframes <\/em>tambi\u00e9n tienen la capacidad de revelar la vinculaci\u00f3n entre ellas y describir las acciones que se pueden llevar a cabo y, por ende, determinar comportamientos y establecer interacciones entre las p\u00e1ginas y los usuarios.<\/p>\n

      En cuanto a lo anterior, Brown manifiesta que en un wireframe<\/em> la interacci\u00f3n nace a partir de representar en \u00e9l cualquier tipo de contenido que proporcione alg\u00fan tipo de informaci\u00f3n, o bien, al emplear elementos que invoquen comportamientos y funcionalidades que permitan realizar ciertas acciones con ellos. En apoyo de este argumento, el autor plantea lo siguiente:<\/p>\n

      Puedes utilizar el color para ilustrar el prop\u00f3sito de tipos espec\u00edficos de texto, espec\u00edficamente mensajes de error. Normalmente, esta informaci\u00f3n se resalta con rojo, un color eficaz para llamar la atenci\u00f3n del usuario hacia algo importante.<\/p>\n

      (El rojo, ciertamente en la cultura occidental, ha venido a evocar el \u00abpeligro\u00bb.) Ten en cuenta que este color no est\u00e1 destinado a ser portado directamente en los dise\u00f1os finales-no est\u00e1s tomando una decisi\u00f3n est\u00e9tica. El color est\u00e1 destinado simplemente a transmitir la funci\u00f3n del texto<\/span>8<\/sup><\/a><\/span> (Brown, 174)<\/p><\/blockquote>\n

      Bas\u00e1ndonos en este principio, en primera instancia se puede suponer que los contenidos se convierten en elementos transmisores de informaci\u00f3n hacia los usuarios cuando, mediante la asignaci\u00f3n de diferencias visuales \u2013en este caso el color\u2013 se hace llegar como mensaje su prop\u00f3sito y utilidad dentro de los dise\u00f1os. A este respecto, Dan Brown tambi\u00e9n refiere que en los wireframes<\/em> es posible tenerse dos tipos de contenido, el Sample content<\/span>9<\/sup><\/a><\/span>\u00a0<\/em>o Contenido Simple, y los Funtional elements<\/em> o Elementos funcionales. Sin embargo, de ambos contenidos, el mismo autor califica a los segundos como elementos interactivos y pone como ejemplo los elementos de formulario y explica que: \u201cMientras permanecen est\u00e9ticamente neutros, los simples elementos de formulario tambi\u00e9n comunican la naturaleza de la interacci\u00f3n, dejando abierta la posibilidad de otras maneras de ejecutar la misma funci\u00f3n\u00bb<\/span>10<\/sup><\/a><\/span>\u00a0(Brown, 176).<\/p>\n

      \"Imagen

      Imagen 3. Ejemplo de elementos de formulario.<\/p><\/div>\n

      Hasta este punto, puede entenderse que el primer paso para que un elemento de contenido sea interactivo, es hacer que su apariencia visual estimule la ejecuci\u00f3n de ciertas acciones, es decir, en el caso de los elementos de formulario, su presencia, induce a los usuarios a experimentar funcionalidades, tales como: la posibilidad de introducir texto en los inputs<\/em> y en los texarea<\/em>, el desplegar el men\u00fa de opciones del drop-down<\/em>, seleccionar y deseleccionar casillas, o el pulsar un bot\u00f3n.<\/p>\n

      Por \u00faltimo, Dan Brown precisa que \u00ab\u2026 los elementos interactivos como los widgets<\/em> de formulario, […] evocan el rango de comportamientos expuestos por la pantalla y establecen la gama de entradas necesarias de los usuarios.\u00bb<\/span>11<\/sup><\/a><\/span>\u00a0(Brown, 176) En este sentido, el autor expone que a todo elemento de contenido le corresponde un comportamiento, el cual, a su vez depende de las acciones de los usuarios para reaccionar y emitir una funcionalidad en pantalla. Entonces, estos aspectos y los anteriormente descritos \u2013la presentaci\u00f3n visual del contenido simple\u2013 son factores iniciales para lograr que los elementos interactivos comuniquen interactividad, pero ahora surge como interrogante saber \u00bfc\u00f3mo se configura el canal de comunicaci\u00f3n entre los usuarios y los elementos funcionales de un wireframe<\/em> en pro de generar un lenguaje interactivo?<\/p>\n

      Para contestar la pregunta previa, a continuaci\u00f3n se revisan las cinco dimensiones del \u201clenguaje de dise\u00f1o de interacci\u00f3n\u201d que en su art\u00edculo \u201cWhat Puts the Design in Interaction Design\u201d, Kevin Silver \u2013dise\u00f1ador de UX\u2013 sugiere para dar explicaci\u00f3n a la forma en c\u00f3mo se constituyen las interacciones y la comunicaci\u00f3n entre los usuarios y las pantallas. Estas son:<\/p>\n

      1D: Words\/Palabras <\/strong>\u00e0<\/strong> Es todo aquel contenido simple que comunica informaci\u00f3n a los usuarios.<\/p>\n

      2D: Visual representation\/Representaci\u00f3n visual<\/strong>\u00e0<\/strong> son todos los elementos gr\u00e1ficos con los cuales puede interactuar un usuario, tales como im\u00e1genes, tipograf\u00eda e iconograf\u00eda.<\/p>\n

      3D: Physical objects or space\/Objetos f\u00edsicos o de espacio <\/strong>\u00e0<\/strong> son los dispositivos o medios f\u00edsicos a trav\u00e9s de los cuales el usuario interact\u00faa con la pantalla.<\/p>\n

      4D: Time\/Tiempo<\/strong>\u00e0<\/strong> ser refiere a los elementos audiovisuales y de animaci\u00f3n temporales que retroalimentan las interacciones de los usuarios.<\/p>\n

      5D: Behavior\/Comportamiento <\/strong>\u00e0<\/strong> incluye las acciones y operaciones del usuario y la pantalla.<\/p>\n

      \"Imagen

      Imagen 4. Elementos de la forma de una interacci\u00f3n.<\/p><\/div>\n

      En raz\u00f3n de lo anterior, Silver presenta un diagrama en el cual ilustra el flujo de acciones y reacciones a trav\u00e9s de esas cinco dimensiones, sin embargo, acota lo siguiente:<\/p>\n

      Las tres primeras dimensiones permiten la interacci\u00f3n, mientras que el tiempo y el comportamiento definen la interacci\u00f3n. Es importante se\u00f1alar que el tiempo, en lo que se refiere al sonido y otros medios, tambi\u00e9n permite la interacci\u00f3n. T\u00edpicamente, las interacciones son actos tangibles por ejemplo, presionando o haciendo clic en un bot\u00f3n o agarrando un mango. No importa si las cosas que permiten la acci\u00f3n son virtuales o f\u00edsicas<\/span>12<\/sup><\/a><\/span>\u00a0(Silver, 13).<\/p><\/blockquote>\n

      De acuerdo con este argumento, primero debe entenderse que las dimensiones Words<\/em>, Visual representation<\/em> y Physical objects or space<\/em> son factores determinantes para generar la verdadera interacci\u00f3n, puesto que al juntar los contenidos simples con los elementos gr\u00e1ficos dentro de una \u00e1rea definida, se abre camino a las conversaciones entre los usuarios y las pantallas. Esta idea nos lleva a repasar la definici\u00f3n del wireframe<\/em> de Dan Brown, para caer en cuenta de que ambas propuestas se remiten al contexto de promover las conversaciones o mejor dicho, las interacciones. Esto \u00faltimo deja como resultado, que dicho escenario es en esencia, el canal donde se forma el lenguaje de comunicaci\u00f3n interactivo entre los usuarios y los elementos funcionales.<\/p>\n

      Entretanto, lo siguiente a comprender es que las interacciones (conversaciones), pueden ser tangibles o intangibles seg\u00fan el tipo de presencia que tengan los elementos de contenido dentro de un contexto. Dicho en otras palabras, si un objeto o elemento est\u00e1 incluido o es parte del mundo real, se propiciaran acciones f\u00edsicas palpables; en contraste, si los objetos o elementos pertenecen a una realidad virtual<\/span>13<\/sup><\/a><\/span>, las acciones ser\u00e1n invisibles en el mundo real.<\/p>\n

      \"Imagen<\/a>

      Imagen 5. Interacci\u00f3n de la forma y el contexto.<\/p><\/div>\n

      Bajo esta postura, se asume que en el caso de los wireframes<\/em>, tanto las acciones como las interacciones ocurrir\u00e1n de manera intangible, esto independientemente de que sean est\u00e1ticos o interactivos. Esta determinaci\u00f3n parte del hecho de que el canal de comunicaci\u00f3n entre los usuarios y los elementos interactivos se basa siempre en un plano bidimensional, desprovisto de la presencia f\u00edsica de cualquier elemento de contenido real, pero dotado de informaci\u00f3n visual con significado que evoque comportamientos.<\/p>\n

      3. Los significantes y los elementos interactivos<\/span><\/strong><\/p>\n

      Entender el \u201clenguaje de dise\u00f1o de interacci\u00f3n\u201d es, sin duda, la clave para establecer la comunicaci\u00f3n entre los usuarios y los elementos de contenido interactivos. No obstante, lo planteado hasta el momento no permite comprender el progreso del lenguaje hasta el comportamiento, por ello, nuevamente se cita a Kevin Silver con el siguiente argumento:<\/p>\n

      El comportamiento dise\u00f1ado no es invisible. A veces es ofuscado; en otros momentos, es evidente o incluso obvia. M\u00e1s importante a\u00fan, el comportamiento dise\u00f1ado dicta el flujo entre\u00a0la acci\u00f3n y la reacci\u00f3n, que es la base de una interacci\u00f3n. Un usuario toma una acci\u00f3n a trav\u00e9s de un affordance<\/em>, que a su vez provoca una reacci\u00f3n en la capa de presentaci\u00f3n.\u00bb<\/span>14<\/sup><\/a><\/span> (Silver, 9)<\/p><\/blockquote>\n

      Esto permite interpretar a primera vista, que toda acci\u00f3n de un usuario tiene como consecuencia una reacci\u00f3n en la etapa de presentaci\u00f3n, la cual representa el final del flujo del proceso del lenguaje de interacci\u00f3n. Sin embargo, a\u00fan resulta dif\u00edcil asimilar como las acciones se inician desde la fase de operaci\u00f3n y de ah\u00ed se generen las conversaciones y las reacciones posteriormente.<\/p>\n

      Antes de continuar, es prudente puntualizar que si bien es cierto, en este tercer y \u00faltimo apartado se tiene como prop\u00f3sito hablar sobre los \u201csignificantes\u201d, se debe primero entender que es un affordance<\/em>, ya que a partir de \u00e9ste t\u00e9rmino nace el de \u201csignificante\u201d. Por lo tanto, de aqu\u00ed en adelante se hace una revisi\u00f3n general desde primer concepto hasta el segundo.<\/p>\n

      No obstante, para seguir adelante, se retoma la citaci\u00f3n previa donde se tiene como una posible respuesta el t\u00e9rmino \u201caffordance\u201d,<\/em> para referenciar a \u201caquello\u201d que inicia una acci\u00f3n, aunque cabe destacar que el autor no deja claro en su art\u00edculo que es o de que se trata un \u201caffordance\u201d<\/em> y es por eso que se recurre a Donald Norman, quien en su libro The Design of Everyday Things<\/em> introduce esta palabra dentro del \u00e1mbito de la Interacci\u00f3n Persona-Ordenador o HCI (Human Computer-Interaction):<\/p>\n

      Cuando se utiliza el t\u00e9rmino affordance<\/em> en este sentido, se refiere a las propiedades percibidas y efectivas del objeto, en primer lugar a las propiedades fundamentales que determinan c\u00f3mo podr\u00eda utilizarse el objeto […]. Una silla presta (\u00abes para \u00e9l\u00bb) apoyo, y en consecuencia presta un asiento. Una silla tambi\u00e9n se puede transportar. El vidrio es para ver por \u00e9l, y para romperlo. La madera se utiliza normalmente por su solidez, opacidad, su capacidad de sustentaci\u00f3n o para hacer incisiones en ella<\/span>15<\/sup><\/a><\/span>\u00a0(Norman 1988, 9).<\/p><\/blockquote>\n

      B\u00e1sicamente, Norman nos dice que un affordance<\/em> es cualquier objeto cuyas posibilidades de utilizaci\u00f3n depende de sus propias cualidades y de c\u00f3mo estas son percibidas por los usuarios, de tal manera que indiquen su funcionalidad y utilidad. Entonces, se tiene que el concepto de affordance<\/em> se refiere a la combinaci\u00f3n de los atributos f\u00edsicos de los objetos y la capacidad de percepci\u00f3n de la persona para que se sugieran acciones a realizar, por ejemplo, en el caso de una silla, su forma y dise\u00f1o evocan la posibilidad de sentarse en ella.<\/p>\n

      En el contexto de la Interacci\u00f3n Persona-Ordenador, se puede traducir el concepto de affordance<\/em> como todo dispositivo f\u00edsico con el cual es posible interactuar de manera externa con un sistema (como es el caso de un teclado, una pantalla o un mouse<\/em>). Sin embargo, Don Norman en su art\u00edculo \u201cAffordance, Conventions and Design\u201d (1999), puntualiza que un affordance<\/em> no solo es un objeto f\u00edsico, sino que tambi\u00e9n puede ser cualquier gr\u00e1fico visible en pantalla que permita interactuar de manera interna con un sistema.<\/p>\n

      Por lo expuesto hasta aqu\u00ed, queda claro que un affordance<\/em> es todo aquel componente (tangible o intangible), mediante el cual un usuario iniciar\u00e1 una acci\u00f3n, que en consecuencia producir\u00e1 una o varias reacciones que har\u00e1n visibles, posibles comportamientos en pantalla. En el caso de los wireframes<\/em>, los affordances <\/em>ser\u00e1n aquellos elementos de contenido interactivos cuya informaci\u00f3n visual sugiera o incite a realizar algo, como es el caso, por ejemplo, de un bot\u00f3n a ser \u201ccliqueado\u201d.<\/p>\n

      A este respecto, cabe resaltar que posteriormente, Donald Norman public\u00f3 un art\u00edculo titulado \u201cSignifiers, Not Affordances\u201d donde sugiere un cambio conceptual de affordance <\/em>a \u201csignificante\u201d argumentando lo siguiente:<\/p>\n

      Los significantes sociales reemplazan a los affordances<\/em>, pues son m\u00e1s amplios y m\u00e1s ricos, permitiendo significantes accidentales y deliberados, e incluso elementos que significan por su ausencia, como la falta de multitudes en una plataforma de tren. La parte perceptible de un affordance<\/em> es un significante, y si es colocada deliberadamente por un dise\u00f1ador, es un significante social<\/span>16<\/sup><\/a><\/span>\u00a0(Norman 2008, 14).<\/p><\/blockquote>\n

      Seg\u00fan explica Norman, esta determinaci\u00f3n se basa en que los \u201csignificantes\u201d son los que realmente hacen perceptibles a los affordances<\/em> al ser incorporados en estos, es decir, un significante es lo que proporciona informaci\u00f3n sobre el affordance<\/em>, de tal manera que permiten indicar e interpretar su verdadero uso. B\u00e1sicamente la idea que pretende dejar el autor es que un affordance<\/em> depende directamente de su\u00a0significante para ser percibido por las personas, de lo contrario este no tendr\u00eda ninguna relevancia y no podr\u00eda sugerir alguna acci\u00f3n.<\/p>\n

      \"Imagen<\/a>

      Imagen 6. Ejemplo de affordances.<\/p><\/div>\n

      Dicho lo anterior, es posible aclarar que los significantes dentro de una interfaz, son aquellos elementos interactivos que adhieren a su apariencia visual, cualquier informaci\u00f3n que tenga una connotaci\u00f3n significativa para los usuarios, de tal modo que inciten a iniciar un tipo de acci\u00f3n con ellos.<\/p>\n

      Con respecto a esto \u00faltimo, el estratega de contenido en UXPin<\/span>17<\/sup><\/a><\/span>, Jerry Cao, retoma en el e-Book Interaction Design Best Practices<\/em> el concepto de \u201csignificantes\u201d y menciona que hay diferentes tipos, los cuales organiza en los siguientes cinco grupos:<\/p>\n

        \n
      1. \n

        A) Explicit Signifiers\/Significantes expl\u00edcitos<\/strong>: \u201c\u2026 significantes obvios, como palabras o apariencias\u2026\u201d<\/span>18<\/sup><\/a><\/span>\u00a0(Cao, 72) Es decir, son elementos que introducen o se acompa\u00f1an de palabras o frases clave que indican la acci\u00f3n a realizar.<\/p><\/blockquote>\n<\/li>\n<\/ol>\n

        \"Imagen<\/a>

        Imagen 7. Captura de pantalla de la interfaz gr\u00e1fica de Tumblr.<\/p><\/div>\n

        Como se puede observar en la imagen previa; la p\u00e1gina de login<\/em> de Tumblr incorpora de manera expl\u00edcita elementos que por s\u00ed solos indican su intenci\u00f3n dentro de la esta interfaz. Para empezar, en los inputs <\/em>de b\u00fasqueda y del correo se tienen frases que advierten la informaci\u00f3n a introducir en ellos. Mientras tanto, el bot\u00f3n de \u201cSiguiente\u201d sugiere continuar con el sucesivo paso para completar el proceso de autenticaci\u00f3n.<\/p>\n

          \n
        1. \n

          B) Pattern Signifiers\/Significantes de patrones<\/strong>: estos son patrones visuales que se han convertido en \u201c\u2026 tendencias y costumbres que han sido popularizadas hasta el punto de entendimiento com\u00fan.\u201d<\/span>19<\/sup><\/a><\/span>\u00a0(Cao, 75-76) B\u00e1sicamente estos son convenciones de dise\u00f1o, dado que las personas ya reconocen su funcionamiento. Algunos de estos patrones son, por ejemplo, el subrayado azul de los links<\/em>, logotipos que regresan a las p\u00e1ginas de inicio, los men\u00fas de navegaci\u00f3n en la parte superior o bien, las flechas de retroceso y avance de un reproductor de m\u00fasica o video.<\/p><\/blockquote>\n<\/li>\n<\/ol>\n

          \"Imagen<\/a>

          Imagen 8. Captura de pantalla de la interfaz gr\u00e1fica de Kia Motors M\u00e9xico<\/p><\/div>\n

          Un ejemplo de significantes de patr\u00f3n lo podemos encontrar en la interfaz de la p\u00e1gina de inicio de Kia Motors M\u00e9xico. En ella se tiene un carrusel de im\u00e1genes con sus respectivos controles, como son las flechas que inmediatamente nos remiten a regresar o adelantar im\u00e1genes. Adem\u00e1s de estos, tambi\u00e9n se observan controles de reproducci\u00f3n (play<\/em> y pause <\/em>espec\u00edficamente), que indican opciones para pausar o iniciar la visualizaci\u00f3n autom\u00e1tica de las im\u00e1genes en el carrusel.<\/p>\n

            \n
          1. \n

            C) Hidden Signifiers\/Significantes ocultos: <\/strong>son significantes que \u201c\u2026 no se hacen aparentes a menos de que se cumpla una condici\u00f3n.\u201d<\/span>20<\/sup><\/a><\/span>\u00a0(Cao, 77-78), literalmente son elementos invisibles que \u00fanicamente son posibles de percibir cuando se pasa el puntero del mouse<\/em> sobre ellos. Aunque cabe destacar que este tipo de significantes se encuentran contenidos dentro de otro elemento en el cual, es necesario realizar acciones como la antes mencionada para poder visualizarlos.<\/p><\/blockquote>\n<\/li>\n<\/ol>\n

            Los eventos ocultos son tal vez lo m\u00e1s empleados en las p\u00e1ginas Web, ya que permiten ahorrar la sobrecarga de contenidos a nivel visual. Para dar\u00a0prueba de esto, se toma como ejemplo el listado en forma cuadricular de los vectores disponibles en Freepick<\/strong>. A simple vista \u00fanicamente se observa la imagen de los vectores, pero cuando se sobrepone el puntero en un recuadro de un vector en espec\u00edfico, es posible visualizar informaci\u00f3n de \u00e9stos, como el nombre, n\u00famero de descargas y likes<\/em>, o bien, la antig\u00fcedad de publicaci\u00f3n y<\/em> opciones Me gusta (coraz\u00f3n) y de Compartir.<\/p>\n

            \"\"

            Imagen 9. Captura de pantalla de la interfaz gr\u00e1fica de Freepick.<\/p><\/div>\n

              \n
            1. \n

              D) Metaphorical Signifiers\/Significantes de met\u00e1fora: <\/strong>este tipo de significantes se valen (primordialmente), de iconograf\u00edas que tengan un significado y remitan a los usuarios con objetos del mundo real. Por ejemplo, \u201c\u2026 un icono de casa simplista significa p\u00e1gina de inicio, un sobre significa correo electr\u00f3nico, una carpeta significa\u2026 una carpeta.\u201d<\/span>21<\/sup><\/a><\/span>\u00a0(Cao, 79)<\/p><\/blockquote>\n<\/li>\n<\/ol>\n

              \"\"

              Imagen 10. Captura de la interfaz gr\u00e1fica del portal de tr\u00e1mites de la CDMX.<\/p><\/div>\n

              Como se puede ver arriba, el portal de tr\u00e1mites de la Ciudad de M\u00e9xico incorpora im\u00e1genes que hacen analog\u00edas de los temas posibles a seleccionar. En este caso los significantes metaf\u00f3ricos adquieren relevancia, ya que facilitan a los usuarios relacionar el tipo de tr\u00e1mite que quieren realizar con solo visualizar las im\u00e1genes.<\/p>\n

                \n
              1. \n

                E) Negative Signifiers\/Significantes negativos: <\/strong>estos \u201c\u2026 pueden mostrar que las caracter\u00edsticas no est\u00e1n disponibles, al menos no en el momento.\u201d<\/span>22<\/sup><\/a><\/span> (Cao, 80) En esencia, estos significantes dan la posibilidad de representar la falta de funcionalidad de uno o varios componentes de un grupo, de elementos al marcarlos o resaltarlos de una cierta manera.<\/p><\/blockquote>\n<\/li>\n<\/ol>\n

                Muchas veces es dif\u00edcil reconocer a primera vista los significantes negativos dentro de una interfaz, sin embargo, es posible percibirlos cuando su apariencia visual contrasta con los dem\u00e1s elementos de su\u00a0mismo grupo. Por ejemplo, la plataforma de educaci\u00f3n digital online <\/em>Udemy, despliega el temario de cada uno de los cursos que ofrece orden\u00e1ndolos en temas y subtemas, sin embargo, es de notarse como los t\u00f3picos en azul indican la posibilidad de hacer clic sobre ellos para abrir una vista previa de una clase, mientras que los grises denotan nulo funcionamiento.<\/p>\n

                \"\"

                Imagen 11. Captura de la interfaz gr\u00e1fica de Udemy.<\/p><\/div>\n

                Los significantes antes descritos no solo ampl\u00edan la visi\u00f3n sobre c\u00f3mo representar los elementos de contenido interactivos dentro de un wireframe<\/em>, sino que adem\u00e1s llevan a reflexionar acerca de la manera en como indicar y describir en dicho esquema, tanto las funcionalidades como los eventos posibles a ocurrir cuando se ejerza una acci\u00f3n sobre estos. En particular, se debe tener en cuenta que este \u00faltimo detalle es determinante para completar el canal de comunicaci\u00f3n entre el usuario y los elementos interactivos, ya que al no comunicar la informaci\u00f3n antes mencionada, un wireframe<\/em> no podr\u00e1 adquirir un car\u00e1cter interactivo.<\/p>\n

                Para hacer frente a este dilema, como soluci\u00f3n se sugiere emplear anotaciones para documentar las funcionalidades y eventos de los elementos interactivos, o bien, cualquier otro tipo de informaci\u00f3n relevante sobre ellos.<\/p>\n

                Por ejemplo, al elaborar wireframes <\/em>en MockFlow, es posible agregar y asignar notas con la ayuda del elemento \u201cNote<\/em>\u201d que se incluye en la biblioteca de s\u00edmbolos.<\/span>23<\/sup><\/a><\/span>\u00a0En miras de ilustrar este \u00faltimo aspecto, se presenta el wireframe<\/em> que se elabor\u00f3 de la interfaz de Tumblr <\/em>antes citada y en donde se hace referencia a los significantes expl\u00edcitos.<\/p>\n

                \"Imagen

                Imagen 12. Wireframe de la interfaz gr\u00e1fica de Tumblr. Fuente propia.<\/p><\/div>\n

                Tal y como se puede observar en la imagen, este wireframe<\/em> se apega al dise\u00f1o de la estructura de la interfaz de Tumblr, sin embargo, es posible notar que los elementos interactivos a simple vista son representaciones llanas. Por lo tanto, para a\u00f1adir anotaciones a los elementos interactivos de la biblioteca de s\u00edmbolos, hay que arrastrar y posicionar el elemento \u201cNote<\/em>\u201d. Luego, se tiene que hacer doble clic sobre \u00e9ste para introducir la informaci\u00f3n (ver imagen 13).<\/p>\n

                \"Imagen

                Imagen 13. Ejemplo del agregado de una nota.<\/p><\/div>\n

                De esta manera, es como MockFlow permite agregar notas y hacerlas visibles como un elemento de contenido m\u00e1s dentro del wireframe<\/em>, aunque cabe aclarar que el tema de las anotaciones se abord\u00f3 con la finalidad de referirles como herramientas descriptivas de funcionalidades y eventos de los elementos interactivos. Por lo tanto, para lograr que los wireframes<\/em> sean realmente interactivos, se sugiere no desestimar el uso de las anotaciones, ya que estas son el complemento final del lenguaje de comunicaci\u00f3n interactivo entre los usuarios y dichos elementos.<\/p>\n

                \"Imagen

                Imagen 14. Wireframe interactivo de Tumblr<\/p><\/div>\n

                Conclusi\u00f3n<\/span><\/strong><\/p>\n

                El wireframe<\/em> como esquema est\u00e1tico se limita a presentar la estructura de las interfaces gr\u00e1ficas, as\u00ed como tambi\u00e9n a jerarquizar y representar los elementos de contenido que se incluir\u00e1n dentro de \u00e9stas. Esas cualidades, son sin duda la base del objetivo a cumplir en la elaboraci\u00f3n\u00a0 de los wireframes<\/em>, sin embargo, a estos se les puede a\u00f1adir valor al dotarlos de interactividad.<\/p>\n

                Para lograr que un wireframe<\/em> sea interactivo, se tiene que considerar establecer primero un canal de comunicaci\u00f3n entre los usuarios y los elementos de contenido donde se genere un lenguaje interactivo. No obstante, esto implica convertir los elementos de contenido simples en elementos interactivos para atribuirles funcionalidades y eventos.<\/p>\n

                En este contexto, los elementos interactivos se definen a partir de que su apariencia visual sugiera a los usuarios efectuar acciones con ellos y experimentar comportamientos. Asimismo, se debe tener en cuenta que por s\u00ed solos, estos elementos no promueven conversaciones (es decir interacciones), puesto que necesitan y dependen de la existencia (dentro de s\u00ed mismos), de un \u201csignificante\u201d para ser percibidos por los usuarios y estimularlos a iniciar, y llevar a cabo una serie de acciones y reacciones.<\/p>\n

                De igual manera, es fundamental saber c\u00f3mo pueden tenerse los significantes dentro de una interfaz, ya que adem\u00e1s de indicar a los usuarios que elementos de contenido son interactivos, tambi\u00e9n dan la pauta para representarlos y se\u00f1alarlos en un wireframe<\/em>. Entretanto, la facilidad con la que puedan ser percibidos los significantes, depende directamente de si su apariencia les permite tener suficiente presencia en una interfaz y es por ello que se sugiere agregar anotaciones en los wireframes <\/em>para indicar sus funcionalidades, sus eventos y dem\u00e1s atributos.<\/p>\n

                Fuentes de consulta<\/span><\/strong><\/p>\n

                Brown, Dan M.\u00a0Communicating Design: Developing Web Site Documentation for Design and Planning<\/em>. Second ed. Berkeley, CA: New Riders, 2011. Impreso.<\/p>\n

                Cao Jerry. Interaction Design Best Practices (Mastering Words, Visuals, Space). <\/em>UXPin, 2016. PDF.<\/p>\n

                Gavin Ambrose, and Paul Harris. Layout<\/em>. 2nd ed. Switzerland: AVA, 2011. Impreso.<\/p>\n

                Hern\u00e1ndez, Idalia. \u201cPrincipios y elementos de dise\u00f1o para la elaboraci\u00f3n y presentaci\u00f3n de un manual para no dise\u00f1adores como herramienta de apoyo en el proceso de dise\u00f1o de interfaces gr\u00e1ficas de usuario\u201d. Abril, 2017.<\/p>\n

                Norman, Donald Arthur. \u00abAffordance, Conventions and Design\u00bb. May 1999. Web. 03-04-17. <URL>.<\/p>\n

                Norman, Donald Arthur. \u00abThe Way I See It – Signifiers, Not Affordances\u00bb. ResearchGate<\/em>, Nov. 2008. Web. 01-04-17. <URL<\/a>><\/p>\n

                Norman, Donald Arthur. The Design of Every Things<\/em>. 1st ed. New York: Basic, 1988. Impreso.<\/p>\n

                Rosenfeld Louis, and Morville Peter.\u00a0Information Architecture for the World Wide Web<\/em>. Third ed. USA: O’Reilly Media, 2006. Impreso.<\/p>\n

                Silver Kevin. \u00abWhat Puts the Design in Interaction Design\u00bb UXmatters. 10-07-07. Web. 27-03-17. <URL<\/a>><\/p>\n

                 <\/p>\n","protected":false},"excerpt":{"rendered":"

                En el presente art\u00edculo se describe el proceso del\u00a0wireframing\u00a0orientado a la integraci\u00f3n de interactividad; se revisa el concepto de\u00a0wireframe\u00a0y se exponen sus caracter\u00edsticas, luego se contextualiza y diferencian los t\u00e9rminos de \u201caffordances\u201d y \u201csignificantes\u201d. Asimismo, se comenta el rol de las anotaciones en dichos bocetos como factores permisivos de interactividad y se explica c\u00f3mo incluirlos… Leer m\u00e1s »<\/a><\/p>\n","protected":false},"author":83,"featured_media":2180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[417,416,414,418,415],"coauthors":[413],"class_list":["post-2100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-comunicacion-digital","tag-affordance","tag-interactividad","tag-interfaz-grafica","tag-significante","tag-wireframe"],"acf":[],"_links":{"self":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts\/2100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/comments?post=2100"}],"version-history":[{"count":10,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts\/2100\/revisions"}],"predecessor-version":[{"id":3467,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts\/2100\/revisions\/3467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/media\/2180"}],"wp:attachment":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/media?parent=2100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/categories?post=2100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/tags?post=2100"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/coauthors?post=2100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}