Los fundamentos del diseño interactivo

Una introducción a las artes visuales aplicadas

Los fundamentos del diseño interactivo

Michael Salmond/Gavin Ambrose

Título original: The Fundamentals of Interactive Design Diseño Gavin Ambrose Imagen de la portada The World's Biggest Pac-Man (Soap Creative) Traducción Lluïsa Moreno Llort Revisión de la edición en lengua española Pere Fradera Barceló Profesor de Diseño, Escola Massana, Barcelona

Coordinación de la edición en lengua española Cristina Rodríguez Fischer Primera edición en lengua española 2014 © 2014 Naturart, S. A. Editado por BLUME Av. Mare de Déu de Lorda, 20 08034 Barcelona Tel. 93 205 40 00 Fax 93 205 14 41 E-mail: info@blume.net © 2013 Bloomsbury Publishing Plc, Londres ISBN: 978-84-15317-88-3 Impreso en China Todos los derechos reservados. Queda prohibida la reproducción total o parcial de esta obra, sea por medios mecánicos o electrónicos, sin la debida autorización por escrito del editor.

WWW.BLUME.NET

Los fundamentos del diseño interactivo

Michael Salmond/Gavin Ambrose

Ético:

consciencia/ reflexión/ debate

Contenido Introducción

Capítulo 1: El diseño interactivo como disciplina ¿Qué es el diseño interactivo? ¿Qué hace un diseñador interactivo?

Entrevista: Darrell Wilkins, director creativo El documento de diseño El uso de nuevas tecnologías Caso práctico: la web de Kaiser Chiefs Proyecto: crear conceptos y guiones ilustrados

6

8 10 20 24 26 28 32 38

Capítulo 2: Ideas, prototipos y experiencias

40

¿De dónde surgen las ideas?

Influencias y el proceso creativo El medio modela el diseño El apego afectivo al producto El diseño de experiencias Entrevista: Lydia Swangren, diseñadora UX Caso práctico: una entrega multiplataforma Proyecto: cautivar mediante la interactividad

42 44 50 54 58 62 64 68

4

Capítulo 3: El proceso industrial

70

La presentación Entrevista: David Burrows, asesor de diseño Dirección artística y estética Caso práctico: la campaña viral para WrestleMania Proyecto: crear la presentación de una campaña

72

88

Capítulo 4: Público, usabilidad y pruebas

90

76 78 82

Diseñar para el público 92 La usabilidad en el diseño: reglas y principios 94 Usabilidad y contenido 98 Usabilidad y comunicación visual 100 Pruebas de usabilidad 102 Entrevista: Trevor May, diseñador de aplicaciones móviles 104 Caso práctico: aplicación para Glastonbury 106 Proyecto: crear una campaña publicitaria interactiva 110

Capítulo 5: Gráficos animados y medios compartidos

112

Movimiento e interactividad La realidad aumentada El vídeo y los gráficos animados Entrevista: Krystal Schultheiss, diseñadora de gráficos animados El proceso de producción de un vídeo Los vídeos virales Los medios sociales Entrevista: Steve Smith, desarrollador experto Caso práctico: la web de pq-eyewear Proyecto: crear una campaña para una serie de televisión

114 126 130

Capítulo 6: Juegos

156

Los juegos de ordenador Los juegos como medio interactivo Entrevista: Pete Everett, diseñador de juegos publicitarios Caso práctico: «Open the Games» de Coca-Cola Proyecto: crear un juego publicitario

158 164

Conclusión Glosario Bibliografía Índice Créditos fotográficos y agradecimientos Trabajo y ética

180 181 188 190 192 193

134 136 140 146 148 150 154

172 174 178

5

El proceso industrial

La presentación En este capítulo examinamos una parte importante del proceso industrial, esto es, hacer una breve presentación de un diseño a un posible cliente. Analizamos las mejores prácticas de la industria y la relación entre el diseñador y el cliente, así como el proceso de pasar de la presentación al proyecto.

La mayoría de la gente tiene una idea aproximada de lo que es una presentación de un proyecto; por ejemplo, en las series de televisión Dragons’ Den (Reino Unido) y Shark Tank (Estados Unidos) aparece gente haciendo presentaciones. Estas breves exposiciones orales son competitivas y pueden resultar angustiosas. La mayor parte de los estudiantes de bellas artes y diseño en algún momento han tenido que realizar una presentación en una sala llena de gente.

