El diseño visual en los servicios digitales

De Casiopea


TítuloEl Diseño y su influencia en el medio de trabajo
Tipo de ProyectoProyecto de Curso
Palabras Claveensayo
Período2014-
Del CursoPresentación 4º DG 2014,
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Christopher Fattori
ProfesorKatherine Exss, Herbert Spencer

Resumen

El presente ensayo hace referencia a la relevancia del diseño visual y a las técnicas de su aplicación luego del trabajo de arquitectura y diseño de información en el desarrollo de los servidos digitales.

Principio base de una correcta visualización

Gráfico que explica las fases de un procesos de desarrollo de web software o web de hiperlink [1]

En la primera fase de desarrollo de un servicio digital los involucrados deben obtener y recoger una gran cantidad de información, para poder organizar y concretar el proyecto de servicio digital de buena manera es necesario organizar la información recogida por los involucrados en el proyecto, este importante rol está a cargo del arquitecto de información, experto en esta disciplina.[2]

En el libro Information Architecture for the Wold Wide Web (Rosenfeld y Morville, 1998)[3] definen a la Arquitectura de Información como:

La combinación de la organización, etiquetado y los esquemas de navegación dentro de un sistema de información El diseño estructural de un espacio de información para facilitar las tareas de acabado y acceso intuitivo a los contenidos. El arte y ciencia de estructurar y clasificar sitios web e intranets para ayudar a los usuarios a encontrar y administrar su información. Una disciplina emergente y una comunidad práctica enfocada en traer los principios de diseño y arquitectura a los entornos digitales

Más que nada, es el trabajo con el contenido, en la construcción de un lenguaje. Tiene que ver con la comunicación entre el servicio, el dispositivo y las personas.

Se diseña para hacer más fácil las cosas a las personas. Por lo mismo, es necesaria la organización para que la información para que los contenidos sean accesibles y ejecutables.

El objetivo del arquitecto entonces es la facilitación de la información pensando en el usuario, sus necesidades, en su experiencia en el uso de algún servicio digital.

Dentro de este campo de organización de información Benjamín Fry (2008)[4] en su libro Visualizing Data nos presenta sus metodología de siete pasos para la visualización de datos.


Archivo:Interacción 7 etapas Ben Fry.jpg
Esquema de los siete pasos, los cuales pueden ser iterativos

Si bien no se trata de un manual estos pasos son una guía para obtener una visualizaciones de datos, bien se puede aplicar al desarrollo de un servicio digital:

  • Paso uno: Adquirir datos

Se trata de la obtención de información, archivos o redes desde una fuente confiable, proveniente de algún organismo oficial, instituto de estadística, estudio académico, etc.

  • Paso dos: Analizar

La información recopilada es organizada y categorizada, para que los datos adquirieran una estructura. Paso tres: Filtrar Parte de la información es eliminada considerada innecesaria para nuestro propósito.

  • Paso cuatro: Extraer

Aplicación de técnicas de minería de la información, búsqueda e identificación de patrones.

  • Paso cinco: Representar

Aquí se determina una forma básica que tomará el conjunto de datos para su visualización.

  • Paso seis: Refinar

Se afina la representación visual mediante métodos de diseño gráfico para clarificar la información, aumentar la atención sobre datos particulares (estableciendo jerarquías), o modificando atributos (como el color) para contribuir a la legibilidad.

  • Paso siete: Interactuar

En este paso se añaden recursos de interacción.

Desarrollo de información necesaria y experiencia de usuario

En estos pasos los primero y fundamental, dentro de la metodología de Benjamín Fry, como en el proceso de desarrollo de un servicio digital, es obtener información fidedigna, en este caso de los usuarios a los cuales el diseño está enfocado. Para obtener datos fieles de los usuarios se requiere de recursos que nos permitan saber qué es lo que rea´mente necesitan, o quieren o esperan obtener. Es necesario ponerse en el lugar del usuario para saber como resolver ciertos problemas. Para esto se han creado distintas herramientas como es el caso de los Modelos Mentales.

Para el estudio de usuario es importante saber qué tipo de investigación y técnica es buena para qué. Existen 3 tipos de investigación de usuario:

Preferencial: el mas común método de investigación de cliente. determina como el producto será aceptado o preferido por la gente. Evaluativa: Es un método para arreglar o perfeccionar el producto. el uso de este método es para cosas específicas. Generativa: explora el espacio mental de alguien mientras hace algo. este tipo de investigación es conducido después de la fase de ideas. se enfoca en un nivel mas alto que la investigación evaluativa, preguntando el propósito final de cada herramienta usada en lugar de cuan especifico es aplicada.permite a los investigadores crear un marco basado en datos de los participantes.

