Michell Díaz Quilaqueo: Formas de Conocer

De Casiopea
Michell Díaz Quilaqueo: Formas de Conocer


TítuloMichell Díaz Quilaqueo: Formas de Conocer
Tipo de ProyectoProyecto de Taller
Palabras Claveinteracción
Período2021-2021
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2021
CarrerasDiseño, Diseñ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., Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Michell Diaz
ProfesorHerbert Spencer, Renee Rodo

Jueves, 1 de abril de 2021

Observaciones iniciales

Parto pensando en objetos que mas utilizo, buscando relacionarlas con lo hablado en clase, aquí es donde aparecen varias directrices a seguir, pues el mundo de la interacción objeto-humano se empieza a ampliar de un modo quizá inexplicable, es por ello que me enfoco en aquellas cosas que me doy cuenta en primera instancia, asumiendo que no estoy viendo todo lo que debería poder ver. Parto entonces pensando en la funcionalidad del computador, que si bien es un ente estático, este cumple una tri función si lo comparamos con las relaciones expuestas, pues es algo que en parte es una extensión física de mi, a la vez es algo que funciona por si mismo y a su vez es algo que termina siendo parte de mi inconsciente, así que partiendo de esta base es de donde empiezo a pensar hacia donde quiero dirigir mis observaciones.

Relaciones interactuando con lo observado

Para ello entonces empiezo a hacer una serie de anotaciones sobre la utilización no solo mía con el objeto si no también pensando en como alguien más ve el uso de un objeto y si es consciente de que este en si mismo se ha vuelto una parte de su propio cuerpo.

Así es como lo primero que veo es el interior de un auto, lo cual es algo imprescindible en algunas cosas, este contiene en si mismo un montón de accionables que están a destiempo e incluso no siempre se llegan a utilizar, así podría decirse también que el auto no solo es uno con un humano, pues este puede contener hasta 4, siendo así una multi extensión?.

"El uso de un auto se vuelve inconsciente cuando ya es aprendido, así como andar en bicicleta, las extremidades propias se vuelven uno con el auto"
"Así el auto es un espacio que da múltiples interacciones a corto y largo periodo, habiendo una extensa cantidad de botones y accionables como otras (manubrio, palanca) que normalmente no están en reposo

Sobre la extensión visual, me percato que dentro de un auto los ojos también se vuelven extensiones o bien podría decirse que la vista es aquella que se extiende al utilizar los retrovisores, pues ahí es donde se genera una interacción y no así con la ventana frontal, llegando a un punto de inconsciencia de estos retrovisores, pues se asume que siempre estarán allí como extensores de vista, generando entonces alrededor de 3 puntos visuales extras

"Los retrovisores se transforman en extensiones de la vista (3) generando múltiples modos de ver una misma cosa / esquema de la proyección de la vista

es entonces que me pregunto ¿Las 3 relaciones pueden coexistir en un mismo objeto y en el modo de relacionarse?

Relaciones de Hermenéutica (humano-tecnológico)

Interpretación del código/lenguaje que requiere de una activación de la persona, así como una calculadora, asi esto ayuda a la liberación de espacio mental del humano, pues es simplificado por la herramienta que traduce aquello que se requiere resolver.

  • Smartphones
  • IA
  • Computación (mundo)
Multirelacion de los objetos, el computador es algo que utilizo en plena inconciencia, asumo que ya es una parte de mi y a su vez este mismo es autónomo, pues mientras yo trabajo en el, este realiza otras tareas en segundo plano que ya no son controladas por mí, hay una autorregulación para el funcionamiento.

Relaciones de extensión corporal

Es aquello que llega a un punto de fusión con el humano, se hace parte de sí, ayudando a la mejora de algunos que haceres del humano o facilita otras necesidades, así como lo visto con lo del auto, pasa también con una bicicleta, con un teclado, o con un mouse, en mi observación pienso también que la IA además puede ser una propia extensión de mi, pues puede comunicarse con otras personas sin yo tener que tocar nada, o no necesariamente, pues puede realizarse solo por medio del habla, dando un código inicial, la ia lo recibe, entrego el mensaje y esta se hace cargo del resto, generando entonces una extensión en completitud mía

La comunicación por medio de un IA, provoca y da espacio a una suerte de omnipresencia, pues es capaz de "hablar" o accionar cosas por mí, dejando la opción a 3 formas de extender estas presencias
Las coordenadas, la forma de traspasar por medio de un objeto aquello que se imagina, aun cuando este objeto deja de formar parte de lo tradicional y se vuelve digital, etc. el lápiz como extensión del cerebro

Otros ejemplos de extensión :

  • Controles
  • Mouse
  • Teclados
  • Auto
  • Bicicletas
  • Lápices