Las críticas que reciben las presentaciones de los proyectos o trabajos en curso constituyen una preparación excelente a la hora de hacer una presentación. Aunque no siempre resulta obvio, aprender a exponer adecuadamente las ideas y ser capaz de hablar del trabajo delante de los demás constituye una oportunidad para afinar las habilidades necesarias para enfrentarse a una presentación.

Tipos de presentación Existen dos tipos de presentaciones (o propuestas): la solicitud de propuesta (conocida como SDP), que es competitiva, y la presentación por invitación.

1 La solicitud de propuesta (SDP) La mayoría de los estudios deberán tomar parte en una solicitud de propuesta. Una SDP es un documento enviado por el cliente en el que se explica, a menudo de forma detallada, los resultados que requiere. A continuación, el estudio crea materiales para responder al brief y los manda al cliente. Se trata de una especie de cata a ciegas: no existe comunicación con el cliente, de modo que la respuesta que se dé a la SDP debe valerse de sus propios méritos. Si los materiales resultan interesantes para el cliente, al estudio de diseño se le solicita que organice una reunión con el cliente para presentar su idea.

2 La presentación por invitación Tiene lugar cuando el estudio ya guarda relación con el cliente, y se le sugiere que ofrezca una solución de diseño para un brief; o bien cuando el cliente está tan impresionado con algún trabajo anterior que le invita a una reunión. Estos tipos de briefs suelen ser menos formales y mucho menos competitivos. Aun así, hay que impresionar al cliente, y la presentación debe seguir la tónica de una solicitud «abierta» y competitiva de propuestas.

72

La presentación Entrevista: David Burrows, asesor de diseño

Preparar una presentación Una vez que un estudio ha decidido responder a un brief, lo que debe hacer antes que nada es informarse sobre el cliente, su marca y sus productos. Un pequeño equipo se reúne para crear el material de la presentación, y posiblemente también prototipos, a partir de dicha labor de investigación. Cuando un equipo prepara e indaga el material para una presentación, debe tener en cuenta los siguientes factores: 1 ¿Quién es el cliente? ¿A qué se dedica?

2 ¿Cuál es el producto/servicio que pretende impulsar?

3 ¿Por qué campañas publicitarias o de lanzamiento han apostado con anterioridad?

4 ¿Lo que nosotros hacemos como estudio se adecúa a lo que espera el cliente?

Los briefs pueden ser muy sucintos o muy explícitos; los estudios adaptan su investigación en función de lo que se les solicita. Las presentaciones pueden ser un proceso caro y que exija no pocos recursos.

Una cuestión polémica es que algunos clientes pueden pedir un trabajo previo «especulativo» (conocido como spec) antes de que tenga lugar una reunión. Es decir, un cliente solicita al estudio que le envíe prototipos de trabajo de sus ideas. El spec tiene muy mala fama entre los estudios de diseño; en esencia, el cliente solicita al estudio que dedique una gran cantidad de tiempo y dinero en la preparación de un encargo que quizá no le asignen.

Esta es la razón por la que muchos estudios se niegan a asumir ningún tipo de trabajo especulativo.

Tras la presentación Y luego, ¿qué ocurre después de la reunión? Si esta ha ido bien, al estudio se le adjudica el encargo, se llega a un acuerdo económico y empieza el trabajo propiamente dicho. Por el contrario, si la reunión no ha dado fruto, todas las horas que se han destinado a la investigación, al material gráfico y a los prototipos interactivos se pueden considerar perdidas. Sin embargo, todo estudio debería ver este intento fallido de adjudicación de un proyecto como parte del proceso de aprendizaje. Por lo general, cuando esto ocurre, el equipo se reúne para analizar los puntos positivos y negativos de la presentación.

3.2

3.3

3.4

