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:

Los wireframes son los primeros estados de los prototipos. En diseño web, a la hora de construir un sitio no podemos pensar al principio del desarrollo en los últimos detalles, se construirán diferentes modelos, siendo este, el primero, un esquema de la organización de los componentes. Los wireframes pueden variar en fidelidad, ajustándose más o menos al resultado final que hay que obtener, van desde simples sketches hasta documentos más acabados en los que habremos tenido en cuenta el tamaño concreto de los elementos, su posición justa relativa a la rejilla que hayamos creado, la disposición de textos, iconos y espacios en blanco, la alineación de los componentes…

Los wireframes nos ayudan también a la creación de plantillas, ya que el contenido de los elementos no aparece en esta versión de los prototipos independientemente de su fidelidad, desde este podremos crear, en nuestro caso, diferentes apartados de noticias con la misma estructura ayudando a crear así consistencia en el sitio web.

Ilustraremos esto con un ejemplo, el de la web del periódico de la ‘Opinión de Zamora’:

“The best way to predict the future is to invent it” frase de Alan Kay (Murray, 2011), y primera frase que invita a reflexionar sobre cómo queremos inventar el futuro.

He seleccionado el medio de comunicación informativo Wired. El nombre de la revista significa en castellano “conectado”, y el objetivo central de su contenido es presentar cómo la tecnología puede afectar a la cultura, la educación, la economía y la política. (Wikipedia)

Mensualmente se publican artículos en inglés que apoyan la creencia de cómo los avances de la ciencia y tecnología ayudarán a cumplir un ideal utópico. La revista cuenta con los diferentes formatos requerido (físico, sitio web y aplicación) y la edición que se estudió es la de junio 2022.

Se ha realizado un wireframe en el programa Figma, de la página de inicio del sitio web de wired.com. con el objetivo de entender la estructura general del sitio web. Gracias a este ejercicio se ha determinado una grilla de 12 columnas, con un espaciado de 24px y un margen de 104px entre todo el sitio web, con excepción al menu de navegación.

Mi reflexión sobre este ejercicio, es la capacidad que tienen los medios de comunicaciones, es cómo el capitalismo de la vigilancia se aplica en este tipo de formatos, dando la percepción al usuario de un servicio «freemium» pero en realidad dos módulos recuerdan al usuario el registrarse para ver el contenido completo desde la página de inicio. Luego al ir a segundas y terceras páginas, la opción de pagar la membresía se vuelva más insistente.

Referencias

Murray, Janet H. 2011. Inventing the Medium : Principles of Interaction Design As a Cultural Practice. s.l. : MIT Press, 2011. 9780262298308.

Wikipedia. Wired. Wikipedia. [En línea] [Citado el: 14 de noviembre de 2022.] https://es.wikipedia.org/wiki/Wired.

[Online] [Cited: 11 17, 2022.] http://design-toolkit.recursos.uoc.edu/es/el-capitalismo-de-la-vigilancia/.

Para esta parte de la actividad se ha escogido la versión móvil de una noticia concreta del periódico La Voz de Galicia:

La elaboración del siguiente wireframe se ha realizado con el programa Justinmind. Como se puede apreciar en el prototipo y en la muestra de extensión de la pantalla, la interfaz es simple e intuitiva. Al tratarse de una versión móvil, destaca la distribución del contenido de la noticia en bloques con una alineación del texto a la izquierda, así como el uso de contenido gráfico en imágenes e iconos. Estos tres constituyen los factores principales que caracterizan este diseño digital:

Para la realización de la tercera parte de la práctica Media: Medios tradicionales/Medios digitales, he elegido la versión web del periódico El País. Se ha realizado un wireframe de la primera parte de su portada.

Tiene un ancho de 1200 px. y una estructura de 12 columnas, dejando los márgenes para el emplazamiento de publicidad.

Para esta parte de la PAC he escogido la pantalla de Inicio del portal online web del canal 20 minutos.

He escogido este ya que además de ser la entrada del medio, disponía de varios recursos digitales que podían ser interesantes a la hora de realizar la práctica, íconos, menús desplegables, submenús, publicidad, noticias principales, secundarias. Y fotografías y vídeo.