Curso Diseño UI - 9 Elementos de una Interfaz

Summary

En esta lección, se discute una distinción útil para el diseño de interfaces digitales: la separación entre tres tipos de elementos. Se explican los 'elementos informativos pasivos', que entregan información sin necesidad de interacción del usuario, ejemplificados con páginas como Google Docs y aplicaciones móviles. Luego, se presentan los 'elementos informativos activos', que requieren la intervención del usuario para revelar toda la información, como en la página de Apple o el periódico La Tercera. Por último, se mencionan los 'elementos interactivos', donde el usuario interactúa con el sistema, como en formularios o aplicaciones como Twitter y Spotify. La importancia de diseñar cada tipo de elemento para que sea fácil y intuitivo para el usuario se resalta para maximizar su provecho.

Takeaways

• 😀 La lección trata sobre la distinción entre tres tipos de elementos en la interfaz de diseño digital: informativos pasivos, informativos activos e interactivos.
• 🔍 Los elementos informativos pasivos son aquellos que simplemente presentan información sin necesidad de interacción del usuario, como en la página de Google Docs.
• 📚 Ejemplos de elementos informativos pasivos incluyen secciones de beneficios para empresas, aplicaciones de oficina y testimonios en páginas web.
• 👀 Los elementos informativos activos requieren la intervención del usuario para mostrar toda la información, como hacer scroll en una página web.
• 📉 Un ejemplo de elemento informativo activo es la página de Apple, donde el usuario debe desplazarse para ver la información completa del producto.
• 🤖 Los elementos interactivos permiten que el usuario ingrese información y reciba una respuesta, como en formularios o aplicaciones de búsqueda.
• 🔍📝 Un claro ejemplo de interacción es la aplicación de Google Maps, donde el usuario ingresa información al moverse por el mapa y recibe información georreferenciada.
• 🎯 Al diseñar, es importante que los elementos informativos pasivos sean fácilmente identificables como tales, sin necesidad de interacción adicional.
• 🛠️ Para los elementos informativos activos, el diseño debe hacer que sea intuitivo para el usuario que deben interactuar para acceder a más información.
• 🔄 En el caso de los elementos interactivos, el diseño debe comunicar claramente a los usuarios cuándo y cómo deben interactuar para obtener una respuesta o realizar una acción.
• 📝 La distinción entre estos tres tipos de elementos ayuda a los diseñadores a enfocarse en la función y experiencia de usuario adecuada para cada elemento de la interfaz.

Q & A

¿Qué tres tipos de elementos se mencionan en la lección para diseñar interfaces digitales?

Los tres tipos de elementos mencionados son: elementos informativos pasivos, elementos informativos activos e interactivos.

¿Cuál es la función principal de los elementos informativos pasivos en una interfaz?

La función principal de los elementos informativos pasivos es entregar información sin requerir interacción del usuario.

¿Qué ejemplo se da de un sitio web que utiliza elementos informativos pasivos?

Se menciona la página de 'The Jesuite', que presenta información de Google Docs, Google Drive y otras aplicaciones de ofimática de Google de manera informativa y pasiva.

¿Por qué los elementos informativos activos requieren la intervención del usuario para mostrar información?

Los elementos informativos activos requieren la intervención del usuario porque solo muestran la información completa o relevante después de que el usuario interactúe con ellos, como hacer scroll o hacer clic.

¿Cómo se describe la interacción en la página de Apple para el producto iMac en el script?

En la página de Apple para el iMac, la interacción se describe como necesaria para que el usuario haga scroll y el monitor se haga más pequeño, mostrando el título y el texto correspondiente.

¿Qué es lo que distingue a los elementos interactivos de los elementos informativos pasivos y activos?

Los elementos interactivos se caracterizan por permitir que el usuario ingrese información y reciba una respuesta o acción relevante, mientras que los elementos informativos pasivos y activos se centran en presentar información.

¿Cómo se describe la interacción en la aplicación de Twitter según el script?