3.2−3.4 Presentación para Televisa // Studio La Flama Estos fotogramas corresponden a una presentación de vídeo creada por Luis Torres, de Studio La Flama, para el canal de televisión mexicana Televisa. La idea era sacar provecho de la enorme popularidad del programa Lucha Libre y de sus luchadores disfrazados. Los muñecos (personajes inspirados en un prototipo de programa infantil de televisión), hechos con lona, piel y puntadas visibles, tenían una textura rugosa. Los ambientes eran nítidos y de tonos vibrantes desde el punto de vista estético, con lo que el contraste visual respecto a los muñecos era notable.

73

Gráficos animados y medios compartidos

El vídeo y los gráficos animados Cuando se estudian métodos para integrar un vídeo o una animación en un proyecto, conviene conocer algunos de los principios básicos del proceso de producción. Es importante que los diseñadores sepan crear activos adecuados a los medios de salida, así como conocer a fondo las posibilidades del medio, con el fin de idear una experiencia más gratificante o intensa para el público.

Los gráficos animados (Motion Graphics) Se debe distinguir entre gráficos animados y animación: los primeros a menudo se crean para retocar o mejorar un vídeo, mientras que la segunda suele formar parte de una estructura narrativa. Un vídeo a modo de introducción que dirige la atención del público a un determinado tema y al «entorno de la marca» es una herramienta útil, y la naturaleza cinética de los gráficos animados seduce al momento. El vídeo y la animación a menudo se utilizan para contar una historia para la marca, ya que algunos tipos de público lo prefieren a tener que hacer clic en múltiples pantallas para obtener la misma información.

5.28−5.30 La animación de inmersión de Samsung // Studio La Flama Para intensificar el efecto del lanzamiento en directo de la televisión inteligente de Samsung (Smart TV), Studio La Flama creó una serie de animaciones y de gráficos animados. El público se encontró rodeado de proyecciones de las animaciones, que parecía que explotaran de una caja en 3D hacia el entorno, lo que dio lugar a una experiencia de lo más cautivadora.

5.28

130

La realidad aumentada El vídeo y los gráficos animados Entrevista: Krystal Shultheiss, diseñadora de gráficos animados

5.29

5.30

131

Juegos

Entrevista: Pete Everett, diseñador de juegos publicitarios Pete Everett es el cofundador de Playerthree (Reino Unido) y es todo un experto en el diseño de proyectos de juegos publicitarios. ¿Qué son los juegos publicitarios?

En el espacio en línea, los juegos publicitarios atraen el tráfico a un sitio web. A las marcas les resulta beneficioso crear juegos y emplearlos para promocionar sus productos. Los mejores juegos publicitarios o bien transmiten el mensaje de la marca de forma muy sutil, o bien apuntan tan directamente al mercado objetivo que no nos sorprende ver la marca asociada con el juego cuando aparecen el branding o los mensajes. ¿En qué sentido los juegos actúan como una estrategia de marketing?

Los juegos son una forma de atraer a la gente a un sitio web, con la esperanza de que a los usuarios les encante lo que vean en cuanto entren. Los juegos son muy útiles en este sentido, especialmente si los comparamos con los banners. La gente intenta no mirar los banners, pero sí que busca juegos e incluso los comparte con sus amigos.

En cuanto al reconocimiento de la marca, la interacción del usuario y el número de clics, se puede conseguir que el sitio concentre mucho más tráfico mediante la creación de un juego aceptable que con el lanzamiento de una campaña de banners por el mismo precio.

172

¿Qué es lo que puede «arruinar» un juego publicitario?

Un branding excesivo o ser demasiado incisivo es negativo, ya que provoca rechazo en la gente. Esto lo tenemos especialmente en cuenta cuando creamos juegos educativos, y también concienciamos a nuestros clientes acerca de ello. No tiene sentido ser demasiado incisivo en el aspecto educativo de un juego: si el público cree que lo están aleccionando, desconectará, y al final no educarás a nadie. Es preferible que el gran público aprenda un poco jugando al fascinante juego que has creado, que no aprenda nada en absoluto. ¿Cómo se consigue pasar de un brief inicial al juego final?

Primero elaboramos un documento de diseño del juego que resume las imágenes básicas para la mecánica del juego, y lo debe aprobar el cliente. En esta fase, la descripción debe ser muy general; así tenemos un poco de libertad para entrar en detalles y hacer modificaciones a medida que el proyecto del juego evoluciona.