Los modelos mentales permiten construir estructuras para identificar problemas y desarrollar soluciones a estos problemas

Los Modelos Mentales (Indi Young, 2008)[5] son una herramienta creada por la experta en experiencia de usuario Indi Young, la cual establece que "la forma más profunda de entender a la otra persona es la empatía [que] implica un cambio de observación de la forma en que tú te ves en el exterior, a imaginar lo que se siente al ser tú en el interior.” y que a través de su vasta experiencia en el diseño de experiencia de usuario la creación de los modelos mentales "Modelos mentales dan un profundo conocimiento de las motivaciones de la gente y de sus procesos de pensamiento, junto con el paisaje emocional y filosófico en el que operan” adhiriendo que nos ayudan a ilustrar una profunda comprensión del usuario, alinear las soluciones, para lo cual crear un modelo mental es necesario hablar con la gente acerca de lo que están haciendo, buscar patrones.


ejemplo de modelo mental. Observación de las actividades y necesidades de las personas

La construcción de modelos mentales aplica varias técnicas de estudio de experiencia de usuario los cuales son:

  • diarios: entregarles un diario a grupo de usuarios que escriban sus experiencias sobre lo que hacen, entrega información de las conductas en la que hay que indagar para nuestro modelo mental.
  • visita de campo: visitas de campo realizadas por un investigador profesional producen un conocimiento mucho más profundo, y todos los temas dentro de un ámbito de aplicación son susceptibles de ser cubiertos. las notas en tercera persona se convierten a primera persona y así se obtiene un solido modelo mental.
  • personas y escenarios: en la creación de “personas” el modelo mental se enfoca en el objetivo final(lo que la persona desea lograr) y objetivo de vida (las razones por las que las personas quieren lograr eso) “escenarios”:una vez que tenga un modelo mental, que sin duda puede escribir escenarios basados ​​en las tareas significativas para su negocio.

La investigación de los modelos mentales ocupa un lugar en el conjunto de técnicas después de la recogida de datos del usuario y antes de los productos y los conceptos de diseño de interacción. Su uso como una hoja de ruta de planificación es a larga vida. Puede hacer referencia al mismo modelo mental de varios proyectos en el tiempo.

La metodología para la construcción de procesos mentales se basa principalmente en la tormenta de ideas, definición de patrones, realizado por el equipo encargado de esto. Luego gestión de entrevistas y llegar a los usuarios reales y tener una conversación con ellos, recogiendo su perspectiva y vocabulario, es ponerse en el lugar del usuario. Analizar todas esas conversaciones y hacer composiciones con ellos en un diagrama llamado "el diagrama de modelo mental”, traficado primero por card sorting entre los miembros del equipo para luego ordenarse en un programa computacional.

Arquitectura de la información en la fase de proceso de desarrollo

La función de todo servicio, ya sea digital o no es que este sea fácil de entender y utilizar, para lo cuál todos los miembros del equipo desarrollador están involucrados.

Fase inicial

En la fase inicial se realiza un estudio detallado de los usuarios potenciales que tendrá la aplicación, para conocer sus características, necesidades y expectativas. Se clasifican y organizan todos los contenidos de información que se usarán. Se aplican técnicas de recopilación de información como la entrevista, la encuesta y otras técnicas cuantitativas como el Card Sorting y el Análisis de Secuencia.

Consolidación

En la etapa del proceso de desarrollo de software en la que el personal se centra en analizar qué hará y cómo lo hará, así como en la que modela el sistema a construir y define la arquitectura del mismo especificando la estructuración de los contenidos de información e introduciéndose en el diseño inicial del producto.

En esta fase se hace la definición general. Se asignan los nombres o etiquetas más acertados y relacionados entre sí a cada sección, conformando el esquema de contenidos definitivo. Se definen las directrices generales de la estructura y organización de la información.

Se definirán además las normas de representación de la información, y finalmente se ubicarán los elementos de forma gráfica en las pantallas de la aplicación.

Validación

Terminado todo el trabajo de arquitectura de información, una vez que el equipo desarrollador genera el primer prototipo del proyecto -generalmente un prototipo funcional previo al producto final-, éste es sometido a una revisión minuciosa, para evaluar que efectivamente cumplirá con las expectativas creadas.

El equipo de Arquitectura de Información revisa si efectivamente se están cumpliendo los objetivos, haciendo para ello pruebas con usuarios que permiten, además, anticipar el comportamiento real del producto y el nivel de satisfacción del usuario.

Desarrollo de la capa Visual del servicio digital

A lo largo del proceso de desarrollo del servicio digital se han utilizado distintas técnicas y modelos de visualización a las distintas etapas. Como ya se han mencionado se ha ocupado un modelo de diagrama visual para los usuarios y los requerimientos del sistema, los modelos mentales, para el desarrollo de la arquitectura se han utilizado el lenguaje garrett.

