Diseño de Interfaces: Estructuras y Componentes Interactivos

Clase 9 de 35 • Curso de Diseño de Interfaces Móviles

Resumen

No es necesario que todas las cards que definamos tengan la misma forma. Dependiendo del tipo de información que vamos a mostrar vamos a definir la conveniencia del uso de diferentes tipos de cards.
Agrupa la información de manera que el usuario la pueda consumir de mejora forma.
Organízala en el bloques y listados.

Edgar Rios

student•

Sería ventajoso que agregaran subtitulo de palabras no español cuando las mencionan, así se facilita la investigación externa como estudiantes.

Alvaro Julian Carreño Granados

student•

Para representar información.

Card
Carrusel
Acordeón
Giro

Si estoy escribiendo mal el último (giro) por favor corregirme.

Wilson Marino Pablo Mendez

student•

Es "Hero"

Niko Rivera

student•

AFFORDANCE: Como un elemento le comunica al usuario como se va a interactuar con el!

Bianca Meléndez Arellana

student•

Punto clave:

Agrupar la información de manera que el usuario la pueda consumir de mejor forma, organizada en bloques y listados.

Diego Perdomo

student•

Presentar información:

No es necesario que todas las cards que definamos tengan la misma forma. Dependiendo del tipo de información que vamos a mostrar vamos a definir la conveniencia del uso de diferentes tipos de cards.
- Carrousel -> lista horizontal que funicona con scroll
- Hero image: imagen más grande de lo normal, sirve para captar la atención y es lo primero que ven nuestros usuarios
- Accordion: Esconder o mostrar elementos. Algo pequeño que se hace grande.
Agrupa la información de manera que el usuario la pueda consumir de mejora forma.
Organízala en el bloques y listados.

Ariadna Martiñon

student•

“Los affordances aportan pistas claras del funcionamiento de las cosas. Las barras son para empujar, los pomos para darles la vuelta. Las ranuras para insertar cosas en ellas. Las pelotas para lanzar o botar.” Donald Norman

Estuardo González

student•

¿Alguien conoce algun estudio que compare la importancia del contenido multimedia versus el contenido escrito? En qué, cómo, porqué tiene un mayor impacto el contenido multimedia que un contenido escrito... Gracias, es de gran ayuda el aporte, estaré atento a las respuestas.

Miguel Moya Montero

student•

** > ** CHEVRON

Giselle GL

student•

El affordance: es la capacidad que tiene un producto para que la persona usuaria anticipe cómo utilizarlo. Son señales que ofrecen información sobre cómo podemos interactuar con algo, sin importar si es físico o digital.

Laura Luna

student•

Algo que me parece clave y que me ha costado trabajo es aprender a definir formas de presentar información que mantengan muy similar la experiencia en iOS y Android intentando respetar los elementos nativos y las respectivas guías de diseño de cada sistema operativo. Por ejemplo, si en Android estoy usando un menú dropdown, que elementos puedo usar en iOS para representarlo de una forma equivalente sin incluir este elemento que no encaja dentro de Human Interface.

Durjeibis Escudero Torres

student•

Gracias por la información. Me quedo con pensar en bloues.

ZAYRA SAAVEDRA URIBE

student•

Carrusel. Dentro de una porción de la pantalla vamos a poder representar un pedazo de información de una forma que el usuario no los vea todos al mismo tiempo y que quizá lo vea un poco más enfocado. Tiene la particularidad que se interactúa con sus aids horizontales. Debemos tener en cuenta el affordance y como un elemento le va a comunicar al usuario de qué manera se va a interactuar con él. Va a mostrar el borde de el siguiente elemento esperando que el usuario lo vea. Un recurso es recurrir a una especie de paginación.

Accordion. Nos permite representar un pedazo de información en un espacio más pequeño dando la posibilidad de que podamos ver más al respecto. Plantea partir de algo pequeño a algo grande y para pasar de un algo a otro necesito un triger, un elemento que sirva para expandir o contraer, podría ser un +. Debemos tener en cuenta que podría llegar a generar fricción si dentro de la interacción de mostrar mas contenido quiero mostrar otros tipos de acciones, estas van a quedar ocultas para el usuario o un menú hamburguesa con sesiones que solo estarán disponibles al expandir.

Listado. Como ayudar al usuario a qué se dé cuenta, qué es lo que está viendo. Twitter utiliza el recurso de un encabezado, me indica dónde estoy, me sigue mientras estoy scroleando. Tengo acceso a ver más cuando llego al final de ese bloque. De qué manera puedo agrupar la información de tal manera que el usuario la pueda consumir mucho mejor. Hay que pensar siempre en distribuir la información en bloques.

Hero. Cuando queremos destacar algo por sobre otras. Parecido al carrusel en cuanto a la interacción pero suele ocupar la totalidad de la pantalla. Puede llegar a reemplazar cierta parte de la navegación, que aparezca y desaparezca. Esto va a condicionar cómo se va a mostrar la información.

Argemiro Reyes

student•

“Pensar en bloques!”

Melina Anahi Viera

student•

DEPENDIENDO EL TIPO DE INFO DECIDIMOS EL FORMATO.

