DISEÑO CENTRADO EN EL USUARIO: INTERACCIÓN Y VIDEOCOMUNICACIÓN
Con tercera práctica de la asignatura hemos tratado de empatizar con los usuarios y ofrecerles los estilos de interacción más adecuados estudiando los mecanismos que dirigen las actividades de las personas: atención, procesamiento de información y toma de decisiones.
Para ello, se ha llevado a cavo la investigación de los elementos clave de la comunicación en un contexto de relaciones sociales a distancia (por medio de videollamadas). Esta investigación se comienza con un estudio del perfil del usuario, construcción de una encuesta y análisis y síntesis de los resultados. Una vez superada la encuesta pasamos a estudiar el estado del arte para conocer los productos y servicios existentes el mercado. Una vez analizadas las características de los competidores a partir del benchmarking.
Una vez recogida toda esta información, es momento de estructurarla para poder encontrar los requerimientos de usuario y de diseño, para ello utilizaremos la técnica del Value Proposition Canvas.
La propuesta de Canvas se puede observar aquí abajo:
Tras haber definido los requisitos del producto en la actividad anterior, es el momento de definir la arquitectura de la información y la estructura de la interacción del producto o servicio. Comenzaremos con la organización y el etiquetado de los contenidos. La fase de arquitectura de la información aborda cómo organizar los contenidos que formarán parte del sistema para facilitar su utilización por parte de los usuarios. Definiremos los contenidos
que tendrá el producto para, a continuación, organizar y etiquetar la información.
Una vez elaborado el inventario de contenido, se ha llevado a cabo un card sorting. Esta prueba se realizó con 6 participantes con diversos perfiles que han organizado el contenido de la manera más intuitiva para ellos mismos. Con los resultado de esta prueba, se ha llevado a cabo un análisis donde se han estudiado las tendencias de los usuarios y, finalmente, se ha elaborado el árbol de contenidos final más apropiado.
En primer lugar, se ha aproximado unas 5 categorías generales que engloben todo el contenido del sistema teniendo en cuenta, por un lado las respuestas de los participantes en el card sorting y, por otro, la teoría de Miller (7±2).
Después, se han analizado la matriz de similitud, dendograma, y el cluster 3D con la finalidad de extraer conclusiones entre las respuestas afines de los participantes.
Siguiendo estas tendencias e integrándolas con las conclusiones obtenidas de las similitudes entre las arquitecturas de la información de los usuarios, se ha elaborado un árbol de contenidos final del sistema que podemos ver a continuación:
DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ GRÁFICA (1/2)
Para el desarrollo de esta práctica se he debido diseñar una interfaz de página para acortar enlaces largos en otros más cortos. Ha sido muy gratificante poder desempeñar todo el trabajo desde cero. Se ha investigado acerca del estado del arte actual, los colores propios de la marca y finalmente se ha diseñado el prototipo que podemos ver a continuación.
El prototipo está diseñado fundamentalmente para dos breakpoints específicos (Escritorio y Móvil), por lo que todos los elementos y páginas son responsive. A continuación, podemos visualizar algunos de los componentes del prototipo en Figma, así como su diseño tanto para escritorio como para móvil:
A continuación, podemos ver el video del funcionamiento y acceder al enlace del prototipo escritorio y móvil.
También dejo por aquí el enlace al video tanto en WeTransfer como en Youtube.
Para la segunda actividad de la asignatura de diseño de interacción, nos hemos familiarizado con el diseño de interacción en un contexto socio cultural. También hemos aprendido acerca de la historia del diseño, como afecta a los usuarios y su poder de transformación e influencia sobre ellos. El diseño, al fin y al cabo, conlleva una gran responsabilidad y es nuestro deber como diseñadores la realización de buenos diseños para futuros usuarios e interactores.
Después de analizar los tres formatos disponibles de un medio de comunicación (periódico «El País» en mi caso), se ha llevado a cabo un análisis tanto de los elementos de organización visual como de los principios relacionados con el diseño de interacción. Una vez analizada la información se ha clasificado en forma de tabla, evaluando los dos formatos digitales (web y app) y el formato físico en papel, y se han obtenido determinadas conclusiones.
La tercera parte de esta actividad consistía en la construcción de wireframe de baja fidelidad de una de estas páginas o pantallas. En mi caso, he escogido la pantalla principal o home de la versión de escritorio del periódico digital. En ella, se distinguen las diferentes noticias destacadas del cada día, estructuradas y alineadas de manera minimalista y clara. A continuación, se puede visualizar mi boceto del wireframe de la página principal:
NARRA TIVA VISUAL. OBSERVACIÓN, DOCUMENTACIÓN Y ANÁLISIS
Para el primer proyecto de esta asignatura, he escogido la narrativa visual de los pasos necesarios para cocinar una pizza de burrata y pesto. Para ello, se han tenido en cuenta los recursos de la asignatura, donde he aprendido a jerarquizar la información y exponerla de manera visual y clara.
En primer lugar, se grabó un film de la receta entera, desde un plano cenital, donde podían verse todos los movimientos de las manos realizados por la persona que está cocinando. Después, se hizo una selección de los frames más importantes y, por ultimo, se organizaron estos frames en forma de narrativa visual, combinándolos con dibujos vectoriales propios realizados en Illustrator.
A continuación, os dejo el documento que contiene la presentación final de la actividad:
Con esta práctica he conseguido aprender un montón de cosas sobre cómo funcionan las interfaces gráficas, dificultades, trucos…. La verdad es que me lo he pasado realmente bien deconstruyendo, fijándome en los detalles, aprendiéndome la página de memoria, para después ser capaz de construir una identidad gráfica en forma de UI Kit y, al final, directamente un prototipo de la página web.
En primer lugar, estudié los diferentes breakpoints, su funcionamiento, los elementos que entraban en juego a la hora de construir la web y también los elementos que se repetían.
Así fui capaz de construir un sistema de diseño que contiene desde los estilos tipográficos hasta componentes, pasando por paleta de colores y retículas principales. A continuación, algunas imágenes descriptivas:
Con todos estos elementos y estilos, creamos los prototipos de los tres breakpoints: escritorio, tablet y móvil.
Por último, se han construido los diferentes flujos para el funcionamiento adecuado de la aplicación, añadiendo utilidades a los componentes y incluyendo los scrolls necesarios.
A continuación, podemos ver el video del funcionamiento y acceder al enlace del prototipo móvil, tablet y escritorio.
También dejo por aquí el enlace al video tanto en WeTransfer como en Youtube.
Para la entrega de bienvenida de la asignatura de Dibujo y Pensamiento Visual he realizado la técnica de SCAMPÊR con un objeto cotidiano (bolígrafo Bic) para diseccionar y jugar con elemento y obtener otros. Podéis ver el resultado a continuación:
En esta parte de la entrega de la PEC.01 he querido analizar el recorrido que realizo todos los días a la hora de la comida en el trabajo, desde que salgo por la puerta de mi planta hasta que me como la comida comprada en el super y vuelvo de nuevo, analizando todas las interacciones que realizo por el camino.
Lo he separado en 7 fase fundamentales y en cada una de ella se realiza más o menos una interacción que marcaré en negrita. Las fases son las siguientes:
1. Llegar hasta la puerta de la planta. Suspendo el ordenador, me levanto de mi puesto, cojo la tarjeta de identificación y me dirijo hacia la primera puerta por la que tengo que pasarla. La pongo en el sensor y veo la luz verde (pienso: puedo salir). En la esquina izquierda de la puerta se acciona el mecanismo que la abre y salgo a los ascensores. (Es necesario aclarar que este sistema no sirve como fichaje, simplemente funciona como identificador, para que las puertas solo se abran a trabajadores de esta planta por motivos de seguridad).
2. Bajar a la planta 0.Llamo al ascensor (la interacción se realiza a través de un botón) y hay unas flechas encima de la puerta que se iluminan con el sentido (arriba o abajo) que lleva el ascensor. Espero a que llegue uno que baje y entro (pienso que puedo encontrarme con una persona o no, pero eso no depende de mí).
3. Fichaje en tornos. Llego a la planta 0 donde se encuentran los tornos donde tengo que fichar para contabilizar los minutos de comida. Paso la tarjeta por el lector, los tornos tienen una pantalla donde aparece mi nombre completo y apellidos y la hora de salida una vez has acercado la tarjeta (pienso en la hora que es ahora y la hora a la que tengo que volver, el tiempo justo que tengo para comer).
4. Camino al supermercado. Salgo por la puerta del edificio y después de unos 5 minutos caminando llego al súper. Durante este camino, los pensamientos se centran en qué voy a comer hoy, normalmente. También intento relajarme un poco ya que es mi hora de descanso, evitando los pensamientos sobre el trabajo.
5. Compra de la comida. Elijo la comida del día en el supermercado, elijo las cajas de autoservicio porque suelen ir más rápido. Estas cajas tienen una pantalla táctil y un lector de código de barras. Paso los productos por el lector y automáticamente puedo ver en la pantalla una lista con todos ellos, su precio y el total de la compra. En la interacción con la pantalla tengo que finalizar la compra eligiendo el modo de pago (decido si quiero pagar con efectivo o con tarjeta), antes me pregunta si tengo tarjeta de fidelización del súper (pienso que quizás debería hacérmela) y una vez pasada por el lector pago con mi teléfono móvil (ya que sacar el móvil en estos momentos me resulta más cómodo que encontrar la cartera donde tengo la tarjeta). La máquina de autoservicio imprime mi ticket de compra y salgo del supermercado.
6. Comer. Decido si me quedo a comer en el súper o voy a comer al parque. Esta decisión depende de diversos factores como el tiempo que haga ese día o si alguien me acompaña a comer, por ejemplo.
7. Camino de vuelta. De vuelta a la oficina se realizan las tres interacciones definidas anteriormente de nuevo, pero en sentido inverso (primero el fichaje en el torno, después ascensor y, por último, lectura de tarjeta para que se abra la puerta de mi planta).
Una de las interfaces con las que más interactúo y que me parecen más eficaces en el ámbito de su diseño es la de la aplicación Spotify. Dejando a un lado la capacidad para almacenar y estructurar los datos e información (y hacer recomendaciones acordes a tus gusta), cosa que me fascina, también me llama mucho la atención en cuanto a diseño de interfaz.
Todos los datos están bien estructurados, es fácil encontrar canciones o álbumes nuevos dependiendo del género, estado de ánimo, etc… la distribución de la información es completamente visual, lo que hace muy sencillo encontrar lo que buscar de unas pocas pasadas. Además, creo que han conseguido, con las últimas actualizaciones, una gran armonía visual en cuanto a colores y formas orgánicas.
Por otro lado, en contraposición a todo esto, diariamente me enfrento a una de las interfaces menos intuitivas y visualmente agradables. Esta es la interfaz de la intranet de la empresa en la que actualmente trabajo (que es absolutamente un caos).
La información está mal distribuida, tenemos íconos y fotos pixeladas, ninguna armonía de color… en fin, para mí, un caos absoluto para los tiempos en los que vivimos.
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.