diseño-de-interfaces-introduccion-a-la-comunicacion-visual

Diseño de interfaces
Título original: Interface Design
Textos: Dave Wood
Dave Wood ha hecho valer su derecho a ser identificado como autor de esta obra
según la Copyrigth, Designs and Patents Act de 1988.
Ni Bloomsbury ni el autor aceptarán ninguna responsabilidad por los daños
causados a cualquier individuo u organización por la acción u omisión de los
materiales de esta obra.
Coordinación editorial: UBEdició
Traducción: Marta Armada Antolín
Corrección: Martín Medrano
Adaptación de la edición: Montserrat Gómez Lao
Edición y redacción final: UBEdició
© Bloomsbury Publishing Plc, 2014
Bloomsbury es una marca registrada de Bloomsbury Publishing Plc
© 2015 ParramónPaidotribo
www.parramon.com
[email protected]
Derechos exclusivos de edición en castellano
Primera edición
ISBN: 978-84-342-3846-6
ISBN EPUB: 978-84-342-6247-8
Prohibida la reproducción total o parcial de esta obra mediante cualquier recurso
o procedimiento, comprendidos la impresión, la reprografía, el microfilm, el
tratamiento informático o cualquier otro sistema, sin permiso escrito de la
editorial.
Sumario
Introducción
Capítulo 1
Comunicación visual: Un estándar en el diseño de interacción
Capítulo 2
Cómo encontrar el flujo: El diseño de la interacción
Capítulo 3
Diseño gráfico para medios digitales
Capítulo 4
El diseño de la experiencia estética de usuario
Capítulo 5
La colaboración con el programador
Capítulo 6
El uso de las interfaces para aumentar las capacidades humanas
Glosario
Índice
Créditos de las imágenes
Agradecimientos
Introducción
Una interfaz es el punto de contacto entre los humanos y las máquinas. La
interfaz de usuario [UI, del inglés User Interface] de un ordenador,
smartphone, tableta o consola de videojuegos está compuesta de una capa
“front-end” visual e interactiva que se comunica con un sistema de
programación “back-end” que procesa los datos. Las interfaces “front-end”
se conocen como interfaces gráficas de usuario [GUI, del inglés Graphical
User Interfaces].
El buen diseño de interfaz combina la usabilidad, la funcionalidad y la
estética para conseguir un resultado satisfactorio, basado en los requisitos y
expectativas del usuario. Por tanto, los diseños de interfaz deberían
centrarse en las necesidades y expectativas del usuario, y no en lo que le
parezca lógico o le guste al programador o al diseñador.
Al conductor de un coche no le interesa leerse un pesado manual, ni
entender la compleja ingeniería mecánica de la carrocería, ni sentirse
confundido ante un panel de control demasiado complicado; cuando se
monta en el coche, lo único que quiere es girar la llave del contacto y
conducir. Del mismo modo, cualquiera que se enfrente a una interfaz nueva
por primera vez quiere que un buen diseño le facilite con rapidez el
resultado de su interacción. Esto quiere decir que la estética y las
funcionalidades de la interfaz deben combinarse para producir una
experiencia de usuario fantástica.
Los recursos online que acompañan a este libro están disponibles en:
http://tinyurl.com/examplegrid.
Por favor, escribe la URL en tu navegador y sigue las instrucciones para acceder
a la página web de Companion. Si tienes cualquier problema, ponte en contacto
con Bloomsbury en: [email protected]
Objetivos
El objetivo de este libro es triple:
En primer lugar, trata de enfrentarnos desde la perspectiva del diseño gráfico a
los cómo y los porqué de diseñar interfaces de usuario.
En segundo lugar, es un viaje exprés a través de la importancia de la experiencia
de usuario, lo que nos enseñará a diseñar mejores interacciones para humanos,
no para máquinas.
En tercer lugar, este libro analiza los principios del diseño y destaca la
importancia de que la usabilidad y la estética trabajen a la par; también muestra
cómo conseguirlo. No se trata de un libro técnico sobre interfaces, sino que
ofrece conceptos sobre la comunicación visual y aboga por el diseño gráfico
como un estándar válido en el diseño de interfaces.
Además, y tal vez lo más importante, este libro demuestra que diseñar para
experiencias dinámicas de usuario significa enfrentarse a oportunidades
fantásticas para facilitar de manera creativa el control del usuario. Diseñar
mejores interacciones para un usuario no significa que el diseñador pierda el
control sobre la estética, sino más bien todo lo contrario.
En este libro se evitan los términos “diseñador visual” y “diseño visual”, aunque
se usan a menudo para describir tanto las funciones como los resultados del
diseño de la interfaz. Estos términos no tienen en cuenta la riqueza de la
comunicación visual que cualquier diseñador con esta experiencia aporta al
diseño de interfaces.
Los capítulos
El capítulo 1 se centra en establecer la importancia de la comunicación visual en
el diseño de interfaces y la responsabilidad del diseñador hacia el usuario.
El capítulo 2, antes de examinar la arquitectura de la información, profundiza en
el diseño de interacción mediante una serie de interfaces gráficas de usuario.
El capítulo 3 crea un marco de trabajo de puntos importantes en el diseño gráfico
para medios digitales: composición, color, iconografía, imágenes y tipografía.
El capítulo 4 desarrolla este marco de trabajo y aplica estas bases de la
comunicación visual para facilitar de manera eficaz una experiencia de usuario
interactiva satisfactoria.
El capítulo 5 ofrece ayuda práctica para que los diseñadores mejoren su
comunicación con los programadores, y analiza las necesidades de cada uno.
Por último, en el capítulo 6, el libro concluye observando el diseño de
interacción a través de nuestros sentidos y nuestro entorno.
1
Comunicación visual: Un estándar en el diseño de
interacción
El diseño de interfaces de usuario (UI) une a un equipo de especialistas para
crear una experiencia interactiva satisfactoria para el usuario. Jorge
Frascara, profesor de diseño de comunicación internacionalmente
reconocido, explica la comunicación visual como un énfasis del método
(diseño), el objetivo (comunicación) y el medio (visual) mediante la
manipulación del texto y las imágenes que lleva a un resultado gráfico. Por
definición, las habilidades de comunicación visual de un diseñador gráfico
son vitales para asegurar la accesibilidad estética de una interfaz; esto se
trabaja a lo largo de todo el proceso de diseño de la interfaz.
Este capítulo contempla la comunicación visual como parte de la disciplina
del diseño y también como un estándar a la hora de diseñar la interacción
en un equipo de diseño de interfaz colaborativo.
Cómo comunicar la interfaz
Diseñar una interfaz es un proceso complejo en el que están implicados el
equipo de diseño de UI, los usuarios objetivo y el cliente. Se trata de un
proceso iterativo, que incluye fases de investigación de usuarios, ideación,
pruebas, construcción y más pruebas; todas estas fases son decisivas a la
hora de diseñar una experiencia de usuario interactiva. Aunque el
diseñador gráfico es importante en el proceso de diseño, no es más que una
parte de un equipo formado junto con otros especialistas. Los diseñadores
gráficos deben confiar en su propio conocimiento especializado para diseñar
con éxito la estética de la interfaz, pero también deben tener un
conocimiento contextual más amplio para comunicarse con el resto del
equipo. Esta comunicación empieza en la fase de ideación, mucho antes de
que se haya desarrollado el código o el diseño.
Diseñadores gráficos en el equipo de UI
A menudo se producen malos entendidos sobre lo que puede y debe contribuir
un diseñador gráfico al diseño de interfaz: suele ser común la idea de que el
diseño gráfico consiste tan solo en crear gráficos para “vestir” el código de la
interfaz; se considera que esta fase de “diseño visual” de decoración ocurre al
final del proyecto, cuando el resto del equipo ya ha hecho el trabajo “de verdad”.
La idea equivocada de qué aporta el diseñador gráfico al diseño de la interfaz, y
en qué momento, surge de centrarse de manera desafortunada en la palabra
“gráfico”. El diseño gráfico no consiste en diseñar gráficos, sino en diseñar una
comunicación visual eficaz. El diseñador gráfico crea esta comunicación
mediante la manipulación del texto y de la imagen para producir una estética
adecuada para un público concreto.
En cualquier interfaz, la estética es una parte integral de la experiencia de los
usuarios: les guía hacia las interacciones clave de la interfaz y les permite
alcanzar sus objetivos. Comunica la acción y el contenido, creando conexiones
entre el corazón y la cabeza del usuario que facilitan los resultados interactivos.
A través del diseñador gráfico, la comunicación visual se convierte en un
estándar importante en el diseño de interfaces, lo que, en última instancia,
conduce al diseño hacia una mejor experiencia de usuario. La estética llama y
mantiene la atención del usuario antes de que haga clic en ningún enlace o de
que procese ningún código. Por consiguiente, las habilidades del diseñador
gráfico deberían utilizarse a lo largo de todo el proceso de diseño, no solo al
final.
1.1
1.1
Navegación innovadora
La combinación de una comunicación visual potente y de un código atractivo
puede crear una experiencia de usuario fantástica. El estudio de diseño
canadiense GRIP sabe cómo hacerlo. La navegación y la manera de mostrar el
contenido en su página web son muy innovadoras, y la impactante comunicación
visual atrae y separa el contenido. www.griplimited.com
Ni de Marte ni de Venus
En un equipo de diseño de interfaces, cada especialista contribuye de una
manera distinta. Los arquitectos de la información crean la estructura interactiva.
Los diseñadores de experiencia de usuario [UX, del inglés User Experience]
crean la experiencia. Los programadores crean un código limpio. Los
diseñadores gráficos comunican la jerarquía visual, la funcionalidad y la
interacción de la interfaz.
En cualquier equipo puede existir tensión entre los distintos especialistas. En un
equipo de diseño de interfaces, estas tensiones suelen deberse esencialmente a
los costes, los distintos lenguajes de los especialistas y las distintas perspectivas
sobre cómo diseñar una interfaz. Si damos por bueno lo que se dice en los
muchos foros de debate online, existe una tensión especial entre los diseñadores
de interfaz y los programadores. Tanto que podría afirmarse que los primeros
vienen de Marte y los segundos, de Venus.
Es difícil ver un proyecto desde el punto de vista del otro, pero si se quiere
diseñar con éxito una interfaz, es crucial que ambos colaboren.
Un buen diseñador trabajará dentro de las limitaciones del encargo (como, por
ejemplo, el presupuesto, la accesibilidad, el usuario objetivo y la tecnología
disponible), dando forma a los elementos visuales de texto e imagen para
comunicar el contenido y la navegación. Las limitaciones animan a los
diseñadores a crear buenas soluciones mediante la colaboración con el resto del
equipo de diseño de interfaz.
El resultado del trabajo conjunto del diseñador y del programador será una
interfaz con un código bien escrito y con una estética que atraiga, retenga la
atención y sea usable. Para asegurar que se ha conseguido este resultado, la
interfaz se someterá a algún tipo de prueba de usuarios en algún punto del
proceso de diseño. El experto en usabilidad Steve Krug sugiere distintos
métodos para realizar estas pruebas (véase su entrevista en las páginas 28-31).
El equipo de diseño de interfaz
Lo ideal es que un equipo de diseño de interfaz incluya al menos:
—Un arquitecto de la información que defina la estructura interactiva.
—Un diseñador de experiencia de usuario que haga la interfaz que sea útil tanto
para el cliente como para el usuario.
—Un diseñador gráfico que dé forma a la accesibilidad estética de la interfaz.
—Un programador que escriba el lenguaje de mercado front-end y el código
back-end .
1.2
1.2
Marte y Venus
No todos los equipos de diseño sucumben al choque de puntos de vista de
diseñadores y programadores. Algunas empresas como Athlon Productions creen
en la colaboración estrecha para conseguir diseños satisfactorios.
www.athlonproduction.com
1.3
1.3
Experiencia de usuario
El programador alemán Martin Gauer utiliza un buen código y una
comunicación visual de calidad para crear experiencias de usuario innovadoras y
exitosas. http://attackemart.in
1.4
1.4
Diseñadores en forma de T de IDEO trabajando
El trabajo de IDEO en el diseño de interacción va más allá de las interfaces; sus
diseñadores en forma de T trabajan en equipo junto con programadores,
psicólogos e ingenieros para crear grandes experiencias interactivas de usuario.
www.ideo.com
Diseñadores en forma de T
IDEO, consultora internacional de diseño, utiliza la metáfora de los diseñadores
“en forma de T” para describir a los buenos diseñadores. Los diseñadores en
forma de T son aquellos con un conocimiento especializado profundo de su
propia disciplina, lo que les permite tener confianza a la hora de explicar lo que
hacen a los distintos miembros especialistas del equipo. El asta vertical de la “T”
mayúscula representa este conocimiento especializado.
Pero para un diseñador en forma de T sus habilidades no acaban con el
conocimiento especializado profundo, sino que también desarrollan un
conocimiento contextual secundario acerca de cómo funcionan otras disciplinas,
y un entendimiento terciario más amplio de los contextos socioculturales,
políticos, éticos, ecológicos, económicos y tecnológicos. Al fin y al cabo, el
diseño no existe en el vacío. En la metáfora de la T, estos niveles secundarios y
terciarios de conocimiento no especializado forman la barra superior de la T
mayúscula.
1.5
1.5
Diseño en forma de T
La idea del diseño “en forma de T” pone de manifiesto la importancia del
conocimiento especializado profundo junto con una conciencia más amplia de
los factores contextuales.
El diseño del flujo interactivo
A lo largo del proceso de diseño, la contribución del diseñador gráfico al
equipo tiene un amplio alcance antes de convertirse en específico. Diseñar
para la interacción es en realidad diseñar el “flujo” a través del proceso
interactivo, de manera que cree una experiencia agradable y estética para el
usuario. La interacción es un bucle de causa/efecto/retroalimentación; a
través de estos pasos, el usuario experimenta un flujo. La interfaz es el
control visible de ese flujo, y la usabilidad es el resultado de un flujo
diseñado pensando en el usuario.
Este flujo es inmersivo, ya que no siempre el usuario es consciente de que está
en él. Si la interfaz está bien diseñada,la experiencia de usuario es un disfrute
positivo y subconsciente de la interacción. Pero si el diseño causa problemas, el
flujo se interrumpe y se saca al usuario de esa inmersión. Así que para diseñar de
forma correcta un flujo hay que tener en cuenta las siguientes preguntas:
—¿El usuario SABE qué hacer en la interfaz?
—¿Puede HACER lo que quiere hacer?
—¿SIENTE que ha conseguido algo al completar una acción?
1.6
1.6
Bucle de interacción
Si el usuario sabe qué debe hacer, también necesita sentir que lo ha conseguido.
Esto implica un mapa mental, control y retroalimentación: un bucle de
interacción (esta ilustración está basada en un diagrama de Bill Verplank).
El diseñador gráfico en el flujo
El proceso de diseño de interfaz es siempre el mismo, sea más próxima o más
lejana la fecha de cierre del proyecto. En el marco de trabajo conceptual
existente del proceso de diseño de una interfaz, existe una tendencia a colocar al
diseñador gráfico al final del flujo bajo el título de “diseño visual”. Sin embargo,
desde el principio el diseñador gráfico puede realizar aportaciones muy valiosas
al look and feel de la interfaz, ya que puede tratarse de la producción de
personas, de la arquitectura de la información, de los wireframes y de los
prototipos en papel de la interfaz. Antes de que corregirlos sea demasiado caro,
puede dar forma a la jerarquía, la navegación y el contenido, lo que ayuda a
identificar y corregir desde el principio los problemas de comunicación visual
que podrían afectar a la usabilidad.
1.7
1.7
Posición del diseño gráfico
En este diagrama, la altura de los círculos coloreados representa las
especialidades de diseño que lideran y apoyan en cada parte del proceso. Este
diagrama demuestra dónde deberían utilizarse las funciones de comunicación
visual del diseñador gráfico. Tal como puede verse, no es al final del proceso de
diseño de la interfaz.
El usuario es el rey (tú no lo eres)
Todos somos usuarios. Todos conocemos la frustración que sentimos cuando
una interfaz nos ofrece una mala experiencia, pero los miembros del equipo
de diseño no son un usuario típico: saben demasiado, lo que a la hora de
diseñar una interfaz les impide ser objetivos. La frustración del usuario
suele achacarse a él mismo o a la interfaz, o a ambos. Sin embargo, cuando
esta hace bien su trabajo y el usuario consigue alcanzar sus objetivos con
facilidad, el placer que esto le provoca se atribuye a la experiencia de
usuario. Resumiendo, una buena interfaz es aquella que es “invisible”.
Cuando se involucra con una interfaz, el usuario, ya sea hombre o mujer, joven o
viejo, tiene ciertos objetivos personales, como por ejemplo ver una película
(interfaz de un Blu-ray), seleccionar un personaje (interfaz de un juego),
comprar un libro (interfaz de un comercio electrónico) o saber el tiempo que
hará mañana (interfaz de una aplicación). No necesariamente estos objetivos son
los mismos que los que tiene el programador, el diseñador o, incluso, el cliente.
El usuario puede ser quien paga al cliente, pero su interés radica en lograr un
buen resultado a partir de su propia interacción; esto es lo que debe conseguir el
equipo de diseño.
1.8
1.8
Sobrecargar al usuario
Tal vez el usuario no tenga la misma destreza interactiva que el equipo de
diseño. No hay que agobiarle con demasiadas funcionalidades, sino averiguar
cuál es su flujo y diseñar para él. Haciendo esto nos aseguramos de que en todo
momento el usuario sea el centro durante el diseño de la interfaz. En este
ejemplo de Baldur’s Gate, las llamadas a la acción contextuales deshabilitadas
indican que esas opciones no están disponibles en ese punto de la interacción.
Equilibrar las necesidades del cliente y del usuario
Un flujo interactivo fluido es el resultado de una investigación meticulosa,
implementada en una arquitectura de la información clara. El cliente no es el
usuario final real. Si la investigación está basada solo en el estudio de mercado
del cliente, el flujo resultante reflejará únicamente lo que a ellos les gustaría
destacar en la interfaz. Los deseos del cliente y las necesidades del usuario deben
equilibrarse para que el cliente obtenga un retorno de su inversión [ROI, del
inglés return of investment] y el usuario consiga una interfaz adecuada.
Esto puede conseguirse mediante una investigación de usuario más profunda,
que le involucre de un modo u otro en cada etapa del proceso de diseño.
Centrarse en diseñar la experiencia de usuario enmarca las decisiones de diseño
en un contexto que obliga a todo el mundo a ser empático con otro ser humano:
el usuario. Esta empatía anima al equipo de diseño y al cliente a crear una
interfaz que ayude a los usuarios a conseguir sus objetivos individuales.
1.9
1.9
El usuario es el rey
Este diagrama, basado en el de la página 19, que demostraba el
reposicionamiento del diseñador gráfico en el proceso de diseño de la interfaz, se
centra en dónde encaja el usuario dentro de este proceso. Visualizado en una
capa blanca, queda claro dónde “está” el usuario. El usuario necesita estar
constantemente en el centro del diseño de una interfaz.
Cómo definir al usuario
El término “usuario” es muy genérico y abstracto. Desde hace tiempo, los
especialistas en márketing han intentado definir en qué categorías demográficas
encajan los consumidores. ¿Cuál es nuestra edad, género, religión, orientación
sexual, altura o peso? ¿Dónde vivimos, compramos, hacemos ejercicio o
trabajamos? ¿Cuál es nuestro nivel de ingresos? Estos datos estériles ayudan a
los clientes a orientar con eficacia sus productos y servicios hacia los grupos
demográficos más relevantes, pero como seres humanos somos más que esto.
Por tanto, y en términos de interfaz, ¿qué es un usuario? Todos tienen distintos
niveles de experiencia en distintas zonas de sus vidas; tienen diferentes
necesidades y esperan cosas distintas de las interacciones que se encuentran a
diario. El diseñador de producto Philippe Starck tiene un método para
rehumanizar a la gente para la que trabaja su equipo. Él insiste en que sus
diseñadores no se refieran a ellos como “usuarios”, sino llamándoles con
expresiones como “mi amigo”, “mi socio”, “mi madre” o “mi padre”.
Personalizando de esta manera al usuario, Starck fuerza a sus diseñadores a
infundir una persona humana en el, de otro modo, usuario abstracto. Así será
más fácil diseñar para sus objetivos, ya que se les dota de una personalidad. A
esta idea es lo que llamamos personaje ficticio o persona de usuario.
1.10
1.10
Anatomía de un perfil
En su evaluación de los perfiles de distintos tipos de usuarios de Twitter, Ciaran
Duffy creó unos arquetipos de personalidad que contienen 1) una imagen, 2) un
nombre, 3) información de contexto, 4) objetivos y 5) retos a los que se
enfrentan. Estos divertidos perfiles son similares a la información que se utiliza
en una persona de usuario.
1.11
1.11
Perfiles de juego
Los jugadores de videojuegos están familiarizados con los perfiles de personaje.
Para enriquecer la experiencia de juego, cada personaje tiene un perfil detallado
y una historia. Podemos pensar en un perfil de persona de usuario como si se
tratara de un personaje de un videojuego.
El diseñador de personajes ficticios
Los personajes ficticios son una herramienta importante para los diseñadores. Se
trata de un arquetipo (no un estereotipo) creado para representar al usuario de
manera que inspire al equipo de diseño. Se trata de un perfil con un nombre, una
imagen y una cantidad de información variable sobre cada tipo de usuario. Para
crear personajes ficticios que sean realmente valiosos para un proyecto, hace
falta que un diseñador gráfico esté implicado en el proceso.
En esencia, los personajes ficticios son una hoja de personaje creada a partir de
información sobre los usuarios típicos de la interfaz, recopilada durante la fase
de investigación. Podemos decir que son una interfaz entre el diseñador y un
conocimiento mucho más profundo de cada tipo de usuario. Este enfoque
humaniza una parte abstracta del proceso de diseño, lo que ayuda a los
diseñadores a generar una idea realista para conducir al usuario a su objetivo y a
entender cómo debería satisfacerlos la interfaz. Ante cualquier duda, el equipo
de diseño debería preguntarse: en este punto, ¿qué querría la persona A o B?
Componentes del personaje ficticio
Los personajes ficticios constan de una narrativa basada en la investigación de
usuario:
Una foto para humanizar a la persona
Nombre y título descriptivo
Información de contexto
Objetivos
Cita para resumir sus expectativas
Desglose de los retos a los que se enfrenta
1.12
1.12
Personaje ficticio
Durante la fase de creación de ideas, el uso de personas ayuda al equipo de
diseño a identificar su público objetivo y a resumir las motivaciones,
expectativas, experiencia, conocimiento y deseos de los usuarios.
Entrevista: Steve Krug
Usted ha dicho que existe un elemento de sentido común en la usabilidad.
¿Podría explicarlo?
Jakob Nielsen dijo que la usabilidad está basada en la naturaleza humana. La
tecnología cambia muy rápido, pero la naturaleza humana cambia muy despacio.
Por tanto, las mismas cosas que nos confundían hace diez años siguen
confundiéndonos hoy.
En cuanto a usabilidad, creo que los diseñadores son mucho más sofisticados.
Hace diez años era muy desigual: mucha gente todavía estaba en transición
desde el mundo de la impresión y aún no lo habían superado. Nunca habían visto
una prueba de usabilidad. Nunca habían trabajado con alguien que supiera de la
experiencia de usuario. Pero creo que desde entonces los diseñadores gráficos
han avanzado mucho.
Así que, en general, creo que el nivel de conciencia necesario para tener al
usuario en mente ha aumentado de manera espectacular: es raro ver a alguien
que ignore esto por completo, aunque puede que sigan cometiendo toda clase de
errores, porque es difícil hacerlo bien. Incluso los diseñadores más sofisticados y
con mucha experiencia cometen errores. Por eso siempre abogo por hacer
pruebas de usabilidad, seas quien seas; porque hay ciertas cosas de las que no te
vas a dar cuenta hasta que veas de verdad a alguien intentando usarlas.
Ha mencionado que los diseñadores sofisticados pueden cometer errores en
la interfaz. En su libro dice que “no existe una forma correcta o incorrecta
de hacerlo, sino lo que funciona y lo que no”. ¿Podría profundizar esto?
Creo que hay que ser muy pragmático. Puede implementarse prácticamente
cualquier idea de diseño. Puede implementarse bien, o puede que mal.
Ese es el problema del diseño de interfaces. Todos los usuarios no son el
mismo usuario. Cada interfaz que diseñas no es exactamente la misma que
la última que has hecho. Creo que esta actitud pragmática es algo que el
diseñador debe incorporar, porque no se puede diseñar bien todo el tiempo,
¿verdad?
Es cierto: lo único que impide que tu trabajo acabe en desastre son las pruebas
de usabilidad. Creo que todos tratamos de hacerlo lo mejor posible, siguiendo
nuestros instintos; pero después tienes que observar a la gente tratando de usar tu
diseño. Es entonces cuando sabes si lo has hecho bien o no. No existe otra forma
de saberlo.
Profesión
Consultor de usabilidad web (Boston, EE. UU.)
Experiencia
Autor de No me hagas pensar: una aproximación a la usabilidad en la web
Web
www.sensible.com
1.13
1.13
Prueba de usabilidad
Una prueba de usabilidad simple puede realizarse usando un ordenador portátil
(o de sobremesa, un televisor o una consola de videojuegos) y una cámara de
vídeo. Steve Krug sugiere realizarla a tres o cuatro personas (que no sean del
equipo de diseño) para revelar cualquier problema en la interfaz que deba
corregirse. Se prepara una tarea para poner a prueba el diseño y se pide a cada
persona que la realice. Un observador debe tomar notas (lo ideal es que observe
la prueba mediante vídeo) y, después, dar parte al equipo de diseño.
1.14
1.14
Observación
Contemplar al usuario desde otra habitación mediante un enlace de vídeo
permite al equipo de diseño observar cómo está funcionando la interfaz. Las
pruebas de usuario con una cámara montada en un trípode (o cualquier otro
soporte) permiten que se observe un comportamiento más natural. Incluso se le
puede pedir al usuario que realice una tarea en una tableta o un smartphone y
observarlo.
Cuando se diseña para personas con discapacidades se es, obviamente, más
inclusivo. ¿Ha encontrado algo en sus workshops que pueda hacer llegar el
mensaje de la accesibilidad a los diseñadores jóvenes?
Recuerdo haber leído acerca de algunos estudiantes a los que se les hacía usar
una página web llevando gafas con una graduación incorrecta, y me pareció una
muy buena técnica. Sigo creyendo que la mejor opción es hacer que la interfaz
sea usable. Hay que deshacerse de los problemas mayores: cuando en una prueba
de usuarios observas a una persona discapacitada enfrentarse a un problema que
existe para todo el mundo, te das cuenta de que para ellos es diez veces peor.
En el capítulo 2 de este libro hablamos sobre la jerarquía, los wireframes y
los prototipos en papel. Desde el punto de vista de las pruebas de usabilidad,
¿cuál es su opinión sobre hacer prototipos en papel de los primeros diseños,
antes de aplicar ningún tipo de código ni branding?
Bien, creo que es una gran idea que funciona muy bien. Siempre digo que se
puede probar cualquier cosa, pero la verdad es que no hay tantas cosas que se
puedan probar con wireframes. Puedes probar la navegación, algunas partes de
la jerarquía y ese tipo de cosas, pero no vas a llegar muy lejos. En cambio, por
tosco que sea, con un prototipo en papel sí que puedes. Sin embargo, es difícil
que la gente lo haga, salvo que ya lo hayan visto hacer y tengan experiencia con
ello.
¿Diría que en esencia una buena interfaz es algo que se convierte en
“invisible” porque la experiencia de usuario permite que la gente consiga
sin esfuerzo lo que quieren de la interfaz?
En muchos casos, si usas una cosa y no te das cuenta de que tiene una interfaz,
es probable que signifique que la interfaz está tan bien afinada que se ajusta
constantemente a tus expectativas. Por eso no te das cuenta de que existe, porque
cumple tus expectativas. Es evidente que esto es algo bueno. Siempre y cuando
el aspecto no dificulte que el usuario haga lo que quiere hacer, puede ser tan
bonita como quieras. Estoy muy a favor de las aplicaciones diseñadas con estilo.
¿Hay algún consejo que le daría directamente a un diseñador, a diferencia
de a un programador?
Aunque puede ser difícil tratar a toda esta gente como a amigos, trata de
encontrar una forma de respetar las tareas del resto del equipo de diseño. Tal vez
a ti no te lo parezca, pero su trabajo es tan difícil como el tuyo. Al comienzo de
cada proyecto nuevo, están asustados e intimidados, incluso aunque no lo
parezca. Los programadores están tan asustados como los diseñadores; y los
gestores de proyecto están tan asustados como los programadores.
Caso de estudio
Página web de We Print Paper
El proyecto
elloDave es una joven agencia creativa con sede en Reino Unido especializada
en diseñar campañas de márketing online e impresas. Esto se extiende a diseñar
la presencia web, en especial para nuevas empresas startup. Una de estas
empresas, We Print Paper, necesitaba ayuda para desarrollar una página web
mediante la cual pudieran vender sus servicios económicos y automatizados de
impresión. Al tratarse de una startup, elloDave contaba con una fecha de entrega
flexible, que se extendió durante seis meses.
Uno de los empleados de elloDave era Ben Pritchard, estudiante de último curso
de diseño gráfico, quien, como parte de la plantilla, fue el responsable de la
dirección de arte de la página web. Ben llevó a cabo la investigación, estudiando
los servicios que la competencia del cliente ofrecía y lo que en verdad querrían
los visitantes. elloDave se dio cuenta de que para el usuario el proceso de pedido
era un punto de venta único, lo que podría explotarse sutilmente a favor del
cliente.
La investigación de Ben también reveló que la mayoría de los usuarios tendría
experiencia en nuevas tecnologías y con diseños digitales listos para imprimir
online. Este conocimiento generó unas necesidades de usuario y unos objetivos
claros para los que diseñar.
Proyecto
www.weprintpaper.co.uk
Equipo de diseño
elloDave, Staffordshire, UK
Cliente
We Print Paper
1.15
1.15
Ideas originales
Cuando Ben empezó a trabajar en elloDave, el cliente no estaba contento con su
página web original. Comenzó un rediseño total de la página web, desde el
principio, y se llegó al diseño final tras seis iteraciones. La primera iteración del
rediseño comenzó definiendo unas áreas horizontales de contenido y cambiando
los iconos de colores brillantes por un enfoque mucho más sutil.
1.16
1.16
Composición de la tercera versión
A lo largo de cada iteración del diseño, Ben compuso la interfaz en Adobe
Photoshop e Illustrator, lista para ser convertida a CSS3. Etiquetó todas las capas
para que el programador pudiera exportarlas con facilidad y usarlas en el código.
1.17
1.17
Versión final: Boceto en Illustrator
El diseño de la estética de la interfaz final se realizó primero en Illustrator.
Gracias a la precisión que permite el programa vectorial, los elementos de
interfaz se alinearon a una retícula.
1.18
1.18
Versión final: Composición en Photoshop
Al final, el diseño se trasladó a Photoshop para poder separar los distintos
componentes modulares de la interfaz, que se ajustaron al píxel y se etiquetaron,
listos para ser codificados.
La contribución del diseñador gráfico
Durante las primeras reuniones de planificación, el equipo de diseño estudió y
definió la arquitectura de la información (AI) del sitio. A partir de la AI,
revisaron los diseños que podrían funcionar para el usuario y los que no, y lo que
el cliente necesitaba como retorno de su inversión. Acordaron entonces los
requisitos técnicos y estéticos necesarios para crear la mejor experiencia de
usuario y, por consiguiente, vender el producto y los servicios del cliente. En un
principio, ellos mismos iban a desarrollar el código de la página web, pero
debido a que la principal función tras el modelo de negocio del cliente era el
proceso de pedido, fue necesaria la ayuda más especializada de un programador
freelance.
Trabajando codo con codo con el programador, Ben colaboró dando forma a la
estética y al código para crear la experiencia de usuario deseada. Mediante un
diálogo continuo, el diseñador gráfico y el programador encontraron distintos
modos de diseñar la estética y generar el código. Utilizando marcadores HTML
y CSS y programación del lado del servidor, el programador conectó el sistema
de subida de archivos a un sistema de pedidos back-end.
Un Ben en forma de T
El proyecto llevó seis meses. Durante ese tiempo pasó por seis iteraciones de la
experiencia de usuario hasta que en elloDave estuvieron satisfechos. Las
decisiones que tomó Ben en cuanto a comunicación visual generaron
prestaciones visuales (pistas o indicadores) en el código del programador.
Utilizaron una paleta de colores restringida para sutilmente agradar a los
usuarios del cliente.
Trabajando junto con el programador, Ben separó sus diseños finales en
componentes ya preparados para ser desarrollados. Algunas partes del diseño
serían imágenes (etiquetadas para el programador), otras se visualizarían
mediante código CSS.
Durante este proyecto, Ben demostró con claridad su desarrollo para ser un
diseñador “en forma de T” (véase página 15). Cuando comenzó el proyecto era
un estudiante de último año que trabajaba por las mañanas como diseñador
gráfico profesional para elloDave. Gracias a que durante el proyecto se involucró
con todos los miembros del equipo de diseño, aprendió exactamente lo que
puede llegar a contribuir un diseñador gráfico a un proyecto de diseño complejo.
2
Cómo encontrar el flujo: El diseño de la interacción
Hemos visto que para diseñar una buena interfaz se necesita un proceso
iterativo, y que la comunicación visual es una parte importante de dicho
proceso. Para ilustrar cómo contribuye el diseñador al diseño de la interfaz,
en este capítulo analizaremos temas como la arquitectura de la información,
la navegación, los wireframes y los prototipos en papel. Todos estos
elementos aparecen durante las primeras fases de ideación y delimitación
del alcance del diseño de la interfaz, antes de que comience el branding.
Este capítulo nos llevará a las entrañas de la interfaz gráfica de usuario
(GUI) para revelar cómo se diseña el flujo de la interacción.
Interfaces gráficas de usuario
Los humanos no fueron programados para utilizar ordenadores, lo que
implica que los ordenadores (en todas sus formas) tienen que ser
programados para tratar con humanos; las interfaces permiten la
interacción entre ambos, de manera intuitiva y mediante el input directo y
la retroalimentación inmediata. En los medios electrónicos, nos referimos a
la interfaz como interfaz gráfica de usuario (GUI). Las GUI crean
prestaciones visuales (“pistas” acerca de la utilidad de elementos concretos)
a través del diseño gráfico, que mediante el uso de metáforas visuales
comunica la navegación, la interacción y el contenido en una interfaz.
Tradicionalmente, las GUI se han diseñado con el paradigma WIMP
[ventanas, iconos, menús y puntero, del inglés windows, icons, menus and
pointer]. En la actualidad, en la gran variedad de medios electrónicos
digitales, encontramos muchos tipos de interfaces post-WIMP.
Ventanas, iconos, menús, puntero (WIMP)
En el software que utilizamos a diario, tanto en nuestra vida personal como en la
profesional (como por ejemplo Adobe InDesign, Illustrator y Photoshop), muy a
menudo nos encontramos con interfaces WIMP; estamos acostumbrados a sus
metáforas: abrimos ventanas en nuestro ordenador, seleccionamos opciones de
un menú a través de un cursor y clicamos en los iconos para realizar tareas en
nuestros ordenadores personales, reproductores de DVD, televisores y
videojuegos. Podemos encontrar interfaces en la web y acceder a ellas mediante
navegadores; también están en las guías de programación de los canales de
televisión por cable o satélite, en los reproductores de DVD o Blu-ray, en las
consolas de videojuegos y, gracias a los dispositivos móviles, en nuestras manos.
En las interfaces WIMP, la entrada de datos está controlada predominantemente
por un ratón de ordenador, aunque también existen otros dispositivos de entrada
como un lápiz óptico, un mando a distancia, un mando/joystick/volante de una
consola o el trackpad de un portátil.
2.1
2.1
WIMP
Las interfaces WIMP (ventanas, iconos, menús y punteros) dependen de
dispositivos de entrada, como un ratón, para hacer selecciones de menús e iconos
usando el cursor del ratón como puntero; el contenido se muestra en ventanas.
Las interfaces WIMP están llenas de prestaciones visuales para que los usuarios
puedan interactuar con el ordenador. Aunque no son tan rápidas como la línea de
comandos, para aquellos que no somos ingenieros informáticos, estas interfaces
son mucho más fáciles de usar.
Post-WIMP
Los ordenadores personales no son solo de sobremesa. También encontramos
interfaces gráficas de usuario en nuestros smartphones y tabletas, en los que la
interacción se realiza de forma más táctil y directa. Vivimos en un mundo postWIMP en el que la entrada de datos mediante una GUI para acceder al contenido
es mucho más directa. Los inputs de las interfaces post-WIMP ya no son el
puntero de un ratón; ahora podemos navegar por las ventanas, seleccionar los
menús y clicar en los iconos mediante el tacto y los gestos. El diseñador ya no
puede diseñar una única variación de la solución metafórica de interfaz WIMP,
sino que el equipo debe diseñar para la experiencia de usuario de formas nuevas
y excitantes, en las que el usuario es el controlador de entrada.
En estas nuevas aplicaciones y dispositivos digitales que utilizan interfaces postWIMP, la interacción se produce tanto a través del input sensorial del tacto (las
yemas de los dedos o pulgares) como de los gestos (los movimientos de la mano
o del cuerpo). Para diseñar con éxito para esta forma de interacción, el equipo de
diseño debe comprender:
—la psicología del usuario y sus necesidades
—la tecnología que se va a utilizar
—los deseos del cliente y demás partes interesadas
2.2
2.2
Interacción táctil
En una interfaz post-WIMP, el diseño de las interacciones debe considerar un
input mucho más directo para acceder al contenido mediante el tacto.
2.3
2.3
Interacción corporal mediante Kinect
El diseño de interfaces post-WIMP debe incorporar también la interacción
corporal.
Arquitectura de la información
A la hora de diseñar para la interacción, es básico entender la forma en que
deben interactuar entre sí los distintos elementos. Por tanto, es importante
conocer el contenido, a quién está dirigido y en qué tecnología estará
disponible.
Sea cual fuere la forma y el medio que tome la interfaz, una página web, un
DVD, una aplicación móvil o un videojuego, el flujo de la interacción debe
revelarse y estructurarse. Si se entiende lo que necesita conectarse mediante
una GUI, puede encontrarse una estructura interactiva óptima. La
responsabilidad de esta tarea recae principalmente sobre los hombros del
arquitecto de la información, con el asesoramiento del equipo de diseño.
Representando al equipo, el arquitecto de la información diseña un camino
de navegación a través del contenido de la interfaz. A la estructura
interactiva y al camino de navegación resultantes suele llamárseles
arquitectura de la información (AI), y es la encargada de delimitar la forma
que tomará la interfaz gráfica, a partir de la cual el diseñador y el
programador conceptualizan la experiencia de usuario más eficaz y estética.
Funcionalidad y usabilidad
La arquitectura de la información sigue un proceso de investigación, análisis y
evaluación para comunicar al equipo de diseño de interfaz cómo alcanzará el
usuario sus objetivos, y se asegura de que la estructura interactiva refleje una
experiencia de usuario apropiada. No basta con que tenga funcionalidad; esta
funcionalidad debe servirle de una manera lógica a la persona que la utiliza.
La AI se centra en hacer que la estructura de interfaz sea usable, algo de gran
importancia para el usuario. La usabilidad comienza cuando el diseño facilita los
objetivos del usuario, lo que le genera confianza y aumenta su nivel de confort.
A cambio, el cliente puede capitalizar una experiencia de usuario positiva
convirtiendo esta satisfacción del usuario en ventas o visitas.
Del mismo modo que la arquitectura tradicional de edificios, la arquitectura de la
información se crea antes de construir nada, igual que el diseño gráfico también
se crea antes de la construcción final. Los diseñadores gráficos pueden contribuir
en la producción de la AI junto con el arquitecto de la información. Pero ¿qué
hace exactamente un arquitecto de la información?
2.4
2.4
Camino de navegación
Antes de crear un mapa de la interfaz, la arquitectura de la información revela un
camino de navegación óptimo a través del contenido, asegurándose de que se
alcanzan los objetivos.
Facilidad de uso
Con sus distintos tipos de habilidades, los usuarios fallan en las pruebas
interactivas confusas. Muy a menudo, los equipos de diseño sobreestiman la
complejidad que pueden manejar con facilidad los usuarios. También subestiman
hasta qué punto utilizar una interfaz nueva puede suponer una presión y una
barrera al aprendizaje. Esto se agrava si los equipos de diseño suponen que todos
los usuarios tienen las mismas capacidades. Prestar atención desde el primer
momento a los aspectos de accesibilidad de la interfaz, mediante la investigación
y las pruebas, hará que se llegue a más usuarios, con o sin discapacidades, lo que
a su vez hará que la interfaz pueda utilizarse con éxito y sin esfuerzo.
El arquitecto del flujo
La arquitectura de la información ayuda al diseñador gráfico, al programador y
al equipo de diseño a entender el alcance y la profundidad de la interacción que
la interfaz debe facilitar. La AI traza un flujo a través del contenido mucho antes
de crear cualquier diseño o código.
Las tareas de un arquitecto de la información son varias: crear un inventario del
contenido, definir las personas de usuario, revelar los flujos interactivos y la
jerarquía, crear un mapa de la interfaz, y etiquetar todas las partes relevantes con
nombres que el usuario pueda entender.
Primero el arquitecto examina el estado “actual” del cliente (su posición actual)
y su estado “futuro” (la nueva posición que la interfaz pretende ocupar). Esto
saca a la luz cualquier carencia, dependencia o cambio en el contenido, lo que le
permite evaluar la distancia entre la posición deseada por el cliente y su posición
actual. A partir de este análisis de carencias se extrae la estrategia de negocio en
la que existirá la interfaz, los objetivos que los usuarios esperan conseguir y la
manera en que la interfaz generará un retorno de la inversión del cliente (ROI).
El diseñador de UX Kristin Kramer nos propone un ejemplo para explicar esto.
Supongamos que una empresa proveedora de material de oficina utiliza una
página de comercio electrónico para vender impresoras: la posición “futura” de
la empresa reflejaría su necesidad de vender más impresoras a través de su
interfaz. Por tanto, en su papel de cliente del equipo de diseño, la empresa de
material de oficina querría destacar la impresora X en la página de inicio, porque
creen que está “al precio correcto” para sus clientes. Pero al cliente (usuario) no
le preocupa solo el precio, sino que puede que le preocupe más la reproducción
del color. El arquitecto de la información lo tendrá en cuenta y se asegurará de
que ambas piezas de información se comuniquen con claridad, encontrando la
intersección entre el cliente (quien vende la impresora) y el usuario (el que
quiere comprar la impresora).
El arquitecto debe entender estos conflictos y dar prioridad a una solución de
flujo basada en el comportamiento del usuario, a la que llegará a partir de una
investigación para entender tanto las necesidades del usuario como las del
cliente. El principal resultado de la AI es un diagrama de estas relaciones entre
las distintas áreas de contenido, que recibe muchos nombres distintos, como
mapa del sitio, mapa de jerarquía de la página, diagrama de la página, proyecto,
o mapa web. El término que usaremos a lo largo de este libro es “mapa de la
interfaz”.
2.5
2.5
Herramientas de comunicación
El arquitecto de la información gestiona la comunicación clara del contenido
importante, asegurando que sea accesible y que el flujo sea constante. Esto
puede conseguirse utilizando software como Visio o OmniGraffle, o mediante
soluciones de baja tecnología como papel y bolígrafo.
Herramientas de visualización
Los distintos programas de Microsoft, Omnigroup, Assure y Adobe hacen cosas
similares: dibujan cajas y enlaces entre cajas. Este software es útil para visualizar
de manera nítida las relaciones entre áreas de contenido, pero puede hacerse
exactamente lo mismo con bolígrafos, cuerda, papel y una pared. Algunos de los
programas de AI más utilizados son:
—Microsoft Visio
—Omnigroup OmniGraffle
—Assure Axure
—Adobe Illustrator
—Bolígrafos, notas adhesivas, cuerda y una pared
Navegación global y contextual en la AI
La AI revela la complejidad de las relaciones entre el contenido y cómo debe
funcionar la navegación, que puede ser de dos tipos: global y contextual.
La navegación global está disponible desde todas las página de la interfaz, como
por ejemplo los enlaces a la página de inicio, a la ayuda, a imprimir, etc. La
navegación contextual puede estar disponible solo en una zona concreta de la
interfaz o en una página de un tema en particular. Un ejemplo de esto serían las
opciones que aparecen en cada ventana durante la instalación de un programa,
cuando los botones cambian las llamadas a la acción en función del paso del
proceso que se ha alcanzado. La navegación global permite transportar de
manera no lineal al usuario a lo largo de la estructura de la interfaz hacia el
contenido de su elección. Por otro lado, la navegación contextual permite la
exploración dentro de un contenido asociado de forma específica.
Mapa de la interfaz
El mapa de la interfaz permite al equipo de diseño ver de inmediato la jerarquía
del contenido y de la navegación, así como todas las relaciones “padre/hijo”
entre las áreas de contenido asociadas. También muestra si la navegación es
lineal (pantalla tras pantalla consecutivamente) o no lineal (saltos de pantalla a
pantalla en el orden que elija el usuario). Esto mostrará dónde hace falta una
navegación global o contextual, y qué necesita enlazarse a qué.
La disposición de la AI en forma de diagrama puede mostrarse de muchas
formas distintas. Dos métodos comunes son utilizar una estructura reticular
jerárquica, mostrando cada nivel en filas, o usar una estructura de navegación
contextual que muestre las asociaciones. En cualquier caso, la jerarquía de
contenido de AI debe mostrar los niveles de asociación, que pueden resumirse en
1) nivel principal, 2) agrupaciones temáticas y 3) subcontenido de un grupo
temático.
Esta jerarquía de contenido es similar a los procesos mentales que el diseñador
gráfico realiza cuando diseña una jerarquía visual. Es esencial que el diseñador
gráfico entienda el proceso de AI, ya que así podrá apreciar los motivos tras la
estructura interactiva.
2.6
2.6
Página web y DVD
La arquitectura de la información no existe solo para la Web, sino que puede
utilizarse en cualquier interfaz, como por ejemplo una aplicación, un juego, un
DVD o un Blu-ray.
— Nivel 1
El nivel 1 de interacción incluye el punto de entrada principal y las áreas
temáticas inmediatas. Las líneas de puntos indican la navegación y las cajas
indican las pantallas.
— Nivel 2
Las áreas temáticas suelen estar en el segundo nivel de interacción.
— Nivel 3
El tercer nivel de contenido suele ser el contenido específico dentro de cada área
temática. Por tanto, el nivel 3 ofrece áreas claras para contenido específico
relativo al tema. En una navegación no lineal, las conexiones entre los niveles
son bastante complejas y la interfaz debe comunicarlas visualmente de manera
simple para esconder esta complejidad.
Estructuras jerárquicas
El usuario debe ser capaz de diferenciar la navegación del contenido y de
todas las opciones interactivas disponibles. La estructura jerárquica se
utiliza para separar y agrupar los distintos elementos de la interfaz. Para
ello, hay que definir primero una jerarquía visual según la importancia de
los elementos: en primer lugar los más importantes, y después los de
importancia secundaria y terciaria. Mantener la coherencia es fundamental,
pero el contexto también juega un papel muy importante. La jerarquía
visual de los encabezados, la navegación y el contenido es contextual, y se
estratifica según la página o sección del contenido donde se encuentre el
usuario en cada momento. Gracias a que muestra qué es accesible, qué es
interactivo y qué hacer después, la jerarquía permite al usuario navegar con
facilidad por la interfaz.
Jerarquías de interfaz
Los diseñadores gráficos utilizan un rico lenguaje visual desarrollado a lo largo
del último siglo a partir del diseño de impresión. Desde la llegada de la Web en
la década de 1990, este lenguaje visual se ha adaptado para describir la
interactividad. Las interfaces deberían ser usables y los diseñadores gráficos,
gracias a su buena comprensión de la comunicación visual, entienden que la
jerarquía visual ayuda a reducir el “ruido” y los problemas de comunicación.
La jerarquía ayuda a comunicar la información importante para que el usuario
sepa si la navegación es global o si es aplicable solo a un contexto específico.
Por tanto, el propósito de cualquier elemento visual que se diseñe debe ser el
revelar información importante. Si un elemento tiene una mayor prominencia,
debe responder a un motivo; de lo contrario, lo único que se conseguiría es
confundir y frustrar al usuario.
Existen estándares y convenciones que deberían seguirse para estructurar la
jerarquía visual. Si las decisiones de diseño se apoyan en la investigación y en
las personas de usuario, todavía queda espacio suficiente para la innovación. A
veces, las personas de usuario sugieren un uso conservador; en este caso,
deberían seguirse los estándares. Pero si las personas revelan lo contrario, el
diseñador tiene la oportunidad de innovar y crear una experiencia de usuario más
excitante, a la vez que se asegura de que el usuario pueda alcanzar sus objetivos.
2.7
2.7
Jerarquía de interfaz 1
Jerarquía visual dentro de una pantalla de selección del juego Sim City:
1) Título de la pantalla.
2) Navegación global.
3) Navegación contextual.
4) Contenido principal.
5) Contenido contextual.
6) Información contextual.
2.8
2.8
Jerarquía de interfaz 2
Cuando se dispone de un espacio de pantalla limitado, la jerarquía del contenido
de navegación también debe centrarse en los objetivos principales que el usuario
quiere alcanzar. Pero, en este caso, los elementos estarán ubicados de manera
distinta a la versión de escritorio:
1) Título de la pantalla.
2) Navegación global.
3) Navegación contextual.
4) Contenido principal.
5) Contenido contextual.
6) Información contextual.
Claridad a través del diseño gráfico
Para estructurar los elementos visuales, el diseñador utiliza unos andamios
jerárquicos subyacentes: se trata de una estructura reticular. Las decisiones sobre
la retícula influyen también sobre la composición de los elementos visuales:
formal (muy estructurada) o informal (más fluida). El diseñador gráfico
manipula y equilibra estos elementos utilizando la simetría, el ritmo visual y la
frecuencia de repetición para ayudar al usuario a entender cuál podría ser su
siguiente paso.
Esta manipulación y equilibrio dependen del peso visual, el responsable de que
la vista pase sobre, o se pause en, los elementos visuales más importantes. Los
patrones, el color y las texturas ayudan a identificar los cambios en las áreas de
contenido. Para evitar el desorden visual, se utilizan aspectos como el equilibrio
entre los espacios, la proximidad de los elementos, las variaciones de la línea, la
forma, la imagen y la tipografía. A través de este ejercicio de comunicación
visual, el diseñador gráfico crea un movimiento y unos caminos fáciles de seguir
a través del contenido. Mediante una jerarquía visual apoyada en una retícula se
puede guiar al usuario hacia las zonas de la pantalla que está buscando.
Cuando usamos una jerarquía visual, estamos reconociendo que una parte del
proceso de diseño consiste en diseñar una respuesta emocional positiva del
usuario hacia la interfaz. Si está bien diseñada, el bienestar que siente el usuario
al utilizarla se atribuye a una buena experiencia de usuario; por el contrario,
cualquier frustración recaerá sobre el propio diseño de la interfaz. Si los
diseñadores han hecho bien su trabajo, la interfaz será invisible para el usuario.
Una interfaz invisible es aquella que atrae y mantiene la atención del usuario y
que combina con armonía la estética y la funcionalidad.
2.9
2.9
Todos los elementos
Absolutamente todos los elementos visuales que se coloquen en una pantalla
deberían estar ahí por alguna razón. Incluso en esta interfaz dinámica basada en
datos que encontramos en una página web de The National Film Board of
Canada. Aunque la página mantiene un enfoque divertido, la estructura visual
permanece clara: el usuario conoce el título, la navegación y el contenido.
Probando, probando: Primeras iteraciones de diseño
En cuanto a qué funciona en el diseño de una interfaz y qué no, existen una
gran cantidad de estudios sobre interacción persona-ordenador.
Las personas piensan “de arriba a abajo” por lo que, para mejorar la
interactividad, la navegación debe ser obvia, conveniente y fácil de usar. Las
etiquetas de la navegación deberían usar términos sencillos que el usuario
pueda entender, ya que esto facilitará que encuentren un camino lógico a
través de la interfaz. En pantallas más pequeñas y tabletas, la jerarquía de
información de navegación debería estar contenida. Para implementar estas
convenciones, es importante probar temprano y a menudo las soluciones de
diseño.
Probar la navegación
La navegación suele estar compuesta de pestañas, menús, botones o enlaces de
hipertexto, ya sea en una interfaz para una página web, una aplicación, un disco
Blu-ray o un videojuego. Las pestañas y los menús suelen indicar la ubicación de
la navegación, mientras que los botones y los enlaces indican acción. Gracias a
estas convenciones, el usuario puede entender dónde está dentro de la estructura
interactiva y saber hacia dónde puede dirigirse a continuación.
Si el usuario no entiende cómo se usa la navegación, abandonará frustrado la
interfaz. Por este motivo, es esencial realizar pruebas y poner a prueba la
propuesta de diseño con usuarios “reales”, no con el equipo de diseño. Es
importante que las pruebas se realicen pronto, incluso en la fase de ideación,
antes de que se haya hecho ningún branding ni programación.
Ejemplos de guías de diseño de interfaz disponibles en el domino público:
—GEL (Global Experience Language), las directrices de la web de la BBC para
diseñar sus servicios interactivos www.bbc.co.uk/gel
—Guía de estilo de Mozilla para desarrolladores de código abierto del
navegador Firefox www.mozilla.org/en-US/styleguide
—Human Interface Guidelines de Apple para interfaces de iPhone, iPad y MAC
OS developer.apple.com
—Alertbox, página web del experto en usabilidad Jakob Nielsen sobre
usabilidad web www.nngroup.com/articles
2.10
2.10
Wireframes para Vote Band
En estos primeros wireframes para la aplicación VoteBand™ se indica con
claridad el flujo de navegación global y contextual hacia el contenido. El flujo
desde un área a la siguiente está representado con anotaciones manuscritas
(trataremos los wireframes en el siguiente apartado).
Wireframes
Los wireframes son una herramienta muy útil con la que pueden ponerse a
prueba las conjeturas a las que ha llegado el equipo durante las primeras fases
del diseño. Revelan la lógica, el comportamiento y la funcionalidad subyacentes
de cada pantalla de la interfaz. La arquitectura de la información habrá mostrado
al diseñador qué contenido va dónde y qué necesita enlazarse a qué. En última
instancia, esta información debe convertirse en una interfaz usable e intuitiva,
pero ¿cómo puede comunicarse esta información de manera visual al usuario?
Este proceso recae en la habilidad del diseñador gráfico, en colaboración con el
equipo de diseño.
El wireframe no es el diseño final de la interfaz; se trata de un método para
decidir qué elementos deben incluirse, qué parte de la AI, y tiene en cuenta las
plataformas tecnológicas desde las que se accederá a la interfaz. El wireframe
también tiene en cuenta el input del usuario (dedo, pulgar, ratón o gesto). En sí
mismo, un wireframe es simplemente una propuesta de composición realizada
usando tan solo líneas, cajas y texto básico. Con esta forma tan básica pueden
mostrarse los marcos posibles para la jerarquía visual, las prioridades de
navegación y las áreas de contenido adecuadas.
Los wireframes solo muestran cajas y un mínimo de texto, sin ninguna estética
ni código, solo para dar una idea de los elementos que la interfaz necesitará
mostrar. Por este motivo, tradicionalmente los wireframes se han considerado
como una tarea del arquitecto de la información, pero, sin duda, el diseñador
gráfico debe asesorar lo antes posible sobre los aspectos de comunicación visual.
Esto equilibrará el consejo sobre los requisitos de código y de experiencia de
usuario, y no restringirá las posteriores fases de diseño.
Es muy importante dibujar wireframes de todas las pantallas importantes de la
interfaz que comuniquen las posibles soluciones; cuando haya que tomar
decisiones, debe hacerse referencia a las personas de usuario (véase página 27).
Los wireframes están bocetados a escala real para el medio digital en el que se
usará la interfaz, lo que permite ponerlos a prueba con rapidez con usuarios
reales en una conversación informal. Se trata de una forma rápida y positiva de
probar la funcionalidad de la interfaz para poder optimizar su comunicación
visual.
Aunque en un wireframe la estética no está presente, sigue siendo importante
indicar a escala real la ubicación de los encabezados, subtítulos, barras laterales,
navegación, áreas de contenido y enlaces secundarios, ya que con esto pueden
visualizarse el número de variaciones y de elementos reutilizables que serán
necesarios en el diseño final.
Los wireframes no funcionan cuando:
—se confunden con un diseño final: hay que mantenerlos como esquemas sin
ningún branding.
—dictan una disposición absoluta al diseñador: los wireframes deberían ser
flexibles.
—no se ha involucrado a un diseñador gráfico en el diseño de los wireframes : se
debe involucrar a un diseñador.
2.11
2.11
Desarrollo de un wireframe
Los wireframes no son un diseño final que solo necesita ser “coloreado”. Se trata
de un diálogo activo que guiará al diseñador en las iteraciones de su diseño.
Cuando se comprende el flujo del usuario, el diseñador puede ayudar al
arquitecto de la información a bocetar un wireframe de todo lo que necesita
destacarse en cada pantalla de la interfaz. Esto muestra el alcance de los
elementos que deben ser incluidos en el diseño gráfico final de la interfaz.
Prototipo en papel
Hacer prototipos en papel añade otra dimensión a lo que puede conseguirse
gracias a los wireframes. Basándose en los esquemas de estos últimos, pueden
ponerse a prueba con rapidez las funcionalidades de secciones completas de la
UI, revelando así cualquier problema de diseño.
El prototipo en papel no está pensado para probar el código o cualquier
comunicación visual más allá de la estructura interactiva básica. La interfaz se
boceta en papel, de nuevo sin ningún branding ni identidad (solo estarán escritas
las etiquetas de navegación y los encabezados). Se garabatean líneas para indicar
dónde irá el cuerpo de texto, y cajas con cruces que indican imágenes o vídeo.
Este prototipo de “baja fidelidad” en papel se centra en la retroalimentación del
usuario sobre la funcionalidad y el flujo interactivo de la interfaz. Para
asegurarnos de que tiene suficientes elementos para poder ser probado, deben
dibujarse todas las partes principales de la interfaz, así como las variantes de las
pantallas y de los elementos. Se presenta a los usuarios la primera “pantalla” de
papel y se les da una tarea. Realizar pruebas que respondan a una tarea
determinada genera preguntas que requieren soluciones.
La prueba de un prototipo en papel se realiza con una hoja de papel cada vez;
cada hoja representa una ventana, menú, acción, etc. El usuario empleará su
dedo para señalar o “clicar” donde cree que están los enlaces. Con cada clic, se
cambia la pantalla de papel para representar el siguiente paso interactivo. Puede
hacerse con rapidez cualquier cambio, o añadir algún elemento adicional, sobre
el prototipo, a menudo delante del usuario que lo está probando.
Poner a prueba durante esta fase temprana del diseño genera una comunicación
valiosa y una sinergia entre el equipo de diseño, el cliente y los usuarios. Los
problemas se solucionan a partir de esta observación directa de los usuarios, lo
que ayuda al diseñador a entender sus procesos mentales. Estas pruebas de tan
baja fidelidad también son una forma valiosa y rentable de convencer a un
cliente de la validez de la solución final de diseño.
Para sacar el máximo partido de la prueba, es importante que el equipo de diseño
tan solo observe, y que deje que el usuario dicte su propio flujo a través de la
interfaz. Si es posible, el equipo de diseño debería usar cámaras de vídeo para
observar al usuario a distancia, para no influenciarlo sin querer.
2.12
2.12
Wireframes de alta fidelidad
Cuando el equipo ya ha alcanzado un consenso sobre la disposición óptima de
los elementos que ayudará al usuario a alcanzar sus objetivos, puede producirse
un wireframe más pulido que asegure la claridad de la comunicación.
Entrevista: Greg Gibson
En su proyecto de final de carrera está analizando la jerarquía visual de las
páginas webs. Como estudiante de diseño gráfico, ¿qué encuentra útil
acerca de la jerarquía web?
Bueno, la razón por la que escogí la jerarquía visual es para ver cómo se puede
guiar al usuario por una interfaz utilizando elementos visuales. Creo que
comencé a profundizar en ello cuando estuve de intercambio en Finlandia
aprendiendo sobre las teorías de Jakob Nielsen y Steve Krug. Siempre supe que
quería dedicarme al diseño web. En realidad, quería descubrir qué significaban
estas teorías.
He categorizado la jerarquía en tres elementos visuales diferentes: color,
composición y tipografía. Las distintas tipografías utilizadas dan, obviamente, un
tono de voz a la página. Puede emplearse un tipo de letra sin remates para los
títulos y otro con remates para las áreas de contenido. El color se utiliza para
relacionar áreas importantes. En la composición, en especial en las culturas
occidentales, leemos de izquierda a derecha, por lo que el área más importante es
la situada arriba a la izquierda, y la menos importante, la inferior derecha.
Existen muchos aspectos técnicos relacionados con la composición en el diseño
web. Cuando se escribe código, el contenido debe disponerse de manera que
funcione en los distintos navegadores.
Hoy en día, la gente interactúa con Internet desde sus teléfonos móviles y
tabletas, por lo que debemos tener en cuenta la disposición para todos estos
dispositivos. Creo que esa es la principal diferencia entre la composición para
impresión y para la Web. Tiene relación sobre todo con el código y con que
ahora hay que usar porcentajes.
Así que ¿vio la importancia de las técnicas tradicionales de diseño gráfico
impreso y su aplicación en la Web?
Sí. Las retículas existen desde hace mucho. Pero la Web es algo nuevo y que
avanza de manera constante, así que fui capaz de adaptarme a este nuevo medio.
En su proyecto de final de carrera, de momento ha empezado a observar los
wireframes para entender la estructura interactiva. ¿Por qué creyó que esto
era importante?
En otro módulo de la carrera, tuve que diseñar una web para un cliente. La
primera etapa de este diseño consistía en analizar páginas webs que fueran
similares a lo que el cliente necesitaba, una página sobre arquitectura. Así que
busqué siete u ocho páginas diferentes para entender cómo disponían el
contenido y por qué lo habían hecho de ese modo, y para encontrar los ejemplos
más interesantes. Utilicé wireframes para poder profundizar en el contenido sin
la distracción de las imágenes reales, lo que me llevó a diseñar una composición
para mi página. Eso mejoró la web en general y la interacción con el usuario. La
retroalimentación del cliente fue francamente buena.
Profesión
Estudiante universitario (Glasgow, Escocia, Reino Unido)
Experiencia
Licenciado (con honores) en Diseño Gráfico para Medios Digitales
Web
www.greggibson.co.uk
Al disponer el contenido, pude ver con rapidez lo que estaba equivocado, o no se
veía bien, o los elementos con los que el usuario no podía interactuar. Imprimí
capturas de pantalla de cada página, puse papel de calco sobre ellas y dibujé
cada elemento. Recuadré la navegación, las áreas principales de contenido y
traté de entender qué tipo de sistema reticular habían usado. Resulta
sorprendente ver cuánta gente en realidad no piensa en esto. Pero cuando los
diseñadores utilizan de verdad un sistema reticular, puedes averiguarlo y
entender cómo han dispuesto el contenido. Con esto pude comprobar que la
retícula hace que las cosas parezcan coherentes, pero que también deja lugar
para la variación.
¿Ha estudiado sobre cómo hacer que la página sea dinámica y se
redimensione en cualquier navegador, plataforma o máquina?
Sí. Creo que a la hora de escribir el código lo que hacen es utilizar porcentajes
para que el contenido pueda fluir; también usan distintas hojas de estilo para las
distintas plataformas. Es decir, si estás utilizando la página desde un dispositivo
móvil, la página cambia a una disposición diferente. Comparada con un portátil,
en una pantalla pequeña solo se muestra cierta cantidad de información.
Desde el principio estuvo interesado en las pruebas de usabilidad de
seguimiento de ojos. ¿Qué le atrajo de este tipo concreto de pruebas?
Cuando enseñas un diseño a un cliente que no tiene conocimientos sobre diseño
gráfico, no entienden del todo la disposición del contenido. Las pruebas de
seguimiento de ojos (véase página 61) son una forma de ofrecer los métodos y
de dar al cliente hechos y cifras que puedan entender. Puedo enseñarles que si el
diseño se hace de cierta forma no funcionará, pero que sí lo hará si se hace de
otra manera. Tener las pruebas físicas es uno de los principales objetivos que
quiero conseguir.
¿Cuánta gente cree que necesitará para hacer la prueba?
Creo que con cinco o seis personas será suficiente para ver distintas formas de
interactuar con la página. Revisaré el diseño usando los resultados, y si todo va
bien, podré realizar un diseño mejor. Entonces tendré los resultados para mostrar
por qué he implementado el diseño de una forma determinada, y lo reharé para
ver si los usuarios interactúan de una forma mejor, y si están más satisfechos.
Creo que en el diseño siempre se aprende, en especial en el diseño web. Siempre
tienes que seguir exigiéndote al máximo.
Caso de estudio
Prueba de la jerarquía visual de VedderPrice.com
Encontrar el flujo
En una reciente campaña de márketing para la nueva oficina en Londres del
bufete de abogados de Chicago Vedder Price, Fishman Marketing utilizó la
tecnología de seguimiento de ojos para poner a prueba dos diseños
preseleccionados. Esta técnica utiliza cámaras para detectar los movimientos de
los ojos de los usuarios sobre una pantalla. Los datos que se generan pueden
usarse para determinar la eficacia de la jerarquía visual de una página web.
Los dos diseños, “Sombreros” e “Iconos”, pretendían ayudar a transmitir el
mismo mensaje estratégico para la nueva oficina de Londres de Vedder Prince:
que llevarían el área financiera de aviación desde Londres (Reino Unido). La
empresa tenía un público objetivo complejo que necesitaba obtener de la web
distinta información y bastantes detalles. Era importante que el diseño
comunicara a su público una identidad centrada tanto en la aviación como en
Londres, y que generara ingresos para la nueva oficina en Reino Unido de
Vedder Price.
Proyecto
Sombreros o iconos www.vedderprice.com/london/
Equipo de diseño
Fishman Marketing Inc., Illinois, EE. UU.
Cliente
Vedder Price LLP, Londres, Reino Unido.
2.13
2.13
Sombreros e Iconos
Las dos propuestas de páginas eran “Sombreros” (izquierda) e “Iconos”
(derecha). La primera era un diseño humorístico en torno a los icónicos
sombreros británicos y la segunda, más conservadora, se centraba en iconos que
comparaban Estados Unidos y el Reino Unido.
2.14
2.14
Seguimiento de ojos
El software de seguimiento de ojos sigue los ojos de los usuarios a lo largo de la
pantalla de la interfaz para detectar las áreas que miran más. Estas son las zonas
más calientes (en rojo).
2.15
2.15
Orden de visionado
El seguimiento de ojos es útil para establecer el orden en el que realmente se
mira la jerarquía visual. Esta información resulta útil para que el diseñador
evalúe sus decisiones de diseño respecto a la estética de la interfaz.
La prueba del flujo
El software de seguimiento de ojos genera datos, no opiniones, a partir de un
público de prueba y ayuda al equipo de diseño a examinar el orden en que los
usuarios miran el contenido, y durante cuánto tiempo. El flujo de atención de
cada usuario a través de la jerarquía visual se graba con cámaras, captando los
movimientos de los ojos por la pantalla. Estos movimientos crean “puntos
calientes” en la pantalla, que indican las áreas que los usuarios miran más y
durante más tiempo. Estos datos recopilados funcionan bajo el principio de que a
menudo los usuarios “escanean” el contenido en lugar de leerlo; estas pruebas
ayudan a cuantificar las áreas en las que pasan más tiempo.
Evaluación del flujo
Los resultados de las pruebas de seguimiento de ojos indicaron que entre el
público objetivo la idea de diseño más conservadora, “Iconos”, tuvo más éxito
que la propuesta “Sombreros”. Aunque dos tercios de los examinados pensaron
que “Sombreros” era más creativa, se consideró que el estilo estético no era tan
eficaz como el de “Iconos”, más tradicional. Dado que el público objetivo era
internacional, y que todos los usuarios debían sentirse cómodos con la página de
la nueva oficina de Londres, se eligió el diseño “Iconos”.
Los usuarios examinados evaluaron positivamente ambas propuestas, pero
“Iconos” consiguió que un 96 por ciento de los usuarios se fijaran en el
importante encabezado “Nueva oficina en Londres de Vedder Price”. Lo leyeron
durante 2,5 segundos y después pasaron otros 4 segundos escaneando el párrafo
de soporte a la noticia. En “Iconos”, este encabezado fue el cuarto elemento que
encontraron, mientras que en “Sombreros” fue el séptimo. El uso del
seguimiento de ojos ayudó a confirmar que el diseño de la página “Iconos”
transmitía el mensaje de Vedder Price de manera más eficaz a su público
objetivo.
2.16
2.16
Resumen cuantitativo
Este gráfico de barras resume cuantitativamente los datos de las pruebas de
usuarios, poniendo en evidencia las respuestas sobre su percepción de qué diseño
era más eficaz.
2.17
2.17
Resultado final
Deberías acabar con algo como esto, mostrando secciones específicas de
contenido (notas adhesivas de color) y destacando las relaciones padre/hijo entre
la página principal y sus propias páginas de contenido. En tu versión (A), (B),
etc., serán reemplazados por los enlaces en la página de inicio. En cada página
temática, A.1, B.1, etc., serán reemplazados con los enlaces.
Ejercicio
Encontrar el flujo
Premisa
En este capítulo hemos analizado la arquitectura de la información y la
jerarquía (de la navegación, del contenido y visual). Para diseñar una buena
interfaz, es importante entender la estructura interactiva subyacente. Pero
¿dónde comienza esta comprensión?
Este ejercicio te permitirá entender el flujo mediante la deconstrucción de
una interfaz ya existente. Lo que aprendas puede inspirarte e informar
cualquier proyecto futuro de diseño de interfaz. Puedes realizar esta tarea
solo o en grupo, y solo necesitas cuatro cosas:
—notas adhesivas de varios colores
—hilo (de algodón, lana) o bien cordel, en cualquier caso de diferentes
colores
—Blu Tack (o cualquier otra masilla de pared reutilizable)
—una pared grande.
Ejercicio
1Elige una interfaz existente no muy grande.
2Escribe “Página de inicio” en una nota adhesiva de color y colócala en el centro
de la pared. Será el nivel 1.
3En una nota adhesiva de otro color, escribe el nombre de cada sección/tema que
aparezca en la página de inicio (“Acerca de”, “Contacto”, etc.). Colócalas en una
fila debajo de la nota “Página de inicio”. El cambio de color indica que estas
páginas pertenecen al nivel 2.
4Con la cuerda y la masilla de pared, conecta la “Página de inicio” con las
páginas temáticas del nivel 2.
5Ahora céntrate en cada página temática por separado, y busca los enlaces de
cada sección (por ejemplo, las páginas de la sección “Acerca de” pueden
contener páginas como “Historia”, “Equipo”, etc.). Usa una nota adhesiva más
pequeña para representar estas subpáginas, que forman el nivel 3.
6Pega estas notas adhesivas a la pared debajo de su sección “padre”,
agrupándolas bajo su tema para mostrar la asociación y el contexto.
7Con la cuerda, conecta estas notas adhesivas más pequeñas entre sí y con su
padre.
8Tras repetir los pasos 5, 6 y 7 para cada sección/área temática, utiliza una
cuerda de otro color para conectar cada página HACIA la página de inicio Y
hacia cualquier otra página a la que enlace.
Nota: Para este ejercicio, detente en el NIVEL 3, aunque la página tenga más
niveles.
Resultados
En la pared deberías ver una jerarquía muy básica de las interacciones a través
de los tres niveles de contenido. La estructura interactiva revelada, ¿es mucho
más compleja de lo que creías que sería? Esta técnica funciona para cualquier
tipo de interfaz (Blu-ray/DVD, aplicación, incluso para un videojuego). Permite
la deconstrucción del complejo flujo que hace que el contenido sea accesible
para el usuario.
3
Diseño gráfico para medios digitales
En este capítulo trataremos las bases del diseño gráfico para medios
digitales, un aspecto crucial a la hora de crear una comunicación visual
eficaz en una interfaz. En un contexto aplicable al diseño de cualquier
interfaz, explicaremos las retículas, la tipografía, el color, las imágenes, el
movimiento, la iconografía y la metáfora.
Los diseñadores gráficos deben tener en cuenta factores importantes como
la interactividad, las plataformas tecnológicas y las pantallas de
visualización. Estos factores pueden suponer tanto una restricción como una
oportunidad para innovar en el diseño.
Interacción y retícula
Las retículas son estructuras subyacentes que los diseñadores gráficos
utilizan para ubicar el contenido y la navegación de una manera controlada,
lo que ayuda a la comunicación visual y a definir un punto focal en la
interfaz.
El tamaño tipo para el que se diseña siempre ha sido un problema para el
diseño de interfaz. En el diseño para impresión, el tamaño de las páginas
tipo está claro (por ejemplo A4, A3 o carta), pero en los dispositivos
digitales, y debido a las distintas resoluciones de pantalla, existen muchas
más variantes para tener en cuenta. La resolución de la pantalla dictamina
los píxeles disponibles en la retícula. Por tanto, un diseñador gráfico de
interfaz debe entender cómo las retículas pueden ayudarle a diseñar
mejores interfaces para Blu-ray/DVD, juegos, webs, televisores, tabletas o
smartphones.
Retículas: Estética funcional
Una retícula está formada por una serie de secciones, tanto verticales como
horizontales, que forman columnas, filas, márgenes y medianiles. La línea base
de la retícula depende de la altura de la x de la tipografía; es decir, de la altura
vertical de una letra en caja baja, como la “a” (no de letras con ascendentes o
descendentes, como una “h” o una “y”).
Las unidades de medida de una retícula pueden estar basadas en píxeles (px),
que son relativos a la resolución de pantalla y solo usan números enteros; o en
porcentajes (%), que permiten que el usuario controle el tamaño de la pantalla; o
en ems. En CSS3, se suelen preferir los ems para disponer retículas. Un em es
una unidad relativa al tamaño de la tipografía cuyos incrementos de tamaño son
más pequeños y que escala mejor.
Entender la importancia del “espacio en blanco” (espacio negativo) permite
mostrar la jerarquía del diseño y facilita que el ojo encuentre con rapidez el
contenido y tenga momentos de respiro. La habilidad estética del diseñador
gráfico puede hacer que un diseño encaje en una retícula, haciendo a la vez que
esta sea invisible. Trabajar con una retícula también puede ser útil si el equipo de
UI necesita comunicar energía y movimiento. Pero trabajar sin retícula solo
contribuye a tomar decisiones de diseño erróneas.
3.1
3.1
Guía de resolución
A la hora de diseñar una interfaz, para poder diseñar con la confianza de que el
usuario tendrá una interfaz optimizada para su pantalla, es crucial que el equipo
de diseño entienda a la perfección qué resoluciones tiene a su alcance.
3.2
3.2
The Grid System
El uso de una retícula subyacente permite a los diseñadores establecer una
jerarquía clara y eficaz, lo que a su vez permite que se pueda acceder con
facilidad al contenido. The Grid System es un recurso muy útil que explica con
más detalle cómo escoger y usar una retícula. www.thegridsystem.org
Tener en cuenta la pantalla
Los elementos de interfaz que se ubican sobre la retícula se llaman módulos: son
componentes reutilizables definidos a partir de los tamaños de las imágenes, de
los reproductores de vídeo, etc., tanto en su eje x como en el y. Al tratarse de
componentes modulares reutilizables, es fácil disponerlos sobre la pantalla
reticulada. No obstante, no todas las pantallas son iguales.
Los equipos de diseño que trabajan en interfaces para pantallas de televisor
deben tener en cuenta si la interfaz se mostrará en formato estándar 4:3 o en
formato panorámico 16:9. Esta diferencia de proporciones influye directamente
sobre la retícula, ya que los límites de la pantalla son diferentes en los distintos
televisores. Si esto no se tiene en cuenta, puede perderse cualquier navegación o
contenido importante que se sitúe en el extremo de la pantalla. Para evitarlo, los
diseñadores deben asegurarse de que la navegación y los módulos de contenido
estén dentro de una zona de acción segura (centrada en la pantalla) para el
formato elegido.
La retícula flexible de 12 columnas
Una retícula de 12 columnas puede reducirse en variaciones de 2, 3, 4 o 6
columnas. En el diseño de interfaces existen varios sistemas reticulares muy
difundidos procedentes del diseño web, con anchos de 960 px, 976 px o 1.140
px. Dentro de una retícula de 960 px, cada una de las 12 columnas tendría 60 px
de anchura. Cada columna tendría un espacio de 10 px a cada lado, lo que
permitiría tener un medianil de 20 px entre las columnas. En una retícula de
1.140 px, cada una de las 12 columnas tendría 84 px de ancho con un medianil
de 24 px. Ambos sistemas tienen sus ventajas.
3.3
3.3
Mafia II
En esta captura de pantalla del juego Mafia II, de Take Two, se han superpuesto
las áreas seguras para las acciones y los textos para un formato de 4:3. El
rectángulo rojo exterior muestra el área donde la acción permanece visible en
todas las pantallas con un formato de 4:3. El rectángulo amarillo interior muestra
la zona donde el contenido textual estará seguro.
3.4
3.4
Propuesta de composición reticular
La guía de estilo GEL (Global Experience Language) de la BBC propone una
disposición de la navegación y el contenido, y cómo dar estilo a los elementos
sobre una retícula subyacente. La retícula puede ser aún más flexible, ya que
también se permiten otras variaciones (véase página 52).
La retícula: ¿A medida o fluida y dinámica?
Las tabletas y los smartphones presentan un interesante dilema al diseñador de
interfaz. Una pantalla puede cambiar de orientación vertical a apaisada con una
simple rotación de la mano, y la interfaz debe recolocar al instante toda la
composición, la navegación y el contenido para ajustarse a la nueva vista. Un
iPad tiene una proporción de 4:3, mientras que la de una tableta Android es de
algo más de 16:9, por lo que cualquier aplicación o página web debe diseñarse
teniendo en cuenta estas variaciones.
Esto complica mucho los diseños, ya que la retícula subyacente debe estructurar
la página para dos orientaciones a la vez. Estos problemas se están resolviendo
gracias a la combinación de un código inteligente y una disposición clara, algo
que se consigue mediante la colaboración entre el diseñador gráfico y el
programador.
El equipo de diseño deberá diseñar por separado una interfaz adaptada a cada
plataforma (Web, tableta, sistema operativo, etc.), o bien detectar qué plataforma
se está usando en ese momento para determinar el tamaño de pantalla disponible
y hacer que la interfaz sea fluida, redimensionándose y ajustándose. El diseño
adaptable [responsive design] es una técnica utilizada en diseño web: consiste en
detectar el dispositivo y el tamaño de la pantalla mediante el uso de mediaqueries de CSS3 para que la composición y el contenido se redimensionen y se
adapten al dispositivo.
La diferencia entre mostrar una página web en un ordenador de sobremesa y en
una tableta puede ser pequeña pero significativa. Del mismo modo, la interfaz de
una aplicación en un smartphone y en una tableta será muy similar. En cualquier
caso, si se utiliza una retícula fluida y se diseña de manera adaptable, se
optimizará la interfaz para que se visualice con el formato adecuado para el
dispositivo.
3.5
3.5
Proporciones de retícula dinámicas
A la izquierda vemos una composición en un iPad con un formato 4:3 y, a la
derecha, una tableta Android con un formato 16:9. Es evidente que la retícula
fluida no solo traduce entre proporciones y orientaciones: la tipografía y el
tamaño de las imágenes presentan problemas (como puede verse en la imagen
que rebosa en la figura superior derecha). La composición debe ajustarse en el
código con relación a la orientación y a las limitaciones de cada dispositivo.
3.6
3.6
Retículas dinámicas
El código subyacente debe optimizar la composición de manera adaptable para
cada formato de pantalla y estilo de visualización. A la hora de crear diseños
adaptables para cada plataforma, es importante escalar el texto y las imágenes, lo
que ayuda a evitar la distorsión al cambiar entre orientaciones (las imágenes de
la izquierda son vistas en vertical; las de la derecha, en apaisado).
La tipografía como interfaz
Desde un punto de vista funcional y estético, la tipografía permite que el
contenido escrito fluya y se diferencie del resto del contenido de la interfaz.
La selección cuidadosa de la tipografía más adecuada, en el tamaño correcto
para el lector, ayuda a comunicar el significado. Para conseguir esta
comunicación, la tipografía manipula el peso de las palabras, el estilo de las
letras y el espacio entre palabras, letras y líneas. También permite que el
diseñador controle la legibilidad, el tono y la forma del texto de la interfaz,
pero, para que esto sea eficaz, debe funcionar dentro de la retícula
subyacente.
Tipos o fuentes: Tipografía básica
Mediante la selección y manipulación de cada tipo de letra, el contenido textual
y la navegación de una interfaz se hace inteligible, legible y encontrable. Las
fuentes tipográficas pueden manipularse de tres formas: mediante el interletraje
(kerning), el espacio entre palabras y el interlineado. Ajustando estos tres
elementos, el diseñador gráfico puede optimizar tanto la estética como la
funcionalidad del contenido escrito.
Kerning
El kerning permite el movimiento de una letra más cerca o más lejos de su
adyacente. Este ajuste se centra en los espacios negativos que crea una palabra y
maximiza el equilibrio y el ritmo de las letras para facilitar el escaneo y la
comprensión.
Espacio entre palabras
Permite aumentar o disminuir el espacio horizontal entre las palabras. El número
óptimo de palabras por línea es entre 12 y 15. Demasiado espacio entre las
palabras reducirá la legibilidad, y lo mismo ocurre si el espacio es demasiado
pequeño.
Interlineado
El interlineado permite aumentar o disminuir el espacio entre las líneas base, lo
que puede tener un efecto drástico sobre la legibilidad. Demasiado poco espacio
vertical puede hacer que el texto se vea apretado. Demasiado espacio también
puede afectar de manera negativa a la legibilidad.
Clasificaciones de los tipos de letra
Display
un tipo adecuado para titulares cortos y destacados (Impact)
Monoespaciado
el ancho de todas las letras es exactamente el mismo (Courier)
Palo seco
una letra de palo seco es aquella que no tiene remates (Helvetica)
Con remates
un remate o serifa es un adorno que sobresale de la parte superior o inferior de
cada letra, o de ambas (Times)
3.7
3.7
Anatomía de una fuente
Tal como puede verse en estas ilustraciones, la anatomía de una fuente
tipográfica es compleja. Estructuralmente, los caracteres pueden ascender por
encima de la altura de la letra de la minúscula (altura de la x) hasta la altura de
las mayúsculas, o descender por debajo de la línea base hasta la línea de los
descendentes para letras como la y o la g minúsculas. Para facilitar la lectura, y
también para dotar de personalidad al texto, la tipografía manipula los tipos de
letra mediante el interlineado, el espacio entre palabras y el kerning.
Tipografía para interfaces de usuario
El diseñador gráfico no tiene el mismo nivel de control sobre la tipografía
estática en una página impresa que en el diseño de interfaces, ya que el control
del usuario hace que la tipografía sea más dinámica en estas últimas. Gracias a
los smartphones y tabletas con pantallas táctiles, el input es ahora mucho más
directo que en un PC con un ratón. Por tanto, el interlineado en una tableta
necesita acomodarse al input a través de los dedos; en un smartphone, algunos
inputs se realizan con el pulgar. Debido a que el pulgar es más ancho que la
yema de los otros dedos, el interlineado necesita ser suficiente para permitir
también este tipo de input.
En consecuencia, para que la misma interfaz pueda usarse en un ordenador de
sobremesa, una tableta y un smartphone, deben diseñarse distintas variaciones de
la interfaz. Esto puede conseguirse o bien diseñando y programando de manera
adaptable, o bien haciendo diferentes versiones que puedan acomodar las
variaciones tipográficas necesarias para cada plataforma.
Al contrario que en un PC, en un smartphone las interfaces suelen tener menos
enlaces visibles, un mayor interlineado y un menor tamaño de letra. En las
interfaces webs, los avances tipográficos a la hora de dar formato al código han
equilibrado el control del usuario, lo que permite que la tipografía sea más
dinámica. Cuando hay que diseñar interfaces webs, el estándar CSS3 ofrece más
control que nunca sobre cómo puede mostrarse la tipografía.
Llamadas a la acción e invitaciones visuales
En una interfaz deben quedar claras para el usuario las zonas que son
interactivas y, por tanto, clicables. En las páginas webs maquetadas en HTML, el
estándar dictamina que un texto subrayado con color azul indica un enlace. Otros
elementos interactivos suelen indicar su “clicabilidad” cuando el cursor cambia a
un dedo. Estas pistas suelen llamarse “prestaciones visuales” [o affordances
visuales]: comunican una llamada a la acción que conducirá a un resultado.
3.8
3.8
Tipografía para los dedos
En un smartphone o tableta, las llamadas a la acción necesitan ser operadas
mediante un dedo. Un interlineado demasiado ajustado hará que se superpongan
las áreas activas de cada enlace, lo que resultaría confuso.
Tipografía en la pantalla
No todos los tipos de letras están optimizados para su uso en pantalla. Aquellos
que la Web ha heredado del mundo de la impresión, como Times o Helvetica, no
fueron diseñados pensando en los píxeles. En cambio, otras tipografías como
Georgia o Verdana se diseñaron específicamente para pantallas. A la hora de leer
y comprender un texto en una pantalla, el lector tiene una tolerancia variable. La
gente tiende a leer un 10 por ciento más despacio en una pantalla que en papel y,
en realidad, se escanea más que se lee al completo.
En una interfaz, el texto puede presentar distintas formas: navegación, llamadas
a la acción, subtítulos, titulares y bloques de contenido textual (cuerpo de texto).
En la interfaz, el cuerpo de texto debe aparecer en un contexto jerárquico, de
modo que el lector sepa qué es lo más importante y el orden en que debería leer
el contenido, que además tendría que estar definido con claridad junto a los
elementos de navegación, imágenes y vídeos; por ello, es fundamental el uso de
columnas para dividir el texto. Por este motivo, la relación entre la tipografía y la
retícula subyacente es simbiótica.
Las tipografías con remates son una buena opción para los titulares, pero las
tipografías sin remate son una opción más segura para cuerpo de texto, ya que
funcionan de manera uniforme a cualquier escala. Las tipografías con remate
hacen que el texto sea más difícil de leer en cuerpos de texto a tamaños
pequeños. Los tipos de letra display, decorativos o góticos no deberían usarse
nunca para cuerpo de texto, navegación o subtítulos, ya que la legibilidad
quedaría muy comprometida.
Es aconsejable evitar que en una retícula los bloques de texto estén justificados
(bordes izquierdo/derecho rectos), centrados (salvo los subtítulos) o en
mayúsculas (que suele equipararse a gritar). El cuerpo de texto debería ser
legible y fácil de “escanear”. Para ayudar a la legibilidad del cuerpo de texto, es
mejor disponer los párrafos en una columna de la retícula alineados a la
izquierda. Una sangría de 1 em al principio de cada párrafo, o una línea de
separación entre los párrafos, ayudará al usuario a escanear el texto.
3.9
3.9
La tipografía como interfaz
Por sí mismo, el texto puede convertirse en la interfaz. El diseño web se inventó
a partir de la idea de enlaces hipertextuales para moverse de una página a otra
mediante palabras convertidas en navegación. El enlace azul subrayado es una
prestación visual básica en la que la palabra es un enlace a una llamada a la
acción; aunque el texto coloreado que vemos aquí también es una clara llamada
a la acción.
3.10
3.10
Jerarquía tipográfica en retículas
A la hora de implementar una jerarquía visual tipográfica en una retícula, la línea
base resulta importante. En este ejemplo, varios elementos tipográficos de la
interfaz se muestran con distintos tamaños de texto, desde 36 px hasta 11 px, así
como con distintos pesos (negrita, mayúsculas, normal). Pero cada línea del
texto está alineada sobre una línea base, y el interlineado se ajusta en
consecuencia para mantener su legibilidad.
El color en la pantalla
Los diseñadores gráficos utilizan dos espacios de color distintos para
impresión y para pantalla. En impresión se usa el espacio de color CMYK
de cuatro colores: cyan, magenta, amarillo y negro; mientras que en
pantalla se usa el espacio de color RGB, compuesto por el rojo, el verde y el
azul. Al modelo de color RGB se le llama también “modelo aditivo” porque
suma el rojo, el verde y el azul para crear todo el espectro visible. El efecto
del color reside más allá de sus estructuras técnicas y matemáticas; es eficaz
en la comunicación no verbal porque afecta a nuestras emociones en un
nivel subconsciente. Desde una perspectiva jerárquica, el color atrae y
dirige la vista a lo largo de la interfaz. Resulta útil para separar y distinguir
los bloques de contenido, así como para identificar objetos únicos y
contrastar las relaciones entre grupos de objetos.
Representar colores
Según su resolución y la tarjeta gráfica del dispositivo, las pantallas modernas
pueden representar 65.000 colores por píxel. Sin embargo, no todos los
monitores o dispositivos están calibrados de la misma forma, por lo que todavía
existen 216 colores que tradicionalmente se consideran “seguros para Web”. En
las interfaces webs, el color se controla desde el código mediante la conversión
de los valores RGB a un valor hexadecimal. Los valores que forman el intervalo
de los colores hexadecimales empiezan en el 0 y van hasta el 9, y utilizan las
letras de la A a la F. En el sistema hexadecimal, el color blanco (valor RGB de 0)
se lee como el código #FFFFFF, y el negro (con un valor RGB de 255), como
#000000; el resto de los colores presentan valores comprendidos entre estos
extremos (véase página 84).
En la estructura de la interfaz web, los valores de color hexadecimales se utilizan
en el HTML o en los estilos dentro del código CSS3. Si se añade un canal alfa
para crear transparencias, el diseñador web puede crear diseños ricos
gráficamente sin la necesidad de usar demasiadas imágenes. En otras interfaces,
como aplicaciones, Blu-ray/DVD y juegos, los valores RGB se seleccionan o
bien en el software de creación de la interfaz, o bien el programador los
referencia de manera directa en el lenguaje de programación.
3.11
3.11
Colores para pantalla
En esta imagen podemos ver representados los colores para pantalla con sus dos
códigos de valores. Junto a cada muestra de color, se lista su valor hexadecimal
de seis dígitos y los correspondientes valores RGB y HSV.
Los significados del color
En un nivel básico, el color afecta a nuestras percepciones. Puede ayudar a
determinar cómo percibirá el usuario el diseño de la interfaz, su navegación y su
contenido. Pero atención: el color se define cultural y psicológicamente, y en el
mundo tiene distintos significados según las diferentes culturas.
Por lo general, los colores cálidos se perciben como más brillantes y dominantes.
Los colores cálidos se expanden y destacan de sus fondos mientras que, por el
contrario, los colores fríos se encogen. Los colores neutros tienen un menor
impacto emocional y perceptivo. El color define la experiencia visual de manera
excelente, estimulando la vivacidad y el interés o calmando al usuario.
En la mayoría de los países occidentales, las personas, aunque hablen distintos
idiomas, comparten la misma interpretación del color; por ejemplo, el rojo puede
representar peligro o pasión. Pero algunos colores pueden resultar
problemáticos, ya que sus significados pueden diferir mucho en las distintas
culturas. Por ejemplo, en occidente, el verde está asociado con la ecología y la
naturaleza, pero en las culturas no occidentales también puede significar
corrupción e infidelidad. Así que, aunque dentro de la interfaz el color es útil
para transmitir personalidad, tono, información y llamadas a la acción, debería
usarse junto con imágenes y texto para maximizar la comunicación y minimizar
potenciales malentendidos.
3.12a
3.12b
3.12a–3.12b
Cambios en la percepción del color
La selección de una paleta de colores adecuada ayudará a transmitir un tono y un
mensaje correctos al usuario. En estos ejemplos, la Scotch Malt Whisky Society
utiliza una paleta de tonos tierra para indicar un secreto muy bien enterrado. La
página web de Edinburgh Fringe utiliza una paleta más viva de colores cálidos
para transmitir la creatividad durante el festival cultural de un mes de duración.
La aplicación del color
Los colores son siempre relativos al contexto en el que se visualizan. Si se
agrupan dos o tres colores en una paleta pueden encontrarse combinaciones que
funcionen bien para el diseño de interfaces. Para escoger colores para pantalla
(RGB) o impresión (CMYK) se utiliza una rueda de color, que comprende un
espectro basado en los tres pigmentos primarios: rojo, azul y amarillo.
Los colores complementarios son los que están situados en lados opuestos de la
rueda de color (como el rojo y el verde). Los colores análogos están situados el
uno junto al otro y funcionan bien juntos, ya que comparten una parte similar del
espectro (como el verde, el azul y el púrpura). También puede establecerse una
relación de tríada seleccionando una paleta de tres colores: el espacio de color
RGB ofrece una amplia variedad de relaciones de tríada para seleccionar y ver
colores.
Para asegurarnos de que la interfaz sea usable, los colores de las tríadas deben
estar equilibrados, ya que algunas combinaciones de colores son problemáticas.
El contraste entre los colores muestra los niveles de importancia mediante la
prominencia. Cuando se seleccionan tres colores para una paleta, estos pueden
ser complementarios o análogos entre sí. El choque de colores añade demasiado
“ruido” a un diseño y debería evitarse, pero el contraste de colores puede ser
eficaz para llamar la atención.
RGB: Color aditivo y valores hexadecimales
Color aditivo
Las luces roja, verde y azul se proyectan con un valor de entre 0 y 255 para
generar todos los colores visibles. Si todos los colores RGB presentan su menor
intensidad de cero (están apagados), entonces se proyecta luz blanca. Si están
todos proyectados a su máxima intensidad (todos encendidos con un valor de
255), se proyecta luz negra. En el diseño de interfaces webs, estos valores RGB
se convierten a código de marcado, en forma de valores hexadecimales o valores
RGBA, que además permiten la transparencia (la “A” representa el canal alfa
que controla la opacidad del color).
Valores hexadecimales
El valor hexadecimal del rojo es #FF0000 (el rojo está encendido, el verde y el
azul, apagados), el del verde es #00FF00 (verde encendido, rojo y azul,
apagados) y el del azul es #0000FF (azul encendido, rojo y verde, apagados).
3.13
3.13
Teoría del color
La teoría del color es una parte fundamental de la comunicación visual. En esta
ilustración, compilada a partir de mudcu.be/sphere/, pueden entenderse las
relaciones entre los colores complementarios, análogos y neutros.
Las imágenes y el píxel
En el diseño de interfaces, las imágenes pueden servir como contenido,
decoración y, algo crucial, como navegación; entender cómo se usan es una
parte esencial del trabajo del diseñador. Aunque comparten ciertos
requisitos de calidad, resolución y permisos, las imágenes que se muestran
en la pantalla de un ordenador son diferentes a las imágenes impresas.
Tradicionalmente, las pantallas de ordenador se han centrado en una
resolución mínima de 72 ppp (píxeles por pulgada). Las imágenes con una
calidad superior a 72 ppp se consideraban un derroche del tamaño del
archivo. Sin embargo, con las pantallas de las tabletas modernas, la
resolución total ha aumentado la densidad de píxeles hasta los 326 ppp,
mayor que el mínimo estándar de 300 ppp que se necesita para impresión.
Imágenes para pantalla
Los archivos de imagen digitales pueden ser de dos tipos: vectoriales o de mapa
de bits. Los vectoriales tienen un tamaño muy pequeño y se crean
matemáticamente, mientras que los mapas de bits se crean mediante el coloreado
de cada píxel en la imagen.
La pantalla es una matriz de píxeles y las imágenes se muestran dentro de dicha
matriz; cada píxel es de uno de los, al menos, 256 colores (en pantallas de baja
resolución). Esto significa que una imagen realista, como una fotografía,
mantiene su calidad representándose dentro de este intervalo de color. Para
conseguir esto, los mapas de bits utilizan el antialiasing, difuminando dos
píxeles coloreados con un tercer píxel que es una mezcla de ambos. Esto crea la
ilusión de suavidad, lo que compensa la naturaleza escalonada de los píxeles.
Debido a que el número determinado de píxeles es lo que define su calidad e
integridad, redimensionar una imagen en mapa de bits es un problema. Cuando
se encoge un mapa de bits, la imagen pierde calidad porque se eliminan píxeles.
Por ejemplo, si una imagen de 800x600 px se reduce a 400x300 px, hay 360.000
píxeles menos con los que mostrar la misma imagen. Aumentar un mapa de bits
también afecta a su calidad, ya que añadir píxeles reduce la integridad de la
imagen original.
Por otro lado, las imágenes vectoriales no pierden integridad al
redimensionarlas, ya que la integridad de los vectores se controla
matemáticamente y pueden escalarse hasta el infinito sin pérdida de calidad. Los
formatos de archivos vectoriales, como el PostScript encapsulado (EPS), son
ideales para imprimir, pero, debido a su gran tamaño, no están indicados para el
diseño de interfaces.
En este caso, y en especial en el diseño web, se utiliza el formato de gráficos
vectoriales redimensionables [SVG, del inglés scalable vector graphic]. SVG es
un lenguaje de texto (soportado por Adobe Illustrator) que sirve para dibujar y
animar imágenes para su representación online. Describe matemáticamente las
formas, recintos, filtros de efecto y texto que definen la imagen final. Al
redimensionarlas, en SVG las imágenes no sufren ninguna pérdida de integridad.
3.14
3.14
Imágenes vectoriales y de mapa de bits
En esta imagen se hace evidente la diferencia entre los iconos creados como
mapas de bits (izquierda) y los iconos creados con vectores (derecha). Al
ampliarla, la imagen vectorial es más nítida que el mapa de bits. Los bordes del
mapa de bits pueden verse con claridad ya que la imagen está pixelada y con
antialiasing.
3.15
3.15
Antialiasing
El antialiasing puede verse al ampliar el borde del icono en mapa de bits. El
icono verde y el fondo gris utilizan una superposición de degradados de cada
color para suavizar el borde. Cuando se visualiza al ciento por ciento el borde se
ve suavizado en lugar de dentado.
Formatos de imágenes
EPS: Encapsulated PostScript o PostScript encapsulado. Formato de archivo
para impresión.
GIF: Graphics Interchange Format. Adecuado para imágenes lineales, tipografía
o de colores planos simples (en la actualidad no se usa demasiado).
JPG: Joint Photographic Experts Group. Adecuado para fotografías de tono
continuo en RGB.
PNG: Portable Network Graphic. Adecuado para mezclar texto e imágenes.
SVG: Scalable Vector Graphic o gráfico vectorial redimensionable. No es un
formato de archivo, sino un lenguaje de texto (XML); los SVG utilizan
coordenadas de vector para definir la construcción dinámica de imágenes en un
navegador.
Las imágenes como navegación
La navegación puede estar representada mediante distintas metáforas visuales
(pestañas, menús, hipertexto, botones, etc.). En algunos diseños de interfaz, las
imágenes pueden integrar de manera visual todas las interacciones necesarias en
una experiencia de usuario contextualmente temática. Esto hace que la imagen se
convierta tanto en contenido como en navegación, pero hay que tener cuidado y
asegurarse de que las prestaciones visuales son evidentes.
Mediante la creación de un entorno visual con el que la interfaz pueda trabajar,
una imagen puede indicar interacción y mantener a la vez la metáfora visual.
Para ello, la imagen necesita seguir algún tipo de lógica real que mantenga la
coherencia. En las interfaces de juegos, esto suele conseguirse integrando
visualmente en el proceso interactivo de selección la estética, la identidad y el
tono del mundo del juego.
Para entender el concepto de la “imagen como navegación”, podemos considerar
la interfaz como un entorno visualmente representado, en lugar de ser un
contenedor de imágenes, texto, animación y una composición reticular obvia.
Iconografía
El beneficio de utilizar imágenes como contexto visual es su coherencia como
metáfora hacia el usuario. Pero la “imagen como navegación” no funcionará para
todas las interfaces. Se trata simplemente de una herramienta más con la que
cuenta el diseñador y que puede ser utilizada cuando sea beneficioso para el
usuario (y el cliente).
La iconografía y la comunicación visual tienen una larga tradición que se
extiende miles de años atrás, hasta el Antiguo Egipto e incluso hasta las pinturas
rupestres prehistóricas. En estas formas tempranas de arte, las imágenes
contenían representaciones simbólicas y metafóricas de animales y rituales, con
un significado muy evidente para las personas que las crearon. Hoy en día, en
nuestro lenguaje visual y escrito utilizamos símbolos e iconos de la misma
forma: representamos una idea mayor con una imagen pequeña o una línea.
Gracias a las primeras innovaciones de diseñadores gráficos como Norm Cox,
Karen Elliot y Susan Kare, el uso de iconos en el diseño de interfaz ha crecido y
madurado desde el desarrollo de la interfaz gráfica de usuario en la década de
1970. Como usuarios, estamos familiarizados con las metáforas de los iconos
que representan documentos, carpetas, paneles de control, archivos de ajustes,
controladores y discos.
Como seres humanos, mediante el uso de dichas metáforas hacemos conexiones
subconscientes con las funciones interactivas de la interfaz. El uso de iconos en
la interfaz hace que sea fácil diferenciar los elementos interactivos del contenido
estático.
3.16
3.16
Interacción integrada
En esta imagen contextual, la navegación adicional se presenta en forma de
botones e iconos integrados en el mensaje de la imagen. En lugar de estar situada
encima a modo de barra de navegación, la interacción está integrada en la
imagen y forma un todo visual. www.sensisoft.com
Iconografía y metáfora
Iconos: Facilitan procesos complejos
Los iconos son herramientas de interfaz que centran visualmente la atención y
comunican, de manera concisa, una llamada a la acción mediante una metáfora
visual entendible. Comprender la conexión entre el icono y la función lleva a que
se realice la acción deseada (por lo general, hacer clic) y a un resultado
satisfactorio.
El icono debe transmitir con claridad su función al usuario. La interpretación de
las imágenes es un asunto cultural y ambiguo, por lo que la imagen que adopte el
icono debe ser familiar y debe poder reconocerse al instante. Si no es así, la
acción no se comunicará.
La imagen puede estar conectada de manera específica a la función, o puede ser
figurativa o abstracta. Cuanto más específica sea la imagen, más fácil será
conectarla con la función y la acción; si es obtusa, el usuario deberá aprenderla.
Existe un vocabulario icónico establecido, con una gramática propia rica y
compleja, al que los usuarios están acostumbrados. El usuario puede aprender
los significados (casa = icono de página de inicio) o identificarlos de inmediato
(impresora = imprimir).
Si el significado de un sobre se ha establecido como “email”, cambiar su función
puede confundir al usuario. El mal uso de los iconos es responsabilidad del
diseñador. Muchas veces, las interfaces fallan porque se usan iconos para
navegar que no tienen ningún significado.
Vocabulario común de iconos:
Tuerca: ajustes
Sobre: email
Casa: página de inicio
Lupa: buscar o aumentar
Impresora: imprimir
3.17
3.17
Conjuntos de iconos
Los iconos deben transmitir una llamada a la acción, por lo que las imágenes
deben destacar sobre el contenido de la interfaz sin competir con él. Si estos
iconos no tuvieran etiquetas, ¿cuántos de ellos serían obvios y cuántos deberían
aprenderse?
La metáfora y el contexto
La metáfora es una herramienta en particular útil en la comunicación visual, ya
que puede simplificar complejidades transgeneracionales o transculturales. En
esencia, se trata de la transferencia de significado de un objeto a otro, y es un
recurso muy habitual en el lenguaje oral y escrito.
Desde las primeras metáforas de carpetas, archivos, etc., las metáforas han
tenido un papel persistente en las GUI (Interfaz gráfica de usuario). Una
metáfora de interfaz adecuada es aquella que explica la función y facilita la
acción al instante. A la vez, debe ser –con facilidad– entendible, legible y
relevante para el contexto para un gran número de usuarios (que, a menudo,
hablan múltiples idiomas).
Añadir etiquetas de texto a los iconos ayuda a optimizar la usabilidad, ya que
puede tardarse un tiempo en aprender algunos significados. Antes de que
estuviera aceptado por todo el mundo que el icono de una casa representaba la
página de inicio, tenía junto a él una etiqueta de texto que decía “inicio”. Una
vez adoptados la identidad y el propósito del icono, puede mostrarse por sí
mismo en una interfaz sin ninguna etiqueta.
Cuando se ha establecido un significado universal, el rico lenguaje visual de los
iconos y su gramática pueden convertirse en una fuente de inspiración. No existe
una única forma de dibujar una casa, una lupa o un sobre; los diseñadores han
encontrado varias maneras innovadoras de representar estos iconos universales.
Software para el diseño de iconos
—AWicons Pro, de Lokas Software
—IconWorkshop, de Axialis Software
—Icon Craft, de Icon Empire
3.18
3.18
Significados de los iconos
Si tapáramos las etiquetas de estos iconos, distintos usuarios interpretarían cada
imagen de manera diferente. La comunicación visual mediante iconos falla
cuando no se entiende con claridad la metáfora o la analogía. Si todavía no se ha
establecido un significado universal, deben añadirse etiquetas textuales para
ayudar a que el usuario lo entienda.
El diseño de familias de iconos
Diseñar un icono no es tan simple como hacer una imagen y luego reducirla. Al
tratarse de una representación de una función más compleja, las imágenes de
iconos necesitan un enfoque distinto a las imágenes usadas como contenido.
Debido a su utilidad, es necesario que el icono funcione en una variedad de
escalas, a distintas resoluciones y en diferentes pantallas. Aunque los iconos son
mapas de bits, no pueden utilizar el antialiasing de la misma forma que las
imágenes de contenido.
El icono se debe poder representar y comunicar a diferentes escalas utilizando un
número de píxeles distinto. Las imágenes usadas para un icono deben parecer
iguales a 512x512 px que a 32x32 px, a pesar de que existe una diferencia de
261.120 píxeles entre los dos tamaños.
Esto hace que existan muchas limitaciones que deben tenerse en cuenta. Las
imágenes en mapa de bits hechas a partir de una retícula de píxeles cuadrados
funcionan mejor cuando incorporan ángulos rectos. A tamaños tan pequeños, sin
antialiasing que ayude a suavizar las líneas, los ángulos son muy importantes.
Un píxel fuera de sitio puede arruinar el diseño del icono.
El icono también debe funcionar en diferentes resoluciones de pantalla. Para
pantallas de baja resolución, se necesita tanto una versión de 8-bits de 256
colores como una versión de 4-bits de 16 colores. En algunos casos, puede ser
necesaria una versión monocroma, lo que implica simplificar una versión de 1bit a partir de las versiones de color previas.
El desarrollo del diseño de iconos tiene una sólida base técnica y creativa, y a
medida que las pantallas de mayor resolución ofrecen una mayor variedad de
colores, continúa presentando apasionantes retos a los diseñadores.
Problemas con los píxeles y los ángulos
En una retícula de píxeles cuadrados, los ángulos de 45º suelen funcionar, pero
pueden presentar problemas muy evidentes cuando pasan a ser de 30º, 60º o
120º. Lo mismo ocurre con cualquier otro tipo ángulo, o con círculos y elipses.
3.19
3.19
Tamaños de iconos y resolución
Para ayudar a la legibilidad, un icono debe diseñarse cuidadosa y metódicamente
dentro de una familia de iconos de múltiples tamaños. En cada familia de iconos
habrá por lo menos de seis a ocho piezas a distintas escalas. Antes de diseñarlo
con un software, primero se boceta cada icono.
Seguir el movimiento
A medida que la interacción se personifica, el movimiento en las interfaces
ha pasado de las animaciones y proyecciones a los reproductores de vídeo
integrados y a los dispositivos de entrada sensibles al movimiento. Aunque
los diseñadores gráficos no son los encargados de programar o de crear
estas nuevas tecnologías, sí desempeñan un papel en estos cambios. Para
crear una experiencia de usuario estética, el diseño gráfico debe tenerse en
cuenta a la hora de diseñar cómo se integra un reproductor de vídeo en una
interfaz, o cómo reaccionará el diseño a los sensores.
El movimiento en la interfaz como experiencia
Tanto si se diseñan interfaces para páginas webs, software, aplicaciones, DVD o
videojuegos, el uso del movimiento en la interfaz está cambiando. Las páginas
webs solían usar plugins de terceros para poder reproducir animaciones o vídeos;
ahora esto se puede controlar mediante código. El software y las aplicaciones
incorporaron el movimiento en las interfaces para ayudar a la experiencia; en
algunos casos, el movimiento es ahora el input principal.
Las innovaciones en la industria de videojuegos, en especial la Nintendo Wii y el
Kinect de Microsoft, están germinando en otras formas de software. Con la
proliferación de la computación para tabletas, como el uso que hace el iPad de
sensores de movimiento junto con la pantalla táctil y el control por voz, el input
está pasando del ratón al cuerpo humano. Esto hace que el ordenador personal
sea aún más personal, y la comunicación visual de la interfaz debe adaptarse a
este hecho.
En algunos casos, las interfaces deben funcionar no solo en los distintos
dispositivos, sino también con múltiples tipos de inputs. Pero el propósito de la
interfaz sigue siendo la transmisión sin problemas del contenido, la información
y una gran experiencia de usuario. Por tanto, los diseñadores gráficos necesitan
estar al día de las nuevas tecnologías para buscar soluciones visuales a la hora de
crear experiencias de usuario estéticas basadas en el movimiento.
3.20
3.20
Kinect de Microsoft
El Kinect de Microsoft detecta el cuerpo humano y lo transforma en un input
personificado, controlando lo que se ve en la pantalla del televisor. La
jugabilidad es ahora más física y puede seleccionarse un medio de
entretenimiento sin necesidad de un mando a distancia.
La comunicación visual del movimiento
Además de para mostrar vídeos y animaciones, el movimiento se usa para
comunicar contenido, llamadas a la acción o retroalimentación de una
interacción. Las secuencias de carga de software incorporan movimiento, y los
componentes de la interfaz demuestran la acción y el procesado a través del
movimiento (por ejemplo, las barras de progreso de carga). Los títulos, logotipos
y botones pueden tener algún tipo de movimiento incorporado para llamar la
atención del usuario.
Los videojuegos y los Blu-ray/DVD utilizan la animación para mostrar
transiciones entre los cambios de pantalla y, dentro de la interfaz, para llamar la
atención sobre las llamadas a la acción o simplemente para previsualizar partes
del contenido del vídeo o del juego. En algunas interfaces, la selección de
contenido está animada mediante el uso de pases de diapositivas o carruseles,
ampliando o reduciendo las imágenes para facilitar la selección. Aunque pueda
parecer obvio, cualquier equipo de diseño (y cliente) debería tener en cuenta lo
siguiente: el autocontrol es clave a la hora de usar movimiento para comunicar
visualmente.
Gracias a estándares de código más avanzados (como HTML5), está
disminuyendo la necesidad de utilizar plugins de terceras partes, y si el
diseñador y el programador colaboran, se presentan muchas oportunidades para
crear apasionantes experiencias de usuario. También se puede innovar en
opciones de visualización alternativas, como que el fondo de la interfaz sea un
vídeo (que habrá que optimizar para evitar tiempos de carga demasiado largos).
Sin embargo, demasiados elementos de este tipo se convierten en “ruido” que
interfiere en la comunicación.
En sí mismo, el contenido de los vídeos demanda mucho más del diseño y la
composición de la interfaz. Cuando el usuario (que también es espectador)
accede a un vídeo, necesita estar seguro de que sigue estando dentro la misma
interfaz (por suerte, HTML5 hace que esto sea más fácil). Por tanto, la
integración de reproductores de vídeo en interfaces webs o aplicaciones tiene
implicaciones en la eficacia de la comunicación visual.
Las páginas webs y las aplicaciones de los canales de televisión (como la BBC),
los proveedores de vídeo en continuo (como Netfilx) y los archivos de vídeo
(como YouTube) han innovado en el aspecto de este nuevo tipo de reproductores
integrados. El contenido en vídeo (incrustado o vía emisión en directo) ahora
puede situarse en la pantalla principal de la interfaz, o puede sacarse a su propia
ventana de reproducción. Incluso puede ocupar toda la pantalla. Por tanto, la
comunicación visual de la marca, el tono y la identidad deben mantenerse a lo
largo de las tres opciones de visualización.
3.21
3.21
Sick City Club
En las interfaces basadas en Flash, el vídeo puede integrarse directamente como
fondo de la interfaz. Esto tiene sentido si se trata, por ejemplo, de la página web
de un grupo musical, ya que ayuda a reforzar tanto la marca del grupo como su
música. En otros casos, en cambio, esto puede no funcionar para el usuario (por
ejemplo, una interfaz de seguros que reproduzca un vídeo de un vendedor
hablando sobre pólizas de seguros como fondo de un contenido normal).
www.sickcityclub.net
3.22
3.22
Animación en el código
El movimiento en la interfaz no se limita tan solo a reproductores y contenido en
vídeo. El movimiento también puede programarse y controlarse a través del
dispositivo de entrada (ratón, dedo, cuerpo). En este ejemplo, cambiando la
posición del cursor, el visor de la cámara se mueve alrededor de la escena. Esto
se controla mediante el código subyacente. http://attackemart.in/cameraparallax-effect/
Entrevista: Mike Kus
Algunas personas aconsejan diseñar una interfaz primero para las
plataformas móviles y después para las de escritorio. ¿Está de acuerdo?
Creo que este tipo de afirmaciones revolucionarias son un error. Puede ayudar,
desde luego, pero yo no diría que hay que hacerlo de esta forma. Con todos los
dispositivos móviles que existen ahora, el diseño adaptable está alcanzando su
mayor potencial. Si se quiere diseñar una página web de la manera adecuada, ya
sea adaptable o no, sin duda se necesita algún tipo de solución para los móviles.
Los dispositivos como el iPad pueden gestionar con facilidad las páginas
normales, pero los móviles son algo del todo distinto y es absolutamente
necesario tener algún tipo de solución.
Los principios usados en el diseño para impresión se trasladan casi directamente
a la Web. Lo único que es diferente en la Web es que el diseño es fluido, se
reconfigura en una retícula distinta a medida que disminuye el tamaño de la
ventana.
¿Podría darnos un ejemplo de cómo los principios del diseño gráfico se han
traducido del papel a la Web?
Cuando empecé a hacer diseño web, las únicas fuentes que existían para la Web
eran la Helvetica, la Verdana y la Times New Roman. No podías llegar
demasiado lejos con ellas.
Poco después apareció TypeKit, junto con @font-face y otras muchas soluciones
para la tipografía web.
Son geniales: ahora existe una variedad mucho mayor de fuentes que se
renderizan realmente bien en pantalla, y que además funcionan a la perfección
en un iPhone. Por tanto, es increíble lo que se puede hacer ahora que la
tipografía web se ha equiparado con el diseño gráfico tradicional.
¿Podría ponernos un ejemplo de cómo aplica sus conocimientos de
comunicación visual al diseño web?
Ahora se hacen páginas mucho más complejas que antes, lo que desde el
principio te hace pensar en la forma en que se diseña toda una web. Supongo que
lo que de verdad ha cambiado es la introducción de las media-queries de CSS3.
Cambiaron los estilos y, por supuesto, cuando pasas de una retícula de tres
columnas a otra de dos columnas, y a otra de una columna, no estás cambiando
solo los porcentajes de las columnas, sino lo que cabe dentro de ellas. Estás
pensando en cómo va a traducirse esto en un dispositivo móvil. Puedes decidir,
por ejemplo, aumentar el peso de la tipografía y reducir el tamaño de la letra que
estás usando en un dispositivo más pequeño. Hay que tener en cuenta que en una
tableta el texto no tiene que ser tan grande, los títulos pueden ser más pequeños.
Hay que tener en cuenta muchas cosas.
Profesión
Diseñador gráfico y web (Reino Unido)
Experiencia
Diseñador gráfico profesional durante 14 años
Web
http://mikekus.com/
3.23
3.23
Future Insights Live
Cuando en 2013 se les pidió que rediseñaran las páginas webs del nuevo
acontecimiento Future Insights, Mike Kus y Neil Kinnish (que se encargó del
desarrollo front-end) crearon una página completamente adaptable que puede
verse en: futureinsightslive.com/las-vegas-2013/.
Caso de estudio
Diseño de una interfaz para Blu-ray
Planificación de la interfaz del Blu-ray
La prolífica carrera del cantautor canadiense Neil Young abarca más de cinco
décadas. Quería lanzar un archivo de su música junto con otros recuerdos en
forma de experiencia multimedia que permitiese la inmersión. La tecnología
Blu-ray (BD) lo hizo posible.
Neil esperaba que el equipo de diseño de Total Media creara una experiencia a la
altura de la alta calidad del sonido. Quería que el oyente fuera capaz de navegar
directamente entre los recuerdos (prensa, entradas, artículos y fotos)
relacionados con cada canción a medida que las escuchara.
Neil Young y otros miembros de su productora, Shakey Pictures, trabajaron
junto con el director creativo de Total Media, Toshi Onuki, para discutir el
aspecto y comportamiento de la experiencia. La inmersión debía tener un
entorno virtual realista por el que se pudiera navegar con facilidad.
Proyecto
Neil Young Archives, Vol. 1 (1963–1972) Blu-ray DVD
Equipo de diseño
Total Media Group, California, EE. UU.
Cliente
Shakey Pictures
Arquitectura de la información, retícula y metáfora
En las 10 cajas del archivo en BD había 3.000 pantallas de menús y más de 20
terabytes de material que había que convertir en contenido. Tal como recuerda
Toshi: “Creo que no sabíamos lo grande que sería el proyecto hasta que se nos
entregó todo el material”. Cada pantalla del BD era un escenario a medida, y
cada canción una instantánea de un momento que contenía recuerdos
contextuales que el usuario podía explorar visualmente. Por tanto, cada pantalla
también tenía una retícula a medida.
Para gestionar un proyecto de diseño de interfaz tan grande, en el que trabajaban
muchas personas distintas, Toshi creó una estructura que establecía una
comunicación clara de los estándares y protocolos de gestión de archivos. Utilizó
la metáfora de un archivador de documentos, en el que cada carpeta representaba
una canción y contenía los recuerdos asociados a ella.
3.24
3.24
Menú del BD
Tal como puede verse en esta imagen, el menú del BD es bastante complejo. Sin
embargo, la metáfora visual y la composición reticular comunican visualmente
los elementos seleccionables. En la metáfora del archivador, se puede acceder a
las canciones haciendo clic en las pestañas.
3.25
3.25
Fase de planificación
Junto con la compleja arquitectura de la información, crearon un sistema de
archivos estructurados en categorías como recuerdos, prensa, fotos, etc. Cada
categoría tenía, a su vez, recursos contextuales, como miniaturas, galerías de
fotos, titulares y subpantallas.
Iconos y movimiento
Como cada pantalla presentaba un escenario diferente de la trayectoria de Neil
Young, los iconos de navegación también eran distintos y según el contexto de
cada escenario. Pero los enlaces debían ser evidentes para el usuario, por lo que
al seleccionarlos, todos ellos mostraban la misma animación de cinco
fotogramas, que aumentaban su tamaño y brillo. Esto ayudaba a explorar la
interfaz y respondía al deseo de Neil de una experiencia que permitiese una
inmersión obsesiva. Pero fue necesario mucho diseño. En un archivo PSD por
capas, cada botón constaba de su estado normal, su estado seleccionado y su
estado activo. Al tratarse de 3.000 páginas, multiplicadas por múltiples botones
en cada pantalla, esto supuso muchísimo trabajo, que solo fue posible gracias a
una sólida arquitectura de la información.
3.26a
3.26b
3.26a – 3.26b
Navegación y menú de selección
En esta ilustración, superpuesta sobre una pantalla de la interfaz se representa la
riqueza del acceso al contenido dentro de la jerarquía del DVD. Las relaciones
están resaltadas de manera que cuando se clican individualmente, se accede a las
subpantallas mostradas en 3.26b.
3.27
3.27
La forma de colocar la navegación y los recursos
Utilizando la retícula y la línea base, posiciona la navegación y el logotipo en
una nueva capa llamada Navegación. Añade en otra capa nueva llamada
Recursos el resto de los recursos de contenido, como las imágenes, los iconos,
los pies de página e incluso los reproductores integrados. Alinea en horizontal
estas capas dentro de las columnas de la retícula y en vertical en cada línea base.
Ejercicio
La comunicación visual de la interactividad
Premisa
En este capítulo, hemos analizado los fundamentos básicos del diseño
gráfico para medios digitales. Aplicando estos principios mediante la
experimentación visual, ganarás confianza a la hora de diseñar una interfaz.
Este ejercicio trata sobre comunicación visual, por lo que el resultado no
será interactivo. Puede repetirse varias veces y adaptarse a medida que
ganas confianza. Podrás experimentar sobre cómo comunicar visualmente
las prestaciones visuales y las llamadas a la acción mediante la selección de
la resolución de pantalla, el uso de una retícula, la aplicación de variaciones
tipográficas y la selección de imágenes y colores adecuados.
Necesitarás los siguientes recursos:
—Software de tu elección
(El estándar es Adobe Creative Suite. Para este ejercicio, puedes usar
cualquier software con el que estés familiarizado.)
—Una retícula: véase http://tinyurl.com/examplegrid
—Recursos: imágenes, iconos, texto escrito.
(Puedes usar contenido ficticio o contenido de una página web que hayas
diseñado con antelación.)
3.28
3.28
Sitúa el texto en la línea base
El texto que forma el cuerpo del contenido está dispuesto a 14 px, y el
interlineado es de 16 px. Otros textos como la cita, el pie de página, la
navegación y el titular tienen un interlineado distinto, en proporción a su tamaño.
Ejercicio
Abre la retícula de ejemplo de 976 px en el programa que prefieras.
Coloca la navegación y los recursos (véase imagen 3.27)
Añade una nueva capa llamada Navegación. Coloca tu navegación sobre la
retícula en esta capa y alinéala a una línea base adecuada.
Añade otra nueva capa y llámala Recursos. En esta capa, coloca las imágenes o
vídeos, alineados de forma adecuada en las columnas de la retícula y sobre la
línea base. Recuerda dejar espacio en blanco (negativo) y no te olvides de
construir una jerarquía visual.
Coloca el texto sobre la línea base (véase imagen 3.28)
Añade la última capa, llamada Texto. Añade cajas de texto con tu contenido
escrito. Ten en cuenta la forma en que la altura de la x y de la línea base están
matemáticamente conectadas, escoge las tipografías con prudencia.
Una vez que estés satisfecho con el diseño, esconde la capa Retícula. Verás
cómo funciona la comunicación visual de la interfaz. Esconde y muestra la capa
Retícula para ver la alineación a la retícula.
Resultados
Este ejercicio no tiene la intención de crear una interfaz de usuario interactiva de
trabajo, sólo pretende ayudarte a comprender los fundamentos de diseño gráfico
para los medios digitales y la comunicación visual. Realizar solo una vez este
ejercicio no es suficiente. Diviértete y modifica, mueve, aumenta y reduce los
elementos de interfaz de usuario dentro de la red de restricción y aprende lo que
funciona y lo que no funciona. Verás cómo las diferentes variaciones afectan a la
comunicación visual del diseño de interfaz de usuario.
4
El diseño de la experiencia estética de usuario
A través del ajuste del contenido de la interfaz a los objetivos y expectativas
del usuario, en este capítulo analizaremos los aspectos específicos del diseño
para la interacción. Mediante teorías relacionadas con el contexto de uso,
explicaremos la experiencia estética de la persona que utiliza la interfaz.
Como diseñadores, y no como usuarios finales, es crucial que veamos desde
el punto de vista del usuario las prestaciones visuales a las llamadas a la
acción; examinaremos por tanto la interacción desde una perspectiva en
primera persona. Analizaremos también la teoría semiótica para ilustrar
cómo funciona el diseño para este tipo de perspectiva.
El diseño y el usuario
A lo largo de todo el libro, hemos defendido al usuario. Tal como hemos
mostrado, su presencia en el proceso de diseño de la interfaz es clave para
conseguir un diseño eficaz. Pero ¿en qué consiste esta presencia? Este
apartado profundizará en la psicología de la interacción de los usuarios
para diseñar una experiencia estética. A la hora de diseñar una experiencia
de usuario estética, la perspectiva de éste en primera persona es sumamente
importante.
Dinámicas de la interacción
A pesar de que las personas (en buenas condiciones físicas) interactúan con el
mundo mediante los mismos sentidos (vista, oído, olfato, gusto y tacto), no todo
el mundo interpreta sus experiencias de la misma forma. La interpretación
individual es una interacción personal, emocional, cognitiva y personificada.
Una experiencia estética de usuario es aquella en la que el usuario pierde
temporalmente la noción de sí mismo y se involucra sin esfuerzos en el
momento, aquella en la que la interacción altera su sentido del tiempo.
La interacción puede ser accidental (“¡Oh! ¿Qué he clicado?”), no deliberada
(“Estoy aburrido, voy a navegar sin más”), con un propósito (“Quiero encontrar
esto”) u orientada a un objetivo (“Espero conseguir este resultado clicando
aquí”). Basado en sus respuestas emocionales y cognitivas, requiere un
compromiso activo por parte del usuario. Por tanto, la experiencia de usuario
(UX) de una interfaz está diseñada para proporcionar un medio a las llamadas a
la acción comunicadas visualmente para poder acceder al contenido.
Es importante recordar que los diseñadores (y los programadores) saben
demasiado sobre diseño de interfaces para apreciar cómo ve un usuario novato
una interfaz. En los equipos de diseño grandes, el diseñador de UX es el
responsable de entender los objetivos de los usuarios, su contexto de uso y sus
niveles de experiencia.
La percepción no es algo pasivo: está conectada a la acción. Entender cómo los
usuarios perciben e interpretan las llamadas a la acción nos permitirá fijar
objetivos de diseño para la interfaz, que nos ayudarán a entender cuáles son los
resultados necesarios de la comunicación visual. Además, gracias a este
conocimiento podremos diseñar la interfaz de manera que el usuario pueda
percibir qué partes de la misma son interactivas.
4.1
4.1
Personas en el mundo
Como personas en el mundo real, nuestras propias percepciones e
interpretaciones de lo que vemos, oímos, probamos, olemos y tocamos nos
ayudan a dar forma a nuestro mundo individual. Las personas perciben e
interpretan las interacciones a su manera, pero dentro de una interfaz, estas
percepciones deben gestionarse para ofrecer una experiencia similar a todos los
usuarios. Esta imagen pertenece a The Catalogue, un vídeo creado por el artista
Chris Oakley en 2004.
La experiencia en primera persona
Todos los usuarios ven la interfaz de la misma manera: un diseño que combina
contenido (imágenes, vídeos y texto escrito) y llamadas a la acción (navegación
e iconos) que permiten acceder a dicho contenido. Pero no todos tienen el mismo
conocimiento previo o la misma experiencia estética de usuario. Para que un
diseñador entienda la forma en que los usuarios percibirán e interpretarán la
experiencia interactiva, resulta útil imaginarse la interacción desde una
perspectiva en primera persona.
Simplifiquemos esto con una analogía. Imaginemos que una puerta es una
interfaz entre el interior y el exterior. A partir de nuestra experiencia previa,
todos sabemos que para pasar de una posición a la otra (el objetivo) necesitamos
abrir la puerta (la interfaz) usando el pomo (llamada a la acción). Pero no todas
las puertas se comportan de la misma forma (experiencia previa). Algunas se
abren hacia afuera, otras hacia adentro, otras son giratorias y otras correderas
(funcionalidad). Además, no todos los pomos son iguales (diseño). El acto de
pasar de una ubicación a otra (el objetivo) parece ahora más complicado. Pero
percibimos el tipo de puerta, sus potenciales interacciones y con rapidez
decidimos una acción que nos permitirá alcanzar nuestro objetivo.
Por supuesto, todos hemos experimentado tratar de empujar una puerta de
“tirar”. En general, esto ocurre porque suponemos que la puerta funcionará de la
misma forma que hemos experimentado en el pasado (o tal vez simplemente
porque no estamos prestando atención). Los usuarios se enfrentan a las interfaces
digitales de la misma manera. Cuando las interfaces (y las puertas) fallan al
individuo, suele deberse a dos factores: las expectativas y la comunicación de las
prestaciones visuales. Si una puerta debe empujarse para abrirse pero el pomo es
una barra vertical que sugiere tirar, la gente tirará de ella. Todos lo hemos hecho.
También esto ocurre a menudo en el diseño de interfaces: las decisiones de
diseño confusas frustran las expectativas del usuario. Los diseñadores deben
entender y apreciar cómo comunicar con eficacia una prestación visual. La
semiótica es una gran ayuda (hablaremos más sobre ella en las páginas 118-119),
pero entender y apreciar la perspectiva del usuario en primera persona, mediante
la investigación y las pruebas, tiene un valor incalculable. Esta perspectiva
informará las decisiones de comunicación visual, asegurándose de que la interfaz
transmita las llamadas a la acción de manera correcta, consiguiendo una
experiencia estética.
4.2
4.2
L. A. Noire
En esta interfaz del juego de L. A. Noire, está claro que la navegación (1) es la
parte interactiva más obvia. La tipografía (2) utilizada en la pared es realmente la
navegación principal. El uso de una tipografía gruesa (y en mayúsculas) y las
etiquetas aseguran que los usuarios perciban estos enlaces. La navegación
adicional está situada más atrás en la escena y puede no verse (3).
4.3
4.3
Method Cards de IDEO
Herramientas como las Method Cards de IDEO ayudan al equipo de diseño a
formular sus ideas para que estén más en consonancia con cómo percibirán e
interpretarán la interacción los usuarios. Las cartas están clasificadas en cuatro
palos: “pregunta”, “observa”, “aprende” e “intenta”.
www.ideo.com/work/method-cards/.
El contenido escrito y el usuario
La tipografía no tiene sentido sin las palabras; las interfaces sin palabras no
son igual de eficaces. Para que una interfaz tenga éxito es importante el
texto, en forma de cuerpo de texto, pies de imágenes, etiquetas de
navegación y titulares. Por tanto, el texto bien escrito, mostrado mediante
una tipografía eficaz, ayuda a crear una experiencia estética de usuario. La
calidad y la concisión del texto escrito ayudan a marcar un tono de voz
apropiado, que refleja la profundidad de la comprensión del público.
También facilita la identificación de las llamadas a la acción, lo que ayuda al
usuario a conocer qué debe hacer y en qué orden.
La accesibilidad a través de un buen texto
El buen contenido atrae y mantiene el interés de los usuarios. En demasiadas
ocasiones, los textos de una interfaz son o demasiado largos o demasiado
corporativos para su público objetivo. En una pantalla, las personas tienden a
escanear el texto más que a leerlo por completo, por lo que muchas interfaces
tienen muchísimo más contenido del que en realidad necesitan.
Todo el contenido, en especial el escrito, debería tener un propósito claro. Es
responsabilidad tanto del cliente como del equipo de diseño entender la
profundidad y el tono de voz que debe comunicar el texto escrito. Comprender
qué hay que decir, a quién y dónde debe situarse en el diseño nos da la
información necesaria para encargar a un redactor la producción de contenido
escrito a medida del público específico de la interfaz. Si los usuarios están
felices y comprometidos, el cliente alcanzará sus objetivos con mayor rapidez.
Es importante que el diseñador conozca la cantidad necesaria de texto para que
pueda hacerle sitio en el diseño de la interfaz. La mayoría de las interfaces
(excepto los blogs y las páginas/aplicaciones de noticias) no necesitan
demasiado texto.
El arte de la redacción de textos
El texto debe comunicar lo que necesita en un tono y a un nivel que el público
objetivo pueda apreciar. Si no está escrito de manera concisa, el lector puede
confundirse y abandonar: debe ser tanto escaneable como legible. Para explicar
esto en mayor detalle, será mejor separar esta discusión en dos partes: el texto
como contenido, y el texto como etiquetas.
Las etiquetas de los iconos, pies de imágenes o títulos y subtítulos deben ser
cortos. Las palabras usadas en las etiquetas también deberían usar un lenguaje
que el usuario pueda entender con facilidad. ¿Quién quiere utilizar una etiqueta
que diga “volver al nivel uno” cuando “inicio” es mucho más amistoso y
seductor?
Es importante que el cuerpo de texto esté compuesto por frases cortas y
concisas; cinco o seis frases es la longitud adecuada del párrafo. La primera frase
de cada párrafo está cargada de importancia y debe mantener al lector leyendo.
La longitud del cuerpo de texto dependerá de lo que se quiera comunicar y de su
ubicación en la interfaz. Cuando sean necesarias grandes cantidades de texto, es
mejor dividirlo en secciones más cortas; de esta forma, puede optimizarse el
diseño de la interfaz para ofrecer grandes cantidades de contenido escrito, ya sea
mediante el desplazamiento o dividiéndolo en varias pantallas o páginas.
4.4
4.4
Grip Limited
Esta página web presenta una combinación eficaz de tipografía, etiquetas, color
y textos concisos. Con esta disposición, la buena proporción en el interlineado
tipográfico y el contraste de colores, los textos accesibles y “directos” funcionan
bien.
El texto dice:
“En Grip Limited odiamos la palabra ‘Silo’. No tenemos ideas preconcebidas
sobre cómo deberían ser nuestras ideas, dónde habrían de situarse o cómo de
grande o de pequeño debe ser un presupuesto. Todo vale. Hacemos borrón y
cuenta nueva cada vez. ¿La única constante? Personas con experiencia que
tienen las mejores ideas para avanzar en los negocios de nuestros clientes.
Cualquiera que sea el medio, cualquiera que sea la disciplina, cualquiera que sea
la idea.”
La semiótica de la interfaz
La semiótica, sobre la que se construye la comunicación visual, es una teoría
que se centra en la conexión entre lo que se ve (el significante) y lo que se
quiere decir (el significado). Estas dos partes forman un signo semiótico. La
semiótica debería tenerse muy en cuenta en el diseño: pueden presentarse
problemas de comunicación si no se seleccionan con cuidado los
componentes visuales de la interfaz. Este apartado examina cómo funciona
la semiótica y cómo puede aplicarse a una interfaz para crear una
experiencia estética de usuario.
Lo visual: Más que solo palabras
Dice el refrán que una imagen vale más que mil palabras; pero ¿qué mil palabras
sugiere una imagen? Entender los signos semióticos nos ayudará a asegurarnos
de que los elementos visuales que escogemos sugieran al espectador el
significado deseado. Dado que existen muchas formas distintas de comunicar
significado, siempre habrá que tener en cuenta el contexto.
Las fotografías, ilustraciones, iconos o composiciones tienen varias capas de
estructura que pueden leerse desde el punto de vista de la semiótica. Los
significantes visuales tienen estructuras conceptuales, textuales y visuales, y la
interacción entre estas estructuras ayuda al espectador a percibir el signo. El
espectador (usuario) decodifica el significado mediante la interpretación. En
última instancia, el éxito de este proceso depende de la forma en que el
espectador descifra el significado subyacente.
Términos de la semiótica (en el contexto del diseño de interfaces)
Destino
acción interactiva de algún tipo
Intención
lo que necesita comunicarse y por qué
Mensaje
las distintas llamadas a la acción o áreas de contenido
Ruido
interferencias externas de la transmisión y la recepción de un mensaje semiótico
Receptor
el usuario de la interfaz
Emisor
el diseñador gráfico
Signo
elemento visual que comunica un concepto específico (el significante y el
significado)
Significado
lo que quiere decir el concepto del significante
Significante
elemento visual que representa un concepto
Transmisión
la tipografía, el color, el texto escrito, los vídeos, las imágenes y las prestaciones
visuales
4.5
Sick City Club: Concepto de “actitud”
Sick City Club, joven grupo de música de Birmingham (Reino Unido),
necesitaba proyectar hacia el público la actitud adecuada. Su página web
transmitió esta idea mediante duros contrastes en blanco y negro y otros
componentes. Todos estos factores son significantes individuales pero,
combinados, comunican una actitud. www.sickcityclub.net
4.6
Tono de voz
La “i” mayúscula de city se alarga hasta la palabra sick y una línea diagonal
negra forma el punto en la palabra sick. Los espacios negativos y ángulos
marcados de la tipografía refuerzan el tono de voz que se pretende significar. Se
transmite un mensaje de “urbano” y “arriesgado”.
4.7
Los componentes visuales comunican el significado
La navegación está inclinada e invade la silueta de la ciudad. En este caso, los
componentes visuales refuerzan la idea de actitud y de vivir al límite. Ladear la
navegación obliga al usuario a girar la cabeza para leer los enlaces, lo que
refuerza un significado que puede entenderse como “alternativo”.
Descifrar los significados
Según en qué contexto se interpreten, una fotografía, ilustración, icono o
composición pueden sugerir varios conceptos distintos. Los elementos visuales
diseñados nunca son neutrales y, desde una perspectiva cultural, pueden implicar
diferentes significados para las distintas sociedades. Incluso dentro de una
misma sociedad, el espectador (usuario) puede hacer interpretaciones sociales
distintas según su edad, género, clase, religión o afiliación política.
En los signos semióticos siempre existe un emisor del “mensaje”; en el diseño de
interfaces, este papel lo desempeña el diseñador gráfico. El usuario de la interfaz
es el receptor del mensaje semiótico, que se transmite mediante el elemento
visual diseñado. En una interfaz, el mensaje es la comunicación de varias
llamadas a la acción y áreas de contenido. Si entiende la semiótica como una
forma de interpretar el concepto deseado, el diseñador puede dar forma y
acentuar la comunicación visual de los mensajes de la interfaz.
Cada decisión que se toma en el diseño de una interfaz tiene la intención de
comunicar (por este motivo el diseñador gráfico es un comunicador visual). El
mensaje dependerá del contenido, los usuarios objetivo y el cliente: puede
tratarse de la comunicación de varias llamadas a la acción y áreas de contenido,
o de una identidad visual “moderna”, “corporativa” o “amable”.
La transmisión del concepto
Entender la semiótica nos ayudará a comunicar de manera clara un mensaje
escogido. La selección y manipulación de la tipografía, el color, el texto escrito,
los vídeos, las imágenes y las prestaciones visuales permiten transmitir el
mensaje al usuario. Una tipografía, imagen o color equivocados podrían
transmitir un mensaje completamente distinto del pretendido. Volvamos a la
analogía de la puerta: el pomo con la forma incorrecta puede hacer que alguien
tire en lugar de empujar.
Las interferencias entre la transmisión y la recepción del mensaje semiótico se
llaman “ruido”. En el diseño de interfaces, este ruido semiótico puede incluir
varias cosas: por ejemplo, que la plataforma tecnológica en la que se muestra la
interfaz sea demasiado lenta o demasiado rápida, evitando que el concepto sea
recibido por completo, o que la pantalla no represente los colores de la forma
deseada.
El destino de un mensaje semiótico dará como resultado una acción de algún
tipo. En una interfaz, puede tratarse de una llamada a la acción exitosa, como por
ejemplo un clic en un enlace, o puede ser simplemente que el usuario encuentre
el contenido deseado dentro de una plétora de información. Los ejemplos
visuales de este apartado ayudan a explicar cómo funciona la semiótica en una
interfaz, identificando los significantes dentro del diseño y lo que significan.
Seleccionando y dando forma con cuidado a los signos semióticos, es más fácil
diseñar una experiencia estética de usuario satisfactoria.
4.8
4.8
El destino: Contenido
El contenido escrito está superpuesto en cajas de texto sobre el fondo negro, que
contiene los vídeos de la banda reproducidos a pantalla completa. Esta crítica se
muestra escalonada en tres líneas horizontales, que representan visualmente las
cinco líneas del pentagrama, mientras que el escalonado representa las notas
musicales.
Cómo funciona la semiótica
Emisor > Intención > Mensaje > Transmisión > Ruido > Receptor > Destino
Sean Hall, This Means This, This Means That (2007, Laurence King)
Internacionalización
Aunque es un lenguaje internacional, el inglés no es el único lenguaje
utilizado en las interfaces. Tal vez los angloparlantes nativos estén
malacostumbrados porque la mayoría de las páginas webs están escritas en
inglés, pero es peligroso que un diseñador crea que esta es la norma para la
que hay que diseñar universalmente. Muchas interfaces, ya sea en la Web,
en una aplicación de un teléfono, un programa en un PC, un DVD/BD o un
videojuego, se presentan en múltiples idiomas, ya que la gente que no habla
inglés quiere leer en su propio idioma el contenido y la navegación de una
interfaz. El diseñador debe considerar esto con seriedad, ya que ignorar la
internacionalización puede tener implicaciones muy costosas para el diseño
de una experiencia de usuario estética y sin esfuerzo.
Idioma
Desde la aparición del transporte aéreo y, más recientemente, la explosión de la
comunicación digital, el mundo se ha hecho más pequeño. En las sociedades
occidentalizadas, los diseñadores de países de habla inglesa pueden tener
prejuicios y creer que la población de todo el mundo tiene sus mismas
necesidades y deseos. Sin embargo, aunque en los países de habla inglesa se lea
de izquierda a derecha, esto no es universal y este tipo de diferencias deben
tenerse en cuenta cuando se crea una interfaz.
En los idiomas que utilizan el sistema de escritura abyad (como el hebreo y el
árabe), la norma es leer de derecha a izquierda; los idiomas representados
mediante sistemas de escritura ideográficos (como el chino) pueden leerse tanto
horizontal como verticalmente. Incluso en los idiomas utilizados en los países
occidentales que leen de izquierda a derecha existen variaciones que el diseñador
debe tener en cuenta: en alemán, por ejemplo, las palabras son mucho más largas
que en inglés.
En inglés, las palabras tienen una longitud media de 5,10 caracteres, mientras
que en alemán la media es de 6,26 caracteres. Si lo comparamos con un lenguaje
ideográfico como el coreano (representado mediante un alfabeto occidental), la
media es de solo 3,05 caracteres por palabra. Un párrafo en inglés de 300
palabras con 15 palabras por línea ocupará 19 líneas. Traducido al alemán, el
mismo texto necesitará 24 líneas; en coreano, solo ocupará 12 líneas.
Antes de la fase de arquitectura de la información deberíamos saber si el diseño
necesitará acomodar varios idiomas, ya que esta información influye en la
composición (desde una perspectiva tipográfica) y en los conjuntos de caracteres
que serán necesarios. Ofrecer al usuario la opción de acceder a la interfaz en su
propio idioma mejora la experiencia de usuario sin comprometer la estética.
4.9
4.9
Doodles de Google
Las diferencias culturales pueden tener un gran impacto en los diseños de
interfaz si los usuarios objetivo pertenecen a distintas culturas. Google ha
localizado su buscador en distintos idiomas. Los doodles de Google que se
muestran sobre la caja de búsqueda también presentan referencias visuales hacia
otras culturas. Esto hace que los usuarios muestren un sentimiento de
internacionalidad e inclusividad hacia el buscador.
Reducir las barreras mediante la internacionalización
y la localización
Las industrias de videojuegos y de entretenimiento han señalado el camino para
que los diseñadores de interfaz entiendan la importancia de la
internacionalización. Cuando se carga un juego o un BD/DVD, suele aparecer un
aviso para seleccionar el idioma. A partir de ese momento, la interfaz se
mostrará en el idioma seleccionado. Una interfaz internacionalizada es aquella
que desde el principio ha sido diseñada para acomodar una variedad de idiomas
y diferencias culturales.
La internacionalización se centra en diseñar una interfaz que permita el acceso
internacional y reduzca las barreras de accesibilidad. Al comenzar la fase de
diseño, se toman decisiones sobre el soporte de referencias locales, regionales o
culturales. Gracias a estas decisiones, el diseñador y el programador sabrán
cómo dar formato a las horas y las fechas, los calendarios, las monedas, las
direcciones/códigos postales, los números, etcétera.
La localización, por el contrario, consiste en adaptar una interfaz existente al
idioma y la cultura de un grupo objetivo específico. No se trata solo de añadir los
textos traducidos a la interfaz y asegurarse de que hay suficiente espacio para
acomodarlos, sino que puede ser necesario cambiar la paleta de colores, las
imágenes e incluso los iconos. Suele ser mucho trabajo e incluso puede ser
necesario un rediseño de la estética.
Por tanto, en lugar de tener que adaptarla más adelante, siempre que sea posible
es mejor planificar desde el principio para que la interfaz funcione de manera
intercultural. No tener en cuenta la internacionalización y la localización a la
hora de diseñar una interfaz reducirá enormemente la estética de la experiencia
de usuario.
Internacionalización
“Diseño y desarrollo del contenido de un producto, aplicación o documento de
manera que permita una localización fácil para los públicos objetivo de una
cultura, región o idioma distintos.”
Localización
“Adaptación del contenido de un producto, aplicación o documento para
ajustarse al idioma, cultura y otras necesidades de un mercado objetivo
específico.”
World Wide Web Consortium
4.10
4.10
Pflanzen Gegen Zombies: Diseño multiidioma
Ediciones alemana y china del popular juego de PopCap Plantas contra zombis,
que acomoda las palabras más largas del alemán y plantea el reto de un idioma
ideográfico.
Entrevista: Kristin Kramer
¿En qué contribuye un diseñador de experiencia de usuario (UX) al equipo
de diseño de la interfaz?
El diseñador de UX está implicado en el proceso de diseño desde el principio
hasta el final, por lo que su función implica un amplio espectro de cosas. Su
principal tarea consiste en arbitrar entre los objetivos del cliente y los del
usuario. Debe ser capaz de entender ambos objetivos, ya que una gran parte del
trabajo consiste en justificar y racionalizar por qué ciertas decisiones se han
tomado a favor del usuario.
El diseñador de UX le pide al cliente que articule y priorice sus necesidades. El
cliente paga por el tiempo del equipo de diseño y la interfaz debe ayudarles a
conseguir un retorno de su inversión; los objetivos y las formas de medir el éxito
van de la mano. El diseñador de UX evalúa el proyecto, señala cualquier agujero
o superposición de objetivos y llega a un conjunto común de objetivos de diseño.
También deben hacer lo mismo desde la perspectiva del usuario: ¿cuál es su
contexto de uso?, ¿cuál es la experiencia del usuario?, ¿cómo está dispuesta la
página?, ¿cuáles son los mensajes principales?, ¿qué debe tener prominencia
visual en la página?, ¿cuál es la llamada a la acción? y ¿qué es lo siguiente que
debe hacer el usuario?
Profesión
Diseñadora de experiencia de usuario de Standard Life (Reino Unido)
Experiencia
Diseñadora estadounidense que vive en Reino Unido; entre sus clientes se
encuentran BP, el Consejo Británico, el Ministerio de Salud, Epson,
Goldman Sachs, Hilton, LEGO, Merrill Lynch, NHS, Royal & Sun Alliance,
Sprint, UBS y Vodafone.
Web
www.linkedin.com/pub/kristin-kramer/0/10a/646
¿Además del usuario final, quién más tiene algo que decir en el diseño de
una interfaz?
Existen múltiples partes interesadas en el desarrollo de una interfaz, incluyendo
al cliente, los programadores, el redactor y el diseñador gráfico. Un diseñador de
UX debe ser capaz de hablar con toda esta gente en sus propios idiomas técnicos
y poder discutir tanto los conceptos amplios como los detalles. Hay que ampliar
y reducir la visión de manera constante; estar muy motivado es de gran ayuda.
La flexibilidad es importante ya que el diseñador de UX corta y cambia sus
enfoques en función de los recursos y del tiempo que tiene a su disposición. Es
bueno tener límites porque, de lo contrario, no sabríamos por dónde empezar.
A la hora de diseñar la experiencia de usuario, ¿trabaja junto con el
programador y el diseñador gráfico?
Ambos tienen algo que aportar, trato al diseñador y al programador como partes
interesadas y les considero colaboradores a la misma altura que yo. Todo es
“contenido”: el texto escrito, las imágenes, los vídeos o las herramientas
interactivas. El contenido es diseño. La colaboración es muy importante: no se
trata solo de que el proyecto pase de una fase a la siguiente, sino que el aporte de
una persona afecta a todo el equipo.
Esto me lleva de nuevo a la importancia de comprender al cliente y de entender
cuál es la solución adecuada. El equipo necesita saber de dónde viene el usuario
y dónde va a ir después. Cada vez hay más gente que se sienta a mirar la
televisión con sus tabletas o sus smartphones. Algunas estadísticas dicen que en
2015* en Reino Unido el uso de móviles sobrepasará al de ordenadores de
escritorio. Tiene sentido que el equipo de diseño intente pensar primero en el
diseño para móviles, para que todo lo demás encaje a su alrededor.
*El uso global de Internet se habrá duplicado en 2015, y la mayoría de estos
usuarios navegarán desde un móvil (Boston Consulting Group, Mary Meeker,
Kleiner Perkins, Morgan Stanley Research).
Caso de estudio
Punto de información interactivo en WorldSkills
Objetivos y resultados esperados
Se encargó a la agencia de diseño Purpose la creación de una experiencia para el
visitante durante WorldSkills, la feria de entrenamiento vocacional en Reino
Unido. El objetivo del cliente era llamar la atención sobre el entrenamiento
vocacional en Europa, tanto durante el acontecimiento de Londres como
después. Unas 150.000 personas iban a visitar la exposición y querían que los
visitantes más jóvenes se identificaran y asociaran con las distintas carreras
profesionales.
De las más de 200.000 personas que finalmente asistieron al encuentro, unas
5.000 se inscribieron el mismo día a la competición de habilidades. Purpose
diseñó un punto de información interactivo para facilitar esa tarea. La interfaz
debía ser simple, atractiva y ajustada a los valores de la marca WorldSkills, y
estaría conectada a una pantalla de vídeo gigante en el pabellón. Purpose
desarrolló una interacción divertida en cinco pasos para captar los detalles de
cada visitante y su fotografía.
Proyecto
Utilizando la feria WorldSkills London 2011 como catalizador, Purpose
debía idear la forma de registrar y captar los datos de más de 5.000 nuevos
potenciales empleados para las competiciones de habilidades de 2012.
Equipo de diseño
Purpose (Londres, Reino Unido)
Cliente
WorldSkills UK
Contenido
El objetivo del punto de información interactivo no era informar al usuario, sino
recopilar información importante. Este propósito estaba declarado honestamente
de manera que los usuarios supieran lo que iban a necesitar de ellos antes de
interactuar con la interfaz. El contenido y el texto escrito se generaron para
asegurar que los usuarios entendieran de inmediato lo que debían hacer; la
comunicación visual les animaba a apuntarse a las competiciones de habilidades.
Los usuarios objetivo tenían entre 12 y 19 años, por lo que el contenido, tanto de
la exposición como del punto de información, debía atraer a personas jóvenes y
hacer que quisieran participar en el acontecimiento.
La tipografía elegida ayudaba a dar marca al acto y añadía un toque de
modernidad. Basándose en una tipografía llamada RITA, Purpose diseñó en
exclusiva para la ocasión unas letras cuadradas y angulosas. El idioma del
acontecimiento era el inglés, por lo que la elección de la tipografía funcionaba
bien tanto digitalmente en la interfaz, como en los medios impresos y en las
esculturas tridimensionales colocadas en todo el pabellón.
4.11
4.11
Interfaz del punto de información en WorldSkills
La interfaz presenta un proceso simple en cinco pasos: pantalla inicial de
bienvenida (1); pantalla con la interfaz de la cámara; página de registro (2);
menús desplegables que ayudan al usuario a definirse (de manera útil para el
cliente); el perfil está creado y la información se muestra en las pantallas de
vídeo (3).
4.12
4.12
Redacción para WorldSkills
El texto de la interfaz es claro, sucinto y muy amistoso. Todas las etiquetas
habituales de información están estandarizadas, lo que hace que estas áreas sean
instantáneamente familiares para el usuario.
Semiótica
Las decisiones de diseño que hay detrás de la identidad visual utilizada en la
interfaz del punto de información pueden deconstruirse mediante el examen de
la semiótica. En la interfaz hay muchos significantes y prestaciones visuales que
representan conceptos. La tipografía atrevida y fornida usada para “I AM…”
significa el tema central del acontecimiento: que se trata del mayor de su tipo y
que el visitante individual es importante. Los bloques diagonales de color
ayudan a guiar al ojo hacia las áreas blancas de contenido, significando las partes
importantes de la pantalla.
Siguiendo la convención existente, los botones están hundidos en su estado de
clicado; el uso del púrpura y del ocre a la derecha y debajo de las áreas blancas
de contenido representa esta idea de manera muy sutil. Esta combinación
“resalta” las áreas blancas de contenido hacia el usuario, significando que hay
que prestar atención a esas secciones. Los campos de input y las llamadas a la
acción están coloreadas en rojo (el color más emotivo y activo) con texto blanco
para conseguir el máximo contraste. Esto significa que estas áreas son activas y
requieren atención. Para registrarse, hace falta una fotografía: la silueta gris con
forma humana significa eso.
Llamada a la acción y recompensa
La interfaz del punto de información comunicaba una experiencia del visitante
de “inclusión y participación”. Se le presentaba al usuario una tarea simple y
alcanzable. Durante cada uno de los cinco pasos interactivos, el usuario sabía
con exactitud lo que estaba pasando y cuál debía ser su próxima acción. Como
recompensa por registrarse, se mostraba su fotografía en la pantalla de vídeo
gigante en el pabellón principal de la exposición, dándole la bienvenida al acto.
4.13
4.13
La semiótica de WorldSkills
En la comunicación visual de la interfaz, la semiótica opera a un nivel
subconsciente, guiando al usuario. (1) Las barras diagonales de color dirigen al
usuario desde el “I AM…” hacia las dos áreas que deben completarse. (2) Las
dos áreas de input sobresalen del fondo mediante el uso del púrpura y el ocre. (3)
La forma humana vacía (coloreada en rojo para dar más énfasis) es una
prestación visual sutil de la fotografía. (4) Las áreas de input y las llamadas a la
acción son rojas con texto blanco. Los botones siguen los estándares webs de la
W3C y el botón de reiniciar es de color gris neutro.
Ejercicio
Deconstruir la semiótica de la interfaz
Premisa
Este ejercicio se centra en la semiótica, incluyendo el punto de vista del
usuario, las formas en las que se comunica el contenido escrito y los
contextos culturales. En particular, nos centraremos en las habilidades de
deconstrucción e interpretación: deberás ponerte en la perspectiva de
primera persona de un usuario que observa la interfaz por primera vez.
Este ejercicio puede repetirse y adaptarse hasta que sea algo natural.
Puedes utilizar este ejercicio con cualquier interfaz, pero nosotros usaremos
como ejemplo la interfaz de Whitespace para The Scotch Malt Whisky
Society.
Resultados
Mediante la deconstrucción de la semiótica de una interfaz ya existente, este
ejercicio te ayudará a informar tus decisiones sobre comunicación visual. Puede
aplicarse a cualquier interfaz y recomendamos que se repita utilizando distintos
tipos de interfaz. La deconstrucción es solo una parte del proceso. Debes
aprender de ella y utilizar lo que has aprendido. Este ejercicio puede combinarse
con el ejercicio del final del capítulo 2 para obtener algunas habilidades
esenciales que te ayudarán a diseñar interfaces en el futuro.
4.14
4.15
4.16
4.17
4.14–4.17
Deconstrucción
Para mantener este ejemplo simple, hemos deconstruido una única pantalla de la
interfaz. Sigue las instrucciones del ejercicio al dorso y toma como referencia las
imágenes de esta página.
Ejercicio
Aunque también puede realizarse en solitario, puedes compartir tus respuestas
con otros, ya que este ejercicio funciona mejor si se genera una discusión. El
proceso de deconstrucción es bastante simple. El reto reside en la interpretación
(observar y pensar) para ver cuáles son los mensajes semióticos y cómo se
construye el signo semiótico. Debes ponerte en el lugar de un usuario que no
conoce las intenciones del equipo de diseño, sino tan solo cómo se comunica
visualmente la interfaz.
El ejercicio está dividido en tres partes:
1. Los signos semióticos
Observa la interfaz completa.
—¿Cuál es el propósito de esta interfaz?
—¿Quién es el público objetivo?
—¿Por qué tiene este aspecto?
—¿Cómo se reconocen las llamadas a la acción disponibles?
2. Aislar los significantes
Identifica los elementos visuales que crees que pueden ser signos semióticos.
Agrupa los significantes que creas que pueden estar sugiriendo los mismos
mensajes (las imágenes 4.15-4.17 ya han hecho esto por ti).
Toma cada grupo de significantes y pregúntate lo siguiente:
—¿Por qué el significante tiene esa forma?
—¿Por qué el significante tiene ese color?
—¿Por qué el significante está creado utilizando tipografía/una ilustración/una
fotografía (o una combinación de estos elementos)?
3. Encontrar el significado (concepto semiótico)
Ahora empieza lo divertido.
Observa la imagen 4.14.
—¿Por qué se ha elegido esta paleta de colores?
—¿Qué dice esta ilustración que no diría una fotografía?
Observa la imagen 4.15.
—Hay una llamada a la acción en (1). ¿Cómo lo sabemos a partir de la
comunicación visual?
Ahora observa la imagen 4.16.
—(1) ¿Qué significa la elección del fondo y su iluminación?
—(2) Este detalle, ¿significa una llamada a la acción o es simplemente una parte
de la ilustración sin ninguna función? Arguméntalo.
—(3) ¿Qué significan estos detalles?
Por último, observa la imagen 4.17.
—(1) Estas dos llamadas a la acción están comunicadas visualmente de una
forma determinada, más allá de lo obvio, ¿qué comunica este signo?
—(2) ¿Qué comunica la elección de este borde?
—(3) ¿Por qué se usan imágenes de grabados antiguos? ¿Qué significado
profundo tiene esto para el usuario?
5
La colaboración con el programador
Los buenos diseños de interfaz, y las buenas experiencias de usuario,
necesitan que el diseñador y el programador colaboren. En este capítulo
analizaremos las maneras en que el diseñador gráfico puede optimizar su
comunicación con el programador a la hora de diseñar una interfaz.
Examinaremos el diseño modular tanto en teoría como en la práctica, con
ejemplos de trabajos de diseño reales.
Una entrevista con el diseñador/programador Alan Bridge y un caso de
estudio sobre Creative Griffin mostrarán cómo se prepara el diseño gráfico
de la interfaz para que el programador la desarrolle. Defenderemos esta
relación laboral con el programador, y el ejercicio al final del capítulo nos
dará la oportunidad de practicar el diseño observando la modularidad.
Los principios del diseño modular
“Diseñar para la modularidad” significa identificar y deconstruir los
patrones de una interfaz. Todos los procesos de diseño comienzan con un
caos creativo; la solución se desarrolla a lo largo de un período iterativo
complejo hasta que se llega a un resultado adecuado. El diseño modular
trata de racionalizar (no homogeneizar) la creatividad del diseñador y de
construir un sistema de diseño de recursos repetibles que puedan ser
reutilizados.
Esta racionalización de los recursos para su reutilización significa que el
programador tendrá que escribir el código para cada recurso una sola vez;
después podrá reutilizar ese código cada vez que aparezca ese recurso en la
interfaz. Esto mejora la experiencia de usuario, ya que el código reutilizado a lo
largo de la interfaz hace que esta se cargue más rápido. Por supuesto, esto no
significa que cada recurso utilizado en el diseño de la interfaz tenga que ser
repetible.
Una lógica para diseñadores
No es suficiente con hacer que una interfaz se vea bien en Photoshop, Fireworks,
Illustrator o InDesign; el diseñador gráfico debe pensar de manera modular a la
hora de tomar decisiones de diseño. Si deconstruye e identifica los recursos que
pueden repetirse y los que no, el diseñador puede crear una experiencia estética
adecuada, haciendo que el diseño comunique simplicidad de uso al usuario.
Los diseñadores crean los diseños de la interfaz en un archivo digital que le
entregan al programador. Este archivo muestra cada página de la interfaz con los
recursos compuestos sobre una retícula: es lo que los diseñadores llaman una
“composición”. Si se utiliza una retícula, parte del trabajo para modularizar ya
ha comenzado. Suelen usarse los archivos PSD de Photoshop pero, como ya
hemos visto, no es el único software de diseño existente.
Si todas las páginas de la interfaz comparten la misma retícula y jerarquía visual,
los recursos de la interfaz seguirán unas proporciones de tamaño acordadas (por
el equipo). Si un recurso se repite más de una vez a lo largo de la interfaz, puede
modularizarse. Esto ayuda al diseñador a diseñar los recursos, y las relaciones
espaciales entre ellos, ajustados al píxel, lo que, a su vez, ayuda al programador.
Diseñar teniendo en cuenta la modularidad no significa que deban restringirse la
creatividad inicial y la innovación del diseñador gráfico (un miedo común a la
hora de traducir los diseños a código), sino que permite una comunicación más
clara entre el diseñador y el programador y crea un lenguaje visual común entre
ambos, lo que lleva a una buena práctica de diseño.
5.1
5.1
Misma interfaz, distintas plataformas
El código detecta la plataforma, y en función de esta se muestra una versión
distinta de la interfaz, optimizada para la plataforma correspondiente y que
muestra el contenido de manera diferente, aunque manteniendo una identidad
visual común gracias a la modularidad de los recursos.
5.2
5.2
Estructura controlada por el código
En este ejemplo se ha superpuesto el código fuente de la estructura HTML de la
página web encima del contenido. No se muestra ni la CSS, que controla los
estilos, ni el JavaScript, que controla la interactividad. La composición y la
estructura sugieren qué elementos son contenido y cuáles son recursos.
El punto de vista de Marte y de Venus
Para demostrar la importancia de la comunicación entre el programador y
el diseñador, plantearemos una pequeña, y provocadora, situación
hipotética que servirá para ilustrar cómo surge la mala comunicación entre
ellos. Ya hemos discutido antes las perspectivas en primera persona para
entender las motivaciones del usuario (véase página 114). Ahora usaremos
una perspectiva en primera persona para mostrar cómo el diseñador y el
programador no perciben las mismas cosas cuando ven el trabajo del otro.
Si te dieran una página de código y te dijeran que diseñaras una interfaz a
partir de ahí, como diseñador gráfico sería difícil: no tendría sentido para ti, ya
que no es el lenguaje con el que trabajas. Incluso aunque el código describa
cosas que puedas reconocer, como jerarquía, titulares, color y texto, están
presentadas de una manera que quizá no puedas entender. Hasta que no hayas
aprendido a programar, te parecerá un galimatías.
Ahora dale la vuelta a la situación.
Si el diseñador le da a un programador una composición en PSD y le dice que la
programe, surgen problemas similares: los programadores ven la interfaz en el
contexto del código de marcado. Necesitan más información por parte del
diseñador que un archivo de Photoshop. Si el PSD no ayuda al programador a
entender las relaciones espaciales de (y entre) los elementos del diseño, o los
márgenes en píxeles, solo podrá ver imágenes bonitas. El programador tendrá
que interpretar la imagen para entender lo que el diseñador necesita que
programe.
Diseñar para la modularidad ayuda a desmontar los prejuicios de “galimatías” y
de “imágenes bonitas”, y desarrolla un lenguaje de comunicación visual entre las
dos especialidades que incide en las fortalezas de cada uno.
Los beneficios del diseño modular
El diseño modular tiene muchas ventajas ya que se trata de una metodología de
diseño en la que todos ganan. En última instancia, además de permitir tiempos
de carga más rápidos, el proceso asegura que exista coherencia en la jerarquía
visual de la interfaz. Esto se consigue mediante una comunicación clara entre el
equipo, en la que el diseñador mantiene el control sobre el diseño sin tener que
depender del programador, lo que crea una relación laboral más sólida en el
equipo y una mejor experiencia para el usuario.
El diseñador gana ya que consigue diseñar una interfaz estética que sabe que
podrá ser traducida a código. El programador gana, ya que obtendrá el diseño en
un formato que hará que su trabajo de programación sea mucho más fácil. Por
último, el usuario consigue una interfaz que ha sido construida basándose
principalmente en recursos modulares y que se carga con rapidez. Los usuarios
ganan porque, aunque no perciban esto, consiguen una experiencia de usuario
estética y rápida.
Por este motivo, los diseñadores y los programadores necesitan un buen diálogo
de colaboración iterativo en cada etapa del diseño de la interfaz; el programador
debe comunicarle al diseñador sus necesidades. En este capítulo analizaremos en
mayor detalle cuáles son estas y cómo puede producirlas el diseñador. Primero,
definiremos qué son los recursos modulares.
Principales beneficios de la modularidad
Para el diseñador
—Controlar el proceso de diseño desde la complejidad a la simplicidad
—Asegurar la coherencia de la jerarquía visual
—Refinar los detalles de diseño para racionalizar los recursos repetibles
—Volver a centrarse en el arte de la comunicación visual
Para el programador
—Una comunicación más clara con el diseñador
—Un lenguaje visual común
—Un sistema reusable para racionalizar el código
Para el usuario
—Tiempos de carga más rápidos
—Coherencia en la jerarquía visual
—Constancia en la experiencia estética en las distintas plataformas
La modularización de la estética
Si se trabaja con una retícula con tamaños modulares, muchos de los
detalles que necesita el programador estarán muy claros. La ubicación
específica de los recursos en el diseño reticular permitirá que la información
se coloque de manera que el programador pueda traducirla a código. Las
dimensiones de los recursos serán estándares, y sus ubicaciones en la
composición proporcionarán datos precisos, como ancho de las columnas,
ancho y altura de los recursos y posición de x e y desde la esquina superior
izquierda. Una vez dividido por capas, agrupado y etiquetado, el archivo de
composición digital del diseño estará listo para ser pasado al equipo de
programación. Pero ¿qué recursos serán modulares y programados para ser
reutilizados?
¿Qué recursos son modulares?
¿Qué recursos son repetibles o no en una composición de diseño? Para
comenzar, aquí vemos dos ejemplos de características no repetibles que no
pueden ser programadas de manera modular.
1. El contenido variable, como el cuerpo de texto escrito o una imagen, no puede
ser modular (aunque el contenedor que los agrupa y da formato al texto o a la
imagen sí puede serlo).
2. Los recursos con dimensiones no estándar requieren que se escriba código
específico que no puede reutilizarse. Cuando se usan ocasionalmente en la
comunicación visual pueden tener más impacto en el usuario, en especial cuando
se necesita dirigir la atención a una pieza de contenido en particular.
La mayoría de los recursos del diseño, como cajas de texto e imágenes,
componentes de navegación (botones), esquinas redondeadas y líneas, pueden
reutilizarse si se ajustan a las proporciones modulares de tamaño y a las
columnas de la retícula subyacente. Por ejemplo, la estructura de la navegación
global o contextual será modular, aunque dentro del módulo las palabras de un
botón puedan cambiar, ya que se puede escribir código que sobreescriba distintas
palabras encima de cada módulo. El código puede controlar qué idioma se
muestra en función de quién sea el usuario, lo que facilita tanto la
internacionalización como la localización de la interfaz.
5.3
5.3
Caja de imagen y proporciones de las imágenes
Acordar una proporción para los tamaños de las imágenes le permite al
diseñador ser creativo a la hora de ubicar las imágenes, ya que sabe que el
programador creará piezas de código reutilizables que puedan usarse a lo largo
de toda una interfaz que puede llegar a contener cientos de imágenes. Las cajas
de imágenes que se muestran aquí están todas en orientación apaisada, pero es
igual de sencillo crear una proporción de imagen reutilizable para la orientación
vertical.
5.4
5.4
Componentes modulares
Algunas partes del diseño pueden reutilizarse en otros lugares de la interfaz. Esto
incluye elementos como cajas de texto e imágenes, componentes de navegación
(botones), bordes redondeados, líneas, etc. Estos elementos se llaman “módulos”
y encajan en la retícula subyacente.
Lo que necesita el programador
El archivo de composición no debe tener las capas combinadas; además, es una
buena práctica entregarle al programador una hoja adicional de especificaciones
de composición en PDF que sirva de guía de estilo del diseño de interfaz (la guía
de estilo GEL de la BBC es un ejemplo de esto, véase página 71). Este archivo
será una versión combinada de la interfaz y por lo general muestra:
—cada variante de página
—los valores RGB de los principales colores usados
—información adicional sobre tipografía y tamaño de los recursos
—cómo funciona visualmente cada estado interactivo de la interfaz
No es obligatorio ofrecer al programador estas hojas de especificaciones en PDF
y no existe un formato estándar. Sin embargo, suelen mejorar la comunicación
entre el diseñador y el programador, evitando los problemas de comunicación
que pueden provocar retrasos importantes en el proceso de diseño. Si el
diseñador no le entrega algo similar al programador, es muy posible que existan
problemas de precisión. Si se invierte un poco de tiempo en etiquetar las capas,
agrupar los estados y ofrecer una referencia y una guía de los colores RGB,
pueden evitarse muchos pequeños problemas al inicio de la programación de la
interfaz.
5.5
5.5
Estados interactivos por capas
Separar por capas, agrupar y etiquetar los estados interactivos de manera clara
ayudará al programador a entender tanto el contexto como el funcionamiento de
las prestaciones visuales (las pistas sobre su función y su uso), y podrá
programarlas.
5.6
5.6
Guía de referencia en PDF
Una vez que el programador empieza a separar el archivo digital por capas en
módulos programados, es fácil perder de vista cómo funcionarán los elementos
como un todo; una guía de referencia en PDF puede ayudar a recuperar la
perspectiva. No existe una plantilla definitiva para una guía de referencia de los
colores RGB (véase página 81). El diseñador y el programador deben acordar los
requisitos, la cantidad de detalles variará en función del proyecto y del equipo.
En su forma más básica, esta guía no es más que una lista de los colores usados
en el diseño con sus valores RGB o hexadecimales, o ambos.
Lo que ofrece el diseñador
El archivo digital con la composición debe estar separado por capas, con
etiquetas claras y con los distintos estados interactivos agrupados en
subcapas para que el programador pueda entenderlo. Todos los elementos
de navegación pueden agruparse en subcapas, y los estados interactivos de
cada elemento deben estar etiquetados de manera adecuada (por ejemplo,
impr-btn_arriba, impr-btn_abajo, impr-btn_encima).
Si los elementos se estructuran y agrupan en capas de manera lógica, el
programador podrá encontrar con facilidad los elementos para aislarlos y
representarlos mediante código.
Se considera una buena práctica separar los elementos por capas y
etiquetarlos con términos descriptivos a medida que avanza la composición
del diseño, ya que gracias a ello es más fácil que todo el mundo vea qué es
repetible o interactivo y qué no lo es.
Integrar la modularidad en el flujo de trabajo ayuda a que la interfaz sea
más fluida y asegura una conexión sólida entre el diseño y el código. Se trata
de una metodología adaptable que puede aplicarse tanto a proyectos
grandes como pequeños; con ella, además, es más fácil hacer que la interfaz
funcione en cualquier plataforma.
Deconstruir el diseño
Entonces, ¿cómo se introduce la modularidad en el diseño?
Se empieza observando todas las variantes de página de la interfaz una junto a
otra y resaltando los elementos que se repiten y los que no. Esto puede hacerse
sobre la pantalla, pero es más fácil si se imprimen las distintas páginas. Esta
técnica permite ver el diseño bajo una nueva perspectiva e identificar los
elementos modulares (véase imagen 5.7). Para identificarlos con mayor
facilidad, pueden utilizarse distintos colores para indicar los diferentes tipos de
elementos modulares.
Si se ha diseñado una jerarquía visual coherente, con una navegación global y
contextual, los elementos que se repiten deberían ser evidentes. Se resaltan los
botones (cajas naranjas), cajas de texto (cajas azules), cajas de imágenes (cajas
verdes) u otros elementos repetidos (cajas amarillas y rojas).
Una vez identificados y resaltados todos los elementos modulares repetidos,
resulta fácil ver los elementos que no se repiten. Entonces, se deben agrupar y
etiquetar las capas en el archivo de composición, dejando claro las que son
modulares y las que no se repiten. Por último, puede prepararse la hoja de
especificaciones en PDF para que sirva como guía de estilo para el programador.
5.7
5.7
Resaltar los elementos modulares
Los elementos que se repiten deberían resaltarse para que llamen la atención.
Una vez identificados los distintos elementos modulares, hay que asegurarse de
que el archivo de composición los agrupe junto con sus respectivos estados
interactivos. Las etiquetas deberían ser significativas y describir con claridad el
contenido de la capa para que el programador sepa lo que debe desarrollar.
Entrevista: Alan Bridge
¿Podría explicar cómo se convirtió en diseñador front-end?
Comencé con un curso nocturno en la universidad local, tras el cual conseguí
una plaza en una licenciatura de diseño. En la carrera, comencé a trabajar en el
aspecto más visual de la interacción: el diseño gráfico. Una vez licenciado,
trabajé en una imprenta como diseñador gráfico: eran litógrafos, y yo me
encargaba de supervisar todo su trabajo digital. Estuve con ellos algo más de un
año hasta que comencé otro trabajo: diseño de páginas webs.
¿Qué le pareció la transición del diseño para impresión al interactivo?
Tuve que esforzarme mucho más. Aprendí CSS (en tres días ya dominaba lo
básico) y más HTML. Desde que comencé, he aprendido también PHP y ahora
estoy intentando entender HTML5. Pero también aprendí mucho sobre el
proceso que debería seguirse para hacer una página web. A mis clientes siempre
les digo que todos sus competidores están solo a un clic de distancia, por lo que
el diseño debe ser fácil y hacer que los usuarios piensen “Aquí es adonde voy;
esto es lo que quiero” en todo momento, porque si no, pueden clicar en el botón
de Google en su navegador y desaparecer.
Profesión
Diseñador/programador web de Creative Griffin (Reino Unido)
Experiencia
Pasó de diseñador/programador licenciado a profesional
Web
www.creativegriffin.co.uk
¿Como diseñador web, en qué le ha ayudado su lado de programador?
Los diseñadores suelen utilizar imágenes para los fondos de las páginas, o para
los títulos y las texturas; estas imágenes pueden pesar un par de megabytes o
solo unos pocos kilobytes. Antes, con CSS solo podían añadirse elementos
básicos como “cuadrados”, “color” o “color de fondo”. En la actualidad, gracias
a CSS3 podemos hacer básicamente diseño gráfico en código. CSS3 da estilo a
la página web y permite que los archivos tengan un tamaño muy pequeño, de tan
solo de un par de kilobytes, lo que hace que las páginas se carguen muy rápido.
Estructuro todas mis páginas en PHP, con HTML por dentro. Si programas una
página solo en HTML y necesitas diez páginas con el mismo layout, tendrás que
tener un archivo HTML para cada una de esas páginas. Con PHP es más fácil,
solo necesitas un archivo que contenga la estructura, porque siempre se carga el
mismo archivo. Lo único que cambia cada vez es el contenido.
¿Cuál es su técnica para decidir qué elementos son modulares?
Por lo general empiezo analizando el briefing y enseño al cliente una idea de
diseño hecha con InDesign. Entonces discutimos qué quieren en la página de
inicio, cómo serán las otras páginas y cómo quieren que el usuario navegue por
la interfaz para conseguir la información. No lo hago en Photoshop porque me
parece que puedo mover las cosas con más facilidad con InDesign. Por ejemplo,
si haces un cuadrado con un degradado en Photoshop y decides que lo quieres
ampliar, se verá pixelado.
Después de esto, trabajo sobre el archivo InDesign y dedico unas dos horas a
repasar el diseño, repasando cada página (a veces las imprimo si se trata de una
página muy compleja). Comienzo con el marcador y hago círculos diciendo
“esto es CSS”, “esto es una imagen”, etc. Cuando tiene que ser una imagen, tiene
que ser una imagen, pero si puedo hacer lo mismo usando CSS3, lo hago,
simplemente porque el archivo pesará menos. Deconstruyo el diseño así y lo
preparo para el código.
Caso de estudio
Preparar un diseño web para el programador
Preparar la modularización
Creative Griffin debía diseñar una página web para un nuevo negocio en el
mercado de los servicios financieros de indemnización. Para el lanzamiento de
getmyloanfeesback.com, el diseñador gráfico y el programador trabajaron juntos
para transformar el briefing del cliente en una página web factible.
Discutieron los pros y los contras de las decisiones estéticas y funcionales para
que la propuesta de diseño fuera adecuada tanto para el cliente como para el
usuario objetivo. La comunicación visual debía transmitir al consumidor que el
servicio de indemnizaciones era amable, accesible y de confianza. Al mismo
tiempo, para cumplir con las necesidades del cliente, la página también tenía que
comunicar con claridad la suficiente información para que el consumidor pudiera
reclamar una indemnización a través de la Web.
Proyecto
getmy loanfeesback.com
Equipo de diseño
Creative Griffin, www.creativegriffin.co.uk
Cliente
Consolidate Me Ltd
Una vez acordada una idea de diseño que funcionara tanto para el usuario como
para el cliente, el diseñador y el programador empezaron a trabajar en la interfaz.
El diseñador empezó a diseñar una composición sobre una retícula utilizando
Adobe InDesign. Para que el programador los pudiera trocear y programar, se
aseguró de que todos los elementos de la composición estuvieran agrupados y
etiquetados de manera descriptiva.
En este diseño fueron necesarias muchas variaciones de página. El diseñador se
tomó el tiempo para comprobar los elementos que serían modulares y los que no.
Imprimió todas las variaciones para poder examinar los elementos en todas las
páginas a la vez, lo que le facilitó la tarea de encontrar elementos repetidos.
5.8
5.8
La idea de diseño en InDesign
La propuesta de diseño se construyó primero con Adobe InDesign, ya que en
este programa es más fácil escalar y ajustar los elementos de interfaz. Para
explicarlos al programador, cada elemento está contenido en su propia capa, con
etiquetas descriptivas.
5.9
5.9
Diseño web listo para ser modularizado
La página tiene muchas variaciones, que se imprimieron a tamaño real para
poder destacar los elementos modulares.
Destacar la modularidad
El diseñador revisó todas las páginas con un marcador. Primero resaltó los
elementos que se repetían de manera más obvia en las páginas. Las líneas y los
radios del contenido escrito, las imágenes y las cajas de vídeo se crearían con
código, pero las propias cajas pertenecían a distintas categorías, que serían
también modulares para que el programador pudiera escribirlas con código una
sola vez.
Algunos elementos que se repetían solo dentro de una página se consideraron
también modulares. Aunque el diseñador tenía experiencia y diseñó la interfaz
pensando en la modularidad, le resultó útil repasar desde un nuevo punto de vista
un diseño con el que estaba tan familiarizado. Mientras resaltaba los elementos
modulares, pensaba en su diseño y en lo que el programador podría escribir una
sola vez y reutilizar. Pensaba cosas como “Este elemento está repetido y se
podría escribir con CSS”, o “Este elemento no se repite; puede que deba ser una
imagen con su propio código”.
Si un elemento no se repetía, se resaltaba y etiquetaba como no modular. Toda
esta información ayudó al programador a evaluar cómo programar la página, qué
elementos se podían escribir una vez y reutilizar, y en qué elementos debería
escribirse código a medida.
Deconstruido y listo para el programador
Cuando el diseñador completó la auditoría de su diseño en busca de elementos
modulares, los etiquetó en las capas del archivo InDesign. Junto con el archivo
digital, el diseñador también entregó al programador una guía de referencia que
incluía los principales colores en RGB, lo que ayudó al programador a trocear el
diseño y escribir código de manera más eficaz. En esta etapa del proceso de
diseño, el diseñador y el programador dialogaron sobre la modularidad del
diseño para asegurar que la página web se terminaría con éxito.
La comunicación visual de la interfaz no había cambiado cuando el código
estuvo listo para ser probado. El usuario no iba a darse cuenta de si los
elementos se reutilizaban o si eran únicos de la página, tan solo de que la página
los descargaba con rapidez del servidor, a punto para que pudieran reclamar su
indemnización.
5.10
5.10
Componentes modulares en el código
Tras ser identificados y etiquetados, ya pueden programarse los componentes
modulares. El diseño final aparece en el navegador como un diseño cohesivo
completo (recuadro), pero si se examina el código, se ve con claridad lo que es
CSS y lo que son imágenes.
5.11
5.11
Ejemplo de elementos de diseño que serán modulares
Los elementos que se repiten constantemente pueden ser modulares y controlarse
desde el código. Los elementos que se repiten en una sola página también
pueden controlarse desde el código.
5.12
5.12
Ejemplo de elementos de diseño que no se repiten
Las partes del diseño que no se repiten no serán modulares. Las imágenes,
aunque sean visualmente distintas, pueden encajar en módulos. De esta forma, la
imagen puede ser diferente pero sus medidas se ajustan a la escala visual
jerárquica. La caja de la imagen puede controlarse mediante código, mientras
que la imagen de dentro puede variar.
Ejercicio
Resaltar la modularidad
Premisa
En este capítulo hemos analizado la modularidad de los elementos y cómo
puede el diseñador estructurar sus archivos de composición y prepararlos
para el programador. Este ejercicio te ayudará a comenzar a diseñar
pensando en la modularidad, y a consolidarlo de manera práctica. Su
objetivo es deconstruir distintas variantes de página de un diseño de
interfaz y resaltar los elementos que se repiten y los que no. Te ayudará a
racionalizar tu diseño usando elementos modulares y te preparará para
trabajar con un programador.
Para este ejercicio puedes usar un diseño propio: elige uno que tenga distintas
variantes de página. Si puedes hacer este trabajo con otra persona, intercambia tu
diseño con el suyo; esto hará que evites la familiaridad con tu propio diseño, lo
que facilitará que encuentres elementos reutilizables. Utiliza un diseño para el
que tengas el archivo digital con al menos dos variantes de página en un archivo
por capas sin combinar. El ejercicio se centra en preparar un diseño estático para
que el programador lo pase a código, y no en añadir interactividad al diseño.
Objetivos
Este ejercicio sobre modularidad hará que a la hora de crear la comunicación
visual de una interfaz, examines las decisiones de diseño que tomas para que
puedas racionalizar tu diseño utilizando elementos modulares donde sea posible.
Te preparará para trabajar con un programador, y puede llevarse a cabo aunque
ahora no tengas ningún programador con quien trabajar. Puede repetirse todas las
veces que quieras con distintos diseños de interfaz, aunque la tarea no acaba al
resaltar los elementos. Acostúmbrate también a etiquetar las capas a medida que
las creas. Cuanto más pienses en la modularidad, más rápido formará parte de tu
proceso de diseño.
Este ejercicio no puede hacerse con una interfaz construida directamente con un
software de edición como Adobe Dreamweaver o Scaleform de Autodesk.
Ejercicio
Parte 1: Escanear las variantes de página del diseño de interfaz
Imprime, a escala real, una selección de las variantes de página a partir de tu
archivo de composición.
Coloca las variantes de página impresas una al lado de otra para que puedas
compararlas.
Identifica qué elementos del diseño se repiten a lo largo de las páginas.
Identifica cualquier elemento que se repita solo en una única página.
Con un marcador de color, destaca estos elementos repetidos.
Con un marcador de otro color, destaca cualquier elemento que no se repita.
Parte 2: Agrupa y etiqueta los elementos en el archivo digital
En el archivo digital de composición:
—Asegúrate de que todas las capas están etiquetadas con claridad con términos
descriptivos.
—Agrupa los elementos que deban estar juntos (por ejemplo, agrupa la
navegación, las cajas de texto, las imágenes), manteniendo la integridad de la
jerarquía de las capas para no romper el diseño.
—Asegúrate de que cualquier estado interactivo también está etiquetado y
agrupado con claridad.
—Identifica los grupos que sean modulares y los que contengan elementos no
repetidos.
Parte 3: Preparar las guías de referencia
Ahora que ya has optimizado el archivo de composición para el programador:
—Crea una versión en PDF del diseño que muestre todas las variantes de página.
Muestra también cómo se verán los estados interactivos en esa página (como
arriba, abajo, encima), y escribe comentarios donde sea necesario para explicar
esta interacción.
—Nombra cada página (Inicio, Contacto, etcétera).
—Crea una guía de referencia de colores RGB mostrando los usados en el
diseño.
6
El uso de las interfaces para aumentar las capacidades
humanas
En este último capítulo el análisis se traslada de las habilidades de los
diseñadores gráficos y sus aplicaciones a cómo pueden impactar en el diseño
de interfaces las futuras innovaciones tecnológicas. Antes hemos abordado
el paso de interfaces WIMP a interfaces post-WIMP; ahora estudiaremos
las implicaciones que tienen estas últimas para el diseñador gráfico.
Hablaremos sobre tres tecnologías: los códigos QR, la realidad aumentada y
las pantallas táctiles; pero seguiremos centrándonos en cómo puede crear el
diseñador una experiencia de usuario estética. Aunque el libro ya llega a su
fin, en el diseño de la interfaz, el usuario humano sigue siendo la clave de la
comunicación visual. Acabaremos con una entrevista a Kate Ho sobre el
diseño que hizo Whitespace para Macallan de una pantalla multitáctil
Microsoft Surface en el aeropuerto de Ámsterdam-Schiphol.
Códigos QR: Donde confluyen la impresión y la
interacción
Aunque en cualquier casa, pueblo o ciudad podemos encontrar códigos QR
[del inglés quick response code, “código de respuesta rápida”], no todo el
mundo los ve o entiende lo que hacen. Un código QR es un código de barras
que permite el almacenamiento de decenas de miles de bits de información y
que para el contenido web funciona como un atajo en el mundo físico. Es en
este punto donde se encuentran los mundos de la impresión y de la
interacción digital, ya que el código no es más que un cuadrado impreso en
un cartel, folleto, etiqueta, libro, revista o cualquier otro objeto imaginable.
Para escanear un código QR se necesita una aplicación de smartphone que
lleve al usuario a los datos webs relacionados, como por ejemplo
calendarios, v-cards o e-cards, direcciones de email, geolocalizaciones,
números de teléfono, URL, billetes electrónicos o encuestas.
Respuesta rápida mediante la comunicación visual
Los códigos QR tienen una relevancia directa para los diseñadores gráficos, ya
que actúan como puente entre lo impreso y lo digital, dos ámbitos en los que el
diseñador debe tener habilidades y conocimientos. El código QR funciona como
una miniinterfaz entre estos dos ámbitos y, por tanto, debe considerarse con
cuidado dentro del proceso. El equipo de diseño es el encargado de salvaguardar
la integridad de los datos contenidos en el código y de que el destino web al que
apunta esté adaptado para móviles.
Debe optimizarse tanto el color como el contraste del código sobre su fondo,
porque de lo contrario, el lector QR tendrá problemas a la hora de traducirlo. El
equipo de diseño debe asegurar que la resolución y el tamaño de impresión sean
adecuados y que la retícula subyacente sea legible. En Internet existen varios
generadores (como Kaywa y Unitag, por poner dos ejemplos) que convierten
datos en un código QR. Sin embargo, el código no tiene por qué ser utilitario y
estar solo en blanco y negro.
El diseñador gráfico Jim Divine es un pionero en el branding de códigos QR que
comunican visualmente el destino final del enlace: es lo que él llama un
“ciberlogo”. Puede generarse un gran impacto si se combinan una ilustración o
un gráfico dentro del código de barras, a la vez que se mantiene el formato
necesario, los patrones de posición, la alineación y los tiempos. Este tipo de
códigos QR son más fáciles de identificar por el usuario, lo que incrementa sus
posibilidades de ser escaneado. No obstante, como siempre, menos es más: la
sobreutilización de los códigos QR hace que disminuya su impacto y utilidad.
6.1
6.1
Ciberlogo
El diseñador gráfico Jim Divine ha buscado la manera de incrustar una identidad
visual de marca dentro de la información contenida en un código QR. Este
“ciberlogo” añade un nuevo nivel de comunicación visual al código QR
indicando adónde llevará el código.
6.2
6.2
¿Qué hacen los QR?
Los códigos QR pueden imprimirse en pegatinas, o directamente sobre un
objeto, y permiten conectar al usuario con una variedad de información y
controles webs. La información puede ser un archivo de audio o de vídeo, o el
propio acto de escanear el código de barras puede resultar en una experiencia
multimedia.
6.3
6.3
Cómo funciona un QR
Un código QR es un código de barras cuadrado. Unos pequeños cuadrados en
tres de las esquinas permiten que la aplicación de lectura lo pueda detectar y
descifrar (1). Un cuadrado más pequeño en la esquina inferior derecha ayuda al
lector a alinearse (2). El resto del patrón dentado contiene la información
digitalizada que lo conecta con la Web.
Transporte de la tinta a lo digital
Para que el usuario pueda usar el código QR para pasar de un medio impreso a la
Web debe tener un smartphone con una aplicación adecuada y una cámara que
pueda leer el código. No importa si el sistema operativo del smartphone es iOS o
Android, Blackberry o Windows, ya que en todos ellos existen aplicaciones de
QR. Lo importante es el contenido al que lleva el QR y cómo está presentado:
debe estar adaptado para una pantalla pequeña. Esto es importante, ya que de lo
contrario el usuario no tendrá una buena experiencia y tal vez se niegue en el
futuro a escanear cualquier otro código QR.
Al tratarse de un gráfico que permite ser ampliado o reducido (aunque no puede
ser demasiado pequeño), los códigos QR pueden usarse de muchas e interesantes
maneras. Algunos investigadores, como el doctor Oli Mival de la Edinburgh
Napier University, están investigando nuevas vías para incluir códigos en el
entorno físico, como por ejemplo esculpirlos o grabarlos de manera que una
aplicación pueda leerlos y actúen como interfaz de un contenido web específico
relevante para la ubicación geográfica, lo que conectaría los códigos QR con la
realidad aumentada.
6.4
6.4
QR en el entorno
En principio, un código QR no tiene por qué estar necesariamente impreso, sino
que podría ser estructural dentro de un entorno. Podrá funcionar siempre y
cuando los datos necesarios de posición, alineación, tiempo y las claves de datos
y de corrección de errores se trasladen a la versión esculpida en 3D. El usuario
de la aplicación de lectura de QR tendrá que alejarse más del código para poder
alinearlo con el lector.
6.5
6.5
QR y RA
La importancia de los códigos QR en un entorno específico significa que se
puede codificar información contextual en una ubicación, como por ejemplo un
vídeo de un acontecimiento concreto sucedido en ese lugar. Es en estos aspectos
donde el potencial de los códigos QR es una transición hacia la realidad
aumentada (RA; en inglés AR).
Interacción aumentada
Otra tecnología que puede revolucionar la forma en que la gente interactúa
digitalmente con el mundo que les rodea es la realidad aumentada (RA), y
es probable que estemos ante el próximo gran éxito en cuanto a interfaces
entre el mundo impreso y el digital. La RA es una tecnología que mezcla el
mundo real y el mundo digital superponiéndole una capa de información
digital adicional sobre los objetos visibles. En la actualidad se utiliza un
dispositivo digital, como un smartphone, para mejorar la experiencia en un
entorno físico en tiempo real. Pero para que la visualización de RA sea
eficaz es necesario aplicar con cuidado los principios de comunicación
visual.
Superponer la realidad
La RA está más cerca del mundo real que la realidad virtual (VR), que está
generada completamente por ordenador. En esencia, lo que la RA hace es utilizar
la cámara de un smartphone y una aplicación para aumentar el entorno en el
mundo real superponiendo detalles digitales (gráficos, textuales, de audio o de
vídeo) en tiempo real. En teoría, la RA añade a lo que apunte la cámara capas
extra de información digital, accesible desde la Web y contextual según la
posición GPS del usuario.
Aunque en la actualidad esta tecnología es funcional, todavía es bastante
rudimentaria. Para funcionar satisfactoriamente, además de un dispositivo digital
desde el que acceder a ella (un smartphone), la RA necesita otros tres
componentes:
—Un marcador que lance la capa de información AR
—Software para procesar el marcador y devolver el contenido
—Una interfaz que una los tres componentes (marcador, software y contenido)
para que el usuario pueda acceder a ellos.
Este tipo de interfaces digitales son mucho más dinámicas que las que
encontramos hoy en día en la Web o en una aplicación de smartphone, lo que
significa que la comunicación visual de la capa de información debe acomodar
una gran variedad de contenido dinámico. En los smartphones con aplicaciones
de RA (como Layar), la interfaz está limitada por las actuales restricciones de
calidad de la cámara, el tamaño de la pantalla, la resolución y la velocidad de
descarga de datos.
Dentro de la pantalla, la interfaz de RA debe mostrar, en tiempo real, el entorno
en que están situados los marcadores de RA y superponer dinámicamente la
información adicional sacada de la Web. Planificar la manera de mostrar esta
información hace que el diseñador gráfico se enfrente tanto a nuevas e
interesantes oportunidades como a nuevos problemas que deberá solucionar.
6.6
6.6
RA y redes sociales
Estos conceptos de diseño, realizados por Mathew Buckland y Philip Langley,
analizan cómo la RA puede impactar en las relaciones sociales en el futuro.
Muestran la cantidad de datos superpuestos, accesibles en tiempo real, que
pueden recopilarse, lo que pone de manifiesto varios problemas de
funcionalidad, comunicación visual y usabilidad de la RA. Demasiada
información a la vez reduce la comunicación; demasiada poca, y el usuario se la
perderá. El equipo de diseño debe encontrar la solución dorada (la correcta)
mediante la experimentación y las pruebas con usuarios.
6.7
6.7
Conectividad
La conectividad entre el usuario y el mensaje comunicado está en constante
evolución, como se demostró en el One Giant Pledge Event de 2012 en Nueva
York. Se utilizó la RA para incentivar a las familias a comer una verdura más al
día mediante un juramento hecho por el mismísimo Gigante Verde.
6.8
6.8
Aplicación del metro de Nueva York
Esta aplicación de RA diseñada por acrossair permite localizar estaciones del
metro de Nueva York. Si se mantiene el teléfono plano, se muestran todas las
líneas del metro; si se gira hacia arriba, se superponen en la pantalla las
estaciones más cercanas con relación a la ubicación y la vista. La interfaz de RA
se carga en tiempo real y muestra las indicaciones, la distancia y las líneas
disponibles en las estaciones más cercanas.
El diseñador en el mundo
Para el equipo de diseño en general, y para el diseñador gráfico en particular,
representar contenido agregado de la Web añade un nuevo nivel de complejidad
al diseño de interfaces, ya que se necesita sensibilidad para superponer de
manera dinámica gráficos, textos e información sobre una imagen del entorno.
Los ejemplos visuales de RA mostrados en esta sección son básicamente
prototipos para mostrar el potencial de la RA. Algunas empresas, como Layar y
Wikitude, están desarrollando la experiencia de RA móvil de una forma mucho
más accesible.
Igual que los códigos QR, el impacto real de la RA no se notará hasta que el
público general sienta la necesidad de usarla, ya que, tal como afirma el doctor
Sandor, no es útil hasta que todo el mundo pueda acceder a ella desde sus
smartphones y le encuentre un uso en su día a día; entonces se convertirá en algo
tan normal en la vida del siglo XXI como las pantallas táctiles y los mensajes de
texto. Aun así, sigue siendo importante que los diseñadores gráficos tengan en
cuenta y planifiquen maneras de comunicar visualmente y de modo eficaz una
interfaz de este tipo.
El mundo de las pantallas táctiles
Los sistemas operativos Android, iOS, Blackberry y Windows han
permitido que la gente acepte un nuevo mundo de pantallas táctiles. Desde
que Apple lanzó el iPhone y abrió el mercado, los smartphones y las tabletas
están superando en ventas a los ordenadores de sobremesa. Por tanto, es
muy importante que los diseñadores de interfaz estén al día de los avances
en esta tecnología; este apartado ayudará a analizar algunas de las
implicaciones del diseño para pantallas táctiles.
La tecnología innova y evoluciona más rápido de lo que cualquier libro puede
cubrir: tan pronto como se escribe sobre una tecnología, esta ya está desfasada.
Por suerte, este libro no trata sobre tecnología, sino sobre cómo diseñar
interfaces que la gente pueda usar. Nosotros, los seres humanos, evolucionamos
mucho más despacio que la tecnología; las capacidades de los seres humanos son
las mismas, solo necesitan adaptarse a una nueva forma de trabajar con una
nueva herramienta. Y precisamente esto es lo que son las pantallas táctiles: una
nueva herramienta.
La interfaz bajo el vidrio
Aunque de algún modo las tecnologías digitales ayudan a aumentar las
capacidades humanas, seguimos manipulando las herramientas con las manos y
los dedos (salvo que exista alguna discapacidad). Aunque las herramientas sean
ahora digitales, nuestras manos y dedos no lo son: sostienen cosas y agarran
cosas. Las yemas de los dedos están cubiertas de terminaciones nerviosas
densamente agrupadas que transmiten información para que nuestro cerebro la
interprete.
A pesar de que manipulamos las interacciones de manera más directa con las
interfaces táctiles que con las WIMP, en realidad solo notamos el vidrio cuando
hacemos un swipe (pasamos el dedo) o tocamos la pantalla. Por tanto, podría
decirse que la interfaz está “bajo el vidrio”, mientras que en los ordenadores de
sobremesa estamos separados del contenido por el puntero y el ratón. Con las
pantallas táctiles estamos más cerca de la interacción, pero todavía no del todo
“en” la interacción. Los diseños actuales de interfaces para pantallas táctiles
utilizan los gestos de los dedos y el pulgar para acceder e interactuar con el
contenido; mientras la interfaz permanezca “bajo el vidrio”, lo que seguirá
faltando en la interacción es la sensación de textura.
6.9
6.9
Aplicación Vote Band
Este concepto de aplicación del estudiante Jacques Peacock permite a los
usuarios votar al momento por sus actuaciones favoritas durante conciertos como
la “Batalla de bandas”. Para revolucionar la participación del público, la
aplicación ofrece un espacio social en el que pueden añadirse detalles de la
banda y promociones especiales mediante la conexión con la plataforma de
Facebook. Este espacio social aumentado sigue estando “bajo el vidrio” de la
pantalla táctil, pero al instante el usuario se siente más informado sobre la nueva
música y responde con un dedo sobre el vidrio.
Interacciones táctiles
Para los diseñadores gráficos que trabajan en productos impresos, los materiales
físicos, como el papel, el cartón o la tela, son una parte tan importante de la
comunicación visual como la tipografía, el kerning o el color. Hasta ahora, esto
no ha sido un factor para los diseñadores gráficos dedicados al diseño web, ya
que el consumo de una página web en el escritorio existía únicamente en el
mundo de las interfaces WIMP. Sin embargo, ahora que predomina la
manipulación directa mediante el tacto, los usuarios interactúan con las
interfaces de maneras distintas. Los científicos ya están haciendo prototipos de
pantallas táctiles con textura.
Si esta tecnología despega podría tener un impacto enorme en el papel del
diseñador gráfico y puede suponer un reto, en especial para aquellos que solo
han diseñado para medios digitales. En el futuro, los procesos de diseño no
digital y las habilidades centradas en los materiales físicos aprendidos en la
escuela de arte y de diseño, como el diseño de packaging, serán muy útiles para
el diseño de interfaces. El diseño de packaging une los sentidos de la vista y el
tacto en una experiencia diseñada gráficamente. Apple es un ejemplo perfecto de
la creación de una experiencia completa para sus usuarios a través de sus
decisiones estéticas de packaging. En las pantallas táctiles del futuro se tendrá
que conseguir una experiencia de usuario estética que seduzca a todos los
sentidos (en particular el tacto del material).
6.10
6.10
Transparent Screen
En la aplicación Transparent Screen para Android, de Sascha Affolter, mediante
un ingenioso uso de la cámara se puede hacer que la pantalla táctil parezca
transparente y muestre lo que hay tras el teléfono del usuario a través de las
aplicaciones de Android que esté utilizando en ese momento. Este efecto no es el
mismo que la RA, pero permite que el usuario interactúe con las aplicaciones
mientras camina y pueda ver a la vez lo que está haciendo y adónde. Aunque el
uso de la aplicación es limitado, demuestra que es importante que las
aplicaciones se combinen con la condición física del dispositivo.
Esto nos lleva de nuevo al papel central que juega la comunicación visual en el
proceso de diseño de una interfaz. Mientras que los científicos pueden acercarse
técnicamente a la sensación de textura, que los desarrolladores traducirán a
código, el diseñador gráfico es el encargado de comunicar esa sensación. A la
hora de dar vida a la experiencia de usuario, puede ser instrumental mediante el
aspecto y ahora (potencialmente), transmitir la sensación de la interfaz.
Entrevista: Kate Ho
En Interface 3 se dedican a producir juegos multitáctiles para tabletas y
otras tecnologías con pantallas táctiles. ¿Qué es lo que más les interesa a sus
diseñadores sobre las pantallas táctiles?
Lo mejor de las pantallas táctiles es la sensación de que estás manipulando algo
directamente. La idea de que existe algo que quiero tocar es más inmediata e
intuitiva. ¡Los niños de hoy en día esperan que las cosas se puedan tocar y hacer
swipes en ellas!
¿Conoce alguna otra tecnología que podría influir en cómo entenderemos y
diseñaremos las interfaces en un futuro cercano?
Si no son las pantallas táctiles, será el Kinect de Microsoft (véase página 97). El
Kinect es ahora mucho más asequible (y gracias a los hackers, también
multiplataforma). Existen smart TV que usan gestos para elegir los programas de
televisión. También está la idea de la casa conectada, como esos vídeos
futurísticos de Microsoft en los que cada pared es una pantalla táctil. No estoy
del todo segura de que vayamos a querer eso, pero sí creo que gracias a la
portabilidad de las tabletas, habrá muchas más pantallas por toda la casa y serán
mucho más accesibles.
Profesión
Directora ejecutiva de Interface 3 (Reino Unido)
Experiencia
Empresa galardonada de juegos educativos, con un equipo de diseñadores y
programadores que sienten pasión por producir juegos y juguetes
divertidos, novedosos, inteligentes y multitáctiles.
Web
interface3.com
¿Cuál es el problema de añadir tantas pantallas táctiles en nuestras casas y
paredes?
Las pantallas empotradas en casa corren el riesgo de quedarse obsoletas con
mucha rapidez. Sin embargo, puedes montar un iPad en un soporte de pared y…
perfecto. ¿Necesitas un iPad nuevo dos años después? Lo sacas y enchufas el
nuevo. Creo que las pantallas estarán algo limitadas, no porque no las queramos
a nuestro alrededor, sino porque querremos mantenerlas al día.
Entonces, ¿es importante la portabilidad del dispositivo táctil?
La portabilidad es increíble. Creo que siempre habrá lugar, en especial en el
trabajo, para los ordenadores portátiles, para cuando quieres trabajar. Pero creo
que cuando necesitas ordenadores de bolsillo (y, admitámoslo, todos necesitamos
ordenadores de bolsillo porque estamos demasiado acostumbrados a tener
Google Maps e información en tiempo real), esos dispositivos serán cada vez
más portables.
¿Podemos pensar en los ordenadores portátiles como lo que se usa
principalmente para la producción de “contenido”, mientras que las
tabletas táctiles sirven más para consumir “contenido”?
Cuando estás produciendo quieres esa imagen “justo ahí” o ese texto “justo ahí”,
mientras que cuando estás consumiendo no sueles hacer acciones muy
detalladas.
Esto va ligado a la idea del contexto y debes ser más inteligente, ya que no
puedes colocar 70 botones (como en un mando a distancia antiguo) en una
pantalla. En una pantalla táctil, en realidad, solo puedes colocar unos 12 botones
porque cada botón tiene que tener el tamaño de un dedo. Nosotros ya pensamos
de esta forma, por lo que nos resulta algo natural a la hora de diseñar.
¿Cree que se añadirá la sensación de textura a las futuras tecnologías
táctiles?
Sería raro si nunca llegamos ese poco más lejos y añadimos la sensación de
textura, ¿por qué no iba a pasar? La tecnología está llegando a un punto en el
que creo que los científicos ya saben que es posible. Se trata ahora de si puede
hacerse a un precio asequible y es escalable. ¿Por qué no ibas a añadir textura a
tu interfaz para que invite a ser tocada? Los iPad influyen realmente en las
personas en cuanto a las prestaciones visuales, porque ¿cómo se representa la
prestación visual de la textura como resultado? Es nuestro primer intento, creo
que en los dos próximos años veremos mejoras en el diseño a medida que
diseñadores nuevos y valientes empiecen a cuestionarse aún más estas
posibilidades.
Caso de estudio
Microsoft Surface de Macallan en el aeropuerto de
Schiphol
El proyecto
La destilería de whisky escocesa Macallan se fundó en el corazón de Speyside
en 1824 y hoy en día se promociona como una bebida alcohólica premium.
Edrington encargó a Whitespace la construcción de una interfaz que usara
tecnologías punteras para que los consumidores se involucraran en el punto de
venta con uno de los principales whiskys de malta.
El objetivo de Whitespace consistía en comunicar la reputación de la marca
mediante el uso de la interactividad, el vídeo y una comunicación visual
persuasiva en una interfaz dentro de un entorno de venta de viaje internacional.
“The 1824 Collection” de Macallan es exclusiva del travel retail y, por tanto,
solo está disponible en ciertas ubicaciones, como la tienda de whisky del
aeropuerto de Ámsterdam-Schiphol. En colaboración con Interface3, se escogió
la plataforma multitáctil Microsoft PixelSense (Surface 2).
Proyecto
Microsoft Surface de Macallan en el aeropuerto de Schiphol
Equipo de diseño
Whitespace, Edinburgh (Edimburgo, Reino Unido) www.whitespacers.com
Implementación
Interface3, Edinburgh, UK www.interface3.com
Cliente
Edrington
La interacción en la pantalla táctil
La superficie de pantalla táctil Microsoft PixelSense utiliza Windows 7 y
tecnología .Net, lo que permitió al equipo de diseño explotar la capacidad de
reconocimiento de objetos de la pantalla. El equipo, compuesto por Iain
Valentine (director creativo), Charlie Bell (director de diseño gráfico) y Johnny
Lewery (diseñador de movimiento), diseñó una interfaz que permitía al cliente
realizar un viaje táctil a través de la historia de Macallan. La interfaz podía ser
operada por varios clientes a la vez, que podían escoger botellas de The 1824
Collection y colocarlas en la superficie táctil para revelar de manera interactiva
la información contextual de cada botella, y experimentar a su propio ritmo
cómo se hacía el whisky y navegar entre las notas de cata y los vídeos.
6.11
6.11
Boceto inicial: Notas de cata específicas
Con este primer diseño, el equipo de diseño explicó al cliente la experiencia de
usuario.
6.12
6.12
Viaje del usuario: De la superficie a la captación de datos
El equipo creó un wireframe demostrando cómo sería el flujo interactivo que
llevaría al usuario al contenido deseado.
La experiencia de usuario diseñada
Antes de diseñar la interfaz, el equipo de diseño tuvo que entender bastantes
cosas: la marca Macallan, su público objetivo, las oportunidades y limitaciones
de la tecnología, la ubicación, la implementación y las pruebas de la interfaz.
Visitaron tanto la destilería como la tienda de whisky del aeropuerto de
Schiphol, sumergiéndose en el proceso de producción del whisky, incluyendo la
cata de algunos vasos de whisky.
Trabajado junto con los programadores de Interface3, el equipo de diseño se
aseguró mediante workshops y tormentas de ideas de explotar todo el potencial
de la tecnología táctil PixelSense y de que su concepto final fuera técnicamente
factible. Por ejemplo, la sensibilidad de la luz era importante para que funcionara
el reconocimiento de objetos, por lo que la superficie final debería calibrarse con
precisión para el contexto de la tienda de whisky del aeropuerto de Schiphol, lo
que llevó al equipo de diseño a visitar el aeropuerto. Estas pruebas intensivas de
la interfaz, desde hacer el prototipo inicial de ideas hasta las pruebas de usuarios
del diseño final, dieron al equipo un conocimiento muy valioso con el que
verificar sus decisiones de diseño acerca de la comunicación visual de la
experiencia de usuario interactiva.
El diseñador gráfico en el proyecto
A lo largo de todo el proyecto de interfaz se tuvo en cuenta la perspectiva de
comunicación visual. El equipo de diseño principal estaba formado por
diseñadores gráficos con experiencia que habían diseñado interfaces y
aplicaciones para clientes como el canal de televisión de Reino Unido Channel
4. En colaboración con el equipo interno de programadores y con Interface3, los
diseñadores gráficos contribuyeron a crear una experiencia de usuario
satisfactoria utilizando tecnología multitáctil puntera.
Desde la concepción hasta la programación y la prueba de la interfaz, los
diseñadores gráficos se aseguraron de que la comunicación visual de la
interacción fuera un éxito para todo el proyecto. La investigación en la destilería
y en el aeropuerto ofreció un conocimiento importante que no se hubiera logrado
de otra forma; gracias a este conocimiento el diseño pudo incorporar una gran
riqueza de detalles. Whitespace creó una experiencia de usuario que
implementaba con fluidez y eficacia una experiencia multitáctil de marca, que
reflejaba el posicionamiento de lujo de Macallan y que respondía al briefing.
6.13
6.13
Interacción para la botella Oscuro
Las discusiones con Interface3 pusieron de manifiesto que debía permitirse a los
usuarios navegar por la superficie sin tener que colocar la botella en la pantalla.
6.14
6.14
Selección de una barrica de roble
Los “caminos aromáticos” (imágenes de sabores) del whisky parecen fluir desde
la punta del dedo que toca la pantalla.
Ejercicio
Diseño de un concepto para una aplicación de
smartphone de RA
Premisa
En este ejercicio final trataremos de consolidar tus habilidades de
comunicación visual mediante el diseño de una aplicación de realidad
aumentada (RA). El ejercicio utilizará varias de las habilidades necesarias
para diseñar interfaces: investigación, investigación de usuarios,
arquitectura de la información, jerarquía visual, navegación, contenido,
diseño gráfico para medios digitales, diseño de una experiencia estética de
usuario, modularización y localización.
El objetivo de este ejercicio es crear un prototipo para una aplicación de RA
en un smartphone de pantalla táctil que muestre las capas de información
sobre la imagen panorámica de una escena.
Resultados
Este ejercicio final te ayudará a entender la importancia tanto de la funcionalidad
como de la usabilidad para la comunicación visual. Trabajando dentro de los
límites de una pantalla pequeña con información a la que se accedería de modo
dinámico en tiempo real, necesitaremos una solución dorada que sea funcional y
que comunique visualmente la información necesaria de manera que sea
utilizable por otro ser humano. Este ejercicio debería ayudarte a consolidar todas
tus habilidades de comunicación visual para diseñar interfaces con éxito, que
creen experiencias estéticas de usuario positivas.
Ejercicio
Este ejercicio está dividido en cuatro partes.
Parte 1: Descubrimiento
Antes de empezar este ejercicio necesitarás:
—Hacer una fotografía panorámica de una escena de tu zona.
—Investigar información contextual sobre la zona para poder añadirla como
capas de RA. A partir de esta investigación, decide el propósito de tu aplicación
de RA y escoge un tema específico (por ejemplo, las paradas de transporte más
cercanas).
—Decide quién es tu público objetivo y crea un conjunto de personas de usuario
que te ayuden a entender lo que necesitan de la aplicación. Esto tal vez te haga
revisar tu concepto.
Parte 2: Añade el panorama a la plantilla de smartphone
—Una vez que tengas tu escena panorámica, colócala en tu plantilla de
smartphone (véase imagen 6.15 al dorso).
—En la plantilla, el smartphone debe estar situado en la capa superior, con otra
capa por debajo que contenga los diseños de la RA.
—Deberás expandir la anchura del lienzo para que se ajuste a la anchura de la
imagen panorámica, y tal vez también reducir el tamaño de tu smartphone si
resulta demasiado grande. No aumentes ninguna de las dos imágenes, ya que
perderías calidad.
Parte 3: Superponer la información
—En función del concepto que hayas elegido y de la calidad de la investigación
que hayas hecho para encontrar información sobre el entorno, ahora deberás
diseñar una interfaz como capa superpuesta de RA.
—Prueba varios conceptos antes de decidirte por un diseño de interfaz.
—Escoge el concepto más sólido y colócalo en tu plantilla de smartphone sobre
la imagen panorámica (véase imagen 6.16 ).
—Superpón TODA la información de RA que tengas en una nueva capa en el
archivo (véase imagen 6.17 ).
Parte 4: Finalizar el concepto de diseño
—A lo largo de varias iteraciones, revisa tu diseño, y cuando sea necesario
cambia la cantidad de información mostrada (véase imagen 6.18 ). Una buena
redacción de textos puede ayudarte.
—Imprime el archivo y haz un prototipo en papel para probarlo con algunos
usuarios objetivo.
—Una vez que estés satisfecho con cómo funciona el prototipo, finalízalo de
manera que puedas mostrarlo a un cliente.
6.15
6.15
Plantilla de smartphone
El smartphone debe estar situado en la capa superior en Adobe Photoshop (o un
programa similar), y tener otra capa debajo que contenga los conceptos de
diseño de la RA.
6.16
6.16
Añadir el panorama
Una vez que tengas tu imagen panorámica, colócala en tu plantilla de
smartphone. No aumentes ninguna de las imágenes, ya que perderían calidad.
6.17
6.17
Superponer la información
Superpón TODA la información que tengas en una nueva capa.
6.18
6.18
Finalizar el concepto de diseño
A lo largo de varias iteraciones, revisa tu diseño, y cuando sea necesario cambia
la cantidad de información mostrada (una buena redacción de textos puede
ayudarte).
Glosario
Abyad
Sistema de escritura, como el árabe y el hebreo, en el que cada símbolo hace
referencia a una consonante, dejando que el lector añada las vocales.
Abogado del usuario
En el diseño de interfaces, el diseñador de UX se asegura de defender al usuario
en el proceso de diseño.
Affordance
véase Prestación visual
AI
véase Arquitectura de la información
Alineación a la izquierda
Alineación del cuerpo de texto al margen izquierdo, con el lado derecho
irregular.
Algoritmo
En programación, se trata de un proceso computacional basado en la lógica
matemática que, aplicado de forma correcta, soluciona un problema.
Altura de la x
Altura vertical de una letra en caja baja como la “x”, sin contar las letras con
ascendentes (como la “h”) o descendentes (como la “y”).
Ancho de banda
Canal de telecomunicaciones mediante el que se distribuyen los datos, como la
banda ancha, el 3G o la wifi. Se mide en bits por segundo; un “bit” es una pieza
única de información.
Android
Sistema operativo de Google para smartphones y tabletas.
Antialiasing
Difuminado de dos píxeles de color con un tercero que es una mezcla de ambos
para crear la ilusión de suavidad, compensando la naturaleza escalonada de los
píxeles.
App
Abreviación de aplicación, suele referirse al software que se utiliza en un
smartphone o tableta.
Área segura de acción
Aproximadamente el 95 por ciento de la pantalla de un televisor es lo que se
considera “área segura”, ya que las pantallas de TV tienden a cortar los bordes
de la imagen debido al overscan.
Área segura para texto
Aproximadamente, el 90 por ciento de una pantalla de un televisor se considera
“segura para texto”, en la que el texto siempre es visible a pesar de que las
pantallas de los televisores pierden información en los bordes de la imagen
debido al overscan.
Arquitectura de la información (AI)
Proceso de investigación, análisis y evaluación para comunicar al equipo de
diseño la estructura interactiva de la interfaz, revelando un camino de
navegación óptimo a través del contenido que asegure que se cumplen los
objetivos del usuario y del cliente. La AI ofrece información sobre “qué
contenido va dónde” y “qué debe enlazar a qué”.
Ascendentes
Asta vertical de una letra en caja baja como la “h” que se extiende por encima de
la altura de la x.
Barras de progreso
Cuando algunas interfaces se cargan en determinados dispositivos, la progresión
de la carga se representa como una línea gráfica que cambia de color según el
porcentaje de la interfaz que se ha cargado.
BD
Abreviación de Blu-ray Disc, un formato de disco óptico que está reemplazando
a los DVD.
Camino de navegación
Ruta a través de una interfaz para acceder al contenido, en la que las
características de mayor importancia se presentan primero al usuario y las
características secundarias se mantienen reservadas.
Canal alfa
Controla la opacidad de un color o imagen. El ciento por ciento es
completamente visible, el cero por ciento es invisible.
Capas de ajuste
Capa que contiene un efecto, como brillo o saturación, que se aplica a todas las
capas debajo de ella.
CMYK
Espacio de color utilizado en impresión que combina el cyan, el magenta, el
amarillo y el negro.
Codiseño
Metodología de diseño centrada en la comunidad y en la que los diseñadores
trabajan directamente con representantes de la gente a la que se presentará el
resultado diseñado. El “co” en codiseño puede significar cooperativo,
comunidad o colaborativo.
Código
En el contexto de este libro, se ha usado el término código como paraguas para
describir todos los lenguajes de programación usados en el diseño de interfaces,
desde el simple marcado HTML hasta el más avanzado C++.
Códigos de respuesta rápida
Código de barras con la capacidad de almacenar decenas de miles de bits de
información y actuar como atajo desde el mundo físico para contenido basado en
la Web. Se imprimen como un código cuadrado que puede encontrarse en
carteles, folletos, etiquetas, libros, revistas o cualquier objeto imaginable. Los
códigos QR se escanean con una aplicación en un smartphone, que lleva al
usuario a los datos webs relacionados.
Códigos QR
véase Códigos de respuesta rápida
Composición
Versión funcional del diseño final. En este libro se refiere al archivo digital
(Photoshop, Illustrator, Fireworks, InDesign, etc.) que contiene la estructura de
la interfaz y los recursos compuestos en capas separadas, convenientemente
agrupadas y etiquetadas, sobre una retícula subyacente.
Colores análogos
Estos colores están uno al lado del otro en la rueda de color, y funcionan bien
juntos porque comparten una parte similar del espectro (por ejemplo, el verde, el
azul y el púrpura).
Colores complementarios
Estos colores están en lugares opuestos de la rueda de color (como el verde y el
rojo). Escoger colores complementarios ayuda a calmar nuestro sistema visual.
Colores contrastados
Colores que están en distintas partes de la rueda de color (como el rojo y el azul)
y que pueden ser eficaces para llamar la atención.
CSS
véase Hojas de estilo en cascada
CSS3
Última versión de CSS que añade un nuevo nivel de control de los estilos para el
diseñador.
Cuerpo de texto
Contenido escrito que no es un encabezado, subtítulo ni enlace y que constituye
la información principal de una interfaz.
Datos cualitativos
Información que está más orientada a entender las cualidades de algo. Este tipo
de datos se recopila usando varias metodologías de ciencias sociales incluyendo
la etnografía, la fenomenología, la antropología, el muestreo teórico, la
hermenéutica, el análisis de contenido, la teoría crítica y el análisis del discurso.
Datos cuantitativos
Información verificable en forma del análisis estadístico de cifras, medidas y
cantidades.
Deconstrucción
El acto de analizar y descomponer un diseño existente para comprender cómo
está construido. Esto permite ver y entender las decisiones de diseño que se han
tomado y su estructura.
Demográfico
Término del márketing que describe las características comunes de un grupo de
gente clasificado por edad, sexo, clase, etcétera.
Desarrollador
Un programador.
Descendentes
Asta vertical de una letra en caja baja como la “g” que se extiende por debajo de
la línea base.
Diseño adaptable o responsive
Metodología de diseño web que utiliza media query de CSS3 para determinar el
tamaño de la pantalla y la capacidad del dispositivo en el que se mostrará la
página web. El código redistribuye la interfaz para que se adapte al dispositivo
detectado.
Diseño iterativo
Proceso de diseño que entiende que el buen diseño no aparece de la nada, sino
que emerge a partir de un proceso de experimentación creativa. Es cíclico y
propone la repetición de las fases de ideación y diseño, seguidas de hacer
prototipos y las pruebas. Esto pone de manifiesto áreas de mejora y
modificaciones en el diseño, lo que da paso a otra fase de diseño y más pruebas
de usuario, hasta que se llega a un resultado satisfactorio dentro de la fecha
límite y el presupuesto establecidos por el cliente.
Diseño participativo
Construido sobre los cuatro principios de cooperación, experimentación,
contextualización e iteración. Es una técnica que enfatiza la participación activa
del usuario en el desarrollo de sistemas de ordenador.
Eje x
La anchura horizontal de la pantalla.
Eje y
La altura vertical de la pantalla.
Em
Un em equivale a la anchura de la M mayúscula y es relativo al tamaño de letra
de la tipografía en ese momento. Se incrementa en aumentos menores y escala
bien.
Espacio en blanco
véase Espacio negativo
Espacio negativo
Espacio entre los elementos y la información en una interfaz, que permite que se
muestre la jerarquía del diseño y que el usuario encuentre con rapidez el
contenido que quiere.
Estética
Es más que un estilo concreto de diseño de interfaz. La estética es parte integral
de la experiencia humana: es la percepción y la opinión sobre la calidad de la
belleza. Influye enormemente en las experiencias que encontramos en el mundo.
Lo que se considera estético es fluido. Las normas culturales y valores sociales
actuales pueden cambiar (“el nuevo negro” o las modas).
Estructura de navegación contextual
Forma de agrupar y visualizar el contenido en la AI mediante asociaciones de
contenido, en lugar de una estructura reticular jerárquica, que muestra cada nivel
de navegación en una fila.
Estructura reticular
Una estructura reticular ayuda a que el usuario comprenda las distintas jerarquías
visuales de la navegación y el contenido.
Estructura reticular jerárquica
Jerarquía visual dispuesta sobre una columna en un archivo de composición
digital.
Experiencia de usuario (UX)
Una interacción satisfactoria para el usuario.
Familia de fuentes
Una familia es un estilo de tipos que incluye la caja alta, la caja baja, los
numerales y los glifos. Ejemplos de familias serían Times, Helvetica, Verdana y
Courier.
Fuente
Suele confundirse con una familia (una familia es un conjunto de fuentes). La
fuente es una clasificación de un estilo de familia como romana, condensada,
cursiva o negrita. Véase también Familia de fuentes.
Funcionalidad
Cómo funciona una interfaz, centrándose en la combinación de la tecnología
utilizada, el aspecto visual de la interfaz en un dispositivo y el código subyacente
que hace que funcione.
GUI
véase Interfaz gráfica de usuario
Hipertexto
El fundamento básico del diseño interactivo. Es un enlace de texto dentro de un
documento o a través de distintos documentos. Este texto se muestra subrayado
y, a menudo, en azul en su estado sin clicar, y se vuelve morado tras ser visitado.
Hojas de estilo en cascada (CSS)
Usadas junto con el HTML y al PHP controlan la estructura de una página web.
Este código define los estilos de una página web.
HTML
HyperText Markup Language [lenguaje de marcas de hipertexto]. Código que
define la estructura de una interfaz web.
HTML5
Nueva versión de HTML que elimina la necesidad de instalar plugins de terceros
en los navegadores y permite que el código controle algunos elementos
interactivos multimedia que antes estaban controlados por Adobe Flash.
Icono
Herramienta de interfaz que centra visualmente la atención y comunica de forma
simple y concisa una llamada a la acción mediante el uso de una metáfora visual
entendible.
Iconografía
Gramática visual de los símbolos utilizados en el diseño de iconos para una
interfaz.
Ideación
Fase inicial de generación de ideas durante el proceso de diseño en la que se
proponen muchas ideas para el resultado del proyecto mediante una tormenta de
ideas.
Ideográfico
Sistema de escritura (como el chino) que puede leerse tanto vertical como
horizontalmente.
Interfaz
véase Interfaz de usuario
Interfaz de usuario (UI))
Una interfaz es un punto de contacto entre dos entidades. En una interfaz de
usuario, se trata de la interacción visual eficaz entre un humano y un ordenador.
Interfaz gráfica de usuario (GUI))
Interfaz de usuario que utiliza gráficos de mapa de bits. Mediante el diseño
gráfico y el uso de metáforas visuales, comunica visualmente la navegación, la
interacción y el contenido de la interfaz.
Interlineado
Aumento o disminución de los espacios verticales entre las líneas base que
puede tener efectos drásticos sobre la legibilidad.
Internacionalización
“Diseño y desarrollo del contenido de un producto, aplicación o documento que
permite la fácil localización para públicos objetivo de distintas culturas, regiones
o idiomas”.
Word Wide Web Consortium
Instalación para pruebas de usabilidad
No hace falta tener una instalación cara para realizar una prueba de usabilidad.
Puede llevarse a cabo con un mínimo de equipo y una cámara de vídeo.
Observar al usuario remotamente desde otra habitación vía un enlace de vídeo
permite que el equipo de diseño vea cómo funciona la interfaz. Observar a través
de una cámara de la que el usuario no es consciente, y que no le distrae, permite
analizar un comportamiento más natural.
iOS
Sistema operativo móvil de Apple para iPhone y iPad.
JavaScript
Lenguaje de programación interpretado usado para crear interactividad en una
interfaz web, como validar formularios, galerías de imágenes o abrir ventanas
emergentes.
Jerarquía visual
Los encabezados, navegación y contenido se separan por capas de mayor
importancia a importancia secundaria y terciaria, consiguiendo un flujo fácil a
través de la interfaz que comunica lo que es accesible, lo que es interactivo y qué
hacer después.
jQuery
Librería de funciones y métodos de JavaScript que ayuda a simplificar la
interacción, la manipulación de acontecimientos y las animaciones en un
documento HTML.
Kerning
Espaciado de letras dentro de una palabra que permite el ajuste de un carácter
más cerca o más lejos de su vecino más cercano.
Lineal
Navegación dentro de una interfaz que sigue un orden secuencial, como la
página 1 seguida de la 2, 3, 4.
Llamadas a la acción
Comunicaciones visuales que informan al usuario que debe elegir o hacer algo
dentro de la interacción, como un botón de enviar.
Localización
“Adaptación del contenido de un producto, aplicación o documento para que se
ajuste a los requisitos de idioma, culturales o de otro tipo de un mercado objetivo
específico (un ‘local’).”
World Wide Web Consortium
Mapa de bits
Imagen creada a partir del coloreado de cada píxel utilizando formatos de
archivo como JPG, PNG y GIF.
Marcado
Sintaxis usada en un lenguaje de código, como el HTML (y sus variantes XML y
XHTML), para definir elementos en páginas webs o archivos de datos. Para
definirlo, el marcado utiliza etiquetas en el código antes y después de cada
elemento, como por ejemplo <title></title>.
Media query
véase Diseño adaptable o responsive
Medianil
Espacio entre las columnas de una retícula.
Metáfora
Transferencia de significado de un objeto para designar otro objeto con ese
significado (este otro objeto representa el objeto real).
Modularidad
Proceso de diseño que utiliza elementos que se puedan codificar una sola vez y
reutilizar tantas veces como sea necesario en la interfaz.
Módulos
Elementos de interfaz que son componentes repetibles con sus proporciones
definidas tanto en el eje x como en el y, y que son reusables.
MySQL
Sistema de gestión de bases de datos relacional, usado junto con PHP para
dinámicamente añadir, eliminar y modificar datos de una base de datos
conectada a una interfaz.
Navegación contextual
Navegación que puede estar disponible solo en una zona concreta de la interfaz,
en una página temática en particular o que puede desbloquearse solo dentro de
un proceso. Un ejemplo de esto serían las opciones en cada pantalla de la
instalación de un software, donde los botones cambian sus llamadas a la acción
en función del paso del proceso que se haya alcanzado.
Navegación global
Navegación disponible desde todas las páginas de la interfaz. Entre los ejemplos
de este tipo de navegación se encuentran los enlaces a la página de inicio, a la
ayuda, para imprimir, etcétera.
No lineal
Navegación que no sigue un orden secuencial, sino que puede saltar a cualquier
contenido o página dentro de la estructura de navegacion de la interfaz o fuera si
usa enlaces hipertextuales.
Objetos inteligentes
En Photoshop, se trata de las capas que conservan el contenido original de una
imagen, que puede editarse como una capa sin afectar a la imagen de mapa de
bits o vectorial original.
Personas
véase Personas de usuario
Personas de usuario
Una herramienta importante para el diseñador. Se trata de un arquetipo (no un
estereotipo) creado para representar al usuario o usuarios objetivo de manera que
inspire al equipo de diseño. Tiene forma de perfil con un nombre, una imagen y
distintas cantidades de información sobre cada tipo de usuario. El uso de
personas durante la fase de ideación ayuda al equipo de diseño a identificar su
público objetivo, resumiendo las motivaciones, expectativas, experiencias y
conocimientos de los usuarios.
Pestañas
Un recurso de navegación basado en la metáfora de un archivador de oficina
para indicar las opciones de navegación. Esto ayuda al usuario a entender dónde
está dentro de la estructura interactiva y a saber adónde puede ir después.
PHP (Hypertext Preprocessor)
Lenguaje de programación que define la estructura de una página web que lee un
servidor y se muestra como código HTML en un navegador. Esto hace que el
PHP sea lo suficientemente seguro para acceder a información y bases de datos
(junto con MySQL).
Píxel
Un único cuadrado que puede ser de cualquiera de los más de 65.000 colores de
una pantalla.
Plataforma
Por lo general hace referencia al sistema operativo, como iOS, OSX, Windows y
Android, que controla el dispositivo en el que se muestra una interfaz.
Plugins de terceros
Software adicional añadido a aplicaciones existentes para aumentar las opciones
de dicha aplicación. El plugin más obvio es el reproductor de Flash, que se añade
a un navegador para poder visualizar contenido en Flash.
Prestación visual
La comunicación de la interactividad en una interfaz que indica una llamada a la
acción que lleva a un resultado satisfactorio.
Proceso iterativo
véase Diseño iterativo
Programación del lado del servidor
El cumplimiento online de la petición de un usuario ejecutada por un script en el
servidor web y representada en el navegador del usuario.
Programador
Persona que produce el código para el diseño de la interfaz. Pueden ser
programadores front-end, encargados escribir el marcado y los estilos para una
interfaz web o móvil (HTML, XHTML, HTML5, JavaScript, jQuery, XML,
CSS). También pueden ser programadores back-end, encargados de desarrollar
los motores de juego, los sistemas de gestión de contenido o la distribución de
datos (Python, Ruby, C, PHP, Cocoa, VisualBasic, AJAX, MySQL).
Prototipo
Maqueta de una propuesta de sistema o concepto para su inspección, prueba y
orientación.
Prueba de usabilidad
Las pruebas que evalúan la accesibilidad y usabilidad de una interfaz. Probar la
interfaz en diferentes etapas del proceso de diseño sacará a relucir cualquier
problema de usabilidad que deba solucionarse. Lo ideal es que tres o cuatro
personas (ajenas al equipo de diseño) prueben el diseño de la interfaz realizando
la misma tarea, lo que genera preguntas que exigen soluciones.
Puntos calientes
En el seguimiento de ojos, las áreas de la pantalla donde se detecta que la vista
pasa más tiempo.
Punto de información interactivo
Pantalla estática interactiva que se encuentra en un recinto público.
RA
véase Realidad aumentada (RA)
Realidad aumentada (RA)
Tecnología que difumina el mundo digital con el real superponiendo
digitalmente una capa de información adicional sobre objetos visibles. En la
actualidad se hace utilizando un dispositivo digital, como un smartphone. Mejora
la experiencia de un entorno en tiempo real.
Recursos
Los elementos que componen un diseño que se colocarán en la estructura de la
interfaz.
Relación de tríada
Un esquema de tres colores que están espaciados equitativamente utilizando un
triángulo equilátero.
Resolución de la pantalla
Calidad de la pantalla determinada por la cantidad de píxeles por pulgada (ppp)
que se muestran. Cuanta más alta sea la densidad, mejor será la calidad de la
pantalla.
Retícula
La retícula es un marco de trabajo subyacente que el diseño gráfico ha utilizado
con eficacia para estructurar la comunicación visual. Una retícula ayuda a
colocar el contenido y la navegación de una manera controlada para ayudar a la
comunicación visual.
Retículas fluidas
Control fluido del contenido reticular que puede redimensionar las anchuras y
alturas de cada elemento en relación con los demás para los distintos
dispositivos.
Retorno de la inversión (ROI))
El cliente que encarga una interfaz invierte dinero en ella y quiere ver un
resultado a partir de esa inversión, que puede ser tanto un retorno financiero
aumentado como que más gente utilice la interfaz. El cliente debería dejar claro
desde las primeras conversaciones sus requisitos, y el diseñador de UX y el
arquitecto de la información serán los responsables de medir el ROI.
RGB
Espacio de color que utiliza el rojo, el verde y el azul en las pantallas digitales.
RGBA
En CSS3, valor RGB de un color al que se añade un canal alfa, representado por
la A.
Ritmo visual
Equilibrio de la jerarquía para ayudar a que el usuario navegue sin esfuerzo por
la interfaz.
ROI
véase Retorno de la inversión
Sangre
Cualquier parte del diseño que se extiende más allá de los límites de la pantalla.
Seguimiento de ojos
Prueba de usuarios que utiliza cámaras para captar los movimientos de los ojos
sobre una interfaz en una pantalla, generando datos sobre lo que se ha mirado
para probar la eficacia de la jerarquía visual de una interfaz. No se mide solo el
movimiento del ojo, sino también cuánto tiempo se ha pasado mirando a cada
elemento en la pantalla.
Semiótica
Teoría en la que se basa la comunicación visual. Existe una conexión entre lo
que vemos (significante) y lo que representa (significado). Estas dos partes, el
significante visual y su significado, forman un signo semiótico.
Sistema de pedidos back-end
Un sistema de base de datos en las páginas webs de comercio electrónico que
procesa los pedidos, las transacciones de pago y el transporte.
Skinning
Reducción del diseño gráfico para medios digitales desde una comunicación
visual rica mediante un proceso de diseño hasta el “diseño visual”. El skinning
(o tematización) del código hace referencia al hecho de traer al diseñador gráfico
solo al final del proceso de diseño, cuando ya se ha escrito el código.
Tipografía
Ayuda a la comunicación de texto mediante la selección deliberada y cuidadosa
de la familia tipográfica más adecuada (al tamaño correcto para el lector),
manipulando la altura de la palabra, el estilo de la letra y el espacio entre
palabras, letras y líneas.
Tormenta de ideas
Diálogo activo dentro de un equipo para descubrir problemas de diseño y hacer
un mapa mental con las soluciones.
Tracking
El aumento o disminución horizontal de los espacios entre cada letra en una
palabra; puede tener distintos efectos en la legibilidad y la comprensión.
Trackpad
El área de input de un ordenador portátil.
Tramado
Mezcla digital de colores, píxel a píxel, para ayudar a su reproducción.
Uploader
Pequeña aplicación o widget que transfiere archivos digitales desde un
ordenador o dispositivo periférico a otro ordenador.
UX
véase Experiencia de usuario
Valores hexadecimales
En las interfaces webs, el color se controla por código mediante una conversión
de los valores RGB a valores hexadecimales. Los valores que forman la variedad
de colores hexadecimales empiezan en el cero y van hasta el nueve, y utilizan las
letras de la A a la F.
Vectores
Tipo de imagen digital que no pierde calidad de imagen al redimensionarse.
Están definidos matemáticamente y pueden escalarse hasta el infinito sin pérdida
de calidad.
Widgets
Miniaplicaciones usadas para realizar tareas específicas que pueden integrarse en
una interfaz mayor (por ejemplo, una caja de votación en una página web).
WIMP
Tradicionalmente, las GUI se han diseñado para interactuar mediante ventanas,
iconos, menús y un puntero.
Wireframe
Propuesta de composición que utiliza tan solo líneas, cajas y texto básico para
mostrar los marcos de trabajo posibles para la jerarquía visual, las prioridades de
navegación y las áreas de contenido adecuadas. Es un método que toma la AI y
considera las plataformas técnicas desde las que se accederá a la interfaz. No se
trata de un diseño final que solo necesita “colorearse”.
Índice
Los números de página en cursiva indican ilustraciones.
abogado del usuario 185
abyad 122, 182
accesibilidad 81
AI véase arquitectura de la información
Alertbox 52
algoritmo 182
alineación a la izquierda 78, 183
altura de la x 68, 75, 185
ancho de banda 182
Android 182
ángulos 94
animación en el código 99
animaciones 98
antialiasing 86, 87, 94, 182
app 182
app del metro de Nueva York 166
app VoteBand 53, 169-70
Apple 52, 170
archivo de vídeo 98
área segura de acción 70, 182
área segura para texto 71, 185
arquitectura de la información 18, 35, 42, 46, 47, 183
ascendentes 68, 182
Athlon Productions 13
Baldur’s Gate 21
barras de progreso 184
barras de progreso de carga 98
Blu-ray 102, 103, 104, 105
boceto en Illustrator 34
botones 132, 145
branding 160
Bridge, Alan 150-1
bucle de interacción 17
caja de imagen 145
camino de navegación 42, 43, 184
canal alfa 182
capas de ajuste 182
clicabilidad 76
clientes 22
codiseño 182
código 182
códigos de respuesta rápida 160, 161, 162, 163, 184
colaboración 127, 143
color 58, 80, 81, 82, 84, 85
colores análogos 84, 182
colores cálidos 82
colores complementarios 84, 182
colores contrastados 84, 182
colores seguros para pantalla 81
composición 140, 146, 182
comunicación 9, 142
comunicación no verbal 80
comunicación visual 98, 107, 170
conectividad 166
contenido 78, 116, 121
contenido en vídeo 98
contexto 78, 92, 118
Creative Griffin 152
cuerpo de texto 117
ciberlogo 160, 161
datos cualitativos 184
datos cuantitativos 184
deconstrucción 135, 182
demografía 24, 182
desarrollador 182
véase también programador
descendentes 68, 182
deshabilitado 21
destino 118, 121
diseñadores en forma de T 14-15, 35
diseñadores gráficos 10, 12, 16, 18, 142
diseño 9, 114
diseño adaptable 72, 184
diseño de impresión 68
diseño de packaging 170
diseño iterativo 32, 183
diseño multiidioma 125
diseño participativo 184
diseño visual 10, 18, 119
dispositivos de entrada 38, 40, 54, 96
Divine, Jim 160
Duffy, Ciaran 24
DVD, arquitectura de la información 47
eje x 70, 185
eje y 70, 185
elloDave 32-5
em 68, 183
emisión de vídeo 98
emisor 118
entorno visual 88
equipo de diseño 12
espacio de color CMYK 80, 182
espacio en blanco véase espacio negativo
espacio negativo 68, 184
estados interactivos por capas 146
estética 10, 112, 182
estructura controlada por el código 141
estructura de navegación contextual 47, 184
estructura reticular 50, 183
estructura reticular jerárquica 47, 183
etiquetas 117
etiquetas textuales 92
experiencia de usuario 12, 16, 112, 126-7, 185
experiencia del visitante 128
experiencia en primera persona 114, 142
facilidad de uso 43
Fishman Marketing 60
flujo interactivo 16, 22, 44
Frascara, Jorge 9
fuentes 183
funcionalidad 42, 74, 114, 183
Future Insights 101
Gauer, Martin 13
getmyloanfeesback.com 153
Gibson, Greg 58-9
GIF 87
Global Experience Language 52, 70
Google doodles 123
gráficos en movimiento 96
graphics interchange format (GIF) 87
Grid System 69
GRIP 11
Grip Limited 117
GUI 37, 38, 183
guía de estilo 146
guía de referencia en PDF 146, 147
guía de resolución 69
herramientas de comunicación 44
herramientas de visualización 45
hipertexto 79, 183
Ho, Kate 172-3
hojas de estilo en cascada (CSS) 35, 72, 100, 151, 182
HTML 35, 76, 183
HTML5 98, 183
Hypertext Preprocessor 184
iconografía 88-95, 183
iconos 33, 60, 88, 90, 91, 93, 183
diseñar 94, 95
significado 92
ideación 183
IDEO 14, 15, 115
ideográfico 122, 184
imágenes 86, 87
InDesign 151
información contextual 174
input del usuario 54
input gestual 40
input táctil 40
integración 173
intención 118, 120
interacción integrada 89
interacción persona-ordenador 52
interacción táctil 41
interactividad 52, 96, 106, 108, 109, 112
Interface3 172, 176
interfaz véase también interfaz de usuario
definiciones 10, 28
jerarquía 48
tipos 79
interfaz de usuario 6, 20, 114, 185
flujo interactivo 18-19
jerarquía 64, 65
mapa 46
procesos de diseño 18
texto 78
interfaz gráfica de usuario (GUI) 37, 38, 183
interfaz invisible 183
internacionalización 122, 124, 183
interlineado 74, 77, 184
interpretación 120
inventario de contenido 44
investigación de usuarios 22
iOS 183
iPads 173
JavaScript 183
jerarquía 31, 44, 48, 49, 78
jerarquía tipográfica 79
jerarquía visual 48, 50, 51, 58-9, 60, 185
joint photography experts group (JPG) 87
jQuery 72, 183
kerning 74, 184
Kinect 41, 97, 172
Kramer, Kristin 44, 126-7
Krug, Steve 12, 28-31
Kus, Mike 100, 101
L.A. Noire 115
leer 78
leer en una pantalla 78
leer escaneando 78
lenguaje 92, 122, 124
lineal 184
llamadas a la acción 79, 98, 114, 182
localización 124, 184
longitud de palabra 122-3
Mafia II 71
mapas de bits 86, 87, 94, 182
marcado 184
medianiles 68, 183
mensaje 118, 120
metáfora 38, 92, 102, 184
Method Cards 115
Microsoft Surface de Macallan 174, 175, 176, 177
modelo aditivo 80
modularidad 140, 142, 143, 148, 154, 156-7, 184
módulos 70, 155, 184
monitor 86
movimiento 96, 98
Mozilla 52
MySQL 184
National Film Board of Canada 51
navegación 11, 46, 52, 109
Blu-ray 104, 105
imágenes 88
navegación contextual 46, 182
navegación global 46, 183
navegadores 59
nivel de atención visual 61
no lineal 184
Oakley, Chris 113
objetivo 114
objetivos personales 20
objetos inteligentes 185
Onuki, Toshi 102
orden de fijación 61
ordenadores portátiles 173
orientación 72
páginas webs 100
arquitectura de la información 47
diseño iterativo 33
wireframes 58
pantallas táctiles 76, 168-77
partes interesadas 127
percepción 112
percepción del color 82
perfiles 24
perfiles de juego 25
personas véase personas de usuario
personas de usuario 18, 24, 26, 27, 44, 185
personificación 113
perspectivas culturales 82
peso visual 50
pestañas 185
Pflanzen Gegen Zombies 125
Photoshop 34
PHP 184
píxeles 68, 78, 94, 184
plataformas 141, 184
retículas 72
wireframes 54
plugins de terceros 96, 185
PNG véase portable network graphics
portabilidad 173
portable network graphics (PNG) 87
PostScript encapsulado 86, 87
prestaciones visuales 35, 38, 76, 79, 173, 185
Pritchard, Ben 32
programación del lado del servidor 35, 184
programadores 12, 142, 183
proporción de pantalla 72
proporciones de imagen 145
prototipo 184
véase también prototipado en papel
prototipado en papel 18, 31, 56
prueba de usabilidad 28-9, 185
puntos calientes 62, 183
punto de información interactivo 129, 130, 131, 183
Purpose 128
RA véase realidad aumentada
realidad aumentada (RA) 163, 164, 165, 167, 178-9, 180-1, 182
realidad virtual 164, 185
receptor 118
recursos 109, 144, 155, 182
recursos de navegación 148
recursos modulares 149
recursos no repetibles 144
recursos repetibles 144
redacción de textos 116, 117
redes sociales 165
relación de tríada 84, 185
resolución de pantalla 68, 86, 184
retícula 68, 69, 70, 71, 109, 140, 183
retículas dinámicas 73
retículas fluidas 183
retorno de la inversión 22, 44, 184
RGB 80, 84, 184
ritmo visual 50, 185
rueda de color 84
ruido 48, 84, 118, 120
sangre 70, 182
scalable vector graphics (SVG) 86, 87
The Scotch Malt Whiskey Society 135-6
selección de contenido 98
seguimiento de ojos 59, 60, 61, 62, 183
semiótica 114, 118, 132, 133, 134-7, 184
sensores de movimiento 96
Shakey Pictures 102
Sick City Club 99, 119
significado 118, 120, 137
significado universal 92
significante 118, 137
signo 118, 137
Sim City 49
simetría 50
sistema de pedidos back-end 35, 182
skinning 184
smartphones 72, 76, 77
solución de flujo 44
Starck, Philippe 24
SVG 86, 87
tabletas 72, 77, 86, 96, 173
teoría del color 84
texto 109, 116
textura 160, 170
tipografía 74, 76, 116, 129, 185
tipografías 58, 75, 78, 79, 185
tipografía display 74
tipografía monoespaciada 74
tipografía con remates 74
tipografía sin remates 74
tormenta de ideas 182
Total Media 102
tracking 74, 185
trackpad 185
tramado 183
transmisión 118
Transparent Screen 170-1
TV 70, 98
TypeKit 100
uploader 185
usabilidad 18, 28, 42
uso de móviles 58, 127
usuario 20, 24, 112, 118
usuarios de Twitter 24
valores hexadecimales 80, 85, 183
variantes de página 140
vectores 86, 87, 185
Vedder Price 60
ventanas, iconos, menús, punteros (WIMP) 38, 39, 185
videojuegos 96, 98
visual 9
We Print Paper 33
WhiteSpace 134, 174
widgets 185
wireframes 18, 31, 53, 54, 55, 57, 185
WorldSkills 128-33
Young, Neil 102
Créditos de las imágenes
Imagen de portada: por cortesía de Sensi Soft Ltd, sensisoft.com
Página 3: Personas usando tabletas © Brand New Images, por cortesía de Getty
Images
Página 11: cortesía de Grip Limited, griplimited.com
Página 13: imagen superior por cortesía de Athlon, athlonlondon.com; imagen
inferior por cortesía de Martin Gauer, attackemart.in
Página 14: designs-on.com por cortesía de IDEO ideo.com
Página 15: Personaje © Danny Hull, 2013. Todos los derechos reservados
Página 17: Ilustración de un bucle interactivo © Jamie Portsch (YCN Talent
Agency). Redibujado a partir de la ilustración ‘Interacción’, Bill Verplank, 1999.
Discurso sobre HCI, CCRMA, Universidad de Stanford,
http://hci.sapp.org/lectures/verplank/interaction
Páginas 18-19: Posición del diseño gráfico © Ilustración original de Dave Wood.
Ilustración redibujada por Jamie Portsch (YCN Talent Agency)
Página 21: Baldur’s Gate: Enhanced Edition (BeamDog), por cortesía de
gamespress.com
Páginas 22-23: Los usuarios son los reyes, ilustración original © Dave Wood.
Redibujada por Jamie Portsch (YCN Talent Agency)
Página 24: Por cortesía de GDS International, gdsinternational.com
Página 25: Let’s Fish! Hooked On (Wired Productions) por cortesía de
gamespress.com
Página 27: Persona © Dave Wood. Retrato Denis Vrublevski por cortesía de
shutterstock. com
Páginas 29-30: redibujado por Jamie Portsch (YCN Talent Agency)
Páginas 33-35: imágenes de la página web We Print Paper por cortesía de
elloDave. ellodave.co.uk
Página 39: por cortesía de Dave Wood
Página 40: © 1996-2011, Amazon.com, Inc. o sus afiliados
Página 41: Kinect Googly Eyes © Microsoft 2013
Página 43: por cortesía de Enroll UX 2014, California HealthCare Foundation
Página 45: DwaFotografy, por cortesía de shutterstock.com
Páginas 46-47: diagrama de la arquitectura de la información © Dave Wood
Página 49: SimCity (EA) por cortesía de gamespress.com
Página 51: trabajo interactivo At Home, por cortesía de The National Film Board
of Canada. Athome.nfb.ca/#/athome/home
Página 53: VoteBandApp © 2013 Jacques Peacock jacquespeacock.com
Página 55: wireframe bocetado por cortesía de Sockyung Hong, vimeo.com
Página 57: wireframe © 2013 Jacques Peacock jacquespeacock.com
Página 60-63: capturas de pantalla de VedderPrice.com por cortesía de Fishman
Marketing Inc.
Página 64: por cortesía de Alan MacFarlane
Página 69: imagen superior Guía de Resolución © Dave Wood; imagen inferior
por cortesía de thegridsystem.org
Página 71: imagen superior Mafia II capturas de pantalla por cortesía de 2K
Games; imágenes inferiores guía de estilo GEL © BBC 2013, bbc.co.uk/gel
Página 73: por cortesía de Mark Hurrell
Página 75: © Dave Wood
Página 77: redibujado por Jamie Portsch (YCN Talent Agency)
Página 79: imagen superior por cortesía de The JOY; imágenes guía de estilo
GEL © BBC 2013, bbc.co.uk/gel
Página 81: © Vector Department, por cortesía de shutterstock.com
Páginas 82-83: copyright de Whitespace Ltd, whitespacers.com
Página 85: por cortesía de Mudcube http://mudcu.be
Página 87: por cortesía de elloDave. ellodave.co.uk
Página 89: por cortesía de Sensi Soft Ltd, sensisoft.com
Página 91: © fonikum, por cortesía de istockphoto.com
Páginas 92-93: © Max Griboedov por cortesía de shutterstock.com
Página 95: © Creative Freedom Ltd, creativefreedom.co.uk
Página 97: Kinect Sports Season 2 © 2013 Microsoft
Páginas 98-99: imagen inferior por cortesía de Martin Gauer attackemart.in
Página 99: imagen superior sickcityclub.net por cortesía de Brown & White,
richbrown.info
Página 101: por cortesía de Mike Kus, mikekus.com
Páginas 103-105: Por cortesía de Shakey Pictures shakeypictures.com
Páginas 106-109: © Dave Wood
Página 113: Imágenes de The Catalogue, vídeo creado por el artista Chris
Oakley en 2004. © Chris Oakley 2004
Página 115: imagen superior capturas de pantalla de L.A. Noire por cortesía de
Rockstar Games, Inc.; imagen inferior por cortesía de IDEO, ideo.com
Página 117: por cortesía de Grip Limited, griplimited.com
Páginas 119-121: sickcityclub.net imágenes por cortesía de Brown & White,
richbrown.info
Página 123: © Google
Página 125: Plants vs Zombies (PopCap Games) por cortesía de gamespress.com
Páginas 130-133: por cortesía de Purpose, purpose.co.uk
Páginas 135-136: © Whitespace Ltd, whitespacers.com
Página 141: por cortesía de Mike Kus, mikekus.com
Página 145: imagen superior, guía de estilo GEL © BBC 2013, bbc.co.uk/gel
Página 145: imagen inferior, por cortesía de Creative Griffin,
creativegriffin.co.uk
Páginas 146-155: por cortesía de Creative Griffin, creativegriffin.co.uk
Página 160: por cortesía de Jim Divine, jimdivine.com
Página 161: imagen superior por cortesía de Chris Speed
Página 163: por cortesía de Oli Mival, futureinteractions.net
Página 165: por cortesía de Matthew Buckland y Philip Langley, memeburn.com
Página 166: imagen superior: Fotografía de Bryan Bedder/Invision para Green
Giant/AP Images; imagen inferior por cortesía de Acrossair Ltd, acrossair.com
Páginas 168-169: VoteBandApp © 2013 Jacques Peacock jacquespeacock.com
Páginas 170-171: por cortesía de Sascha Affolter, botweb.de
Páginas 175-177: © Whitespace Ltd, whitespacers.com
Páginas 180-181: Fotografía © Captain Yeo, por cortesía de shutterstock.com
Agradecimientos
Me gustaría dedicar este libro a James Russell, mi amigo, mentor y tío.
No habría sido capaz de escribir este libro sin la ayuda y el apoyo de las
siguientes personas:
Paula O’Connell por los consejos iniciales y el apoyo que me ha ayudado a
escribir una propuesta muy sólida. Mi colega profesor Alan MacFarlane y su
espacio de almacenamiento online de 50GB por salvar mis tres conferencias en
PowerPoint sobre el mismo tema de este libro y que yo había borrado
estúpidamente de mi disco duro. Mis amigos revisores: Tony Hardwick, Kristin
Kramer y Mel Owen.
También me gustaría dar las gracias a los trabajadores de Fairchild Books por
brindarme esta oportunidad de escribir un libro sobre el mismo tema que he
estado investigando durante una década. Gracias a Georgia Kennedy por
conseguirme este encargo, y a mi editora Jacqui Sayers por su paciencia y su
extremadamente útil orientación en el proceso de publicación.
Se ha hecho todo lo posible por localizar, aclarar y dar crédito a los poseedores
de los derechos de las imágenes reproducidas en este libro. No obstante, si
involuntariamente se hubiera omitido algún crédito, el editor tratará de
incorporar correcciones a las futuras ediciones.