MATERIAL DE APOYO PARA PRESENTACIÓN DE LABORATORIO … · La primera es la ya mencionada...

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


incrementando la participación de elementos icónicos.1

Imágenes de introducción

Figura 26




avés de las imágenes y posteriormente refuerzan su percepción del

objeto a través de información clara y concisa.


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/





avés de las imágenes y posteriormente refuerzan su percepción del


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


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.



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.



a información.4



plataforma, el hábito de

hacia abajo para ver contenidos se incrementó de manera significativa.



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



Paleta de colores reducida

Figura 29



de diseños con paletas de colores extensas a la reducción más significativa de los



información mientras que el resto queda reducido al blanco y negro.

you can expect to see in 2014. Recabado de




es extensas a la reducción más significativa de los



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



Figura 30



tiempos de atención sobre los contenidos. Esto conlleva a que la información



tención de su público y llamarles la acción.6





contenidos. Esto conlleva a que la información



2014/3/

MATERIAL DE APOYO PARA PRESENTACIÓN DE LABORATORIO … · La primera es la ya mencionada...

Documents

Transcript of MATERIAL DE APOYO PARA PRESENTACIÓN DE LABORATORIO … · La primera es la ya mencionada...