En la aplicación de Twitter, la interacción se describe como la capacidad de crear un tweet, lo que implica la entrada de información por parte del usuario y la recepción de una respuesta, como el tweet publicado.

¿Qué ejemplo se da de una aplicación móvil que es completamente interactiva?

Se menciona Instagram como un ejemplo de aplicación móvil que es completamente interactiva, permitiendo acciones como dar 'me gusta', comentar, compartir e interactuar con posts.

¿Qué importancia tiene diseñar claramente los elementos interactivos en una interfaz según el script?

Diseñar claramente los elementos interactivos es importante para que el usuario entienda fácil e intuitivamente que tiene que intervenir y qué resultado tendrá su interacción.

¿Cuál es la función de los enlaces en los elementos informativos pasivos según el script?

Los enlaces en los elementos informativos pasivos sirven como una opción para que el usuario pueda obtener más información si lo desea, aunque no es necesario para cumplir el propósito principal de entregar información.

¿Cómo se sugiere identificar visualmente que hay más contenido en los elementos informativos activos?

Se sugiere utilizar diseños que indiquen que hay más contenido, como mostrar elementos parcialmente ocultos o usar flechas u otros indicadores que inviten a la interacción para revelar información adicional.

Outlines

00:00

📚 Elementos Informativos Pasivos

El primer párrafo se centra en la distinción entre tres tipos de elementos en una interfaz digital: informativos pasivos, informativos activos e interactivos. Los elementos informativos pasivos son aquellos que simplemente presentan información sin requerir interacción del usuario. Ejemplos incluyen secciones de beneficios para empresas en la página de Google Workspace, aplicaciones de oficina de Google, y páginas de ventas que muestran información del producto o servicio. Estos elementos cumplen su propósito una vez que la información es consumida.

05:01

🔍 Elementos Informativos Activos

El segundo párrafo habla de los elementos informativos activos, que también tienen como objetivo entregar información pero requieren la intervención del usuario para hacerlo. Se mencionan ejemplos como una sección de la página de Apple donde es necesario hacer scroll para ver el contenido completo, un periódico en línea que solo muestra títulos y capturas de imagen hasta que se hace clic para leer la noticia completa, y la página de Sony que utiliza un slider para mostrar más productos. La interacción del usuario es crucial para revelar toda la información.

10:04

💬 Elementos Interactivos

El tercer párrafo se enfoca en los elementos interactivos, cuya función es permitir que el usuario interactúe con la interfaz, generalmente a través de la entrada de información y la recepción de respuestas relevantes. Ejemplos incluyen formularios y campos de búsqueda, como el de Google, donde el usuario escribe términos y recibe sugerencias en respuesta. También se discuten aplicaciones móviles como Twitter, donde la creación de un tweet o la interacción con otros tweets (como dar 'me gusta') es parte de la experiencia interactiva.

15:04

🎯 Diseño de Elementos Interactivos

El cuarto párrafo continúa la discusión sobre la interacción, destacando la importancia del diseño al crear elementos interactivos. Se enfatiza la necesidad de que el usuario entienda de manera clara y intuitiva cuándo y por qué debe interactuar con ciertos elementos. Se mencionan aplicaciones como Instagram y Spotify, donde la interacción es constante y se puede realizar a través de clics, deslizamientos y comentarios, y se destaca la importancia de que el usuario sepa cuándo su intervención es necesaria o deseada.

20:07

🛠 Aplicación del Diseño a Elementos de Interfaz

El último párrafo concluye con la importancia de entender los diferentes tipos de elementos en el diseño de interfaces. El diseñador debe ser consciente de si el objetivo de un elemento es simplemente proporcionar información, requerir interacción para revelar información o permitir una interacción que resulte en una acción o resultado. Se sugiere que esta comprensión facilitará el proceso de diseño, permitiendo que cada elemento sea útil y efectivo para el usuario. Se invita a los espectadores a dejar comentarios con nombres más apropiados para estas divisiones de elementos si lo consideran.

Keywords

💡Interfaces digitales