Relaciones de alteridad

"agente inteligente que trabaja por si mismo" Aquellos objetos que funcionan por medio de activación y pueden prolongar su duración por si mismos o tienen una actividad predeterminada al ser activados,

La convivencia de lo tecnológico en su interactuar parte o se acciona por medio de una sucesión de botones (ordenes) que dan pie al inicio de la acción

Otros ejemplos son

  • Lavadora
  • Interruptores
  • Refrigerador

Sobre la Experiencia

Cada interacción con un objeto puede relatar o dar cuenta de que se puede vivir un experiencia, cuando la utilización del objeto contiene un recorrido de inicio a fin, pudiendo generar un camino del humano al usar el objeto, así como aprender a utilizar una maquina para moler comida, puede ser por ejemplo; el desconocimiento, la impresión al encender, la primera vez que se utiliza con un fin y concluye con el aprendizaje del objeto (concluye la experiencia), aun que esta pase luego a volverse una repetición de la misma, aun que siendo así ya paso el momento de vivir la experiencia.

Noticia

Estudios sobre la Inteligencia artificial en los últimos años, recopilación de información aun sin introducirme en esta: Robot Sophia

Lunes, 5 de abril de 2021

Formas de interactuar

Al introducirme mas en los objetos, me detengo a ver el paso a paso que hay en la interacción con los objetos que mas utilizo, en este caso seria mi celular y el computador, pero ¿Cuan consciente soy de cada cosa que sucede al iniciar el uso de cada uno de estos? Para ello observo la ruta desde el inicio del celular hasta la vista de la interfaz de algunas apps que mas utilizo. Con el computador hago el mismo ejercicio, pero en este caso se necesitan mas piezas que funcionen en conjunto para que la interacción humano-objeto se lleve a cabo.

Formas de notificar 1: el celular al estar en silencio, si bien, no emite ruido, dirige la atención de la mirada cada vez que llega una notificación, pues la pantalla se enciende por cada notificación que llega durante 6 segundos.
Al tomar el celular, este sin tocar nada, se enciende durante 6 segundos, permitiendo dar una lectura rápida de las notificaciones, pasado el tiempo la pantalla se apaga y no se vuelve a encender hasta apretar un botón. -- Pero la sensación que deja es como que el hecho de tocar el celular provoca que este se encienda, como si este pudiese sentir cuando debe encenderse.
1 tap, de vuelta a las apps, 2 tap ventana de apps en pausa, al ingresar al celular, este se abre en la segunda pestaña (de 3) aquí es donde tengo la mayor cantidad de aplicaciones que utilizo (dibujadas) y algunas de las que están en blanco, nunca las he abierto, inconscientemente ya se la ubicación de cada app que uso.
Interfaz de Instagram, muestra el feed, el perfil y las historias.
Interfaz de tiktok y Rappi

La interfaz de tiktok al principio muestra una pantalla de carga que atrae visualmente y no es una larga espera, Sobre la interfaz de rappi es muy funcional en tanto a que toda la información que podamos querer ver esta a primera vista, no hay que sobre indagar, por lo que entrega una buena experiencia de usuario .

Computador

Componentes del pc
Cr11mdix.jpg
Cr12mdix.jpg
Interfaz inicio de sesión en Windows, accedo de inmediato al navegador opera gx

Sobre micro interacciones

Pienso, son las cosas que marcan la consecuencia de realizar algo en el objeto, pero esta consecuencia puede ser imperceptible pero pareciera que me adecuo a esa pequeña interacción que está pero no siempre es obvia, por lo que al realizar el ejercicio de estar viendo el paso a paso de lo que sucede al interactuar con el celular aparecen distintas cosas de las que no era consciente o que probablemente nunca me percate, esas son:

Formas de acceder, huella digital: al mantener el dedo sobre el botón, botón de bloqueo y desbloqueo, si la huella es correcta se desbloquea, si no reconoce la huella se debe tipear el código de seguridad
a la derecha: ¿Micro interacción? mini vibración al cambiar de lado el botón, la pantalla no se enciende al cambiar el botón.
cada vez que tecleo, el navegador hace un pequeño sonido, que lo acompaña, así mismo cuando abro y cierro una ventana. A la izquierda lo acompaña una vertical con una serie de botones que permiten acceso rápido a las redes sociales.

Ideas sobre la interfaz

