Diseño interactivo

El diseño interactivo es el de
arreglo gráficos, texto, videos, fotos, ilustraciones, sonidos, animación, imágenes
tridimensionales (3D), realidad virtual y otros medios en un documento interactivo. Un
documento interactivo puede ser una página web con texto y enlaces a otras páginas web, o
una aplicación autónoma más compleja que use tipografía, gráficos, sonido y video con
controles interactivos como pueden ser botones, enlaces, etc. Ya sean simple o complejos, los
mejores diseños interactivos, presentan el
mensaje de manera clara y tienen
una interfaz fácil de navegar , y que
funciona adecuadamente con la tecnología
que utilice el usuario para desplegar el
documento interactivo.1
El diseño interactivo es un conjunto de
disciplinas que engloba términos como el
diseño de software, de interfaz de usuario,
diseño centrado en el usuario, diseño de
productos, diseño web, etc. Según Terry
Winograd e Yvone Rogers, se refiere al
diseño de espacios interactivos para apoyar
la forma en que la gente se comunica e
interactúa con su vida y quehacer diario. Es
fundamental para todas las disciplinas,
campos y afines preocupados por investigar y diseñar sistemas basados en computadora para
el ser humano.2
El diseño interactivo es una derivación histórica de la multimedia interactiva con la diferencia
de que ‘Multimedia Interactiva’ es un término que históricamente se relaciona con medios
obsoletos como el CD-ROM y tiene connotaciones caducas, el término Diseño Interactivo por
otro lado tiene una connotación mas contemporánea y sus plataformas son tan variadas como
lo pueden ser la Web, los teléfonos inteligentes (como el iPhone), las tabletas (como el iPad),
etc.
El diseñador interactivo diseña para Medios Interactivos a diferencia del diseñador de
Interacción que diseña los comportamientos de los puntos de contacto del usuario con los
productos que no necesariamente son digitales, Diseño Interactivo es una derivación del
Diseño Gráfico y el Diseño de Interacción es una derivación del Diseño Industrial. A diferencia
del Diseño de Interacción, el Diseño Interactivo se centra en el ‘cómo’ y el ‘qué’ mientras el
primero se centra en el ‘porqué’.
Diseño Interactivo es una área de estudio enfocada a comprender como nos relacionamos con
la tecnología y como desarrollamos nuevas metodologías de diseño para crear productos y
servicios que combinan estética, cultura, tecnología y las humanidades.3
El diseño interactivo o ID, por sus siglas en inglés, Interaction Design, se encuentra expuesto
en todo y forma parte de la vida de cualquier persona. Las disciplinas y campos
interdisciplinarios que contribuyen con el diseño interactivo y que se mencionan en el libro
Interaction Design. Beyond Human-Computer Interaction, son la psicología, las ciencias
sociales, las ciencias computacionales, la informática, la interacción humano-computadora, la
ingeniería cognitiva, el trabajo cooperativo y soportado por computadora, los sistemas de
información, etc. Las disciplinas y los campos interdisciplinarios anteriormente mencionados
sobresalen en la vida de cada persona, por lo que el diseño interactivo se encuentra implícito
a nuestro alrededor.
El diseñador interactivo diseña fundamentalmente para la pantalla5 y en sus raíces está
el Diseño Gráfico pero centrado en la interactividad. Así pues el Diseño Interactivo utiliza
herramientas como pueden ser HTML, CSS, Javascript, Actionscript, PHP, Content
Management Systems (CMS=Sistemas manejadores de contenidos), programas de edición de
imágenes de pixel como Photoshop, editores de HTML tipo WYSIWYG como Dreamweaver, y
en menor medida otros programas como Flash, Illustrator, InDesign, etc. Para crear proyectos
completos y funcionales, siendo el Diseño y la Programación habilidades fundamentales del
diseñador interactivo,6 a diferencia del Diseño de Interacción que su fin último es diseñar las
interacciones para la pantalla en prototipos en papel.

Principios de diseño interactivo

Los principios del diseño interactivo son los requerimientos básicos con los que un producto
debe de cumplir para que sea exitoso. Yvone Rogers, Helen Sharo y Jenny Preece mencionan
en su libro que un producto debe de ser llamativo, fácil de aprender a usar, fácil de recordar
cómo usarlo. Los principios de diseño interactivo son:

 La Visibilidad: Consiste en los apoyos visuales que le brindan al usuario información

sobre cómo actuar en determinadas circunstancias. Ejemplos: calcomanías, letreros, etc.

 La Retroalimentación: Consiste en enviar información al usuario sobre lo que éste esté

haciendo. Incluye sonidos, luminosidad, animaciones y combinaciones de estas. Ejemplo:
Cuando conectas auriculares a algún Smartphone, en la pantalla aparece algún símbolo,
advertencia o sonido, haciendo referencia a que se han conectado unos auriculares.

 Las Limitaciones: Consiste en restringir y advertir acciones, para prevenir que el usuario
selecciones opciones incorrectas. Ejemplo: Al eliminar archivos en una computadora, la
máquina te pregunta si en verdad quieres eliminarlos.

 La Consistencia: Diseñar interfaces que tengan operaciones y elementos similares para