Si es mucho texto, si tiene imagen, etc

Estructuras que el user ya conoce para condensar informacion grande AFFORDANCE lo que el objeto nos dice que puede llegar a hacer

Trigger ELEMENTO QUE NOS AYUDA A PASAR DE UN ESTADO AL OTRO, PARA EXPANDIR O CONTRAER

FORMA DE LISTADO como ayudar al user a darse cuenta lo que estas viendo Te sigue el tittle

SIEMPRE PENSAR EN BLOQUE para que el user sepa lo que ve

COLUMNAS - Iquier a derecha leemos

HERO tipo de carrousel

Interacciones condicionan como se muestra la informacion Research uno mismo para tener un entendimiento mas macro. AFFORDANCE elementos que te ayudan Chevron - flechita

Jesus Barazarte

student•

Existen estructuras que nos permiten presentar el contenido de una manera indicada conforme al sitio donde se presente y al contenido que se presente. Es importante entender como un elemento le puede indicar a un usuario como interactuar con el, y de que manera hacerlo. Tras todo esto se resume que: la informacion y el contenido se debe presentar de la manera mas entendible a los usuarios y en el formato mas conveniente dependiendo de el sitio donde viva.

Jenffry José Bencomo Hernandez

student•

Research de interfaz favorables para tu App

Daniela Cobos

student•

El "Hero" es un elemento visual utilizado en diseño de interfaces que ocupa una porción significativa de la pantalla, generalmente al inicio de una página o aplicación. Su función principal es destacar información clave, como un título, una imagen o un llamado a la acción. Es común en aplicaciones y páginas web, ya que captura la atención del usuario y establece el tono del contenido. A menudo, los "Heroes" interactúan con el desplazamiento de la página, lo que permite un diseño envolvente y dinámico.

Fredy Granados

student•

es importante, realizar un research para ver como están solucionando la interacción del usuario en diferentes aplicaciones.

Jeisson Espinosa

student•

Información resumida de esta clase #EstudiantesDePlatzi

Dependiendo de la información podemos definir cual es el mejor formato para mostrar
Existen estructuras que ya los usuarios conocen
El secreto esta en pensar en bloques
El trabajo previo es muy importante, el de ideación, investigación y planeación
Dentro de nuestra interfaz es importante indicarle al usuario que es interactivo

Sebastian Nuñez

student•

Falta didáctica en las clases. En general, no hay capacitación para capacitar. Platzi esta muy flojo en eso ya que es una plataforma educativa. Son profesionales explicando lo que hacen y como lo hacen. Algo les falta.

Diseño de Interfaces: Estructuras y Componentes Interactivos

Bienvenido al Curso de Diseño de Interfaces Moviles

Diseño de Interfaces Móviles: Teoría y Práctica Dinámica

Introducción al Diseño Mobile

Historia y Evolución del Diseño de Interfaz Móvil

Diseño de Interfaces Móviles: iOS y Android

Lineamientos

Diseño de Interfaz Mobile: Descomposición de Componentes

Gestos de Interacción en Aplicaciones Móviles

Adaptación de Interfaces Desktop a Móviles: Claves y Estrategias

Diseño de Interfaces: Flujos y Navegación en Apps

Diseño de Tarjetas para Aplicaciones de Restaurantes

Diseño de Interfaces: Estructuras y Componentes Interactivos

Diseño de Interacciones y Jerarquía de Acciones en Apps

Diseño de Onboarding para Aplicaciones Móviles

Colaboración Efectiva entre Diseñadores y Desarrolladores en UI/UX

Introducción al Proyecto

Diseño de Productos Digitales: Del Prototipo a la Experiencia Mobile

Web

Diseño web adaptativo para dispositivos móviles

Diseño de Interfaz Mobile: Adaptación de Pantallas Desktop

Adaptación de Diseño de Interfaz de Desktop a Mobile

Diseño Visual para Aplicaciones Móviles: Proceso y Consideraciones

Metodología

Diseño de Experiencias Móviles y Onboarding Efectivo

Diseño de Experiencias de Usuario en Apps Móviles

Diseño de Onboarding para Aplicaciones Móviles

iOS

Diseño de Interfaz de Usuario para iOS: Uso de UI Kits y GUI

Diseño de Interfaces iOS: Navegación y Componentes Básicos

Diseño de Interfaces de Usuario para Aplicaciones iOS

Diseño de Interfaces Visuales para iOS: Unificación y Estética

Android

Diseño de Interfaces Android con Material Design

Transformación de Interfaces iOS a Material Design en Android

Diseño de Interfaces Android con Material Design

Notificaciones

Diseño Efectivo de Notificaciones en Apps

Diseño y Gestión de Notificaciones en Aplicaciones Digitales

Prototipos

Prototipado de Interfaces con Sketch para iOS

Prototipos Interactivos con Flinto: Paso a Paso para Principiantes

Handoff

Creación de un UI Kit en Sketch para aplicaciones iOS

Exportación de Diseños de Sketch a Zeppelin para iOS

Conclusiones

Diseño de Interfaces para iOS y Android: Guía Completa