Pienso en la interfaz como un sitio donde se muestra información, pero cual es la información que debe ser mostrada a cada persona, que sea relevante y que no se englobe en los gustos personales del usuario? Para ello primero estudio el como las personas o en este caso yo puedo acceder a leer o ver noticias. Encontrando varios modos, Escucha: Radio, Televisión, Podcast, Youtube. Lectura: Internet, Periódicos. Pero que es lo que genera hoy en día el interés por leer una noticia, existe realmente?, al parecer la costumbre es que las noticias que nos interesen sean las que el algoritmo segmenta según nuestros gustos, y solo nos quedarían (si es que) la televisión, que también muestra noticias segmentadas, por lo que encontrar noticias diferentes por cuenta propia implicaría una extensa búsqueda por la red, pudiendo encontrarnos con información falsa o información basura, lo que provocaría a la larga un desinterés por la búsqueda de lo nuevo y quedándonos solo con lo que se nos ofrece, así mismo seguiríamos aumentando la separación existente entre persona debido al encierro del gusto que existe hoy en día.

Formas de leer noticias

El modo de leer noticias en un diario, las cuales se muestran privadas y en una especifica diagramación

Jueves, 8 de abril de 2021

Apps para ver noticias

Para poder pensar la interfaz, primero busco aplicaciones móviles que muestran información, observando "qué y como" muestran información, también como se construye la interfaz de esta app, y la descripción de estas mismas. En primer lugar esta

  • Microsoft Noticias

Como se puede apreciar la app contiene una cantidad de medios digitales que muestran información diaria y el usuario puede seleccionar los temas que mas le interesen, un equipo seleccionan las noticias mas interesantes del día y además puedes sincronizar tus intereses.

  • Flipboard

Reúne noticias, artículos y conversaciones populares actuales, permite compartir. También hay que elegir los intereses. Lo que hace flipboard es mostrar noticias y artículos de todo el mundo pero "las mejores" "curadas", los contenidos se pueden guardar para leerlos mas tarde en una carpeta personal. También muestra contenido de medios de comunicación digitales mas conocidos.

  • Periódicos Chilenos

Plataforma que muestra todos los periódicos y portales de información chilenos, separados también es categorías como : Generales, Regionales, Economía y Política, Deportes, Celebridades y Moda.

Webs

El formato de estos tres ejemplos son bastante similares entre si, tienen mini noticias a las cuales se le puede dar click, jugando bastante con el blanco del fondo en contraste con los contenidos, la información tiende a estar categorizada pero en la misma vista, pero esto debido a que va cambiando diariamente, considero que en si la interfaz es poco atractiva para atraer a un lector que no esta habituado a la lectura, la poca interacción que hay en la misma pagina puede llevar a la tediosidad visual.

Sobre la interfaz, búsqueda y categorizando la información

Para pensar en la interfaz me paro en la forma en que las personas acceden a la información, observo el espacio que se presta para la búsqueda de noticias, así como lo mencione antes, una de las formas mas "cotidianas" es el diario, por lo que estudié el como se exponen las noticias dentro del diario. Aquello me deja pensando que puede llegar a ser tedioso leer un diario completo con la cantidad de caracteres que se muestran en un vistazo, si considero como caso de estudio a una persona que no esta habituada a leer, encontrarse con esa cantidad de texto y formato tan ancho del diario, puede volverse tedioso y cansador.

Se ha prevalecido los demás canales de información, así sea la televisión, la radio y los equipos como celular y computador. Si bien todos se relacionan en entregar información, cada forma de leer o escuchar crea un espacio distinto con cada oyente, lector, es decir, la experiencia de leer o escuchar noticias, dependerá en gran parte del formato en que se está leyendo.

El problema

Como se muestra, lee, entiende una serie de noticias sobre un mismo tema, evitando la confusión con las noticias falsas, esto contenido en una interfaz, dígase aplicación móvil y/o pagina web, que englobe una cierta cantidad de paginas. Es decir un formato que se adecue a.

El contexto

Que la forma de llegar a una noticia o a varias se puede ver afectado por una serie de variables que posiblemente llevarían a no llegar a encontrar aquella noticia o bien terminar deformando la búsqueda y llegando a otra noticia completamente diferente.

El usuario

El usuario sería aquella persona consideremos (común),que si bien tiene una serie de gustos definidos, hay otros campos que el mismo algoritmo no le permite visualizar, a su vez, el usuario se ve afectado por la sobre información, así como en el ejemplo del diario, pasa algo similar al tener un acceso completo a un sin fin de noticias, es decir no hay un filtro que le diga al usuario "esto es lo que estabas buscando y se encuentra aquí".

Complejidad

Es complejo el pensar como englobar una cantidad de noticias tal, que permita al usuario acceder con CONFIANZA a una interfaz que espera que no termine siendo una mala experiencia, pues el paso entre la legibidad de la interfaz con la confusión de la misma, están casi que ligadas.

Sobre el contenido interfaz