Interfaces digitales se refiere a las pantallas o superficies donde el usuario interactúa con una aplicación o sitio web. Es el tema central del video, ya que se discute cómo diseñarlas de manera efectiva. Por ejemplo, se menciona la importancia de separar los elementos en informativos pasivos, activos e interactivos para una mejor experiencia de usuario.

💡Elementos informativos pasivos

Estos son componentes de una interfaz cuyo propósito es simplemente proporcionar información sin requerir interacción del usuario. En el video, se ilustra con ejemplos como la sección 'Beneficios para empresas' en una página web, donde el usuario puede leer el contenido sin necesidad de interactuar.

💡Elementos informativos activos

Diferente a los pasivos, los elementos informativos activos requieren que el usuario realice alguna acción para revelar toda la información. En el script, se cita la página de Apple y cómo al hacer scroll se muestra información adicional sobre el iMac, lo que requiere interacción del usuario.

💡Elementos interactivos

Los elementos interactivos son aquellos que permiten al usuario influir en el sistema a través de acciones como escribir, clics o gestos. Ejemplos dados incluyen formularios de búsqueda en Google y la aplicación de Twitter, donde la interacción del usuario produce una respuesta del sistema.

💡Diseño de interfaces

El diseño de interfaces implica la creación de una experiencia de usuario efectiva y atractiva. El video enfatiza la importancia de entender el propósito de cada elemento en la interfaz y diseñar en consecuencia, ya sea para informar, requerir interacción o permitir la interacción del usuario.

💡Información

La información es un concepto clave en el video, ya que los elementos de la interfaz están diseñados para presentarla de manera clara y accesible. Se discute cómo los elementos informativos pasivos y activos manejan la información y cómo los elementos interactivos cambian el flujo de información.

💡Interacción del usuario

La interacción del usuario es un aspecto fundamental en el diseño de interfaces, como se destaca en el video. Se analiza cómo ciertos elementos requieren la intervención del usuario para revelar información o realizar acciones, mientras que otros simplemente presentan información.

💡Ejemplos prácticos

El video utiliza varios ejemplos prácticos para ilustrar los conceptos de diseño de interfaces. Incluye páginas web de Google, Apple, y aplicaciones como Twitter, Instagram y Spotify, demostrando cómo se aplican los elementos informativos y interactivos en contextos reales.

💡Claridad en el diseño

La claridad es un componente clave en el diseño de interfaces, tal como se menciona en el video. Es importante que los usuarios entiendan rápidamente si un elemento es informativo pasivo, activo o interactivo, y cómo deben interactuar con él, para lo cual se sugieren técnicas como mostrar elementos parcialmente ocultos o usar flechas.

💡Aplicaciones móviles

Las aplicaciones móviles son un tipo específico de interfaz digital que se discute en el video. Se mencionan aplicaciones como la de correo, la App Store y Webtoons, para demostrar cómo los principios de diseño se aplican a la creación de experiencias de usuario en dispositivos móviles.

💡Intuición del usuario

El video enfatiza la importancia de que el usuario tenga una intuición clara sobre cómo interactuar con los elementos de la interfaz. Esto implica diseñar de tal manera que sea evidente cuándo y cómo el usuario debe interactuar con los elementos informativos activos e interactivos.

Highlights

La lección se centra en la distinción entre tres tipos de elementos en interfaces digitales: informativos pasivos, informativos activos e interactivos.

Elementos informativos pasivos son aquellos que entregan información sin necesidad de interacción del usuario.

Se sugiere que los nombres 'informativos pasivos' y 'informativos activos' son propuestos por el hablante y están abiertos a sugerencias alternativas.

Ejemplo de elementos informativos pasivos en la página de Google Docs, donde la información es presentada sin necesidad de interacción.

En páginas de venta y comerciales, los elementos informativos pasivos son comunes para presentar información del producto o servicio.

La página de la aplicación de mailing muestra cómo los elementos informativos pasivos presentan datos de uso sin requerir interacción.

Elementos informativos activos requieren la intervención del usuario para revelar toda la información.