Caso de observación: Wiki Casiopea

Uno de los textos que sirve como guía de aplicación de recursos para realizar visualizaciones es Envisioning Information (Edward Tufte, 1990)[6] En el cual a través de 5 capítulos nos presenta una gama de ejemplos de decisiones de diseño, análisis y críticas sobre tipos de representación de datos. Si bien el texto hace referencia al uso de recursos gráficos para elaborar diseños que rompan con la bidimensionalidad del soporte creando en este más dimensiones de lecturas, también se puede apreciar que aquellas observaciones son aplicables a los diseños de servicios más minimalistas centrado en la entrega pura de información como es el caso de la Wki Casiopea de la e[ad].

Micro/macro lectura

Es el tema abordado en el segundo capítulo del libro, en el cual Tufte reconoce en el observador la capacidad que tiene para distinguir y captar la información.

"Para clarificar, aumenta el detalle”

Es decir, que para que la información brindada sea más fácil de comprender es necesario ir acumulando la información en estructuras más grandes, ordenadas jerárquicamente organizando la información

Ejemplo de micro/macro lectura en la lista de resultados de la busqueda en Wiki Casiopea

En esta imagen se observa cómo el sitio entrega el control de la información a los lectores, y no a a través del motor de búsqueda. Le permite reconocer la gran cantidad de coincidencias que posee su búsqueda a la vez que le permite leer en qué páginas y en qué contexto ha sido aplicada la palabra que busca.

Debido a que el ser humano diariamente se enfrenta a la distinción de información es natural que los lectores del sitio puedan navegar a través de sitios que brinden este tipo de complejidad.

Separación y Capas

Se trata en este asunto la separación y distinción de la información a través de la visualización de información en distintas capas, distinguiendo visualmente distintos aspectos de la información.

"Cuando observemos desorden y confusión en una visualización, se debe a fallos del diseño, no a las características de la información"

Los elementos acumulados en una superficie siempre reaccionan entre sí generando tramas, luces y sombras, en el caso del texto se genera lo mismo, por lo que hay que tener cuidado en la organización de los blancos, los espacios entre los elementos, pues se generan errores y confusiones cuando los limites de los elementos dispuestos no está claramente definida.

Ejemplo de separación y distinción de información

Siguiendo con el caso se puede observar como el sitio posee claramente 3 secciones definidas:

  1. en la parte superior un menú del usuario.
  2. en la parte izquierda un menú general con sus respectivas secciones.
  3. en la sección central el gestor de búsqueda, con sus distintas opciones y resultados.

En el uso de tipografías del sitio también se distingue la jerarquización de información.

jerarquización de información
distinción de textos: enlaces
distinción de textos: titulos

Color e información

El color posee una clara propiedad para comunicar, pero el uso del color aplicado a la visualización de información es un ejercicio complejo, pues hay que poner el color correcto en el lugar correcto.

"Los usos fundamentales del color en el diseño de la información (son): etiquetar (color como sustantivo), medir (unidad color), representar o imitar la realidad (representación del color), para animar o decorar (belleza del color).”

Esto se observa en la aplicación del rojo en los textos de enlace de los sitios, un color fuerte e institucional, color aplicado en la e[ad], negro para textos relevantes de segunda importancia y gris para el texto común.


Conclusión

Para el desarrollo optimo de un servicio digital es necesario partir con un buen contenido partiendo desde la base de obtener los datos necesario de loo que quieren los usuarios para cualquier servicio digital, en el cual los encargados deben pensar en todas las formas posibles para facilitar las tareas que los usuarios requieran. Para ello es necesario usar técnicas de investigación, dependiendo de qué tipo de proyecto y envergadura, cómo la creación de diagramas de modelos mentales, visualización de información valiosa para el equipo de trabajo, para a partir de esta crear un servicio optimo utilizando las técnicas de recopilación de datos, refinamiento y representación en maquetas interactivas para finalizarlo con los recursos que Tufte sugiere para la representación de datos de información.

bibliografía

  1. http://www.jjg.net/elements/pdf/elements.pdf
  2. http://www.nosolousabilidad.com/articulos/ai_cc_informacion.htm
  3. Rosenfeld, Louis y Morville, Peter (1998). Information Architecture for the Wold Wide Web. Cambridge: O'Reilly, 1998.
  4. Fry, B. (2007). Visualizing Data: Exploring and Explaining Data with the Processing Environment. " O'Reilly Media, Inc.”.
  5. Young, I. (2008). Mental models: Aligning design strategy with human behavior. Rosenfeld Media.
  6. Tufte, E. R. (2006). Envisioning information. 1990. Visual Explanations: Images and Quan.