La interfaz en idea, tendría cuerpo tanto en un smartphone, como en una pagina web, en el primero como una app y en el segundo pensada en el computador, ¿porqué? Creo que es necesario tener estos dos tipos de accesos debido al aumento de estos dos equipos, eso sí, en primera instancia pienso que la interfaz del celular puede ser mucho mas amigable e interactiva con el usuario. En principio la idea es que la interfaz en celular en sí tenga como base una inspiración en las wireframes de las redes sociales como Instagram o tiktok, debido a que la gran cantidad de usuarios utilizan estas aplicaciones, por que en primera instancia generaría una conexión con la forma de utilizar la aplicación. Entonces la idea seria -

  • Pantalla de carga.
  • Iniciar una sesión con posibilidad de mantener la cuenta abierta o cerrarla.
  • Se Abre el perfil del usuario, donde aparece información tal como la cantidad de noticias que ha leído o clickeado, horas en las que mas se entra a la app, la idea seria incentivar al usuario por medio de mostrar esta información, puede ser mediante alguna micro interacción o algún sistema de logros donde se desbloquean algunos "premios".
  • Al deslizar el dedo hacia la derecha se despliega un menú con las categorías de la información, si bien considero que esto funciona como un formato global, dado el caso de la selección de la noticia, este desplegaría categorías ligadas al mismo, así como:
  • Origen
  • Qué es
  • Donde se encuentra
  • Usos en el cotidiano...

Cada una de estas categorías engloba una serie de publicaciones que se presentan a modo de red social (Instagram/Tiktok), es decir tres noticias en horizontal que se despliegan hacia abajo al deslizar, cada noticia tiene una caratula y algo que indica de que se trata, además se puede mantener presionado para que se despliegue una vista previa de esta noticia. La idea es utilizar redirecciones a otras paginas web que tengan estas noticias, para aplicar esto, habría que utilizar algún algoritmo + personas que analicen la veracidad de las noticias que se llegan a publicar en este redireccionaría, de modo que el usuario este seguro al momento de ingresar a estos sitios.

Sobre las Fake news, quise habilitar una categoría única sobre estas, que la idea es que comuniquen al usuario que son, como se detectan, etc. Pero a su vez dentro de esta categoría se muestran todas las fakes news sobre las noticias que están incluidas en la app, en este caso (inteligencia artificial), de modo que el usuario genere un pensamiento critico y temas de que hablar y a su vez practique la detección de estas fakes news, aportando también un toque de gracia en lo creativo de estas mismas noticias.

Sobre la aplicación móvil, esta podría contar con un asistente de voz, esto lo he pensado en dos modos, pues cuando estuve observando mi interacción con el celular y que cada vez que llega una notificación este se enciende, pienso que la interfaz podría competir con estas notificaciones que a veces son mas distractores, de modo que cada vez que llegue una notificación, o cada cierta cantidad de notificaciones la app suelte una noticia como notificación, con algún elemento llamativo, cosa de que la atención del usuario se vea comprometida a elegir que observar primero o si es importante ver ambas, esto podría estar acompañado de algún tipo de personaje que provoque algún tipo de "feeling" con el usuario. Sobre la comodidad de la misma, pienso que no siempre se quiere leer, o no si siempre se esta dispuesto a acceder a paginas de información, en especial las personas que no tienen tiempo para si quiera escuchar o leer alguna noticia en los medios cotidianos, debido a que están muy agotados. Para ello como propuesta pienso que el asistente de voz, puede ser capaz de leer al usuario cada titular de la noticia y de elegir alguna pueda leer el articulo al usuario, a modo de que así como a Siri se le pueden pedir cosas básicas, a esta app también se le podría pedir "Léeme los titulares del día" o "Lee la noticia numero 2 del día" , de modo que seria accesible también para personas que solo pueden escuchar


links que estoy investigando


Lunes 12 de abril, 2021

Wireframe 1

Un website wireframe, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web.



Preinfobot1.jpg
Preinfobot2.jpg
Preinfobot3.jpg

Para realizar este wireframe, me base en lo que ya había planteado de como sería la interfaz, para ello diseñe a la mascota de la app, en primera instancia y luego realice el wireframe de cada una de las pantallas, intente cubrir toda la información expuesta anteriormente en el dibujo. A su vez agregué unos dibujos contemplativos de como se "pensaría" el como afecta al entorno la app y como seria la interacción aplicación-usuario, en principio esta contaba con 18 pantallas pero posteriormente me di cuenta de que habían espacios vacíos o sin salida y/o cosas que había pensando poner pero que tampoco puse en el momento.


Prototipo 1

Visto el primer wireframe me planteo a trabajar este mismo en digital en este caso en Illustrator, aun que primero paso por una serie de plataformas webs, que ayudan en parte a realizar wireframes, si bien en principio me quise apegar netamente a lo que seria una maqueta tipo wireframe, me incline al final por mezclarlo con la visualización final.

