Los wireframes son los primeros estados de los prototipos. En diseño web, a la hora de construir un sitio no podemos pensar al principio del desarrollo en los últimos detalles, se construirán diferentes modelos, siendo este, el primero, un esquema de la organización de los componentes. Los wireframes pueden variar en fidelidad, ajustándose más o menos al resultado final que hay que obtener, van desde simples sketches hasta documentos más acabados en los que habremos tenido en cuenta el tamaño concreto de los elementos, su posición justa relativa a la rejilla que hayamos creado, la disposición de textos, iconos y espacios en blanco, la alineación de los componentes…

Los wireframes nos ayudan también a la creación de plantillas, ya que el contenido de los elementos no aparece en esta versión de los prototipos independientemente de su fidelidad, desde este podremos crear, en nuestro caso, diferentes apartados de noticias con la misma estructura ayudando a crear así consistencia en el sitio web.

Ilustraremos esto con un ejemplo, el de la web del periódico de la ‘Opinión de Zamora’:

Durante nuestro día a día, seamos conscientes o no, interactuamos con un sin fin de interfaces de todo tipo. Obviamente no nos referimos solo al sin fin de interfaces que podemos encontrar en nuestros móviles u ordenadores si no a acciones tan simples como abrir la puerta de tu casa o encender tu microondas.

El diseño de interacción se presenta en tres aspectos principales: ¿Cómo realizamos la interacción? ¿Cómo nos hace sentir? ¿Cómo conoces este proceso? Para explicar mejor estos aspectos propondremos una rutina simple y analizaremos las interacciones que realizamos en ella. Este recorrido mostrara las primeras interfaces con las que yo me relaciono en mi día a día.

Apagar la alarma es lo primero de cada mañana:

• ¿Cómo lo haces? Esta suena desde mi Alexa y, tengo configurada una rutina en esta, mediante la cuál, al pronunciar el comando de voz »Alexa, buenos días», esta no solo apaga mi alarma si no que enciende la luz del techo en una intensidad baja y empieza a reproducir mi música.
• ¿Cómo te sientes? Cómoda. Esto me ahorra el estrés que me da escuchar la alarma cada mañana y, además la luz impide que vuelva a dormirme y la música me pone de mejor humor.
• ¿Cómo conozco el proceso? La verdad que el proceso es extremadamente fácil gracias a la aplicación de Amazon Alexa, es un proceso muy intuitivo que no te llevará más de 10 minutos aprender a manejar y configurar.

• Tipo de interacción: Instructing, conversing.
• Estilo de interacción: Speech.
• Contexto de interacción: VUI Voice User Interface.

Seguido me levanto y preparo el desayuno:

• ¿Cómo lo haces? Elijo los ingredientes y preparo un batido, por lo que uso una batidora para ello. La interfaz de mi batidora es muy simple, tiene un botón que pulsado activa la acción. A mayores tiene una pequeña ruleta para la velocidad pero siempre la tengo programada igual.
• ¿Cómo te sientes? Realizada, creativa ya una de mis recetas favoritas y que esta es sana y fácil de preparar.
• ¿Cómo conozco el proceso? Solo tiene un botón asique es obvio que este activa la maquina.

• Tipo de interacción: Manipulating.
• Estilo de interacción: Touch.
• Contexto de interacción: Interacción Tangible.

Vuelvo a mi cuarto y reviso mis mensajes:

• ¿Cómo lo haces? Utilizo mi teléfono para leer y mandar mensajes sean de texto o de voz por WhatsApp.
• ¿Cómo te sientes? Alegre ya que es una aplicación que te conecta con tus amigos y familiares y te permite comunicarte fácilmente con ellos.
• ¿Cómo conozco el proceso? La interfaz y utilización de WhatsApp tenía un aspecto muy parecido a la bandeja de SMS que todos ya conocíamos previamente, por lo que al ya estar familiarizados hizo que su uso fuese bastante rápido de aprender.

• Tipo de interacción: Manipulating, conversing.
• Estilo de interacción: Speech, touch, typing.
• Contexto de interacción: GUI Graphical User Interface, HCI Human Computer Interface.

Por último abro mi portátil y me preparo para empezar a estudiar:

• ¿Cómo lo haces? Para ello tengo que interactuar con mi computadora por varias interfaces, como es la de navegación y búsqueda en Google, las diferentes páginas del campus de la UOC, mis correos tanto personal como el de estudiante, el calendario para ver mi agenda y la aplicación Spotify para reproducir música.
• ¿Cómo te sientes? Realizada, motivada ya que me ayuda a expandir mis conocimientos.
• ¿Cómo conozco el proceso? Imagino que en su día este tipo de interfaces me llevasen un proceso de aprendizaje, pero no dejan de ser modelos que conocemos desde hace tiempo y que realizarlos hoy en día suponen un esfuerzo mínimo para conocerlos.

• Tipo de interacción: Intructing, exploring.
• Estilo de interacción: Touch.
• Contexto de interacción: GUI Graphical User Interface, HCI Human Computer Interface.

Como usuarios las interfaces deberían de estar a nuestro servicio para hacernos una experiencia más sencilla e intuitiva, pero no siempre es así. Como ejercicio de clase se nos proponía la comparativa entre una buena y una mala interfaz.

Como ejemplo para la práctica expondría el caso de la radio del coche. Tanto yo como el resto de gente de mi edad tenemos coches antiguos o de segunda, esto hace que la mayoría de nuestras radios no estén adaptadas a los usos que nos gustaría darles, lo que hace que la gran cantidad de botones y opciones que suelen tener sean inútiles y no resuelvan nuestras necesidades. Esto sumado a que es un dispositivo que se usa mientras estas al volante hace que, como es lógico, intentemos buscar otro aparato con una interfaz más eficaz.

Todos nosotros y fijo que muchos de los que estáis leyendo tendréis en vuestro coche un pequeño dispositivo de manos libres, con el que, aparte de tener la función de coger y colgar llamadas (la cual también es muy útil) tiene bluetooth incorporado, desde el que puedes elegir una frecuencia

de radio para escuchar tu música favorita. Consigue con un par de botones que podamos hacer lo que no podríamos veinte en con una radio convencional.

Como decía al principio las interfaces han de estar para ayudarnos a simplificar procesos y a poder brindar la mayor información y uso de la forma más fácil posible.