La página de Apple muestra cómo la interacción del usuario (como desplazarse) es necesaria para ver información completa.

Ejemplo de elementos informativos activos en la página de un periódico, donde se necesita hacer clic para obtener detalles de las noticias.

La página de Sony utiliza sliders, lo que requiere interacción del usuario para desplazarse entre diferentes productos.

Las aplicaciones móviles también contienen elementos informativos activos que requieren interacción, como en la aplicación To Twist.

Elementos interactivos permiten al usuario interactuar, enviando y recibiendo información, como en formularios o aplicaciones de búsqueda.

Twitter es un ejemplo de plataforma interactiva donde los usuarios ingresan información y reciben respuestas de la comunidad.

Spotify es una aplicación altamente interactiva donde las acciones del usuario, como reproducir música, producen respuestas inmediatas.

Instagram es completamente interactivo, permitiendo múltiples acciones como dar 'me gusta', comentar y compartir.

Google Maps es un ejemplo de aplicación interactiva donde la información georreferenciada se ingresa a través de desplazamientos en el mapa.

La aplicación de calendarios del iPhone es un ejemplo de formulario estricto, donde el usuario debe ingresar información detallada para crear un evento.

El diseño debe ser claro para indicar si los elementos requieren interacción y cuál será el resultado de esa interacción.

El hablante enfatiza la importancia de diseñar cada tipo de elemento de manera que el usuario entienda fácilmente su propósito y uso.

Transcripts

en esta lección quiero hablarte de una

distinción que a mí me resulta bastante

útil a la hora de diseñar interfaces

digitales qué es la separación entre

tres tipos de elementos que pueden

formar parte de una interfaz y te voy a

contar cuáles son estos tres elementos a

continuación con algunos ejemplos vamos

a partir con los elementos informativos

que entre paréntesis le vamos a llamar

informativos pasivos a qué le llamamos

elementos informativos a elementos que

están dentro de una interfaz cuyo único

propósito es entregar información y que

no requieran de ningún tipo de

interacción del usuario para poder

cumplir ese propósito de entregar

información

ahora antes de que veamos los ejemplos

estos son distinciones son nombres que

yo mismo he ido desarrollando a lo largo

de mi trabajo probablemente alguno de

ustedes se le ocurra un nombre más

apropiado para llamarle más allá de

pasivo y bo etc así que si tienes alguna

sugerencia déjame la en como un

comentario debajo de esta lección pero

por ahora vamos a continuar con estos

nombres que son los que yo he

establecido entonces como te iba

diciendo los elementos informativos de

pasivos son elementos que en cuyo

trabajo es entregar información y cuando

mostramos estos elementos si el usuario

los lee o adquiere la información que

están entregando ya cumplieron su

propósito y no necesitan más que eso

entonces vamos a ver unos ejemplos

veamos por ejemplo la página the jesuit

que vendría a ser él

la página en donde google presenta

google docs bull drive y todas estas

aplicaciones de de ofimática que tiene

google entonces si la página es súper

súper bonita y funciona muy bien y si

hacemos zoom a una parte en específico

vamos a ver que hay una sección llamada

beneficios para empresas en donde

claramente cumple un rol completamente

informativo y es bastante pasivo tenemos

un una un epígrafe tenemos un título y

luego tenemos seis pequeñas secciones en

donde nos presenta un título y un texto

y si bien tenemos enlaces tenemos

algunos elementos sobre los cuales

podemos clickear no es necesario que

nosotros hagamos clic sobre estos

elementos para que el objetivo de

entregarnos a esta información sea

cumplido bien entonces está este rol de

los elementos informativos pasivos lo

podemos tener y lo vemos bastante

presente en las páginas de venta en las

páginas en las

page en las páginas comerciales porque

están casi siempre presentes en algunas

secciones en donde nos presentan la

información de este producto o de este

servicio que nos están ofreciendo así

que esos serían los elementos pasivos e

informativos vamos a ver otro ejemplo

vamos a ver la página de signos por

ejemplo una de las aplicaciones de las