Los mejores juegos evolucionan por sí solos durante el proceso de diseño. A menudo los detalles de diseño y los matices de la interacción que se introducen más adelante hacen que un juego sea memorable. A veces, uno que convence sobre papel simplemente no funciona en la práctica, y nuestro trabajo es afanarnos en encontrar otra solución que se adecúe al brief, al calendario y al presupuesto del cliente.

Los juegos como medio interactivo

Entrevista: Pete Everett, diseñador de juegos publicitarios Caso práctico

¿Cómo decide quién trabajará en un proyecto?

Disponemos de un equipo de veintiuna personas, muchas de ellas muy polivalentes. Escogemos entre los estilos gráficos de los diseñadores, entre los entornos de autor y una variedad de plataformas a las que podemos exportar, tales como la Red, iOS, Android y PlayStation Network (PSN). Algunas personas tienen aptitudes para determinados campos (física o inteligencia artificial, por ejemplo), pero tratamos de no encasillar a la gente.

Todos nuestros desarrolladores son diseñadores de juegos en vez de «codificadores», y esta es la clave del éxito de los juegos que creamos. Facilitamos a los desarrolladores espacio para que profundicen en el juego que crean y los dejamos participar en el proyecto desde el principio para que influyan en el diseño.

6.36

¿Tiene algunas técnicas estrella para diseñar?

Hay una pregunta clave: ¿es divertido jugar a este juego?

Si la respuesta es negativa, quiere decir que hemos fracasado y que el juego no saldrá hasta que divierta.

En ocasiones, esto implica incumplir el plazo de entrega, pero estoy seguro de que los clientes que contratan nuestros servicios buscan a unos diseñadores de juegos, y no deberían esperar menos de nosotros.

Podríamos tomar los elementos del Comecocos y juntarlos de tal forma que el juego no resulte divertido, pero requiere destreza detectar qué falta y luego añadirlo de modo que el juego funcione. Esta es la diferencia entre un desarrollador de juegos y un codificador. Cosas que gustan sobre el papel luego no divierten, y esto es difícil de explicar en una hoja de cálculo. Añadir el componente «diversión» exige trabajo y experiencia.

6.37

6.36 Stunt Bunnies Circus // © Playerthree 6.37 Nom Nation // © Playerthree y Channel 4 6.38 Capper // © Coca-Cola Playerthree trabaja con una mezcla de juegos publicitarios de marca, títulos educativos y su propio protocolo de Internet (IP, por las siglas en inglés) en dispositivos web y portátiles. De este modo, se esfuerza por crear unos juegos sencillos y fáciles de utilizar.

6.38

173

Los fundamentos del diseño interactivo pretende ayudar a diseñar medios que atraigan, diviertan y «fidelicen» al público, y también que sintonicen con él. Este libro, que incluye un gran número de ejemplos pioneros en el campo del diseño interactivo, ofrece una introducción sólida a los principios de la comunicación interactiva, así como casos prácticos detallados de los máximos exponentes en el sector.

Una guía paso a paso por cada etapa del proceso creativo, desde la inspiración hasta la aplicación de las interfaces de diseño y experiencias interactivas. Con una presentación tan atractiva como fascinante desde el punto de vista visual, ofrece una brillante visión general de la tecnología punta y de la evolución del diseño digital.

Temas Diseño a través de varios recursos Diseño de experiencias Diseño emocional Diseño para la interactividad Gráficos animados Lanzamiento de webs Ludopublicidad Mapas esquemáticos Medios sociales Prototipado e iteración Realidad aumentada Semiótica digital Usabilidad Vídeos virales Colaboradores AKQA Big Spaceship Blast Theory IDEO KesselsKramer Kokokaka Playerthree Second Story Soap Creative SOLID Interactive Specialmoves «Salmond y Ambrose han creado un texto que no pasará de moda, expresamente pensado para que el diseñador principiante disponga de la teoría y las destrezas profesionales necesarias. En él encontrará tanto consejos prácticos y sucintos como una gran diversidad de ejemplos de todos los ámbitos del diseño interactivo, lo que hace de esta obra una referencia obligada para aquellos que deseen adentrarse en el campo del diseño».

ISBN 978-84-15317-88-3

Jess Larson, profesor de artes visuales, Universidad de Minnesota, Estados Unidos 9

788415 317883