MATERIAL DE APOYO PARA PRESENTACIÓN DE LABORATORIO DIGITAL:
Extraído de informes que justifican proyectos web de Agustín Schellstraete y Marcos Patiño.
Se pide que leas estos resúmenes, que compares tu producción web con los mismos y que
evalúes tu pieza final y tu proceso.
Según Orihuela y Santos el diseño “es precisamente la concepción original de una obra para su
posterior producción. Diseño es, por ello, sinónimo de proyecto“ (Introducción al Diseño Digital,
2000). Y “concebir un proyecto de comunicación que utilice eficazmente todo el potencial de los
medios interactivos” es más conocido como diseño digital. Los medios digitales, por oposición a
los análogicos, “representan la información en sus distintos formatos (texto, audio, imagen,
animación o video) como conjuntos discretos de valores numéricos almacenados en soportes on-
line”. Por supuesto también pueden ser almacenados en soportes off-line como DVDs o pendrives,
pero para este proyecto la relevancia radica en el soporte on-line como la World Wide Web
(WWW).
Según los autores existen dos características principales para la comunicación en estos medios
digitales: multimedia e interactividad. La primera es la ya mencionada integración de formatos de
información en un soporte on-line, y la segunda es la posibilidad de articular esta información de
tal manera que se requiera cierta actividad del usuario para acceder a ella.
Muy de la mano de la interactividad se encuentra el Diseño Centrado en el Usuario (DCU), que es
“la disciplina relacionada con el diseño, la evaluación y la implementación de sistemas
informáticos interactivos para el uso de seres humanos” (Domingo & Pera, 2011), agregándole a
esto el concepto de proceso y haciendo hincapié en el USUARIO como centro de todo este
proceso.
El DCU es tanto una filosofía como una metodología de trabajo y su objetivo es la creación de
productos que los usuarios encuentren útiles y usables; es decir, que satisfagan sus necesidades
teniendo en cuenta sus características.
Los autores mencionan el aspecto iterativo del DCU y su importancia. A grandes rasgos un
proyecto de DCU consta de tres fases que si bien siguen un orden hay que entender que nunca se
encuentran estancadas (investigación y análisis de los usuarios, diseño y evaluación). El no ser
fases estancadas, implica que siempre se vuelva o se revean cuestiones de cada fase a medida que
el proyecto avance.
1 - La importancia de las etapas en el diseño centrado en el usuario
CONCEPCIÓN CULMINACIÓN
Domingo menciona ciertos conceptos y disciplinas relacionadas con el DCU de los cuáles se
destacarán los siguientes:
- Ergonomía: Según la International Ergonomics Association “la ergonomía es la profesión
que aplica teorías, principios, datos y métodos para diseñar con el objetivo de optimizar el
bienestar de los humanos y el rendimiento global del sistema persona-máquina.”
(International Ergonomics Association, 2015).
- Experiencia de Usuario (UX - del inglés User eXperience): Definida por el autor como “el
conjunto de sensaciones, percepciones, razones y satisfacción de un usuario que
interacciona con un producto o sistema.” Es importante recalcar que, mientras los demás
aspectos del DCU hablan de eficacia, efectividad y rendimiento, en este concepto se habla
de sensaciones y es, entonces, más subjetivo.
- Usabilidad: Está relacionado con la facilidad de usarlo, aprenderlo, la cantidad de errores
que se cometen en el proceso, facilidad de búsqueda y de encontrar información, etc.
- Arquitectura de la información (IA – information architecture): Los autores la denominan
como la “disciplina que estudia la organización de la información y cómo estructurarla del
modo más efectivo para que las personas encuentren y usen la información.” Es decir,
encontrar la mejor manera de segmentar y organizar la información de modo que quien
tenga que buscarla la pueda hallar de la manera más fácil posible.
Es importante añadir que un usuario de cualquier sitio “no solo busca información, sino que de él
busca una posibilidad de interacción de manera novedosa…” (Lynch & Horton, 2000). Esta
interacción toma lugar en la Interfaz Gráfica de Usuario (GUI: Graphic User Interface) e incorpora
recursos gráficos para transmitir funciones y significados. El GUI es vital para mejorar la
experiencia de usuario, no es un mero adorno Es lo que permite la “interacción entre el usuario y
el ordenador” (aunque en este caso, es lo que permite la interacción entre usuario – contenido).
Al hablar de su trabajo de diseño web (Diseño del sitio web para un profesional del Diseño), se
puede decir también que es en el GUI por donde se va a percibir la identidad de un sitio web, que,
según Royo, entra en relación con los siguientes factores :
- Representación gráfica de los valores (tipografía, color, imágenes, transiciones, etc).
- Estilo de comunicación escrita.
- Usabilidad del sitio.
- El diálogo y la participación (feedback).
Para que la identidad del sitio sea consistente y coherente, el autor recomienda mantener una
coordinación gráfica de todo el GUI. (Royo, 2004)
Es importante rescatar un concepto que menciona este autor que es el de “señalización digital”. Él
hace hincapié por ser esencial la identificación (que, repito, toma lugar en el GUI) de espacios y
contenidos en un medio digital. Esta señalización es importante para organizar la información de
manera no lineal, utilizando un sistema denominado “hipertexto” (Orihuela & Santos, Introducción
al Diseño Digital, 1999), donde se estructura la información utilizando nodos y enlaces. Un nodo es
“cada unidad de información en un hipertexto” (por ejemplo una página, una posición dentro de la
página, etc.). El enlace o link es el vínculo entre esos nodos.
En el gráfico anterior se visualizan los nodos como cajas y las líneas como la direccionalidad.
Orihuela indica que el usuario activa enlaces para navegar de un nodo a otro. Puede ser tanto
bidireccional como unidireccional. Esto nos da 7 posibilidades a la hora de diagramar la estructura.
Estas son, según el autor:
• Lineal
• Ramificada
• Paralela
• Concéntrica
• Jerárquica
• Reticular
• Mixta
¿Diseñamos la página móvil? Hablemos de Mobile App
Según Manuel A. Coto, una app móvil es un software desarrollado para ser ejecutado en
smartphones. “Están diseñadas para educar, entretener o ayudar en la vida diaria a sus
usuarios/consumidores.” (Coto, 2007)
El autor menciona ciertas recomendaciones a la hora de diseñarlas, dentro de las cuáles se
destacan:
- Que sea simple y útil
- Aprovechar las capacidades de los móviles
- Utilizar apps externas
- Incluir redes sociales
- Seducir al cliente
- Medir el resultado
Elementos que juegan un papel crucial a la hora de desarrollar un proyecto digital.
Hay diversos componentes que son esenciales cuando uno desarrolla un sitio, aplicación móvil, o
lo que fuese a desarrollarse en un medio digital. Según Chris Bank “una interfaz gráfica require
jerarquía visual, y esta jerarquía debe desprenderse de los requerimientos del usuario.” (Web UI
Design, Best Practices, 2014). Así es que volvemos nuevamente al concepto de diseño centrado en
el usuario que se mencionó anteriormente. Pero acá se realiza el aporte de este autor que
menciona la utilización de una suerte de identikits denomiados personas, estas son
“representaciones ficticias de la base de usuarios objetivo”.
¿Pensaste en quién es el usuario de tu página? Según el autor, esta representación ficticia
colabora para prevenir y anticipar comportamientos que el usuario real tendría en el proyecto. Se
mencionan una serie de recomendaciones para la creación de una persona, como lo son la
utilización de datos demográficos y psicológicos; empleo de nombre; identificación de trabajo y
rol.
Otro concepto relacionado es el de User Scenarios, en el cuál se “traza el recorrido de cada
persona desde la primera interacción hasta que realiza una meta.” (Bank, 2014). Por supuesto se
debe pretender ser lo más realista posible, y pensar esto en base a la información recolectada
para definir la persona, uno puede intentar prevenir futuros problemas, debido a que este user
scenario incluiría pensar dónde se visualiza, cuáles son las motivaciones, cuál es la meta, etc.
Se habló recién sobre la jerarquía visual y como ésta se debe desprender de sus usuarios. Una
forma más concreta de definir esta jerarquía (una vez definida las personas) es realizar un Top
Task Analysis que consiste en “darle a usuarios cualificados una lista al azar de tareas fáciles para
realizar y pedirles que seleccionen las mejores cinco”. (Bank, Guide to UX Design; process and
documentation, 2014). Esto mostrará claramente las prioridades del usuario.
¿Ya diseñaste tu mapa del sitio?
Una vez realizado el sitemap es necesario testear su usabilidad. Bank en este sentido recomienda
varios métodos dentro de los cuáles se destaca el Tree Test (test de árbol). Este test permite
“probar la arquitectura de la información eliminando todo elemento visual. […] se examina
solamente la denominación y jerarquía del contenido.” (Bank, Guide to usability testing, 2013). Es
decir, este test permite evaluar si la arquitectura de la información y la taxonomía es correcta. ¿En
qué consiste? Básicamente se le otorga al usuario un árbol (o sitemap) interactivo (clickeable), y se
le pide que realice una serie de tareas posibles de ejecutar en el sitio. El usuario navega por el
sitemap y cuando llega a la página que él cree va a poder realizar esa tarea, lo marca como tal.
Posteriormente se analiza entre todos los usuarios y tareas. Es importante ver si se completó la
tarea, con qué dificultad, cuánto tiempo llevó, si hubo retrocesos en el árbol, etc.
Wireframe ¿ Bocetaste tu sitio? ¿En qué te basaste?
Para que la idea sobre un sitio web se materialice en un diseño hay un paso
imprescindible: bocetar. El boceto del sitio, una vez ‘digitalizado’, lleva a la realización de un
wireframe, es decir, “representación estática en baja calidad de un diseño” (Other Wise, 2013)
donde se muestran los principales grupos de contenido, estructuras y columnas, etc. Es
importante mostrar la distribución de la información y contenido sobre el espacio. Hay wireframes
más genéricos y otros más desarrollados. A continuación se visualizan dos wireframes y se ve
claramente como el de la izquierda está más avanzado que el de la derecha, que solo muestra con
rectángulos donde iría el texto, en distintos “tamaños”, pero no definidos.
Prototipo: lo importante de esto es ser coherente con tu idea inicial. En el final se te pedirá que
explicites de dónde surgió el diseño de tu página y porqué seleccionaste tales atributos de color,
texto, imágenes; etc.
El desarrollo gráfico del sitio se puede ver en una evolución del estilo visual en tres etapas. El
moodboard, style tile y brand style guide. El primero es la “versión más abstracta de un estilo
visual. […] Permite una exploración conceptual”. (UxPin, 2015). Es decir, muestran el look and feel
del sitio, su tono comunicacional. Pasando al segundo, el autor indica que es una “guía de estilo
transicional más específico que un moodboard, pero que carece de lo intricado de la marca”.
Pueden mantener un estilo de collage, pero
con elementos más específicos (texturas,
3 Moodboard 2 Style tile de tuts+ premium
colores, tipografías, tratamiento de fuentes, tamaños, botones). Es lo más cercano a los elementos
que tendrá el sitio, pero sin la parte estructural. Y por último existe el brand style guide (guía de
estilos de marca o manual de marca), que “muestra las reglas y estándares de la marca” (no solo
del logo). Según el autor, esto incluye la estandarización de fuentes, tamaños, colores, iconografía,
tono de marca, retícula, etc. Pensá en cómo resolviste la jerarquización de texto mediante los
estilos de texto.
4 Style Guide de BBC
Un tema interesante que entra como ampliatorio: Mapa de calor
Para un diseño de sitio web y/o aplicación efectiva, es muy importante la realización de un mapa
de calor, que es un “gráfico en el que se resaltan mediante un código de colores zonas concretas
de una web en base a criterios como el número de clics, o las áreas por las que pasa con más
frecuencia el puntero.” (Merino, 2014)
Básicamente su objetivo es, mediante ese gráfico, mostrar el comportamiento de los usuarios por
el sitio web y/o aplicaciones móviles y, en base a eso, mejorar ciertas características del mismo.
¿Cómo el usuario lee tu página? Una vez diseñada tu página (subida o no) podés pedir a tus
conocidos que la naveguen e indagar en lo siguiente:
Según el autor hay tres tipos de mapas de calor (en inglés heatmap):
• Heatmap por scroll: utilizado en páginas extensas, permite saber dónde los usuarios dejan
de leer (es decir, dejan de hacer scroll o desplazarse verticalmente por la misma).
• Heatmap por click: este gráfico muestra donde los usuarios hacen click, y puede indicar
que los usuarios estén haciendo click en lugares erróneos pero que parecen clickeables, en
lugares que le llaman la atención, etc.
• Heatmap por movimiento de ratón: indica las zonas por las que pasa el puntero del ratón,
destacando aquellas en las que pasa más tiempo. El autor hace referencia a lo útil de este
heatmap ya que, según la Carnegie Mellon University, hay una correlación del 88% entre
el movimiento del ratón y el del ojo.
¿Por qué te pedimos versión móvil?:
No es necesario que sepas números exactos de estadísticas pero sí suma que sepas
cómo está el estado del arte en diseño web.
Según un estudio realizado por Google, en 2013 el 31% de la población urbana en argentina utiliza
smartphones, dentro de los cuales el 86% de estos realiza búsquedas desde su teléfono
inteligente, y el 65% de estos lo hace todos los días (Google, Our Mobile Project: Argentina, 2013).
Según otro estudio realizado por Google un 57% utilizó el día de ayer al menos 3 pantallas (Google,
El nuevo mundo Multi-screen: El comportamiento del nuevo consumidor multi-plataforma
ARGENTINA, 2013). Las opciones en la encuesta eran: Smartphone; tablet; pc/laptop; televisión.
En el mismo estudio se indica que la televisión se utiliza básicamente para la programación regular
y/o entretenimiento, es decir un sitio web rara vez será visualizada en un televisor, pero sí será
visualizada en una tablet, smartphone y pc/laptop. Dentro de este último dispositivo cabe
destacar la amplia diferencia de tamaño entre monitores. Una laptop tendrá una pantalla de entre
13 y 19 pulgadas, mientras que una PC seguramente tenga entre 17 y 24 pulgadas (si bien se
pueden encontrar más grandes). El diferente tamaño hace que el sitio se visualice de manera
distinta en cada dispositivo y en cada pantalla. Hay algunos sitios que, independientemente del
software con el que se desarrollen, nunca fue tenido en cuenta este flujo de pantallas, por
ejemplo, sitios que se diseñan con un ancho de más de 1200px, que al visualizarse en un monitor
con un ancho de 1024px, este se visualiza cortado y genera cierta tensión al usuario para
desplazarse y encontrar información; o sitios realizados en menor tamaño que aún así, al
visualizarse en móviles o tablets, no se adapta a este y se visualiza con problemas.
Antonio Rigo nos dice que diseñar para web implica cierta transitoriedad en las cosas. (Rigo, 2013)
Las tecnologías están cambiando a los pocos años y el hábito de las personas cambia con estas. Es
así que es necesario diseñar pensando en la adaptabilidad a los distintos dispositivos, es decir,
que el sitio sea responsivo.
Uno de los estudios mencionados anteriormente de Google indica también que las personas
tienen en promedio 17 aplicaciones instaladas en su smartphone y utilizaron al menos 8 en los
últimos 30 días. (Our Mobile Project: Argentina, 2013).
Marco Metodológico:
Para comprender qué es una metodología de diseño de sitios web y la “interdisciplinareidad” que
conlleva la misma veamos un cuadro realizado por Information Architects en 2009, del espectro
de elementos que conforman la experiencia de usuario.
De estos datos que aquí se exhiben podemos hablar de una síntesis cuyos temas nos competan
más a nosotros y los podamos abarcar para el diseño de nuestro sitio.
Otra forma de verlo según Garrett…
Tendencias de diseño
A continuación, detallaremos algunos aspectos que permitirían conectar con
mayor facilidad a nuestro público. Debes pensar esto como una guía de estilos
pero que se conjuga finalmente con tu papel como emisor de tu mensaje y tus
características como diseñador.
Diseño plano
Figura 25
El diseño plano dio inicio a una nueva era en el diseño de interfaces. Bajo esta
modalidad, los gradientes, sombras y elementos que contribuyen a darle a los
objetos un aspecto similar a cómo se verían en la realidad, son reducidos al
máximo dando lugar a un diseño mucho más simple, con colores sólidos e
incrementando la participación de elementos icónicos.
Imágenes de introducción
Las imágenes de cabecera que tienden a ocupar toda la pantalla es un recurso
que se ha ido incrementando a lo largo del último año. Una de las principales
razones de esto es que en internet, los usuarios tienden a asociar más los
productos a través de las imágenes y posteriormente refuerzan su percepción del
objeto a través de información clara y concisa.
Fotografías elaboradas, e incluso videos, que transmiten el espíritu de la empresa
y el producto, son muy bien recibidos por los potenciales c
1 10 Web design trends you can expect to see in 2014
http://thenextweb.com/dd/2013/12 10 Web design trends you can expect to see in 2014
http://thenextweb.com/dd/2013/12/29/10
máximo dando lugar a un diseño mucho más simple, con colores sólidos e
incrementando la participación de elementos icónicos.1
Imágenes de introducción
Figura 26
Las imágenes de cabecera que tienden a ocupar toda la pantalla es un recurso
que se ha ido incrementando a lo largo del último año. Una de las principales
razones de esto es que en internet, los usuarios tienden a asociar más los
avés de las imágenes y posteriormente refuerzan su percepción del
objeto a través de información clara y concisa.
Fotografías elaboradas, e incluso videos, que transmiten el espíritu de la empresa
y el producto, son muy bien recibidos por los potenciales clientes de la marca.
10 Web design trends you can expect to see in 2014. Recabado de
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/10 Web design trends you can expect to see in 2014. Recabado de
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/
máximo dando lugar a un diseño mucho más simple, con colores sólidos e
Las imágenes de cabecera que tienden a ocupar toda la pantalla es un recurso
que se ha ido incrementando a lo largo del último año. Una de las principales
razones de esto es que en internet, los usuarios tienden a asociar más los
avés de las imágenes y posteriormente refuerzan su percepción del
Fotografías elaboradas, e incluso videos, que transmiten el espíritu de la empresa
lientes de la marca.2
2014/3/
2014/3/
Enfoque en el diseño móvil
Figura 27
Con el objeto de crear sitios web que se adapten a todas las plataformas del
mercado, los diseñadores comienzan a trasladar sus esfuerzos en crear plantillas
que adopten los comportamientos propios del uso de dispositivos móviles.
De esta manera, los sitios son mucho más rápidos e intuitivos y mantienen una
unidad estética en cualquier dispositivo en donde se acceda.3
3 10 Web design trends you can expect to see in 2014. Recabado de
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/
Mayor utilización de la barra de scroll
Con la llegada de los dispositivos móviles y los sitios multi
“scrollear” hacia abajo para ver contenidos se incrementó de manera significativa.
Esto llevó a que varios sitios opten por incluir sus secciones en una sola página de
manera que le ahorre al usuario la necesidad de esperar a que se carguen la
página para acceder a la información.
4 10 Web design trends you can expect to see in 2014
http://thenextweb.com/dd/2013/12/29/10
Mayor utilización de la barra de scroll
Figura 28
Con la llegada de los dispositivos móviles y los sitios multi-plataforma, el hábito de
hacia abajo para ver contenidos se incrementó de manera significativa.
Esto llevó a que varios sitios opten por incluir sus secciones en una sola página de
manera que le ahorre al usuario la necesidad de esperar a que se carguen la
a información.4
10 Web design trends you can expect to see in 2014. Recabado de
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/
plataforma, el hábito de
hacia abajo para ver contenidos se incrementó de manera significativa.
Esto llevó a que varios sitios opten por incluir sus secciones en una sola página de
manera que le ahorre al usuario la necesidad de esperar a que se carguen la
2014/3/
Paleta de colores reducida
Con la tendencia de utilizar diseños minimalistas, los colores no pueden ser una
excepción. A lo largo de los últimos años, internet ha sido testigo de la evolución
de diseños con paletas de color
mismos al punto de utilizar menos de 5 colores en la paleta. De esta manera, se
ha llegado a utilizar un solo color para captar la atención del usuario y transmitir
información mientras que el resto queda
5 10 Web design trends you can expect to see in 2014
http://thenextweb.com/dd/2013/12/29/10
Paleta de colores reducida
Figura 29
Con la tendencia de utilizar diseños minimalistas, los colores no pueden ser una
excepción. A lo largo de los últimos años, internet ha sido testigo de la evolución
de diseños con paletas de colores extensas a la reducción más significativa de los
mismos al punto de utilizar menos de 5 colores en la paleta. De esta manera, se
ha llegado a utilizar un solo color para captar la atención del usuario y transmitir
información mientras que el resto queda reducido al blanco y negro.
you can expect to see in 2014. Recabado de
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/
Con la tendencia de utilizar diseños minimalistas, los colores no pueden ser una
excepción. A lo largo de los últimos años, internet ha sido testigo de la evolución
es extensas a la reducción más significativa de los
mismos al punto de utilizar menos de 5 colores en la paleta. De esta manera, se
ha llegado a utilizar un solo color para captar la atención del usuario y transmitir
reducido al blanco y negro.5
2014/3/
Contenido simplificado
Con la inmediatez y el fácil acceso a cualquier tipo de información, los usuarios
han sufrido, inconscientemente a lo largo de los años, un incremento en los
tiempos de atención sobre los
tenga que reducirse al máximo, desafiando a los equipos de redacción a saber
distinguir los datos más relevantes de un producto y desarrollarlos de manera que
puedan captar la atención de su público y llamarle
6 10 Web design trends you can expect to see in 2014
http://thenextweb.com/dd/2013/12/29/10
Figura 30
Con la inmediatez y el fácil acceso a cualquier tipo de información, los usuarios
han sufrido, inconscientemente a lo largo de los años, un incremento en los
tiempos de atención sobre los contenidos. Esto conlleva a que la información
tenga que reducirse al máximo, desafiando a los equipos de redacción a saber
distinguir los datos más relevantes de un producto y desarrollarlos de manera que
tención de su público y llamarles la acción.6
10 Web design trends you can expect to see in 2014. Recabado de
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/
Con la inmediatez y el fácil acceso a cualquier tipo de información, los usuarios
han sufrido, inconscientemente a lo largo de los años, un incremento en los
contenidos. Esto conlleva a que la información
tenga que reducirse al máximo, desafiando a los equipos de redacción a saber
distinguir los datos más relevantes de un producto y desarrollarlos de manera que
2014/3/