cuales hablamos anteriormente si hacemos

zoom vamos a ver que tenemos esta

sección que cumple el mismo rol tiene un

título tiene unas informaciones que van

acompañadas de un icono y de nuevo si

bien hay enlaces que invitan a leer más

la información podemos obtenerla

simplemente observando estoy leyendo la

introducción y podemos continuar con

nuestro recorrido por la página es un

elemento son elementos concretamente

informativos pero no requieren de

nuestra interacción siguiente tercer

ejemplo de una página web

tenemos la página de web pro otro

producto digital y si hacemos clic y

hacemos zoom vamos a ver que tiene

varias secciones que cumplen este mismo

trabajo nos presenta

un título con una pequeña información

un pequeño testimonio de alguien que usa

esta plataforma un pequeño vídeo e

información acerca de las cosas que se

pueden conseguir bastante informativo

pero no requiere que nosotros

interactuamos aquí más allá de

simplemente pasar por esta información y

consumirla vemos algunos ejemplos

porque esto hasta ahora hemos visto solo

sitios web cierto de los sitios web como

vimos anteriormente a diferencia de las

aplicaciones tienden a ser básicamente

informativos pero estas estos elementos

de que son informativos pasivos también

los tenemos en aplicaciones

vamos a ver aplicaciones de celular en

este caso estamos viendo la aplicación

tiempo en pantalla que viene con el

iphone es una pantalla una captura de

pantalla que saque y vamos a ver que hay

secciones que son claramente únicamente

informativas por ejemplo esta parte que

destaque de color amarillo es

simplemente su objetivo presentar esa

información no tengo que hacer nada no

tengo que hacer clic no tengo que abrir

no simplemente veo la información ahí a

diferencia por ejemplo de la sección que

tengo más abajo que es

completamente interactiva y nos invita a

que es más activa y nos invita a pinchar

para ver el resto de información en este

caso solamente la parte esta que está

destacada en amarillo es completamente

pasiva porque su único trabajo es

presentarme la información veamos otra

otra

otro pantallazo que saqué de mi celular

que en este caso es la aplicación de

mailing que es la aplicación que utilizo

para enviar mi newsletter puedes ver que

esta sección es completamente pasiva lo

único que tiene que hacer es presentarme

a la información de cuál es mi

porcentaje de apertura cuál es el

porcentaje de clics cuál es el

porcentaje de suscriptores en promedio

etcétera etcétera aquí lo tengo nada que

hacer simplemente consumir la

información y veamos un último ejemplo

que en este caso es la aplicación

dischord y aquí vemos que sí voy a

editar mi cuenta no tengo habilitado en

este momento la autentificación de dos

factores y me da cierta información me

dice que porque la autenticación de dos

factores me va a permitir proteger mi

cuenta etcétera etcétera y me presenta

un link

el link está ahí por si quiero hacerle

clic pero la información ya ha sido

entregada por lo tanto para resumir en

los elementos informativos pasivos

son aquellos elementos dentro de una

interfaz cuyo único objetivo es

presentarme información presentar la

información al usuario y tenemos que

diseñarlo de tal forma de tal forma que

el usuario sepa que el objetivo de este

elemento que está frente a sus ojos es

un elemento que solo está ahí para

entregar información y que no necesita

hacer nada adicional para para poder

acceder a esa información puede tener

enlaces puede tener enlaces como éste de

habilitar la autenticación de dos

factores o como el ver más pero a la

hora de diseñar tenemos que considerar o

tenemos que hacerlo de cierta forma que

el usuario sepa que no es una obligación

hacer clic en estos enlaces y esto

generalmente tiene que ver con la forma

en que redactamos

por ejemplo el botón ver más o poner el

texto ver más es bastante claro es decir

oye ya te entregué la información pero

si quieres seguir puedes hacer clic en

ver más cierto

vamos a ver ahora los elementos

informativos pero que son activos ya qué

nos referimos cuando hablamos de

elementos informativos activos son

elementos que al igual que los

anteriores

su propósito es entregar información su

