Curso Diseño UI - 9 Elementos de una Interfaz
Summary
TLDREn 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
📚 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.
🔍 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.
💬 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.
🎯 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.
🛠 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.
Mindmap
Keywords
💡Interfaces digitales
💡Elementos informativos pasivos
💡Elementos informativos activos
💡Elementos interactivos
💡Diseño de interfaces
💡Información
💡Interacción del usuario
💡Ejemplos prácticos
💡Claridad en el diseño
💡Aplicaciones móviles
💡Intuición del usuario
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
5.0 / 5 (0 votes)