Al final de 18 pestañas pasé a 25 aun que faltan.

Formato

Para realizar esta interfaz de aplicación móvil, estoy utilizando el formato de iPhone 8/7/6 cuya medida es 750px/1334px

Tipografía

Sobre la tipografía, fue un proceso bastante complejo seleccionarla, pues investigue cuales tipografías utilizan las apps mas usadas, en este caso redes sociales, y en su mayoría todas utilizan helvética, pero al probarla no sentía que acompaña muy bien a la idea, por lo que probé con Quicksand que es una tipografía mas curva, pero sentí que podía verse "infantil" o poco serio, así que termine optando por utilizar Gotham para los títulos y Codec Cold, para los escritos, esta combinación tipográfica, me hace pensar que encaja bastante bien con la interfaz, al estar equilibrada entre lo curvo y lo geométrico. Utilizo entonces familias como, Gotham Black-Book, Codec Cold News.

Tipografias Seleccionadas

Colores

Sobre los colores, fue una decisión bastante compleja, en principio utilice unos azules, amarillos y rojos, pero termine pensando que estos colores, mas la tipografía resultaban muy pesados visualmente, por lo que pase a solo utilizar amarillo, negro y blanco, y fue así pero al final tampoco me convenció, así que luego de buscar una paleta que me agradara y que sentía que se acoplaba bien a la idea, reemplace los colores que tenia por los nuevos y así mismo se me revelo que habían piezas que no calzaban con la interfaz por lo que las elimine y las reemplace por otras, como por ejemplo la barra superior de arriba que antes no estaba y ahora está con un color morado.


Ejemplos :

Infobot9.png
Infobotmd1.png
Infobotmd2.png
Infobotmd3.png
Infobotmd4.png

































Para cerrar esta parte me di cuenta que hay algunos vacíos en la distribución de la app, así como la redirección a otras webs, como YouTube, Spotify, y concluir unas pestañas concretas de la interfaz, a su vez falta reemplazar cada icono celeste por la mascota (Booot) y reemplazar cada texto por simulación de noticias que las he ido alojando en la wiki, cada una separada por categoría (falta). Y faltaría una revisión mas por la parte grafica para observar si se comprende bien el que se puede presionar y para qué , y si los colores cumplen su función.

Interactúa con el Prototipo en este Link

Para no subir las 25 imágenes opte por dejar linkeado el pdf para poder ver el archivo completo.

  • PDF

Archivo:PROTOTIPO 1 APP MD.pdf PARA VER EL PROTOTIPO COMPLETO


  • Link

Esta app permite poder subir cada imagen del prototipo y animarla para entender el funcionamiento de la app.

https://marvelapp.com/prototype/8420070 LINK PARA INTERACTUAR CON EL PROTOTIPO



Presentación Animada Boceto 1

Imaginando que esto pudiese real, pienso en realizar una presentación de la app tipo "lanzamiento" en una pequeña animación que refleja el uso cotidiano de esta y como se piensa que esta misma afecta al usuario y a su comunicación con el entorno.

Infobotmd5.gif



Avances para la Interfaz Completa

Para concluir el trabajo de estos días termino realizando el diseño del personaje (Booot), para que ya solo necesite reemplazarse en la maqueta presentada, y aquí podemos ver el personaje completo de frente, el logo y una ilustración para utilizar en la app como si estuviese agarrando las categorías de información.


Logo ampliado Infobotmd6.png Infobotmd7.png

Infobot12md.png


Por arreglar

Para mejorar la visualización debo mostrar mejor como se ven las redirecciones a noticias, ya sea por audio, video o texto. (usando capturas reales preferentemente)

  • Sobre el como se sabe diferenciar entre una fake news y una real imaginariamente debe haber un algoritmo, machine learning que revise cada noticia que entra y la clasifica, luego un equipo humano las vuelve a revisar para confirmar con fuentes si es o no una fake news, de serlo la dejaría dentro de la categoría expuesta para el usuario.


Jueves, 15 de Abril 2021

La Finalidad de la Interfaz (inf0 b0T)

inf0 b0T es un formato de aplicación móvil, que, tiene la capacidad de categorizar información y noticias de manera particular, es decir, es un formato tal que puede mostrar información/noticias netas sobre un tema, por ejemplo:

  • inf0 b0T: Inteligencia Artificial
  • inf0 b0T: Ciencias
  • inf0 b0T: Artes
  • inf0 b0T: Actualidad