propósito es presentarte cierto

contenido pero que requieren de tu

intervención o de la intervención del

usuario para cumplir el propósito de

entregarte esa información

vamos a ver algunos ejemplos

vamos a ver el ejemplo de la página de

apple la página de apple cuando tú vas a

la sección del imac que es el computador

todo-en-uno de apple en la primera

pantalla lo que ves es la orillita de

este computador y conforme vas haciendo

scroll este monitor se va haciendo más

pequeñito y va mostrando el título por

lo tanto la el objetivo de esta sección

es entregarte la información que dice

imac pretty green power food y luego la

imagen y el texto que tienes abajo pero

para poder mostrar esta imagen o para

poder mostrar este contenido requiere

que el usuario haga scroll o se desplace

a lo largo de la página para mostrar esa

información de lo contrario simplemente

no la mostraría bien es un elemento

informativo pero requiere interacción

del usuario para poder cumplir el

objetivo de presentar esa información

un clásico ejemplo en este caso estamos

viendo la página de la tercera que es un

periódico aquí en chile

las noticias es un clásico porque en

este caso de esta sección te presenta

varias noticias pero ninguna de estas

noticias te presenta la información

cierto simplemente te presenta los

enlaces y es suficiente para capturar tu

atención pero si quieres ver por ejemplo

las instrucciones para usar un trozo

perfecto de carne para asar un trozo de

carne según francis mallmann es

necesario que hagas clic porque eso

simplemente te da el título y tomaste

una imagen para convencerte pero no es

suficiente para entregarte la

información por lo tanto tienes que

pinchar y eso te lleva a otro lugar y

ahí vas a encontrar la información por

eso es un elemento informativo pero es

activo requiere tu interacción y me

parece curiosa la selección de los

elementos que por un lado está cómo ser

vegano y por otro lado cómo hacer un

trozo perfecto de carne no tiene nada

que ver con diseño pero me parece

curiosa la selección de esos dos

elementos

que varios cultivos

vamos con otro ejemplo en la página de

sonido en la página de sony tenemos

varios elementos que son informativos

pero tenemos varios elementos que son

informativos activos vamos a enfocarnos

en este caso en esta sección de última

tecnología como pueden ver en esta

sección nos presentan algunos productos

destacados o algunas novedades pero es

una es un slider por lo tanto requiere

que nosotros hagamos clic en este icono

de la flechita hacia la derecha para

mostrarnos el resto de la información y

que el contenido se desplace de un lado

a otro por lo tanto es su objetivo

entregar información pero nos invita a

interactuar para que ésta para que

podamos ver todo el contenido vamos a

algunos ejemplos de aplicaciones móviles

en este caso es la aplicación to twist

una aplicación que sirve para crear

listas de tareas

y obviamente esto es algo que se repite

en muchas aplicaciones podríamos

llamarle al menú una o a los menús una

sección que sería informativa activa

porque nos presenta la información nos

presenta ciertos enlaces pero tenemos

que interactuar con ellos para que esa

información que nos está entregando

tenga sentido no no tiene un sentido en

sí mismo que nosotros veamos un icono de

un engranaje

la palabra general eso no nos entrega

ninguna información pero si hacemos clic

encima vamos a acceder a información por

eso le llamo activo a este a este tipo

de páginas con este tipo de interfaces

vamos a ver también en el app store que

es donde uno entra en el celular a

buscar aplicaciones nuevas que tiene

esta sección en donde se ven diferentes

pantallazos de una de una aplicación y

tú tienes que hacer el desplazamiento

horizontal para ver todas estas

pantallas entonces esto es activo porque

si bien podría simplemente pasarlo de

largo y ver simplemente la información

que hay pantalla necesita que tú

intervengas y hagas el el acto de

desplazarte horizontalmente para

presentarte toda la información

y el tercer ejemplo que en este caso es

una aplicación que yo uso casi a diario

que es web tools que es una aplicación

para leer cómics y aquí vemos que

prácticamente toda la primera pantalla

es una pantalla es una interfaz