realizar tareas similares. Ejemplo: En un ordenador, siempre usar Ctrl + la letra inicial de
una palabra para hacer la operación (Ctrt + C = Copiar).

 El Affordance: No existe un sinónimo de esta palabra en español, pero puede

interpretarse como dar una pista de algo que hay que hacer. Se refiere al atributo de un
objeto que permite a las personas saber cómo usarlo. Ejemplo: El botón del mouse incita
a presionarlo.

La importancia del diseño interactivo

El diseño interactivo es el arreglo
de gráficos, texto, videos, fotos, ilustraciones, sonidos, animación, imágenes
tridimensionales (3D), realidad virtual y otros medios en un documento
interactivo. Un documento interactivo puede ser una página web con texto y
enlaces a otras páginas web, o una aplicación autónoma más compleja que
use tipografía, gráficos, sonido y video con controles interactivos como pueden
ser botones, enlaces, etc. Ya sean simple o complejos, los mejores diseños
interactivos, presentan el mensaje de manera clara y tienen una interfaz fácil de
navegar , y que funciona adecuadamente con la tecnología que utilice el usuario
para desplegar el documento interactivo.
El diseño interactivo es un conjunto de disciplinas que engloba términos como el
diseño de software, de interfaz de usuario, diseño centrado en el usuario, diseño
de productos, diseño web, etc

Características.

El diseño debe tener un objetivo

Uno de los mayores principios del diseño de interacción es que debe tener
un objetivo. Estos objetivos se relacionan con las necesidades del usuario,
es por ello los diseñadores deben tener una idea clara sobre las
características, hábitos y preferencias de los usuarios. Esto no implica que
el diseñador se haga cargo de las entrevistas y la recopilación de
información de los usuarios, puede que otra persona se encargue de esta
tarea, sin embargo, el diseñador tendrá acceso a los resultados de la
investigación.
Algunas de las herramientas que se suelen usar para comprender a los
usuarios son las siguientes:

 Perfiles de usuarios: Se usan para poder tener una visión más amplia de los usuarios. En los perfiles
se incluyen no sólo datos generales sino específicos como las actividades que realiza en su tiempo
libre, sus intereses, metas, etc.
 Desarrollo de escenarios: Junto con los perfiles, se emplean para crear una especie de simulación del
momento en el cual el usuario interactuará con el producto. Desarrollar estos escenarios puede ser de
ayuda al momento de tomar alguna decisión de diseño.
 Mapas de experiencia de usuario: Estos mapas se emplean como un registro de la experiencia de
usuario basada en el contexto de una interacción. Incluye no sólo datos generales, sino también las
circunstancias de la interacción y las emociones posibles del usuario.
La interfaz debe ser sencilla de usar

Como es obvio, la usabilidad también juega un papel importante en el

diseño de interacción. En cualquier producto digital la usabilidad es una
característica deseada y necesaria. Después de todo, si la aplicación no es
sencilla de usar, es probable que no haya mucha gente dispuesta a
descargar la aplicación y usarla diariamente. El diseño de interacción,
entonces, considera la usabilidad de las interfaces de modo que sean más
sencillas de comprender y los usuarios puedan aprender a usarlas sin
dificultades.

Probablemente ya estás familiarizado con la usabilidad y todo lo que

implica. Después de todo, es probable que tengas un teléfono inteligente o
una tableta. De ser así, debes tener unas cuantas aplicaciones instaladas.
Todas estas aplicaciones permanecen instaladas en el dispositivo porque
facilitan una tarea y son sencillas de usar. Una de la mejores formas de
aprender sobre usabilidad es realizar una análisis sobre las aplicaciones
que tienes instaladas en tu móvil. Considera qué elementos de su interfaz te
facilitan ciertas funciones o tareas. Puede ser un ejercicio práctico y
divertido para aprender un poco sobre la usabilidad.

El proceso de aprendizaje debe ser rápido

En las páginas web se suelen usar ciertos patrones de interacción familiares

para que el usuario sepa cómo navegar por la página. En las aplicaciones
se emplea este mismo principio y se usan los gestos móviles para que el
usuario pueda manejar la aplicación más fácilmente. Debido a que se
acostumbra a ciertos gestos móviles para controlar el dispositivo, espera
usarlos también en la aplicación. Muchos desarrolladores emplean gestos
móviles conocidos por el usuario en su aplicación, de esta manera el
usuario aprende a usar la aplicación más fácilmente.

En ciertas ocasiones, será necesario enseñarle algunos gestos adicionales

al usuario por lo que nunca está de más colocar un tutorial o pequeños
consejos que guíen al usuario la primera vez que usa una aplicación.

Ten en cuenta los patrones de interacción conocidos por el usuario al

momento de crear una aplicación. También es de ayuda estudiar otras
aplicaciones y verificar qué tan rápido es el proceso de aprendizaje y qué es
lo que se hace para que este proceso sea sencillo.
Debe hacerse uso de indicadores visuales

Las prácticas establecidas y los patrones de interacción son de gran ayuda