Es entonces para el usuario una aplicación móvil que busca por medio de dar facilidades (dígase no solo lectura, si no poder escuchar las noticias leídas desde el propio IA (booot) o ser redirigido a un video o podcast sobre el tema) incentivar a este mismo a aprender y mantenerse informado de lo que "este" quiera. (en este sentido algo que aporta este formato es que, si bien existe una preselección de gustos de parte del usuario, la interfaz sigue tratando del mismo tema solo que reordena la forma de mostrarlos.

¿Cómo afecta entonces la app en el mundo real?

Al salir del plano virtual, se espera que este proyecto incentive al usuario a que por medio del uso de la app, recoja información/conocimientos nuevos para que este, además de estar en constante aprendizaje, pueda generar un dialogo, un tema con otra persona, esto también previamente trabajado al hablar e interactuar la IA (booot), debido a la importancia humana de escuchar otra voz, o la mera compañía, así sería un paso para salir de la burbuja virtual y conectar con personas reales, partiendo desde la propia casa. Pues pienso en la interacción joven-adulto que pareciera que existe una polarización entre ambos mundos y que con el avance tecnológico mas crece esta brecha entre uno y otro, así el que es mas joven tiende a convivir mas con la tecnología, mientras que la persona adulta va levemente desconociendo mas cosas. Siendo así creo que la app proporcionaría una ayuda a la relación que existe entre estos rangos etarios y de este modo ir generando una red de conocimiento que parte desde una persona que se informe por booot.

Sobre la comunidad y su rol en la interfaz

Es importante contar con personas reales que utilicen la app, pues la creación de la comunidad, crea a su vez un modo de utilizar la app, un modo propio de estas personas, a su vez la propia opinión de estas personas van dándole coordenadas a la misma interfaz. Así también es importante que el propio usuario pueda ver que existen otros usuarios que están utilizando la app, a modo que esto gráficamente se puede mostrar en una especie de tablero con puntajes sobre cuantas noticias han leído/escuchado durante el día, de este modo generar un sentido de compañía humana entre los usuarios.

El Rol del Usuario

La participación de los usuarios se da también en la capacidad que ellos tienen de votar en cada noticia/información, dando un me gusta o no me gusta o si es relevante o no, de modo que las noticias se vayan acomodando de este modo, cuando se presentan y las demás van descendiendo hasta desaparecer, esto ayudaría también al algoritmo saber, que noticia/información interesan mas a los usuarios, dejando en evidencia los tópicos mas leídos o gustados dentro de la interfaz.


Buscar(se)

Es bueno contar con los cercanos en cualquier app, de modo que se contempla el poder buscar a tus amigos o agregar personas a tu red de amigos.

El equipo, la I.A y Machine Learning para regular lo que se muestra en la app y Fake News

Para hablar solo este campo estoy utilizando información sobre Machine Learning que revise en varios sitios pero este me pareció muy concreto:

https://cleverdata.io/que-es-machine-learning-big-data/

  • Machine Learning es una disciplina científica del ámbito de la Inteligencia Artificial que crea sistemas que aprenden automáticamente. Aprender en este contexto quiere decir identificar patrones complejos en millones de datos. La máquina que realmente aprende es un algoritmo que revisa los datos y es capaz de predecir comportamientos futuros. Automáticamente, también en este contexto, implica que estos sistemas se mejoran de forma autónoma con el tiempo, sin intervención humana.

Machine Learning Supervisado

Buscando en la web, esta pagina me parece concreta con la información:

https://blog.bismart.com/es/diferencias-machine-learning-supervisado-no-supervisado

  • Algoritmos que “aprenden” de los datos introducidos por una persona. En este caso:

Se necesita la intervención humana para etiquetar, clasificar e introducir los datos en el algoritmo. El algoritmo genera datos de salida esperados, ya que en la entrada han sido etiquetados y clasificados por alguien.

Existen dos tipos de datos que pueden ser introducidos en el algoritmo:

  • Clasificación: clasifican un objeto dentro de diversas clases. Por ejemplo, para determinar si un paciente está enfermo o si un correo electrónico es spam.
  • Regresión: predicen un valor numérico. Sería el caso de los precios de una casa al escoger diferentes opciones o la demanda de ocupación de un hotel.

¿Cómo se utilizaría en la app?

  • Una serie de preguntas iniciales (establecidas por humanos) al abrir la aplicación por primera vez y así tener registrados otra cantidad de perfiles.
  • Formar perfiles de usuario basándose en "gustos" (establecidos por humanos)
  • Categorizar la información según el interés de las personas que previamente votan si les gusta o si no les gusta.
  • Analizar cada noticia en búsqueda de palabras que parezcan dudosas (establecidas por humanos) para dejar un registro de posibles Fake News, que luego seria corroboradas por el equipo humano de la app, verificando las fuentes, bases científicas, etc.


Categorías de Noticias/Información

Parte de la propuesta de la interfaz, se trata de mantener ordenada las noticias, de que modo? Categorizándola, en ese sentido, son categorías dadas en principio que por medio de la opinión del usuario estas podrían aumentar en caso de ser necesario, la idea de organizarlas es que el usuario pueda navegar por ellas teniendo claridad de encontrar lo que está buscando.


Las categorías que he seleccionado son: ESPECIFICAS SOBRE EL TEMA, ES DECIR SON MAS BIEN INFORMATIVAS CASI QUE POR DEFINICIÓN.


  • Programación y Lenguaje ¿Qué es?

Técnicas y métodos de inteligencia artificial: ¿Cuáles son y para qué se usan?

  • etc

INFORMACIÓN GENERAL (mas o menos las noticias/información que van saliendo día a día)


TODO LO RELACIONADO A CAMPOS DE ESTUDIO SOBRE EL TEMA en este caso inteligencia artificial

  • Ciencia
  • Ingeniería
  • Economía
  • etc


INFORMACIÓN MAS HOLGADA SOBRE EL TEMA QUE FUNCIONA DE ANCLAJE ENTRE EL USUARIO Y LA APP

FAKE NEWS (explicar este suceso desde la definición hasta la propia experiencia de leerlas, verlas y escucharlas)

  • Origen
  • ¿Qué son?
  • ¿Dónde se encuentran?
  • ¿Cómo nos afectan?
  • etc...

NETOS DE LA APP

ACCESO A

  • Revisa las fake news de cada categoría expuesta anteriormente
  • Acceso a saber el porque esta era falsa

¿QUÉ SE ESPERA?

Generar en el usuario un pensamiento critico al leer no solo las noticias de la app, si no en el comportamiento con el entorno, es decir, dar espacio a cuestionarse, a darse el tiempo de reafirmar la veracidad de algo y no conformarse con lo primero que encuentra.

Propuesta Interfaz

Infobotmd10.png

Archivo:Infobot11md.pdf

PRUEBALA AQUÍ

https://marvelapp.com/prototype/70h1i16

Detalles

pantalla de inicio (carga)
Familiaridad
Gustos
Seleccion


















































Correcciones leves al diseño de la interfaz

La propuesta anterior tenía algunas partes que sobraban que no había visto, por ejemplo unos cuadrados de color. Y también la barra inferior que es para moverse entre ventanas, la había pensado flotando, sin llegar al final de la ventana, pero por algún motivo la había dejado pegada al margen, así que solucione eso y además ajuste los grosores de línea de los iconos, pues estaban muy dispares entre sí. Y por ultimo corregí la distancia que tenían entre ellos mismos, dejándolo a distancias iguales. Y para cerrar, cambie la forma de escribir el nombre de la app para ir por una misma línea, así que lo pasé a mayúsculas en roboto mono.

Propuestanumero4mdix.png

PRUEBA LA INTERFAZ AQUÍ

https://marvelapp.com/prototype/9h9ca15

Algunas funciones para moverse dentro de la app están sujetas a hacer doble tap o swipe, por lo que no terminan de estar explicadas, pero en la maqueta se entiende el movimiento que deberían tener para funcionar.


Detalles de algunas ventanas

Infobot15md.jpg
Infobot16md.jpg
Infobot17md.jpg
Infobot19md.jpg











































Muestra de algunas ventanas, en este caso lo que sería programar al "booot" para realizar lecturas de noticias, la ventana de algunas misiones para realizar, como se visualizan las fake news y la forma de mostrar el conseguir un nuevo logro.



El caso de estudio para la muestra de la interfaz

(Jóvenes) Un joven de 20 años que esta sumido en la vida online, de una manera tal que evita el contacto con las personas y el contacto que tiene por redes sociales es poco fructífero, pues la comunicación se reduce a compartir solo un par de palabras , lo que se traduce a un conocimiento mínimo del mundo de la información/noticias, pues solo esta girando en una rutina monótona diaria en la que no hay entradas nuevas de estímulos de conocimiento. Generando en su vida una polarización con la interacción con el mundo.

(Adultos) Un padre que tiene 50 años, quien también vive a su modo, una vida ligada a la tecnología, si más ingenuo, pues a menudo cae en fake news y las comparte en sus redes sociales, propagando esta información falsa. Lo que ha provocado que el modo de buscar información para él se ha vuelto una en la que sólo ingresa a titulares trágicos, o de noticias que exalten al lector.


(Solución de la app)

La app ofrece aprendizaje por medio la compañía vocal de un IA, que al facilitar la forma de leer o escuchar información, ayudaría al usuario a incentivar su aprendizaje y detección de noticias, generando en el/ella una rutina de escucha/lectura y así aun que sea solo la lectura de titulares, va a ir generando un espacio informativo recopilativo en el cerebro de los usuarios. A su vez incentiva el método mediante logros diarios y semanales, ofreciendo entregables digitales que generen sensaciones al usuario. Y la idea es romper la polarización generando redes de informaciones blancas sobre temas en concreto, desde los orígenes a lo diario.

  • Pienso en esto a modo de cumplir la finalidad de info bot, escrito más arriba*

ENTREGA FINAL CICLO DOS

Para la entrega final del proyecto se realizan cambios en los wireframes de la interfaz, como también cambios en el diseño de la propuesta y se agrega una nueva coordenada a la app que es la de personalización de la IA, literalmente.

Wireframes Corregidos

WFmd1.jpg
WFmd2.jpg
WFmd3.jpg
WFmd4.jpg

Estos wireframes corresponden a las pestañas más utilizadas dentro de la app, así en base a ella es que las demás se han creado. Para crear estas wireframes, analice aplicaciones que mas utilizo, Instagram, Mimo, Tiktok, WhatsApp y Pinterest, de modo que al ver como fueron pensadas su separaciones, la posición de imágenes, textos e iconos inferiores como superiores, fue que cree las medidas de mi interfaz.

Tipografía y Colores

Error al crear miniatura: Archivo más grande que 25 MP

Opte por esta combinación tipográfica debido al carácter sutil que dejan a la vista, pues no son pesadas de leer y acompañan la visual de la lectura, el uso se baso en una constante contraste entre bold y book o bold y news, de modo que se marcará el paso de la lectura en la pestaña.

Sobre los colores, utilicé contrastes complementarios entre el morado y el amarillo, de modo de generar el contraste en los bordes y dejar el centro como un espacio blanco teñido por los colores ajenos que serían los titulares de las noticias o las interacciones que tiene la aplicación con la I.A, de modo de dejar un lienzo blanco utilizable en el centro que marca sus limites en el contraste complementario. Sobre el celeste, se utiliza para marcar un quiebre de color y hacer pensar al usuario si es algo que se clickea o es algo que requiere ser leído.

Sobre el verde también fue utilizado como persuasión de modo que sea fácil encontrar los ajustes de la app, pues están fuera de la barra de iconos (inferior)

Barra de Iconos Inferior

Infobotbarra.jpg

De izquierda a derecha:

  • Inicio: Dirige al usuario a la pestaña de noticias del día, en primera instancia diarias y al deslizar a la derecha muestra la categoría de información al respecto de estas.
  • Logros: Dirige al usuario a la pestaña donde se encuentran las misiones diarias
  • Intercambio: Dirige al usuario a la pestaña donde se pueden realizar intercambios de booot
  • Fake News: Dirige al usuario a la pestaña de Fake News, en primera instancia diarias y al deslizar a la derecha muestra la categoría de información al respecto de estas.
  • Perfil: Dirige al usuario a su perfil, donde puede realizar su biografía, ver a sus amigos y que noticias a guardado o leído recientemente

Vista de la interfaz

VIB1.png
VIB2.png

Detalle de algunas ilustraciones utilizadas en la app

IB1md.jpg
IB2md.jpg
IB3md.jpg
IB4md.jpg

Realizadas en Procreate con las medidas de la pantalla del Iphone 7, luego para utilizarlas en la app las pasé a calco de imagen en Illustrator. para que quedarán acordes a la interfaz y se pudieran ajustar las medidas sin sacrificar calidad.

Storyboard, caso de estudio y animación

El caso de estudio se basa en Gabriel, un joven de 20 años quien ha vivido tecnológicamente segmentado, es decir, esta fuera de lo sociable y lo informativo, a su vez el vive con su padre, quien también vive con la tecnología, pero es muy susceptible a caer en las fake news y propagarlas, lo malo, es que esto ha generado una brecha comunicativa entre ellos.

La solución entonces es infobot que como red social informativa busca crear estas redes de aprendizaje mediante el uso de la IA (booot) y como esta se vuelve única al adquirir la personalidad de su dueño, y que a su vez se puede intercambiar para aprender y relacionar los intereses de los cercanos o desconocidos de su propietario, de modo de generar, conversación, debate y una red social única.

A su vez enfrentar las fake news mediante la lectura de las mismas.

STIB1.jpg
STIB2.jpg
STIB3.jpg
STIB4.jpg


Video de Presentación Info Bot

  • Realizado en un formato de 1920 x 1080
  • Animación realizada en Procreate
  • Video editado en Imovie
  • Audio de Youtube libre de copyright
  • Algunas escenas fueron realizadas en Illustrator
  • La interfaz fue grabada en Marvel.com

Prueba la interfaz aquí

https://marvelapp.com/prototype/ga11057

Bibliografía