informativa pero activa porque arriba

tenemos este slider en donde vamos

pasando de un slide a otro para ver los

cómics destacados luego tenemos mis

series en donde me muestra cuáles han

sido los cómics últimamente actualizados

de los cuales yo leo más abajo tenemos

una sección de publicidad y luego en más

recomendaciones pero básicamente casi

todos los elementos dentro de una de

esta primera pantalla de web tmz es

informativa pero activa requiere de

nuestra interacción entonces la

conclusión con respecto a las a los

elementos o las secciones informativas

pero activas es que

tenemos que diseñarlo de tal forma que

al usuario le resulte fácil le resulte

intuitivo entender que tiene que

interactuar con esta sección para poder

acceder a toda la información que le

estamos presentando una forma útil de

hacerlo es por ejemplo como lo vemos acá

en la sección de mis series en donde

vemos que hay dos elementos pero el

tercero queda cortado a la mitad y eso

le da cierta pista al usuario de que hay

más contenido oculto por lo tanto voy a

desplazarme para ver el resto del

contenido lo mismo hacen acá con en la

app store cuando quedan escondidas

algunas pantallas y le da a entender

usar hoy hay más contenido por acá lo

mismo con el menú en donde tenemos las

flechitas que le dice oye situada si

usted hace clic aquí va a ir a otro

lugar o incluso como lo hacía son y

viste que hay una imagen cortada por lo

tanto te invita a saber que hay más

información hacia hacia el costado

entonces es importante que cuando

diseñamos elementos que sean

informativos pero activos le hagamos

entender a nuestros usuarios que tienen

que intervenir que tienen que hacer algo

para

el resto del contenido que no se le está

presentando de manera inmediata

y vamos a ver el tercer tipo de

elementos dentro de una interfaz a los

cuales yo he llamado elementos

interactivos y cuál es el objetivo de

los elementos interactivos es permitir

que el usuario interactúe ya sea

entregando información y recibiendo

información relevante en respuesta el

ejemplo más obvio de todo esto sería un

formulario cierto o un formulario de

búsqueda como el que tenemos en google

si alguien como yo está buscando cómo

enseñar el diseño bueno puede tener está

está este campo de búsqueda en donde

puede comenzar a ingresar ciertos

términos y la aplicación en este caso la

aplicación de google va respondiendo con

hoy quizás se está buscando esto que se

está buscando esto otro entonces ahí el

usuario puede ingresar información y

está recibiendo información de vuelta

vemos otro ejemplo un tweet

básicamente la página de twitter es

bastante interactiva porque por un lado

tenemos la parte de arriba en donde

podemos crear un tweet en donde estamos

escribiendo aquí tranqui grabando una

lección de mi curso de diseño etcétera

etcétera

puedo tutearlo esa es una parte

interactiva porque yo estoy ingresando

información y al momento de clic en el

botón twitter me va a responder su

tweets a enviado

pero además el resto de los tweets que

estoy viendo acá por ejemplo en este

caso que está el tweet de lady gaga

también es interactivo porque puedo

ingresar información al ponerle corazón

por ejemplo o tengo él

este tweet de apple que está

promocionado creo o no sé si es

promocionado o no pero también podría

ponerle un corazón podría compartir es

completamente interactivo esto

vamos a ver un tercer ejemplo que es

spotify obviamente es una aplicación y

es altamente interactiva puedo ponerle

play a una canción entonces la acción

que yo estoy ingresando es mi interés de

poner el play y la acción que recibo de

vuelta es la respuesta que recibo es que

la música empieza a sonar y que la

barrita abajo empieza a andar y así

sucesivamente hay un montón de cosas que

puedo hacer en spotify que es

prácticamente una aplicación del todo

interactiva veamos algunas aplicaciones

de celular

e instagram obviamente es completamente

interactivo aquí y sea una captura de

pantalla de delitos para atrás en donde

hay muchas interacciones que yo puedo

hacer acá puedo ponerle corazoncito

puedo dejar un comentario puedo

compartir puedo ver la historia