al momento de crear una interfaz. Sin embargo, también se debe tener en
cuenta el aspecto visual de la interfaz. En este aspecto, también hay ciertas
características que los usuarios asocian a ciertos elementos típicos de una
aplicación. Por ejemplo, el hecho de que se emplee un menú hamburguesa en una
aplicación. Aunque este icono puede tener diversos estilos y colores, en
esencia nunca cambia. Esto sucede porque si el icono cambia, puede que el
usuario ya no lo reconozca como un menú hamburguesa.
Estas pistas visuales son importantes para mejorar la experiencia de
usuario y para que el proceso de adaptación del usuario sea más sencillo.

El tiempo de respuesta debe ser reducido

El tiempo de respuesta es una de las principales características de un buen

diseño de interacción. Como debes saber, el tiempo de respuesta influye en
la experiencia de usuario y es un factor esencial. Si tu aplicación posee un
gran diseño de interfaz que es sencillo de usar y entender, pero el tiempo de
respuesta no es el adecuado, es probable que los usuarios decidan dejar de
usar tu aplicación.
También es importante darle a entender al usuario cuando se ha
completado alguna acción o está en proceso. Estas dos prácticas mejoran
en gran medida la experiencia de usuario e incluso se podrían considerar
como medidas necesarias para que la aplicación sea usable. Si la aplicación
no da cierta información sobre las acciones que se están realizando, el
usuario no sabrá con certeza si dichas acciones han sido completadas o no.

En conclusión…
El diseño de interacción es una práctica que irá cobrando mayor importancia
conforme las nuevas tecnologías vayan avanzando. Te será útil aprender
los conceptos básicos sobre este tipo de diseño para que puedas crear
interfaces realmente increíbles para tus usuarios.

Herramientas para Creación de Diseño Interactivo

Plantillas Exclusivas Gratuitas para Infografías

Diseño Interactivo como el diseño de experiencias de usuario ha

evolucionado para facilitar la interacción entre el medio ambiente
y su gente. Sin embargo, hay una pequeña diferencia entre el
diseño de experiencia de usuario y el diseño de interacción: los
diseñadores interactivos están típicamente interesados en la
interacción entre los usuarios y el ordenador.
Sin embargo, este tipo de interacción requiere muchas
herramientas interactivas digitales. Y por eso, en esta entrada
vamos a presentarle las mejores herramientas interactivas para
su diseño web. Así, como un diseñador interactivo, usee estas
herramientas para optimizar su trabajo.
Divvy
Como diseñadores web utilizan varios programas, el espacio de la
pantalla se ve limitado. Por lo tanto, para controlar las
ventanas, Divvy por Mizage es una herramienta útil para los
diseñadores. La herramienta tiene la capacidad de controlar de
forma rápida y eficiente su ratón o el trackpad para empujar, tirar,
arrastrar o hacer clic en sus ventanas. Esta aplicación usa
sistema de red para administrar ventanas por medio de clic y
arrastre.

***
Sketch
Con su perfecta representación de texto, todo en Sketch es
intenso y fluido. Auto Save, iCloud o Retina, Sketch tiene todo. La
forma de integración de esta herramienta en OS es increíble y
con sus regulares actualizaciones, parece que las mejores
características siempre se ejecutarán puntualmente. No hay
diseñadores web que pueden trabajar sin red/grid y Sketch ofrece
la red muy flexible. Además, si Usted está buscando potentes
gráficos de vectores que son fáciles de usar y flexibles, Sketch es
la herramienta perfecta para Usted.

***
Skala preview
Skala es una interfaz de usuario y una herramienta del diseño de
iconos con una notable calidad de representación. Si desea
diseñar una aplicación o un sitio web para móviles en Photoshop
y quiere previsualizarlo fácilmente en un dispositivo móvil, Skala
es la solución ideal.
 ***
FitText
Para inflar un tipo web, FitText es la herramienta adecuada. Se
puede hacer flexibles los tamaños del fuente con este plugin
jQuery. Usted puede utilizar FitText en su diseño adaptable o
líquido para agregar titulares escalables.
 ***
Adobe Edge Reflow
Adobe edge reflow ha sido lanzado con la membresía Creative
Cloud. Esta herramienta contiene algo que cada diseñador web
desea: fluid canvas y una regla para diseño adaptablele. La
herramienta usa CSS y funciona como un navegador web.
 ***
Tridiv
Tridiv es un editor 3D para la creación de diseños 3D con CSS.
El editor ofrece una interfaz de cuatro paneles para cada plano,
así como un panel de vista previa para examinar el objeto final.
Usted puede crear varios objetos 3D sofisticados y editar HTML y
CSS en Tridiv.
 ***
Stylify Me
Si Usted desea examinar varios estilos y elementos visuales
comunes en la página web, como colores de texto, dimensiones
de imagen, colores de fondo o tipografía, Stylify Me es una
herramienta ideal para Usted. Permite a los diseñadores
investigar los estilos CSS de manera eficiente sin necesidad de
inspeccionar cada elemento. Todo lo que necesita hacer es,
simplemente escribir la dirección URL en la parte superior de la
página y hacer clic en el botón Stylify me.