delicious padróns puedo hacer clic en

los tres puntitos y puedo hacer más

acciones puedo desplazarme hacia la

derecha o hacia la izquierda para ver el

resto de las imágenes de esta colección

entonces

aparentemente pareciera que twitter es

una pareciera que instagram al momento

de mostrarnos los posts es pasivo es

informativo pero no lo es es

completamente interactivo porque todo el

tiempo

nosotros estamos ingresando información

no estamos a diferencia de google por

ejemplo no estamos ingresando

información escribiendo la información

pero si la estamos ingresando a partir

de hacer clic que a partir de hacer

slide a partir de comentar a partir de

darle

2 para darle corazoncito etcétera

etcétera

no hace falta que explique por qué la

aplicación de google maps es interactiva

es lo más interactivo que hay y si bien

podemos ingresar nosotros información a

partir de escribir arriba y recibir las

recomendaciones abajo es completamente

interactivo cuando ponemos el dedo y

vamos desplazando los ahí también

estamos ingresando información no la

estamos ingresando textualmente pero si

estamos ingresando información

georreferenciada en donde movernos de un

lado o al otro

y por último otro ejemplo que en este

caso es más estrictamente un formulario

que es cuando vas a crear un evento en

la aplicación de calendarios del iphone

cierto entonces ahí tienes que ingresar

información tiene que ingresar un título

hay que ingresar una ubicación definir

una hora hay un montón de cosas

interactivas que puedes hacer y

es importante que al momento de diseñar

elementos interactivos dentro de una

interfaz seamos bastante claros en

permitir que el usuario se entere de

manera fácil e intuitiva que tiene que

intervenir acá por qué o qué puede

intervenir porque no todas las

interacciones son necesariamente

obligatorias pero debemos trabajar de

tal forma que el usuario sepa que aquí

puede intervenir si así lo quiere o

cuando es necesario que se entienda de

manera automática que es necesario que

intervenga para pasar al siguiente paso

o realizar cierta acción entonces

nuestro objetivo al momento de diseñar

elementos informativos elementos

informativos pasivos elementos

informativos activos o elementos

interactivos es que utilicemos los

principios del diseño los que aprendimos

en la elección anterior para permitir

que el usuario le saque el máximo

provecho a cada elemento con facilidad

bien espero que estos esta división de

los elementos entre informativos activos

informativos pasivos e interactivos te

sea de utilidad a mí me resulta bastante

útil

porque cuando estoy diseñando una

interfaz llego a una sección y me

pregunto de inmediato ok el objetivo de

esta interfaz o de este de esta sección

o de este elemento es entregar

información o interactuar con el usuario

ok es entregar información y para

entregar esa información no voy a

requerir que el usuario interactúe o voy

a simplemente entregar la información de

una sola vez y eso va a sin duda

determinar cómo voy a diseñar esos

elementos si los iban a ser informativos

voy a poner mi foco principal en que la

información sea fácil de consumir si el

objetivo es informativo pero activo voy

a poner mi foco en que el usuario

entienda que debe interactuar con esta

sección para acceder a toda la

información pero que se entienda de

inmediato que no es un no es un ingreso

de información no es una interacción

real no no va a tener una respuesta

propia sino que simplemente se hace la

acción que le estoy pidiendo que haga va

a ver el resto del contenido que está

oculto pero si son elementos

interactivos tengo que trabajar

el diseño de tal forma que el usuario

sepa que aquí va a interactuar y que de

esta interacción va a resultar una cosa

diferente va a resultar que va a

publicar un tweet va a resultar que le

puso corazoncito a una foto en instagram

va a resultar que va a encontrar unos

unos resultados de búsqueda en google

etcétera etcétera es importante

entenderlo porque nos va a facilitar el

momento de diseñar y que aquí le vamos a

poner foco a la hora de diseñar cada

elemento espero que esto te sea útil y

si tienes mejores nombres para estas

tres divisiones de gemela en un

comentario bien eso es todo por ahora y

nos vemos en la próxima elección soy yo